/* =====================================================================================
   Manner Health Solutions — design system
   -------------------------------------------------------------------------------------
   Earth tones only: greens, blues, beiges, browns, maroons, black as accent. Nothing
   neon, nothing vibrant — a client constraint from brief.md section 4.

   Reference points: Apple (clean, minimal, generous whitespace, content-led) and Malbon
   Golf (tight uppercase lockups, strong type, confident simplicity).

   CONTRAST: every text/background pair below was COMPUTED, not eyeballed, by
   scratchpad/contrast.py (calibrated PASS/FAIL/unknown). Ratios are noted inline.
   LANDMINE, recorded: --sage #7E9A87 on --forest measures 4.03 and FAILS AA for normal
   text. --sage-light #9DB8A5 (5.78) is the on-dark text token. Do not swap them back.
   ===================================================================================== */

:root{
  /* MEASURED 77.0px at 360px, 412px and 1440px. The mobile nav overlay and its
     max-height both keyed off a hardcoded 76px - a 1px overlap that ate the header's
     bottom border whenever the menu was open. One value, one place. */
  --head-h:77px;
  /* --- earth-tone palette ------------------------------------------------------- */
  --ink:#141210;          /* warm near-black — the black accent, never pure #000 */
  --forest:#1E3A2F;       /* primary dark green                                    */
  --forest-2:#2C5140;     /* links, hovers            8.32 on --paper              */
  --moss:#3F5C4B;         /* tertiary green   5.43 on --sand, 6.90 on --paper      */
  --sage:#7E9A87;         /* DECORATIVE ONLY — borders, rules, icon strokes        */
  --sage-light:#9DB8A5;   /* eyebrow text on dark     5.78 on --forest             */
  --slate:#2F4A58;        /* the blue                 8.76 on --paper              */
  --slate-2:#38596B;      /*                          5.5+ on --paper (re-measured) */
  /* 2026-10-15 PALETTE SWAP (Andres's punch list): maroon -> deep blue, brown -> deep
     forest green, beige dominant. Token NAMES are kept so nothing downstream moves;
     --maroon now holds the deep blue and --bark the forest green. */
  --maroon:#1F3A52;       /* deep blue accent         8.90 on --paper              */
  --bark:#33463A;         /* forest green (was brown) 7.65 on --paper              */
  --tan:#A98C6B;          /* DECORATIVE ONLY — rules, dots                         */
  --tan-light:#BFA98C;    /* text on dark             5.45 on --forest             */
  --numeral:#557363;      /* large display numerals   3.49 on --sand (AA large)    */

  --paper:#E8DFCF;        /* BEIGE, the dominant ground (client palette)           */
  --paper-2:#EDE4D3;      /* alternating band (client's alt beige)                 */
  --sand:#DDD2BD;         /* third band / chips                                    */
  --line:#CFC3AB;         /* hairlines                                             */
  --body:#3E3931;         /* body copy                8.66 on --paper              */
  /* #6B6356 measured 4.48 on the new beige and FAILED AA; darkened. */
  --muted:#5E574B;        /* meta                     5.40 on --paper, 4.77 on sand */
  --white:#FFFFFF;

  /* ---- IDENTITY TOKENS (2026-09-21 differentiation pass) --------------------------
     Mark's ruling: brown/maroon becomes PRIMARY, green demotes to secondary, because
     Manner read as Vital's twin and Vital is green-primary (its signature #2e9e46 is a
     55%-saturation kelly green - which is also precisely the "vibrant" Andres ruled out).
     Everything here stays inside his list: greens / blues / beiges / browns / maroons.
     Contrast computed before adoption, not after:
       --brand  #4A3729 -> 10.50 on --paper, 9.55 on --paper-2, 8.27 on --sand, 11.23 white-on
       --action #6B2E35 -> white-on 10.16, and 9.49 as a colour on --paper
       --action-2 hover -> white-on 12.63
     GREEN IS NOT GONE. --forest still carries the dark structural bands, the qualifier's
     YES mark and depth. It is the secondary, not the signature. */
  --brand:#2F4538;        /* deep forest green: headings, wordmark, carrier wall   */
  --brand-soft:#33463A;   /* = --bark                                              */
  --action:#1F3A52;       /* primary action - deep blue (was maroon), 11.76 white-on */
  --action-2:#2A3F54;     /* primary action hover                                  */
  /* Earth gold for the quote / booking buttons. Text on gold is --ink (7.79; 6.34 on
     the hover gold). White on gold is 2.40 and fails - never use it. */
  --gold:#C9A24B;
  --gold-2:#B8912E;

  /* --- type --------------------------------------------------------------------- */
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  /* NOT Inter: Vital uses Inter for body and sharing it was a giveaway. Karla is a
     warm grotesque with visibly different terminals and a larger x-height. */
  --sans:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* --- depth: layered, warm-tinted, never grey ---------------------------------- */
  --sh-1:0 1px 2px rgba(20,18,16,.05), 0 2px 8px -4px rgba(47,69,56,.10);
  --sh-2:0 2px 6px rgba(20,18,16,.05), 0 14px 32px -18px rgba(47,69,56,.26);
  --sh-3:0 4px 12px rgba(20,18,16,.06), 0 34px 70px -34px rgba(47,69,56,.38);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.55);

  /* --- geometry ----------------------------------------------------------------- */
  --r-s:10px; --r:16px; --r-l:24px; --r-xl:34px;
  --maxw:1200px;
  --gut:clamp(20px,5vw,56px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* =====================================================================================
   RESET
   ===================================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
a{color:var(--forest-2);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--maroon)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--brand);margin:0;font-weight:500;
  letter-spacing:-.015em;line-height:1.12}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--line);margin:0}

