@font-face {
  font-family: 'Space Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('/fonts/space-grotesk-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --plane:#ffffff; --surface:#ffffff; --ink:#0a0c12; --ink2:#2b3040;
  --muted:#5a6072; --border:#e3e8f2; --accent:#1b4dff;
  --accent-dark:#7fa4ff; --accent-ink:#ffffff; --accent-soft:#eef2ff;
  --muted-dark:#93a0bc; --support:#1b4dff;
  --support-dark:#1b4dff;
  /* --brand is the accent under the name the artwork uses, so a generated SVG
     reads as brand coloured without knowing which token it came from. */
  --brand:#1b4dff;
  --inv-plane:#0a1030; --inv-ink:#ffffff; --inv-ink2:#b9c4da;
  --display:'Space Grotesk Variable', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; --body:'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; --mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --wrap:1120px; --r:12px;
  color-scheme:light;
}
*,*::before,*::after { box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: reduce) {
  /* Smooth scrolling is motion too. Zeroing animation and transition durations
     does not cover it, so without this a reader who asked for less motion
     still gets a page that glides under them. */
  html { scroll-behavior:auto }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important }
}
body {
  margin:0; background:var(--plane); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg { max-width:100%; height:auto; display:block }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px }
.hp { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip { position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--accent-ink);
  padding:10px 16px; z-index:100; border-radius:0 0 var(--r) 0; font-weight:600 }
.skip:focus { left:0 }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:3px }

/* type */
h1,h2,h3,h4 { font-family:var(--display); font-weight:600; line-height:1.15;
  letter-spacing:-.015em; margin:0 0 .5em; color:var(--ink) }
h1 { font-size:clamp(2.3rem,5.4vw,3.9rem); letter-spacing:-.03em }
h2 { font-size:clamp(1.6rem,3.2vw,2.4rem); letter-spacing:-.02em }
h3 { font-size:1.22rem }
h4 { font-size:1.02rem; font-family:var(--body); font-weight:700 }
p { margin:0 0 1.05em }
a { color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px }
a:hover { text-decoration-thickness:2px }
strong { font-weight:650 }
.eyebrow { font-family:var(--body); font-size:.74rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 14px }
.lede { font-size:clamp(1.06rem,1.9vw,1.28rem); color:var(--ink2); max-width:64ch; line-height:1.6 }

/* layout */
.sec { padding:clamp(52px,7vw,92px) 0 }
.sec.tight { padding:clamp(32px,4vw,54px) 0 }
.sec.invert { background:var(--inv-plane); color:var(--inv-ink) }
.sec.invert h1,.sec.invert h2,.sec.invert h3 { color:var(--inv-ink) }
.sec.invert p { color:var(--inv-ink2) }
.sec.invert { --muted:var(--muted-dark); --support:var(--support-dark);
  --brand:var(--accent-dark) }
.sec.invert .eyebrow, .sec.invert a { color:var(--accent-dark) }
.sec.invert .tl-when, .sec.invert .creds li::before { color:var(--accent-dark) }
.sec.invert .timeline li::before { background:var(--accent-dark); border-color:var(--inv-plane) }
/* On the dark sections the accent is the light hue, so the button text has to
   flip to the dark plane colour. White on light gold is a 1.9:1 failure.
   :not(.btn-ghost):not(.btn-outline) because a bare `.sec.invert .btn` has
   higher specificity than `.btn-ghost` and silently repaints the secondary
   button to look exactly like the primary one. Found by the hotlinedirectory
   build, where the dark call to action band had two identical buttons. */
.sec.invert .btn:not(.btn-ghost):not(.btn-outline) {
  color:var(--inv-plane) !important; background:var(--accent-dark);
  border-color:var(--accent-dark) }
.sec.soft { background:var(--accent-soft) }
.sec + .sec { border-top:1px solid var(--border) }
.sec.invert + .sec, .sec + .sec.invert { border-top:0 }

.grid { display:grid; gap:20px }
.cols-2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.cols-3 { grid-template-columns:repeat(auto-fit,minmax(248px,1fr)) }
.cols-4 { grid-template-columns:repeat(auto-fit,minmax(206px,1fr)) }

/* header */
.site-head { position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--plane) 88%,transparent);
  backdrop-filter:saturate(150%) blur(9px); border-bottom:1px solid var(--border) }
.head-row { display:flex; align-items:center; gap:18px; min-height:66px }
.wordmark { font-family:var(--display); font-weight:700; font-size:1.16rem; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; margin-right:auto }
.wordmark:hover { color:var(--accent) }
.site-nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.site-nav a { color:var(--ink2); text-decoration:none; font-size:.93rem; font-weight:500;
  padding:8px 11px; border-radius:8px }
.site-nav a:hover { color:var(--ink); background:var(--accent-soft) }
.site-nav a[aria-current] { color:var(--ink); font-weight:650 }
.navbtn { display:none }
.btn { display:inline-block; background:var(--accent); color:var(--accent-ink) !important;
  text-decoration:none; font-weight:650; font-size:.95rem; padding:13px 24px; border-radius:9px;
  border:1px solid var(--accent); transition:filter .15s ease }
.btn:hover { filter:brightness(1.08) }
.btn-sm { padding:8px 15px; font-size:.9rem }
.btn-ghost { background:transparent; color:var(--inv-ink) !important; border-color:currentColor }
.btn-ghost:hover { background:rgba(255,255,255,.09); filter:none }
/* the light section equivalent of btn-ghost */
.btn-outline { background:transparent; color:var(--accent) !important; border-color:var(--border) }
.btn-outline:hover { background:var(--accent-soft); border-color:var(--accent); filter:none }

/* cards */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:22px 22px 18px }
.card h3 { margin:0 0 8px; font-size:1.13rem }
.card h3 a { color:inherit; text-decoration:none }
.card h3 a:hover { color:var(--accent) }
.card p { color:var(--ink2); font-size:.95rem; margin:0 }
.card-kick { font-family:var(--body); font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:0 0 9px !important }
.card-meta { font-family:var(--mono); font-size:.76rem; color:var(--muted); margin:12px 0 0 !important }
.sec.invert .card { background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.13) }
.sec.invert .card p { color:var(--inv-ink2) }

/* stats */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:26px 0; margin:34px 0 }
.stat { display:flex; flex-direction:column; gap:5px; padding:0 6px }
.stat-v { font-family:var(--display); font-size:clamp(1.7rem,3.6vw,2.4rem); font-weight:700;
  letter-spacing:-.03em; line-height:1 }
.stat-l { font-size:.83rem; color:var(--muted); line-height:1.4 }

/* timeline */
.timeline { list-style:none; margin:34px 0 0; padding:0; border-left:2px solid var(--border) }
.timeline li { position:relative; padding:0 0 30px 28px }
.timeline li::before { content:""; position:absolute; left:-7px; top:7px; width:12px; height:12px;
  border-radius:50%; background:var(--accent); border:3px solid var(--plane) }
.tl-when { font-family:var(--mono); font-size:.78rem; letter-spacing:.05em; color:var(--accent);
  display:block; margin-bottom:5px }
.timeline h3 { margin:0 0 6px; font-size:1.1rem }
.timeline p { color:var(--ink2); font-size:.95rem; margin:0; max-width:62ch }

/* credentials */
.creds h3 { font-size:.78rem; font-family:var(--body); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:0 0 12px }
.creds ul { list-style:none; margin:0; padding:0 }
.creds li { position:relative; padding:0 0 9px 20px; font-size:.93rem; color:var(--ink2) }
.creds li::before { content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--accent) }

/* callout, quote */
.callout { border:1px solid var(--border); border-left:3px solid var(--accent);
  background:var(--surface); border-radius:0 var(--r) var(--r) 0; padding:16px 20px; margin:26px 0 }
.callout p { margin:0; font-size:.94rem; color:var(--ink2) }
.callout-warn { border-left-color:#c2410c }
.pull { margin:34px 0; padding:0 0 0 26px; border-left:3px solid var(--accent) }
.pull blockquote { margin:0 }
.pull p { font-family:var(--display); font-size:clamp(1.15rem,2.2vw,1.45rem); line-height:1.45;
  color:var(--ink); margin:0 0 12px }
.pull figcaption { font-size:.86rem; color:var(--muted) }

/* utilities. These exist so that no page needs a style attribute, which
   would force style-src 'unsafe-inline' into the Content Security Policy on
   every site to save a handful of declarations. */
.mt-s { margin-top:22px }
.mt-m { margin-top:26px }
.mt-l { margin-top:34px }
.acts-left { justify-content:flex-start }
.grid-wide { gap:44px; align-items:start }
.grid-top { align-items:start }

/* band */
.band { text-align:center; max-width:660px; margin:0 auto }
.band p { font-size:1.06rem }
.band-acts { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:26px 0 0 }

/* prose + toc */
.prose { max-width:72ch }
.prose h3 { margin:2.1em 0 .5em; font-size:1.2rem; scroll-margin-top:86px }
.prose h3:first-child { margin-top:0 }
.prose h4 { margin:1.6em 0 .4em }
.prose p, .prose li { color:var(--ink2); font-size:.97rem }
.prose ul,.prose ol { padding-left:22px; margin:0 0 1.05em }
.prose li { margin-bottom:.45em }
.prose dl { margin:0 0 1.05em }
.prose dt { font-weight:650; color:var(--ink); margin-top:.9em }
.prose dd { margin:.2em 0 0; color:var(--ink2); font-size:.97rem }
.toc { background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:18px 22px; margin:0 0 34px; max-width:72ch }
.toc h2 { font-family:var(--body); font-size:.74rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin:0 0 10px }
.toc ol { margin:0; padding-left:20px; columns:2; column-gap:28px }
.toc li { margin-bottom:5px; font-size:.92rem; break-inside:avoid }
@media (max-width:620px) { .toc ol { columns:1 } }

/* footer */
.site-foot { --muted:var(--muted-dark); background:var(--inv-plane); color:var(--inv-ink2); padding:56px 0 26px; margin-top:0 }
.foot-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:30px 24px }
.foot-cols h2 { font-family:var(--body); font-size:.72rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--inv-ink); margin:0 0 13px }
.foot-cols a { display:block; color:var(--inv-ink2); text-decoration:none; font-size:.9rem;
  padding:4px 0 }
.foot-cols a:hover { color:var(--accent-dark); text-decoration:underline }
.foot-note { font-size:.84rem; color:var(--inv-ink2); max-width:74ch; margin:34px 0 0;
  opacity:.85 }
.foot-bar { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.13); margin-top:30px; padding-top:20px;
  font-size:.83rem; color:var(--inv-ink2) }
.foot-bar-links a { color:var(--inv-ink2); margin-left:16px }

/* mobile nav */
@media (max-width:860px) {
  .navbtn { display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; padding:0 9px; cursor:pointer; border:1px solid var(--border);
    border-radius:9px }
  .navbtn span { display:block; height:2px; background:var(--ink); border-radius:2px }
  .site-nav { display:none; width:100%; flex-direction:column; align-items:stretch; gap:2px;
    padding:6px 0 16px }
  #navtoggle:checked ~ .site-nav { display:flex }
  .site-nav a { padding:11px 12px }
  .site-nav .btn { text-align:center; margin-top:8px }
  .head-row { flex-wrap:wrap }
}

