/* ==========================================================================
   Local Traffic Marketing — stylesheet
   Palette is taken directly from the Advisor Evolved Visual Brand Guidelines.
   Type: Anton (headlines) / Instrument Serif (secondary) / Google Sans Flex (body)
   ========================================================================== */

/* --- 1. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
:where(h1, h2, h3, h4) { font-weight: inherit; text-wrap: balance; }
p { text-wrap: pretty; }

/* --- 2. Tokens ----------------------------------------------------------- */
:root {
  /* Brand — Advisor Evolved primary & secondary */
  --indigo:      #3624DD;
  --indigo-lift: #7266E7;
  --sky:         #62C6FF;
  --signal:      #FFD336;   /* traffic-signal yellow — used sparingly, 3x max */
  --won:         #5DD987;
  /* Star gold. Deliberately NOT --signal: that yellow is the conversion action
     and nothing else. Derived warm amber, 8.6:1 on the card surface. */
  --gold:        #F0A81E;

  /* Brand — text & background */
  --ink-950: #0B072C;   /* derived: --indigo at 20% over black. A near-black violet,
                           for a dark surface that must read as raised off --ink-850 */
  --ink-900: #00004B;
  --ink-850: #06064F;   /* derived tint of #00004B for elevated surfaces */
  --ink-800: #0D0D55;   /* derived tint */
  --ink-700: #19195D;
  --ink-600: #33336F;
  --ink-500: #4C4C81;
  --ink-300: #9999B7;
  --paper-100: #F9F8FE;
  --paper-200: #F7F7FA;
  --paper-300: #E5E5ED;
  --white: #FFFFFF;

  /* Type */
  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body:    "Google Sans Flex", "Google Sans", system-ui, -apple-system,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --t-hero:  clamp(2.9rem, 7.2vw, 6.25rem);
  --t-h2:    clamp(2.3rem, 5.2vw, 4.25rem);
  --t-h3:    clamp(1.45rem, 2.3vw, 2rem);
  --t-lead:  clamp(1.0625rem, 1.4vw, 1.3125rem);
  --t-body:  1.0625rem;
  --t-sm:    0.9375rem;
  --t-xs:    0.8125rem;
  --t-micro: 0.6875rem;

  /* Layout */
  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --band-pad: clamp(4.5rem, 9vw, 8rem);

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;
  --r-pill: 999px;
  --r-btn: 5px;

  --line-ink: color-mix(in srgb, var(--sky) 16%, transparent);
  --line-paper: var(--paper-300);

  --ease: cubic-bezier(0.22, 0.75, 0.28, 1);
}

/* --- 3. Base ------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 380;
  line-height: 1.62;
  color: var(--ink-700);
  background: var(--ink-900);
  font-variation-settings: "opsz" 20;
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.015em;
}

/* Headline emphasis, band-aware. Neither colour works on both grounds: indigo
   is 2.2:1 on the dark bands, sky is 1.8:1 on the light ones. Same split the
   .lead rules use. */
.accent { color: var(--indigo); }
.band--ink .accent,
.band--ink2 .accent { color: var(--sky); }

.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

/* --- 4. Layout primitives ------------------------------------------------ */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}
.wrap--narrow { --wrap: 860px; }

/* One padding rule for every band; modifiers only change colour. */
.band { padding-block: var(--band-pad); position: relative; }
.band--ink   { background: var(--ink-900); color: var(--paper-100); }
.band--ink2  { background: var(--ink-850); color: var(--paper-100); }
.band--paper { background: var(--paper-100); color: var(--ink-700); }
.band--white { background: var(--white); color: var(--ink-700); }
.band--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  font-weight: 350;
  max-width: 62ch;
}
.band--ink .lead,
.band--ink2 .lead { color: color-mix(in srgb, var(--paper-100) 78%, var(--ink-300)); }
.band--paper .lead,
.band--white .lead { color: var(--ink-500); }

/* Section header block */
.head { display: grid; gap: 1.15rem; max-width: 46rem; }
.head h2 { font-size: var(--t-h2); }
.head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* --- 5. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  border-radius: var(--r-btn);
  font-size: var(--t-sm);
  /* Body line-height is 1.62, which was padding every button by ~9px of
     nothing. Buttons set their own. */
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--indigo); color: var(--white); }
.btn--primary:hover { background: var(--indigo-lift); }

.btn--signal { background: var(--signal); color: var(--ink-900); font-weight: 660; }
.btn--signal:hover { background: color-mix(in srgb, var(--signal) 84%, var(--white)); }

.btn--ghost { border-color: color-mix(in srgb, var(--sky) 34%, transparent); color: var(--paper-100); }
.btn--ghost:hover { border-color: var(--sky); background: color-mix(in srgb, var(--sky) 10%, transparent); }

/* Filled secondary, for the hero's video button. Solid enough to read as a
   button rather than an outline, but an ink tint and NOT --signal: the yellow
   stays the one conversion action on the page. */
.btn--solid { background: var(--ink-700); color: var(--paper-100); border-color: color-mix(in srgb, var(--sky) 26%, transparent); }
.btn--solid:hover { background: var(--ink-600); border-color: color-mix(in srgb, var(--sky) 52%, transparent); }