/* Visible focus for EVERY interactive element — WCAG 2.1 AA, keyboard operability. */
:focus-visible{
  outline:3px solid var(--maroon);outline-offset:3px;border-radius:4px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--brand);color:var(--white);padding:14px 22px;
  border-radius:0 0 var(--r-s) 0;font-weight:600;
}
.skip-link:focus{left:0}

/* THE SKIP LINK'S TARGET. Two measured defects, both of which defeat the skip link -
   the one control on the page that exists purely for keyboard and screen-reader users:
     1. #main had scroll-margin-top:0, so activating the skip link scrolled #main to
        y=0 and the 77px sticky header covered its first 77px; the first child sat at
        top=52.3px, behind the header. 120px matches .legal h2 and .deep.
     2. <main> had no tabindex, so the skip link moved the SCROLL but not the FOCUS -
        document.activeElement stayed BODY and the next Tab went back through the
        header nav. layout.py now carries tabindex="-1".
   The outline is suppressed because #main is not a keyboard-operable control and is
   not in the tab order; the scroll position is the indicator. */
#main{scroll-margin-top:120px}
#main:focus,#main:focus-visible{outline:none}

/* -------------------------------------------------------------------------------------
   INLINE ICON SIZING. Inline SVG has no intrinsic size, so without this every icon
   renders at the SVG default (300x150) and blows the layout apart. Found by looking at
   a render, not by any check. One scale, applied once.
   ------------------------------------------------------------------------------------- */
svg{width:1.15em;height:1.15em;flex:0 0 auto;display:inline-block;vertical-align:middle}
.btn svg{width:18px;height:18px}
.card .ic svg{width:23px;height:23px}
.chip svg{width:14px;height:14px}
.ticks li svg{width:16px;height:16px;margin-top:4px}
.review-banner svg{width:23px;height:23px;margin-top:2px}
.portrait-ph svg{width:74px;height:74px;margin:0 auto 16px;display:block}
.qual-field .mag{width:20px;height:20px}
.qual-answer .mark svg{width:16px;height:16px}
.brandmark .mk svg{width:22px;height:22px}
.announce svg,.foot-base svg{width:1em;height:1em}

/* =====================================================================================
   LAYOUT
   ===================================================================================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 var(--gut)}
section{position:relative}
.band{padding:clamp(72px,10vw,132px) 0}
.band-tight{padding:clamp(52px,7vw,88px) 0}
.band-paper2{background:var(--paper-2)}
.band-sand{background:var(--sand)}
.band-forest{background:var(--forest);color:var(--sand)}
.band-forest h1,.band-forest h2,.band-forest h3,.band-forest h4{color:var(--paper)}
.band-ink{background:var(--ink);color:var(--sand)}
.band-ink h2,.band-ink h3{color:var(--paper)}

.eyebrow{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--moss);margin-bottom:18px;
}
.band-forest .eyebrow,.band-ink .eyebrow{color:var(--sage-light)}   /* 5.78 — AA */

.h-xl{font-size:clamp(2.6rem,6.2vw,4.5rem)}
.h-l{font-size:clamp(2rem,4.4vw,3.1rem)}
.h-m{font-size:clamp(1.5rem,2.6vw,2.05rem)}
.h-s{font-size:1.2rem}
.lede{font-size:clamp(1.06rem,1.7vw,1.24rem);line-height:1.62;color:var(--body);max-width:60ch}
.band-forest .lede,.band-ink .lede{color:var(--sand)}
.meta{font-size:.9rem;color:var(--muted)}
.band-forest .meta,.band-ink .meta{color:var(--tan-light)}          /* 5.45 — AA */

.grid{display:grid;gap:clamp(18px,2.4vw,30px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center}

/* =====================================================================================
   BUTTONS — 44px minimum target, AA contrast on every variant
   ===================================================================================== */
.btn{
  --btn-bg:var(--action);--btn-fg:var(--paper);white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:14px 30px;border-radius:999px;border:1.5px solid transparent;
  background:var(--btn-bg);color:var(--btn-fg);
  font-weight:600;font-size:.97rem;letter-spacing:.005em;text-decoration:none;cursor:pointer;
  position:relative;overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .32s var(--ease-out),box-shadow .32s var(--ease-out),
             background-color .28s var(--ease),color .28s var(--ease),
             border-color .28s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2);color:var(--btn-fg)}
.btn:active{transform:translateY(0)}
.btn .arw{transition:transform .34s var(--ease-out)}
.btn:hover .arw{transform:translateX(4px)}
/* sheen sweep — the only "shiny" thing on the site, and it is earth-toned */
.btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(232,223,207,.16) 46%,transparent 62%);
  transform:translateX(-120%);
}
.btn:hover::after{animation:sweep .72s var(--ease-out)}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--brand);border-color:var(--line);box-shadow:none}
.btn-ghost:hover{--btn-bg:var(--white);border-color:var(--sage)}
.btn-maroon{--btn-bg:var(--maroon);--btn-fg:var(--white)}            /* 10.16 — AA */
.btn-onDark{--btn-bg:var(--paper);--btn-fg:var(--brand)}            /* 11.54 — AA */
.btn-onDark-ghost{--btn-bg:transparent;--btn-fg:var(--paper);border-color:rgba(232,223,207,.45)}
.btn-sm{min-height:44px;padding:10px 20px;font-size:.9rem}
.btn-gold{--btn-bg:var(--gold);--btn-fg:var(--ink);border-color:var(--gold-2)}  /* 7.79 */
.btn-gold:hover{--btn-bg:var(--gold-2)}                                          /* 6.34 */

/* =====================================================================================
   HEADER — persistent Book CTA on every route
   ===================================================================================== */
