/* ==========================================================================
   Trade Makers Marketing — stylesheet

   This is the Local Traffic Marketing design system with a different palette.
   Same type roles, same band rhythm, same component shapes, same class names,
   so the two sites read as siblings and a fix in one can be ported to the
   other. What changes is colour and content.

   Palette: graphite and copper -- tool steel and pipe, the trade's own
   materials -- with one vermilion reserved for the conversion action.
   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 — copper is the structural accent, vermilion the conversion one */
  --copper:      #A85B2E;   /* primary actions and stat figures, on light bands */
  --copper-lift: #C87A45;   /* hover */
  --ember:       #E5A87E;   /* the light copper: accents and hairlines ON DARK */
  --vermilion:   #FF4A21;   /* traffic-cone red. The single conversion action. */
  --booked:      #2FBF6B;   /* booked / won states only */
  /* Star amber. Deliberately NOT --vermilion: that red is the conversion action
     and nothing else. Reusing it for decoration is what dilutes it. */
  --amber:       #E8A33C;

  /* Graphite — cool, with no violet in it, so it cannot be mistaken for the
     sibling site's navy at a glance. */
  --slate-950: #0B1014;   /* the plane the two diagram panels sit on */
  --slate-900: #12181E;
  --slate-850: #171F27;   /* elevated dark surface */
  --slate-800: #1D2731;
  --slate-700: #27333E;
  --slate-600: #3A4854;
  --slate-500: #566673;
  --slate-300: #93A3B0;
  --paper-100: #F4F6F8;
  --paper-200: #EFF2F5;
  --paper-300: #DDE3E8;
  --white: #FFFFFF;

  /* Type — the sibling site's three faces, in the same three roles */
  --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-dark: color-mix(in srgb, var(--ember) 18%, transparent);
  --line-light: 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(--slate-700);
  background: var(--slate-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(--copper); }
.band--ink .accent,
.band--ink2 .accent { color: var(--ember); }