/* dark mode */
@media (prefers-color-scheme: dark) {
  /* --ink and --ink2 are remapped here, not just overridden per element.
     Without this, every rule that says color:var(--ink) paints near black text
     on the near black plane in dark mode and the words vanish. The per element
     rules below covered h1 to h4 and p, and missed everything else: .prose dt,
     .prose dd, table row headers, the report metadata. The palette on
     shahzadandrainer.com made it visible by measurement rather than by luck,
     because there ink and invert_plane are the SAME hex, so the failure is a
     clean 1:1 rather than a 1.15:1 that looks like a rendering artefact.

     --ink is also used for rules and borders, and remapping is right there
     too: a hairline that reads as ink on paper should read as ink on the dark
     sheet. What must NOT follow the token is type sitting on an orange or
     yellow fill, because those fills do not change between the two schemes.
     Those are literal in design.py, and say so. */
  :root { color-scheme:dark; --accent:var(--accent-dark); --muted:var(--muted-dark);
    --support:var(--support-dark); --brand:var(--accent-dark);
    --ink:var(--inv-ink); --ink2:var(--inv-ink2) }
  body { background:var(--inv-plane); color:var(--inv-ink) }
  h1,h2,h3,h4 { color:var(--inv-ink) }
  p, .lede { color:var(--inv-ink2) }
  /* The same specificity trap the .sec.invert rule above already documents,
     and this time it shipped. `.btn-ghost` sets colour with !important, and so
     did this rule; equal specificity, equal weight, so source order decided it
     and this one is later. Every secondary button in every dark call to action
     band on the estate was painted the plane colour on a transparent
     background: #051821 on #051821, a clean 1:1, invisible. Found by measuring
     computed colour in the browser rather than by reading the palette, because
     no palette pair was wrong. */
  .btn:not(.btn-ghost):not(.btn-outline) { color:var(--inv-plane) !important }
  .btn-outline { color:var(--accent-dark) !important; border-color:rgba(255,255,255,.22) }
  .btn-outline:hover { background:rgba(255,255,255,.07) }
  .skip { color:var(--inv-plane) }
  .site-head { background:color-mix(in srgb,var(--inv-plane) 88%,transparent);
    border-bottom-color:rgba(255,255,255,.12) }
  .wordmark { color:var(--inv-ink) }
  .site-nav a { color:var(--inv-ink2) }
  .site-nav a:hover, .site-nav a[aria-current] { color:var(--inv-ink) }
  .navbtn span { background:var(--inv-ink) }
  .navbtn { border-color:rgba(255,255,255,.18) }
  .sec.soft { background:rgba(255,255,255,.035) }
  .sec + .sec { border-top-color:rgba(255,255,255,.1) }
  .card, .callout, .toc { background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.12) }
  .card p, .prose p, .prose li, .prose dd, .callout p { color:var(--inv-ink2) }
  .stats { border-color:rgba(255,255,255,.12) }
  .timeline { border-left-color:rgba(255,255,255,.14) }
  .timeline li::before { border-color:var(--inv-plane) }
  .timeline p, .creds li { color:var(--inv-ink2) }
  .pull p { color:var(--inv-ink) }
  .site-foot { border-top:1px solid rgba(255,255,255,.1) }
}

@media print {
  .site-head,.site-foot,.toc,.band-acts { display:none }
  body { background:#fff; color:#000; font-size:11pt }
  .sec { padding:12px 0; border:0 }
  a { color:#000; text-decoration:underline }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:9pt; color:#444 }
}

/* ---- hero -------------------------------------------------------------- */
.hero-split .hero-grid { display:grid; grid-template-columns:1.25fr .85fr;
  gap:clamp(28px,5vw,64px); align-items:start }
@media (max-width:900px){ .hero-split .hero-grid { grid-template-columns:1fr } }
.hero-main h1 { max-width:15ch }
/* .band-acts centres, and it is the same specificity as .acts-left, so in the
   shared stylesheet it wins by source order and every split hero centred its
   buttons under left aligned text. Two classes, so this one wins. */
.hero-main .band-acts.acts-left { justify-content:flex-start }
.hero-note { font-size:.86rem; color:var(--muted); margin:20px 0 0; max-width:52ch }
.hero-aside { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:22px 24px }
.hero-aside h2 { font-family:var(--body); font-size:.72rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:0 0 14px }
.hero-aside dl { margin:0 }
.hero-aside dt { font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin-top:14px }
.hero-aside dt:first-child { margin-top:0 }
.hero-aside dd { margin:3px 0 0; font-size:.95rem; color:var(--ink) }
.hero-aside dd small { display:block; color:var(--ink2); font-size:.85rem;
  margin-top:2px }

/* ---- credential strip -------------------------------------------------- */
.strip { border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.credrow { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  gap:10px 30px }
.credrow li { position:relative; font-size:.88rem; color:var(--ink2);
  padding-left:16px; line-height:1.45 }
.credrow li::before { content:""; position:absolute; left:0; top:.58em;
  width:6px; height:6px; border-radius:50%; background:var(--accent) }

/* ---- metrics ----------------------------------------------------------- */
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:26px 24px }
.metric { display:flex; flex-direction:column; gap:6px }
.metric-v { font-family:var(--display); font-size:clamp(2rem,4.2vw,2.9rem);
  font-weight:700; letter-spacing:-.035em; line-height:1 }
.metric-l { font-size:.92rem; font-weight:600 }
.metric-f { font-size:.78rem; color:var(--muted); line-height:1.45 }
.sec.invert .metric-l { color:var(--inv-ink) }
.sec.invert .metric-f { color:var(--inv-ink2) }

/* ---- capabilities ------------------------------------------------------ */
.caps .cap { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:22px }
.cap-n { font-family:var(--mono); font-size:.74rem; color:var(--accent);
  letter-spacing:.1em; display:block; margin-bottom:12px }
.cap h3 { font-size:1.1rem; margin:0 0 8px }
.cap p { color:var(--ink2); font-size:.94rem; margin:0 }
.cap ul { list-style:none; margin:14px 0 0; padding:0 }
.cap li { position:relative; padding-left:17px; font-size:.87rem;
  color:var(--ink2); margin-bottom:6px }
.cap li::before { content:""; position:absolute; left:0; top:.6em; width:6px;
  height:1px; background:var(--accent) }

/* ---- process ----------------------------------------------------------- */
.process { list-style:none; counter-reset:s; margin:34px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px }
.process li { position:relative; padding-top:44px }
.step-n { position:absolute; top:0; left:0; width:32px; height:32px;
  display:grid; place-items:center; border-radius:50%; background:var(--accent-soft);
  color:var(--accent); font-weight:700; font-size:.9rem;
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent) }
.process h3 { font-size:1.05rem; margin:0 0 6px }
.process p { color:var(--ink2); font-size:.93rem; margin:0 }

/* ---- people ------------------------------------------------------------ */
.people .person { display:flex; gap:18px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r); padding:22px }
.avatar { flex:0 0 52px; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; background:var(--accent-soft);
  color:var(--accent); font-family:var(--display); font-weight:700;
  font-size:1.05rem; letter-spacing:.02em;
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent) }
.person h3 { margin:0 0 2px; font-size:1.12rem }
.person-role { font-size:.83rem; color:var(--muted); margin:0 0 10px }
.person p { font-size:.93rem; color:var(--ink2) }
.person-pts { list-style:none; margin:12px 0 0; padding:0 }
.person-pts li { position:relative; padding-left:16px; font-size:.85rem;
  color:var(--ink2); margin-bottom:5px }
.person-pts li::before { content:""; position:absolute; left:0; top:.58em;
  width:6px; height:6px; border-radius:50%; background:var(--accent) }
.person-link { margin:12px 0 0; font-size:.88rem }

/* ---- tabs -------------------------------------------------------------- */
.tabs { margin:30px 0 0 }
.tabin { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px }
.tablist { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--border);
  margin-bottom:26px }
.tablabel { cursor:pointer; padding:11px 16px; font-size:.93rem; font-weight:600;
  color:var(--ink2); border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--dur-hover,180ms) ease, border-color var(--dur-hover,180ms) ease }
.tablabel:hover { color:var(--ink) }
/* Everything is visible by default. Panels are only hidden inside @supports,
   so a browser without :has() shows all of them stacked, which is complete and
   readable rather than blank. Hiding is the enhancement, never the base. */
@supports selector(:has(*)) {
  .tabs .tabpanel { display:none }
  .tabs:has(.tabin:nth-of-type(1):checked) .tabpanels>.tabpanel:nth-child(1),
  .tabs:has(.tabin:nth-of-type(2):checked) .tabpanels>.tabpanel:nth-child(2),
  .tabs:has(.tabin:nth-of-type(3):checked) .tabpanels>.tabpanel:nth-child(3),
  .tabs:has(.tabin:nth-of-type(4):checked) .tabpanels>.tabpanel:nth-child(4),
  .tabs:has(.tabin:nth-of-type(5):checked) .tabpanels>.tabpanel:nth-child(5),
  .tabs:has(.tabin:nth-of-type(6):checked) .tabpanels>.tabpanel:nth-child(6) {
    display:block }
  .tabs:has(.tabin:nth-of-type(1):checked) .tablabel:nth-of-type(1),
  .tabs:has(.tabin:nth-of-type(2):checked) .tablabel:nth-of-type(2),
  .tabs:has(.tabin:nth-of-type(3):checked) .tablabel:nth-of-type(3),
  .tabs:has(.tabin:nth-of-type(4):checked) .tablabel:nth-of-type(4),
  .tabs:has(.tabin:nth-of-type(5):checked) .tablabel:nth-of-type(5),
  .tabs:has(.tabin:nth-of-type(6):checked) .tablabel:nth-of-type(6) {
    color:var(--accent); border-bottom-color:var(--accent) }
}
.tabs:has(.tabin:focus-visible) .tablist { outline:2px solid var(--accent);
  outline-offset:4px; border-radius:4px }

/* ---- filter ------------------------------------------------------------ */
.filter { margin:26px 0 0 }
.fin { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px }
.chip { cursor:pointer; font-size:.86rem; font-weight:600; color:var(--ink2);
  border:1px solid var(--border); background:var(--surface); border-radius:20px;
  padding:7px 15px;
  transition:color var(--dur-hover,180ms) ease, border-color var(--dur-hover,180ms) ease,
             background-color var(--dur-hover,180ms) ease }
.chip:hover { color:var(--ink); border-color:var(--accent) }
.fin:checked + .chip { background:var(--accent); border-color:var(--accent);
  color:var(--accent-ink) }
.fin:focus-visible + .chip { outline:3px solid var(--accent); outline-offset:2px }
/* The per facet hide rules are generated by filter_css(), because a facet is an
   arbitrary string and CSS cannot compare an attribute to a checked input. The
   base state here shows everything: the generated rules only ever hide, and
   only while a specific facet is selected. */
.fitem { display:block }

/* ---- faq --------------------------------------------------------------- */
.faq { border-bottom:1px solid var(--border) }
.faq summary { cursor:pointer; list-style:none; padding:18px 40px 18px 0;
  position:relative; font-family:var(--display); font-size:1.08rem;
  font-weight:600; color:var(--ink) }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:""; position:absolute; right:8px; top:26px;
  width:11px; height:11px; border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted); transform:rotate(45deg);
  transition:transform 180ms var(--ease-out,ease) }