.btn--outline { border-color: var(--ink-300); color: var(--ink-700); }
.btn--outline:hover { border-color: var(--indigo); color: var(--indigo); }

.btn--lg { padding: 1rem 1.75rem; font-size: var(--t-body); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

/* Arrow that nudges on hover */
.btn svg { flex: none; transition: transform .22s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

/* --- 6. Focus ------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 3px;
}
.skip {
  position: absolute; left: 0.75rem; top: -100px; z-index: 200;
  background: var(--signal); color: var(--ink-900);
  padding: 0.7rem 1.1rem; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 620; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip:focus { top: 0.75rem; }

/* --- 7. Header ----------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ink-900) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.hdr.is-stuck {
  border-bottom-color: var(--line-ink);
  background: color-mix(in srgb, var(--ink-900) 94%, transparent);
}
.hdr__in {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 74px;
}

/* Logo lockup — pin on the brand gradient, wordmark flat white. Shipped as
   outlines, so it needs no font file and cannot reflow or FOUT. */
.logo { display: flex; align-items: center; text-decoration: none; flex: none; }
.logo__img { height: 34px; width: auto; display: block; }
.logo__img--ftr { height: 40px; }

.nav { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; }
.nav a:not(.btn) {
  font-size: var(--t-sm); font-weight: 450; text-decoration: none;
  color: color-mix(in srgb, var(--paper-100) 74%, var(--ink-300));
  transition: color .18s var(--ease);
}
.nav a:not(.btn):hover { color: var(--paper-100); }
.hdr .btn { padding: 0.62rem 1.1rem; }

.burger { display: none; width: 42px; height: 42px; margin-left: auto; align-items: center; justify-content: center; }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--paper-100); position: relative; transition: background-color .2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--paper-100);
  transition: transform .24s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --- 8. Hero ------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem); }
/* Ambient: a faint indigo bloom behind the junction. One effect, not many. */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(58rem 34rem at 50% 78%, color-mix(in srgb, var(--indigo) 26%, transparent), transparent 68%),
    radial-gradient(34rem 22rem at 88% 6%, color-mix(in srgb, var(--sky) 10%, transparent), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; }

/* Analytics field behind the hero — a plot of ascending series on a chart grid.
   It fills the void to the right of the headline and argues "growth" without
   competing with the routing board, which is still the signature element.
   Masked so it is strongest top-right and gone by the time it reaches the
   headline and the board. */
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  /* Two masks intersected: fade in from the left so the headline sits on clean
     ground, and fade out at the bottom so nothing runs into the routing board. */
  -webkit-mask-image:
    linear-gradient(102deg, transparent 0%, #000 30%),
    linear-gradient(to bottom, #000 0%, #000 40%, transparent 64%);
          mask-image:
    linear-gradient(102deg, transparent 0%, #000 30%),
    linear-gradient(to bottom, #000 0%, #000 40%, transparent 64%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.hero__chart { width: 100%; height: 100%; display: block; }

.hline { opacity: 0.78; }
.hline--b { opacity: 0.38; }
.hline--c { opacity: 0.32; }

/* Same stroke-dashoffset technique as the routing board, so the two read as
   one visual language rather than two effects. */
.hpulse { stroke-dasharray: 7 93; opacity: 0.85; animation: hrun 11s linear infinite; }
.hpulse--b { animation-duration: 14s; animation-delay: -4s; }
.hpulse--c { animation-duration: 17s; animation-delay: -9s; }
@keyframes hrun { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

.hdot { fill: var(--sky); opacity: 0.55; animation: hbeat 5.5s var(--ease) infinite; animation-delay: var(--d, 0s); }
@keyframes hbeat { 0%, 100% { opacity: 0.28; r: 3.5; } 50% { opacity: 0.8; r: 5; } }

/* Hidden on phones and small tablets: at those widths the field has no room to
   read as a chart, and it would only sit under the copy as noise. */
@media (max-width: 56.24em) {
  .hero__bg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hpulse { animation: none; stroke-dashoffset: 58; }
  .hdot { animation: none; opacity: 0.5; }
}

.hero__head { max-width: 68rem; }
.hero h1 { font-size: var(--t-hero); margin-block: 1.35rem 0; }
/* The counter-voice: Instrument Serif italic set against Anton's weight. */
.hero h1 em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: -0.012em;
  color: var(--sky);
}
.hero__lead { margin-top: 1.5rem; }
.hero .btn-row { margin-top: 2.25rem; }
.hero__note {
  margin-top: 1.1rem; font-size: var(--t-xs); color: var(--ink-300);
  display: flex; align-items: flex-start; gap: 0.5rem;
}
.hero__note::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  margin-top: 0.6em; background: var(--won); flex: none;
}

/* --- 9. Signature: the Routing Board ------------------------------------- */
.board { margin-top: clamp(3rem, 6vw, 5rem); }
.board__frame {
  border: 1px solid var(--line-ink);
  border-radius: var(--r-lg);
  /* Opaque on purpose: the hero's analytics field sits behind this, and a
     translucent panel let it read straight through the diagram.
     --ink-950, the same surface as the #crm pipeline mock: the panel used to
     end on --ink-900, the exact colour of the band behind it, so it had no
     edge. Darker than its ground also makes the --ink-700 nodes inside read
     as raised rather than sunk. */
  background: var(--ink-950);
  padding: clamp(1rem, 2.4vw, 1.75rem);
}
.board__bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding-bottom: 1rem; margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--line-ink);
}
.board__bar h2 {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--paper-100);
}
.board__bar span { font-size: var(--t-xs); color: var(--ink-300); margin-left: auto; }