.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(--slate-900); color: var(--paper-100); }
.band--ink2  { background: var(--slate-850); color: var(--paper-100); }
.band--paper { background: var(--paper-100); color: var(--slate-700); }
.band--white { background: var(--white); color: var(--slate-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(--slate-300)); }
.band--paper .lead,
.band--white .lead { color: var(--slate-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(--copper); color: var(--white); }
.btn--primary:hover { background: var(--copper-lift); }

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

.btn--ghost { border-color: color-mix(in srgb, var(--ember) 34%, transparent); color: var(--paper-100); }
.btn--ghost:hover { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 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 --vermilion: the yellow
   stays the one conversion action on the page. */
.btn--solid { background: var(--slate-700); color: var(--paper-100); border-color: color-mix(in srgb, var(--ember) 26%, transparent); }
.btn--solid:hover { background: var(--slate-600); border-color: color-mix(in srgb, var(--ember) 52%, transparent); }

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

.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(--vermilion);
  outline-offset: 3px;
  border-radius: 3px;
}
.skip {
  position: absolute; left: 0.75rem; top: -100px; z-index: 200;
  background: var(--vermilion); color: var(--slate-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(--slate-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-dark);
  background: color-mix(in srgb, var(--slate-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; }
/* The lockup is a single line now, so 34px would set the wordmark at roughly
   twice the sibling site's optical size -- its 34px covers two stacked
   lines. These heights match the two logos by how large the letters read,
   not by the box around them. */
.logo__img { height: 18px; width: auto; display: block; }
.logo__img--ftr { height: 21px; }

.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(--slate-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(--copper) 26%, transparent), transparent 68%),
    radial-gradient(34rem 22rem at 88% 6%, color-mix(in srgb, var(--ember) 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(--ember); 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(--ember);
}
.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(--slate-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(--booked); flex: none;
}

/* --- 9. Signature: the Routing Board ------------------------------------- */
.board { margin-top: clamp(3rem, 6vw, 5rem); }
.board__frame {
  border: 1px solid var(--line-dark);
  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.
     --slate-950, the same surface as the #crm pipeline mock: the panel used to
     end on --slate-900, the exact colour of the band behind it, so it had no
     edge. Darker than its ground also makes the --slate-700 nodes inside read
     as raised rather than sunk. */
  background: var(--slate-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-dark);
}
.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(--slate-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(--slate-700) 78%, transparent); stroke: var(--line-dark); stroke-width: 1; }
.rb-node--booked { stroke: color-mix(in srgb, var(--booked) 52%, transparent); }
/* Copper at the sibling site's 26% turns this into a muddy brown block that
   out-weighs the mark inside it. Held to a tint, with the copper carried by
   the stroke instead. */
.rb-junction { fill: color-mix(in srgb, var(--copper) 10%, var(--slate-800)); stroke: color-mix(in srgb, var(--copper-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(--slate-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(--slate-300); text-transform: uppercase; }
.rb-wire { fill: none; stroke: var(--line-dark); stroke-width: 1.5; }
.rb-pulse { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 94; }
.rb-pulse--in  { stroke: var(--ember); }
.rb-pulse--out { stroke: var(--copper-lift); }
.rb-pulse--booked { stroke: var(--booked); }

@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(--copper-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-dark); 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-dark);
  border-radius: var(--r-lg);
  background: var(--slate-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(--slate-300); margin-top: 0.1rem; }
.rcard__stars { display: flex; gap: 0.15rem; }
.rcard__star { fill: var(--amber); 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(--slate-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 --ember (inbound signal) to --booked (the
   closed state) with every intermediate mixed from those two. That keeps the
   whole ramp light enough for --slate-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(--slate-500) 48%, transparent); }

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

/* The ramp runs inbound copper to booked green, and it means something: a
   call becoming a job. Straight color-mix between the two passes through
   olive at the midpoint -- fine for the sibling site, whose sky-to-green mix
   stays cool the whole way, muddy here. The middle stops are set by hand to
   go via sand and sage instead. Every one stays light enough for --ink
   labels, which is why the ramp lightens before it saturates. */
.fn-s1 { fill: #E9B189; }
.fn-s2 { fill: #DCC49B; }
.fn-s3 { fill: #BCD2A6; }
.fn-s4 { fill: #85D19A; }
.fn-s5 { fill: var(--booked); }

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

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

/* 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-light); border-block: 1px solid var(--line-light); }
.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(--slate-900); margin-bottom: 0.3rem; }
.prob__item p { font-size: var(--t-sm); color: var(--slate-500); }

/* --- 12. Services -------------------------------------------------------- */
.svc { display: grid; gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: var(--r-lg); overflow: hidden; margin-top: clamp(2.5rem, 5vw, 4rem); }
.svc__card { background: var(--slate-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(--slate-800); }
.svc__ico { width: 30px; height: 30px; color: var(--ember); 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(--slate-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(--slate-300); border: 1px solid var(--line-dark); 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(--slate-800); }
.svc__card--hero:hover { background: color-mix(in srgb, var(--copper) 14%, var(--slate-800)); }
.svc__card--hero .svc__ico { color: var(--vermilion); }

/* --- 13. Process — a real sequence, so the numbers carry information ----- */
/* Hairlines come from a 1px grid gap over --line-light, 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-light);
  border-block: 1px solid var(--line-light);
  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(--slate-500); letter-spacing: -0.02em;
}
.proc__step:hover .proc__n { color: var(--copper); }
.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(--slate-900); }
.proc__body p { color: var(--slate-500); }
.proc__when { font-size: var(--t-micro); font-weight: 620; letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper); }

/* --- 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(--booked); 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(--slate-300)); }

/* Pipeline mock — the CRM shown, not described */
.pipe { border: 1px solid var(--line-dark); border-radius: var(--r-lg); background: var(--slate-950); overflow: hidden; }
.pipe__bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.15rem; border-bottom: 1px solid var(--line-dark); }
.pipe__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--booked); 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-dark); }
.pipe__col { background: var(--slate-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(--slate-300); }
.pipe__h b { font-size: var(--t-micro); font-weight: 620; color: var(--paper-100); }
.pipe__card {
  border: 1px solid var(--line-dark); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--slate-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(--slate-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(--ember); }
.pipe__src::before { content: ""; width: 4px; height: 4px; background: currentColor; transform: rotate(45deg); }
.pipe__col--booked .pipe__card { border-color: color-mix(in srgb, var(--booked) 42%, transparent); }
.pipe__col--booked .pipe__src { color: var(--booked); }

/* --- 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(--slate-900); }
.team__role { font-size: var(--t-sm); color: var(--slate-500); line-height: 1.45; }

/* --- 15. Proof ----------------------------------------------------------- */
.results { display: grid; gap: 1px; background: var(--line-light); border: 1px solid var(--line-light); 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(--copper); letter-spacing: -0.02em; }
.result__k { font-size: var(--t-sm); font-weight: 620; color: var(--slate-900); }
.result__d { font-size: var(--t-xs); color: var(--slate-500); line-height: 1.5; }

.quotes { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.quote { background: var(--white); border: 1px solid var(--line-light); 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(--slate-900); }
.quote figcaption { display: flex; align-items: center; gap: 0.75rem; }
.quote__av {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.04em;
  /* No real person is quoted here yet, so this is a dashed placeholder rather
     than the sibling site's filled gradient disc. A disc with a glyph on it
     implies someone; a dashed ring says "waiting on a name". Restore the
     gradient and white text when real initials go in. */
  background: color-mix(in srgb, var(--copper) 7%, transparent);
  border: 1px dashed color-mix(in srgb, var(--copper) 42%, transparent);
  color: var(--slate-500);
}
.quote__who { font-size: var(--t-sm); font-weight: 620; color: var(--slate-900); line-height: 1.3; }
.quote__who span { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--slate-500); }

/* --- 15b. Placeholder chrome ---------------------------------------------
   This site ships with unproven figures, unwritten quotes and no scheduler.
   Every one of them is labelled ON THE PAGE, not just in the markup: a
   data-placeholder attribute protects the next developer, a visible label
   protects the visitor. Copper, never the vermilion -- the conversion colour
   does not get borrowed for warnings.
   ------------------------------------------------------------------------ */
.result__src {
  margin-top: 0.75rem;
  font-size: var(--t-micro); font-weight: 620; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--slate-500);
}
.ph {
  display: inline-block; margin-bottom: 0.85rem;
  padding: 0.2rem 0.55rem; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--copper) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--copper) 55%, transparent);
  font-size: var(--t-micro); font-weight: 620; letter-spacing: 0.11em;
  text-transform: uppercase; color: #8A4A22;   /* deeper than --copper: 4.3:1 was under AA at 11px */
}
.band--ink .ph, .band--ink2 .ph {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 45%, transparent);
  background: color-mix(in srgb, var(--ember) 10%, transparent);
}
/* Marquee avatars are dashes rather than generated initials: an initial
   implies a person, and nobody real is quoted here yet. */
.rcard__av--ph {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--ember) 8%, transparent);
  border: 1px dashed color-mix(in srgb, var(--ember) 35%, transparent);
  color: var(--slate-300); font-size: var(--t-sm);
}
.cta__note {
  margin-top: 0.25rem; font-size: var(--t-sm);
  color: color-mix(in srgb, var(--paper-100) 62%, var(--slate-300));
}
.cta__note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em; padding: 0.1em 0.35em; border-radius: 3px;
  background: color-mix(in srgb, var(--ember) 12%, transparent);
}

/* --- 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-dark); border-radius: var(--r-lg);
  background: var(--slate-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(--copper-lift) 65%, transparent); background: color-mix(in srgb, var(--copper) 12%, var(--slate-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; }
/* Ember, not vermilion: the conversion colour is for the one action, and
   vermilion here measured 4.46:1 against the focused card -- under AA. */
.plan__tag { margin-left: auto; font-size: var(--t-micro); font-weight: 660; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ember); }
.plan__for { font-size: var(--t-sm); color: color-mix(in srgb, var(--paper-100) 62%, var(--slate-300)); }
.plan__price { display: flex; align-items: baseline; gap: 0.4rem; padding-top: 0.35rem; border-top: 1px solid var(--line-dark); }
.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(--slate-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(--slate-300)); }
.plan li::before { content: ""; width: 5px; height: 5px; margin-top: 0.62rem; background: var(--ember); transform: rotate(45deg); }
.plan--focus li::before { background: var(--vermilion); }

