/* Better Builds — v8 design system.
   Retheme, September 2026. The v4/v7 palette was cream + navy + bronze: warm, print-ish, and it
   read as a brochure. v8 is white ground, deep blue-green ink, and a soft lime accent, with a
   single light-weight display face set very large and very tight. The token NAMES are kept from
   v7 on purpose — 1,000 lines of component CSS already reference them, so retheming here moves
   all 517 pages at once instead of touching every rule. */

:root{
  /* Ground + ink */
  --navy:#122023;        --navy-hi:#1B2E30;     --navy-ink:#0C1719;
  --cream:#FFFFFF;       --card:#FFFFFF;        --card-warm:#F4F5F2;
  /* Accent. Lime is an ON-DARK colour and a button fill: 1.4:1 on white, so it is never text on
     a light ground. --bronze-text is the label colour for light grounds (7.2:1 on white). */
  --sand:#D8F58E;        --lime:#D8F58E;        --lime-soft:#E9FBC4;   --lime-deep:#B4E063;
  --bronze:#C9D2CC;      --bronze-deep:#2F4A3C; --bronze-text:#3D544A;
  --star:#B4E063;
  /* v8 radii — pills for actions, soft rectangles for surfaces */
  --r-sm:10px; --r-btn:999px; --r-card:16px; --r-panel:24px;
  /* Text */
  --slate:#41504C;       --muted:#57655F;
  --on-dark:#D6E3D3;     --on-dark-2:#9CAFA6;   --on-dark-3:#87998F;
  --on-dark-mid:#C2D3BD;  --on-dark-hi:#EDF6E6;  --paper:#F4F5F2;
  /* Semantic */
  --ok-dark:#B4E063;     --ok-light:#2F6B4A;
  /* Lines */
  --hair:rgba(18,32,35,.10);  --hair-2:rgba(18,32,35,.14);
  --hair-3:rgba(18,32,35,.20); --hair-4:rgba(18,32,35,.30);
  --hair-on-dark:rgba(237,246,230,.14);
  /* Type. One display face carries headings and body — Kantumruy Pro has a true light weight and
     holds up at 96px with -.05em tracking, which is the whole look. Mono is the label voice. */
  --display:'Kantumruy Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'Kantumruy Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Layout */
  --wrap:1280px; --gut:5vw;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--navy);font-family:var(--body);font-weight:400;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:var(--display);letter-spacing:-.05em;font-weight:500;line-height:1.0;
  text-wrap:balance}
p{margin:0}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--bronze-text)}
img{max-width:100%}
svg{display:block}

/* Focus — absent from the prototype, required in production */
:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--navy); outline-offset:3px; border-radius:6px}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:var(--paper);
  padding:12px 20px;z-index:100;border-radius:0 0 10px 0;font-family:var(--display);font-weight:700}
.skip:focus{left:0;color:var(--paper)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.mono{font-family:var(--mono)}
.lede{font-size:clamp(16px,1.7vw,19px);line-height:1.55}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bronze-text)}
.eyebrow--dark{color:var(--sand)}
.h2{font-size:clamp(34px,5.4vw,72px);font-weight:500;letter-spacing:-.05em;line-height:1.0}

@keyframes bb-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@keyframes bb-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Unresolved content variables — must not reach production */
.var{font-family:var(--mono)}
.var[data-unset]{outline:2px dashed #C0392B;outline-offset:2px;background:rgba(192,57,43,.1);
  padding:0 4px;border-radius:3px}

/* ---------- announce + header ---------- */
.announce{background:var(--navy);color:var(--sand)}
.announce .wrap{padding-top:9px;padding-bottom:9px;display:flex;flex-wrap:wrap;gap:8px 24px;
  align-items:center;justify-content:space-between}
.announce span{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em}
.announce a{color:var(--sand)}

.site-head{position:sticky;top:0;z-index:50;background:rgba(246,243,236,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair);
  transition:box-shadow 200ms ease}
.site-head.is-stuck{box-shadow:0 10px 30px -22px rgba(28,38,55,.55)}
.progress{position:absolute;left:0;top:0;height:2px;width:0;background:var(--bronze);
  transition:width 80ms linear}
.site-head .wrap{padding-top:13px;padding-bottom:13px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;min-height:44px}  /* was 30px tall — under the touch-target minimum */
.brand span{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.05em}
.site-nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.site-nav a:not(.btn){font-size:15px;color:var(--slate)}
/* Scoped with :not(.btn) because `.site-nav a` (0,1,1) outranks `.btn--navy` (0,1,0) and was
   repainting the header CTA slate on navy — 1.99:1, the least readable thing on the site. */
.site-nav a:not(.btn):hover{color:var(--navy)}

.btn{display:inline-block;font-family:var(--display);font-weight:700;border-radius:var(--r-btn);
  border:0;cursor:pointer;text-align:center;transition:transform 160ms ease,background 160ms ease,box-shadow 160ms ease}
.btn--navy{background:var(--navy);color:#fff;font-size:15px;padding:12px 22px}
.btn--navy:hover{transform:translateY(-1px);background:var(--navy-hi);color:var(--paper)}
.btn--sand{background:var(--sand);color:var(--navy);font-size:16px;padding:16px 30px}
.btn--sand:hover{transform:translateY(-2px);color:var(--navy)}
.btn--lg{font-size:17px;padding:17px 28px;display:block;width:100%}
.btn--hero{font-size:18px;padding:18px 36px}

/* ---------- hero ---------- */
.hero{padding-top:28px;padding-bottom:40px}
.panel{position:relative;background:var(--navy);border-radius:36px;overflow:hidden;
  padding:clamp(30px,4.4vw,60px);box-shadow:0 40px 80px -44px rgba(28,38,55,.6)}
.panel__grid,.panel__glow{position:absolute;inset:0;pointer-events:none}
.panel__grid{background-image:linear-gradient(rgba(216,203,180,.055) 1px,transparent 1px),
  linear-gradient(90deg,rgba(216,203,180,.055) 1px,transparent 1px);background-size:56px 56px}
.panel__glow{inset:auto auto auto auto;top:-240px;right:-160px;width:660px;height:660px;
  border-radius:50%;background:radial-gradient(circle,rgba(216,203,180,.18) 0%,rgba(216,203,180,0) 68%)}
.hero__cols{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
  gap:clamp(32px,4vw,52px);align-items:start}
.pill{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(216,203,180,.4);
  border-radius:999px;padding:8px 16px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok-dark);
  animation:bb-pulse 2.4s ease-in-out infinite}
.pill span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
.hero h1{color:var(--paper);font-size:clamp(33px,4.4vw,56px);line-height:1.03;margin:22px 0 0;
  text-wrap:balance}
.mark{background:var(--sand);color:var(--navy);padding:0 10px;border-radius:6px;
  display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero__sub{color:var(--on-dark);max-width:540px;margin:22px 0 0}
.ticks{display:flex;flex-direction:column;gap:12px;margin:26px 0 0;padding:0;list-style:none;max-width:540px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--on-dark-hi)}
.ticks strong{color:#fff}
/* .ticks is styled for the dark hero band: its text colour is --on-dark-hi, which is invisible on
   a white card. This modifier is the same list on a light surface, with the check drawn by CSS so
   the markup stays a plain <li>. */
.ticks--light li{color:var(--slate);font-size:14.5px;gap:9px;align-items:baseline}
.ticks--light{gap:8px;margin-top:16px}
.ticks--light li::before{content:"✓";color:var(--ok-light);font-weight:700;flex:none}

.tick{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(127,209,168,.16);
  color:var(--ok-dark);display:flex;align-items:center;justify-content:center;font-size:13px;margin-top:1px}

/* ---------- match form ---------- */
.matchcard{background:var(--card);border-radius:26px;padding:clamp(24px,2.6vw,32px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55);position:relative;overflow:hidden}
.matchcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--sand),var(--bronze))}
.matchcard h2{font-size:23px;letter-spacing:-.04em}
.matchcard__sub{font-size:14.5px;color:var(--slate);margin-top:6px;line-height:1.5}
.field{margin-top:22px;border:0;padding:0;min-width:0}
.field__label,.field legend{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding:0;display:block}
.chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-block;border:1px solid var(--hair-3);font-size:14px;padding:10px 16px;
  border-radius:999px;cursor:pointer;transition:border-color 150ms ease,background 150ms ease,color 150ms ease}
.chip span:hover{border-color:var(--navy);background:rgba(28,38,55,.06)}
.chip input:checked+span{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.chip input:focus-visible+span{outline:3px solid var(--bronze);outline-offset:3px}
.row2{margin-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(145px,100%),1fr));gap:12px}
.input,.select{width:100%;margin-top:10px;border:1px solid var(--hair-3);border-radius:14px;
  padding:15px 16px;font-size:15.5px;font-family:var(--body);color:var(--navy);background:var(--card);
  transition:border-color 150ms ease}
.input::placeholder{color:var(--muted)}
.select{color:var(--muted);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23646B79' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:40px}
.select:valid{color:var(--navy)}
.input:hover,.select:hover{border-color:var(--navy)}
.submit{position:relative;overflow:hidden;background:var(--sand);color:var(--navy);
  font-family:var(--display);font-weight:700;font-size:17px;padding:18px 28px;border:0;
  border-radius:999px;width:100%;margin-top:20px;cursor:pointer;
  transition:transform 160ms ease,box-shadow 160ms ease}
.submit:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(28,38,55,.5)}
.submit__sweep{position:absolute;top:0;bottom:0;width:40%;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 100%);
  animation:bb-sweep 3.6s ease-in-out infinite}