.board__svg { width: 100%; height: auto; display: block; }
.board__stack { display: none; }

/* SVG board internals */
.rb-node { fill: color-mix(in srgb, var(--ink-700) 78%, transparent); stroke: var(--line-ink); stroke-width: 1; }
.rb-node--won { stroke: color-mix(in srgb, var(--won) 52%, transparent); }
.rb-junction { fill: color-mix(in srgb, var(--indigo) 26%, var(--ink-800)); stroke: color-mix(in srgb, var(--indigo-lift) 62%, transparent); stroke-width: 1.25; }
.rb-label { font-family: var(--font-body); font-size: 15px; font-weight: 560; fill: var(--paper-100); font-variation-settings: "opsz" 16; }
.rb-sub { font-family: var(--font-body); font-size: 11px; font-weight: 450; fill: var(--ink-300); letter-spacing: 0.05em; }
.rb-cap { font-family: var(--font-body); font-size: 10.5px; font-weight: 620; letter-spacing: 0.16em; fill: var(--ink-300); text-transform: uppercase; }
.rb-wire { fill: none; stroke: var(--line-ink); stroke-width: 1.5; }
.rb-pulse { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 94; }
.rb-pulse--in  { stroke: var(--sky); }
.rb-pulse--out { stroke: var(--indigo-lift); }
.rb-pulse--won { stroke: var(--won); }