.announce{
  background:var(--ink);color:var(--sand);font-size:.82rem;letter-spacing:.012em;
  text-align:center;padding:9px 16px;position:relative;overflow:hidden;
}
.announce b{color:var(--tan-light);font-weight:600}
.announce .shimmer{
  position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 40%,rgba(191,169,140,.10) 50%,transparent 60%);
  animation:drift 9s linear infinite;
}
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(232,223,207,.94);backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background-color .3s var(--ease),
             box-shadow .3s var(--ease);
}
.site-head.stuck{border-bottom-color:var(--line);box-shadow:var(--sh-1);
  background:rgba(232,223,207,.98)}
.head-in{display:flex;align-items:center;gap:22px;height:76px}
.brandmark{display:flex;align-items:center;gap:12px;text-decoration:none;
  flex-shrink:0;min-height:44px}
.brandmark .mk{
  width:44px;height:44px;border-radius:12px;background:var(--brand);
  display:grid;place-items:center;box-shadow:var(--sh-1);
  transition:transform .4s var(--ease-out),background-color .3s var(--ease);
}
.brandmark:hover .mk{transform:rotate(-6deg) scale(1.05);background:var(--forest-2)}
.brandmark .wm{display:flex;flex-direction:column;line-height:1.1}
.brandmark .wm b{font-family:var(--serif);font-size:1.13rem;font-weight:600;color:var(--brand)}
.brandmark .wm small{font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{
  position:relative;padding:10px 13px;border-radius:var(--r-s);
  font-size:.92rem;font-weight:500;color:var(--body);text-decoration:none;
  white-space:nowrap;
  transition:color .24s var(--ease),background-color .24s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--brand);background:rgba(169,140,107,.16)}
.nav .mob-book{display:none}
.nav a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:5px;height:1.5px;
  background:var(--maroon);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease-out);
}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.head-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.burger{
  display:none;width:46px;height:46px;border:1px solid var(--line);background:var(--white);
  border-radius:var(--r-s);cursor:pointer;padding:0;place-items:center;
}
.burger span{display:block;width:19px;height:1.7px;background:var(--brand);margin:3.5px auto;
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
/* The open state is the canonical hamburger -> X morph: outer bars converge on the
   middle bar's centre and cross at +/-45deg while the middle bar fades.
   THE TRANSLATE MUST EQUAL THE BAR PITCH or the bars stop short of crossing and the
   icon renders as a ">" chevron, which is not a close affordance. It was 5.2px and
   MEASURED pitch is 14.66px - a 9.46px shortfall per bar, so it read as ">" on every
   phone. The pitch is NOT the margin: .burger is display:grid, grid items do not
   collapse margins, and align-content:stretch distributes three auto rows across the
   44px inner height -> 44/3 = 14.66px. Re-measure this if .burger's height changes. */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(14.66px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-14.66px) rotate(-45deg)}

/* =====================================================================================
   HERO
   ===================================================================================== */
.hero{position:relative;overflow:hidden;padding:clamp(56px,8vw,104px) 0 clamp(60px,8vw,110px)}

/* =====================================================================================
   TYPOGRAPHIC HERO  (2026-09-21 differentiation pass)
   -------------------------------------------------------------------------------------
   Replaces the split hero. Measured against vitalcoverage.us the same session, the old
   composition reproduced Vital's almost element for element: caps eyebrow -> serif h1 with
   an italic coloured phrase -> body paragraph -> filled pill + outlined pill -> checkmark
   chip row -> right-side image carrying two floating white cards in the SAME two corners.
   Every one of those is deliberately gone here:
     - no eyebrow above the h1        - no right-hand image, and no portrait at all
     - no floating corner cards       - ONE pill, plus a quiet text link, not two pills
     - facts are a rule-separated typographic line, not checkmark chips
   What carries the page instead is type at display scale and, immediately under it, the
   state qualifier - the one thing on this site Vital has no equivalent for.
   ===================================================================================== */
.hero-t{position:relative;overflow:hidden;
  /* Bottom padding tightened 2026-09-21 so the hero band below breaks the fold at a
     900px viewport. Mark asked for an image ON the splash; a band nobody scrolls to
     is not on the splash. Measured after the change, not guessed. */
  padding:clamp(40px,5vw,64px) 0 clamp(18px,2vw,26px)}
.hero-t-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-t-bg svg{width:100%;height:100%;display:block}
/* NO max-width here. `.wrap` already sets the 1200px measure; a ch value on this
   element resolves against ITS OWN 17px font-size (33ch = 333px), which crushed the
   display type into a narrow centred column. The measure belongs on .display, where
   ch resolves against the display font-size and means what it looks like it means. */
.hero-t-in{position:relative;z-index:1}

/* --- HERO FIGURE: fills the right-hand dead space -------------------------------------
   Mark, 2026-09-21: "I'm also not a fan of all the white space on the right side of the
   splash page." At >=1000px the hero becomes a two-column grid and the image occupies the
   right column, bleeding to the viewport edge. Its left edge dissolves into the cream
   ground rather than stopping at a border, which is the specific thing that keeps it from
   reading as Vital's card. No floating badges, and no text over it. */
.hero-figure{position:relative;z-index:0}
.hero-figure .shot{margin:0;height:100%;border-radius:0;box-shadow:none;position:relative;
  overflow:hidden}
.hero-figure .shot img{width:100%;height:100%;object-fit:cover;object-position:68% 38%;
  border-radius:0}
.hero-figure .shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--paper) 0%,rgba(232,223,207,.72) 12%,
             rgba(232,223,207,0) 42%);
}

