/* ==========================================================================
   STRCAS — shared stylesheet
   Short-Term Rental Compliance Audit Services
   Palette: navy #0A2647 · forest #2AA574 · gold #D4AF37 · off-white #F4F5F6
   ========================================================================== */

/* --------------------------------------------------------------------------
   LT MUSEUM — the house display face, shared with STRLCS.
   Self-hosted on STRCAS's OWN Cloudinary account (cjelowtr), not STRLCS's, so
   the two brands do not share an asset dependency.

   Only the four faces the site actually uses are loaded. Audited 2026-08-05:
     700 normal  x22 rules (.title-xl, .title-l, every heading)
     700 italic  x1  (.step-num) + `.hero h1 em` on every hero
     400 italic  x3  (.instr li, .role-tagline, .note-box p)
     400 normal  base for the family
   Light, LightItalic and Inline are deliberately NOT loaded — nothing uses
   them, and each is another 41KB on first paint.

   font-display:swap matters: headings render immediately in Georgia and swap
   when the face arrives. Without it iOS blocks the text for up to 3 seconds.
   -------------------------------------------------------------------------- */
@font-face{font-family:"LT Museum";font-weight:400;font-style:normal;font-display:swap;
  src:url("https://res.cloudinary.com/cjelowtr/raw/upload/v1785909787/LTMuseum-Reg_gqg8h5.ttf") format("truetype")}
@font-face{font-family:"LT Museum";font-weight:400;font-style:italic;font-display:swap;
  src:url("https://res.cloudinary.com/cjelowtr/raw/upload/v1785909775/LTMuseum-Ital_tfr0pc.ttf") format("truetype")}
@font-face{font-family:"LT Museum";font-weight:700;font-style:normal;font-display:swap;
  src:url("https://res.cloudinary.com/cjelowtr/raw/upload/v1785909775/LTMuseum-Bold_hqyznk.ttf") format("truetype")}
@font-face{font-family:"LT Museum";font-weight:700;font-style:italic;font-display:swap;
  src:url("https://res.cloudinary.com/cjelowtr/raw/upload/v1785909776/LTMuseum-BoldItalic_nx6xxt.ttf") format("truetype")}

:root{
  --white:#FFFFFF;
  --off-white:#F4F5F6;
  --grey-soft:#E7EAEC;   /* cream -> mushroom -> light grey. No warmth left in the neutrals. */
  --hairline:#DDE1E4;
  --hairline-strong:#BEC4C9;
  --navy-deep:#0A2647;
  --navy:#173B69;
  --navy-glow:#3B5C8A;
  --forest:#2AA574;
  --forest-bright:#3FC28C;
  --forest-glow:#5FD3A2;
  --gold:#D4AF37;
  --gold-glow:#EBCE76;
  --gold-deep:#A8871F;
  --ink:#1A1A1A;
  --ink-body:#2F3238;
  --ink-muted:#5F6D75;
  --font-display:"LT Museum",Georgia,"Times New Roman",serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

html{scroll-behavior:smooth;background:var(--white);color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);color:var(--ink-body);font-size:17px;line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow-x:hidden}
@media (max-width:640px){body{font-size:18px;line-height:1.6}}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}

.wrap{width:min(100% - 40px,1200px);margin-inline:auto}
.wrap-narrow{width:min(100% - 40px,860px);margin-inline:auto}