@keyframes rb-travel { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.rb-pulse { animation: rb-travel 3.4s linear infinite; }
.rb-pulse[data-d="1"] { animation-delay: -0.0s; }
.rb-pulse[data-d="2"] { animation-delay: -0.85s; }
.rb-pulse[data-d="3"] { animation-delay: -1.7s; }
.rb-pulse[data-d="4"] { animation-delay: -2.55s; }
.rb-pulse[data-d="5"] { animation-delay: -0.4s; }
.rb-pulse[data-d="6"] { animation-delay: -1.25s; }
.rb-pulse[data-d="7"] { animation-delay: -2.1s; }
.rb-pulse[data-d="8"] { animation-delay: -2.95s; }

@keyframes rb-breathe { 0%,100% { opacity: .28; transform: scale(1); } 50% { opacity: .06; transform: scale(1.13); } }
.rb-ring { fill: none; stroke: var(--indigo-lift); stroke-width: 1.25; transform-origin: 480px 208px; animation: rb-breathe 3.4s var(--ease) infinite; }

/* --- 10. Reviews marquee ------------------------------------------------- */
.reviews { border-block: 1px solid var(--line-ink); overflow: hidden; }

/* Without JS this is a plain scrollable row; JS duplicates the cards and adds
   .is-looping, which switches it to the continuous marquee. */
.marquee { overflow-x: auto; scrollbar-width: none; }
.marquee::-webkit-scrollbar { display: none; }
.marquee.is-looping {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee__track { display: flex; gap: 1rem; padding-inline: var(--gutter); }
.marquee.is-looping .marquee__track {
  width: max-content;
  padding-inline: 0;
  animation: marquee 90s linear infinite;   /* slow enough to actually read */
}
@keyframes marquee { to { transform: translateX(-50%); } }
/* Pause while someone is reading one. */
.marquee.is-looping:hover .marquee__track,
.marquee.is-looping:focus-within .marquee__track { animation-play-state: paused; }

.rcard {
  flex: 0 0 auto;
  width: min(23rem, 78vw);
  display: grid; gap: 0.85rem; align-content: start;
  padding: 1.35rem 1.45rem;
  border: 1px solid var(--line-ink);
  border-radius: var(--r-lg);
  background: var(--ink-800);
}
.rcard__top { display: flex; align-items: center; gap: 0.75rem; }
.rcard__av { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.rcard__who { font-size: var(--t-sm); font-weight: 620; color: var(--paper-100); line-height: 1.3; }
.rcard__who span { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--ink-300); margin-top: 0.1rem; }
.rcard__stars { display: flex; gap: 0.15rem; }
.rcard__star { fill: var(--gold); flex: none; }
.rcard__q {
  font-family: var(--font-serif); font-size: 1.1875rem; line-height: 1.35;
  color: color-mix(in srgb, var(--paper-100) 92%, var(--ink-300));
}

@media (prefers-reduced-motion: reduce) {
  /* Freeze the loop and hand scrolling back to the reader. */
  .marquee.is-looping { overflow-x: auto; }
  .marquee.is-looping .marquee__track { animation-name: none !important; transform: none !important; }
}


/* --- 11. Problem --------------------------------------------------------- */
.prob { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: 1fr; }
/* Left column: headline over the funnel. Right column: the lead, which sets up
   the four items, sitting directly above them. */
.prob__aside { display: grid; gap: clamp(2rem, 4vw, 3rem); align-content: start; }
.prob__main { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); align-content: start; }

/* Funnel: traffic narrowing to bound premium.

   The band is light, so the ramp runs --sky (inbound signal) to --won (the
   closed state) with every intermediate mixed from those two. That keeps the
   whole ramp light enough for --ink-900 labels at one weight, and it says
   what the diagram means: an inbound signal turning into a bound policy. */
/* width:100% is load-bearing. margin-inline:auto stops a grid item stretching,
   and an SVG with a viewBox but no width/height then falls back to the 300px
   default replaced size -- max-width alone silently did nothing. */
.funnel { width: 100%; max-width: 28rem; margin-inline: auto; }
.funnel__svg { width: 100%; height: auto; display: block; }

.fn-crowd { fill: color-mix(in srgb, var(--ink-500) 48%, transparent); }

.fn-arrow { stroke: var(--ink-300); stroke-width: 2.2; stroke-dasharray: 2 9; }
.fn-tip   { stroke: var(--ink-300); }

.fn-s1 { fill: var(--sky); }
.fn-s2 { fill: color-mix(in srgb, var(--sky) 74%, var(--won)); }
.fn-s3 { fill: color-mix(in srgb, var(--sky) 50%, var(--won)); }
.fn-s4 { fill: color-mix(in srgb, var(--sky) 26%, var(--won)); }
.fn-s5 { fill: var(--won); }

.fn-label text {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 660;
  letter-spacing: 0.1em; text-transform: uppercase;
  fill: var(--ink-900);
}

.fn-drop { fill: var(--indigo); }

/* Same stroke-dashoffset technique as the routing board, so the two diagrams
   read as one language. Timed linear: --ease is front-loaded enough that a
   travelling dash spends most of the cycle parked at the end. */
.fn-arrow { animation: fn-in 3.4s linear infinite; }
.fn-arrow.fn-b { animation-delay: -0.9s; }
.fn-arrow.fn-c { animation-delay: -1.8s; }
.fn-arrow.fn-d { animation-delay: -2.6s; }
@keyframes fn-in { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }

/* cy is animated as a CSS geometry property, the same way the hero dots animate
   r. The group is clipped to the funnel silhouette, so a drop is only ever
   visible inside the shape. */
.fn-drop { animation: fn-fall 4.2s linear infinite; }
/* The outer two also converge on the centre as they descend, so they follow the
   walls in rather than dropping straight past them. */
.fn-drop.fn-b { animation-name: fn-fall-l; animation-delay: -1.5s; animation-duration: 4.8s; }
.fn-drop.fn-c { animation-name: fn-fall-r; animation-delay: -3s;   animation-duration: 5.2s; }
@keyframes fn-fall {
  0%        { cy: 150px; opacity: 0; }
  12%, 78%  { opacity: 0.85; }
  100%      { cy: 440px; opacity: 0; }
}
@keyframes fn-fall-l {
  0%        { cy: 150px; cx: 168px; opacity: 0; }
  12%, 78%  { opacity: 0.85; }
  100%      { cy: 440px; cx: 196px; opacity: 0; }
}
@keyframes fn-fall-r {
  0%        { cy: 150px; cx: 232px; opacity: 0; }
  12%, 78%  { opacity: 0.85; }
  100%      { cy: 440px; cx: 204px; opacity: 0; }
}
.prob__list { display: grid; gap: 1px; background: var(--line-paper); border-block: 1px solid var(--line-paper); }
.prob__item { background: var(--paper-100); padding: 1.5rem 0; display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.prob__x { width: 22px; height: 22px; flex: none; margin-top: 0.2rem; }
.prob__item h3 { font-size: 1.0625rem; font-weight: 620; color: var(--ink-900); margin-bottom: 0.3rem; }
.prob__item p { font-size: var(--t-sm); color: var(--ink-500); }

/* --- 12. Services -------------------------------------------------------- */
.svc { display: grid; gap: 1px; background: var(--line-ink); border: 1px solid var(--line-ink); border-radius: var(--r-lg); overflow: hidden; margin-top: clamp(2.5rem, 5vw, 4rem); }
.svc__card { background: var(--ink-900); padding: clamp(1.6rem, 2.8vw, 2.4rem); display: grid; gap: 0.85rem; align-content: start; transition: background-color .3s var(--ease); }
.svc__card:hover { background: var(--ink-800); }
.svc__ico { width: 30px; height: 30px; color: var(--sky); margin-bottom: 0.35rem; }
.svc__card h3 { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; letter-spacing: -0.005em; line-height: 1; color: var(--paper-100); }
.svc__card p { font-size: var(--t-sm); color: color-mix(in srgb, var(--paper-100) 62%, var(--ink-300)); }
.svc__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }
.svc__tags li {
  font-size: var(--t-micro); font-weight: 550; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-300); border: 1px solid var(--line-ink); border-radius: var(--r-pill);
  padding: 0.28rem 0.6rem;
}
/* The CRM card is the differentiator — it gets the one signal accent. */
.svc__card--hero { background: var(--ink-800); }
.svc__card--hero:hover { background: color-mix(in srgb, var(--indigo) 14%, var(--ink-800)); }
.svc__card--hero .svc__ico { color: var(--signal); }