@media (min-width:1000px){
  .hero-t{display:grid;grid-template-columns:1fr 44vw;align-items:stretch;
          padding-top:0;padding-bottom:0}
  .hero-t-in{
    /* grid-ROW pinned too. The figure comes first in the DOM with grid-column:2, and
       sparse auto-placement will not move the cursor backwards, so the text column was
       landing in row 2 and the hero rendered 1665px tall. */
    grid-column:1;grid-row:1;max-width:none;margin:0;
    padding-left:max(var(--gut),calc((100vw - var(--maxw))/2));
    padding-right:clamp(20px,2.6vw,44px);
    align-self:center;
    padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(36px,4.5vw,56px);
  }
  .hero-figure{grid-column:2;grid-row:1;height:100%;min-height:560px}
}

@media (max-width:999px){
  /* Stacked. The figure is FIRST in the DOM (it has to be, so the desktop grid can place
     it in column 2 without the text landing in row 2), which meant on a phone it rendered
     ABOVE the headline with the hero's top padding stranded as an empty cream strip above
     it. Flex order puts it back under the type where it was always meant to be. */
  .hero-t{display:flex;flex-direction:column}
  .hero-t-in{order:1}
  .hero-figure{order:2;margin-top:26px}
  .hero-figure .shot img{height:clamp(240px,52vw,340px);object-position:center 36%}
  .hero-figure .shot::after{
    background:linear-gradient(180deg,rgba(232,223,207,.55) 0%,rgba(232,223,207,0) 32%);
  }
}

/* Display type does the work a photograph used to do. */
.display{
  font-family:var(--serif);color:var(--brand);font-weight:500;
  font-size:clamp(2.7rem,6.6vw,5.1rem);line-height:1.035;letter-spacing:-.021em;
  margin:0;max-width:16ch;
}
.display em{font-style:italic;color:var(--action);display:inline-block}

/* Trust facts as a typographic rule-line. NOT chips, NOT checkmarks. */
.factline{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;margin:26px 0 0;padding:0;
  font-family:var(--sans);font-size:.83rem;font-weight:600;letter-spacing:.055em;
  text-transform:uppercase;color:var(--brand-soft);
}
.factline span{display:inline-flex;align-items:center}
.factline span + span::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--tan);
  margin-right:18px;flex:none;
}
/* Byline. Sits UNDER the headline, not above it - an eyebrow above the h1 is the
   opener Vital uses and the one this redesign deliberately dropped. */
.hero-by{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:16px 0 0}
.hero-by b{font-family:var(--serif);font-size:1.16rem;font-weight:600;color:var(--brand)}
.hero-by span{font-size:.92rem;color:var(--muted)}
.hero-by::before{content:"";width:34px;height:2px;background:var(--action);
  align-self:center;margin-right:4px;flex:none}
.broker-line{
  margin:18px 0 0;max-width:62ch;font-size:.93rem;line-height:1.55;color:var(--body);
  padding-left:14px;border-left:2px solid var(--action);
}
.broker-line b{color:var(--brand);font-weight:700}
.hero-t-lede{margin-top:16px;max-width:56ch}

.hero-t-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:24px}

/* =====================================================================================
   HERO BAND — the splash image
   -------------------------------------------------------------------------------------
   A full-bleed cinematic strip UNDER the type, not a background behind it. Reasons are
   in the markup comment; the load-bearing one is that no text sits on this image, so it
   carries ZERO contrast risk whatever frame Adobe Stock supplies. The caption lives on
   cream below the image, where contrast stays computable.
   This section is outside .wrap, so it is full width WITHOUT 100vw - which cannot add a
   horizontal scrollbar when the vertical one is present.
   ===================================================================================== */
.hero-band{position:relative;margin:0;padding:0}
.hero-band .shot{margin:0;border-radius:0;box-shadow:none;position:relative;overflow:hidden}
.hero-band .shot img{
  display:block;width:100%;height:clamp(200px,29vw,420px);
  object-fit:cover;object-position:center 58%;border-radius:0;
}
/* A warm tonal wash so ANY supplied frame settles into the palette instead of fighting
   it. Low opacity - this tints, it does not darken for legibility, because there is no
   text here to make legible. */
.hero-band .shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(47,69,56,.16) 0%,rgba(47,69,56,.05) 38%,
             rgba(31,58,82,.10) 100%);
  mix-blend-mode:multiply;
}
/* Hairlines top and bottom tie the band to the page rules rather than floating. */
.hero-band .shot::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:var(--line);
}
.hero-band-cap{
  max-width:var(--maxw);margin:14px auto 0;padding:0 var(--gut);
  font-size:.86rem;color:var(--muted);font-style:italic;
}
.hero-band .broker-note{max-width:var(--maxw);margin:16px auto 0;padding:0 var(--gut)}
/* MOBILE TYPE FLOOR.
   Measured on Android/Edge: the logo sub-wordmark rendered 10.1px, the carrier "Priority"
   badge 10.0px and the footer column headings 11.0px. All pass contrast and all are
   deliberate micro-type rather than body copy, so none is a defect - but 10px is genuinely
   small on a phone held at arm's length, and Mark tests on a phone. The floor is lifted on
   small screens only; the desktop typography is untouched. */
@media (max-width:900px){
  .brandmark .wm small{font-size:11.5px;letter-spacing:.07em}
  .site-foot h2{font-size:12px}
  .flag{font-size:11.5px}
  .wall-label{font-size:13.5px}
}