.submit span{position:relative}
.reassure{font-size:13px;color:var(--slate);margin-top:12px;text-align:center;line-height:1.5}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(110px,100%),1fr));gap:10px;margin-top:20px;
  border-top:1px solid rgba(28,38,55,.14);padding-top:18px}
.stats div{text-align:center}
.stats b{display:block;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.04em}
.stats small{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--slate);
  margin-top:3px;display:block}

/* ---------- regulators ---------- */
.regs{padding-bottom:64px}
.regs__inner{border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);padding:22px 0}
.regs ul{display:flex;flex-wrap:wrap;gap:10px 26px;margin:16px 0 0;padding:0;list-style:none;align-items:center}
.regs li{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.02em;color:var(--slate)}

/* ---------- collapse section ---------- */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(28px,4vw,56px);
  align-items:start}
.sec{padding-bottom:80px}
.bignum{font-family:var(--display);font-size:clamp(64px,9vw,116px);font-weight:800;
  letter-spacing:-.06em;line-height:.9;margin:18px 0 0;font-variant-numeric:tabular-nums}
.collapse h2{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.04em;line-height:1.15;
  margin:14px 0 0;max-width:520px}
.collapse p{color:var(--slate);margin-top:16px}
.collapse p:first-of-type{margin-top:22px}
.src{font-family:var(--mono);font-size:11px;color:var(--slate);margin-top:22px;line-height:1.6}
.stack{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.cost{background:var(--card);border-radius:20px;padding:24px 26px;display:flex;gap:16px;
  align-items:flex-start;transition:transform 180ms ease,box-shadow 180ms ease}
.cost:hover{transform:translateY(-3px);box-shadow:0 16px 32px -22px rgba(28,38,55,.6)}
.cost b{display:block;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.03em}
.cost p{font-size:15px;line-height:1.55;color:var(--slate);margin-top:5px}
.cost--dark{background:var(--navy)}
.cost--dark b{color:var(--paper)}
.cost--dark p{color:var(--on-dark)}
.slot{border:1px dashed var(--hair-4);border-radius:20px;padding:22px 26px}
.slot__label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze-text)}
.slot p{font-size:15px;line-height:1.55;color:var(--slate);margin-top:8px}

/* ---------- the check (dark) ---------- */
.check{position:relative;background:var(--navy);padding:clamp(56px,7vw,92px) 0;overflow:hidden}
.check__grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(216,203,180,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(216,203,180,.05) 1px,transparent 1px);background-size:64px 64px}
.check .wrap{position:relative}
.check h2{color:var(--paper);margin:16px 0 0}
.check__intro{max-width:780px}
.check__intro p{color:var(--on-dark);margin:16px 0 0}
.check__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(24px,3vw,40px);margin-top:44px;align-items:start}
.point{background:rgba(246,243,236,.05);border:1px solid rgba(246,243,236,.14);border-radius:20px;
  padding:24px 26px;display:flex;gap:18px;align-items:flex-start;transition:background 180ms ease}
.point:hover{background:rgba(246,243,236,.1)}
.point b{display:block;font-family:var(--display);font-weight:700;font-size:18px;
  letter-spacing:-.03em;color:var(--paper)}
.point p{font-size:15px;line-height:1.55;color:var(--on-dark-2);margin:8px 0 0}

.record{background:var(--card);border-radius:26px;padding:clamp(24px,2.6vw,34px);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.6)}
.record__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.record__head>span:first-child{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:7px;background:var(--navy);border-radius:999px;padding:6px 13px}
.badge span:last-child{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ok-dark)}
.badge .dot{width:6px;height:6px}
.record__who{display:flex;align-items:center;gap:14px;margin-top:22px}
.record__logo{width:54px;height:54px;border-radius:16px;background:var(--navy);display:flex;
  align-items:center;justify-content:center;flex:none}
.record__who b{display:block;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.04em}
.record__who small{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:4px;display:block}
.record dl{margin:22px 0 0;display:grid;grid-template-columns:1fr auto}
.record dt,.record dd{padding:13px 0;border-top:1px solid rgba(28,38,55,.14);margin:0}
.record dt{font-size:14.5px;color:var(--slate)}
.record dd{font-family:var(--mono);font-size:13px;text-align:right}
.record dl>dt:last-of-type,.record dl>dd:last-of-type{border-bottom:1px solid rgba(28,38,55,.14)}
.yes{color:var(--ok-light)}
.record__foot{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:18px;line-height:1.6}
.countbar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  background:rgba(246,243,236,.06);border:1px solid rgba(246,243,236,.16);border-radius:22px;
  padding:24px 30px;margin-top:20px}
.countbar p{font-family:var(--mono);font-size:13.5px;color:var(--sand);line-height:1.6;margin:0}

/* ---------- comparison table ---------- */
.cmp{padding-top:clamp(56px,7vw,88px)}
.cmp__intro{max-width:700px}
.cmp__intro p{color:var(--slate);margin:16px 0 0}
.cmp__scroll{background:var(--card);border-radius:28px;padding:clamp(18px,2.2vw,28px);
  overflow-x:auto;margin-top:32px;box-shadow:0 24px 50px -38px rgba(28,38,55,.7)}
table{border-collapse:collapse;width:100%;min-width:700px;text-align:left}
thead th{padding:14px 16px;font-family:var(--display);font-weight:700;font-size:16px;
  letter-spacing:-.03em;color:var(--muted)}
thead td:first-child{width:26%}
tbody th{padding:16px;font-size:15px;font-weight:600;border-top:1px solid var(--hair);
  font-family:var(--body)}
tbody td{padding:16px;font-size:15px;color:var(--muted);border-top:1px solid var(--hair)}
.col-bb{background:var(--navy);color:var(--paper);font-weight:600;border-top:0}
thead .col-bb{padding:16px;color:var(--paper);border-radius:16px 16px 0 0;vertical-align:bottom}
.col-bb__label{display:flex;align-items:center;gap:9px}
tbody tr:last-child .col-bb{border-radius:0 0 16px 16px;color:var(--sand)}

/* ---------- what you get ---------- */
.get__prose p{color:var(--slate);margin-top:16px}
.get__prose p:first-of-type{margin-top:18px}
.incl{background:var(--card);border-radius:26px;padding:clamp(26px,3vw,36px);
  box-shadow:0 24px 50px -36px rgba(28,38,55,.7)}
.incl ul{display:flex;flex-direction:column;gap:14px;margin:20px 0 0;padding:0;list-style:none}
.incl li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.incl li::before{content:"✓";flex:none;color:var(--ok-light);font-size:15px;margin-top:1px}
.incl__price{border-top:1px solid var(--hair-2);margin-top:24px;padding-top:20px;display:flex;
  align-items:baseline;justify-content:space-between;gap:16px}
.incl__price b{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.03em}
.incl__price span{font-family:var(--display);font-weight:800;font-size:clamp(38px,5vw,52px);
  letter-spacing:-.05em;line-height:1}

/* ---------- build types ---------- */
.types{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:14px;margin-top:32px;
  padding:0;list-style:none}
.type{background:var(--card);border-radius:20px;padding:26px;transition:transform 180ms ease,box-shadow 180ms ease}
.type:hover{transform:translateY(-4px);box-shadow:0 20px 40px -28px rgba(28,38,55,.6)}
.type b{display:block;font-family:var(--display);font-weight:700;font-size:18px;
  letter-spacing:-.03em;margin-top:16px}
.type p{font-size:15px;line-height:1.5;color:var(--slate);margin:8px 0 0}
.type--dark{background:var(--navy)}
.type--dark:hover{box-shadow:0 20px 40px -28px rgba(28,38,55,.8)}
.type--dark b{color:var(--paper)}
.type--dark p{color:var(--on-dark)}
.intro{max-width:700px}
.intro p{color:var(--slate);margin:16px 0 0}

/* ---------- testimonial slots ---------- */
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px;margin-top:28px;
  padding:0;list-style:none}
.slots li{border:1px dashed var(--hair-4);border-radius:22px;padding:28px;min-height:180px;
  display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.slots p{font-size:15px;line-height:1.55;color:var(--slate)}

/* ---------- money ---------- */
.money .panel{box-shadow:0 40px 80px -48px rgba(28,38,55,.8)}
.money__glow{position:absolute;bottom:-240px;left:-120px;width:560px;height:560px;border-radius:50%;
  pointer-events:none;background:radial-gradient(circle,rgba(216,203,180,.16) 0%,rgba(216,203,180,0) 68%)}
.money__body{position:relative}
.money h2{font-size:clamp(30px,4vw,52px);margin:16px 0 0;color:var(--paper)}
.money__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:clamp(24px,3vw,48px);margin-top:28px}
.money__cols p{color:var(--on-dark)}
.money__cols strong{color:var(--paper)}
.pull{border-left:3px solid var(--sand);padding-left:24px;margin-top:40px;max-width:820px}
.pull p{font-family:var(--display);font-size:clamp(20px,2.4vw,30px);line-height:1.3;
  letter-spacing:-.04em;font-weight:600;color:var(--sand)}