/* --- 13. Process — a real sequence, so the numbers carry information ----- */
/* Hairlines come from a 1px grid gap over --line-paper, the same technique as
   .prob__list and .results, so the rules stay correct in one column or two. */
.proc {
  display: grid; gap: 1px; background: var(--line-paper);
  border-block: 1px solid var(--line-paper);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.proc__step {
  background: var(--paper-100);
  display: grid; grid-template-columns: 4.5rem 1fr; gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}
.proc__n {
  font-family: var(--font-display); font-size: 2.5rem; line-height: 0.8;
  color: var(--ink-500); letter-spacing: -0.02em;
}
.proc__step:hover .proc__n { color: var(--indigo); }
.proc__n { transition: color .25s var(--ease); }
.proc__body { display: grid; gap: 0.7rem; max-width: 46rem; }
.proc__body h3 { font-size: var(--t-h3); font-family: var(--font-serif); line-height: 1.15; color: var(--ink-900); }
.proc__body p { color: var(--ink-500); }
.proc__when { font-size: var(--t-micro); font-weight: 620; letter-spacing: 0.16em; text-transform: uppercase; color: var(--indigo); }

/* --- 14. CRM feature ----------------------------------------------------- */
.crm { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
/* Heading over the pipeline mock; lead over the four rows. */
.crm__aside { display: grid; gap: clamp(2rem, 3.5vw, 2.75rem); align-content: start; }
.crm__main { align-self: start; }
.crm__list { display: grid; gap: 1.4rem; margin-top: 2rem; }
.crm__row { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.crm__tick { width: 20px; height: 20px; color: var(--won); flex: none; margin-top: 0.25rem; }
.crm__row h3 { font-size: 1.0625rem; font-weight: 620; color: var(--paper-100); margin-bottom: 0.25rem; }
.crm__row p { font-size: var(--t-sm); color: color-mix(in srgb, var(--paper-100) 60%, var(--ink-300)); }

/* Pipeline mock — the CRM shown, not described */
.pipe { border: 1px solid var(--line-ink); border-radius: var(--r-lg); background: var(--ink-950); overflow: hidden; }
.pipe__bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.15rem; border-bottom: 1px solid var(--line-ink); }
.pipe__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--won); flex: none; }
.pipe__bar strong { font-size: var(--t-xs); font-weight: 620; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-100); }
.pipe__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-ink); }
.pipe__col { background: var(--ink-950); padding: 0.9rem 0.75rem; display: grid; gap: 0.55rem; align-content: start; min-height: 15rem; }
.pipe__h { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.15rem; }
.pipe__h span { font-size: var(--t-micro); font-weight: 620; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-300); }
.pipe__h b { font-size: var(--t-micro); font-weight: 620; color: var(--paper-100); }
.pipe__card {
  border: 1px solid var(--line-ink); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--ink-700) 55%, transparent);
  padding: 0.6rem 0.65rem; display: grid; gap: 0.3rem;
}
.pipe__card em { font-style: normal; font-size: var(--t-xs); font-weight: 580; color: var(--paper-100); }
.pipe__card small { font-size: 0.6875rem; color: var(--ink-300); letter-spacing: 0.03em; }
.pipe__src { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 620; color: var(--sky); }
.pipe__src::before { content: ""; width: 4px; height: 4px; background: currentColor; transform: rotate(45deg); }
.pipe__col--won .pipe__card { border-color: color-mix(in srgb, var(--won) 42%, transparent); }
.pipe__col--won .pipe__src { color: var(--won); }

/* --- 14b. Team ----------------------------------------------------------- */
/* Five across at full width; the portraits are square, so the row reads as one
   band of faces rather than five separate cards. */
.team {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.team__m { display: grid; gap: 0.15rem; align-content: start; }
.team__img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r); margin-bottom: 0.9rem;
}

.team__name { font-size: var(--t-body); font-weight: 660; color: var(--ink-900); }
.team__role { font-size: var(--t-sm); color: var(--ink-500); line-height: 1.45; }

/* --- 15. Proof ----------------------------------------------------------- */
.results { display: grid; gap: 1px; background: var(--line-paper); border: 1px solid var(--line-paper); border-radius: var(--r-lg); overflow: hidden; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.result { background: var(--white); padding: clamp(1.5rem, 2.6vw, 2.25rem); display: grid; gap: 0.6rem; grid-template-rows: auto auto 1fr auto; }
.result__n { font-family: var(--font-display); font-size: clamp(2.75rem, 5vw, 4rem); line-height: 0.85; color: var(--indigo); letter-spacing: -0.02em; }
.result__k { font-size: var(--t-sm); font-weight: 620; color: var(--ink-900); }
.result__d { font-size: var(--t-xs); color: var(--ink-500); line-height: 1.5; }
.result__src { font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); font-weight: 600; }

.quotes { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.quote { background: var(--white); border: 1px solid var(--line-paper); border-radius: var(--r-lg); padding: clamp(1.5rem, 2.6vw, 2.25rem); display: grid; gap: 1.25rem; align-content: start; }
.quote blockquote { font-family: var(--font-serif); font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.3; color: var(--ink-900); }
.quote figcaption { display: flex; align-items: center; gap: 0.75rem; }
.quote__av {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, var(--sky), var(--indigo));
  display: grid; place-items: center;
  font-size: var(--t-xs); font-weight: 700; color: var(--white); letter-spacing: 0.04em;
}
.quote__who { font-size: var(--t-sm); font-weight: 620; color: var(--ink-900); line-height: 1.3; }
.quote__who span { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--ink-500); }