@media (max-width:900px){
  .hero-band .shot img{height:clamp(180px,44vw,260px);object-position:center 55%}
}
/* A quiet second action. The old hero used a second pill, which is what Vital does. */
.tlink{
  display:inline-flex;align-items:center;gap:7px;color:var(--brand);font-weight:600;
  font-size:.95rem;text-decoration:none;padding:6px 2px;border-bottom:1.5px solid transparent;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.tlink:hover{color:var(--action);border-bottom-color:var(--action)}
.tlink svg{transition:transform .3s var(--ease-out)}
.tlink:hover svg{transform:translateY(3px)}

@media (max-width:900px){
  .hero-t-in{max-width:none}
  .display{font-size:clamp(2.3rem,9vw,3.2rem);max-width:none}
  .hero-t-act .btn{width:100%}
}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg svg{width:100%;height:100%;display:block}
.hero-in{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(34px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.2rem);line-height:1.06;letter-spacing:-.025em}
.hero h1 em{font-style:italic;color:var(--maroon);position:relative;white-space:nowrap}
.hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.04em;height:.055em;border-radius:2px;
  background:var(--tan);transform:scaleX(0);transform-origin:left;
  animation:underline 1s var(--ease-out) .65s forwards;
}
.hero .lede{margin-top:24px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.trustrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;background:var(--white);border:1px solid var(--line);
  font-size:.82rem;font-weight:600;color:var(--brand);box-shadow:var(--sh-1);
  transition:transform .3s var(--ease-out),border-color .3s var(--ease);
}
.chip:hover{transform:translateY(-2px);border-color:var(--sage)}
.chip svg{width:14px;height:14px;flex-shrink:0;color:var(--moss)}

/* portrait frame — holds a labelled placeholder until real photography arrives */
.portrait{position:relative}
.portrait-frame{
  position:relative;aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(155deg,var(--sand),var(--paper-2) 55%,var(--sand));
  border:1px solid var(--line);box-shadow:var(--sh-3);
  display:grid;place-items:center;text-align:center;padding:30px;
}
.portrait-frame::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px,rgba(51,70,58,.16) 1px,transparent 0);
  background-size:16px 16px;
}
.portrait-ph{position:relative;z-index:1;max-width:260px}
.portrait-ph svg{width:74px;height:74px;margin:0 auto 16px;color:var(--sage);
  animation:breathe 5s var(--ease) infinite}
.portrait-ph b{display:block;font-family:var(--serif);font-size:1.16rem;color:var(--brand);
  margin-bottom:7px}
.portrait-ph span{font-size:.82rem;color:var(--bark);line-height:1.55;display:block}
  /* --muted measured 4.36 on the sand end of the frame gradient and FAILED AA;
     --bark is 6.52 there. The checker returned unknown over a gradient, correctly,
     and the failure was found by computing both endpoints by hand. */
.badge{
  position:absolute;z-index:2;background:rgba(232,223,207,.93);
  backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 16px;box-shadow:var(--sh-2);max-width:212px;
  animation:floaty 7s var(--ease) infinite;
}
.badge b{display:block;font-family:var(--sans);font-size:.83rem;font-weight:700;color:var(--brand)}
.badge span{font-size:.75rem;color:var(--muted);line-height:1.45}
.badge-tl{top:24px;left:-26px}
.badge-br{bottom:30px;right:-26px;animation-delay:-3.5s}

/* the above-the-fold independent-broker disclaimer — required, not footer-only */
.broker-note{
  margin-top:26px;padding:13px 18px;border-left:3px solid var(--maroon);
  background:rgba(31,58,82,.05);border-radius:0 var(--r-s) var(--r-s) 0;
  font-size:.86rem;color:var(--body);max-width:58ch;
}
.broker-note b{color:var(--maroon)}

/* =====================================================================================
   CARRIER WALL — dark band, continuous marquee, pauses on hover and on focus
   ===================================================================================== */
.wall{background:var(--brand);padding:34px 0;overflow:hidden;position:relative}
.wall::before,.wall::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.wall::before{left:0;background:linear-gradient(90deg,var(--brand),transparent)}
.wall::after{right:0;background:linear-gradient(-90deg,var(--brand),transparent)}
.wall-label{
  text-align:center;font-size:15px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--sage-light);margin-bottom:22px;font-weight:700;
}
.marquee{display:flex;width:max-content;animation:marquee 46s linear infinite}
.wall:hover .marquee,.marquee:focus-within{animation-play-state:paused}
.marquee-set{display:flex;align-items:center;gap:52px;padding-right:52px}
.marquee-set span{
  font-family:var(--serif);font-size:1.28rem;color:var(--sand);white-space:nowrap;
  opacity:.82;transition:opacity .3s var(--ease),color .3s var(--ease);
}
.marquee-set span:hover{opacity:1;color:var(--white)}
.marquee-set .dot{width:5px;height:5px;border-radius:50%;background:var(--tan);opacity:.6;
  font-size:0;flex-shrink:0}

/* =====================================================================================
   CARDS
   ===================================================================================== */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(24px,3vw,34px);box-shadow:var(--sh-1);position:relative;overflow:hidden;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),
             border-color .3s var(--ease);
}
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2.5px;
  background:linear-gradient(90deg,var(--moss),var(--tan));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--sage)}
.card:hover::before{transform:scaleX(1)}
.card h3{font-size:1.28rem;margin-bottom:10px}
.card a{display:inline-flex;align-items:center;gap:7px;min-height:28px;
  font-weight:600;text-decoration:none;
  transition:gap .3s var(--ease-out),color .24s var(--ease)}
.card a:hover{gap:11px}
.card .ic{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--paper-2);color:var(--brand);border:1px solid var(--line);
  transition:background-color .35s var(--ease),transform .4s var(--ease-out);
}
.card:hover .ic{background:var(--sand);transform:scale(1.06) rotate(-4deg)}
.card .ic svg{width:23px;height:23px}
.ticks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.ticks li{display:flex;gap:10px;font-size:.92rem;line-height:1.5}
.ticks li svg{width:16px;height:16px;flex-shrink:0;margin-top:4px;color:var(--moss)}
/* A link inside .ticks is blockified by the flex parent, so the inline target-size
   exception does not apply to it. Give it a real 24px box rather than argue the point. */