/* ---------- promise ---------- */
.promise{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:clamp(24px,3vw,44px);
  align-items:center;background:var(--card);border-radius:30px;padding:clamp(30px,4vw,52px)}
.promise__badge{width:96px;height:96px;border-radius:50%;border:2px solid var(--bronze);display:flex;
  flex-direction:column;align-items:center;justify-content:center;text-align:center}
.promise__badge b{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.05em;
  line-height:1;color:var(--bronze-text)}
.promise__badge small{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--bronze-text);margin-top:4px}
.promise__l{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.promise h2{font-size:clamp(24px,3vw,36px);letter-spacing:-.045em;line-height:1.1}
.promise__r p{color:var(--slate)}
.promise__r p+p{margin-top:14px}

/* ---------- faq ---------- */
.faq__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:12px;margin-top:32px}
details{background:var(--card);border-radius:18px;padding:22px 26px;height:fit-content}
summary{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.03em;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;
  /* The hit area was the text line only — 22px tall on a phone. The negative margins cancel the
     padding exactly, so nothing moves; the tappable region now fills the top of the card. */
  margin:-22px -26px;padding:22px 26px;min-height:44px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);font-size:16px;color:var(--bronze-text);flex:none}
details[open] summary::after{content:"–"}
details p{font-size:15.5px;line-height:1.55;color:var(--slate);margin:14px 0 0}

/* ---------- final cta ---------- */
.final{padding-bottom:56px}
.final__inner{position:relative;background:var(--sand);border-radius:36px;
  padding:clamp(40px,5.4vw,84px);text-align:center;overflow:hidden}
.final__grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(28,38,55,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(28,38,55,.05) 1px,transparent 1px);background-size:48px 48px}
.final__body{position:relative}
.final h2{font-size:clamp(30px,4vw,52px);text-wrap:balance}
.final p{font-size:clamp(16px,1.8vw,20px);line-height:1.5;color:var(--navy-ink);max-width:660px;
  margin:20px auto 0}
.final .btn{margin-top:30px}
.final .btn:hover{box-shadow:0 16px 30px -14px rgba(28,38,55,.7)}
.final small{display:block;font-size:14px;color:var(--bronze-deep);margin-top:14px}

/* ---------- builders strip ---------- */
.bstrip{border:1px solid rgba(28,38,55,.2);border-radius:24px;padding:28px 32px;display:flex;
  flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.bstrip p{font-size:17px;line-height:1.5;color:var(--navy-ink);max-width:680px}
.bstrip strong{font-family:var(--display);letter-spacing:-.02em}
.bstrip a{font-family:var(--display);font-weight:700;font-size:16px;color:var(--bronze-text);
  display:inline-flex;align-items:center;min-height:44px}
.bstrip a:hover{color:var(--navy)}

/* ---------- footer ---------- */
.site-foot{position:relative;background:var(--navy);margin-top:16px;overflow:hidden;color:var(--on-dark)}
/* The footer painted a navy background but never set a text colour, so anything added to it
   without its own colour rule inherits navy on navy and disappears. Nothing was visibly broken
   because every child happened to set its own — this closes the trap. */
.site-foot__grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(216,203,180,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(216,203,180,.04) 1px,transparent 1px);background-size:64px 64px}
.site-foot .wrap{position:relative}
.foot__cols{padding-top:56px;padding-bottom:56px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:32px}
.foot__cols h2{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-3);font-weight:400;letter-spacing:.16em}
.foot__about p{font-size:14.5px;line-height:1.6;color:var(--on-dark-2);margin:16px 0 0;max-width:300px}
.foot__about .brand span{color:var(--paper);font-size:19px}
.foot__cols ul{display:flex;flex-direction:column;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.foot__cols a{font-size:15px;color:var(--on-dark)}
.foot__cols a:hover{color:var(--sand)}
.foot__base{padding-bottom:40px}
.foot__base div{border-top:1px solid var(--hair-on-dark);padding-top:20px;display:flex;
  flex-wrap:wrap;gap:12px;justify-content:space-between;font-family:var(--mono);font-size:11.5px;
  color:var(--on-dark-2)}
.foot__base span:first-child{letter-spacing:.08em}

/* ---------- reveal ---------- */
[data-reveal]{opacity:1}
.js [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity 620ms cubic-bezier(.22,.61,.36,1),transform 620ms cubic-bezier(.22,.61,.36,1)}
.js [data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal]{opacity:1;transform:none}
}

@media (max-width:760px){
  .site-nav a:not(.btn){display:none}
  .site-head .wrap{padding-top:10px;padding-bottom:10px}
  .announce .wrap{justify-content:flex-start}
  .record dl{grid-template-columns:1fr auto}
  .bstrip,.countbar{flex-direction:column;align-items:flex-start}
}

/* ===================== MATCH FLOW ===================== */
.flow{min-height:100vh;display:flex;flex-direction:column;background:var(--cream)}
.flow__head{border-bottom:1px solid var(--hair)}
.flow__head .wrap{padding:16px var(--gut);display:flex;align-items:center;
  justify-content:space-between;gap:16px}