/* --- 16. Pricing --------------------------------------------------------- */
.plans { display: grid; gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); align-items: stretch; }
.plan {
  border: 1px solid var(--line-ink); border-radius: var(--r-lg);
  background: var(--ink-850); padding: clamp(1.6rem, 2.8vw, 2.25rem);
  display: grid; gap: 1.1rem; grid-template-rows: auto auto auto 1fr auto;
}
.plan--focus { border-color: color-mix(in srgb, var(--indigo-lift) 65%, transparent); background: color-mix(in srgb, var(--indigo) 12%, var(--ink-850)); }
.plan__top { display: flex; align-items: center; gap: 0.75rem; }
.plan__top h3 { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; color: var(--paper-100); line-height: 1; }
.plan__tag { margin-left: auto; font-size: var(--t-micro); font-weight: 660; letter-spacing: 0.13em; text-transform: uppercase; color: var(--signal); }
.plan__for { font-size: var(--t-sm); color: color-mix(in srgb, var(--paper-100) 62%, var(--ink-300)); }
.plan__price { display: flex; align-items: baseline; gap: 0.4rem; padding-top: 0.35rem; border-top: 1px solid var(--line-ink); }
.plan__price b { font-family: var(--font-display); font-size: 2.25rem; color: var(--paper-100); line-height: 1; letter-spacing: -0.01em; }
.plan__price span { font-size: var(--t-xs); color: var(--ink-300); }
.plan ul { display: grid; gap: 0.6rem; }
.plan li { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; font-size: var(--t-sm); color: color-mix(in srgb, var(--paper-100) 70%, var(--ink-300)); }
.plan li::before { content: ""; width: 5px; height: 5px; margin-top: 0.62rem; background: var(--sky); transform: rotate(45deg); }
.plan--focus li::before { background: var(--signal); }

/* --- 17. FAQ ------------------------------------------------------------- */
.faq { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line-paper); }
.faq details { border-bottom: 1px solid var(--line-paper); }
.faq summary {
  display: flex; align-items: flex-start; gap: 1.25rem; cursor: pointer;
  padding-block: 1.4rem; list-style: none;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 560; color: var(--ink-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; margin-left: auto; flex: none; width: 13px; height: 13px; margin-top: 0.45rem;
  border-right: 1.75px solid var(--indigo); border-bottom: 1.75px solid var(--indigo);
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq__a { padding-bottom: 1.5rem; max-width: 62ch; color: var(--ink-500); font-size: var(--t-sm); }
.faq__a p + p { margin-top: 0.75rem; }

/* --- 18. Booking section + inline calendar -------------------------------- */
.cta { position: relative; overflow: hidden; }
.cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46rem 28rem at 22% 108%, color-mix(in srgb, var(--indigo) 32%, transparent), transparent 70%);
}
.cta > * { position: relative; }
/* One centred column. The calendar itself lives in the modal, reached from the
   button below -- the same place every other CTA on the page goes. */
.cta__in { max-width: 46rem; margin-inline: auto; text-align: center; }
.cta h2 { font-size: var(--t-h2); }
.cta__act { justify-content: center; margin-top: clamp(1.75rem, 3vw, 2.25rem); }

/* The list is centred as a block but each line stays left-aligned: these are
   sentences, and centred ragged-both-edges text is hard to read. */
.cta__why { display: grid; gap: 1rem; margin: clamp(2rem, 3.5vw, 2.75rem) auto 0; width: fit-content; max-width: 100%; text-align: left; }
.cta__why li { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; font-size: var(--t-sm); color: color-mix(in srgb, var(--paper-100) 72%, var(--ink-300)); }
.cta__why svg { width: 18px; height: 18px; color: var(--won); margin-top: 0.2rem; }

/* --- 19. Footer ---------------------------------------------------------- */
.ftr { background: var(--ink-900); border-top: 1px solid var(--line-ink); padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; color: var(--ink-300); }
.ftr__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.ftr__blurb { font-size: var(--t-sm); max-width: 24rem; margin-top: 1.1rem; }
.ftr__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.ftr h3 { font-size: var(--t-micro); font-weight: 620; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-100); margin-bottom: 1rem; }
.ftr li + li { margin-top: 0.55rem; }
.ftr__note { font-size: var(--t-xs); line-height: 1.55; margin-top: 0.9rem; max-width: 22rem; }
.ftr a { font-size: var(--t-sm); text-decoration: none; transition: color .18s var(--ease); }
.ftr a:hover { color: var(--paper-100); }
.ftr__base { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-top: 1.75rem; border-top: 1px solid var(--line-ink); font-size: var(--t-xs); }
.ftr__base p { color: var(--ink-300); }