.faq[open] summary::after { transform:rotate(-135deg); top:30px }
.faq summary:hover { color:var(--accent) }
.faq-a { padding:0 0 20px; max-width:72ch }
.faq-a p { color:var(--ink2); font-size:.95rem; margin:0 0 .9em }
.faq-a p:last-child { margin-bottom:0 }

/* ---- section nav ------------------------------------------------------- */
.secnav { position:sticky; top:66px; z-index:30; background:var(--surface);
  border-bottom:1px solid var(--border); overflow-x:auto }
.secnav .wrap { display:flex; gap:2px; white-space:nowrap }
.secnav a { padding:12px 14px; font-size:.87rem; font-weight:600; color:var(--ink2);
  text-decoration:none; border-bottom:2px solid transparent }
.secnav a:hover { color:var(--ink) }
.secnav a[aria-current] { color:var(--accent); border-bottom-color:var(--accent) }

/* ---- data table -------------------------------------------------------- */
.tablewrap { overflow-x:auto; margin:26px 0 34px }
table.cover { border-collapse:collapse; width:100%; font-size:.9rem; min-width:520px }
table.cover caption { text-align:left; font-size:.72rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted); padding:0 0 11px }
table.cover th, table.cover td { text-align:left; padding:10px 14px 10px 0;
  border-bottom:1px solid var(--border); vertical-align:top }
table.cover thead th { font-size:.72rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted) }
/* A row header is a name, not a column label. Without this it inherits the
   tiny uppercase treatment above and domain names become unreadable. */
table.cover tbody th { font-size:.9rem; font-weight:650; letter-spacing:0;
  text-transform:none; color:var(--ink) }
table.cover td { color:var(--ink2) }
table.cover code { font-family:var(--mono); font-size:.85rem; color:var(--ink) }
table.cover .num { text-align:right; font-variant-numeric:tabular-nums }

/* ---- misc -------------------------------------------------------------- */
.cgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px 30px; margin:30px 0 0 }
.cgrid h3 { font-size:1.02rem; margin:0 0 6px }
.cgrid p { color:var(--ink2); font-size:.93rem; margin:0 }
.noterow { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:22px 30px; margin:28px 0 0 }
.noterow dt { font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:0 0 6px }
.noterow dd { margin:0; font-size:.94rem; color:var(--ink2) }

@media (prefers-color-scheme: dark) {
  /* Several of these sat between 1.7 and 3.2 to 1 against the dark plane,
     which is a fail for anything carrying words. --inv-ink2 is the palette's
     checked body colour on dark, so it is the right value for all of them. */
  .secnav a, .chip, .cap-n, .metric-f, .person-role { color:var(--inv-ink2) }
  .step-n { color:var(--accent-dark);
    background:color-mix(in srgb,var(--accent-dark) 16%,transparent);
    border-color:color-mix(in srgb,var(--accent-dark) 34%,transparent) }
  .avatar { color:var(--accent-dark);
    background:color-mix(in srgb,var(--accent-dark) 16%,transparent);
    border-color:color-mix(in srgb,var(--accent-dark) 34%,transparent) }
  .cap-n { color:var(--accent-dark) }
  table.cover tbody th, table.cover code { color:var(--inv-ink) }
  table.cover td, table.cover thead th { color:var(--inv-ink2) }
  table.cover th, table.cover td { border-bottom-color:rgba(255,255,255,.12) }
  .hero-aside, .caps .cap, .people .person, .chip { background:rgba(255,255,255,.045);
    border-color:rgba(255,255,255,.12) }
  /* The selected chip is the same trap as the buttons. On light the accent is
     dark and accent_ink is white; on dark the accent flips to the light hue
     and accent_ink does not, so the pressed chip shipped white on pale blue at
     2.19:1. The text on an accent fill has to follow the fill, not the scheme.
     Ordered after the .chip background rule above so it wins. */
  .fin:checked + .chip { background:var(--accent-dark);
    border-color:var(--accent-dark); color:var(--inv-plane) }
  .hero-aside dd { color:var(--inv-ink) }
  .hero-aside dd small, .cap p, .cap li, .person p, .person-pts li, .cgrid p,
  .noterow dd, .faq-a p, .credrow li, .process p { color:var(--inv-ink2) }
  .faq summary { color:var(--inv-ink) }
  .secnav { background:rgba(255,255,255,.04); border-bottom-color:rgba(255,255,255,.12) }
  .strip { border-color:rgba(255,255,255,.12) }
  .tablist, .faqs, .faq { border-color:rgba(255,255,255,.12) }
}

/* ---- generated artwork ------------------------------------------------- */
.art-hero { position:absolute; inset:-12% -6% auto -6%; width:112%; height:128%;
  z-index:0; pointer-events:none }
.art-orb { width:100%; height:100%; display:block }
.art-wave, .art-slant { display:block; width:100%; height:clamp(44px,6vw,96px);
  margin-bottom:-1px }
.art-portrait { width:100%; height:100%; display:block; border-radius:50%;
  overflow:hidden }

/* ---- the territory map ------------------------------------------------- */
.art-map { width:100%; max-width:620px; height:auto; display:block }
.art-map .st rect { fill:var(--accent-soft);
  stroke:color-mix(in srgb,var(--brand) 22%,transparent); stroke-width:1 }
.art-map .st text { fill:var(--brand) }
.art-map .st-taken rect { fill:var(--brand); stroke:var(--brand) }
.art-map .st-taken text { fill:var(--accent-ink) }
@media (hover:hover) and (pointer:fine) {
  .art-map .st { transition:transform var(--dur-hover,180ms) var(--ease-out,ease);
    transform-box:fill-box; transform-origin:center }
  .art-map .st-open:hover { transform:scale(1.12) }
}
@media (prefers-color-scheme:dark) {
  .art-map .st rect { fill:color-mix(in srgb,var(--accent-dark) 14%,transparent);
    stroke:color-mix(in srgb,var(--accent-dark) 30%,transparent) }
  .art-map .st text { fill:var(--accent-dark) }
  .art-map .st-taken rect { fill:var(--accent-dark); stroke:var(--accent-dark) }
  .art-map .st-taken text { fill:var(--inv-plane) }
}

/* ---- marquee ----------------------------------------------------------- */
.marquee { overflow:hidden; position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent) }
.marquee-track { display:flex; width:max-content; animation:mq 48s linear infinite }
.marquee-row { display:flex; align-items:center; flex:none }
.marquee-row span { display:inline-flex; align-items:center; white-space:nowrap;
  font-family:var(--display); font-size:clamp(1.35rem,3.4vw,2.4rem);
  font-weight:600; letter-spacing:-.02em; padding:0 clamp(20px,3vw,44px);
  color:var(--ink) }
.marquee-row span::after { content:""; width:9px; height:9px; border-radius:50%;
  background:var(--accent); margin-left:clamp(20px,3vw,44px) }
@keyframes mq { to { transform:translateX(-50%) } }
.marquee:hover .marquee-track { animation-play-state:paused }
@media (prefers-reduced-motion:reduce) {
  .marquee-track { animation:none }
  .marquee { mask-image:none; -webkit-mask-image:none; overflow-x:auto }
}
.sec.invert .marquee-row span { color:var(--inv-ink) }
@media (prefers-color-scheme:dark) { .marquee-row span { color:var(--inv-ink) } }

/* ======================================================================== *
   DE-BOXING LAYER. Overrides the defaults above. See buildkit/debox.py.
 * ======================================================================== */

:root { --r: 22px; --r-lg: 34px; --wrap: 1200px }

/* --- 1. borders off ----------------------------------------------------- */
.card, .caps .cap, .people .person, .hero-aside, .callout, .toc, .chip {
  border-color: transparent;
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}
.card, .caps .cap, .people .person { padding: 28px 28px 24px; border-radius: var(--r) }
.hero-aside { border-radius: var(--r-lg); padding: 30px 32px }
.callout { border-radius: 0 var(--r) var(--r) 0 }
.chip { border-color: color-mix(in srgb, var(--brand) 14%, transparent) }

/* The hairline between every section was doing the same job as the change of
   background and doing it more loudly. Sections that share a background get
   space instead; sections that change background need no line at all. */
.sec + .sec { border-top: 0 }
.sec { padding: clamp(64px, 8vw, 120px) 0 }
.sec.tight { padding: clamp(30px, 4vw, 52px) 0 }

/* --- 2. curved and slanted edges ---------------------------------------- */
.edge { display: block; line-height: 0; margin: 0 }
.edge + .sec, .sec + .edge { margin-top: 0 }

/* --- 3. asymmetry ------------------------------------------------------- */
.hero-split .hero-grid { grid-template-columns: 7fr 5fr; align-items: center }
@media (max-width: 940px) { .hero-split .hero-grid { grid-template-columns: 1fr } }
.hero { position: relative; overflow: hidden; isolation: isolate;
  padding-top: clamp(64px, 9vw, 130px); padding-bottom: clamp(64px, 9vw, 120px) }
.hero > .wrap { position: relative; z-index: 1 }
/* one grid per page breaks its own column, so the eye has somewhere to go */
.grid.offset > :nth-child(3n+2) { transform: translateY(26px) }
@media (max-width: 760px) { .grid.offset > * { transform: none } }
.sec-head { max-width: 44ch }
.sec-head.pull { margin-left: clamp(0px, 8vw, 130px) }

/* --- 4. type as structure ----------------------------------------------- */
h1 { font-size: clamp(2.8rem, 7.2vw, 5.4rem); letter-spacing: -.045em;
  line-height: 1.02 }
h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); letter-spacing: -.035em;
  line-height: 1.08 }
h3 { font-size: 1.3rem; letter-spacing: -.02em }
.lede { font-size: clamp(1.14rem, 1.75vw, 1.42rem); line-height: 1.55;
  max-width: 46ch }
/* eyebrow becomes a rule and a word, which reads as a section marker rather
   than as a small caption nobody looks at */
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  color: var(--brand) }
.eyebrow::before { content: ""; width: 30px; height: 2px; flex: none;
  background: currentColor; border-radius: 2px }
.sec.invert .eyebrow { color: var(--accent-dark) }

/* --- 5. colour in large fields ------------------------------------------ */
.sec.brand { background: var(--brand); color: var(--accent-ink) }
.sec.brand h1, .sec.brand h2, .sec.brand h3, .sec.brand .metric-v {
  color: var(--accent-ink) }
.sec.brand p, .sec.brand .metric-l, .sec.brand .metric-f {
  color: color-mix(in srgb, var(--accent-ink) 84%, var(--brand)) }
.sec.brand .eyebrow { color: color-mix(in srgb, var(--accent-ink) 90%, transparent) }
.sec.brand .btn { background: var(--accent-ink); border-color: var(--accent-ink);
  color: var(--brand) !important }
.sec.brand .btn-outline { background: transparent; border-color: currentColor;
  color: var(--accent-ink) !important }