.ticks li a{display:inline-flex;align-items:center;min-height:24px}
.flag{
  position:absolute;top:16px;right:16px;font-size:10px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--bark);background:var(--sand);
  padding:4px 10px;border-radius:999px;border:1px solid var(--line);
}

/* numbered process rail */
.rail{display:grid;gap:0;counter-reset:step}
.step{
  display:grid;grid-template-columns:96px 1fr;gap:clamp(18px,3vw,40px);
  padding:30px 0;border-top:1px solid var(--line);align-items:start;
  transition:background-color .35s var(--ease);
}
.step:last-child{border-bottom:1px solid var(--line)}
.step:hover{background:rgba(221,210,189,.34)}
.step .n{
  font-family:var(--serif);font-size:2.3rem;color:var(--numeral);line-height:1;
  transition:color .35s var(--ease),transform .4s var(--ease-out);
}
.step:hover .n{color:var(--maroon);transform:translateX(5px)}
.step h3{font-size:1.24rem;margin-bottom:7px}

/* expectations — NOT testimonials */
.expect{
  border-left:2px solid var(--line);padding:4px 0 4px 26px;position:relative;
  transition:border-color .35s var(--ease);
}
.expect::before{
  content:"";position:absolute;left:-5.5px;top:12px;width:9px;height:9px;border-radius:50%;
  background:var(--sand);border:2px solid var(--sage);
  transition:background-color .35s var(--ease),transform .35s var(--ease-out);
}
.expect:hover{border-color:var(--sage)}
.expect:hover::before{background:var(--maroon);border-color:var(--maroon);transform:scale(1.25)}
.expect h3{font-size:1.1rem;margin-bottom:7px}

/* =====================================================================================
   STATES QUALIFIER — the pre-registered "moment" (clause 18 A11)
   ===================================================================================== */
.qual{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,3.4vw,40px);box-shadow:var(--sh-3);position:relative;overflow:hidden;
}
.qual::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--brand),var(--action),var(--tan),var(--moss));
}
.qual-field{position:relative;margin-bottom:8px}
.qual-field input{
  width:100%;min-height:60px;padding:16px 52px 16px 20px;font-size:1.04rem;font-family:inherit;
  color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line);border-radius:var(--r);
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease),
             background-color .28s var(--ease);
}
.qual-field input::placeholder{color:var(--muted)}
.qual-field input:focus{
  outline:none;border-color:var(--action);background:var(--white);
  box-shadow:0 0 0 4px rgba(30,58,47,.11);
}
.qual-field .mag{position:absolute;right:19px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--muted);pointer-events:none}
.qual-answer{
  margin-top:18px;padding:18px 22px;border-radius:var(--r);
  display:flex;gap:14px;align-items:flex-start;
  animation:answerIn .42s var(--ease-out);
}
.qual-answer.yes{background:rgba(74,107,87,.11);border:1px solid var(--sage)}
.qual-answer.no{background:rgba(31,58,82,.07);border:1px solid rgba(31,58,82,.3)}
.qual-answer .mark{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  color:var(--white);
}
.qual-answer.yes .mark{background:var(--forest)}
.qual-answer.no .mark{background:var(--maroon)}
.qual-answer b{display:block;font-family:var(--serif);font-size:1.13rem;color:var(--brand);
  margin-bottom:3px}
.qual-answer.no b{color:var(--maroon)}
.qual-answer p{font-size:.92rem;margin:0}

.state-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:8px;margin-top:26px;
}
.state{
  display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:var(--r-s);
  background:var(--paper-2);border:1px solid transparent;font-size:.88rem;font-weight:500;
  color:var(--body);min-height:44px;
  transition:background-color .26s var(--ease),border-color .26s var(--ease),
             transform .26s var(--ease-out),opacity .26s var(--ease);
}
.state .ab{
  font-size:.7rem;font-weight:800;letter-spacing:.06em;color:var(--white);background:var(--moss);
  padding:3px 6px;border-radius:5px;flex-shrink:0;min-width:28px;text-align:center;
}
.state:hover{background:var(--sand);border-color:var(--sage);transform:translateY(-2px)}
.state.home .ab{background:var(--maroon)}
.state.dim{opacity:.2}
.state.hit{background:var(--sand);border-color:var(--maroon);animation:pop .45s var(--ease-out)}
.state-empty{
  grid-column:1/-1;padding:26px;text-align:center;color:var(--muted);font-size:.94rem;
  background:var(--paper-2);border-radius:var(--r);
}

/* =====================================================================================
   FORMS — the inquiry form. It posts to a real endpoint and reports what happened.
   ===================================================================================== */
.form-grid{display:grid;gap:18px}
.field label{display:block;font-size:.86rem;font-weight:600;color:var(--brand);margin-bottom:7px}
.field .hint{display:block;font-weight:400;color:var(--muted);font-size:.79rem;margin-top:3px}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:13px 16px;font:inherit;font-size:1rem;
  color:var(--ink);background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-s);
  transition:border-color .26s var(--ease),box-shadow .26s var(--ease);
}
.field textarea{min-height:132px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--action);box-shadow:0 0 0 4px rgba(31,58,82,.13);
}
.field input:invalid:not(:placeholder-shown){border-color:var(--maroon)}
.req{color:var(--maroon);font-weight:700}
.consent{
  display:flex;gap:12px;align-items:flex-start;padding:17px 19px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r);font-size:.85rem;line-height:1.55;
}
.consent input{width:24px;height:24px;min-height:0;flex-shrink:0;margin-top:1px;
  accent-color:var(--action)}   /* 24px floor, WCAG 2.5.8 */