/* ===== Typography ===== */
.eyebrow-gold{display:inline-block;color:var(--gold);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.24em;margin-bottom:16px}
.section-eyebrow{display:inline-block;color:var(--forest);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.20em;margin-bottom:14px}
.section-eyebrow.on-dark{color:var(--forest-bright)}
.title-xl{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,6.4vw,84px);line-height:0.98;letter-spacing:-0.025em;text-wrap:balance}
.title-l{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4.6vw,54px);line-height:1.04;letter-spacing:-0.02em;text-wrap:balance}
.title-m{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.2vw,34px);line-height:1.1;letter-spacing:-0.015em;text-wrap:balance}
.title-l em,.title-xl em,.title-m em{font-style:italic}
.title-ink{color:var(--navy-deep)}
.title-white{color:var(--white)}
.lede{font-size:19px;line-height:1.6;color:var(--ink-muted)}
.lede.on-dark{color:rgba(255,255,255,0.82)}
.center{text-align:center}
.measure{max-width:62ch}
.measure-center{max-width:62ch;margin-inline:auto}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;border-radius:8px;text-decoration:none;font-weight:800;font-family:var(--font-body);font-size:14.5px;text-transform:uppercase;letter-spacing:0.10em;transition:background .18s,transform .12s,box-shadow .18s,color .18s,border-color .18s;border:1.5px solid transparent;cursor:pointer;line-height:1}
.btn::after{content:"→";font-size:18px;font-weight:900;transition:transform .18s}
.btn:hover::after{transform:translateX(3px)}
.btn-gold{background:var(--gold);color:var(--navy-deep) !important;border-color:var(--gold);box-shadow:0 8px 26px -8px rgba(212,175,55,.55)}
.btn-gold:hover{background:var(--gold-glow);border-color:var(--gold-glow);transform:translateY(-1px);box-shadow:0 12px 32px -8px rgba(212,175,55,.7)}
.btn-navy{background:var(--navy-deep);color:var(--white) !important;border-color:var(--navy-deep);box-shadow:0 8px 26px -8px rgba(10,38,71,.35)}
.btn-navy:hover{background:var(--navy);border-color:var(--navy);transform:translateY(-1px)}
.btn-ghost-navy{background:transparent;color:var(--navy-deep) !important;border-color:var(--hairline-strong)}
.btn-ghost-navy:hover{background:var(--navy-deep);color:var(--white) !important;border-color:var(--navy-deep)}
.btn-ghost-white{background:transparent;color:var(--white) !important;border-color:rgba(255,255,255,.4)}
.btn-ghost-white:hover{background:rgba(255,255,255,.1);border-color:var(--white)}
.btn-wa{background:#25D366;color:#0B3B22 !important;border-color:#25D366}
.btn-wa:hover{background:#4BE38A;border-color:#4BE38A;transform:translateY(-1px)}
.btn-large{padding:20px 40px;font-size:15.5px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn-row.center{justify-content:center}

/* ===== Sections ===== */
.sec{padding:84px 0}
.sec-tight{padding:56px 0}
@media (max-width:720px){.sec{padding:60px 0}.sec-tight{padding:44px 0}}
.sec-paper{background:var(--white)}
/* .sec-off retired 2026-08-02 — one light ground only. --off-white still
   backs the body and hover states; .sec-grey is the only section band. */
.sec-grey{background:var(--grey-soft)}
.sec-navy{background:var(--navy-deep);color:var(--white)}
.sec-navy p{color:rgba(255,255,255,.85)}
.sec-head{text-align:center;margin-bottom:52px}
.sec-head .lede{margin-inline:auto;max-width:62ch}

/* ===== Top banner ===== */
.topbar{background:var(--navy-deep);color:var(--white);padding:12px 20px;text-align:center;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;border-bottom:1px solid rgba(212,175,55,.35)}
.topbar .accent{color:var(--gold)}
@media (max-width:640px){.topbar{font-size:12.5px;padding:10px 16px;letter-spacing:.1em}}

/* ===== Nav ===== */
.topnav-wrap{background:var(--white);border-bottom:1px solid var(--hairline);position:sticky;top:0;z-index:100;box-shadow:0 2px 8px -6px rgba(10,38,71,.08)}
.topnav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:20px}
.topnav-brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.topnav-brand-mark{width:42px;height:50px;flex-shrink:0}
.topnav-brand-text{display:flex;flex-direction:column;line-height:1}
.topnav-brand-name{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--navy-deep);letter-spacing:.02em}
.topnav-brand-sub{font-size:8.5px;font-weight:700;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.13em;margin-top:3px}
.topnav-links{display:flex;gap:2px;align-items:center;list-style:none}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:6px;color:var(--ink-body);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.01em;padding:10px 12px;border-radius:6px;transition:color .15s,background .15s;position:relative;white-space:nowrap;cursor:pointer}
.nav-link:hover{color:var(--navy-deep);background:var(--off-white)}
.nav-link.active{color:var(--navy-deep);font-weight:700}
.nav-link.active::after{content:"";position:absolute;bottom:3px;left:12px;right:12px;height:2px;background:var(--gold);border-radius:1px}
.nav-caret{width:10px;height:10px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s;opacity:.7}
.nav-item:hover .nav-caret{transform:rotate(180deg);opacity:1}
.nav-dropdown{position:absolute;top:100%;left:0;min-width:268px;background:var(--white);border:1px solid var(--hairline);border-radius:12px;box-shadow:0 20px 44px -18px rgba(10,38,71,.22);padding:10px;list-style:none;margin-top:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown a{display:flex;flex-direction:column;gap:2px;padding:11px 15px;border-radius:8px;text-decoration:none;color:var(--ink-body);font-size:13.5px;font-weight:600;transition:background .15s,color .15s}
.nav-dropdown a:hover{background:var(--off-white);color:var(--navy-deep)}
.nav-dropdown a small{font-size:11.5px;font-weight:500;color:var(--ink-muted);text-transform:none;line-height:1.4}
.nav-dropdown a:hover small{color:var(--forest)}
.nav-divider{height:1px;background:var(--hairline);margin:6px 4px}
.nav-cta{background:var(--gold);color:var(--navy-deep) !important;padding:12px 20px;border-radius:8px;font-weight:800;text-decoration:none;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;transition:background .18s,transform .12s;box-shadow:0 6px 18px -6px rgba(212,175,55,.55);flex-shrink:0;white-space:nowrap}
.nav-cta:hover{background:var(--gold-glow);transform:translateY(-1px)}
.nav-toggle{position:absolute;left:-9999px;opacity:0}
.nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:42px;height:42px;border-radius:50%;cursor:pointer;background:rgba(10,38,71,.06);border:none;flex-shrink:0}
.nav-burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--navy-deep);transition:transform .2s,opacity .2s}
.nav-toggle:checked~.nav-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle:checked~.nav-burger span:nth-child(2){opacity:0}
.nav-toggle:checked~.nav-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (max-width:1140px){.nav-link{padding:10px 9px;font-size:12.5px}.nav-cta{padding:11px 14px;font-size:11px}.topnav-brand-sub{display:none}}
@media (max-width:960px){
  .topnav-brand-mark{width:36px;height:44px}
  .topnav-brand-name{font-size:18px}
  .nav-burger{display:flex}
  .nav-cta{display:none}
  .topnav{position:relative}
  .topnav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--white);border-bottom:1px solid var(--hairline);max-height:0;overflow:hidden;transition:max-height .28s ease;pointer-events:none;align-items:stretch;z-index:110}
  .nav-item{width:100%;border-top:1px solid rgba(0,0,0,.05)}
  .nav-item:first-child{border-top:none}
  .nav-link{padding:16px 20px;font-size:15px;border-radius:0;justify-content:space-between;width:100%}
  .nav-link.active::after{display:none}
  .nav-dropdown{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;border-radius:0;margin:0;padding:0 20px;max-height:0;overflow:hidden;transition:max-height .28s ease,padding .28s ease;background:var(--off-white);min-width:0}
  .nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{max-height:640px;padding:8px 20px 14px}
  .nav-toggle:checked~.topnav-links{max-height:90vh;overflow-y:auto;pointer-events:auto;box-shadow:0 12px 24px -12px rgba(10,38,71,.28)}
}

/* ===== HERO — rotating national backdrop ===== */
.hero{position:relative;padding:104px 0 118px;overflow:hidden;color:var(--white);background:var(--navy-deep)}
.hero-sm{padding:76px 0 84px}
.hero-slides{position:absolute;inset:0;pointer-events:none}
.hero-slide{position:absolute;inset:0;opacity:0;background-color:var(--navy-deep);background-size:cover;background-position:center;filter:saturate(1.06) contrast(1.03);animation:heroFade 45s infinite}
.hero-slide:nth-child(1){animation-delay:0s}
.hero-slide:nth-child(2){animation-delay:9s}
.hero-slide:nth-child(3){animation-delay:18s}
.hero-slide:nth-child(4){animation-delay:27s}
.hero-slide:nth-child(5){animation-delay:36s}
@keyframes heroFade{0%{opacity:0}3%{opacity:1}18%{opacity:1}21%{opacity:0}100%{opacity:0}}
/* Placeholder scenes — replace each background with a real photograph.
   Keep the overlay below or the headline stops being legible. */
/* Hero photography — Cloudinary. f_auto,q_auto serves WebP/AVIF instead of the
   source PNG; w_2200 caps delivery width. Never link the raw .png path. */
