/* Sitewide Properties
   ---------------------------------------------------------------------------
   Our own site. It is subject to the same gates we sell: a compliance product
   whose own site fails the accessibility audit is finished before it starts.

   Values are the canonical kit in brand/tokens.css, not re-derived here. The
   accent is PLATINUM (2026-08-11: Rafal rejected the champagne/gold as "not how
   I like it"; premium here means cool light and glass, never gold). Same
   discipline as before, new temperature:
     Accent #A9BFD3    low contrast on Paper -> FILL AND MARK ONLY, never text
                       on light, and NEVER the focus ring on light
     Accent on Ink     high              -> safe as text on deep ink
     --accent-text     #465D74  steel, the ONLY token allowed to render the
                       accent as text on a light surface
     --focus           the ring. A separate token BECAUSE the accent fails 3.0.

   The --accent-* aliases exist so engine/audit-a11y.mjs can parse this file with
   the same token names it uses for client sites. Same values, two names.
*/

/* Self-hosted, no font CDN. */
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  /* Brand constants, identical in both themes */
  --halo:#A9BFD3; --halo-press:#8CA4BB; --halo-lift:#C9D8E7; --halo-ink:#465D74;
  --signal:#2E7D6B; --alert:#B4462F;

  /* Light theme */
  --ink:#101722; --slate:#1B2432; --soft:#48566B; --muted:#606A78;
  --ground:#FFFFFF; --ground2:#F4F6FA; --ground3:#E7EBF2;
  --line:rgba(16,23,34,.12); --line2:rgba(16,23,34,.06);
  --glass:linear-gradient(160deg,rgba(255,255,255,.88),rgba(255,255,255,.62));
  --glass-brd:rgba(16,23,34,.10); --glass-spec:rgba(255,255,255,.98);
  --shadow:0 24px 60px -28px rgba(16,23,34,.34);
  --shadow-sm:0 8px 22px -12px rgba(16,23,34,.26);

  /* Audit-parseable aliases */
  --primary:#101722; --accent:#A9BFD3;
  --accent-text:#465D74; --accent-text-lg:#5F7A93; --accent-on-primary:#C3D2E2;
  --focus:#465D74;

  --display:'Clash Display','Satoshi','Segoe UI',system-ui,sans-serif;
  --body:'Satoshi','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,'Cascadia Mono','SF Mono',monospace;
  --r:11px; --r-lg:16px; --maxw:1140px; --gut:clamp(20px,5vw,58px);
}

/* LIGHT-FIRST, 2026-08-11 by direction: "not a big fan of the dark website theme
   on default, make it lighter background, header is okay different."
   The page body is light for EVERYONE regardless of OS theme. Dark exists only
   where it is deliberate contrast: the nav, the photo heroes and bands, the
   marquee, the terminal, the closing CTA and the footer, all of which carry
   their own hard-coded ink surfaces and their own text colours. The old
   prefers-color-scheme:dark token override that flipped the whole page is
   deleted, not parked: reintroducing it would put dark-OS visitors back on the
   theme that was rejected.
   The dark-side contrast pairs below are what those fixed ink surfaces use, and
   the audit still checks them. */
:root{
  --ink-surface:#101722; --ink-surface2:#0D121C;
  --on-ink:#F1F4F9; --on-ink-soft:#B7C1CF;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--ink);font-family:var(--body);
  font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.026em}
h1{font-size:clamp(34px,5.4vw,62px)}
h2{font-size:clamp(25px,3.3vw,38px)}
h3{font-size:19px;letter-spacing:-.015em}
p{max-width:68ch}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
section{padding:clamp(56px,9vw,116px) 0}
/* Light sections carry a cool wash so white never reads flat: depth without dark. */
.tint{background:
  radial-gradient(120% 90% at 85% 0%,rgba(169,191,211,.16),transparent 55%),
  radial-gradient(90% 70% at 8% 100%,rgba(169,191,211,.09),transparent 60%),
  var(--ground2)}
.lede{font-size:clamp(17px,1.85vw,21px);color:var(--soft);line-height:1.6}
.eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin-bottom:16px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--ground);
  padding:12px 18px;z-index:200;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:5px}