.form-result{padding:19px 22px;border-radius:var(--r);margin-bottom:22px;
  animation:answerIn .42s var(--ease-out)}
.form-result.ok{background:rgba(74,107,87,.11);border:1px solid var(--sage)}
.form-result.err{background:rgba(31,58,82,.07);border:1px solid rgba(31,58,82,.3)}
.form-result b{font-family:var(--serif);font-size:1.1rem;color:var(--brand);display:block;
  margin-bottom:5px}
.form-result.err b{color:var(--maroon)}

/* =====================================================================================
   LEGAL PAGES
   ===================================================================================== */
.review-banner{
  background:#F1EBE5;border:1.5px solid var(--maroon);border-radius:var(--r);
  padding:19px 23px;margin-bottom:38px;display:flex;gap:15px;align-items:flex-start;
}
.review-banner svg{width:23px;height:23px;flex-shrink:0;color:var(--maroon);margin-top:2px}
.review-banner b{display:block;color:var(--maroon);font-size:.86rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:6px}
.review-banner p{font-size:.9rem;margin:0;color:var(--body)}
.legal{max-width:74ch}
.legal h2{font-size:1.4rem;margin:44px 0 14px;padding-top:22px;border-top:1px solid var(--line)}
.legal h2:first-of-type{margin-top:28px}
.legal h3{font-size:1.08rem;margin:26px 0 9px;color:var(--bark)}
.legal ul,.legal ol{padding-left:22px;margin:0 0 1.1em}
.legal li{margin-bottom:8px}
.legal .updated{font-size:.86rem;color:var(--muted);margin-bottom:8px}
/* CONTACT LINKS IN THE FOOTER — email and phone.
   Adding the real phone number turned an inert span into a tel: LINK, and a link is a tap
   target: it measured 97x17px, under the WCAG 2.5.8 minimum of 24px, on all 14 routes at
   both widths (28 failures). On a broker's site the phone number is the single most
   important thing a visitor taps on a phone, so it gets a genuine target, not the minimum.
   Vertical padding on an inline element does not affect the line box, so this grows the hit
   area without shifting the footer layout. */
.site-foot a[href^="tel:"],
.site-foot a[href^="mailto:"]{
  display:inline-flex;align-items:center;min-height:32px;padding:4px 2px;
}
@media (max-width:900px){
  /* Thumbs, not cursors. 44px is the comfortable target on a phone. */
  .site-foot a[href^="tel:"],
  .site-foot a[href^="mailto:"]{min-height:44px;padding:8px 2px}
}

.supply{
  background:var(--sand);border:1px dashed var(--bark);border-radius:5px;
  padding:1px 8px;font-size:.84em;font-weight:700;color:var(--bark);
  font-family:var(--sans);white-space:nowrap;
}

/* =====================================================================================
   CLOSING CTA + FOOTER
   ===================================================================================== */
/* Also lifted 2026-09-21. This was the second dark slab (370px). Sand keeps it distinct
   from the surrounding cream without turning the closing moment into a hole in the page. */
.closer{
  background:var(--sand);border-radius:var(--r-xl);padding:clamp(40px,6vw,76px);
  text-align:center;position:relative;overflow:hidden;box-shadow:var(--sh-3);
}
.closer::before{
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  top:-270px;right:-170px;pointer-events:none;
  background:radial-gradient(circle,rgba(169,140,107,.20),transparent 68%);
  animation:orbit 20s var(--ease) infinite;
}
/* The ground flipped from --forest to --sand, so EVERY colour in here had to flip with
   it. Left as-is these were --paper on sand and --sand on sand: invisible, not merely
   low-contrast. Recomputed against --sand #E6DCCA:
     --brand  #4A3729  8.27   --body #3E3931  8.42   --action #6B2E35  7.48
   NOT --muted (#6B6356), which is 4.36 on sand and fails - that is a recorded landmine in
   this lane and it is why nothing in here uses it. */
.closer h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:16px;position:relative;
  color:var(--brand)}                                   /*  8.27 on --sand */
.closer .lede{margin:0 auto 30px;text-align:center;position:relative;
  color:var(--body);max-width:56ch}                     /*  8.42 on --sand */
.closer .eyebrow{color:var(--brand-soft)}               /*  6.52 on --sand */
.closer .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative}

.site-foot{background:var(--ink);color:var(--sand);padding:70px 0 34px;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,4vw,52px)}
.site-foot h2{
  font-family:var(--sans);font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tan-light);margin-bottom:16px;font-weight:700;line-height:1.3;
}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.site-foot li{display:flex}
.site-foot ul a{
  color:var(--sand);text-decoration:none;
  display:flex;align-items:center;min-height:28px;padding:3px 0;   /* 24px AA floor cleared */
  transition:color .24s var(--ease),padding-left .24s var(--ease);
}
.site-foot a{color:var(--sand);text-decoration:none;
  transition:color .24s var(--ease),padding-left .24s var(--ease)}
.site-foot ul a:hover{color:var(--white);padding-left:5px}
.site-foot a:hover{color:var(--white)}
.site-foot .brandmark .wm b{color:var(--paper)}
.site-foot .brandmark .wm small{color:var(--tan-light)}
.site-foot .mk{background:var(--forest-2)}
.disclosure{
  margin-top:48px;padding-top:26px;border-top:1px solid rgba(191,169,140,.22);
  font-size:.775rem;line-height:1.66;color:var(--tan-light);
}
.disclosure b{color:var(--sand)}
.foot-base{
  margin-top:22px;padding-top:20px;border-top:1px solid rgba(191,169,140,.22);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.79rem;color:var(--tan-light);
}
.preview-tag{
  display:inline-flex;align-items:center;gap:7px;color:var(--tan-light);
}
.preview-tag i{width:6px;height:6px;border-radius:50%;background:var(--tan);
  animation:beat 2.4s var(--ease) infinite;font-size:0}