.slide-clifton  {background-image:url("https://res.cloudinary.com/cjelowtr/image/upload/f_auto,q_auto,w_2200/v1785656267/strcas-hero-01-clifton-villa_bxxpx6.png")}
.slide-plett    {background-image:url("https://res.cloudinary.com/cjelowtr/image/upload/f_auto,q_auto,w_2200/v1785656267/strcas-hero-02-plett-clifftop_kb8rw8.png")}
.slide-bokaap   {background-image:url("https://res.cloudinary.com/cjelowtr/image/upload/f_auto,q_auto,w_2200/v1785656267/strcas-hero-03-bo-kaap_lhciph.png")}
.slide-karoo    {background-image:url("https://res.cloudinary.com/cjelowtr/image/upload/f_auto,q_auto,w_2200/v1785656268/strcas-hero-04-karoo-cottage_fjqywt.png")}
.slide-winelands{background-image:url("https://res.cloudinary.com/cjelowtr/image/upload/f_auto,q_auto,w_2200/v1785656269/strcas-hero-05-winelands-manor_hfd8o9.png")}
.slide-umhlanga {background-image:url("https://res.cloudinary.com/cjelowtr/image/upload/f_auto,q_auto,w_2200/v1785656269/strcas-hero-06-umhlanga-apartment_pkioij.png")}
.slide-joburg   {background-image:url("https://res.cloudinary.com/cjelowtr/image/upload/f_auto,q_auto,w_2200/v1785656271/strcas-hero-07-joburg-loft_uob30x.png")}
.slide-hotel    {background-image:url("https://res.cloudinary.com/cjelowtr/image/upload/f_auto,q_auto,w_2200/v1785656271/strcas-hero-08-boutique-hotel_nsiqme.png")}
.slide-clarens  {background-image:url("https://res.cloudinary.com/cjelowtr/image/upload/f_auto,q_auto,w_2200/v1785656271/strcas-hero-09-clarens-guesthouse_kh0kdm.png")}
.slide-bushveld {background-image:url("https://res.cloudinary.com/cjelowtr/image/upload/f_auto,q_auto,w_2200/v1785656271/strcas-hero-10-bushveld-lodge_aw1g1p.png")}
/* Two layers, not one flat wash: a scrim that sits only behind the type, over a
   lighter base. ~67% where the headline is, ~44% in the corners — enough to hold
   white serif, light enough that the photograph is still a photograph. */
.hero-overlay{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse 78% 60% at 50% 44%,rgba(10,38,71,.48) 0%,rgba(10,38,71,.30) 52%,rgba(10,38,71,0) 100%),
  linear-gradient(180deg,rgba(10,38,71,.44) 0%,rgba(10,38,71,.36) 40%,rgba(10,38,71,.62) 100%)}
.hero-skyline{position:absolute;left:0;right:0;bottom:0;height:200px;opacity:.085;pointer-events:none}
.hero-skyline svg{width:100%;height:100%}
.hero-watermark{position:absolute;right:-70px;top:50%;transform:translateY(-50%);width:500px;height:600px;opacity:.05;pointer-events:none}
@media (max-width:820px){.hero-watermark{width:320px;height:384px;right:-130px}}
.hero .wrap{position:relative;z-index:2;text-align:center;max-width:min(100% - 40px,980px)}
.hero-eyebrow{display:inline-block;color:var(--gold);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.26em;margin:0 auto 28px;padding:9px 20px;border:1px solid rgba(212,175,55,.45);border-radius:100px;background:rgba(212,175,55,.09);line-height:1.6}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(42px,6.4vw,88px);line-height:1.02;letter-spacing:-.02em;color:var(--white);margin:0 auto 30px;text-wrap:balance;max-width:17ch}
.hero h1 em{font-style:italic;color:var(--gold-glow)}
.hero-sub{font-size:19px;line-height:1.62;color:rgba(255,255,255,.88);max-width:74ch;margin:0 auto;text-wrap:balance}
.hero-divider{width:60px;height:1px;background:var(--gold);margin:42px auto 0;position:relative}
.hero-divider::before{content:"";position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:7px;height:7px;background:var(--gold);border-radius:50%}
.hero .btn-row{margin-top:40px}
/* Rotating province ticker */
.hero-ticker{position:absolute;left:0;right:0;bottom:24px;z-index:3;text-align:center;pointer-events:none}
.hero-ticker-inner{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:100px;background:rgba(10,38,71,.5);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px)}
.hero-ticker-dot{width:6px;height:6px;border-radius:50%;background:var(--forest-bright);flex-shrink:0}
.hero-ticker-label{position:relative;height:15px;width:190px;overflow:hidden;text-align:left}
.hero-ticker-label span{position:absolute;left:0;top:0;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.9);white-space:nowrap;opacity:0;animation:heroFade 45s infinite}
.hero-ticker-label span:nth-child(1){animation-delay:0s}
.hero-ticker-label span:nth-child(2){animation-delay:9s}
.hero-ticker-label span:nth-child(3){animation-delay:18s}
.hero-ticker-label span:nth-child(4){animation-delay:27s}
.hero-ticker-label span:nth-child(5){animation-delay:36s}
@media (max-width:600px){.hero-ticker{display:none}}
@media (prefers-reduced-motion:reduce){
  .hero-slide,.hero-ticker-label span{animation:none}
  .hero-slide:nth-child(1),.hero-ticker-label span:nth-child(1){opacity:1}
}