/* --- 20. Mobile routing board (stacked equivalent of the SVG) ------------ */
.board__stack { display: grid; gap: 0.6rem; }
.rbs__grp { display: grid; gap: 0.5rem; }
.rbs__cap { font-size: var(--t-micro); font-weight: 620; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-300); }
.rbs__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.rbs__chip {
  border: 1px solid var(--line-ink); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--ink-700) 55%, transparent);
  padding: 0.65rem 0.7rem; font-size: var(--t-xs); font-weight: 560; color: var(--paper-100);
}
.rbs__chip small { display: block; font-size: 0.625rem; font-weight: 450; color: var(--ink-300); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.15rem; }
.rbs__arrow { justify-self: center; width: 14px; height: 20px; color: color-mix(in srgb, var(--sky) 55%, transparent); }
.rbs__hub {
  display: flex; align-items: center; gap: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--indigo-lift) 55%, transparent);
  background: color-mix(in srgb, var(--indigo) 20%, var(--ink-800));
  border-radius: var(--r); padding: 0.85rem 0.9rem;
}
.rbs__hub svg { width: 24px; height: 25px; flex: none; }
.rbs__hub b { font-size: var(--t-xs); font-weight: 640; color: var(--paper-100); letter-spacing: 0.04em; display: block; }
.rbs__hub small { font-size: 0.625rem; color: var(--ink-300); letter-spacing: 0.08em; text-transform: uppercase; }
.rbs__stages { display: grid; gap: 0.4rem; }
.rbs__stage {
  display: flex; align-items: center; gap: 0.6rem;
  border: 1px solid var(--line-ink); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--ink-700) 45%, transparent);
  padding: 0.6rem 0.7rem; font-size: var(--t-xs); font-weight: 550; color: var(--paper-100);
}
.rbs__stage i { width: 6px; height: 6px; background: var(--sky); transform: rotate(45deg); flex: none; font-style: normal; }
.rbs__stage--won { border-color: color-mix(in srgb, var(--won) 45%, transparent); }
.rbs__stage--won i { background: var(--won); }
.rbs__stage span { margin-left: auto; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-300); }

/* --- 21. Scroll reveal --------------------------------------------------- */
.rev { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rev.is-in { opacity: 1; transform: none; }

/* --- 22. Breakpoints ----------------------------------------------------- */
@media (min-width: 40em) {          /* 640 */
  .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ftr__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 56.25em) {       /* 900 */
  .board__svg { display: block; }
  .board__stack { display: none; }
  .prob { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
  .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Calendar column runs wider than the old form did — GHL needs the room. */
  .ftr__grid { grid-template-columns: 1fr 1.4fr; }
  /* 2x2. The numbers are what keep it reading as a sequence once the steps stop
     being full-width rows, so they stay prominent. */
  .proc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proc__step { grid-template-columns: 5rem 1fr; padding-inline: clamp(1.5rem, 2.6vw, 2.25rem); }
  /* Outer edges stay flush with the rest of the section; only the inner sides
     get padding, so the column gutter doesn't crowd the text. */
  .proc__step:nth-child(odd) { padding-left: 0; }
  .proc__step:nth-child(even) { padding-right: 0; }
  .proc__n { font-size: 3.25rem; }
}

@media (min-width: 64em) {          /* 1024 */
  .svc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .results { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .crm { grid-template-columns: 1fr 1.15fr; align-items: start; }
  /* Six across. Tighter gutter than the smaller breakpoints — at six columns the
     3vw gap eats enough width to shrink the portraits noticeably. */
  .team { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; }
  /* The heading block is first in the DOM for reading order, so it is placed
     into column 2 explicitly rather than by source order. */
  .crm__aside { grid-column: 2; grid-row: 1; }
  .crm__main  { grid-column: 1; grid-row: 1; }
}

@media (max-width: 56.24em) {
  .board__svg { display: none; }
  .board__stack { display: grid; }
  .nav {
    position: fixed; inset: 74px 0 auto; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink-850); border-bottom: 1px solid var(--line-ink);
    padding: 0.5rem var(--gutter) 1.5rem;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
    max-height: calc(100dvh - 74px); overflow-y: auto;
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a:not(.btn) { display: block; padding-block: 0.95rem; border-bottom: 1px solid var(--line-ink); font-size: 1rem; }
  /* The drawer has the room, and a thumb wants 44px. */
  .nav .btn { margin-top: 1.25rem; padding: 0.85rem 1.4rem; }
  .burger { display: flex; }
  .logo__img { height: 30px; }
}

@media (max-width: 30em) {
  .field--2 { grid-template-columns: 1fr; }
  .rbs__chips { grid-template-columns: 1fr; }
  .pipe__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe__col { min-height: 0; }
}

/* --- 23. Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .rev { opacity: 1; transform: none; }
  /* Freeze each pulse mid-path so the board still reads as a routed system. */
  .rb-pulse { animation: none; stroke-dashoffset: 62; }
  .rb-ring { animation: none; opacity: 0.22; }
  /* Same for the funnel: park the drops down the shape rather than letting the
     global rule land them on the keyframe's end state, which is opacity 0. */
  .fn-arrow { animation: none; stroke-dashoffset: 0; }
  .fn-drop { animation: none; opacity: 1; cy: 200px; }
  .fn-drop.fn-b { cy: 285px; }
  .fn-drop.fn-c { cy: 350px; }
  .btn:hover { transform: none; }
}

html { background: var(--ink-900); scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- 24. Utility --------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- 25. Section-scoped tweaks (kept out of the markup) ------------------ */
.strip__inds { font-size: var(--t-sm); color: var(--paper-100); line-height: 1.5; }
.crm h2 { font-size: var(--t-h2); }
.crm .lead { margin-top: 1.25rem; }
.cta .lead { margin-top: 1.25rem; }
.opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ftr__blurb + .ftr__blurb { margin-top: 0.75rem; }
.ftr__blurb strong { color: var(--paper-100); font-weight: 600; }

/* --- 26. Post-review corrections ---------------------------------------- */

/* Anton has no multiplication sign; set units in the body face instead. */
.unit { font-family: var(--font-body); font-weight: 600; font-size: 0.46em; letter-spacing: 0; }

/* An unchosen select should read as a placeholder, not as an answer. */
.field select:invalid { color: var(--ink-500); }
.field select option { color: var(--ink-900); background: var(--white); }

/* Pipeline mock: close it with the number the whole page is arguing for. */
.pipe__foot {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.9rem 1.15rem; border-top: 1px solid var(--line-ink);
}
.pipe__foot span { font-size: var(--t-micro); font-weight: 620; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-300); }
.pipe__foot b { margin-left: auto; font-family: var(--font-display); font-size: 1.4rem; color: var(--won); letter-spacing: 0.01em; }

@media (max-width: 30em) {
  .hero .btn-row { display: grid; }
  .hero .btn-row .btn { width: 100%; }
}

/* --- 27. Modals — shared chrome ------------------------------------------ */

/* The play glyph shouldn't slide sideways the way the arrow glyphs do. */
.btn:hover .btn__play { transform: scale(1.09); }

/* A slow ring so the button reads as "there is a video behind this". Animating
   box-shadow rather than transform is deliberate: an animated transform would
   win the cascade over the hover scale above and silently kill it. */
.btn__play { border-radius: 50%; animation: playpulse 2.8s linear infinite; }
/* linear, not --ease: that curve is front-loaded enough that the ring's alpha
   collapsed inside the first 200ms and the pulse was invisible in practice. */
@keyframes playpulse {
  0%        { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sky) 60%, transparent); }
  45%, 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--sky) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .btn__play { animation: none; }
}