/* --- 17. FAQ ------------------------------------------------------------- */
.faq { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line-light); }
.faq details { border-bottom: 1px solid var(--line-light); }
.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(--slate-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(--copper); border-bottom: 1.75px solid var(--copper);
  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(--slate-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(--copper) 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(--slate-300)); }
.cta__why svg { width: 18px; height: 18px; color: var(--booked); margin-top: 0.2rem; }

/* --- 18b. Legal pages ---------------------------------------------------- */
/* privacy.html and terms.html only. Long-form prose, so the measure is capped
   well below the marketing pages and the rhythm is looser. */
.legal { max-width: 46rem; margin-top: clamp(2rem, 4vw, 3rem); }
.legal-title { font-size: var(--t-h2); }
.legal__meta { font-size: var(--t-sm); color: var(--slate-500); }
.legal h2 {
  font-size: 1.375rem; font-weight: 660; color: var(--slate-900);
  margin-top: 2.75rem; margin-bottom: 0.75rem;
}
.legal h3 {
  font-size: 1.0625rem; font-weight: 620; color: var(--slate-900);
  margin-top: 1.5rem; margin-bottom: 0.4rem;
}
.legal p, .legal li { color: var(--slate-500); }
.legal p { margin-bottom: 0.9rem; }
.legal ul { margin: 0 0 0.9rem; display: grid; gap: 0.5rem; }
.legal li { padding-left: 1.1rem; position: relative; }
.legal li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; background: var(--copper); transform: rotate(45deg);
}
.legal a { color: var(--copper); text-underline-offset: 3px; }
.legal strong { color: var(--slate-900); font-weight: 620; }

