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

: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: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)}
.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}