.flow__save{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--muted)}
.prog{height:3px;background:var(--hair);position:relative}
.prog__bar{height:100%;background:var(--navy);width:0;transition:width 320ms cubic-bezier(.22,.61,.36,1)}
.flow__body{flex:1;display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(28px,6vw,64px) var(--gut)}
.step{width:100%;max-width:680px}
.step[hidden]{display:none}
.step__no{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze-text)}
.step h1{font-size:clamp(26px,3.6vw,40px);margin:12px 0 0;letter-spacing:-.045em;line-height:1.1}
.step__hint{font-size:16px;line-height:1.55;color:var(--slate);margin-top:12px;max-width:52ch}
.opts{display:grid;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.opts--2{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{display:block;background:var(--card);border:1px solid var(--hair-3);border-radius:16px;
  padding:18px 22px;cursor:pointer;font-size:16.5px;line-height:1.4;
  transition:border-color 140ms ease,background 140ms ease,transform 140ms ease}
.opt span small{display:block;font-size:14px;color:var(--slate);margin-top:4px}
.opt span:hover{border-color:var(--navy);transform:translateY(-1px)}
.opt input:checked+span{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.opt input:checked+span small{color:var(--on-dark)}
.opt input:focus-visible+span{outline:3px solid var(--bronze);outline-offset:3px}
.flow .input,.flow .select{max-width:420px;font-size:17px;padding:17px 18px;margin-top:28px}
.flow__grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  margin-top:28px;max-width:560px}
.flow__grid .input{margin-top:8px;max-width:none}
.flow__grid label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.counting{display:flex;gap:10px;align-items:center;margin-top:26px;font-family:var(--mono);
  font-size:12.5px;color:var(--slate);background:rgba(28,38,55,.05);border-radius:999px;
  padding:9px 16px;width:fit-content}
.counting .dot{background:var(--ok-light)}
.nav{display:flex;gap:12px;align-items:center;margin-top:32px;flex-wrap:wrap}
.back{background:none;border:0;font:inherit;font-family:var(--display);font-weight:600;
  font-size:15px;color:var(--slate);cursor:pointer;padding:10px 4px}
.back:hover{color:var(--navy)}
.next{background:var(--navy);color:var(--paper);border:0;font-family:var(--display);font-weight:700;
  font-size:17px;padding:16px 32px;border-radius:999px;cursor:pointer;
  transition:transform 160ms ease,background 160ms ease}
.next:hover{transform:translateY(-2px);background:var(--navy-hi)}
.next[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.err{color:#B23B2C;font-size:14px;margin-top:12px}
.privacy{font-size:13.5px;line-height:1.55;color:var(--slate);margin-top:20px;max-width:52ch}
.done{text-align:left;max-width:620px}
.done__mark{width:60px;height:60px;border-radius:50%;background:rgba(46,125,91,.12);
  display:flex;align-items:center;justify-content:center;color:var(--ok-light);font-size:26px}
.done h1{margin-top:22px}
.done ol{margin:26px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:12px;
  font-size:16px;line-height:1.55;color:var(--slate)}
.done ol strong{color:var(--navy)}
.done .note{margin-top:26px;padding:18px 22px;background:var(--card);border-radius:16px;
  font-size:15px;line-height:1.55;color:var(--slate)}
.zero__mark{background:rgba(224,162,76,.16);color:#9A6A1E}

/* ===================== AREA PAGE ===================== */
.draft{background:#4A1410;color:#FFD9D2;border-bottom:3px solid #D96A5B;padding:16px 5vw;
  font-family:var(--mono);font-size:13px;line-height:1.6}
.draft b{color:#FFB3A6;display:block;margin-bottom:6px;font-size:14px}
.draft ul{margin:8px 0;padding-left:20px;display:flex;flex-direction:column;gap:3px}
.draft code{background:rgba(0,0,0,.35);padding:2px 6px;border-radius:3px}
.draft span{display:block;margin-top:8px;color:#E5A79C}

.crumbs{padding-top:20px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;padding:0;list-style:none;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted)}
.crumbs li+li::before{content:"›";margin-right:10px;color:var(--hair-4)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--navy)}
.crumbs [aria-current]{color:var(--navy)}

.area-hero{padding-top:26px;padding-bottom:10px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(24px,4vw,48px);
  align-items:start}
.area-hero h1{font-size:clamp(30px,4.2vw,52px);line-height:1.04}
.locator{font-family:var(--mono);font-size:12.5px;line-height:1.8;color:var(--slate);margin-top:14px}
.arch-tag{display:inline-block;background:var(--navy);color:var(--sand);border-radius:999px;
  padding:3px 12px;margin-left:6px;letter-spacing:.06em;font-size:10.5px;text-transform:uppercase}
.area-cta{background:var(--card);border-radius:22px;padding:26px;
  box-shadow:0 24px 50px -38px rgba(28,38,55,.7)}
.area-cta__count{font-size:16px;line-height:1.5;color:var(--slate);margin-bottom:16px}
.area-cta__count strong{font-family:var(--display);font-size:22px;letter-spacing:-.03em;
  color:var(--navy);display:block}
.area-cta__disc{font-size:12.5px;color:var(--muted);margin-top:12px;text-align:center;line-height:1.5}

/* The brief's closing step echoes the answers back before handing them to the mail client.
   It reuses .facts so it looks like every other fact strip on the site. */
.brief-summary{margin:18px 0 4px}
.brief-summary:empty{display:none}
/* Flex rather than the grid .facts uses elsewhere. The number of answered questions varies, and an
   auto-fit grid left a dead grey cell at the end of the last row whenever the count did not divide
   by the column count. Letting the cells grow fills every row whatever the count. */
.brief-summary .facts{display:flex;flex-wrap:wrap}
.brief-summary .facts>div{flex:1 1 160px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:14px;overflow:hidden;
  margin:26px 0 0}
.facts>div{background:var(--card);padding:16px 18px}
.fact-also{display:block;margin-top:4px;font-size:12px;color:var(--muted);line-height:1.35}
.facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.facts dd{margin:6px 0 0;font-size:15px;line-height:1.45;color:var(--navy)}
.unver{font-family:var(--mono);font-size:10.5px;font-style:normal;color:#B23B2C;
  border:1px dashed #B23B2C;border-radius:3px;padding:1px 5px;white-space:nowrap}

.bcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:14px;
  margin:24px 0 0;padding:0;list-style:none}
.bcard{position:relative;background:var(--card);border-radius:20px;padding:24px 26px}
.bcard h3{font-size:19px;letter-spacing:-.03em;margin-top:6px}
.bcard__pick{position:absolute;top:18px;right:20px;display:flex;gap:7px;align-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);cursor:pointer}
.vbadge{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:11.5px;
  color:var(--ok-light);margin-top:10px;line-height:1.5}
.vdot{width:7px;height:7px;border-radius:50%;background:var(--ok-light);flex:none}
.bmeta{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:16px 0 0;font-size:14px}
.bmeta dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding-top:2px}
.bmeta dd{margin:0;color:var(--slate)}

.empty-state{background:var(--card);border:1px dashed var(--hair-4);border-radius:20px;
  padding:26px 28px;margin-top:24px;font-size:16px;line-height:1.6;color:var(--slate);max-width:70ch}
.empty-state strong{display:block;color:var(--navy);font-family:var(--display);font-size:18px;
  letter-spacing:-.03em;margin-bottom:8px}
.empty-state .btn{margin-top:18px}
.topics{margin:16px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px;
  font-size:15.5px;color:var(--slate)}
.conditions{max-width:68ch;font-size:16.5px;line-height:1.6;color:var(--slate);margin-top:20px}
.conditions h3,
/* Guides and rescue pages used to open with an h3 straight after the h1, which skips a level
   for anyone navigating by headings. They are h2 now; this keeps them looking identical. */
.conditions h2{font-size:19px;margin:24px 0 8px;color:var(--navy);letter-spacing:-.03em}
.estates{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.estates li{background:var(--card);border:1px solid var(--hair);border-radius:999px;
  padding:8px 16px;font-size:14.5px}
.nearby{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.nearby a{display:inline-block;background:var(--card);border:1px solid var(--hair);
  border-radius:999px;padding:9px 18px;font-size:14.5px}
.nearby a:hover{border-color:var(--navy);color:var(--navy)}

/* ---------- builder profile ---------- */
.vstatus{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;border-radius:999px;padding:6px 14px;margin-bottom:16px}
.vstatus.ok{background:rgba(46,125,91,.12);color:var(--ok-light)}
.vstatus.ok .vdot{background:var(--ok-light)}
.vstatus.pending{background:rgba(224,162,76,.16);color:#8A6118}
.vstatus.pending .vdot{background:#B8821F}
.vstatus.removed{background:rgba(178,59,44,.12);color:#B23B2C}
.vstatus.removed .vdot{background:#B23B2C}
.area-cta__count strong{margin-bottom:6px}
.facts dd.flagged{color:#B23B2C;font-weight:600}
/* The suburb, drawn from its own ABS boundary. Sits in the hero grid beside the copy on desktop
   and above the CTA card on a phone. No fill pattern, no fake cartography — a shape, a scale bar
   and a caption saying where it came from. */
.smap{margin:0;padding:0;grid-column:1/-1}
.smap svg{width:100%;max-width:520px;height:auto;display:block}
.smap__shape{fill:var(--sand);fill-opacity:.55;stroke:var(--navy);stroke-width:1.25;
  stroke-linejoin:round}
.smap__scale line{stroke:var(--muted);stroke-width:1}
.smap__scale text{fill:var(--muted);font-family:var(--mono);font-size:11px;dominant-baseline:middle}
.smap figcaption{margin-top:10px;max-width:52ch}
@media (min-width:900px){
  .area-hero{grid-template-columns:1.15fr .85fr}
  .smap{grid-column:1;grid-row:2;margin-top:8px}
  .area-hero>div:first-child{grid-column:1;grid-row:1}
  .area-cta{grid-column:2;grid-row:1/span 2;align-self:start}
}

/* Process timeline. A horizontal sequence above the written steps — the shape of the job before
   the detail of it. Drawn in SVG so the labels sit under their own markers at any width; below
   700px it scrolls in its own track rather than crushing five labels into a phone. */
.track{margin:22px 0 6px;padding:0;overflow-x:auto}
.track svg{width:100%;min-width:620px;height:auto;display:block}
.track__rule{stroke:var(--hair-3);stroke-width:1}
.track__dot{fill:var(--navy)}
.track__n{fill:var(--sand);font-family:var(--mono);font-size:12px;text-anchor:middle}
.track__t{fill:var(--slate);font-family:var(--body);font-size:11.5px;text-anchor:middle}

/* Site conditions profile — the visual summary an area page had no version of. A row per
   constraint, its state carried by a left rule and a chip colour rather than by an icon, so it
   reads at a glance and still reads with images off. Three states: mapped (amber, because it is a
   cost driver rather than a hazard warning), not mapped (quiet green), and neutral for controls
   that always apply. */
.profile{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden}
.profile__row{background:var(--card);display:grid;
  grid-template-columns:minmax(120px,1fr) minmax(96px,auto) minmax(0,2.4fr);
  gap:16px;align-items:baseline;padding:16px 18px 16px 22px;position:relative}
.profile__row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--hair-3)}
.profile__row--on::before{background:var(--star)}
.profile__row--off::before{background:var(--ok-light)}
.profile__row--unknown::before{background:var(--hair-4)}
.profile__row--neutral::before{background:var(--bronze)}
.profile__k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.profile__v{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.02em;
  color:var(--navy)}
.profile__row--off .profile__v{color:var(--ok-light)}
.profile__why{font-size:14px;line-height:1.5;color:var(--slate)}
@media (max-width:760px){
  .profile__row{grid-template-columns:1fr auto;gap:6px 14px;padding:14px 16px 14px 20px}
  .profile__why{grid-column:1/-1;margin-top:2px}
}

/* Comparative bar chart. SVG so it scales and themes; text sized in the SVG's own user units,
   which is why the viewBox is fixed and the element is width:100%. */
.chart{margin:22px 0 0;padding:0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart__lbl{font-family:var(--body);font-size:13px;fill:var(--slate)}
.chart__lbl.is-me{fill:var(--navy);font-weight:700}
.chart__bar{fill:var(--sand)}
.chart__bar.is-me{fill:var(--navy)}
.chart__num{font-family:var(--mono);font-size:12px;fill:var(--muted)}
.chart__num.is-me{fill:var(--navy);font-weight:600}
.chart figcaption{margin-top:12px}

/* Label/value reference, not a comparison. Rendering these as a <table> inherited the global
   table{min-width:700px}, which is correct for a five-column suburb comparison a reader can scroll
   and wrong here: on a 390px phone it put the VALUES — the scheme limits and claim deadlines, the
   entire point of the page — off the right edge behind a horizontal scroll, on the page someone
   reads under the most stress of anything on this site. A definition list stacks instead. */
.kv{display:grid;grid-template-columns:minmax(150px,26%) 1fr;gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:14px;overflow:hidden;margin:18px 0 0}
.kv dt,.kv dd{background:var(--card);padding:14px 18px;margin:0}
.kv dt{font-size:14px;font-weight:600;color:var(--navy)}
.kv dd{font-size:15px;line-height:1.5;color:var(--muted)}
@media (max-width:640px){
  .kv{grid-template-columns:1fr;gap:0;background:var(--card)}
  .kv dt{padding:16px 18px 0}
  .kv dd{padding:4px 18px 16px}
  .kv dt:not(:first-child){border-top:1px solid var(--hair)}
}
.provenance{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--muted);
  margin-top:14px;max-width:78ch}
.provenance a{color:var(--bronze-text)}
.step__q{font-family:var(--display);font-size:clamp(26px,3.6vw,40px);margin:12px 0 0;
  letter-spacing:-.045em;line-height:1.1;font-weight:700}
.done .step__q{margin-top:22px}
.fee-rate{font-family:var(--mono);font-size:14px;color:var(--slate);margin-top:14px;
  padding:12px 16px;background:var(--card);border-radius:10px;width:fit-content}
.xlink{margin:26px 0 0;padding:16px 20px;background:var(--card);border-radius:12px;
  font-family:var(--display);font-weight:600;font-size:15.5px;width:fit-content;max-width:100%}

/* ===================== v7 DESIGN SYSTEM ===================== */
@keyframes bb-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes bb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* eyebrow with rule — v7's section signature */
.eyebrow--rule{display:inline-flex;align-items:center;gap:10px}
.eyebrow--rule::before{content:"";width:22px;height:1px;background:currentColor;display:inline-block}

/* hero with photography */
.v7hero{position:relative;background:var(--navy);overflow:hidden}
.v7hero__img{position:absolute;inset:-12% 0;background-size:cover;background-position:center 40%;
  will-change:transform}
.v7hero__scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,28,42,.95) 0%,rgba(20,28,42,.86) 45%,rgba(20,28,42,.5) 100%)}
.v7hero__grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(216,203,180,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(216,203,180,.05) 1px,transparent 1px);background-size:56px 56px}
.v7hero__inner{position:relative;max-width:var(--wrap);margin:0 auto;
  padding:clamp(40px,5vw,80px) var(--gut) clamp(40px,5vw,72px);
  display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,56px);align-items:center}
.v7hero h1{color:#fff;font-size:clamp(32px,4.2vw,58px);line-height:1.02;letter-spacing:-.045em;
  margin:22px 0 0;text-wrap:balance;max-width:14ch}
.v7hero h1 em{font-style:normal;color:var(--sand)}
.v7hero__sub{font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:var(--on-dark);
  max-width:540px;margin:20px 0 0}
.v7ticks{display:flex;flex-wrap:wrap;gap:10px 22px;margin:24px 0 0;padding:0;list-style:none}
.v7ticks li{display:flex;align-items:center;gap:8px;font-size:15px;color:#fff}
.v7ticks li::before{content:"✓";color:var(--ok-dark)}

/* dark section with photo + scrim */
.v7dark{position:relative;background:var(--navy);overflow:hidden}
.v7dark__img{position:absolute;inset:-15% 0;background-size:cover;background-position:center;
  will-change:transform}
.v7dark__scrim{position:absolute;inset:0;background:rgba(20,28,42,.86)}
.v7dark__inner{position:relative;max-width:var(--wrap);margin:0 auto;
  padding:clamp(56px,7vw,96px) var(--gut)}
.v7dark h2{color:#fff}
.v7dark p{color:var(--on-dark)}
/* ...but not inside a light card sitting on the dark section: on-dark text on a white card
   measured 1.30:1. Scope the light-on-dark rule back out of the card. */
.v7dark .briefcard p,.v7dark .briefcard__sub,
.v7dark .record p,.v7dark .record__foot{color:var(--slate)}

/* regulator marquee */
.marquee{background:#fff;border-block:1px solid var(--hair);overflow:hidden}
.marquee__inner{max-width:var(--wrap);margin:0 auto;padding:18px var(--gut);
  display:flex;gap:28px;align-items:center}
.marquee__label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bronze-text);flex:none}
.marquee__track{flex:1;min-width:0;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__run{display:flex;gap:48px;align-items:center;width:max-content;
  animation:bb-marquee 34s linear infinite;white-space:nowrap}
.marquee__run span{font-family:var(--display);font-weight:800;font-size:15px;
  letter-spacing:-.03em;color:var(--slate)}

/* numbered step cards with imagery */
.v7steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:18px;margin:44px 0 0;padding:0;list-style:none}
.v7step{background:#fff;border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;
  transition:transform 180ms ease,box-shadow 180ms ease}
.v7step:hover{transform:translateY(-4px);box-shadow:0 24px 44px -30px rgba(28,38,55,.6)}
.v7step__img{height:180px;overflow:hidden;position:relative;background:#2E3B4F}
.v7step__img>span{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 700ms cubic-bezier(.22,.61,.36,1)}
.v7step:hover .v7step__img>span{transform:scale(1.06)}
.v7step__body{padding:24px 26px 26px}
.v7step__n{width:30px;height:30px;border-radius:8px;background:var(--navy);color:var(--sand);
  font-family:var(--display);font-weight:800;font-size:14px;display:flex;align-items:center;
  justify-content:center;flex:none}
.v7step__head{display:flex;align-items:center;gap:10px}
.v7step__head b{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.035em}
.v7step p{font-size:15px;line-height:1.55;color:var(--slate);margin:12px 0 0}

/* stat band */
.v7stats{position:relative;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:28px;
  max-width:var(--wrap);margin:0 auto;padding:clamp(48px,6vw,80px) var(--gut)}
.v7stat{border-left:2px solid var(--sand);padding-left:20px}
.v7stat b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(40px,5vw,60px);letter-spacing:-.05em;color:#fff;line-height:1;
  font-variant-numeric:tabular-nums}
.v7stat span{display:block;font-size:14.5px;color:var(--on-dark-mid);margin-top:8px;line-height:1.45}

/* founder letter */
.letter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(32px,5vw,72px);align-items:start}
.letter__aside{position:sticky;top:90px}
.letter__portrait{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;background:#2E3B4F;
  background-size:cover;background-position:center}
.letter__body{max-width:640px}
.letter__body p{font-size:18px;line-height:1.6;color:var(--navy-ink);margin:16px 0 0}
.letter__body h3{font-size:22px;font-weight:700;letter-spacing:-.04em;margin:32px 0 0}
.letter__sign{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.03em;
  margin-top:28px}

/* review cards */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:16px;margin:40px 0 0;padding:0;list-style:none}
.review{background:#fff;border:1px solid var(--hair);border-radius:var(--r-card);padding:26px 28px;
  display:flex;flex-direction:column;gap:16px;
  transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease}
.review:hover{transform:translateY(-4px);box-shadow:0 24px 44px -30px rgba(28,38,55,.5);
  border-color:var(--hair-3)}
.review--dark{background:var(--navy)}
.review.review--dark p{color:#E3E7EC}   /* raised above `.review p`, which follows it and won at equal specificity (1.21:1) */
.review.review--dark .review__who b{color:#fff}
.review.review--dark .review__who span:not(.review__av){color:var(--on-dark-2)}
/* the avatar keeps navy-on-sand; it is a light chip even on the dark card */
.stars{color:var(--star);font-size:15px;letter-spacing:2px}
.review p{font-size:16px;line-height:1.6;color:var(--navy-ink);margin:0}
.review__who{display:flex;align-items:center;gap:12px;margin-top:auto}
.review__av{width:40px;height:40px;border-radius:50%;background:var(--sand);color:var(--navy);display:flex;
  align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:14px;flex:none}
.review__who b{display:block;font-family:var(--display);font-weight:700;font-size:14.5px}
.review__who span:not(.review__av){font-size:13px;color:var(--muted)}
/* :not(.review__av) because this rule follows .review__av and was repainting the initial */
.sample-note{font-family:var(--mono);font-size:15px;line-height:1.55;color:var(--bronze-text);margin:14px 0 0}

/* sticky bottom CTA */
.sticky-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;background:var(--navy);
  border-radius:var(--r-card);padding:12px 14px 12px 18px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
  transform:translateY(140%);opacity:0;
  transition:transform 320ms cubic-bezier(.22,.61,.36,1),opacity 320ms ease}
.sticky-cta.is-in{transform:none;opacity:1}
.sticky-cta b{display:block;font-family:var(--display);font-weight:700;font-size:14.5px;color:#fff;
  letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-cta small{display:block;font-size:12px;color:var(--on-dark-2);white-space:nowrap}
.sticky-cta a{flex:none;background:var(--sand);color:var(--navy);font-family:var(--display);
  font-weight:700;font-size:14px;padding:11px 16px;border-radius:var(--r-sm)}
@media(min-width:900px){.sticky-cta{left:auto;right:20px;bottom:20px;max-width:420px}}

/* stagger */
.js [data-stagger]>*{opacity:0;transform:translateY(14px);
  transition:opacity 520ms cubic-bezier(.22,.61,.36,1),transform 520ms cubic-bezier(.22,.61,.36,1)}
.js [data-stagger].is-in>*{opacity:1;transform:none}
.js [data-stagger].is-in>*:nth-child(2){transition-delay:70ms}
.js [data-stagger].is-in>*:nth-child(3){transition-delay:140ms}
.js [data-stagger].is-in>*:nth-child(4){transition-delay:210ms}
.js [data-stagger].is-in>*:nth-child(5){transition-delay:280ms}
.js [data-stagger].is-in>*:nth-child(6){transition-delay:350ms}

@media (prefers-reduced-motion:reduce){
  .marquee__run,.sticky-cta{animation:none!important}
  .js [data-stagger]>*{opacity:1;transform:none;transition:none}
  .v7hero__img,.v7dark__img{transform:none!important}
}

/* ---- v7 components used by the homepage ---- */
.eyebrow--dark{color:var(--sand)}
.ok{color:var(--ok-dark)}

.briefcard{background:#fff;border-radius:var(--r-panel);padding:clamp(22px,2.4vw,30px);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6);position:relative;overflow:hidden;
  width:100%;box-sizing:border-box}
.briefcard::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--sand)}
.briefcard__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.briefcard__title{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.04em}
.briefcard__step{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  background:var(--card-warm);color:var(--navy);padding:6px 10px;border-radius:6px}
.briefcard__sub{font-size:14px;color:var(--slate);margin-top:6px;line-height:1.5}
.briefcard .chips{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:8px}
.briefcard .chip span{border-radius:var(--r-sm);padding:12px 14px;text-align:center;display:block}
.briefcard .input{border-radius:var(--r-sm);padding:14px;margin-top:8px}
.briefcard__marks{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:14px 0 0;padding:0;list-style:none}
.briefcard__marks li{font-size:12.5px;color:var(--slate);display:flex;align-items:center;gap:6px}
.briefcard__marks li::before{content:"✓";color:var(--ok-light)}
.submit--navy{background:var(--navy);color:#fff;border-radius:var(--r-btn)}
.submit--navy:hover{background:var(--navy-hi)}
.btn--hero{font-size:16px;padding:16px 30px}

.point--v7{position:relative;display:block;text-align:center;background:rgba(246,243,236,.05);
  border:1px solid rgba(246,243,236,.14);border-radius:var(--r-card);padding:26px 24px;
  transition:background 180ms ease,transform 180ms ease}
.point--v7:hover{background:rgba(246,243,236,.1);transform:translateY(-4px)}
.point__ic{width:56px;height:56px;border-radius:14px;background:var(--sand);margin:0 auto;
  display:flex;align-items:center;justify-content:center;color:#1C2637;--mark-cut:#D8CBB4}
.point__n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--sand);margin-top:18px}
.point--v7 b{display:block;font-family:var(--display);font-weight:700;font-size:18px;
  letter-spacing:-.03em;color:#fff;margin-top:6px}
.point--v7 p{font-size:14.5px;line-height:1.55;color:var(--on-dark-2);margin:10px 0 0}

.checkphoto{border-radius:var(--r-card);overflow:hidden;min-height:320px;position:relative;
  background:#2E3B4F;background-size:cover;background-position:center}
.checkphoto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,28,42,0) 30%,rgba(20,28,42,.9) 100%)}
.checkphoto__body{position:absolute;left:26px;right:26px;bottom:24px;z-index:1}
.checkphoto__body b{display:block;font-family:var(--display);font-weight:700;font-size:22px;
  letter-spacing:-.04em;color:#fff;line-height:1.15}
.checkphoto__body span{display:block;font-size:14.5px;color:var(--on-dark-mid);margin-top:8px;line-height:1.5}
.record--float{box-shadow:0 30px 60px -34px rgba(0,0,0,.6);border-radius:var(--r-card);
  animation:bb-float 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.record--float{animation:none}}

.type--glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.type--glass b{color:#fff}
.type--glass p{color:var(--on-dark-mid)}
.type--glass:hover{background:rgba(255,255,255,.11)}
.promise__badge--v7{width:120px;height:120px;border-width:3px;position:relative;flex:none}
.promise__badge--v7::after{content:"";position:absolute;inset:7px;border-radius:50%;
  border:1px dashed rgba(138,123,94,.6)}
.promise__badge--v7 b{font-size:32px}
.type{border-radius:var(--r-card)}
.v7hero .pill{background:rgba(28,38,55,.5);border-color:rgba(216,203,180,.45);color:var(--sand)}
/* Same trap as the footer: the pill sits on a dark scrim but inherited navy, so only its
   explicitly-styled span was visible. */

/* ---------- process steps (service pages) ----------
   These classes were used by build-services.js and never defined, so the list rendered with the
   browser's own marker AND the custom number beside it: "1. 01". A vertical numbered list rather
   than the homepage's image cards, because these steps have no imagery and are read in order. */
.steps{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:0;
  counter-reset:none;color:var(--slate)}
.steps>li{display:grid;grid-template-columns:46px 1fr;gap:18px;padding:0 0 26px;position:relative}
.steps>li:last-child{padding-bottom:0}
/* the connecting rule, drawn behind the number chips */
.steps>li::before{content:"";position:absolute;left:22px;top:34px;bottom:0;width:1px;
  background:var(--hair-2)}
.steps>li:last-child::before{display:none}
.sn{position:relative;z-index:1;width:46px;height:34px;border-radius:999px;background:var(--card);
  border:1px solid var(--hair-2);display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--bronze-text)}
.steps>li>div{padding-top:4px;min-width:0}
.steps>li b{display:block;font-family:var(--display);font-weight:700;font-size:17px;
  letter-spacing:-.03em;color:var(--navy)}
.steps>li p{margin:7px 0 0;font-size:15.5px;line-height:1.6;color:var(--slate)}

/* ---------- prose block ----------
   A readable column for generated body content — region-hub findings, rescue-page bodies.
   Matches .conditions so the two are interchangeable. */
.prose{max-width:68ch;font-size:16.5px;line-height:1.6;color:var(--slate)}
.prose>p{margin:0 0 14px}
.prose>p:last-child{margin-bottom:0}
.prose>ul.nearby{margin:0 0 16px}
.prose a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--hair-3)}
.prose a:hover{text-decoration-color:currentColor}