/* Unresolved legal details — must not reach a live site unnoticed, so louder
   than the quiet data-placeholder markers elsewhere. Indigo, not a yellow
   highlight: --vermilion is the conversion action and --amber is review stars, and
   neither rule gets bent for an internal marker. */
mark {
  background: color-mix(in srgb, var(--copper) 14%, transparent);
  color: var(--slate-900); font-weight: 620;
  padding: 0.1em 0.35em; border-radius: 3px;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--copper) 45%, transparent);
}

/* --- 19. Footer ---------------------------------------------------------- */
.ftr { background: var(--slate-900); border-top: 1px solid var(--line-dark); padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; color: var(--slate-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-dark); font-size: var(--t-xs); }
.ftr__base p { color: var(--slate-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(--slate-300); }
.rbs__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.rbs__chip {
  border: 1px solid var(--line-dark); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--slate-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(--slate-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(--ember) 55%, transparent); }
.rbs__hub {
  display: flex; align-items: center; gap: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--copper-lift) 55%, transparent);
  background: color-mix(in srgb, var(--copper) 20%, var(--slate-800));
  border-radius: var(--r); padding: 0.85rem 0.9rem;
}
.rbs__hub svg { width: 27px; height: 22px; 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(--slate-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-dark); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--slate-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(--ember); transform: rotate(45deg); flex: none; font-style: normal; }
.rbs__stage--booked { border-color: color-mix(in srgb, var(--booked) 45%, transparent); }
.rbs__stage--booked i { background: var(--booked); }
.rbs__stage span { margin-left: auto; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-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(--slate-850); border-bottom: 1px solid var(--line-dark);
    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-dark); 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: 16px; }
}

@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(--slate-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(--slate-500); }
.field select option { color: var(--slate-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-dark);
}
.pipe__foot span { font-size: var(--t-micro); font-weight: 620; letter-spacing: 0.13em; text-transform: uppercase; color: var(--slate-300); }
.pipe__foot b { margin-left: auto; font-family: var(--font-display); font-size: 1.4rem; color: var(--booked); 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(--ember) 60%, transparent); }
  45%, 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--ember) 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-dark);
  border-radius: var(--r-lg);
  background: var(--slate-850);
  color: var(--paper-100);
  overflow: visible;
}
/* ::backdrop custom-property inheritance is inconsistent across engines, so
   this is the literal value of --slate-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 --vermilion: the yellow belongs to the conversion action
     alone, and a close button is not it. */
  background: var(--slate-700); color: var(--paper-100);
  border: 2px solid var(--slate-900);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.modal__x:hover { transform: rotate(90deg); background: var(--copper); }

/* 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(--slate-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(--slate-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-dark);
}
.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(--slate-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; }
}