/* ==========================================================================
   FindYourDomain.com
   The only stylesheet the site loads. Hand-edited; no build step.

   Structure:
     tokens -> base -> header -> buttons -> home sections -> interior
     sections -> animations -> interaction -> responsive

   Two typefaces, one variable file each: Plus Jakarta Sans for everything,
   JetBrains Mono for figures only (stat totals, step numerals, prices).
   The neutral ramp is warm on purpose -- cool greys fought the coral.
   ========================================================================== */

/* Both families are variable fonts: one file each, covering the whole
   weight range. Declaring them per-weight would make the browser fetch the
   same file once per weight. */
@font-face {
  font-family: "Jakarta";
  src: url("../fonts/jakarta-var.woff2") format("woff2");
  font-weight: 400 800; font-display: swap;
}
@font-face {
  font-family: "JetBrains";
  src: url("../fonts/jetbrains-var.woff2") format("woff2");
  font-weight: 400 800; font-display: swap;
}

/* Token notes:
   --coral   #ee7164 is 2.92:1 on white. Fine as a surface, never behind
             white text or as text itself; --coral-d is the accessible
             action colour.
   --mono    Figures only: stat totals, step numerals, prices. Fixed pitch
             makes the sale amounts align digit-for-digit down the column,
             which a proportional face cannot do. Incidental numbers inside
             sentences stay on --sans. */
:root {
  --coral:   #ee7164;
  --coral-d: #c03c29;
  --coral-l: #fdeee7;
  --cream:   #fdf6ee;
  --peach:   #fbe7d6;
  --ink:     #1c1714;
  --body:    #5f564e;
  --line:    #ece4db;
  --tint:    #faf6f1;
  --sans:    "Jakarta", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wrap:    1120px;
  --r:       14px;
}

*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; height: auto; display: block; }

body {
  margin: 0;
  background: #fff;
  color: var(--body);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 26px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

h1, h2, h3 { color: var(--ink); font-weight: 800; line-height: 1.07; letter-spacing: -.035em; margin: 0 0 .45em; }
h1 { font-size: clamp(2.6rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.2rem; letter-spacing: -.02em; }

p { margin: 0 0 1.1em; }
a { color: var(--coral-d); text-decoration: none; }
a:hover { text-decoration: underline; }

.kicker { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--coral-d); margin: 0 0 1em; }
.head { max-width: 640px; margin-bottom: 44px; }
.head .sub { color: var(--body); margin: 0; font-size: 1.05rem; }

/* --- Header ------------------------------------------------------------- */
.masthead { border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); z-index: 40; }
.masthead .wrap { display: flex; align-items: center; gap: 26px; padding-top: 15px; padding-bottom: 15px; }

.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 800; font-size: 1.05rem; letter-spacing: -.03em; }
.logo:hover { text-decoration: none; }
.logo__mark {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 9px; background: var(--coral-d); color: #fff;
  font-size: .62rem; font-weight: 800; letter-spacing: .02em;
}

.nav { margin-left: auto; }

/* Collapsed navigation. The button is revealed by JS only -- without
   scripting the full nav stays in the bar, wrapping but usable, rather
   than hiding behind a control that cannot open. */