/* ---------- rule callout ----------
   A stated commitment or rule worth lifting out of the running text. The inline styles on
   /privacy/ set the accent; this supplies the shape. */
.rule-callout{border-radius:var(--r-panel);padding:18px 22px;font-size:16px;line-height:1.6;
  color:var(--navy);max-width:68ch}
.rule-callout p{margin:0}
.rule-callout p+p{margin-top:10px}
.rule-callout strong{font-weight:700}

/* ---------- guide article ----------
   Guides are the longest reading on the site and were the flattest: h1, lede, then an undivided
   run of text. This gives them a head, a jump list and a section rhythm without dressing them up
   as something they are not — they are reference pages, read partly and scanned mostly. */
.guide-head{padding-top:clamp(24px,4vw,40px);padding-bottom:clamp(20px,3vw,28px);
  border-bottom:1px solid var(--hair)}
.guide-head .eyebrow{display:block}
.guide-head h1{margin-top:10px;max-width:20ch}
.guide-head .lede{color:var(--slate);margin-top:14px;max-width:66ch}
/* Mid-guide conversion block. Sits inside the prose, so it reads as an aside rather than a banner:
   card ground, bronze rule on the leading edge, no full-bleed section. */
.midcta{margin:34px 0;padding:22px 24px 24px;background:var(--card);
  border:1px solid var(--hair-4);border-left:3px solid var(--bronze);border-radius:12px}
