/* ============================================================
   A.G. Appraisal Group, LLC - design tokens
   Every value here is argued for in DESIGN.md.
   Palette measured off the only photograph of Al that exists.
   ============================================================ */

:root {
  /* brand - hue 213, averaged from 74,690 px of his own shirt */
  --brand: #1F4E79;
  --brand-hi: #4A87BE;
  --brand-lift: #6BA3D4;
  --brand-deep: #12314C;
  --brand-pale: #DCE8F2;
  --brand-glow: 31, 78, 121;

  /* action - hue 17, off the most saturated cluster in the photo (the wood).
     If it is not a call, an order, or a request, it is not terracotta. */
  --cta: #B4542E;
  --cta-hi: #CE6A40;
  --cta-deep: #8A3F22;
  --cta-pale: #F5E4DB;
  --cta-ink: #FFFFFF;
  --cta-glow: 180, 84, 46;

  /* paper - warm, matching the hue 21 wall behind him */
  --paper: #F6F1EA;
  --paper-2: #EDE5D9;
  --paper-3: #E3D8C8;

  /* ink - cool near black, biased toward the blue */
  --ink: #12181E;
  --ink-deep: #0B0F13;
  --panel: #1A2128;
  --panel-2: #232C35;

  /* text on paper */
  --t-ink: #1A1F24;
  --t-body: #3A434C;
  --t-muted: #5E6B75;
  --t-dim: #7C8791;

  /* text on ink */
  --t-paper: #EEF2F5;
  --t-paper-2: #C3CCD4;
  --t-paper-dim: #8A96A1;

  --hairline: #D8CEBE;
  --hairline-ink: #2A343E;

  --ok: #2F7D52;
  --warn: #B4542E;

  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: .18s;
  --slow: .5s;

  --r-sm: 4px;
  --r: 8px;
  --r-lg: 16px;
  --r-pill: 999px;

  --wrap: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
@media (min-width: 700px) { .wrap { padding: 0 32px; } }

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600;
}

/* Tap targets. A thumb is not a mouse. */
.tap { min-height: 48px; display: inline-flex; align-items: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 15px 28px;
  background: var(--cta); color: var(--cta-ink);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-weight: 650; font-size: 14px; letter-spacing: .04em;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.btn:hover { background: var(--cta-hi); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--ghost { background: transparent; color: var(--brand); border-color: currentColor; }
.btn--ghost:hover { background: rgba(var(--brand-glow), .07); transform: none; }

/* Tables that must never widen the page on a phone. */
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroller table { min-width: 620px; }

:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; border-radius: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--cta); color: #fff; padding: 14px 18px;
  min-height: 48px; display: inline-flex; align-items: center;
}
.skip:focus { left: 8px; top: 8px; }

/* The flag saying which direction this is, with a way back to the chooser. */
.mockup-flag {
  position: fixed; left: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; gap: 9px;
  background: rgba(11,15,19,.93); backdrop-filter: blur(10px);
  border: 1px solid var(--hairline-ink); border-left: none; border-bottom: none;
  border-radius: 0 var(--r) 0 0; padding: 8px 14px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--t-paper-dim); max-width: calc(100vw - 20px);
}
.mockup-flag b { color: var(--brand-lift); font-weight: 600; }
.mockup-flag a {
  color: #fff; border-left: 1px solid var(--hairline-ink);
  padding-left: 10px; min-height: 44px; display: inline-flex; align-items: center;
}


/* ---------------------------------------------------------------
   The real testimonial. One of these exists now, so it gets to be
   bigger than the placeholders sitting under it. Colours are set
   inline per direction because the palettes are not the same.
   --------------------------------------------------------------- */
.realquote {
  margin: 0 0 20px; padding: 26px 22px;
  border: 1px solid; border-left-width: 4px; border-radius: var(--r-lg);
}
.realquote .rq-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
  margin-bottom: 15px;
}
.realquote blockquote { margin: 0; }
.realquote blockquote p { font-size: 16px; line-height: 1.68; }
.realquote blockquote p + p { margin-top: 13px; }
.realquote figcaption {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(128,128,128,.32);
  display: grid; gap: 3px;
}
.realquote figcaption b { font-size: 15.5px; font-weight: 700; letter-spacing: -.005em; }
.realquote figcaption span { font-size: 14px; }
@media (min-width: 900px) {
  .realquote { padding: 34px 32px; margin-bottom: 24px; }
  .realquote blockquote p { font-size: 17.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}