.navtoggle { display: none; }
.navtoggle__bars { display: block; width: 19px; height: 13px; position: relative; }
.navtoggle__bars i {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .22s ease, opacity .18s ease, top .22s ease;
}
.navtoggle__bars i:nth-child(1) { top: 0; }
.navtoggle__bars i:nth-child(2) { top: 5.5px; }
.navtoggle__bars i:nth-child(3) { top: 11px; }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(1) { top: 5.5px; transform: rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(3) { top: 5.5px; transform: rotate(-45deg); }
.nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav a { color: var(--body); font-size: .92rem; font-weight: 700; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); text-decoration: none; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block; padding: 16px 30px; border: 0; border-radius: 11px;
  background: var(--coral-d); color: #fff;
  font: 700 1rem/1.2 var(--sans); cursor: pointer; white-space: nowrap;
}
.btn:hover { background: #ad3722; color: #fff; text-decoration: none; }
.btn--sm { padding: 10px 18px; font-size: .88rem; border-radius: 9px; }
.btn--light { background: #fff; color: #a83322; }
.btn--light:hover { background: var(--coral-l); color: var(--coral-d); }

/* --- Hero --------------------------------------------------------------- */
/* The old hero was near-white, which left the dark animation card sitting in
   a void. Warmth is concentrated on the right, under the card, so the jump
   from background to panel is a gradient rather than a cliff.

   overflow:hidden contains the .viz--stack halo, which is wider than its
   column and would otherwise push the page 3px wide at phone widths.

   The base gradient is biased horizontally rather than vertically: the copy
   column stays on cream so body text keeps its contrast, and the warmth
   builds toward the card. */
.hero {
  padding: 84px 0 80px;
  overflow: hidden;
  background:
    radial-gradient(620px 380px at 88% 10%, rgba(244,166,60,.34), transparent 64%),
    radial-gradient(680px 430px at 78% -4%, rgba(238,113,100,.20), transparent 66%),
    linear-gradient(100deg, var(--cream) 0%, var(--cream) 38%, var(--peach) 100%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 60px;
  align-items: center;
}
.pill {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: .8rem; font-weight: 700; color: var(--coral-d); margin: 0 0 1.6em;
}
.mark { color: #db5847; }   /* 3.7:1 -- clears the 3:1 large-text bar; #ee7164 was 2.92 */
.lede { font-size: 1.18rem; max-width: 32em; margin: 1.1em 0 0; }

.ask {
  display: flex; gap: 10px; max-width: 580px; margin: 34px 0 0;
  background: #fff; border: 1px solid var(--line); border-radius: 15px;
  padding: 10px; box-shadow: 0 18px 44px rgba(22,24,29,.09);
}
.ask input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 14px 16px;
  font: 400 1.05rem/1.4 var(--sans); color: var(--ink);
}
.ask input::placeholder { color: #857a70; }
.ask input:focus { outline: none; }
.ask:focus-within { border-color: var(--coral); box-shadow: 0 0 0 4px rgba(238,113,100,.14), 0 18px 44px rgba(22,24,29,.09); }

.reassure { display: flex; gap: 20px; flex-wrap: wrap; margin: 20px 0 0; font-size: .87rem; color: #6b6058; }

/* --- Stats -------------------------------------------------------------- */
/* Separation by elevation rather than another band of colour: the row
   lifts over the hero edge, which also stitches the two sections together
   instead of drawing a line between them. */
.stats { position: relative; z-index: 3; margin-top: -56px; }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; }
.stats__grid div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 18px;
  box-shadow: 0 16px 38px rgba(74,42,22,.10);
}
.stats b { display: block; font-family: var(--mono); font-size: 2.05rem; font-weight: 700; color: var(--ink); letter-spacing: -.045em; }
/* Must exclude the icon: it is also a <span>, and a bare `.stats span`
   rule outranks `.stats__icon` and would turn it into a left-hugging
   block. */
.stats span:not(.stats__icon) { display: block; margin-top: 4px; font-size: .85rem; }

/* Centred with auto margins rather than text-align: the icon is also a
   <span>, so the bare `.stats span` label rule outranks it. */
.stats__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  margin: 0 auto 14px;
  border-radius: 13px;
  background: var(--coral-l);
  color: var(--coral-d);
}
.stats__icon svg { width: 22px; height: 22px; }

/* --- Press citation bar -------------------------------------------------
   Intentionally quiet. Two outlets is not a logo wall, and inflating it
   would do more harm than the strip does good. */
.pressbar { padding: 40px 0 4px; }
.pressbar .wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 10px 22px; flex-wrap: wrap;
}
/* #8c8077 measured 3.84:1 on white -- under AA for a label this small. */
.pressbar__label {
  margin: 0;
  font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #6f6459;
}
.pressbar__list {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
.pressbar__list li {
  font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
}
.pressbar__more { font-size: .86rem; font-weight: 700; }

@media (max-width: 620px) {
  .pressbar { padding: 32px 0 0; }
  .pressbar .wrap { gap: 8px 16px; }
  .pressbar__list { gap: 16px; }
  .pressbar__list li { font-size: .92rem; }
}

/* --- Sections ----------------------------------------------------------- */
.section { padding: 92px 0; }
.section--tint { background: var(--tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sub2 { margin: 60px 0 20px; font-size: 1.1rem; }

/* --- Steps -------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px; }
.steps__n {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--coral-l); color: #ad3722;
  font-family: var(--mono); font-weight: 700; font-size: .92rem; margin-bottom: 16px;
}
.steps h3 { margin-bottom: .35em; font-size: 1.05rem; }
.steps p { margin: 0; font-size: .93rem; }

/* --- Duo panels --------------------------------------------------------- */
.duo { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; }
/* Grid items default to min-width:auto, so a nowrap button wider than its
   column drags the whole cell past the viewport. */
.duo > * { min-width: 0; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 34px; }
.panel--hero { background: linear-gradient(150deg, #c8422f 0%, #a83322 100%); border-color: transparent; color: #fff; }
.panel--hero h3 { color: #fff; font-size: 1.5rem; }
.panel--hero p { color: #fff; }
.panel .arrow { font-weight: 700; }

.panel__icon {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: 13px;
  background: var(--coral-l);
  color: var(--coral-d);
}
.panel__icon svg { width: 23px; height: 23px; }
/* On the coral panel the tinted chip would vanish, so invert it. */
.panel--hero .panel__icon { background: rgba(255,255,255,.18); color: #fff; }

/* --- Chips -------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chips li {
  padding: 12px 20px; border-radius: 999px; background: var(--tint);
  border: 1px solid var(--line); font-weight: 700; color: var(--ink); font-size: 1rem;
}

/* --- Sales table -------------------------------------------------------- */
.scroll { overflow-x: auto; }
.sales { width: 100%; border-collapse: collapse; font-size: .98rem; }
.sales th, .sales td { text-align: left; padding: 15px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sales thead th { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #6f6459; font-weight: 700; }
.sales td:first-child { font-weight: 700; color: var(--ink); }
.sales .r { text-align: right; }
.sales .amt { font-family: var(--mono); font-weight: 700; font-size: .93rem; letter-spacing: -.02em; color: var(--coral-d); }
.sales tbody tr:last-child td { border-bottom: 0; }

/* --- Closing ------------------------------------------------------------ */
.closing { padding: 96px 0; text-align: center; background: linear-gradient(150deg, #c8422f 0%, #a83322 100%); color: #fff; }
.closing h2 { color: #fff; }
.closing > .wrap > p { max-width: 34em; margin-left: auto; margin-right: auto; }
/* .ask is left-aligned in the hero column, so the centred copy in the
   closing band has to put its auto margins back. */
.closing .ask { margin-left: auto; margin-right: auto; }
.ask--dark { box-shadow: 0 18px 44px rgba(0,0,0,.16); border-color: transparent; }
.closing__alt { margin-top: 20px; font-size: .92rem; color: #fff; }
.closing__alt a { color: #fff; text-decoration: underline; }

/* --- Footer ------------------------------------------------------------- */
.footer { background: var(--ink); color: #b8aa9e; padding: 56px 0 26px; font-size: .92rem; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding-bottom: 38px; border-bottom: 1px solid #332a24; }
.footer .logo { color: #fff; margin-bottom: 14px; }
.ftitle { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 1.1em; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .55em; }
.footer a { color: #d2c6ba; }
.footer a:hover { color: #fff; }
.footer__base { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 22px; font-size: .82rem; }

/* ==========================================================================
   ANIMATIONS
   Warm extension of the palette, used only inside the two animated mounts:
   gold -> amber -> ember -> deep, so the motion reads as heat without
   introducing a second brand colour anywhere in the static UI.
   ========================================================================== */
:root {
  --gold:   #ffd166;
  --amber:  #f4a63c;
  --ember:  #e4572e;
  --deep:   #a83322;
  --night:  #1b1410;
}

.viz { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; }

/* --- Hero 1 · split-flap board ------------------------------------------ */
.viz--flap { perspective: 900px; }
.flap {
  width: 100%;
  background: linear-gradient(170deg, #241a15 0%, var(--night) 100%);
  border-radius: 16px;
  padding: 22px 24px 18px;
  box-shadow: 0 26px 60px rgba(22,24,29,.28);
}
.flap__title {
  font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #968678; padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid #332620;
}
.flap__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid #2a1f1a;
  transition: background .3s ease;
}
.flap__row:last-child { border-bottom: 0; }
.flap__name { display: flex; gap: 1px; }
.flap__ch {
  display: inline-block; min-width: .62em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .96rem; font-weight: 700; color: #968678;
  transition: color .3s ease;
}
.flap__ch.is-flip { color: var(--amber); transform: rotateX(42deg); }
.flap__price {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92rem; font-weight: 700; color: #968678; white-space: nowrap;
  transition: color .3s ease;
}
.flap__row.is-on {
  background: linear-gradient(90deg, rgba(244,166,60,.16), rgba(244,166,60,0) 85%);
}
.flap__row.is-on .flap__ch { color: var(--gold); }
.flap__row.is-on .flap__price { color: var(--amber); }

/* --- Hero · spotlight stack --------------------------------------------- */
.viz--stack { position: relative; perspective: 1100px; }
/* Warm halo under the stack. Bridges the hero wash and the dark card so the
   panel reads as lit rather than cut out. */
.viz--stack::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 118%; height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(224,118,60,.30), transparent 72%);
  pointer-events: none;
}
.stack { position: relative; width: 100%; max-width: 420px; height: 260px; }
/* Warm dark brown rather than near-black, so the card sits in the warm
   hero instead of punching a hole in it. */
.stack__card {
  position: absolute; inset: 0 0 auto 0;
  background: linear-gradient(155deg, #33241c 0%, #241a14 100%);
  border: 1px solid #4a3528;
  border-radius: 18px;
  padding: 26px 28px;
  box-shadow: 0 24px 54px rgba(74,42,22,.26);
  transition: transform .55s cubic-bezier(.22,.8,.3,1), opacity .55s ease;
  will-change: transform, opacity;
}
.stack__card.is-front {
  background:
    radial-gradient(420px 220px at 18% 0%, rgba(255,209,102,.26), transparent 70%),
    linear-gradient(155deg, #3d291f 0%, #261b15 100%);
  border-color: #64432f;
}
.stack__card.is-out { transform: translateY(-34px) scale(1.03) !important; opacity: 0 !important; }
/* #968678 measured 4.24:1 against the light end of the card gradient,
   under AA for small text. Lifted 4% to clear 4.5:1 at both stops. */
.stack__venue { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #9c8b7d; }
.stack__name { margin: 12px 0 6px; font-size: 1.85rem; font-weight: 800; color: #fff; letter-spacing: -.035em; }
.stack__price {
  font-family: var(--mono);
  font-size: 1.85rem; font-weight: 700; letter-spacing: -.04em;
  background: linear-gradient(92deg, var(--gold), var(--amber) 60%, var(--ember));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stack__tag {
  position: absolute; top: 22px; right: 24px;
  font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--night); background: var(--gold);
  padding: 5px 10px; border-radius: 999px;
}

/* --- Hero 3 · taken, then sold ------------------------------------------ */
.viz--taken { }
.taken {
  width: 100%; max-width: 430px;
  background: linear-gradient(165deg, #2a1c16 0%, var(--night) 100%);
  border-radius: 18px; padding: 28px;
  box-shadow: 0 26px 60px rgba(22,24,29,.28);
}
.taken__label { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: #968678; margin-bottom: 14px; }
.taken__field {
  display: flex; align-items: center; min-height: 56px;
  background: #130d0a; border: 1px solid #3a2a22; border-radius: 11px;
  padding: 0 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.1rem; color: #fff;
}
.taken__caret { width: 2px; height: 1.25em; background: var(--amber); margin-left: 3px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.taken__verdict { margin-top: 18px; min-height: 92px; }
.taken__stamp {
  display: inline-block;
  font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ember); border: 2px solid var(--ember); border-radius: 7px;
  padding: 6px 12px;
  opacity: 0; transform: rotate(-7deg) scale(1.5);
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,1.4,.4,1);
}
.taken__stamp.is-on { opacity: 1; transform: rotate(-7deg) scale(1); }
.taken__sold {
  margin-top: 14px; opacity: 0; transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}
.taken__sold.is-on { opacity: 1; transform: none; }
.taken__soldlabel { display: block; font-size: .78rem; color: #968678; letter-spacing: .04em; }
.taken__price {
  display: block; margin-top: 2px;
  font-size: 2.05rem; font-weight: 800; letter-spacing: -.04em;
  background: linear-gradient(92deg, var(--gold), var(--amber) 55%, var(--ember));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- Closing · name stream ---------------------------------------------- */
/* The mask fades the ends so chips enter and leave rather than popping. */
.stream {
  margin: 0 0 40px;
  display: grid; gap: 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.stream__row { overflow: hidden; }
.stream__track { display: flex; gap: 10px; width: max-content; will-change: transform; }
.stream__chip {
  padding: 9px 16px; border-radius: 999px; white-space: nowrap;
  font-size: .9rem; font-weight: 700;
  color: #ffe6e1;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.18);
  transition: color .4s ease, background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.stream__chip.is-lit {
  color: var(--night);
  background: linear-gradient(92deg, var(--gold), var(--amber));
  border-color: transparent;
  box-shadow: 0 0 22px rgba(255,209,102,.5);
}

/* Reduced motion: hold a legible end state, never an empty frame. */
@media (prefers-reduced-motion: reduce) {
  .taken__caret { animation: none; }
  .stack__card, .taken__stamp, .taken__sold, .stream__chip { transition: none; }
}

/* --- Scroll reveal ------------------------------------------------------
   The hiding class is applied by JS, never in the stylesheet, so if the
   script fails or is blocked the page renders fully visible instead of
   blank. Stagger comes from an inline transition-delay. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}
.reveal--fade { transform: none; }   /* table rows: transforms on <tr> are flaky */
.reveal.is-in { opacity: 1; transform: none; }

/* Stats band gets its own entrance rather than the generic rise: the cards
   drop in from above with a slight overshoot, and the mono figure inside
   each one flips up on its baseline a beat later. Two gestures, so the
   figure still lands as the punchline. */
.stats__grid { perspective: 900px; }
.stat-drop {
  opacity: 0;
  transform: translateY(-24px);
  transition: opacity .45s ease, transform .6s cubic-bezier(.22,1.3,.38,1);
}
.stat-drop.is-in { opacity: 1; transform: none; }

.stats b { transform-origin: 50% 100%; }
.stat-flip {
  opacity: 0;
  transform: rotateX(-78deg);
  transition: opacity .4s ease .18s, transform .62s cubic-bezier(.2,1.15,.35,1) .18s;
}
.stat-flip.is-in { opacity: 1; transform: none; }

/* --- Interaction states -------------------------------------------------
   Deliberately restrained: hover lifts go only on things that are actually
   interactive. The chips and stat cards are static content, so giving them
   hover states would advertise a click that does nothing. The sales row
   highlight is a reading aid for a dense table, not an affordance. */
.sales tbody tr { transition: background .18s ease; }
.sales tbody tr:hover { background: var(--tint); }

.panel { transition: transform .22s ease, box-shadow .22s ease; }
.panel:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(74,42,22,.12); }

.masthead { transition: box-shadow .25s ease; }
.masthead.is-stuck { box-shadow: 0 6px 22px rgba(74,42,22,.07); }

/* A branded focus ring. Previously every control fell back to the browser
   default, which is invisible against the coral button. */
:focus-visible {
  outline: 3px solid var(--coral-d);
  outline-offset: 3px;
  border-radius: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .stat-drop, .stat-flip { opacity: 1 !important; transform: none !important; transition: none !important; }
  .panel:hover, .guides li:hover { transform: none; }
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1040px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .viz { min-height: 0; }
  .stack { margin: 0 auto; }
  /* Once the hero is a single column the animation leads, so the first
     thing on the page is the proof rather than the pitch -- and it
     condenses to name and price only, at every stacked width rather than
     just on phones. */
  .hero__viz { order: -1; }
  .hero__copy { order: 0; }
  .stack { height: 172px; max-width: 360px; }
  .stack__card { padding: 20px 22px; border-radius: 15px; }
  .stack__venue { display: none; }
  .stack__name { margin: 0 0 2px; font-size: 1.5rem; }
  .stack__price { font-size: 1.8rem; }
  .stack__tag { top: 18px; right: 20px; font-size: .58rem; padding: 4px 8px; }
}

/* --- Collapsed navigation ------------------------------------------------
   Raised from 860px when a sixth nav item (Insights) was added: the bar
   stops fitting beside the logo and CTA earlier than it used to. */
@media (max-width: 940px) {
  .js-nav .masthead .wrap { flex-wrap: nowrap; gap: 12px; }

  .js-nav .navtoggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    background: #fff; color: var(--ink);
    border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  }
  .js-nav .navtoggle:hover { border-color: var(--coral); }

  .js-nav .masthead .btn--sm { margin-left: auto; }

  .js-nav .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 32px rgba(74,42,22,.10);
    display: none;
  }
  .js-nav .nav[data-open] { display: block; }
  .js-nav .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0; }
  .js-nav .nav li + li { border-top: 1px solid var(--line); }
  .js-nav .nav a {
    display: block; padding: 15px 26px; font-size: 1rem;
    border-bottom: 0;
  }
  .js-nav .nav a[aria-current="page"] {
    color: var(--coral-d); border-bottom: 0;
    box-shadow: inset 3px 0 0 var(--coral-d);
  }
}

@media (max-width: 960px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .duo { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero { padding: 62px 0 58px; }
  .section { padding: 64px 0; }
}
@media (max-width: 620px) {
  .masthead .wrap { flex-wrap: wrap; gap: 13px; }
  .nav { margin-left: 0; width: 100%; order: 3; }
  .nav ul { flex-wrap: wrap; gap: 8px 18px; }
  .steps { grid-template-columns: 1fr; }
  /* Stacked cards need less overlap than a single row does. */
  .stats { margin-top: -28px; }
  .stats__grid { grid-template-columns: 1fr; }
  .stats__grid div { padding: 24px 18px; }
  .ask { flex-direction: column; }
  .btn { width: 100%; white-space: normal; }   /* long CTA labels must wrap */
  /* The header CTA is a small button and should not span the full width
     the way the form submits do. */
  .btn--sm { width: auto; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }

  /* Hero, condensed. The pill repeats "since 2002", which the stats band
     states a screen later, so it goes rather than push the headline down. */
  .hero { padding: 32px 0 48px; }
  .pill { display: none; }
  .hero__grid { gap: 24px; }

  /* Card tightened again for phones: the point of it here is proof, not
     presence, and every pixel it gives back lifts the headline and the
     inquiry field up the screen. */
  /* Container must clear the front card plus three 8px offsets, or the
     back layers spill onto the headline below. */
  .stack { height: 120px; max-width: 100%; }
  .stack__card { padding: 14px 16px; border-radius: 13px; }
  .stack__name { margin: 0 0 1px; font-size: 1.12rem; }
  .stack__price { font-size: 1.3rem; }
  .stack__tag { top: 13px; right: 14px; font-size: .54rem; padding: 3px 7px; }

}

/* Below this the logo, CTA and toggle stop coexisting; the hero's own form
   is immediately beneath, so the header CTA goes rather than squeeze. */
@media (max-width: 480px) {
  .js-nav .masthead .btn--sm { display: none; }
  .js-nav .navtoggle { margin-left: auto; }
}

/* ==========================================================================
   INTERIOR PAGES
   Everything below is used by /about-us, /our-services, /media, /contact-us
   and the two legal pages. The home page does not load any of it.
   ========================================================================== */

/* --- Page header -------------------------------------------------------- */
.pagehead {
  padding: 68px 0 60px;
  background:
    radial-gradient(520px 300px at 88% 10%, rgba(244,166,60,.26), transparent 64%),
    linear-gradient(100deg, var(--cream) 0%, var(--cream) 42%, var(--peach) 100%);
  border-bottom: 1px solid var(--line);
}
.pagehead h1 { margin-bottom: .25em; font-size: clamp(2.2rem, 4.6vw, 3.2rem); }
.pagehead p { margin: 0; max-width: 44em; font-size: 1.1rem; }

/* --- Long-form copy ----------------------------------------------------- */
.prose { max-width: 680px; }
.prose h2 { margin-top: 1.7em; font-size: clamp(1.5rem, 2.6vw, 1.95rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.5em; font-size: 1.15rem; }
.prose ul { padding-left: 1.15em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .55em; }
.prose .btn { margin-top: .4em; }

/* --- Press list --------------------------------------------------------- */
.press-group {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--coral-d);
  margin: 2.4em 0 .4em;
}
.press-group:first-of-type { margin-top: 1.4em; }
.press { list-style: none; margin: 0; padding: 0; }
.press li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.press li:last-child { border-bottom: 0; }
.press h4 { margin: 0 0 .3em; font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; }
.press time { font-size: .84rem; color: var(--body); }
.press p { margin: .45em 0 0; font-size: .96rem; }

/* --- Brand asset downloads ---------------------------------------------- */
.downloads {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px; list-style: none; margin: 0; padding: 0;
}
.downloads li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px; text-align: center;
}
.downloads .thumb { display: flex; align-items: center; justify-content: center; height: 82px; margin-bottom: 16px; }
.downloads .thumb img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.downloads h4 { margin: 0 0 .3em; font-size: .97rem; font-weight: 700; }
.downloads a { font-size: .9rem; font-weight: 700; }

/* --- Insights index ----------------------------------------------------- */
.guides {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.guides li {
  position: relative;            /* anchor for the stretched link */
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.guides li:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(74,42,22,.10); border-color: #e0d4c6; }

.guides__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: 13px;
  background: var(--coral-l);
  color: var(--coral-dark);
}
.guides__icon svg { width: 23px; height: 23px; }

.guides h2 { font-size: 1.25rem; margin-bottom: .4em; }
.guides h2 a { color: var(--ink); }
.guides h2 a:hover { color: var(--coral-d); text-decoration: none; }

/* The heading anchor is the card's only link; this stretches its hit area
   over the whole box. A second real <a> for the CTA would hand screen
   readers a duplicate of the same destination, so the CTA is a span. */
.guides h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.guides p { margin: 0 0 18px; font-size: .96rem; }

.guides__cta {
  margin-top: auto;              /* pin to the bottom, so cards align */
  font-size: .9rem; font-weight: 700; color: var(--coral-d);
}
.guides li:hover .guides__cta { color: #ad3722; }

/* Keyboard focus lands on the heading anchor, whose visible box is just the
   text. Lift the ring onto the whole card so it matches the click target. */
.guides li:has(a:focus-visible) { outline: 3px solid var(--coral-d); outline-offset: 3px; }
.guides li:has(a:focus-visible) h2 a:focus-visible { outline: none; }

/* Breadcrumb back to the section index. */
.pagehead .kicker a { color: var(--coral-d); }

/* --- Contact ------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 52px; align-items: start; }
.contact-details {
  background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--r); padding: 30px;
}
.contact-details h2 { font-size: 1.5rem; }
.contact-details dl { margin: 0; }
.contact-details dt {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--body); margin-top: 20px;
}
.contact-details dt:first-of-type { margin-top: 0; }
.contact-details dd { margin: 5px 0 0; font-size: 1.02rem; color: var(--ink); }

/* Alpaca injects this form at runtime from /contact-form/form.php, so these
   selectors target its generated markup rather than ours. */
#contact-form .form-group { margin-bottom: 18px; }
#contact-form label {
  display: block; margin-bottom: 8px;
  font-size: .76rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
  width: 100%; padding: 14px 16px;
  font: 400 1rem/1.5 var(--sans); color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
}
#contact-form input:focus, #contact-form textarea:focus {
  outline: none; border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(238,113,100,.14);
}
#contact-form textarea { min-height: 160px; resize: vertical; }
#contact-form .alpaca-form-buttons-container { margin-top: 24px; }
#contact-form button, #contact-form input[type="submit"] {
  display: inline-block; padding: 16px 30px; border: 0; border-radius: 11px;
  background: var(--coral-d); color: #fff;
  font: 700 1rem/1.2 var(--sans); cursor: pointer;
}
#contact-form button:hover, #contact-form input[type="submit"]:hover { background: #ad3722; }
/* Alpaca renders the required marker glued to the label text, which the
   uppercase styling turns into "NAME(REQUIRED)". */
#contact-form .alpaca-required-indicator {
  margin-left: .45em;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: lowercase;
  color: var(--body);
}

#contact-form .alpaca-message.alpaca-message-invalid,
#contact-form .help-block { color: var(--coral-d); font-size: .86rem; }

/* Shown only if the third-party form never renders -- see assets/js/ask.js. */
.form-fallback {
  background: var(--tint); border: 1px solid var(--line);
  border-left: 3px solid var(--coral-d); border-radius: var(--r);
  padding: 20px 24px; font-size: .96rem;
}
.form-fallback p:last-child { margin-bottom: 0; }

/* Driven by ?success / ?failure on the contact page. */
.banner { border-radius: var(--r); padding: 16px 20px; margin-bottom: 26px; font-size: .97rem; }
.banner--ok   { background: #edf6ed; border: 1px solid #c6e2c7; color: #255c2b; }
.banner--fail { background: var(--coral-l); border: 1px solid #f3cec5; color: #99321f; }


@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 620px) {
  .pagehead { padding: 44px 0 40px; }
  .pagehead p { font-size: 1.02rem; }
  .guides { grid-template-columns: 1fr; }
  .guides li { padding: 22px; }
}

/* --- Legal pages ---------------------------------------------------------
   Long statutory prose: numbered sections, a dense reference table, and a
   dateline. Narrower measure than ordinary prose so the clauses stay
   readable at length. */
.prose--legal { max-width: 68ch; }
.prose--legal h2 { margin-top: 2.4em; font-size: 1.32rem; }
.prose--legal h3 { margin-top: 1.8em; font-size: 1.05rem; color: var(--ink); }
.prose--legal li { margin-bottom: .55em; }
/* The opt-out URLs in the privacy policy are printed in full and have no
   break opportunities, so on a phone a single link is wider than the
   viewport and drags the page with it. Let them break mid-string. */
.prose--legal { overflow-wrap: break-word; }
.prose--legal a { overflow-wrap: anywhere; }

/* Lettered sub-clauses, e.g. the brokerage disclosures in Terms section 4.
   Word renders these as "(a)", "(b)"; list-style lower-alpha would give
   "a." instead, so the marker is drawn from a counter. */
.prose--legal ol.alpha { list-style: none; counter-reset: alpha; padding-left: 2.4em; }
.prose--legal ol.alpha > li { counter-increment: alpha; position: relative; }
.prose--legal ol.alpha > li::before {
  content: "(" counter(alpha, lower-alpha) ")";
  position: absolute; left: -2.4em; width: 2em;
  text-align: right; color: var(--body); font-variant-numeric: tabular-nums;
}
.legal-date {
  font-size: .9rem; color: var(--body);
  padding-bottom: 18px; margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

/* Reference table (the CCPA category disclosure). Small type, because it
   is four columns of prose rather than figures. */
table.legal { width: 100%; border-collapse: collapse; font-size: .86rem; margin: 6px 0 28px; }
table.legal th, table.legal td {
  border: 1px solid var(--line); padding: 10px 12px;
  text-align: left; vertical-align: top;
}
table.legal th { background: var(--tint); font-weight: 700; color: var(--ink); }

}