/* ===== Trust bar ===== */
.trust-bar{background:var(--off-white);padding:36px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media (max-width:860px){.trust-grid{grid-template-columns:repeat(2,1fr);gap:26px 20px}}
@media (max-width:520px){.trust-grid{grid-template-columns:1fr}}
.trust-item{display:flex;align-items:flex-start;gap:14px}
.trust-icon{width:40px;height:40px;border-radius:10px;background:rgba(42,165,116,.12);color:var(--forest);flex-shrink:0;display:grid;place-items:center}
.trust-icon svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.trust-body h4{font-weight:800;font-size:13.5px;color:var(--navy-deep);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px;line-height:1.2}
.trust-body p{font-size:14px;color:var(--ink-muted);line-height:1.5}

/* ===== Generic card grids ===== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:940px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.grid-2{grid-template-columns:1fr}}
@media (max-width:560px){.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:var(--white);border:1px solid var(--hairline);border-radius:14px;padding:32px 28px;transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-3px);box-shadow:0 20px 44px -18px rgba(10,38,71,.18);border-color:var(--hairline-strong)}
.card-icon{width:46px;height:46px;border-radius:11px;background:rgba(42,165,116,.12);color:var(--forest);display:grid;place-items:center;margin-bottom:20px}
.card-icon svg{width:23px;height:23px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card h3,.card h4{font-family:var(--font-display);font-weight:700;color:var(--navy-deep);letter-spacing:-.005em;line-height:1.18;margin-bottom:10px}
.card h3{font-size:20px}
.card h4{font-size:18px}
.card p{font-size:14.5px;color:var(--ink-muted);line-height:1.58}
.sec-navy .card{border-color:rgba(255,255,255,.06)}
.sec-navy .card p{color:var(--ink-muted)}

/* ===== Check lists ===== */
.checks{list-style:none}
.checks li{display:flex;align-items:flex-start;gap:12px;padding:8px 0;font-size:15.5px;line-height:1.55;color:var(--ink-body)}
.checks li svg{width:20px;height:20px;flex-shrink:0;color:var(--forest);margin-top:3px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.checks.on-dark li{color:rgba(255,255,255,.92)}
.checks.on-dark li svg{color:var(--forest-bright)}

/* ===== Numbered steps ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:940px){.steps{grid-template-columns:repeat(2,1fr);gap:16px}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{background:var(--white);padding:32px 22px 26px;border-radius:14px;border:1px solid var(--hairline);text-align:center;display:flex;flex-direction:column;box-shadow:0 4px 12px -6px rgba(0,0,0,.06);transition:transform .15s,box-shadow .15s}
.step:hover{transform:translateY(-4px);box-shadow:0 12px 26px -10px rgba(10,38,71,.2)}
.step-label{display:block;font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--forest);text-transform:uppercase;margin-bottom:14px}
.step-num{width:52px;height:52px;border-radius:50%;background:var(--navy-deep);color:var(--white);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:21px;font-style:italic;margin:0 auto 18px;box-shadow:0 8px 18px -6px rgba(10,38,71,.44);border:3px solid var(--white)}
.step h3{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--navy-deep);margin-bottom:10px;line-height:1.2}
.step p{font-size:14px;color:var(--ink-body);line-height:1.55;flex:1}
.step .note{display:block;margin-top:14px;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);border-top:1px solid var(--hairline);padding-top:12px}

/* ===== Split panel ===== */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.split.reverse .split-visual{order:2}
@media (max-width:940px){.split{grid-template-columns:1fr;gap:36px}.split.reverse .split-visual{order:0}}
.split-visual{position:relative;border-radius:16px;overflow:hidden;background:var(--navy-deep);aspect-ratio:16/11;box-shadow:0 24px 60px -24px rgba(10,38,71,.32);display:flex;align-items:center;justify-content:center;padding:40px}
.split-visual svg{width:170px;height:204px;color:rgba(255,255,255,.3)}

/* ===== Panel (rounded navy feature block) ===== */
.panel{background:var(--navy-deep);color:var(--white);border-radius:20px;padding:56px 48px;position:relative;overflow:hidden;box-shadow:0 24px 60px -24px rgba(10,38,71,.3)}
@media (max-width:820px){.panel{padding:38px 26px}}
.panel h2{color:var(--white)}
.panel h2 em{color:var(--gold)}
.panel .lede{color:rgba(255,255,255,.84)}
.panel-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
@media (max-width:940px){.panel-grid{grid-template-columns:1fr;gap:32px}}
.panel-aside{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:26px 24px;backdrop-filter:blur(6px)}
.panel-aside-label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--forest-bright);margin-bottom:14px}
.panel-aside h4{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--white);line-height:1.2;margin-bottom:16px}
.instr{list-style:none;display:flex;flex-direction:column;gap:12px}
.instr li{font-family:var(--font-display);font-style:italic;font-size:14px;color:rgba(255,255,255,.9);padding-left:18px;position:relative;line-height:1.4}
.instr li::before{content:"§";position:absolute;left:0;color:var(--gold);font-style:normal;font-weight:700;font-size:13px}

/* ===== Roles (assessor / auditor) ===== */
.role-card{background:var(--white);border:1px solid var(--hairline);border-radius:14px;padding:42px 38px;transition:transform .18s,box-shadow .18s,border-color .18s}
.role-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px -18px rgba(10,38,71,.22);border-color:var(--hairline-strong)}
.role-badge{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--forest);margin-bottom:22px}
.role-badge::before{content:"";width:24px;height:2px;background:var(--forest)}
.role-card h3{font-family:var(--font-display);font-weight:700;font-size:29px;color:var(--navy-deep);line-height:1.12;letter-spacing:-.01em;margin-bottom:16px}
.role-tagline{font-family:var(--font-display);font-style:italic;font-size:16.5px;color:var(--ink-muted);margin-bottom:26px;line-height:1.4}
.role-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.role-list li{position:relative;padding-left:32px;font-size:14.5px;color:var(--ink-body);line-height:1.55}
.role-list li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:8px;border-left:2px solid var(--forest);border-bottom:2px solid var(--forest);transform:rotate(-45deg)}
.role-foot{padding-top:24px;border-top:1px solid var(--hairline)}
.role-cta{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--navy-deep);text-decoration:none;transition:gap .18s,color .18s}
.role-cta::after{content:"→"}
.role-cta:hover{color:var(--forest);gap:16px}
.note-box{margin-top:30px;text-align:center;padding:28px 24px;background:var(--grey-soft);border-radius:14px}
.note-box p{font-family:var(--font-display);font-style:italic;font-size:17px;line-height:1.55;color:var(--ink-body);max-width:640px;margin-inline:auto}
.note-box strong{color:var(--navy-deep);font-style:normal;font-weight:700}