.modal {
  /* The `* { margin: 0 }` reset kills the UA's `dialog { margin: auto }`, which
     is what centres a native dialog. Put it back. */
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-ink);
  border-radius: var(--r-lg);
  background: var(--ink-850);
  color: var(--paper-100);
  overflow: visible;
}
/* ::backdrop custom-property inheritance is inconsistent across engines, so
   this is the literal value of --ink-900 with alpha. */
.modal::backdrop {
  background: rgba(0, 0, 75, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal__x {
  position: absolute; top: -14px; right: -14px; z-index: 2;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%;
  /* Deliberately not --signal: the yellow belongs to the conversion action
     alone, and a close button is not it. */
  background: var(--ink-700); color: var(--paper-100);
  border: 2px solid var(--ink-900);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.modal__x:hover { transform: rotate(90deg); background: var(--indigo); }

/* Shown only when the embed never arrives — blocked host, ad blocker, offline. */
.modal__fallback {
  display: none;
  place-content: center; align-content: center; justify-items: center;
  gap: 0.9rem; padding: 2.5rem 2rem; text-align: center;
}
/* Not scoped to .modal: the inline calendar reuses this fallback too. */
.is-blocked .modal__fallback { display: grid; }
.modal__fallback p { font-size: var(--t-sm); color: var(--ink-300); max-width: 34ch; }
.modal__fallback strong { display: block; font-size: var(--t-body); color: var(--paper-100); font-weight: 600; margin-bottom: 0.25rem; }

@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-in .22s var(--ease); }
  .modal[open]::backdrop { animation: backdrop-in .22s var(--ease); }
}
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes backdrop-in { from { opacity: 0; } }

/* --- 28. Video modal ----------------------------------------------------- */
.vmodal { width: min(1080px, 92vw); }
.vmodal__frame {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-900);
  display: grid;
}
.vmodal__frame > * { grid-area: 1 / 1; width: 100%; height: 100%; }

/* --- 29. Booking modal --------------------------------------------------- */
.cmodal { width: min(720px, 94vw); }
.cmodal__head {
  display: grid; gap: 0.3rem;
  padding: 1.4rem 1.6rem 1.1rem;
  border-bottom: 1px solid var(--line-ink);
}
.cmodal__head h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 1.5rem; line-height: 1; letter-spacing: -0.005em; color: var(--paper-100);
}
.cmodal__head p { font-size: var(--t-xs); color: var(--ink-300); }
.cmodal__frame {
  height: min(720px, 74vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--white);
}
/* The GHL embed script sets the iframe height itself; the container scrolls. */
.cmodal__frame iframe { width: 100%; border: 0; display: block; min-height: 640px; }
.cmodal.is-blocked .cmodal__frame { display: none; }
.cmodal .modal__fallback { border-radius: 0 0 var(--r-lg) var(--r-lg); }

@media (max-width: 30em) {
  .vmodal { width: 94vw; }
  .cmodal { width: 94vw; }
  .cmodal__frame { height: 76vh; }
  .modal__x { top: -12px; right: -8px; width: 36px; height: 36px; }
}