.sec.brand .card { background: color-mix(in srgb, #000 14%, var(--brand)) }
.sec.brand .card p, .sec.brand .card-kick, .sec.brand .card-meta {
  color: color-mix(in srgb, var(--accent-ink) 82%, var(--brand)) }
.sec.brand a { color: var(--accent-ink) }

/* accent-soft becomes a real field rather than a whisper */
.sec.soft { background: var(--accent-soft) }
.sec.soft .card { background: color-mix(in srgb, var(--surface) 78%, transparent) }

/* --- buttons: pill, not rectangle --------------------------------------- */
.btn { border-radius: 100px; padding: 15px 28px; font-size: 1rem;
  letter-spacing: -.01em }
.btn-sm { padding: 9px 18px; font-size: .92rem }

/* --- numbers and step markers ------------------------------------------- */
.cap-n { font-family: var(--display); font-size: 2.3rem; font-weight: 700;
  letter-spacing: -.04em; line-height: 1; color: var(--brand);
  opacity: .28; margin-bottom: 14px }
.metric-v { font-size: clamp(2.6rem, 5.2vw, 4rem); letter-spacing: -.045em }
.step-n { width: 40px; height: 40px; font-size: 1rem }

/* --- portraits ---------------------------------------------------------- */
.people .person { flex-direction: column; gap: 22px; align-items: flex-start }
.person .avatar, .person .art-portrait { width: 92px; height: 92px; flex: none }
.person .avatar { display: none }

/* --- footer ------------------------------------------------------------- */
.site-foot { padding-top: clamp(64px, 8vw, 104px) }

/* --- dark ---------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .card, .caps .cap, .people .person, .hero-aside, .callout, .toc, .chip {
    background: color-mix(in srgb, var(--accent-dark) 8%, rgba(255,255,255,.03));
    border-color: transparent }
  .sec.soft { background: color-mix(in srgb, var(--accent-dark) 6%, transparent) }
  .sec.soft .card { background: rgba(255,255,255,.05) }
}

/* motion layer: marketing */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 140ms;
  --dur-hover: 180ms;
  --dur-enter: 260ms;
  --dur-reveal: 620ms;
}

/* Press feedback. Purpose: feedback, confirming the interface heard you.
   scale(0.97) rather than anything more, and only on a fine pointer, because
   a touch device fires a false hover on tap. */
.btn, .site-nav a, .pages a, .card h3 a {
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-hover) ease,
              border-color var(--dur-hover) ease,
              color var(--dur-hover) ease;
}
.btn:active { transform: scale(0.97) }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px) }
}
/* Focus must never be softened. It appears exactly when a keyboard user needs
   to know where they are, so it is the one thing here with no transition. */
:focus-visible { transition: none }


/* Card lift. Purpose: state indication, showing the card is a target.
   Gated to fine pointers so a tap does not leave a card stuck in hover. */
@media (hover: hover) and (pointer: fine) {
  .card { transition: transform var(--dur-hover) var(--ease-out),
                      border-color var(--dur-hover) ease,
                      box-shadow var(--dur-hover) ease }
  .card:hover { transform: translateY(-2px);
                border-color:color-mix(in srgb,var(--accent) 40%,var(--border));
                box-shadow:0 6px 22px -12px rgba(0,0,0,.28) }
}
.pages a, .toc a { transition: color var(--dur-hover) ease }


/* Underline that grows from the cursor side. Purpose: feedback. Cheap, and it
   uses background-size rather than a pseudo element so it needs no extra node
   and cannot affect layout. */
@media (hover: hover) and (pointer: fine) {
  .prose a, .lede a, .sec p a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size var(--dur-hover) var(--ease-out);
  }
  .prose a:hover, .lede a:hover, .sec p a:hover { background-size: 100% 1px }
}


/* Section reveal, fired once.

   The previous version used `animation-timeline: view()`, which is cheaper but
   bidirectional: scroll back up and every paragraph fades out again. The
   animation recipe this estate follows is explicit that a reveal fires once,
   because re-animating on every scroll-by is an interface fighting its reader.
   CSS scroll timelines cannot express "once".

   So it is an IntersectionObserver, and the arming is done in script rather
   than in CSS. That ordering is the whole safety argument: an element is
   visible until reveal.js decides to hide it, so no script, a failed script, a
   reader mode or an old browser all get the full page. The only thing script
   can do here is add motion, never remove content. */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal][data-shown] { opacity: 1; transform: none; will-change: auto }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none }
}
@media print { [data-reveal] { opacity: 1 !important; transform: none !important } }


/* Stagger a grid entrance. 60ms steps. Decorative, and it never blocks
   interaction: the delay is on the transition, so the card is clickable from
   the first frame whether or not it has finished arriving. Clamped at the
   sixth item, because past that a stagger stops reading as rhythm and starts
   reading as lag. */
[data-reveal-stagger] > :nth-child(2) { transition-delay: 60ms }
[data-reveal-stagger] > :nth-child(3) { transition-delay: 120ms }
[data-reveal-stagger] > :nth-child(4) { transition-delay: 180ms }
[data-reveal-stagger] > :nth-child(5) { transition-delay: 240ms }
[data-reveal-stagger] > :nth-child(n+6) { transition-delay: 300ms }
@media (prefers-reduced-motion: reduce) {
  [data-reveal-stagger] > * { transition-delay: 0s }
}


/* Reduced motion. Fewer and gentler, not zero: colour and opacity stay,
   because they carry state. Everything that travels through space goes. */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn:hover, .card:hover { transform: none }
  [data-reveal] { opacity: 1; transform: none }
}

/* Lead capture. The status line is the whole point: the form this replaced
   gave no feedback at all, because the browser POSTed to a static host and
   took a 405 before any of the page's own code ran.

   This is a shared kit module, so it may only use tokens the kit itself
   guarantees on every site (--ink, --muted, --r) rather than any one site's
   semantic layer. Every var() carries a literal fallback as well, so the
   module still renders correctly on a site that has not been built on the
   kit at all, which is the case for a client dropping the snippet onto
   their own page. checks.custom_properties caught the first version of this
   file using raineragency.com's private tokens. */
.leadform .hp{position:absolute;left:-9999px;width:1px;height:1px;
 overflow:hidden}