/* ===== Comparison table ===== */
.table-wrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:14px;background:var(--white)}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{text-align:left;padding:18px 22px;border-bottom:1px solid var(--hairline);font-size:14.5px;line-height:1.55;vertical-align:top}
th{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--forest);background:var(--off-white);white-space:nowrap}
tr:last-child td{border-bottom:none}
td strong{color:var(--navy-deep);font-weight:700}
.tag{display:inline-block;padding:4px 10px;border-radius:100px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.tag-live{background:rgba(42,165,116,.14);color:#1c7853}
.tag-draft{background:rgba(212,175,55,.18);color:#8a6f18}
.tag-comment{background:rgba(59,92,138,.14);color:#2d4a72}

/* ===== Callout ===== */
.callout{border-left:3px solid var(--gold);background:var(--grey-soft);padding:24px 28px;border-radius:0 12px 12px 0;margin:32px 0}
.callout p{font-size:15.5px;line-height:1.6;color:var(--ink-body)}
.callout strong{color:var(--navy-deep)}

/* ===== Stat row ===== */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
@media (max-width:820px){.stats{grid-template-columns:1fr;gap:28px}}
.stat{padding:0 28px;border-left:1px solid var(--hairline);display:flex;flex-direction:column}
.stat:first-child{border-left:none;padding-left:0}
@media (max-width:820px){.stat{border-left:none;padding:0}}
.stat-num{font-family:var(--font-display);font-size:clamp(38px,4.6vw,56px);font-weight:700;color:var(--navy-deep);line-height:1;letter-spacing:-.02em;margin-bottom:10px}
.stat-num em{font-style:italic;color:var(--forest)}
.stat-label{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:8px}
.stat p{font-size:14.5px;color:var(--ink-muted);line-height:1.55;margin-top:auto}
/* A phrase doing a number's job. At the full stat-num size it wraps to three lines
   and drags the whole row down — set smaller so the contrast reads as deliberate. */
.stat-num-phrase{font-size:clamp(26px,2.9vw,36px);line-height:1.14;max-width:11ch}
.sec-navy .stat{border-color:rgba(255,255,255,.14)}
.sec-navy .stat-num{color:var(--white)}
.sec-navy .stat-num em{color:var(--gold)}
.sec-navy .stat-label{color:var(--forest-bright)}

/* ===== Final CTA ===== */
.final{background:var(--navy-deep);color:var(--white);padding:80px 0}
.final-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-bottom:32px}
@media (max-width:860px){.final-grid{grid-template-columns:1fr;gap:30px;text-align:center}.final .checks{display:inline-block;text-align:left}}
.final h2{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,3.8vw,46px);line-height:1.06;letter-spacing:-.015em;color:var(--white);margin-bottom:16px;text-wrap:balance}
.final h2 em{font-style:italic;color:var(--gold)}
.final p{font-size:17px;color:rgba(255,255,255,.8);line-height:1.55}
.final-mid{text-align:center;max-width:660px;margin-inline:auto}
.final-note{margin-top:16px;font-size:13px;color:rgba(255,255,255,.62);display:inline-flex;align-items:center;gap:8px;font-weight:500}
.final-note svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}

/* ===== Band ===== */
.band{background:var(--grey-soft);padding:52px 0;border-top:1px solid var(--hairline)}  /* was --off-white: the last section-level use of it, which left one page ground
     lighter than every other. Now on the single light ground. */
.band-inner{display:grid;grid-template-columns:1fr auto auto;gap:32px;align-items:center}
@media (max-width:1000px){.band-inner{grid-template-columns:1fr;gap:20px;text-align:center}}
.band-eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.22em;color:var(--forest);text-transform:uppercase;margin-bottom:8px}
.band h3{font-family:var(--font-display);font-weight:700;font-size:clamp(21px,2.5vw,27px);line-height:1.2;color:var(--navy-deep);letter-spacing:-.01em;margin-bottom:6px}
.band p{font-size:15px;line-height:1.55;color:var(--ink-body);max-width:620px}
@media (max-width:1000px){.band p{margin-inline:auto}}
.band-cta{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:10px;font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;background:transparent;color:var(--navy-deep) !important;border:1.5px solid var(--hairline-strong);white-space:nowrap;transition:background .18s,transform .12s,color .18s,border-color .18s}
.band-cta::after{content:"→"}
.band-cta:hover{background:var(--navy-deep);color:var(--white) !important;border-color:var(--navy-deep);transform:translateY(-1px)}

/* ===== Prose (About / Framework body copy) ===== */
.prose h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,34px);color:var(--navy-deep);line-height:1.15;letter-spacing:-.015em;margin:44px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--navy-deep);margin:32px 0 12px}
.prose p{font-size:16.5px;line-height:1.72;color:var(--ink-body);margin-bottom:18px}
.prose ul{margin:0 0 20px 20px}
.prose li{font-size:16px;line-height:1.7;color:var(--ink-body);margin-bottom:8px}
.prose strong{color:var(--navy-deep);font-weight:700}

/* ===== Form ===== */
.form-card{background:var(--white);border:1px solid var(--hairline);border-radius:16px;padding:40px 36px;box-shadow:0 20px 44px -22px rgba(10,38,71,.16)}
@media (max-width:600px){.form-card{padding:28px 22px}}
.field{margin-bottom:20px}
.field label{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-deep);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;border:1.5px solid var(--hairline-strong);border-radius:9px;font-family:var(--font-body);font-size:15.5px;color:var(--ink-body);background:var(--white);transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(42,165,116,.15)}
.field textarea{min-height:120px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.field-row{grid-template-columns:1fr}}
.field-hint{font-size:12.5px;color:var(--ink-muted);margin-top:6px;line-height:1.5}

/* ===== Footer ===== */
.site-footer{background:var(--ink);color:rgba(255,255,255,.85);padding:56px 20px 28px}
.site-footer .wrap{width:min(100% - 40px,1200px)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;margin-bottom:36px}
@media (max-width:860px){.footer-top{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:520px){.footer-top{grid-template-columns:1fr;gap:24px}}
.footer-brand{display:flex;flex-direction:column;gap:12px}
.footer-mark{display:flex;align-items:center;gap:12px}
.footer-mark svg{width:36px;height:44px}
.footer-mark span{font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--white);letter-spacing:.03em}
.footer-tag{font-size:13px;color:rgba(255,255,255,.6);line-height:1.55;max-width:290px;margin-top:4px}
.footer-tagline{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:800;margin-top:8px}
.footer-col h4{font-size:11px;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:.16em;margin-bottom:16px}
.footer-col a{color:rgba(255,255,255,.78);text-decoration:none;display:block;font-size:14px;padding:5px 0;transition:color .15s}
.footer-col a:hover{color:var(--gold)}
.footer-copy{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);text-align:center;color:rgba(255,255,255,.55);font-size:12.5px;line-height:1.6}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ================= FIGURES — SVG diagrams =================
   Diagrams carry legal references and numbers, so they must never be scaled
   below legibility. On narrow screens the figure scrolls inside its own box
   rather than shrinking the type; the page body never scrolls sideways. */