/* ---- header: ink glass, deliberately dark over the light page ------------ */
header.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,#0D121C 84%,transparent);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 34px -22px rgba(16,23,34,.5)}
header.nav .wrap{display:flex;align-items:center;gap:28px;height:70px}
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.brand img{height:34px;width:auto;display:block}
.navlinks{display:flex;gap:24px;margin-left:auto;font-size:14.5px;align-items:center}
.navlinks a{text-decoration:none;color:rgba(241,244,249,.72)}
.navlinks a:hover{color:#fff}
.navlinks a[aria-current]{color:#fff;font-weight:600}
/* `.navlinks a` is specificity 0-1-1 and `.btn-primary` is 0-1-0, so without this
   the nav CTA inherits the link grey and washes out on the glass fill. Static
   contrast auditing cannot see this: it compares declared token pairs, not
   computed element styles. It was caught by looking at the rendered page. */
.navlinks a.btn-primary,.navlinks a.btn-primary:hover{color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.08));
  border-color:rgba(255,255,255,.38);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 26px -14px rgba(0,0,0,.6)}
.navlinks a.btn-primary:hover{background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.13))}
.navlinks a.btn-ghost{color:#fff;border-color:rgba(255,255,255,.34)}
.navlinks a.btn-ghost:hover{background:rgba(255,255,255,.09)}
@media(max-width:820px){.navlinks a:not(.btn){display:none}}
/* Below ~560px the brand plus a full-size CTA exceed the viewport, and because
   body has overflow-x:hidden the excess is CLIPPED rather than scrolled: text
   silently disappears off the right edge instead of showing a scrollbar. Static
   auditing cannot see this. Caught by rendering at 390px. */
@media(max-width:560px){
  header.nav .wrap{gap:10px;height:60px}
  .brand img{height:25px}
  .navlinks{gap:10px}
  .navlinks a.btn{padding:8px 12px;font-size:12px;white-space:nowrap}
}
.ctas{display:none}
@media(max-width:480px){.navlinks .ctal{display:none}.navlinks .ctas{display:inline}}
/* Belt and braces: nothing may establish a width wider than the viewport. */
html,body{max-width:100%}
p,li,h1,h2,h3,blockquote{overflow-wrap:break-word}

.btn{display:inline-block;padding:12px 22px;border-radius:999px;text-decoration:none;
  font-weight:600;font-size:14.5px;border:1px solid transparent;cursor:pointer;
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease}
.btn:hover{transform:translateY(-1px)}
/* Primary on LIGHT ground: machined ink, not a flat fill. A vertical grade plus a
   specular top edge is what separates a pressed-metal button from a default pill. */
.btn-primary{background:linear-gradient(180deg,#1E2836 0%,#0D1320 100%);color:var(--ground);
  border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),var(--shadow-sm)}
.btn-primary:hover{background:linear-gradient(180deg,#273344 0%,#131A28 100%)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ground2)}
/* Primary on DARK ground gets the liquid-glass recipe instead: frost, a specular
   edge, white text. Those overrides live with their surfaces (.hero, .hero-cine,
   .band, .close-cta, .navlinks) because the page itself no longer has a dark mode. */

/* ---- hero: deep ink, the one place the halo sings ------------------------- */
.hero{background:#101722;color:#F1F4F9;position:relative;overflow:hidden;
  padding:clamp(72px,12vw,150px) 0 clamp(56px,9vw,110px)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 78% 12%,rgba(169,191,211,.12),transparent 70%)}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff;max-width:19ch}
.hero .lede{color:rgba(241,244,249,.82);margin-top:22px;max-width:60ch}
.hero .eyebrow{color:var(--halo)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero .btn-primary{background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.08));
  color:#fff;border-color:rgba(255,255,255,.38);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 26px -14px rgba(0,0,0,.6)}
.hero .btn-primary:hover{background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.13))}
.hero .btn-ghost{border-color:rgba(255,255,255,.34);color:#fff}
.hero .btn-ghost:hover{background:rgba(255,255,255,.09)}

/* The mark, told as a strip: the editorial skyline, hairline sites of different
   heights under one champagne datum that runs past them. This is the only
   accent-coloured element in the hero besides the eyebrow. */
.doorstrip{display:flex;gap:22px;margin-top:56px;align-items:center;flex-wrap:wrap}
.doorstrip img{height:64px;width:auto;display:block}
.doorstrip .cap{font-size:13px;color:rgba(241,244,249,.62)}

/* ---- the number ---------------------------------------------------------- */
.bignum{display:flex;align-items:flex-end;gap:clamp(20px,3vw,34px);flex-wrap:wrap}
.bignum b{font-family:var(--display);font-size:clamp(56px,10vw,116px);font-weight:700;
  letter-spacing:-.05em;line-height:.86;color:var(--accent-text-lg);flex:0 0 auto}
.bignum span{font-size:clamp(17px,1.9vw,21px);color:var(--soft);max-width:32ch;
  padding-bottom:.5em}

/* ---- cards --------------------------------------------------------------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r-lg);
  padding:26px 26px 28px;box-shadow:var(--shadow-sm);position:relative;
  backdrop-filter:blur(16px) saturate(1.35);-webkit-backdrop-filter:blur(16px) saturate(1.35);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:inherit;
  background:linear-gradient(90deg,transparent,var(--glass-spec),transparent);pointer-events:none}
.card h3{margin-bottom:9px}
.card p{color:var(--soft);font-size:15px}
.card .n{font-family:var(--mono);font-size:12px;color:var(--muted);
  letter-spacing:.1em;display:block;margin-bottom:13px}

/* ---- ladder -------------------------------------------------------------- */
.rung{display:grid;grid-template-columns:110px 1fr auto;gap:24px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--line2)}
.rung .tier{font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.08em;padding-top:4px}
.rung h3{margin-bottom:7px}
.rung p{color:var(--soft);font-size:15px}
.rung .price{font-family:var(--mono);font-size:14px;font-weight:600;text-align:right;
  white-space:nowrap;padding-top:3px}