.leadstatus{margin-top:.9rem;font-size:.9rem;min-height:1.2em;line-height:1.5}
.leadstatus:empty{display:none}
.leadstatus.is-busy{color:var(--muted,#5a6072)}
.leadstatus.is-done{color:var(--ink,#0a0c12);font-weight:600}
.leadstatus.is-error{color:#b3261e}
.leadform button[disabled]{opacity:.6;cursor:progress}
.leadintro{color:var(--muted,#5a6072);margin-bottom:1.4rem}
@media (prefers-color-scheme: dark){
 :root:not([data-theme="light"]) .leadstatus.is-error{color:#ffb4ab}
 :root:not([data-theme="light"]) .leadstatus.is-done{color:var(--inv-ink,#fff)}
}
:root[data-theme="dark"] .leadstatus.is-error{color:#ffb4ab}
:root[data-theme="dark"] .leadstatus.is-done{color:var(--inv-ink,#fff)}


*,*::before,*::after{box-sizing:border-box}
:root{--g:#fff;--r:#f2f4f8;--ink:#0a0c12;--m:#5a6072;--a:#1b4dff;--a2:#0034e0;
 --deep:#0a1030;--line:rgba(10,12,18,.11);--glass:rgba(255,255,255,.66);
 /* The typography tokens. The mockup carried its own @font-face block and
    named the faces itself; stripping that block for production took these
    two definitions with it, so every font-family in this file resolved to
    nothing and the whole site painted in the browser default serif while
    still downloading and preloading both real faces. They alias the kit's
    names, which are set from Site.display_font and Site.body_font. */
 --font-display:var(--display);--font-body:var(--body)}
html{scroll-behavior:smooth;background:var(--g)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--g);color:var(--ink);
 font-family:var(--font-body);line-height:1.62;
 -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;
 letter-spacing:-.035em;line-height:1}
a{color:inherit}
button{font:inherit}
.wrap{width:min(100% - 2.6rem,76rem);margin-inline:auto;position:relative;
 z-index:3}
.mono{font-size:.67rem;letter-spacing:.22em;text-transform:uppercase;
 color:var(--m);font-weight:500}
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(46% 56% at 80% 8%,rgba(27,77,255,.26),transparent 66%),
 radial-gradient(40% 48% at 98% 52%,rgba(0,186,255,.20),transparent 68%)}

/* width:max-content is load bearing. A fixed element placed at left:50% has
   the viewport for a containing block, so its shrink to fit width is measured
   against the 50vw that remains to the right of that offset, not against the
   viewport. The pill needs 643px and got 512px at a 1024px laptop, so every
   label wrapped and the call to action folded into a circle. It measured
   clean only at 1440. max-content takes the width the content actually wants
   and the max-width keeps it off the edge on a small phone. */
.nav{position:fixed;top:1.1rem;left:50%;transform:translateX(-50%);z-index:80;
 width:max-content;max-width:calc(100vw - 1.6rem);
 display:flex;align-items:center;gap:.2rem;padding:.4rem .4rem .4rem 1.15rem;
 border-radius:999px;background:var(--glass);
 -webkit-backdrop-filter:blur(24px) saturate(1.6);
 backdrop-filter:blur(24px) saturate(1.6);
 box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 34px rgba(10,20,60,.14),
 0 0 0 1px rgba(10,12,18,.05)}
.nav .brand{display:flex;align-items:center;margin-right:.6rem;padding:.2rem}
.nav .brand{text-decoration:none}
/* The wordmark. RAINER carries the weight, AGENCY steps back, and the full
   stop is the only colour, so it is where the eye lands. Live text, so it
   inherits the theme and stays sharp at any size. */
.wm{display:inline-flex;align-items:baseline;gap:.36em;
 font-family:var(--font-display);letter-spacing:-.035em;line-height:1;
 color:var(--fg)}
.wm b{font-weight:700}
.wm i{font-style:normal;font-weight:300}
.wm u{text-decoration:none;width:.3em;height:.3em;border-radius:var(--r-full);
 background:var(--brand);align-self:flex-end;margin-bottom:.05em;flex:none}
.nav .wm{font-size:1rem}
.footmark{display:block;margin-bottom:.9rem}
.footmark svg{display:block}
.wm-foot{font-size:1.25rem;color:var(--fg-invert);font-weight:400}
.wm-foot u{background:var(--brand)}
.nav a{text-decoration:none;font-size:.87rem;padding:.5rem .78rem;
 white-space:nowrap;
 border-radius:999px;color:var(--m);transition:color .2s,background .2s}
.nav a:hover,.nav a:focus-visible{color:var(--ink);background:rgba(10,12,18,.05)}
.nav .cta{background:var(--a);color:#fff;font-weight:600}
.nav .cta:hover{background:var(--a2);color:#fff}
@media(max-width:980px){.nav a.hide{display:none}.nav{padding-left:1rem}}
/* Below this the two remaining section links go too, leaving the mark
   and the one action. A navigation that has to wrap is not navigation. */
@media(max-width:620px){.nav a.sec{display:none}
 .nav{padding:.35rem .35rem .35rem .9rem}.nav .brand{margin-right:.4rem}}

.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.95rem 1.7rem;
 border-radius:999px;background:var(--a);color:#fff;text-decoration:none;
 font-weight:600;font-size:.95rem;border:0;cursor:pointer;
 transition:background .22s,box-shadow .22s}
.btn:hover{background:var(--a2);box-shadow:0 16px 38px rgba(27,77,255,.3)}
.ghost{color:var(--a);text-decoration:none;font-weight:550;font-size:.95rem;
 cursor:pointer}

/* Hero. The photograph is the right hand half and it moves. */
.hero{position:relative;padding:9.5rem 0 4rem}
.hero .wrap{display:grid;grid-template-columns:1fr .84fr;gap:3.4rem;
 align-items:center}
.h1{font-size:clamp(2.7rem,6.6vw,5.3rem);max-width:12ch}
.h1 span{color:var(--a)}
.lede{margin-top:1.9rem;font-size:clamp(1.02rem,1.3vw,1.15rem);color:var(--m);
 max-width:42ch}
.acts{display:flex;align-items:center;gap:1.6rem;margin-top:2.5rem;
 flex-wrap:wrap}
.shot{position:relative;border-radius:36px;overflow:hidden;aspect-ratio:4/5;
 box-shadow:0 30px 70px rgba(10,20,60,.22),0 0 0 1px rgba(10,12,18,.05)}
.shot img{width:100%;height:100%;object-fit:cover;will-change:transform}
.tag{position:absolute;left:1.1rem;bottom:1.1rem;z-index:2;
 padding:.7rem 1.1rem;border-radius:999px;background:var(--glass);
 -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
 font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
 font-weight:600}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}
 .shot{aspect-ratio:4/3}}

/* The marquee. Always moving, and the single most visible thing on the page.
   Two identical tracks side by side, the pair translated by exactly half its
   own width, which is what makes the loop seamless with no jump. */
.marq{position:relative;z-index:3;margin:4.5rem 0 0;padding:1.5rem 0;
 overflow:hidden;background:var(--deep);color:#fff;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marq-in{display:flex;width:max-content;will-change:transform}
.marq span{font-family:var(--font-display);font-size:clamp(1.4rem,3vw,2.4rem);
 font-weight:600;letter-spacing:-.03em;padding:0 1.6rem;white-space:nowrap;
 display:flex;align-items:center;gap:1.6rem}
.marq span::after{content:"";width:.5rem;height:.5rem;border-radius:50%;
 background:var(--a);flex:none}

/* Figures. Real numbers, counted. */
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.4rem;
 padding:5.5rem 0 1rem}
.fig b{font-family:var(--font-display);font-size:clamp(2.6rem,5vw,4rem);
 font-weight:600;line-height:1;display:block;letter-spacing:-.04em;
 font-variant-numeric:tabular-nums}
.fig i{font-style:normal;color:var(--a);font-weight:600;font-size:1rem;
 display:block;margin-top:.5rem}
.fig p{color:var(--m);font-size:.9rem;margin-top:.5rem}
@media(max-width:820px){.figs{grid-template-columns:repeat(2,1fr)}}

.sec{position:relative;padding:6.5rem 0}
.sech h2{font-size:clamp(1.9rem,3.8vw,3rem);max-width:15ch}
.sech .mono{display:block;margin-bottom:1.1rem}

/* Services. The heading sticks while its own list runs past it, which is the
   skill's sticky section header and is impossible to miss. */
.svcwrap{display:grid;grid-template-columns:.72fr 1fr;gap:3.5rem;
 align-items:start}
.svcwrap .sech{position:sticky;top:6.5rem}
.svc{position:relative;display:grid;gap:.45rem 1.6rem;padding:1.9rem 1.1rem;
 grid-template-columns:2.6rem 1fr;align-items:start;border-radius:22px;
 transition:background .3s ease,color .3s ease}
.svc+.svc::before{content:"";position:absolute;top:0;left:1.1rem;right:1.1rem;
 height:1px;background:linear-gradient(90deg,var(--line),transparent 88%)}
.svc-n{font-size:.82rem;font-weight:700;color:var(--a);padding-top:.35rem;
 transition:color .3s}
.svc h3{font-size:clamp(1.15rem,1.9vw,1.42rem)}
.svc p{color:var(--m);font-size:.96rem;grid-column:2;transition:color .3s}
/* Flood inversion on hover, from the skill's effects list, in the palette. */
.svc:hover{background:var(--a);color:#fff}
.svc:hover .svc-n,.svc:hover p{color:#fff}
@media(max-width:900px){.svcwrap{grid-template-columns:1fr}
 .svcwrap .sech{position:static}}

/* Work. Each photograph wipes open from its base. */
.work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:4.5rem 3.2rem}
.pc:nth-child(even){margin-top:5.5rem}
.plate{border-radius:30px;overflow:hidden;aspect-ratio:5/4;
 box-shadow:0 24px 56px rgba(10,20,60,.16),0 0 0 1px rgba(10,12,18,.05)}
.plate img{width:100%;height:100%;object-fit:cover;will-change:transform}
.pc h3{margin-top:1.6rem;font-size:clamp(1.3rem,2.2vw,1.75rem)}
.pc .disc{margin-top:.55rem}
.pc p{margin-top:.85rem;color:var(--m);font-size:.96rem}
@media(max-width:820px){.work{grid-template-columns:1fr}
 .pc:nth-child(even){margin-top:0}}

/* A full bleed photograph that moves against the scroll. */
.band{position:relative;width:100vw;max-width:100vw;
 margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
 height:min(72svh,34rem);overflow:hidden;z-index:2;
 display:grid;place-items:center;margin:2rem 0 0;background:var(--deep)}
.band img{position:absolute;inset:-14% 0;width:100%;height:128%;
 object-fit:cover;will-change:transform}
.band::after{content:"";position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(10,16,48,.62),rgba(10,16,48,.78))}
.band blockquote{position:relative;z-index:2;margin:0;color:#fff;
 font-family:var(--font-display);font-weight:500;letter-spacing:-.03em;
 font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.16;text-align:center;
 max-width:20ch;padding:0 1.4rem}

.folk{display:flex;flex-wrap:wrap;gap:2.6rem 2.2rem;justify-content:center}
.who{width:10rem;text-align:center}
.who:nth-child(even){margin-top:3rem}
@media(max-width:780px){.who:nth-child(even){margin-top:0}}
.who img{width:10rem;height:10rem;border-radius:50%;object-fit:cover;
 box-shadow:0 14px 34px rgba(10,20,60,.16)}
.who b{display:block;margin-top:1rem;font-size:.99rem;font-weight:600}
.who span{display:block;margin-top:.3rem}

.award{position:relative;display:grid;grid-template-columns:5rem 1fr;
 gap:.3rem 1.8rem;padding:1.5rem .2rem;align-items:baseline}
.award+.award::before{content:"";position:absolute;top:0;left:0;right:0;
 height:1px;background:linear-gradient(90deg,var(--line),transparent 74%)}
.award b{font-weight:600;font-size:1.05rem}
.award span{grid-column:2}

/* Lead capture. Three fields, which is the skill's ceiling for conversion. */
.close{padding:7rem 0 5rem;position:relative}
.close .wrap{display:grid;grid-template-columns:1fr .9fr;gap:3.4rem;
 align-items:center}
.close h2{font-size:clamp(2rem,4.6vw,3.4rem);max-width:14ch}
.close h2 span{color:var(--a)}
.close .lede{margin-top:1.4rem}
form{border-radius:34px;background:var(--glass);padding:2.2rem 2rem;
 -webkit-backdrop-filter:blur(28px) saturate(1.7);
 backdrop-filter:blur(28px) saturate(1.7);
 box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 26px 60px rgba(10,20,60,.15),
 0 0 0 1px rgba(10,12,18,.05)}
.field{margin-bottom:1.15rem}
.field label{display:block;font-size:.83rem;font-weight:600;
 margin-bottom:.42rem}
.field input,.field textarea{width:100%;padding:.85rem 1rem;border-radius:16px;
 background:#fff;color:var(--ink);font:inherit;font-size:.95rem;
 border:1px solid rgba(10,12,18,.16);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:5.5rem;resize:vertical}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--a);
 box-shadow:0 0 0 3px rgba(27,77,255,.16)}
.field .help{display:block;margin-top:.4rem;font-size:.8rem;color:var(--m)}
form .btn{width:100%;justify-content:center;margin-top:.4rem}
@media(max-width:900px){.close .wrap{grid-template-columns:1fr}}

.foot{padding:3rem 0 3.5rem;border-top:0}
.foot .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
 padding-top:2.4rem;position:relative}
.foot .row::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
 background:linear-gradient(90deg,var(--line),transparent 86%)}
.credits{color:var(--m);font-size:.76rem;line-height:1.7;max-width:62ch;
 margin-top:1.6rem}
.credits a{color:var(--m)}
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--a);
 outline-offset:3px}


:root{
 /* --- primitive ------------------------------------------------------- */
 --blue-50:#eef2ff; --blue-100:#dde5ff; --blue-500:#3b6bff;
 --blue-600:#1b4dff; --blue-700:#0034e0;
 --cyan-400:#00baff; --mint-400:#00e5a0;
 --ink-900:#0a0c12; --ink-700:#2b3040; --ink-500:#5a6072; --ink-300:#98a0b4;
 --navy-900:#0a1030; --navy-800:#141c44;
 --grey-0:#ffffff; --grey-50:#f6f8fc; --grey-100:#eef2f9; --grey-200:#e3e8f2;

 --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem;
 --s7:2.5rem; --s8:3.25rem; --s9:4.6rem; --s10:6rem;

 --r-sm:12px; --r-md:20px; --r-lg:26px; --r-xl:34px; --r-full:999px;

 --sh-1:0 1px 2px rgba(10,20,60,.05);
 --sh-2:0 10px 24px rgba(10,20,60,.07);
 --sh-3:0 30px 60px rgba(10,20,60,.06);
 --sh-lift:0 16px 32px rgba(27,77,255,.16),0 42px 80px rgba(10,20,60,.12);

 /* --- semantic -------------------------------------------------------- */
 --bg:var(--grey-0); --bg-raise:var(--grey-50); --bg-invert:var(--navy-900);
 --fg:var(--ink-900); --fg-muted:var(--ink-500); --fg-invert:var(--grey-0);
 --fg-invert-muted:#b9c4da;
 --brand:var(--blue-600); --brand-strong:var(--blue-700);
 --accent:var(--blue-600); --accent-ink:#fff;
 --brand-tint:rgba(27,77,255,.09); --brand-edge:rgba(27,77,255,.5);
 --accent2:var(--cyan-400); --good:var(--mint-400);
 --line:rgba(10,12,18,.11); --line-invert:rgba(255,255,255,.14);
 --surface:var(--grey-0); --elev:var(--sh-1),var(--sh-2),var(--sh-3);

 /* --- component ------------------------------------------------------- */
 --card-bg:var(--surface); --card-radius:var(--r-lg); --card-pad:1.9rem 1.7rem;
 --btn-bg:var(--brand); --btn-fg:var(--fg-invert); --btn-radius:var(--r-full);
 --nav-bg:rgba(255,255,255,.66);
 --pick-on-bg:var(--brand); --pick-on-fg:var(--fg-invert);
 --field-bg:var(--grey-0); --field-line:rgba(10,12,18,.16);
 --sec-pad:var(--s9);
}


/* Rebind the older stylesheet's names onto the semantic layer, so the two
   halves of the page cannot drift apart. */
:root{--g:var(--bg);--r:var(--bg-raise);--ink:var(--fg);--m:var(--fg-muted);
 --a:var(--brand);--a2:var(--brand-strong);--deep:var(--bg-invert);
 --glass:var(--nav-bg)}

.sec{padding:var(--sec-pad) 0;position:relative}
.tint{background:linear-gradient(180deg,var(--grey-50),var(--grey-100))}
.tint::before{content:"";position:absolute;inset:0;pointer-events:none;
 background-image:radial-gradient(rgba(27,77,255,.16) 1px,transparent 1px);
 background-size:26px 26px;
 -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 78%);
 mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 78%);opacity:.55}
.tint > .wrap{position:relative;z-index:2}
.orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:var(--r-full);filter:blur(70px);opacity:.55}
.orb.a{width:32rem;height:32rem;background:rgba(27,77,255,.34);top:-10rem;right:-8rem}
.orb.b{width:26rem;height:26rem;background:rgba(0,186,255,.30);bottom:-12rem;left:-6rem}
.orb.c{width:20rem;height:20rem;background:rgba(130,80,255,.26);top:36%;left:52%}
.prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
 background:linear-gradient(90deg,var(--brand),var(--accent2));
 box-shadow:0 0 14px rgba(27,77,255,.6)}