.fig{margin:54px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.fig img{display:block;width:100%;min-width:780px;height:auto;border-radius:14px;border:1px solid var(--hairline)}
.fig figcaption{margin:16px auto 0;max-width:80ch;font-size:13.5px;line-height:1.6;color:var(--ink-muted);text-align:center}
.sec-navy .fig img{border-color:rgba(255,255,255,.18)}
.sec-navy .fig figcaption{color:rgba(255,255,255,.72)}
@media (max-width:820px){.fig{margin-top:38px}}

/* Photographic figures — unlike diagrams these carry no small type, so they
   scale down instead of scrolling. */
/* Capped: at the full 1200 wrap a 16:11 photo is 825px tall and reads as the
   point of the section rather than support for it. Inside a .split the column
   is already narrower than the cap, so this is a no-op there. */
.fig-photo{max-width:860px;margin-inline:auto}
.fig-photo img{min-width:0;aspect-ratio:16/11;object-fit:cover}

/* Raster diagrams delivered as a <picture> pair — a portrait cut swaps in on narrow
   screens, so unlike .fig they scale down instead of scrolling, and unlike
   .fig-photo they must never be cropped: the text is part of the image. */
.fig-responsive img{min-width:0;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}

/* Flow section: the portrait diagram runs down the right. Slightly narrower than
   the text column so the SVG's small type stays above ~10px at 1200 wrap. */
.split-flow{grid-template-columns:1fr 0.8fr;gap:56px;align-items:stretch}
/* Both columns take the height of the taller, and each pins its last element to
   the bottom edge — so the graphic and the diagram end level at any width,
   without either SVG having to be sized to match the other. */
.split-flow > *{display:flex;flex-direction:column}
.split-flow > * > :last-child{margin-top:auto}
@media (max-width:940px){.split-flow{grid-template-columns:1fr;gap:36px}}

/* ================= ASSESSOR PROFILE CARD =================
   An illustration of the allocation screen, not a real practitioner. The EXAMPLE
   strip is load-bearing — there are no accredited assessors yet, so this must
   never read as a record of one. */
.profile-card{background:var(--white);border:1px solid var(--hairline);border-radius:16px;overflow:hidden;box-shadow:0 22px 54px -26px rgba(10,38,71,.26)}
.profile-example{background:var(--navy-deep);color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:9px 12px;line-height:1.5}
.profile-top{display:flex;gap:18px;align-items:center;padding:24px 26px 20px}
.profile-avatar{width:82px;height:82px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--hairline)}
.profile-name{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--navy-deep);line-height:1.15}
.profile-meta{font-size:12.5px;color:var(--ink-muted);margin-top:5px;line-height:1.45}
.profile-pill{display:inline-block;margin-top:9px;padding:4px 11px;border-radius:100px;background:rgba(42,165,116,.13);color:#1C7853;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.profile-overall{display:flex;align-items:baseline;gap:9px;padding:0 26px 18px;border-bottom:1px solid var(--hairline)}
.profile-overall b{font-family:var(--font-display);font-size:34px;font-weight:700;color:var(--navy-deep);line-height:1}
.profile-overall span{font-size:12.5px;color:var(--ink-muted)}
.profile-body{padding:20px 26px 24px}
.profile-row{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.profile-row-label{font-size:13px;color:var(--ink-body);width:132px;flex-shrink:0}
.profile-bar{flex:1;height:6px;border-radius:3px;background:var(--grey-soft);overflow:hidden}
.profile-bar i{display:block;height:100%;background:var(--forest);border-radius:3px}
.profile-score{font-size:13px;font-weight:700;color:var(--navy-deep);width:28px;text-align:right;font-variant-numeric:tabular-nums}
.profile-more{font-size:12.5px;font-style:italic;color:var(--ink-muted);margin-top:14px}
.profile-foot{border-top:1px solid var(--hairline);margin-top:18px;padding-top:16px;font-size:12.5px;line-height:1.55;color:var(--ink-muted)}
.profile-foot strong{color:var(--navy-deep)}
@media (max-width:420px){.profile-top{flex-direction:column;text-align:center}.profile-row-label{width:104px;font-size:12px}}

/* Two boxes, one per column, stretched to the same height. Anything else in a
   column (a heading above, a caption below) breaks the match — so the heading
   goes inside the card and the caption goes below the whole split. */
.split-even{align-items:stretch}
.split-even > *{min-height:0}
.split-even .callout{height:100%;margin:0;display:flex;flex-direction:column;justify-content:center}
.split-even img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.split-cap{margin-top:18px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.62);text-align:center}

/* Panel content on a section that is already navy — strip the card so it reads as
   a full-width band, but keep .panel's text-colour rules. */
.panel-flat{background:none;border-radius:0;padding:0;box-shadow:none}

/* A callout or note-box as the last thing in a section stacks its own 32px margin
   on top of the section's 84px padding — reads as the section hanging open. */
.wrap > .callout:last-child,
.wrap-narrow > .callout:last-child,
.wrap > .note-box:last-child,
.wrap-narrow > .note-box:last-child{margin-bottom:0}

/* Light-ground variants of the panel aside and its list, for when this block sits
   on grey rather than inside a navy panel. */
.panel-aside.on-light{background:var(--white);border-color:var(--hairline);backdrop-filter:none}
.panel-aside.on-light .panel-aside-label{color:var(--forest)}
.panel-aside.on-light h4{color:var(--navy-deep)}
.panel-aside.on-light .instr li{color:var(--ink-body)}
.panel-aside.on-light .instr li::before{color:var(--gold-deep)}

/* Lifted out of the flow diagram so it reads as covering both columns. */
.flow-note{margin:34px auto 0;max-width:78ch;text-align:center;font-size:15px;line-height:1.6;color:var(--ink-muted)}
.flow-note strong{color:var(--navy-deep)}
.flow-note-sm{margin:10px auto 0;max-width:78ch;text-align:center;font-size:12.5px;font-style:italic;color:var(--ink-muted);opacity:.8}

/* "Join the Network" is a menu trigger, not a destination. As an <a href> a tap on
   mobile navigated away before the submenu could open, which made the auditor and
   training pages unreachable from the nav. */
span.nav-link{user-select:none}
span.nav-link:hover{color:var(--navy-deep);background:var(--off-white)}

/* ================= VIDEO =================
   Placeholder until the real embed goes in. Swap the inner div for the YouTube
   iframe and the 16:9 box, rounding and shadow all carry over unchanged. */
.video-wrap{width:min(100% - 40px,760px);margin:44px auto 0}
.video-frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#08203C;border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px}
.video-ph-play{width:74px;height:74px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 10px 30px -8px rgba(212,175,55,.6)}
.video-ph-play svg{width:26px;height:26px;fill:var(--navy-deep);margin-left:4px}
.video-ph-label{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.video-ph-title{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--white);line-height:1.3;max-width:30ch}
.video-cap{margin-top:14px;text-align:center;font-size:13px;color:rgba(255,255,255,.62)}
@media (max-width:600px){.video-ph-play{width:56px;height:56px}.video-ph-title{font-size:16px}}

/* Navy variant of the closing band. A modifier rather than a change to .band —
   become-an-assessor and contact still use the grey original. */
.band-navy{background:var(--navy-deep);border-top-color:rgba(255,255,255,.12)}
.band-navy .band-eyebrow{color:var(--forest-bright)}
.band-navy h3{color:var(--white)}
.band-navy p{color:rgba(255,255,255,.82)}
.band-navy .band-cta{color:var(--white) !important;border-color:rgba(255,255,255,.42)}
.band-navy .band-cta:hover{background:var(--white);color:var(--navy-deep) !important;border-color:var(--white)}

/* The caption was written for a navy hero; on a light ground it needs dark text. */
.sec-paper .video-cap,.sec-grey .video-cap{color:var(--ink-muted)}
.sec-paper .video-wrap,.sec-grey .video-wrap{margin-top:0}

/* ================= AT A GLANCE =================
   Funnel qualifier. A visitor should know within five seconds whether this page
   is for them, what the work is, and what the first step costs. Sits directly
   under the hero, above everything that requires reading. */
.glance{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--hairline);border-radius:16px;overflow:hidden;background:var(--white);box-shadow:0 18px 44px -26px rgba(10,38,71,.2)}
/* The base grid is hard-coded to 5 columns because every recruit/council page has
   exactly 5 cells. thank-you.html has 3, which left two empty columns and squashed
   the labels. Modifier must sit HERE — above the responsive rules below — so the
   2-col and 1-col breakpoints still override it on small screens. */