.midcta__k{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bronze-text);margin:0}
.midcta__h{font-size:1.15rem;line-height:1.3;margin:8px 0 0;max-width:34ch}
.midcta p:not(.midcta__k){margin:10px 0 0;color:var(--slate);max-width:60ch}
.midcta .btn{margin-top:16px}
.bylines{margin-top:16px;font-family:var(--mono,ui-monospace,monospace);font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--bronze-text)}
.bylines time{color:inherit}

.guide-toc{margin-top:26px;border-left:2px solid var(--bronze);padding:2px 0 2px 18px;
  max-width:60ch}
.guide-toc__label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bronze-text);margin:0}
.guide-toc ol{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;
  font-size:15.5px;color:var(--slate)}
.guide-toc a{color:var(--navy);text-decoration:none}
.guide-toc a:hover{color:var(--bronze-text);text-decoration:underline;text-underline-offset:3px}

.guide-body{padding-top:clamp(22px,3vw,30px)}
/* a hairline above each section gives the page a beat without adding furniture */
.guide-body .conditions h2{position:relative;padding-top:22px;margin-top:30px;font-size:21px}
.guide-body .conditions h2::before{content:"";position:absolute;left:0;top:0;width:34px;height:2px;
  background:var(--bronze)}
.guide-body .conditions>h2:first-child{margin-top:0}
/* anchored headings must clear the sticky header when jumped to */
.guide-body h2[id]{scroll-margin-top:90px}

/* ---------- read-next cards ---------- */
.nextgrid{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.nextgrid a{display:flex;flex-direction:column;gap:8px;height:100%;background:var(--card);
  border:1px solid var(--hair);border-radius:var(--r-card);padding:20px 22px;text-decoration:none;
  transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease}
.nextgrid a:hover{transform:translateY(-3px);border-color:var(--hair-3);
  box-shadow:0 20px 38px -28px rgba(28,38,55,.55)}
.nextgrid__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze-text)}
.nextgrid b{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.03em;
  line-height:1.25;color:var(--navy)}
.nextgrid__d{font-size:14px;line-height:1.5;color:var(--slate)}
@media (prefers-reduced-motion:reduce){.nextgrid a:hover{transform:none}}

/* ---------- suits / does not suit ----------
   Two outcomes read faster side by side than as two sentences in a paragraph, and the point of
   the section is the comparison. Semantic colour only on the rule, so it still reads if colour
   is not perceived. */