@media(max-width:760px){.rung{grid-template-columns:1fr;gap:8px}.rung .price{text-align:left}}

/* ---- the honest list ----------------------------------------------------- */
.nots{columns:2;column-gap:34px;margin-top:8px}
@media(max-width:700px){.nots{columns:1}}
.nots li{list-style:none;break-inside:avoid;padding:9px 0 9px 26px;position:relative;
  color:var(--soft);font-size:15px;border-bottom:1px solid var(--line2)}
.nots li::before{content:"";position:absolute;left:2px;top:18px;width:11px;height:1.5px;
  background:var(--alert);opacity:.75}

.does li{list-style:none;padding:9px 0 9px 26px;position:relative;color:var(--soft);font-size:15px}
.does li::before{content:"";position:absolute;left:3px;top:15px;width:8px;height:8px;
  border-radius:50%;background:var(--signal)}

/* ---- terminal proof block ------------------------------------------------ */
.term{background:#0D1219;border:1px solid rgba(255,255,255,.09);border-radius:var(--r-lg);
  padding:22px 24px;overflow-x:auto;box-shadow:var(--shadow)}
.term pre{font-family:var(--mono);font-size:13px;line-height:1.75;color:#C9D3E0;
  white-space:pre;margin:0}
.term .c{color:#7E8CA0}
.term .ok{color:#5FBFA3}
.term .no{color:#E4735A}
.term .br{color:#C3D2E2}

blockquote{border-left:1px solid var(--halo);padding:6px 0 6px 22px;margin:26px 0;
  font-size:clamp(18px,2.1vw,23px);line-height:1.45;letter-spacing:-.02em;max-width:26ch;font-weight:600}

.note{background:var(--ground2);border-left:1px solid var(--halo);border-radius:0 var(--r) var(--r) 0;
  padding:17px 20px;font-size:14.5px;color:var(--soft);margin:28px 0;max-width:74ch}

/* ---- form ---------------------------------------------------------------- */
.form{display:grid;gap:15px;max-width:560px;margin-top:26px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:620px){.frow{grid-template-columns:1fr}}
.field label{display:block;font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px;font-weight:600}
.field input,.field textarea,.field select{width:100%;font-family:var(--body);font-size:15.5px;
  padding:12px 15px;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(244,246,250,.88));color:var(--ink);
  box-shadow:inset 0 1px 2px rgba(16,23,34,.05);transition:border-color .15s ease}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--focus)}
.field textarea{min-height:120px;resize:vertical}
/* Honeypot: off-canvas rather than display:none so automated fillers still see it,
   aria-hidden and tabindex -1 so people never reach it. Chosen over a captcha,
   which is an access barrier on a housing enquiry form. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formstatus{font-size:14.5px;margin-top:4px}
.formstatus.ok{color:var(--signal);font-weight:600}
.formstatus.err{color:var(--alert);font-weight:600}

/* ---- footer -------------------------------------------------------------- */
footer{background:#101722;color:#F1F4F9;padding:56px 0 30px;font-size:14.5px}
footer a{color:rgba(241,244,249,.78);text-decoration:none}
footer a:hover{color:var(--halo)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px}
@media(max-width:780px){.fgrid{grid-template-columns:1fr}}
.fgrid h2{font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(241,244,249,.55);font-weight:650;margin-bottom:14px}
.fgrid ul{list-style:none;display:grid;gap:9px}
.fbot{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(241,244,249,.55)}
.endorse{font-size:12.5px;color:rgba(241,244,249,.55);line-height:1.6;margin-top:14px}

/* ---- hero offer checklist ------------------------------------------------- */
.heroticks{list-style:none;margin-top:24px;display:grid;gap:10px;max-width:52ch}
.heroticks li{padding-left:28px;position:relative;color:rgba(241,244,249,.9);font-size:15.5px}
.heroticks li::before{content:"";position:absolute;left:1px;top:7px;width:13px;height:7px;
  border-left:2px solid var(--halo-lift);border-bottom:2px solid var(--halo-lift);
  transform:rotate(-45deg)}

/* ---- product visualization: the thing we sell, drawn on the page ---------- */
.viz{display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(22px,3.5vw,48px);align-items:stretch}
@media(max-width:880px){.viz{grid-template-columns:1fr}}
.shot{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
  border:1px solid var(--line);background:#fff;display:flex;flex-direction:column}
.shot-bar{display:flex;gap:6px;align-items:center;background:#0D121C;padding:11px 15px;flex-shrink:0}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);display:inline-block}
.shot-bar span{margin-left:10px;font-family:var(--mono);font-size:11px;
  color:rgba(241,244,249,.6);letter-spacing:.05em}
.shot-hero{height:158px;background-size:cover;background-position:center;flex-shrink:0}
.shot-body{padding:18px 20px 20px;background:#fff}
.shot-body .bname{font-family:var(--display);font-weight:600;font-size:19px;color:#101722}
.shot-body .baddr{font-size:12.5px;color:var(--muted);margin-top:2px}
.chip{display:inline-block;font-size:11.5px;padding:5px 11px;border:1px solid var(--line);
  border-radius:999px;color:var(--soft);margin:8px 5px 0 0;background:var(--ground2)}
.rentline{font-family:var(--mono);font-size:13px;color:#101722;margin-top:13px}
.mockbtn{display:inline-block;background:linear-gradient(180deg,#1E2836,#0D1320);color:#fff;
  font-size:12.5px;font-weight:600;padding:9px 18px;border-radius:999px;margin-top:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17)}
.eho{font-size:10.5px;color:var(--muted);margin-top:12px}
.dash{background:#0D121C;padding:18px 20px;color:#F1F4F9;flex:1}
.dash-head{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(241,244,249,.55);margin-bottom:8px}
.dash-row{display:flex;gap:12px;align-items:center;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.08);font-size:13.5px}
.dash-row:last-child{border-bottom:0}
.dash-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;padding:4px 10px;
  border-radius:999px;background:rgba(195,210,226,.14);color:#C3D2E2;white-space:nowrap}
.dash-row .t{color:rgba(241,244,249,.86)}
.dash-row .m{margin-left:auto;color:rgba(241,244,249,.42);font-family:var(--mono);font-size:11px;
  white-space:nowrap}
.vizcap{font-size:12.5px;color:var(--muted);margin-top:16px}

/* ---- sourced benefit stats ------------------------------------------------ */
.src{display:block;font-size:11.5px;color:var(--muted);margin-top:8px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}
@media print{header.nav{position:static}.hero{background:#fff;color:#000}}