.sech{position:relative}
.idx{position:absolute;right:0;top:-2.2rem;font-family:var(--font-display);
 font-size:clamp(4rem,9vw,7.5rem);font-weight:600;line-height:1;
 letter-spacing:-.05em;color:rgba(10,12,18,.05);pointer-events:none;
 user-select:none}
.tint .idx{color:rgba(27,77,255,.09)}
.sech h2{font-size:clamp(1.8rem,3.4vw,2.7rem);max-width:16ch}
.sech .mono{display:block;margin-bottom:var(--s4)}
.sech .sub{margin-top:var(--s4);color:var(--fg-muted);font-size:.97rem;
 max-width:40ch}
.split{display:grid;grid-template-columns:.85fr 1fr;gap:var(--s6) var(--s8);
 align-items:start}
.split > .sech{position:sticky;top:6.2rem}
@media(max-width:940px){.split{grid-template-columns:1fr}
 .split > .sech{position:static}}
/* A heading that runs the full width, for sections whose content needs it. */
.headwide{display:flex;justify-content:space-between;align-items:end;
 gap:var(--s6);flex-wrap:wrap;margin-bottom:var(--s7)}
.headwide .sub{margin:0;max-width:34ch}

.card{position:relative;border-radius:var(--card-radius);background:var(--card-bg);
 padding:var(--card-pad);box-shadow:var(--elev);
 transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s}