.glance-3{grid-template-columns:repeat(3,1fr)}
.glance-cell{padding:22px 22px 24px;border-left:1px solid var(--hairline);display:flex;flex-direction:column;gap:8px}
.glance-cell:first-child{border-left:none}
.glance-k{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--forest)}
.glance-v{font-size:13.5px;line-height:1.5;color:var(--ink-body)}
.glance-v strong{color:var(--navy-deep);font-weight:700}
@media (max-width:1040px){.glance{grid-template-columns:repeat(2,1fr)}
  .glance-cell{border-left:none;border-top:1px solid var(--hairline)}
  .glance-cell:nth-child(odd){border-right:1px solid var(--hairline)}
  .glance-cell:nth-child(-n+2){border-top:none}}
@media (max-width:560px){.glance{grid-template-columns:1fr}
  .glance-cell:nth-child(odd){border-right:none}
  .glance-cell:nth-child(2){border-top:1px solid var(--hairline)}}
.glance-lead{text-align:center;margin:0 auto 26px;max-width:62ch;font-size:18px;line-height:1.6;color:var(--ink-body)}
.glance-lead strong{color:var(--navy-deep)}

/* Light variant of the closing .final band. */
.final-light{background:var(--grey-soft);color:var(--ink-body)}
.final-light h2{color:var(--navy-deep)}
.final-light h2 em{color:var(--gold-deep)}
.final-light p{color:var(--ink-muted)}
.final-light .section-eyebrow{color:var(--forest)}
.final-light .final-note{color:var(--ink-muted)}

/* Prompt sitting directly above the video. */
.video-prompt{text-align:center;margin:34px auto 0;max-width:52ch;font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--navy-deep);line-height:1.35}
@media (max-width:600px){.video-prompt{font-size:17px}}

/* ================= NAVY CONTEXT =================
   Components default to dark type. Inside a navy section that renders invisible.
   These rules make the ground the single source of truth, so recolouring a
   section no longer means hand-editing every heading inside it. */
.sec-navy .card,
.sec-navy .step{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.sec-navy .card h3,.sec-navy .card h4,
.sec-navy .step h3,.sec-navy .step h4,
.sec-navy .prose h2,.sec-navy .prose h3,.sec-navy .prose h4{color:var(--white)}
.sec-navy .card p,.sec-navy .step p,.sec-navy .prose p,.sec-navy .prose li{color:rgba(255,255,255,.85)}
.sec-navy .card strong,.sec-navy .step strong,.sec-navy .prose strong{color:var(--white)}
.sec-navy .stat-num{color:var(--white)}
.sec-navy .stat-label{color:var(--forest-bright)}
.sec-navy .stat p{color:rgba(255,255,255,.8)}
.sec-navy .step-label{color:var(--forest-bright)}
.sec-navy .step-num{background:rgba(255,255,255,.12);color:var(--white)}

/* ================= REQUIREMENTS TABLE =================
   Four accommodation types against one set of compliance dimensions. Scrolls
   inside its own box on narrow screens — the page body never moves sideways. */
.req-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--hairline);border-radius:14px;background:var(--white)}
.req{width:100%;min-width:900px;border-collapse:collapse;font-size:13.5px}
.req th,.req td{padding:13px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--hairline);line-height:1.5}
.req thead th{position:sticky;top:0;background:var(--navy-deep);color:var(--white);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-top:none;z-index:1}
.req tbody tr:hover{background:var(--off-white)}
.req td:first-child{font-weight:700;color:var(--navy-deep);min-width:230px}
.req .auth{color:var(--ink-muted);font-size:12.5px;min-width:150px}
.req .yes{color:#1C7853;font-weight:700}
.req .no{color:var(--ink-muted)}
.req .cond{color:var(--gold-deep);font-weight:600}
.req-sec{margin-top:52px}
.req-sec h3{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--navy-deep);margin-bottom:6px}
.req-sec .req-note{font-size:14.5px;color:var(--ink-muted);margin-bottom:18px;max-width:78ch;line-height:1.6}
.req-key{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:8px;font-size:12.5px;color:var(--ink-muted)}
.req-key b{font-weight:700}