.fit{display:grid;gap:14px;margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.fit__col{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:20px 22px;border-top:3px solid var(--hair-3)}
.fit__col--yes{border-top-color:var(--ok-light)}
.fit__col--no{border-top-color:var(--bronze)}
.fit__k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bronze-text)}
.fit__col--yes .fit__k{color:var(--ok-light)}
.fit__col p{margin:9px 0 0;font-size:15.5px;line-height:1.6;color:var(--slate)}

/* headings inside a .prose block — the rescue state bodies are authored as raw <h2>/<p>, and the
   reset zeroes heading margins, so without this they sit flush against the paragraph above. */
.prose h2{font-size:21px;margin:28px 0 10px;color:var(--navy);position:relative;padding-top:20px}
.prose h2::before{content:"";position:absolute;left:0;top:0;width:34px;height:2px;
  background:var(--bronze)}
.prose>h2:first-child{margin-top:0;padding-top:0}
.prose>h2:first-child::before{display:none}
.prose h3{font-size:18px;margin:22px 0 8px;color:var(--navy)}
.prose strong{color:var(--navy)}

/* ---------- links in running text ----------
   Global `a` is navy with no underline, which is right for nav, cards and buttons. Inside body
   copy it is not: a navy link sitting in slate paragraph text is distinguishable only by a slight
   darkening, which fails both the WCAG "not by colour alone" rule and the plainer test of whether
   a reader can see it is a link. Underline them where they sit in prose, and nowhere else. */
.conditions a,.prose a,.lede a,.guide-body a,.fit p a,.steps p a,
details p a,.area-body a,.provenance a,.empty-state a,.sample-note a{
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--hair-3)}
.conditions a:hover,.prose a:hover,.lede a:hover,.guide-body a:hover,.fit p a:hover,
.steps p a:hover,details p a:hover,.area-body a:hover,.provenance a:hover,
.empty-state a:hover,.sample-note a:hover{text-decoration-color:currentColor}

/* ---------- paragraph rhythm in body copy ----------
   The reset sets `p{margin:0}`, which is right as a baseline but was never restored inside the
   text blocks. Every multi-paragraph passage on the site — guides, state hubs, service pages,
   area bodies — ran its paragraphs together with no separation. This is the single largest
   readability change in the design pass and it was invisible until the pages got long enough
   to have several paragraphs in a row. */
.conditions>p{margin:0 0 15px}
.conditions>p:last-child{margin-bottom:0}
.conditions>ul,.conditions>ol{margin:0 0 15px}
.area-body>p{margin:0 0 15px}
.area-body>p:last-child{margin-bottom:0}
.fit__col p+p{margin-top:10px}

/* ============================================================================
   v8 — Aero-direction layer.
   Everything below overrides v7 shapes. Order matters: this block is last in the
   file so it wins without !important. Rules are grouped by the component they
   replace, and each group says what it is replacing and why.
   ========================================================================== */

/* ---------- Header: two floating pills, not a bar ----------
   v7 had a sticky translucent bar with a hairline under it, which reads as a CMS
   theme. The pill sits ON the page, works over both white and ink sections, and
   lets the hero run to the top of the viewport. */
.site-head{position:sticky;top:0;z-index:50;background:transparent;border-bottom:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;padding:14px 0;transition:none}
.site-head.is-stuck{box-shadow:none}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:0;padding-bottom:0}
.navpill{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);background:#fff;
  border:1px solid var(--hair);border-radius:999px;padding:7px 24px 7px 13px;
  box-shadow:0 14px 34px -26px rgba(18,32,35,.9)}
.navpill .brand{min-height:34px;gap:9px}
.navpill .brand span{font-weight:600;font-size:17px;letter-spacing:-.04em}
.site-nav{gap:clamp(14px,1.8vw,24px)}
.site-nav a:not(.btn){font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--slate)}
.site-nav a:not(.btn):hover{color:var(--navy)}
.progress{background:var(--lime-deep)}

/* Pill buttons with the circular arrow chip. */
.btn{border-radius:999px;font-weight:500;letter-spacing:-.01em}
.btn--navy{background:var(--navy);color:#fff;padding:11px 12px 11px 22px}
.btn--navy:hover{background:var(--navy-hi);color:#fff}
.btn--sand{background:var(--lime);color:var(--navy);padding:14px 14px 14px 28px}
.btn--sand:hover{background:var(--lime-deep);color:var(--navy)}
.btn--arrow{display:inline-flex;align-items:center;gap:12px}
.btn--arrow i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:12px;flex:none;background:rgba(255,255,255,.15);
  transition:transform 180ms ease}
.btn--sand.btn--arrow i,.btn--lime.btn--arrow i{background:rgba(18,32,35,.12)}
.btn--arrow:hover i{transform:translate(2px,-2px)}
.btn--hero{font-size:17px;padding:14px 14px 14px 30px}
.btn--lg{border-radius:999px;padding:16px 26px}
@media(prefers-reduced-motion:reduce){.btn--arrow i{transition:none}
  .btn--arrow:hover i{transform:none}}

/* ---------- Full-bleed split hero ----------
   Replaces the three-column area-hero, which put a card in the right rail and left
   a column of dead space under it. The suburb boundary is the hero image: it is the
   one picture on the page that is true of this suburb and no other. */
.hero8{display:grid;grid-template-columns:1fr;background:var(--cream);margin-top:8px}
.hero8__vis{position:relative;background:var(--lime);display:grid;place-items:center;
  padding:clamp(34px,4vw,60px);min-height:clamp(300px,44vw,540px);overflow:hidden}
.hero8__vis::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(18,32,35,.12) 1px,transparent 0);
  background-size:26px 26px;opacity:.5}
.hero8__vis .smap{position:relative;z-index:1;width:100%;max-width:520px}
.hero8__vis .smap svg{max-width:none;width:100%}
.hero8__vis .smap__shape{fill:#fff;fill-opacity:.9;stroke:var(--navy);stroke-width:2}
.hero8__vis .smap__scale line{stroke:rgba(18,32,35,.65)}
.hero8__vis .smap__scale text{fill:rgba(18,32,35,.75)}
.hero8__vis figcaption{color:var(--bronze-deep);font-size:12px;line-height:1.55;
  margin-top:14px;max-width:48ch}
.hero8__text{padding:clamp(34px,4.6vw,76px) var(--gut) clamp(30px,3.4vw,52px)}
.hero8__text>*{max-width:640px}
.hero8 h1{font-size:clamp(40px,6.2vw,86px);line-height:.97;letter-spacing:-.05em;
  font-weight:500;margin-top:14px}
.hero8 .lede{font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--slate);
  margin-top:22px;max-width:52ch}
.hero8__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:30px}
.hero8__act small{font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--muted)}
.hero8__proof{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.hero8__proof li{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--bronze-text);border:1px solid var(--hair-2);
  border-radius:999px;padding:7px 14px}
@media(min-width:900px){
  .hero8{grid-template-columns:minmax(0,46%) minmax(0,54%);align-items:stretch}
  .hero8__vis{order:1}
  .hero8__text{order:2;align-self:center;padding-right:clamp(24px,5vw,90px)}
}

/* The locator strip under the hero — the site's version of Aero's logo marquee.
   Mono, rules above and below, the facts that identify the page. */
.locstrip{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  margin-top:clamp(20px,3vw,40px)}
.locstrip .wrap{display:flex;flex-wrap:wrap;gap:10px clamp(18px,3vw,44px);align-items:center;
  padding-top:18px;padding-bottom:18px}