.card::before{content:"";position:absolute;inset:0;
 border-radius:var(--card-radius);padding:1px;pointer-events:none;
 background:linear-gradient(145deg,var(--brand-edge),rgba(27,77,255,0) 42%,
 rgba(0,186,255,.34));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,
 linear-gradient(#000 0 0);mask-composite:exclude}
.card:hover{transform:translateY(-7px);box-shadow:var(--sh-1),var(--sh-lift)}
.ico{width:1.35rem;height:1.35rem;flex:none}

.chain{position:relative}
.rail{position:relative;display:grid;grid-template-columns:repeat(5,1fr);
 gap:1.2rem;margin-top:var(--s7)}
.rail::before{content:"";position:absolute;left:6%;right:6%;top:1.55rem;
 height:2px;background:var(--line);border-radius:var(--r-full)}
.rail .drawn{position:absolute;left:6%;top:1.55rem;height:2px;width:0;
 background:linear-gradient(90deg,var(--brand),var(--accent2));
 border-radius:var(--r-full);max-width:88%;box-shadow:0 0 12px rgba(27,77,255,.5)}
.node{position:relative;text-align:center;display:flex;flex-direction:column;
 align-items:center}
.node .dot{width:3.1rem;height:3.1rem;border-radius:var(--r-full);
 margin:0 auto 1.2rem;display:grid;place-items:center;font-weight:700;
 font-size:.9rem;background:var(--surface);color:var(--fg-muted);
 position:relative;z-index:2;
 box-shadow:0 0 0 2px var(--line) inset,0 8px 22px rgba(10,20,60,.10);
 transition:background .4s,color .4s,box-shadow .4s,transform .4s}
.node.on .dot{background:var(--brand);color:var(--fg-invert);transform:scale(1.08);
 box-shadow:0 0 0 2px var(--brand) inset,0 14px 34px rgba(27,77,255,.42)}
.node.last.on .dot{background:var(--bg-invert);
 box-shadow:0 0 0 2px var(--bg-invert) inset,0 14px 34px rgba(10,16,48,.4)}
.node h3{font-size:.99rem;margin-bottom:var(--s2)}
.node p{color:var(--fg-muted);font-size:.85rem;line-height:1.5;
 margin-bottom:var(--s3)}
.own{display:inline-block;margin-top:auto;padding:.32rem .75rem;
 border-radius:var(--r-full);font-size:.58rem;letter-spacing:.16em;
 text-transform:uppercase;font-weight:700;background:var(--brand-tint);
 color:var(--brand-strong)}
.node.last .own{background:rgba(10,16,48,.09);color:var(--bg-invert)}
.chainline{margin-top:var(--s7);font-family:var(--font-display);font-weight:600;
 letter-spacing:-.03em;font-size:clamp(1.2rem,2.5vw,1.9rem);max-width:30ch}
.chainline span{color:var(--brand)}
@media(max-width:900px){
 .rail{grid-template-columns:1fr;gap:1.9rem;margin-left:.4rem}
 .rail::before{left:1.5rem;right:auto;top:1rem;bottom:1rem;width:2px;height:auto}
 .rail .drawn{left:1.5rem;top:1rem;width:2px;height:0;max-width:2px;
  background:linear-gradient(180deg,var(--brand),var(--accent2))}
 .node{display:grid;grid-template-columns:3.1rem 1fr;gap:0 1.1rem;
  text-align:left;align-items:start}
 .node .dot{margin:0}
 .node h3,.node p,.node .own{grid-column:2}
 .node .own{justify-self:start;margin-top:0}}

.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
.figs .card{padding:1.6rem 1.4rem}
.fig b{font-family:var(--font-display);font-size:clamp(2.1rem,4vw,3.1rem);
 font-weight:600;line-height:1;display:block;letter-spacing:-.04em;
 font-variant-numeric:tabular-nums}
.fig i{font-style:normal;color:var(--brand);font-weight:600;font-size:.93rem;
 display:block;margin-top:.4rem}
.fig p{color:var(--fg-muted);font-size:.85rem;margin-top:.4rem}
@media(max-width:860px){.figs{grid-template-columns:repeat(2,1fr)}}

/* The atlas gets the whole width. Two columns, not three. */
.atlas{display:grid;grid-template-columns:19rem 1fr;gap:var(--s6);
 align-items:start}
.pickcol{position:sticky;top:6.2rem;display:flex;flex-direction:column;
 gap:.3rem}
.pick{position:relative;width:100%;text-align:left;background:none;border:0;
 padding:.9rem 1rem;border-radius:22px;cursor:pointer;color:var(--fg);
 display:flex;align-items:center;gap:.8rem;
 transition:background .28s,color .28s,transform .28s}
.pick .ico{color:var(--brand);transition:color .28s}
.pick b{display:block;font-size:.94rem;font-weight:600;
 font-family:var(--font-display);letter-spacing:-.02em}
.pick i{font-style:normal;display:block;margin-top:.12rem;font-size:.58rem;
 letter-spacing:.17em;text-transform:uppercase;color:var(--fg-muted);
 font-weight:600;transition:color .28s}
.pick:hover{background:var(--brand-tint)}
.pick[aria-selected="true"]{background:var(--pick-on-bg);color:var(--pick-on-fg);
 transform:translateX(5px);box-shadow:0 12px 26px rgba(27,77,255,.28)}
.pick[aria-selected="true"] i,.pick[aria-selected="true"] .ico{color:#fff}
.pickfoot{margin-top:var(--s4);padding:1.2rem 1.25rem;border-radius:var(--r-md);
 background:var(--bg-invert);color:var(--fg-invert)}
.pickfoot p{font-size:.88rem;line-height:1.6;color:var(--fg-invert-muted)}
.pickfoot a{color:#fff;font-weight:600;text-decoration:none;
 display:inline-block;margin-top:.6rem;font-size:.88rem}
.panel{border-radius:var(--r-xl);background:var(--surface);padding:2.2rem 2rem;
 position:relative;box-shadow:var(--elev)}
.panel::before{content:"";position:absolute;inset:0;border-radius:var(--r-xl);
 padding:1px;pointer-events:none;
 background:linear-gradient(145deg,var(--brand-edge),rgba(27,77,255,0) 44%,
 rgba(0,186,255,.34));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,
 linear-gradient(#000 0 0);mask-composite:exclude}
.panel .dom{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
 color:var(--brand);font-weight:700}
.panel h2{margin-top:.6rem;font-size:clamp(1.35rem,2.4vw,1.9rem)}
.panel .line{margin-top:.8rem;font-size:1.02rem;font-weight:500;max-width:46ch}
.panel .body{margin-top:var(--s4);color:var(--fg-muted);font-size:.94rem;
 max-width:60ch}
.facts{margin-top:var(--s5);display:grid;grid-template-columns:1fr 1fr;
 gap:.9rem 1.8rem}
.fact{position:relative;padding-left:1.25rem}
.fact::before{content:"";position:absolute;left:0;top:.5rem;width:.4rem;
 height:.4rem;border-radius:var(--r-full);background:var(--brand)}
.fact b{display:block;font-size:.9rem;font-weight:600}
.fact span{display:block;margin-top:.15rem;color:var(--fg-muted);font-size:.87rem}
@media(max-width:640px){.facts{grid-template-columns:1fr}}
.hook{margin-top:var(--s5);padding:1rem 1.2rem 1rem 3rem;
 border-radius:var(--r-md);
 background:linear-gradient(120deg,var(--brand-tint),rgba(0,186,255,.07));
 font-size:.92rem;font-weight:500;position:relative}
.hook::before{content:"\2192";position:absolute;left:1.2rem;top:.95rem;
 color:var(--brand);font-weight:700}
.panel .btn{margin-top:var(--s5)}
@media(max-width:940px){.atlas{grid-template-columns:1fr}
 .pickcol{position:static;flex-direction:row;overflow-x:auto;gap:.5rem;
  padding-bottom:.4rem;scrollbar-width:none}
 .pickcol::-webkit-scrollbar{display:none}
 .pick{flex:none;min-width:13rem}
 .pick[aria-selected="true"]{transform:none}
 .pickfoot{display:none}}

.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
.why .card{display:flex;flex-direction:column;gap:.85rem}
.why .ico{color:var(--brand);width:1.6rem;height:1.6rem}
.why h3{font-size:1.1rem}
.why p{color:var(--fg-muted);font-size:.93rem}
@media(max-width:820px){.why{grid-template-columns:1fr}}

/* Territory check. The page's one real lead magnet. */
.terr{display:grid;grid-template-columns:1fr .9fr;gap:var(--s8);
 align-items:center}
.terr h2{font-size:clamp(1.8rem,3.4vw,2.6rem);max-width:14ch}
.terr p{margin-top:var(--s4);color:var(--fg-muted);max-width:42ch}
.terrform{border-radius:var(--r-xl);background:var(--surface);
 padding:1.9rem 1.8rem;box-shadow:var(--elev);position:relative}
.terrform::before{content:"";position:absolute;inset:0;
 border-radius:var(--r-xl);padding:1px;pointer-events:none;
 background:linear-gradient(145deg,var(--brand-edge),rgba(27,77,255,0) 44%,
 rgba(0,186,255,.34));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,
 linear-gradient(#000 0 0);mask-composite:exclude}
select{width:100%;padding:.85rem 1rem;border-radius:var(--r-sm);
 background:var(--field-bg);color:var(--fg);font:inherit;font-size:.95rem;
 border:1px solid var(--field-line)}
select:focus{outline:0;border-color:var(--brand);
 box-shadow:0 0 0 3px var(--brand-tint)}
@media(max-width:900px){.terr{grid-template-columns:1fr}}

/* Persistent call bar. A reader is never more than a glance from an offer. */
.callbar{position:fixed;left:50%;bottom:1.1rem;transform:translate(-50%,150%);
 z-index:110;display:flex;align-items:center;gap:1rem;
 padding:.6rem .6rem .6rem 1.3rem;border-radius:var(--r-full);
 background:var(--bg-invert);color:var(--fg-invert);
 box-shadow:0 20px 50px rgba(10,16,48,.4);max-width:calc(100vw - 2rem)}
.callbar span{font-size:.88rem;white-space:nowrap}
.callbar a{color:#fff;text-decoration:none;font-weight:600;font-size:.88rem;
 padding:.6rem 1.15rem;border-radius:var(--r-full);background:var(--brand);
 white-space:nowrap}
.callbar a:hover{background:var(--brand-strong)}
@media(max-width:620px){.callbar span{display:none}
 .callbar{padding:.5rem;bottom:.7rem}}

.npwrap{background:var(--bg-invert);color:var(--fg-invert);
 border-radius:var(--r-xl);padding:clamp(2rem,4vw,3.2rem);position:relative;
 z-index:3;overflow:hidden}
.npwrap::after{content:"";position:absolute;width:26rem;height:26rem;
 border-radius:var(--r-full);background:rgba(0,229,160,.16);filter:blur(70px);
 right:-8rem;top:-8rem;pointer-events:none}
.npwrap .mono{color:#93a0bc}
.npwrap h2{color:#fff;font-size:clamp(1.7rem,3.1vw,2.4rem);max-width:20ch}
.np{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:1.6rem 2.6rem;margin-top:var(--s6);position:relative;z-index:2}
.np div{position:relative;padding-left:1.3rem}
.np div::before{content:"";position:absolute;left:0;top:.5rem;width:.42rem;
 height:.42rem;border-radius:var(--r-full);background:var(--good)}
.np b{font-size:.99rem;font-weight:600}
.np .dom{display:block;margin-top:.2rem;font-size:.6rem;letter-spacing:.17em;
 text-transform:uppercase;color:var(--good);font-weight:700}
.np p{margin-top:.5rem;color:var(--fg-invert-muted);font-size:.89rem}
@media(max-width:820px){.np{grid-template-columns:1fr}}

.road{position:relative;padding-left:1.6rem}
.road::before{content:"";position:absolute;left:.42rem;top:.6rem;bottom:.6rem;
 width:2px;background:var(--line);border-radius:var(--r-full)}
.road .fill{position:absolute;left:.42rem;top:.6rem;width:2px;height:0;
 background:linear-gradient(180deg,var(--brand),var(--accent2));
 border-radius:var(--r-full);box-shadow:0 0 12px rgba(27,77,255,.5)}
.stop{position:relative;padding:1.1rem 0 1.1rem .4rem}
.stop::before{content:"";position:absolute;left:-1.6rem;top:1.55rem;
 width:.9rem;height:.9rem;border-radius:var(--r-full);background:var(--surface);
 box-shadow:0 0 0 2px var(--line) inset;
 transition:background .35s,box-shadow .35s,transform .35s}
.stop.on::before{background:var(--brand);box-shadow:0 0 0 2px var(--brand) inset;
 transform:scale(1.2)}
.stop.done::before{background:var(--bg-invert);
 box-shadow:0 0 0 2px var(--bg-invert) inset}
.stop .when{font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;
 font-weight:700;color:var(--brand)}
.stop.done .when{color:var(--fg-muted)}
.stop h3{margin-top:.4rem;font-size:1.08rem}
.stop p{margin-top:.4rem;color:var(--fg-muted);font-size:.91rem;max-width:52ch}

.folk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
.who{text-align:left;width:auto;margin:0}
.who img{width:100%;height:auto;aspect-ratio:1;border-radius:22px;
 object-fit:cover;box-shadow:0 14px 34px rgba(10,20,60,.22);
 transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.who:hover img{transform:translateY(-6px) scale(1.02)}
.who b{display:block;margin-top:.9rem;font-size:1rem;font-weight:600;
 font-family:var(--font-display);letter-spacing:-.02em}
.who span{display:block;margin-top:.25rem}
@media(max-width:820px){.folk{grid-template-columns:repeat(2,1fr)}}

.awards{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 2.6rem}
.award{position:relative;display:grid;grid-template-columns:4.4rem 1fr;
 gap:.25rem 1.4rem;padding:1.15rem .2rem;align-items:baseline}
.award+.award::before{content:"";position:absolute;top:0;left:0;right:0;
 height:1px;background:linear-gradient(90deg,var(--line),transparent 74%)}
.award b{font-weight:600;font-size:1rem}
.award span{grid-column:2}
@media(max-width:820px){.awards{grid-template-columns:1fr}}

.note{position:relative;margin-top:var(--s6);color:var(--fg-muted);
 font-size:.88rem;max-width:62ch;padding-left:1.3rem;line-height:1.7}
.note::before{content:"";position:absolute;left:0;top:.35rem;bottom:.35rem;
 width:3px;border-radius:var(--r-full);background:var(--brand)}

/* ---------------------------------------------------------------------
   The footer. Nine domains, four entities, the legal centre, contact and
   the three social accounts that are actually theirs.
   --------------------------------------------------------------------- */
.sitefoot{background:var(--bg-invert);color:var(--fg-invert);
 padding:var(--s9) 0 var(--s6);position:relative;overflow:hidden;z-index:3}
.sitefoot::after{content:"";position:absolute;width:34rem;height:34rem;
 border-radius:var(--r-full);background:rgba(27,77,255,.22);filter:blur(90px);
 left:-10rem;bottom:-16rem;pointer-events:none}
.footgrid{display:grid;grid-template-columns:1.25fr repeat(4,minmax(0,1fr));
 gap:var(--s6) var(--s5);position:relative;z-index:2}
.footbrand b{font-family:var(--font-display);font-size:1.3rem;font-weight:600;
 letter-spacing:-.02em;display:block}
.footbrand p{margin-top:.8rem;color:var(--fg-invert-muted);font-size:.9rem;
 max-width:30ch;line-height:1.7}
.footcontact{margin-top:var(--s5);display:grid;grid-template-columns:auto;gap:.15rem;margin-bottom:0}
.footcontact dt{font-style:normal;color:var(--ink-300);font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;margin-top:.55rem}
.footcontact dd{margin:0;font-size:.9rem;color:var(--fg-invert)}
.footcontact dd a{color:var(--fg-invert);text-decoration:none}
.footcontact dd a:hover{color:#8fb4ff}
.footcontact a,.footcontact span{color:var(--fg-invert);text-decoration:none;
 font-size:.9rem;display:block}
.footcontact a:hover{color:#8fb4ff}
.footcontact em{font-style:normal;color:var(--ink-300);font-size:.62rem;
 letter-spacing:.17em;text-transform:uppercase;display:block;
 margin-bottom:.15rem}
.socials{display:flex;gap:.5rem;margin-top:var(--s5)}
.socials a{width:2.5rem;height:2.5rem;border-radius:var(--r-full);
 display:grid;place-items:center;background:rgba(255,255,255,.09);
 color:#fff;transition:background .25s,transform .25s}
.socials a:hover{background:var(--brand);transform:translateY(-3px)}
.socials svg{width:1.15rem;height:1.15rem}
.footcol h2{font-size:.62rem;font-family:inherit;letter-spacing:.17em;text-transform:uppercase;
 color:var(--ink-300);font-weight:700;margin:0 0 var(--s4)}
.footcol a{display:block;color:var(--fg-invert);text-decoration:none;
 font-size:.89rem;padding:.32rem 0;transition:color .2s}
.footcol a:hover{color:#8fb4ff}
.footcol a em{font-style:normal;display:block;color:var(--ink-300);
 font-size:.72rem;margin-top:.1rem}
.footbase{margin-top:var(--s8);padding-top:var(--s5);position:relative;
 z-index:2;display:flex;justify-content:space-between;gap:var(--s4);
 flex-wrap:wrap;border-top:0}
.footbase::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
 background:var(--line-invert)}
.footbase p,.footbase a{color:var(--ink-300);font-size:.8rem;
 text-decoration:none}
.footbase a:hover{color:#fff}
.footcredits{color:var(--ink-300);font-size:.72rem;line-height:1.7;
 max-width:72ch;margin-top:var(--s4);position:relative;z-index:2}
.footcredits a{color:var(--ink-300)}
@media(max-width:1040px){.footgrid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:700px){.footgrid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   Act one. The leak, told in three beats.
   --------------------------------------------------------------------- */
.leak{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:var(--s5);margin-top:var(--s7);counter-reset:beat}
.beat{position:relative;padding-top:var(--s6)}
.beat::before{counter-increment:beat;content:counter(beat);
 position:absolute;top:0;left:0;font-family:var(--font-display);
 font-size:2.6rem;font-weight:600;line-height:1;letter-spacing:-.04em;
 color:var(--brand);opacity:.28}
.beat em{font-style:normal;display:block;font-size:.62rem;letter-spacing:.17em;
 text-transform:uppercase;color:var(--brand);font-weight:700;
 margin-bottom:.55rem}
.beat h3{font-size:clamp(1.05rem,1.9vw,1.3rem);margin-bottom:.6rem}
.beat p{color:var(--fg-muted);font-size:.95rem}
.beat:last-child h3{color:var(--brand)}
@media(max-width:860px){.leak{grid-template-columns:1fr;gap:var(--s6)}}

/* The cost, stated once and hard. */
.cost{margin-top:var(--s8);padding:var(--s7) var(--s6);border-radius:var(--r-xl);
 background:var(--bg-invert);color:var(--fg-invert);position:relative;
 overflow:hidden}
.cost::after{content:"";position:absolute;width:28rem;height:28rem;
 border-radius:var(--r-full);background:rgba(27,77,255,.3);filter:blur(80px);
 right:-9rem;top:-11rem;pointer-events:none}
.cost h3,.cost p{color:var(--fg-invert)}
.cost h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;
 font-size:clamp(1.5rem,3.2vw,2.4rem);max-width:22ch;position:relative;z-index:2}
.cost p{margin-top:var(--s4);color:var(--fg-invert-muted);max-width:52ch;
 position:relative;z-index:2}
.stack{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s5);
 position:relative;z-index:2}
.stack span{font-size:.78rem;padding:.42rem .8rem;border-radius:var(--r-full);
 background:rgba(255,255,255,.08);color:#cdd6ea;
 text-decoration:line-through;text-decoration-color:rgba(255,120,120,.75)}

/* ---------------------------------------------------------------------
   Act three. The plan. Three moves, each a full beat rather than a card.
   --------------------------------------------------------------------- */
.move{display:grid;grid-template-columns:.9fr 1fr;gap:var(--s6) var(--s8);
 align-items:start;padding:var(--s8) 0;position:relative}
.move+.move::before{content:"";position:absolute;top:0;left:0;right:0;
 height:1px;background:linear-gradient(90deg,var(--line),transparent 82%)}
.movehead .n{display:inline-flex;align-items:center;gap:.6rem;
 font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;
 font-weight:700;color:var(--brand)}
.movehead .n .ico{width:1.1rem;height:1.1rem}
.movehead h3{margin-top:var(--s3);font-size:clamp(1.5rem,2.9vw,2.15rem);
 max-width:16ch}
.claim{margin-top:var(--s4);font-family:var(--font-display);font-weight:600;
 letter-spacing:-.02em;font-size:clamp(1.05rem,1.9vw,1.28rem);
 color:var(--brand);max-width:26ch}
.move .body{color:var(--fg-muted);font-size:.98rem;max-width:56ch}
.proof{margin-top:var(--s5);display:grid;gap:var(--s4)}
.proof div{position:relative;padding-left:1.3rem}
.proof div::before{content:"";position:absolute;left:0;top:.5rem;width:.42rem;
 height:.42rem;border-radius:var(--r-full);background:var(--brand)}
.proof b{display:block;font-size:.93rem;font-weight:600}
.proof span{display:block;margin-top:.15rem;color:var(--fg-muted);
 font-size:.9rem}
.move .btn{margin-top:var(--s5)}
@media(max-width:940px){.move{grid-template-columns:1fr;padding:var(--s7) 0}}

/* Exclusivity, as a numbered argument rather than four equal cards. */
.only{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;
 margin-top:var(--s7)}
.only .card{display:flex;flex-direction:column;gap:.7rem}
.only .card b{font-family:var(--font-display);font-size:1.08rem;font-weight:600;
 letter-spacing:-.02em}
.only .card p{color:var(--fg-muted);font-size:.94rem}
.only .card i{font-style:normal;font-size:.62rem;letter-spacing:.17em;
 text-transform:uppercase;color:var(--brand);font-weight:700}
@media(max-width:820px){.only{grid-template-columns:1fr}}


/* ------------------------------------------------------------------------
   FAQ, sub business pages, and the group map
   ------------------------------------------------------------------------ */

/* A disclosure list rather than eight open paragraphs, so the section stays
   scannable, and <details> so it works with no script at all and a crawler
   still reads every answer in the markup. */
.faq{display:grid;gap:.2rem}
.q{position:relative;border-radius:var(--r-md);transition:background .28s}
.q+.q::before{content:"";position:absolute;top:0;left:1rem;right:1rem;
 height:1px;background:linear-gradient(90deg,var(--line),transparent 88%)}
.q summary{list-style:none;cursor:pointer;padding:1.15rem 3rem 1.15rem 1rem;
 font-weight:600;font-size:1rem;font-family:var(--font-display);
 letter-spacing:-.02em;position:relative}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"";position:absolute;right:1.15rem;top:1.45rem;
 width:.6rem;height:.6rem;border-right:2px solid var(--brand);
 border-bottom:2px solid var(--brand);transform:rotate(45deg);
 transition:transform .3s}
.q[open] summary::after{transform:rotate(-135deg)}
.q:hover{background:var(--brand-tint)}
.q p{padding:0 3rem 1.3rem 1rem;color:var(--fg-muted);font-size:.95rem;
 max-width:64ch;margin:0}

.bizhero{padding-top:8.5rem}
.crumb{display:flex;gap:.5rem;align-items:center;font-size:.78rem;
 color:var(--fg-muted);margin-bottom:var(--s5);flex-wrap:wrap}
.crumb a{color:var(--fg-muted);text-decoration:none}
.crumb a:hover{color:var(--brand)}
.bizdom{display:block;margin-bottom:var(--s3);color:var(--brand);
 font-weight:700}
.bizhero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:18ch}
.bizhero .lede{max-width:52ch}
.bizbody{color:var(--fg-muted);font-size:1rem;max-width:62ch}
.rels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;
 margin-top:var(--s6)}
.relcard{text-decoration:none;display:flex;flex-direction:column;gap:.6rem;
 color:var(--fg)}
.relcard .ico{color:var(--brand);width:1.5rem;height:1.5rem}
.relcard b{font-family:var(--font-display);font-size:1.05rem;font-weight:600;
 letter-spacing:-.02em}
.relcard span{color:var(--fg-muted);font-size:.93rem}
@media(max-width:820px){.rels{grid-template-columns:1fr}}

/* The map. The h2 here is a LABEL for a group of links, not a section
   heading, so it is overridden off the kit's display scale deliberately.
   It stays an h2 because the document outline is what a screen reader and a
   crawler read, and four unlabelled lists of links is not an outline. */
.treegroup{margin-top:var(--s8)}
.treegroup h2{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
 color:var(--fg-muted);font-family:var(--font-body);font-weight:700;
 margin:0 0 var(--s4);line-height:1.4;max-width:none}
.treelist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:.2rem 1.6rem}
.treeitem{position:relative;display:block;text-decoration:none;
 padding:.95rem 1rem;border-radius:var(--r-md);color:var(--fg);
 transition:background .28s,transform .28s}
.treeitem b{display:block;font-size:.97rem;font-weight:600;
 font-family:var(--font-display);letter-spacing:-.02em}
.treeitem .dom{display:block;margin-top:.2rem;font-size:.62rem;
 letter-spacing:.16em;text-transform:uppercase;color:var(--brand);
 font-weight:700}
.treeitem > span:last-child{display:block;margin-top:.35rem;
 color:var(--fg-muted);font-size:.87rem}
.treeitem:hover{background:var(--brand-tint);transform:translateX(4px)}
@media(max-width:900px){.treelist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.treelist{grid-template-columns:1fr}}

/* ------------------------------------------------------------------------
   The headline's word by word entrance
   ------------------------------------------------------------------------
   Each word sits in its own clipping box so it can rise from behind the line
   above rather than fading in. One block fading is a single event that a
   reader who looks up half a second late misses completely; nine words is
   nine events.

   The colour rule matters as much as the mask. The base stylesheet carries
   `.h1 span{color:var(--a)}` from when the headline held exactly one
   highlighted span, and wrapping every word in a span hands that rule the
   entire sentence. It has done exactly that twice now, once in the mockup and
   once again here when these rules were left behind in the port. Two classes
   beat one class and one element, so this wins, and only the word actually
   marked .hi is allowed to take the accent.
   ------------------------------------------------------------------------ */
.h1 .wm{display:inline-block;overflow:hidden;vertical-align:top;
 color:inherit;padding-bottom:.16em;margin-bottom:-.16em}
.h1 .w{display:inline-block;color:var(--fg)}
.h1 .w.hi{color:var(--brand)}

/* ------------------------------------------------------------------------
   Dark.
   ------------------------------------------------------------------------
   The render gate caught this as white on white across three pages, and the
   cause is worth writing down: the kit emits its own prefers-color-scheme
   block that remaps the ink tokens and forces button text to the inverted
   plane, which is correct for the four reading sites and wrong for a design
   that brings its own palette. Appending after it is not enough on its own,
   because the kit's rule carries !important.

   This is also the payoff for the three layer tokens. Only the SEMANTIC layer
   is redefined below. Not one component rule changes, because no component
   rule names a colour. Every pair here is measured:

     fg on bg          17.8:1      muted on bg        8.94:1
     brand as text     6.76:1      fg on card         16.7:1
     white on button   5.91:1, unchanged in both modes
   ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root{
    --bg:#0a0d16; --bg-raise:#121729; --bg-invert:#161d33;
    --fg:#f2f5fc; --fg-muted:#a5b0c8; --fg-invert:#f2f5fc;
    --fg-invert-muted:#a5b0c8;
    --brand:#6f93ff; --brand-strong:#8fabff;
    --brand-tint:rgba(111,147,255,.14); --brand-edge:rgba(111,147,255,.42);
    --line:rgba(242,245,252,.14); --line-invert:rgba(242,245,252,.16);
    --surface:#121729; --nav-bg:rgba(18,23,41,.72);
    --field-bg:#0f1424; --field-line:rgba(242,245,252,.2);
    --card-bg:#121729;
    --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:0 10px 24px rgba(0,0,0,.45);
    --sh-3:0 30px 60px rgba(0,0,0,.4);
    --sh-lift:0 16px 32px rgba(111,147,255,.2),0 42px 80px rgba(0,0,0,.5);
    /* The older half of the stylesheet still reads these names. */
    --g:#0a0d16; --r:#121729; --ink:#f2f5fc; --m:#a5b0c8;
    --a:#6f93ff; --a2:#8fabff; --deep:#161d33; --glass:rgba(18,23,41,.72);
  }
  body{background:var(--bg);color:var(--fg)}
  .tint{background:linear-gradient(180deg,#0d1120,#121729)}
  .tint::before{opacity:.32}
  /* The button keeps the solid cobalt in both modes: white on #1b4dff is
     5.91:1 either way, and a button that changes colour with the system
     theme stops looking like the same button. The kit's rule forces the
     inverted plane onto it with !important, so this has to shout back. */
  /* The kit's dark rule is `.btn:not(.btn-ghost):not(.btn-outline)` with
     !important, which is specificity 0,3,0. A bare `.btn` with !important is
     0,1,0 and loses, so this matched the shape and added a root to clear it.
     Shouting louder is not enough; you have to shout at the same pitch. */
  :root .btn:not(.btn-ghost):not(.btn-outline),
  :root .nav .cta,:root .callbar a,:root form .btn{
    background:#1b4dff!important;color:#fff!important}
  :root a.skip{background:#1b4dff!important;color:#fff!important}
  :root .btn:not(.btn-ghost):not(.btn-outline) span,
  :root form .btn span{color:#fff!important}
  :root .btn:not(.btn-ghost):hover,:root .nav .cta:hover{
    background:#3b6bff!important}
  .pick[aria-selected="true"]{background:#1b4dff;color:#fff}
  .pick[aria-selected="true"] i,.pick[aria-selected="true"] .ico{color:#fff}
  .node.on .dot,.stop.on::before{background:#1b4dff}
  .node .dot{background:var(--surface);color:var(--fg-muted)}
  .stop::before{background:var(--surface)}
  .cost,.npwrap,.sitefoot,.pickfoot{background:#161d33}
  .marq{background:#161d33}
  .stack span{background:rgba(242,245,252,.08);color:#c8d1e6}
  .socials a{background:rgba(242,245,252,.1)}
  .idx{color:rgba(242,245,252,.06)}
  .tint .idx{color:rgba(111,147,255,.12)}
  .who img,.plate,.shot{box-shadow:0 18px 44px rgba(0,0,0,.55)}
  .band::after{background:linear-gradient(180deg,rgba(6,9,18,.7),rgba(6,9,18,.85))}
}