/* ================= STANDARDS FRAMEWORK =================
   One combined checklist. Every item carries a tier badge, because the sources
   range from binding statute to a draft code to proposed industry standards and
   they must never be mistaken for one another. */
.pillar{margin-top:44px;border:1px solid var(--hairline);border-radius:16px;overflow:hidden;background:var(--white)}
.pillar-head{padding:22px 26px;background:var(--navy-deep);color:var(--white)}
.pillar-head h3{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--white);line-height:1.2}
.pillar-head .pk{font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--forest-bright);display:block;margin-bottom:7px}
.pillar-head p{font-size:13.5px;color:rgba(255,255,255,.78);margin-top:8px;line-height:1.55;max-width:80ch}
.pillar-body{padding:6px 26px 22px}
.pgrp{margin-top:18px}
.pgrp-h{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);padding:14px 0 8px;border-bottom:1px solid var(--hairline)}
.pitem{display:flex;gap:14px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--hairline)}
.pitem:last-child{border-bottom:none}
.pitem-t{flex:1;font-size:14.5px;line-height:1.55;color:var(--ink-body)}
.pitem-t em{color:var(--ink-muted);font-style:normal;font-size:13px;display:block;margin-top:3px}
.tier{flex-shrink:0;width:96px;text-align:center;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:4px 6px;border-radius:100px;margin-top:2px;white-space:nowrap}
.t-law{background:rgba(42,165,116,.14);color:#1C7853}
.t-draft{background:rgba(212,175,55,.16);color:var(--gold-deep)}
.t-std{background:rgba(95,109,117,.12);color:var(--ink-muted)}
.tier-key{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.tier-key div{padding:18px 20px;border:1px solid var(--hairline);border-radius:12px;background:var(--white)}
.tier-key .tier{display:inline-block;width:auto;padding:4px 11px;margin-bottom:10px}
.tier-key p{font-size:13.5px;line-height:1.55;color:var(--ink-muted)}
@media (max-width:820px){.tier-key{grid-template-columns:1fr}.pitem{flex-direction:column;gap:6px}}

/* Netlify Forms honeypot — must never be visible or focusable. The hidden
   attribute alone is overridden by any rule that sets display on <p>. */
.hp{display:none !important}

/* PHONE FIELD — country code select beside the number.
   Pattern lifted from STRLCS (become-a-vendor/landing.html) rather than
   reinvented. Both selects and inputs already inherit padding, border and
   radius from `.field input,.field select,.field textarea`, so only layout
   is needed here. */
.phone-wrap{display:flex;gap:8px;align-items:stretch}
.phone-code{width:auto;min-width:210px;flex-shrink:0}
.phone-wrap input[type="tel"]{flex:1;min-width:0}

/* Grid children default to min-width:auto, so a wide child pushes the column
   past its track instead of shrinking. Without this the country select spills
   out of its half and lands on top of the field beside it. */
.field-row > .field{min-width:0}

/* Four of the five forms put the phone inside a 1fr 1fr row, where a 210px
   select plus a number input cannot fit half the width. Stack them there.
   STRLCS never hit this because its form is a single column. */
.field-row .phone-wrap{flex-direction:column;gap:10px}
.field-row .phone-code{min-width:0;width:100%}

@media (max-width:560px){
  .phone-wrap{flex-direction:column;gap:10px}
  .phone-code{min-width:0;width:100%}
}

/* ==========================================================================
   TYPOGRAPHY FLOORS — 40+ audience
   Source: New Businesses Template/Tracking/RHS_Landing_Page_Audit_Checklist.md §7
   Locked 2026-06-28 after Brinn phone-tested 17px against 19px and chose 19px.
   These are NOT design preferences. Do not lower them to make a layout fit.

     Landing page  mobile 19px | tablet 17-18px | desktop 17px
     CTA           19px desktop / 21px mobile, primary AND outline
     H1            >= 28px desktop / >= 24px mobile (mobile aims 32px+)
     Footer print  13-14px OK        Form inputs 17px OK
     Captions/labels 14-15px OK if not primary reading text
   ========================================================================== */

/* CTA floor. The site shipped at 14.5px, which is under the floor on every
   viewport. Tracking is eased from .10em as the size climbs — the locked rule
   governs SIZE, and wide tracking at 19px pushes buttons off narrow screens. */
.btn{font-size:19px;letter-spacing:.06em}
.btn-large{font-size:19px;letter-spacing:.06em}

/* MOBILE ONLY — 640px, not 820px. An 820px breakpoint swallows tablets into
   the mobile floor, which would push tablet body to 19px when the rule says
   17-18px. Tablet is therefore left on the 17px base rule deliberately.
     desktop >1024  17px  |  tablet 641-1024  17px  |  mobile <=640  19px      */
@media (max-width:640px){
  body{font-size:19px}          /* overrides the 18px at line ~32 — still under floor */
  .glance-lead{font-size:19px}
  .glance-v{font-size:17px}

  /* CTA floor on mobile is 21px, and buttons go full-width so the longer
     labels ("REGISTER YOUR INTEREST") cannot overflow at that size. */
  .btn,.btn-large{font-size:21px;letter-spacing:.04em;width:100%;justify-content:center}
  .btn-row{flex-direction:column;align-items:stretch}
  .nav-cta{width:auto}          /* nav chrome, not a body CTA — see note below */
}

/* .nav-cta stays at 11.5px deliberately. It is persistent navigation chrome
   sitting beside a burger menu, not a call to action inside reading flow.
   At 21px it would break the header on every phone. Flagged rather than
   silently exempted. */

/* VIDEO SPACING — the prompt was landing hard against the player.
   ROOT CAUSE: line ~511 sets `.sec-paper .video-wrap{margin-top:0}` at
   specificity 0,2,0. Both video sections ARE .sec-paper, so any plain
   `.video-wrap{margin-top:…}` (0,1,0) loses and never applies — on desktop
   as well as mobile. Fixed with an adjacent-sibling selector, which is also
   0,2,0 and sits later in the file, so it wins on order.
   Do not "simplify" this back to .video-wrap — it will silently stop working. */
.video-prompt + .video-wrap{margin-top:26px}

@media (max-width:820px){
  .video-prompt{margin-top:44px;font-size:20px;line-height:1.4}
  .video-prompt + .video-wrap{margin-top:32px}
  .sec-head + .video-prompt{margin-top:38px}
  .video-cap{margin-top:16px}
}
@media (max-width:600px){
  .video-prompt{font-size:19px}   /* was 17px — under the body floor */
}