/* =====================================================================================
   REVEAL — staggered, IntersectionObserver-driven
   ===================================================================================== */
.rev{opacity:0;transform:translateY(22px);
  transition:opacity .74s var(--ease-out),transform .74s var(--ease-out)}
.rev.in{opacity:1;transform:none}
.rev-d1{transition-delay:.08s}
.rev-d2{transition-delay:.16s}
.rev-d3{transition-delay:.24s}
.rev-d4{transition-delay:.32s}
.rev-d5{transition-delay:.40s}

/* =====================================================================================
   MOTION — 9 keyframes. Every one is purposeful, none of it is decoration for its
   own sake, and all of it is switched off under prefers-reduced-motion below.
   ===================================================================================== */
@keyframes sweep{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes drift{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.07);opacity:1}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes answerIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes beat{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}
@keyframes orbit{0%,100%{transform:translate(0,0)}50%{transform:translate(-34px,26px)}}

/* =====================================================================================
   RESPONSIVE — mobile-first intent, no horizontal scroll at 390px
   ===================================================================================== */
@media (max-width:1040px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero-grid,.split{grid-template-columns:1fr}
  .g-3{grid-template-columns:1fr}
  .portrait{max-width:420px;margin:0 auto}
  .badge-tl{left:-10px}
  .badge-br{right:-10px}
  .nav{
    position:fixed;inset:var(--head-h) 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:12px var(--gut) 22px;
    box-shadow:var(--sh-2);transform:translateY(-14px);opacity:0;pointer-events:none;
    visibility:hidden;                 /* removes the links from the tab order too */
    transition:opacity .28s var(--ease),transform .28s var(--ease-out),
               visibility 0s linear .28s;
    max-height:calc(100vh - var(--head-h));overflow-y:auto;
  }
  .nav.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;
    transition:opacity .28s var(--ease),transform .28s var(--ease-out),
               visibility 0s linear 0s}
  .nav a{padding:15px 4px;border-bottom:1px solid var(--line);border-radius:0;font-size:1rem}
  .nav a::after{display:none}
  .burger{display:grid}
  .head-cta .btn{padding:10px 16px;min-height:46px;font-size:.86rem}
  .head-cta .btn svg{display:none}
  .nav .mob-book{
    display:flex;align-items:center;justify-content:center;
    margin-top:14px;background:var(--gold);color:var(--ink);
    border-radius:999px;min-height:52px;font-weight:600;border-bottom:0;
  }
  .nav .mob-book:hover{background:var(--gold-2);color:var(--ink)}
}
@media (max-width:640px){
  body{font-size:16px}
  /* Header fit at phone widths. Measured: brandmark 205 + CTA 113 + burger 46 > 350px of
     usable row, which pushed the burger past the viewport edge. */
  .head-in{gap:10px}
  .brandmark{min-width:0;flex-shrink:1}
  .brandmark .wm small{display:none}
  .brandmark .wm b{font-size:1.02rem}
  .head-cta{margin-left:auto}
  .head-cta .btn{padding:10px 14px;font-size:.82rem;min-height:46px}
  .g-2,.g-4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:8px}
  .step .n{font-size:1.9rem}
  .badge{position:static;margin-top:12px;max-width:none;animation:none}
  .portrait-frame{aspect-ratio:1/1}
  .closer{border-radius:var(--r-l)}
  .state-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .foot-base{flex-direction:column;gap:9px}
}

/* =====================================================================================
   REDUCED MOTION — honoured completely. Nothing animates, nothing is hidden.
   The .rev guard matters most: without it, a reduced-motion visitor sees blank sections.
   ===================================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .rev{opacity:1 !important;transform:none !important}
  .hero h1 em::after{transform:scaleX(1)}
  .marquee{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .announce .shimmer{display:none}
}

/* Print: legal pages get printed and faxed. Make that work. */
@media print{
  .site-head,.announce,.closer,.burger,.skip-link,.hero-bg{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .rev{opacity:1;transform:none}
  a{color:#000;text-decoration:underline}
}

/* ---- Round 2 (2026-10-19): brand logo, footer, form ------------------------------ */
.brandmark .mk{width:auto;height:44px;background:none;box-shadow:none;border-radius:0;display:block}
.brandmark .mk img{display:block;height:44px;width:auto}
.brandmark:hover .mk{transform:rotate(-4deg) scale(1.04);background:none}
.site-foot{background:#1F2E22}                  /* the logo file's own deep forest ground */
.foot-logo{display:inline-block;line-height:0;border-radius:6px}
.foot-logo img{display:block;width:100%;max-width:300px;height:auto}
.logo-plate{margin:0 0 20px;padding:0;background:#F4F0E6;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;line-height:0}
.logo-plate img{display:block;width:100%;max-width:340px;height:auto;margin:0 auto}
.logo-form{max-width:240px}
.logo-ok{max-width:220px;margin-bottom:16px}
.check{display:flex;gap:12px;align-items:center;font-size:.95rem;color:var(--body);
  min-height:44px;cursor:pointer}
.check input{width:22px;height:22px;min-height:0;flex-shrink:0;accent-color:var(--brand)}
@media (max-width:560px){.brandmark .wm b{font-size:1rem}.head-in{gap:12px}}