.locstrip span{font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.locstrip .arch-tag{background:var(--navy);color:var(--lime);border-radius:999px;
  padding:6px 14px;font-size:10px;letter-spacing:.13em}

/* ---------- Section rhythm ----------
   v7 sections were h2 + paragraph with 80px below and nothing above. The look here
   depends on air and on the eyebrow/headline pair. */
.sec{padding-top:clamp(56px,7vw,104px);padding-bottom:0}
.sec>.eyebrow,.sec .eyebrow:first-child{display:block;margin-bottom:18px}
.sec .eyebrow::before{content:"↳ ";opacity:.55}
.h2{text-wrap:balance;max-width:20ch}
.sec>.h2+*{margin-top:26px}

/* ---------- Mist cards with a corner marker ----------
   Replaces the white rounded .cost card on a cream ground, which had almost no
   contrast against the page and read as a list of boxes. */
.cost{background:var(--card-warm);border:1px solid transparent;border-radius:var(--r-card);
  padding:clamp(24px,2.4vw,34px);position:relative;transition:background 200ms ease}
.cost::after{content:"+";position:absolute;top:16px;right:18px;font-family:var(--mono);
  font-size:15px;line-height:1;color:var(--navy);opacity:.28}
.cost:hover{transform:none;box-shadow:none;background:#EDEFE9}
.cost b{font-size:clamp(17px,1.5vw,21px);font-weight:500;letter-spacing:-.035em;
  padding-right:28px;display:block}
.cost p{margin-top:10px;font-size:15.5px;line-height:1.6}
.cost--dark{background:var(--navy);border-color:transparent}
.cost--dark::after{color:var(--lime);opacity:.5}
.cost--dark b{color:#fff}
.stack{gap:14px}

/* ---------- Dark bands ---------- */
.v7dark{background:var(--navy)}
.v7dark__inner{padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(56px,7vw,104px)}
.v7dark h2{color:#fff}
.v7stats{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:clamp(28px,4vw,56px)}
.v7stat{border-left:0;border-top:1px solid var(--hair-on-dark);padding:22px 0 0}
.v7stat b{font-weight:400;font-size:clamp(46px,6.4vw,84px);line-height:.92;
  letter-spacing:-.05em;color:#fff}
.v7stat span{color:var(--on-dark-2);font-size:13.5px;line-height:1.5;margin-top:14px;
  max-width:34ch}
.v7stat a{color:var(--lime);text-decoration:underline;text-underline-offset:2px}
.point{background:rgba(237,246,230,.045);border:1px solid var(--hair-on-dark);
  border-radius:var(--r-card);padding:clamp(22px,2.2vw,30px)}
.point b{font-weight:500;letter-spacing:-.03em;font-size:19px}

/* ---------- Lime call-to-action bands ----------
   Replaces .midcta (a white box in the text flow) and .final (a sand rounded panel).
   Full-bleed lime with the cross pattern is the reference's signature move, and it
   gives a 2,500-word page the two breaks it needs. */
.limeband{background:var(--lime);position:relative;overflow:hidden;
  margin-top:clamp(56px,7vw,104px)}
.limeband::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 15v14M15 22h14' stroke='%23122023' stroke-opacity='.22' stroke-width='1.2'/%3E%3C/svg%3E")}
.limeband .wrap{position:relative;padding-top:clamp(52px,6.4vw,96px);
  padding-bottom:clamp(52px,6.4vw,96px);text-align:center}
.limeband h2{font-size:clamp(30px,4.6vw,60px);line-height:1.0;letter-spacing:-.05em;
  margin:0 auto;max-width:18ch}
.limeband p{color:var(--bronze-deep);margin:18px auto 0;max-width:56ch;
  font-size:clamp(15px,1.3vw,18px);line-height:1.55}
.limeband .btn{margin-top:30px}
.limeband small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  color:var(--bronze-deep);margin-top:16px}

/* ---------- Split panel: lime label beside ink numbers ---------- */
.splitpanel{display:grid;grid-template-columns:1fr;margin-top:clamp(56px,7vw,104px)}
@media(min-width:860px){.splitpanel{grid-template-columns:38% 62%}}
.splitpanel__label{background:var(--lime);position:relative;overflow:hidden;
  display:flex;align-items:flex-end;padding:clamp(30px,3.4vw,52px);min-height:240px}
.splitpanel__label::before{content:"";position:absolute;inset:-40% -10% auto auto;width:150%;
  aspect-ratio:1;border-radius:50%;
  background:repeating-radial-gradient(circle,rgba(255,255,255,.72) 0 14px,transparent 14px 34px)}
.splitpanel__label h2{position:relative;font-size:clamp(26px,3vw,40px);margin:0}
.splitpanel__nums{background:var(--navy);display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(24px,3vw,44px);padding:clamp(30px,3.6vw,56px)}
.splitpanel__nums div b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(34px,4.4vw,60px);line-height:.95;letter-spacing:-.05em;color:#fff}
.splitpanel__nums div span{display:block;font-size:13px;color:var(--on-dark-2);margin-top:10px;
  line-height:1.45}

/* ---------- Final band ---------- */
.final{padding-bottom:0}
.final__inner{background:var(--navy);border-radius:0;padding:clamp(52px,6.4vw,96px) var(--gut)}
.final h2{color:#fff;font-size:clamp(32px,4.8vw,66px);max-width:20ch}
.final p{color:var(--on-dark);max-width:58ch}
.final small{color:var(--on-dark-2)}
.final__grid{opacity:.4}

/* ---------- Footer ---------- */
.site-foot{background:var(--navy-ink);margin-top:0}
.site-foot h2{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime);font-weight:400}
.site-foot h2::before{content:"↳ ";opacity:.6}
.foot__wordmark{font-family:var(--display);font-weight:500;letter-spacing:-.06em;
  font-size:clamp(64px,15vw,190px);line-height:.8;color:var(--lime);opacity:.9;
  margin-top:clamp(30px,4vw,56px);user-select:none}
.foot__base{border-top:1px solid var(--hair-on-dark);margin-top:26px}
.foot__base span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-dark-3)}

/* ---------- FAQ, tables, misc surfaces ---------- */
.faq__list details{background:var(--card-warm);border:0;border-radius:var(--r-card)}
.kv,.profile,.chart,.track{background:var(--card-warm);border-radius:var(--r-card)}
.midcta{background:var(--card-warm);border-radius:var(--r-card);border:0}

/* Sticky CTA — pill, ink, matches the header */
.sticky-cta{border-radius:999px}
.sticky-cta a{border-radius:999px}

/* ---------- v8 corrections found in the first visual pass ---------- */

/* The final band was a rounded panel inside .wrap, so it sat in the page with white
   gutters either side and read as a box rather than a close. Full-bleed ink. */
.final.wrap{max-width:none;padding-left:0;padding-right:0}
.final__inner{text-align:center;border-radius:0}
.final__body{max-width:var(--wrap);margin:0 auto}
.final h2,.final p{margin-left:auto;margin-right:auto}
/* A navy button on a navy band is invisible. On ink, the action is lime. */
.final .btn--navy,.v7dark .btn--navy{background:var(--lime);color:var(--navy)}
.final .btn--navy:hover,.v7dark .btn--navy:hover{background:var(--lime-deep);color:var(--navy)}
.final .btn--navy i,.v7dark .btn--navy i{background:rgba(18,32,35,.14)}

/* Sticky CTA — same two-pill language as the header. */
.sticky-cta{background:var(--navy);border-radius:999px;padding:10px 10px 10px 22px;
  box-shadow:0 22px 46px -24px rgba(0,0,0,.75)}
.sticky-cta b{font-weight:500;font-size:14px}
.sticky-cta small{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em}
.sticky-cta a{background:var(--lime);color:var(--navy);font-weight:500;font-size:14px;
  padding:11px 20px;border-radius:999px}

/* Section headings sit under a sticky pill header — give anchors room. */
:target{scroll-margin-top:96px}
section[id]{scroll-margin-top:96px}

/* Data surfaces picked up the mist ground; their inner rules need to follow. */
.kv,.profile{overflow:hidden}
.faq__list details{padding:0}

/* Hero visual panels that are not a map. */
.visnum{position:relative;z-index:1;text-align:center;max-width:22ch}
.visnum b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(72px,11vw,168px);line-height:.84;letter-spacing:-.06em;color:var(--navy)}
.visnum span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bronze-deep);margin-top:18px}
.visnum small{display:block;font-size:13.5px;line-height:1.5;color:var(--bronze-deep);
  margin-top:14px;opacity:.85}
.hero8__vis .visphoto{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;
  border-radius:var(--r-card)}
.hero8__vis:has(.visphoto){padding:0}
.hero8__vis:has(.visphoto)::after{display:none}
.hero8__vis .visphoto{border-radius:0}

/* Homepage hero — same split, but the right column carries the brief form as well as the
   argument, so the display size steps down and the photo panel stretches to match. */
.hero8--home .hero8__text{padding-top:clamp(28px,3.4vw,56px);padding-bottom:clamp(32px,4vw,64px)}
.hero8--home h1{font-size:clamp(34px,3.7vw,56px);line-height:1.02}
.hero8--home h1 em{font-style:normal;background:var(--lime);border-radius:6px;
  padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero8--home .lede{margin-top:18px;font-size:clamp(15.5px,1.2vw,17.5px)}
.hero8--home .hero8__proof{margin-top:20px}
.hero8__form{margin-top:26px;max-width:520px}
.hero8__vis--photo{padding:0;background:var(--navy)}
.hero8__vis--photo::after{background-image:none}
.hero8__vis--photo .visphoto{width:100%;height:100%;min-height:clamp(260px,40vw,100%);
  object-fit:cover;display:block}
@media(min-width:900px){.hero8--home{grid-template-columns:minmax(0,42%) minmax(0,58%)}}

/* ---------- v8 mobile ---------- */
@media (max-width:760px){
  /* Two pills stacked is half a screen of chrome. Below 760 the nav links are already hidden,
     so the pill is just the wordmark — put it on one row with the action. */
  .site-head{padding:10px 0}
  .site-head .wrap{gap:10px;align-items:center}
  .navpill{padding:6px 16px 6px 10px;box-shadow:none;flex:0 1 auto;min-width:0}
  .navpill .brand span{font-size:16px}
  .btn--navy{padding:9px 10px 9px 18px;font-size:14px}
  .btn--arrow{gap:8px}
  .btn--arrow i{width:26px;height:26px;font-size:11px}

  /* The headline is the page. On a phone it comes before the picture. */
  .hero8__vis{order:2;min-height:0;padding:26px 20px 30px}
  .hero8__text{order:1;padding:22px var(--gut) 8px}
  .hero8--home .hero8__vis{order:2}
  .hero8--home .hero8__text{order:1}
  .hero8__vis .visphoto{min-height:240px}

  .limeband .wrap{padding-top:44px;padding-bottom:44px}
  .splitpanel__label{min-height:170px}
  .foot__wordmark{font-size:clamp(46px,17vw,90px)}
  .sticky-cta{padding:8px 8px 8px 16px}
  .sticky-cta small{display:none}
}