/* ═══════════════════════════════════════════════════════════════
   SECURE23 · VARIANT D
   Dark ground, real brand teal, Schibsted Grotesk display.

   Surface vocabulary, deliberately varied so the page does not
   read as one card repeated eight times:
     · panel     the walkthrough teaser, one gradient panel
     · offer     the three service cards, the richest treatment
     · flat      testimonials, solid surface, ruled internally
     · bare      the lexicon, people, secondary logos: rules only
     · well      the contact form, lifted above its section
   Sections change ground with a vertical fade, never a hard rule.
   Hairlines are neutral. Teal is an accent, not a wash.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg: #010A0D;
  --s0: #030F13;
  --s1: #061319;
  --s2: #0A1D24;
  --s3: #102C34;

  --line:  rgba(226,240,243,.085);
  --line2: rgba(226,240,243,.155);
  --line3: rgba(226,240,243,.26);
  --line-b: rgba(47,196,212,.30);

  --fg:  #E8F3F5;
  --fg2: #A2B8BD;
  --fg3: #7A9198;

  --brand:      #0E99A8;
  --brand-hi:   #2FC4D4;
  --brand-deep: #0A6E79;
  --brand-wash: rgba(14,153,168,.13);

  --alert:      #FF7A55;
  --alert-wash: rgba(255,122,85,.12);

  --disp: "Instrument Sans", "Figtree", system-ui, sans-serif;
  --disp-vf: "wdth" 100;
  --disp-w: 700;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut: clamp(20px, 4.4vw, 72px);
  --max: 1280px;      /* the rail everything aligns to */
  --max-lex: 1040px;  /* prose-led blocks stop short of the rail */
  --top: 74px;
  --fade: clamp(72px, 8.5vw, 150px);   /* how far a section takes to change ground */

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;

  --e-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* alternate display faces, switchable live with ?face=… */
html[data-face="schibsted"] {
  --disp: "Schibsted Grotesk", system-ui, sans-serif;
  --disp-vf: normal;
  --disp-w: 700;
}
html[data-face="geist"] {
  --disp: "Geist", system-ui, sans-serif;
  --disp-vf: normal;
  --disp-w: 650;
}
html[data-face="bricolage"] {
  --disp: "Bricolage Grotesque", system-ui, sans-serif;
  --disp-vf: "wdth" 100, "opsz" 40;
  --disp-w: 600;
}
html[data-face="fraunces"] {
  --disp: "Fraunces", Georgia, serif;
  --disp-vf: "SOFT" 22, "WONK" 0;
  --disp-w: 500;
}

*, *::before, *::after { box-sizing: border-box; }
/* clip rather than hidden: the aurora and the plate are both allowed to
   run past the rail, and hidden would turn these into scroll containers,
   which quietly breaks the sticky header */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.66;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote { margin: 0; }
ul,ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--brand); color: #011016; }

.vh { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip { position:absolute; left:-9999px; top:0; z-index:300; background:var(--brand);
        color:#011016; padding:13px 18px; font:600 13px/1 var(--sans); }
.skip:focus { left:12px; top:12px; }
:focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 3px; border-radius: 4px; }

/* ─────────────────────── type primitives ──────────────────── */

.stop__time, .base__meta, .ifwe__k, .note__k,
.offer__k b, .offer__k span, .offer__out span, .lex__k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* the section kicker: an accent label, no dash, no dot, no chip */
.kicker {
  display: block;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--brand-hi); margin-bottom: 16px;
}

.disp {
  font-family: var(--disp); font-weight: var(--disp-w);
  font-optical-sizing: auto; font-variation-settings: var(--disp-vf);
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance;
}
.disp em { font-style: normal; color: var(--brand-hi); }
.disp--sm { font-size: clamp(2.05rem, 3.5vw, 3rem); letter-spacing: -0.032em; }

.h2 {
  font-family: var(--disp); font-weight: var(--disp-w);
  font-variation-settings: var(--disp-vf);
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
  line-height: 1.08; letter-spacing: -0.032em; text-wrap: balance; max-width: 22ch;
}
.h3 {
  font-family: var(--disp); font-weight: var(--disp-w);
  font-variation-settings: var(--disp-vf);
  font-size: clamp(1.35rem, 2vw, 1.72rem);
  line-height: 1.12; letter-spacing: -0.026em; margin-bottom: 16px; text-wrap: balance;
}

.lede { font-size: clamp(1.02rem, 1.2vw, 1.15rem); line-height: 1.62;
        color: var(--fg2); max-width: 46ch; text-wrap: pretty; }
.stand { margin-top: 20px; color: var(--fg2); max-width: 54ch; font-size: 1.02rem;
         text-wrap: pretty; }

/* THE SECTION HEAD
   Everything on this page is left aligned to the rail, and the head
   stacks: kicker, statement, then the qualification directly under it.
   One left edge, one reading order, no jump across the page. */
.head { display: grid; gap: clamp(14px, 1.6vw, 20px); justify-items: start; }
.head .stand { margin-top: 0; max-width: 52ch; }
.head .h2 { max-width: 19ch; }

/* ───────────────────────── top bar ────────────────────────── */

/* The bar sits in the flow with no ground of its own, so the aurora
   carries straight up behind it and the page has one continuous sky
   rather than a lid across the top of it. */
.top { position: relative; z-index: 100; height: var(--top); background: none; }
.top__in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut);
           height: 100%; display: flex; align-items: center; gap: 30px; }
.top__mark img { width: 132px; height: auto; }
.top__nav { display: none; margin-left: auto; gap: 30px; }
@media (min-width: 1020px) { .top__nav { display: flex; } }
.top__nav a { font-size: 15px; font-weight: 500; color: var(--fg2);
              letter-spacing: -0.012em; padding: 8px 0; position: relative;
              transition: color .2s ease; }
.top__nav a::after { content:""; position:absolute; left:0; right:100%; bottom:2px;
  height:1.5px; background: var(--brand-hi); transition: right .4s var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .top__nav a:hover { color: var(--fg); }
  .top__nav a:hover::after { right: 0; }
}
.top__nav a.on { color: var(--fg); }
.top__nav a.on::after { right: 0; }
.top__cta {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #23B4C3, #0C8C9B);
  color: #00171C; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.012em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.44),
              inset 0 -1px 0 rgba(0,22,27,.28),
              0 1px 1px rgba(0,0,0,.34);
  transition: background .24s ease, transform .16s var(--e-out), box-shadow .24s ease;
}
@media (min-width: 1020px) { .top__cta { margin-left: 0; } }
@media (hover: hover) and (pointer: fine) {
  .top__cta:hover {
    background:
      linear-gradient(180deg, rgba(255,255,255,.23), rgba(255,255,255,0) 48%),
      linear-gradient(180deg, #2CC0CF, #0F9BAB);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.54),
                inset 0 -1px 0 rgba(0,22,27,.3),
                0 3px 8px -3px rgba(0,0,0,.55);
  }
}
.top__cta:active { transform: translateY(0);
  box-shadow: inset 0 2px 5px rgba(0,22,27,.38), inset 0 1px 0 rgba(255,255,255,.14); }

.burger { margin-left: 8px; width: 44px; height: 44px; flex: none;
          display: grid; place-content: center; gap: 5px;
          background: none; border: 0; cursor: pointer; padding: 0; }
@media (min-width: 1020px) { .burger { display: none; } }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--fg);
               border-radius: 1px; transition: transform .3s var(--e-out); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.m-nav { border-top: 1px solid var(--line); background: var(--s1);
         padding: 8px var(--gut) 20px; display: grid; }
/* an author display value outranks the UA rule for [hidden], and this
   panel would otherwise paint an empty slab over the hero */
.m-nav[hidden] { display: none; }
@media (min-width: 1020px) { .m-nav { display: none !important; } }
.m-nav a {
  display: flex; align-items: baseline; gap: 12px; padding: 15px 0;
  font-family: var(--disp); font-weight: var(--disp-w);
  font-variation-settings: var(--disp-vf);
  font-size: 1.35rem; letter-spacing: -0.028em;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--e-out), transform .4s var(--e-out);
}
.m-nav a:last-child { border-bottom: 0; }
.m-nav.open a { opacity: 1; transform: none; }
.m-nav.open a:nth-child(1) { transition-delay: 30ms; }
.m-nav.open a:nth-child(2) { transition-delay: 70ms; }
.m-nav.open a:nth-child(3) { transition-delay: 110ms; }
.m-nav.open a:nth-child(4) { transition-delay: 150ms; }
.m-nav.open a:nth-child(5) { transition-delay: 190ms; }
.m-nav.open a:nth-child(6) { transition-delay: 230ms; }
.m-nav i { font-family: var(--mono); font-style: normal; font-size: 10.5px;
           letter-spacing: .12em; color: var(--brand-hi); }
@media (max-width: 1019px) { .top__in { gap: 10px; } .top__mark img { width: 118px; } }
/* the call to action is what pushes the right of the bar out, so when it
   goes the burger has to take over that job or it lands on the logo */
@media (max-width: 379px) {
  .top__cta { display: none; }
  .burger { margin-left: auto; }
}

/* ─────────────────────────── buttons ──────────────────────── */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border-radius: 999px;
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.014em;
  border: 1px solid transparent; cursor: pointer;
  transition: filter .24s ease, background-color .24s ease, color .24s ease,
              border-color .24s ease, box-shadow .3s var(--e-out),
              transform .16s var(--e-out);
}
.btn svg { width: 17px; height: 17px; flex: none;
           transition: transform .34s var(--e-out); }

/* The primary button is a solid object, not a light source. Two stacked
   gradients give it a body and a top sheen, a bright inner top edge and
   a dark inner bottom edge give it thickness, and the drop shadow is
   neutral and tight rather than a coloured halo. It presses in on
   :active, which is what a real control does. */
.btn--fill {
  background:
    linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #23B4C3, #0C8C9B);
  color: #00171C;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -1px 0 rgba(0,22,27,.30),
    0 1px 1px rgba(0,0,0,.38),
    0 8px 18px -10px rgba(0,0,0,.78);
}
.btn--out {
  background: linear-gradient(180deg, rgba(226,240,243,.075), rgba(226,240,243,.025));
  border-color: rgba(226,240,243,.18); color: var(--fg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@media (hover: hover) and (pointer: fine) {
  .btn--fill:hover {
    background:
      linear-gradient(180deg, rgba(255,255,255,.23), rgba(255,255,255,0) 48%),
      linear-gradient(180deg, #2CC0CF, #0F9BAB);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.56),
      inset 0 -1px 0 rgba(0,22,27,.32),
      0 2px 3px rgba(0,0,0,.36),
      0 14px 26px -12px rgba(0,0,0,.82);
  }
  .btn--out:hover { border-color: rgba(226,240,243,.32);
                    background: linear-gradient(180deg, rgba(226,240,243,.12), rgba(226,240,243,.05));
                    transform: translateY(-1px); }
  .btn:hover svg { transform: translateX(4px); }
}
.btn--fill:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 5px rgba(0,22,27,.4), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn--out:active { transform: translateY(0); }
.btn--wide { width: 100%; }

/* ──────────────────────────── hero ────────────────────────── */

.hero {
  position: relative; isolation: isolate;
  min-height: calc(100svh - var(--top));
  display: grid; grid-template-rows: 1fr auto;
  padding-top: clamp(20px, 2.6vw, 36px);
}

/* The aurora: three soft fields drifting behind everything. Nothing is
   clipped and nothing is blurred, because a blur inside an overflow
   clip leaves a visible straight edge. The gradients fall to zero on
   their own, which is smoother and far cheaper to composite. */
.aurora { position: absolute; inset: -20% -6% -12%; z-index: 0; pointer-events: none; }
.aurora i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.aurora i:nth-child(1) {
  width: 76vw; height: 76vw; max-width: 1100px; max-height: 1100px;
  right: -14vw; top: -6%;
  background: radial-gradient(closest-side,
    rgba(24,176,193,.30), rgba(24,176,193,.13) 42%, transparent 76%);
  animation: drift-a 34s var(--e-out) infinite alternate;
}
.aurora i:nth-child(2) {
  width: 52vw; height: 52vw; max-width: 760px; max-height: 760px;
  right: 12vw; top: 34%;
  background: radial-gradient(closest-side,
    rgba(47,196,212,.19), rgba(47,196,212,.07) 44%, transparent 78%);
  animation: drift-b 42s var(--e-out) infinite alternate;
}
.aurora i:nth-child(3) {
  width: 70vw; height: 52vw; max-width: 980px; max-height: 720px;
  left: -22vw; bottom: -6%;
  background: radial-gradient(closest-side,
    rgba(34,92,150,.26), rgba(34,92,150,.09) 46%, transparent 78%);
  animation: drift-c 50s var(--e-out) infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(-6%, 5%, 0) scale(1.1); } }
@keyframes drift-b { to { transform: translate3d(8%, -7%, 0) scale(.92); } }
@keyframes drift-c { to { transform: translate3d(7%, -4%, 0) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }

.hero__in {
  position: relative; z-index: 1; align-self: center;
  max-width: var(--max); margin: 0 auto; width: 100%; padding: 0 var(--gut);
  display: grid; gap: clamp(20px, 2.2vw, 36px); align-items: center;
}
@media (min-width: 1020px) {
  .hero__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
.hero__copy { max-width: 35rem; }
.hero .disp {
  font-size: clamp(2.4rem, 3.75vw, 3.75rem);
  line-height: 1.04; letter-spacing: -0.036em;
  margin-bottom: 24px;
}
.hero .lede { max-width: 44ch; }
.hero__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* THE PLATE
   The layout box is square; the bitmap is bigger than the box on every
   side that has room. Threats therefore launch from beyond the visible
   composition and fly in, and a callout has somewhere to sit without
   being sheared off. The left bleed stays small so nothing ever lands
   on top of the headline. */
.plate { position: relative; width: 100%; }
.plate__cv {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  max-height: calc(100svh - var(--top) - 152px);
  margin-inline: auto;
  touch-action: manipulation;
}
@media (min-width: 1020px) {
  /* The column may run past the rail, but never past the viewport, or
     the bitmap gets clipped by the page and the colour cuts off square.
     The bitmap then runs wider still, asymmetrically: a generous margin
     on the right where callouts want to go, a small one on the left so
     nothing can ever land on the headline. Since the drawing only fills
     the middle of it, threats launch from beyond the visible picture. */
  .plate { --over: clamp(0px, calc((100vw - var(--max)) / 2 - 14px), 72px);
           width: calc(100% + var(--over));
           margin-right: calc(-1 * var(--over));
           padding-bottom: 26px; }
  .plate__cv { --bl: 40px; --br: calc(var(--gut) - 10px);
               width: calc(100% + var(--bl) + var(--br));
               margin-left: calc(-1 * var(--bl)); margin-right: 0;
               max-height: calc(100svh - var(--top) - 178px);
               cursor: crosshair; }
}
/* NARROW SCREENS
   The five names cannot live inside the rings at this size: the gap
   between two rings is about twenty pixels and "Applications" is eighty
   wide, so they stacked into an unreadable column down the middle. The
   plate keeps the drawing and the key moves out of the canvas into real
   type underneath it, where it can be read at any size. The plate also
   runs edge to edge, since it is no longer sharing the width. */
@media (max-width: 1019px) {
  .plate { width: calc(100% + 2 * var(--gut)); margin-inline: calc(-1 * var(--gut)); }
  .plate__cv { max-height: min(62vh, 460px); }
}

.plate__key { display: none; }
@media (max-width: 1019px) {
  .plate__key {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 9px clamp(14px, 4vw, 26px); padding: 6px var(--gut) 0;
  }
  .plate__key li { display: inline-flex; align-items: center; gap: 8px;
                   font-size: 12.5px; color: var(--fg2); letter-spacing: -0.006em; }
  /* the marker matches the weight the ring is drawn at, so the key reads
     from the outside in exactly as the diagram does */
  .plate__key li::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
    border: 1.2px solid var(--brand-hi);
  }
  .plate__key li:nth-child(1)::before { opacity: .42; }
  .plate__key li:nth-child(2)::before { opacity: .56; }
  .plate__key li:nth-child(3)::before { opacity: .7; }
  .plate__key li:nth-child(4)::before { opacity: .84; }
  .plate__key li:last-child { color: var(--fg); }
  .plate__key li:last-child::before { background: var(--brand-hi); }
}

/* the figures, pinned to the foot of the first screen: four facts on
   one rail, deliberately quiet */
/* width is stated rather than left to stretch: auto inline margins turn
   off a grid item's stretch, so without it the strip shrank to fit its
   own content and stopped aligning with the rest of the page */
.meters {
  position: relative; z-index: 1; align-self: end;
  width: 100%; max-width: var(--max); margin: clamp(16px, 2vw, 28px) auto 0;
  padding: 18px var(--gut) 20px;
}
/* a hairline that fades out at both ends, so the strip is anchored
   without cutting the page in half */
.meters::before {
  content: ""; position: absolute; left: var(--gut); right: var(--gut); top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line2) 12%,
                              var(--line2) 88%, transparent);
}
.meters__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; }
/* each figure takes the width it needs and the slack goes between them,
   so no label is torn in half by an even split */
@media (min-width: 700px) {
  .meters__row { grid-template-columns: repeat(4, auto); justify-content: space-between;
                 gap: 14px clamp(20px, 3vw, 52px); }
}

/* stacked on narrow screens: side by side, an even two column split
   tore the longer labels onto a second, ragged line */
.meter { display: grid; gap: 2px; min-width: 0; }
@media (min-width: 700px) {
  .meter { display: flex; align-items: baseline; gap: 10px; }
  .meter span { white-space: nowrap; }
}
.meter b {
  font-family: var(--mono); font-weight: 500; font-size: 17px;
  letter-spacing: .01em; color: var(--fg); font-variant-numeric: tabular-nums;
  display: inline-block;
}
.meter span { font-size: 12px; color: var(--fg3); line-height: 1.35;
              letter-spacing: -0.002em; }

/* ───────────────────── scene illustrations ────────────────── */

.scene__svg { width: 100%; height: auto; display: block; }
.scene__svg .f-1 { fill: var(--s2); }
.scene__svg .f-2 { fill: var(--s1); }
.scene__svg .f-3 { fill: var(--s3); }
.scene__svg .s-ink  { stroke: var(--line2); stroke-width: 1.5; }
.scene__svg .s-hair { stroke: var(--line2); stroke-width: 1.25; fill: none; }
.scene__svg .s-acc  { stroke: var(--brand-hi); stroke-width: 2; }
.scene__svg .dashed { stroke-dasharray: 5 6; }
.scene__svg .d-2 { fill: var(--line3); }
.scene__svg .d-3 { fill: var(--fg3); }
.scene__svg .d-4 { fill: var(--line3); }
.scene__svg .f-acc { fill: var(--brand-wash); stroke: var(--brand); stroke-width: 1.75; }
.scene__svg .acc-solid { fill: var(--brand); }
.scene__svg .acc-bar { fill: var(--brand-hi); }
.scene__svg .acc-bar--w { fill: var(--brand-hi); opacity: .42; }
.scene__svg .s-alert { stroke: var(--alert); stroke-width: 2; }
.scene__svg .f-alert { fill: var(--alert-wash); stroke: var(--alert); stroke-width: 1.75; }
.scene__svg .f-alert-solid { fill: var(--alert); }
.scene__svg .alert-dot { fill: var(--alert); }
.scene__svg .alert-bar { fill: var(--alert); }
.scene__svg .alert-bar--w { fill: var(--alert); opacity: .42; }
.scene__svg .alert-knock { fill: #2A0D05; }
.scene__svg .t-mono { font-family: var(--mono); font-size: 11px; letter-spacing: .07em;
                      fill: var(--fg3); text-transform: uppercase; }
.scene__svg .t-alert { fill: var(--alert); }
.scene__svg .cursor { fill: var(--fg); }
.scene__svg .s-ink, .scene__svg .s-acc, .scene__svg .s-hair, .scene__svg .s-alert {
  stroke-linecap: round; stroke-linejoin: round; }

/* ──────────────────────── the walkthrough ─────────────────── */

.wt-head { max-width: var(--max); margin: 0 auto;
           padding: clamp(18px, 2.6vw, 40px) var(--gut) clamp(30px, 4vw, 54px); }
/* the return: a left pointing arrow that leans back on hover, the
   mirror of every forward control on the site */
.btn--back svg { order: -1; }
@media (hover: hover) and (pointer: fine) {
  .btn--back:hover svg { transform: translateX(-4px); }
}
.wt-head .lede { margin-top: 24px; max-width: 54ch; }

.story { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.story--tail { padding-bottom: clamp(40px, 6vw, 90px); }
.story__grid { display: grid; gap: 0; }
@media (min-width: 1080px) {
  .story__grid { grid-template-columns: 264px minmax(0, 1fr);
                 column-gap: clamp(32px, 4vw, 72px); }
}
.story__spacer { display: none; }
@media (min-width: 1080px) { .story__spacer { display: block; } }

.stepper { display: none; }
@media (min-width: 1080px) {
  .stepper {
    display: block; position: sticky; top: 40px;
    align-self: start; padding: 22px 20px 24px;
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--s1);
  }
}
.stepper__k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
              text-transform: uppercase; color: var(--fg3); margin-bottom: 12px; }
.stepper__rail { position: relative; height: 3px; border-radius: 2px;
                 background: var(--line); overflow: hidden; margin-bottom: 20px; }
.stepper__fill { position: absolute; inset: 0 auto 0 0; height: 100%;
                 width: var(--p, 0%); background: var(--brand-hi);
                 border-radius: 2px; transition: width .18s linear; }

.stepper__list { display: grid; gap: 2px; }
.step {
  width: 100%; display: grid; grid-template-columns: 26px minmax(0,1fr);
  align-items: center; gap: 13px; padding: 9px 8px; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer; text-align: left;
  transition: background-color .25s ease;
}
@media (hover: hover) and (pointer: fine) { .step:hover { background: var(--s3); } }
.step__n {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px;
  border: 1px solid var(--line2); color: var(--fg3);
  transition: background-color .3s var(--e-out), border-color .3s ease,
              color .3s ease, transform .3s var(--e-out);
}
.step__t { display: grid; gap: 1px; min-width: 0; }
.step__t b { font-size: 14px; font-weight: 600; letter-spacing: -0.012em;
             color: var(--fg3); transition: color .3s ease; }
.step__t i { font-style: normal; font-family: var(--mono); font-size: 10px;
             letter-spacing: .08em; color: var(--fg3); opacity: .7; }
.step.is-done .step__n { border-color: var(--line-b); color: var(--brand-hi); }
.step.is-done .step__t b { color: var(--fg2); }
.step.is-on { background: var(--brand-wash); }
.step.is-on .step__n { background: var(--brand-hi); border-color: var(--brand-hi);
                       color: #011016; transform: scale(1.06); }
.step.is-on .step__t b { color: var(--fg); }
.step.is-on .step__t i { color: var(--brand-hi); opacity: 1; }

.stops { display: grid; gap: 0; }
.stop { display: grid; gap: clamp(24px, 3vw, 48px); padding: clamp(38px, 5vw, 70px) 0;
        border-top: 1px solid var(--line); align-items: center; }
.stops > .stop:first-child { border-top: none; padding-top: clamp(10px, 2vw, 24px); }
@media (min-width: 760px) {
  .stop { grid-template-columns: minmax(0, 1fr) minmax(250px, .78fr); }
  .stop:nth-child(even) .stop__body { order: 2; }
}
.stop__body { max-width: 54ch; }
.stop__time { color: var(--fg3); margin-bottom: 14px; display: flex;
              align-items: baseline; gap: 9px; }
.stop__time b { color: var(--alert); font-size: 15px; letter-spacing: .02em; }
.stop__body > p { color: var(--fg2); text-wrap: pretty; letter-spacing: -0.006em; }

.ifwe {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line2);
  display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 16px; align-items: start;
}
.ifwe__ico {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  color: var(--brand-hi); background: var(--brand-wash); border: 1px solid var(--line-b);
}
.ifwe__ico svg { width: 17px; height: 17px; }
.ifwe__k {
  font-family: var(--sans) !important; font-size: 13px !important; font-weight: 600;
  letter-spacing: .01em !important; text-transform: none !important;
  color: var(--brand-hi); margin-bottom: 6px;
}
.ifwe p:last-child { font-size: 15.5px; color: var(--fg2); line-height: 1.58;
                     text-wrap: pretty; letter-spacing: -0.006em; }

.interstitial {
  background: linear-gradient(180deg, var(--bg), var(--s1) 26%, var(--s1) 74%, var(--bg));
  padding: clamp(48px, 6vw, 92px) var(--gut); margin: clamp(20px, 3vw, 40px) 0;
}
.interstitial__in { max-width: var(--max); margin: 0 auto;
                    display: grid; gap: clamp(20px, 3vw, 48px); align-items: center; }
@media (min-width: 820px) { .interstitial__in { grid-template-columns: auto minmax(0,1fr); } }
.interstitial__v {
  font-family: var(--disp); font-weight: var(--disp-w);
  font-variation-settings: var(--disp-vf);
  font-size: clamp(3.4rem, 9vw, 7rem); line-height: .88;
  letter-spacing: -0.05em; color: var(--alert); white-space: nowrap;
}
.interstitial__body { max-width: 56ch; display: grid; gap: 14px; }
.interstitial__body > p:first-child {
  font-size: clamp(1.06rem, 1.5vw, 1.28rem); line-height: 1.5;
  color: var(--fg); letter-spacing: -0.01em; text-wrap: pretty;
}
.interstitial__src { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
                     text-transform: uppercase; color: var(--fg3); line-height: 1.7; }

.wt-end { padding: clamp(56px, 7vw, 104px) var(--gut) clamp(40px, 5vw, 72px); }
.wt-end__in { max-width: var(--max); margin: 0 auto; }
.wt-end__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ── the teaser: the one gradient panel on the page ──
   It is given a wide berth on both sides, because it is the one place on
   the page that asks the reader to leave it. */
.teaser { max-width: var(--max); margin: 0 auto; scroll-margin-top: 12px;
          padding: clamp(56px, 8vw, 128px) var(--gut) clamp(64px, 9vw, 148px); }

/* THE LEAD IN
   A thread draws down out of the section above into the top of the panel
   as it comes into view, then the panel rises and the six stops arrive
   one after another. */
.teaser__lead {
  display: block; width: 1px; height: clamp(34px, 5vw, 72px);
  margin: calc(-1 * clamp(44px, 6.4vw, 92px)) auto clamp(10px, 1.4vw, 20px);
  background: linear-gradient(180deg, transparent, var(--brand-hi));
  transform: scaleY(0); transform-origin: top;
  transition: transform 1s var(--e-out) .05s;
}
.teaser__rise.in .teaser__lead { transform: scaleY(1); }
.teaser__stops li { opacity: 0; transform: translateY(9px);
                    transition: opacity .6s var(--e-out), transform .6s var(--e-out); }
.teaser__rise.in .teaser__stops li { opacity: 1; transform: none; }
.teaser__rise.in .teaser__stops li:nth-child(1) { transition-delay: .34s; }
.teaser__rise.in .teaser__stops li:nth-child(2) { transition-delay: .42s; }
.teaser__rise.in .teaser__stops li:nth-child(3) { transition-delay: .50s; }
.teaser__rise.in .teaser__stops li:nth-child(4) { transition-delay: .58s; }
.teaser__rise.in .teaser__stops li:nth-child(5) { transition-delay: .66s; }
.teaser__rise.in .teaser__stops li:nth-child(6) { transition-delay: .74s; }
@media (prefers-reduced-motion: reduce) {
  .teaser__lead { transform: scaleY(1); transition: none; }
  .teaser__stops li { opacity: 1; transform: none; transition: none; }
}

.teaser__card {
  display: grid; gap: clamp(26px, 3.4vw, 56px);
  padding: clamp(26px, 3.2vw, 44px);
  border: 1px solid var(--line2); border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--s2), var(--s1) 58%, var(--bg));
  box-shadow: 0 34px 76px -54px rgba(0,0,0,.95);
  position: relative; overflow: hidden;
  transition: border-color .35s ease, transform .35s var(--e-out);
}
.teaser__card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47,196,212,.5), transparent);
}
@media (min-width: 900px) {
  .teaser__card { grid-template-columns: minmax(0, 1fr) minmax(240px, .58fr);
                  align-items: center; }
}
/* the diagonal only sweeps a card that is wider than it is tall. Stacked,
   it left the top two thirds sitting on the lightest stop. */
@media (max-width: 899px) {
  .teaser__card { background: linear-gradient(180deg, var(--s2), var(--s1) 42%, var(--bg)); }
}
/* the label is long enough to take two lines on a phone, so the control
   becomes a full width bar rather than a pill with the arrow adrift */
@media (max-width: 560px) {
  .teaser__go { display: flex; width: 100%; justify-content: space-between;
                text-align: left; padding: 14px 20px; }
}
/* the whole panel is the link, so the control inside it fills with the
   brand on hover: the card behaves like one big button */
.teaser__go {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  border: 1px solid rgba(226,240,243,.2);
  background: linear-gradient(180deg, rgba(226,240,243,.09), rgba(226,240,243,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  font-size: 15px; font-weight: 600; color: var(--fg); letter-spacing: -0.014em;
  transition: background .3s ease, border-color .3s ease, color .3s ease,
              box-shadow .3s ease;
}
.teaser__go svg { width: 17px; height: 17px; transition: transform .3s var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .teaser__card:hover { border-color: var(--line-b); transform: translateY(-3px); }
  .teaser__card:hover .teaser__go svg { transform: translateX(4px); }
  .teaser__card:hover .teaser__go {
    background:
      linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,0) 46%),
      linear-gradient(180deg, #23B4C3, #0C8C9B);
    border-color: transparent; color: #00171C;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.46),
                inset 0 -1px 0 rgba(0,22,27,.30),
                0 8px 18px -10px rgba(0,0,0,.78);
  }
}
.teaser__stops { display: grid; gap: 0; }
.teaser__stops li { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 14px;
                    padding: 11px 0; border-top: 1px solid var(--line); align-items: baseline; }
.teaser__stops li:first-child { border-top: none; }
.teaser__stops b { font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
                   color: var(--alert); }
.teaser__stops span { font-size: 14.5px; color: var(--fg2); letter-spacing: -0.01em; }

/* ══════════════ NO JARGON · the lexicon ══════════════ */
/* A section that changes ground by fading rather than by a rule. */

/* The reports and the evidence make one argument, so they share one
   ground: the page lifts once at the top of the reports and settles
   once at the foot of the evidence, instead of dipping in between. */
.clear {
  background: linear-gradient(180deg, var(--bg) 0, var(--s0) var(--fade), var(--s0) 100%);
  padding: clamp(70px, 11vw, 178px) var(--gut) clamp(54px, 8vw, 124px);
}
.clear > * { max-width: var(--max); margin-inline: auto; }
.clear__head { margin-bottom: clamp(38px, 4.5vw, 62px); }

/* The index is only six short terms, so it takes only the width six
   short terms need. The translation beside it gets the rest, and the
   whole block stops well short of the rail. */
/* margin-inline is reset because the section centres its children on the
   rail, and this block has to keep the head's left edge */
.lex { display: grid; gap: clamp(26px, 3vw, 40px); align-items: start;
       max-width: 900px; margin-inline: 0 auto; }
@media (min-width: 860px) {
  .lex { grid-template-columns: 232px minmax(0, 1fr);
         column-gap: clamp(40px, 4.5vw, 72px); }
}

.lex__rail { display: grid; gap: 0; align-content: start; counter-reset: lex; }
.lex__t {
  position: relative; width: 100%; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  background: none; border: 0; border-top: 1px solid var(--line);
  padding: 15px 0; font-size: 17px; font-weight: 500;
  color: var(--fg3); letter-spacing: -0.018em; line-height: 1.3; text-align: left;
  transition: color .3s ease;
}
/* the rail doubles as an index, so the wide column reads as structure */
.lex__t::after {
  counter-increment: lex;
  content: counter(lex, decimal-leading-zero);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--fg3); opacity: .55; transition: color .3s ease, opacity .3s ease;
}
.lex__t.is-on::after { color: var(--brand-hi); opacity: 1; }
.lex__rail li:first-child .lex__t { border-top: 0; }
@media (hover: hover) and (pointer: fine) { .lex__t:hover { color: var(--fg2); } }
.lex__t.is-on { color: var(--fg); }
/* the underline is the timer: it fills over the dwell, then moves on */
.lex__t i {
  position: absolute; left: 0; bottom: -1px; display: block;
  height: 1px; width: 0; background: var(--brand-hi);
}

.lex__stage { position: relative; display: grid; }
.lex__slide {
  grid-area: 1 / 1; opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .55s var(--e-out), transform .55s var(--e-out);
}
.lex__slide.is-on { opacity: 1; transform: none; }
/* Both halves sit flush to the same left edge. Nothing is indented and
   nothing points: the rule between them does the translating, and the
   change of face and size does the arguing. */
.lex__k { color: var(--fg3); letter-spacing: .16em; font-size: 10.5px; }
.lex__k--us { color: var(--brand-hi); }
.lex__was {
  margin-top: 12px; font-family: var(--mono);
  font-size: clamp(13px, 1.15vw, 14.5px); line-height: 1.62;
  color: var(--fg3); max-width: 42ch; letter-spacing: -0.004em;
}
.lex__rule {
  display: block; height: 1px; width: 100%; max-width: 30rem;
  margin: clamp(22px, 2.4vw, 30px) 0;
  background: linear-gradient(90deg, var(--brand-hi) 0 42px, var(--line) 42px);
}
.lex__is {
  margin-top: 13px; font-family: var(--disp); font-weight: 600;
  font-variation-settings: var(--disp-vf);
  font-size: clamp(1.3rem, 1.95vw, 1.72rem); line-height: 1.22;
  letter-spacing: -0.03em; color: var(--fg); max-width: 22ch; text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
  .lex__slide { transition: opacity .2s linear; transform: none; }
}

/* ──────────────────────── how we help ─────────────────────── */

/* THE THREE WAYS IN
   Three upright cards, as before, but carrying less: the head rule and
   the rule between every list item are gone, so a card has exactly one
   edge, and the outcome has moved out from under the border to sit
   below the card as the conclusion drawn from it. The gutters are
   tighter than the page default so the columns themselves are wider. */

.help { max-width: var(--max); margin: 0 auto;
        padding: clamp(70px, 11vw, 178px) var(--gut) clamp(48px, 6vw, 96px); }
.help__head { margin-bottom: clamp(38px, 4.5vw, 62px); }

.offers { display: grid; gap: clamp(14px, 1.2vw, 20px); }
.offer { display: flex; flex-direction: column; }
@media (min-width: 900px) {
  /* the three offers share two rows rather than each managing its own
     height, so every card ends on the same line and every outcome
     starts on the same line however long the sentences run */
  .offers { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr auto; }
  .offer { grid-row: span 2; display: grid; grid-template-rows: subgrid; }
}
.offer__card {
  flex: 1; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(168deg, var(--s2) 0%, var(--s1) 56%, var(--s0) 100%);
  padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 28px);
  transition: border-color .35s ease, transform .35s var(--e-out), box-shadow .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .offer:hover .offer__card { transform: translateY(-3px); border-color: var(--line2);
                              box-shadow: 0 20px 48px -20px rgba(0,0,0,.7); }
}

/* glyph, number and duration on one line. No rule under it: the change
   of size to the heading already says the head is over. */
.offer__k { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.offer__glyph { display: block; color: var(--brand-hi); flex: none; margin-right: 1px; }
.offer__glyph svg { width: 26px; height: 26px; display: block; }
.offer__k b { color: var(--brand-hi); font-weight: 400; letter-spacing: .14em; }
.offer__k i { width: 3px; height: 3px; border-radius: 50%; flex: none;
              background: var(--line3); }
.offer__k span { color: var(--fg3); white-space: nowrap; }

.offer h3 {
  font-family: var(--disp); font-weight: var(--disp-w);
  font-variation-settings: var(--disp-vf);
  font-size: clamp(1.5rem, 2.05vw, 1.85rem); letter-spacing: -0.032em;
  line-height: 1.06; margin-bottom: 12px; text-wrap: balance;
}
.offer__lede { color: var(--fg2); font-size: 15.5px; line-height: 1.56;
               text-wrap: pretty; letter-spacing: -0.006em; }

/* space between the items rather than a rule between them */
.offer__list { margin-top: 24px; display: grid; gap: 19px; }
.offer__list li {
  display: grid; grid-template-columns: 17px minmax(0, 1fr);
  column-gap: 12px; row-gap: 3px;
}
.offer__list .tick {
  width: 14px; height: 14px; color: var(--brand-hi); grid-row: 1 / span 2;
  margin-top: 4px; justify-self: start; transition: transform .3s var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .offer:hover .offer__list .tick { transform: scale(1.12); }
}
.offer__list b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.014em;
                 grid-column: 2; line-height: 1.4; }
.offer__list span { font-size: 13.5px; color: var(--fg3); line-height: 1.45;
                    grid-column: 2; }

/* outside the card, aligned to its inner edge */
.offer__out {
  display: grid; gap: 7px; align-content: start; margin: 15px 0 0;
  padding: 0 clamp(20px, 2vw, 28px);
  font-size: 14.5px; line-height: 1.5; color: var(--fg2);
  letter-spacing: -0.008em; text-wrap: pretty;
}
@media (min-width: 900px) { .offer__out { margin-top: 0; } }
.offer__out span { color: var(--brand-hi); letter-spacing: .13em; }

/* ─────────────────────────── evidence ─────────────────────── */

.evidence {
  background: linear-gradient(180deg,
    var(--s0) 0, var(--s0) calc(100% - var(--fade)), var(--bg) 100%);
  padding: clamp(54px, 8vw, 124px) var(--gut) clamp(70px, 11vw, 178px);
}
.evidence > * { max-width: var(--max); margin-inline: auto; }
.evidence__head { margin-bottom: clamp(34px, 4vw, 54px); }

/* Client marks arrive at eight different aspect ratios, from square to
   4:1. Capping them all at one height makes the square ones twice the
   optical weight of the wide ones, so each shape band gets its own cap. */
.mk { width: auto; height: auto; max-height: var(--mh, 44px); max-width: 100%;
      object-fit: contain; object-position: left center;
      filter: grayscale(1) brightness(0) invert(1); opacity: .84;
      transition: opacity .3s ease; }
.mk--a { --mh: 86px; }   /* 1.0 to 1.4 : 1 */
.mk--b { --mh: 74px; }   /* 1.4 to 1.8 : 1 */
.mk--c { --mh: 56px; }   /* 2.3 to 2.9 : 1 */
.mk--d { --mh: 46px; }   /* 3.0 : 1 and wider */

/* THE RAILS
   Both the quotes and the remaining marks run as one continuous loop.
   The track holds N identical sets end to end and slides by exactly one
   set width, so the moment it resets it is already showing the same
   thing and there is no seam. The ends of the window fade rather than
   cut, so nothing is chopped in half at the edge of the screen. */
.rail {
  --rail-fade: clamp(20px, 6vw, 130px);
  max-width: none;
  width: calc(100% + 2 * var(--gut));
  margin-inline: calc(-1 * var(--gut));
  overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--rail-fade),
                      #000 calc(100% - var(--rail-fade)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--rail-fade),
                      #000 calc(100% - var(--rail-fade)), transparent);
}
.rail__track {
  display: flex; width: max-content;
  animation: railRun var(--rail-dur, 60s) linear infinite;
}
.rail__set { display: flex; flex: none; }
@keyframes railRun { to { transform: translateX(calc(-100% / var(--rail-sets, 2))); } }
@media (hover: hover) and (pointer: fine) {
  /* reading is not a race */
  .rail:hover .rail__track { animation-play-state: paused; }
}
/* with motion off it becomes an ordinary swipeable strip, one set only */
@media (prefers-reduced-motion: reduce) {
  .rail { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; }
  .rail__track { animation: none; }
  .rail__set[aria-hidden="true"] { display: none; }
  .rail__set > li { scroll-snap-align: center; }
}

.rail--voices .rail__set { gap: 16px; padding-right: 16px; align-items: stretch; }
.rail--voices .rail__set > li { flex: none; display: flex;
                                width: clamp(288px, 46vw, 620px); }
.rail--voices .voice { flex: 1; }

/* the marks that carry no quote: no card, no border, just the marks */
.rail--marks { margin-top: clamp(30px, 3.4vw, 52px); }
.rail--marks .rail__set { align-items: center;
                          gap: clamp(46px, 6vw, 100px);
                          padding-right: clamp(46px, 6vw, 100px); }
.rail--marks .rail__set > li { flex: none; display: grid; place-items: center; }
.rail--marks .mk { opacity: .58; object-position: center; }
/* the second rail runs the other way, so the two do not read as one belt */
.rail--marks .rail__track { animation-direction: reverse; }

.voice {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--s1);
  padding: clamp(28px, 3vw, 42px);
  transition: border-color .35s ease, background-color .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .voice:hover { border-color: var(--line2); background: var(--s2); }
  .voice:hover .mk { opacity: 1; }
}

/* THE MARK, TOP RIGHT
   Above a card width of about five hundred it floats, so the quote starts
   beside it and then runs the full width underneath. Below that there is
   not enough room left for a line of a quote, so it stacks instead. The
   switch is on viewport width because the card width is derived from it.
   Only where the mark carries no name of its own does the name appear:
   three of these four are wordmarks, and setting the name again beside
   them was redundant. */
.voice__top { display: flow-root; margin-bottom: clamp(26px, 2.8vw, 36px); }
.voice__mk { display: block; margin: 0 0 22px; }
.voice__mk b { display: block; max-width: 26ch; margin: 12px 0 0;
               font-size: 12.5px; font-weight: 600; line-height: 1.35;
               letter-spacing: -0.012em; color: var(--fg2); }
@media (min-width: 1100px) {
  .voice__mk { float: right; max-width: 40%; text-align: right;
               margin: 2px 0 16px clamp(20px, 2.4vw, 30px); }
  .voice__mk .mk { margin-left: auto; }
  .voice__mk b { max-width: 15ch; margin-left: auto; }
}

.voice__q p {
  font-family: var(--disp); font-weight: 500;
  font-variation-settings: var(--disp-vf);
  font-size: clamp(1.2rem, 1.62vw, 1.5rem); line-height: 1.36;
  letter-spacing: -0.026em; color: var(--fg); text-wrap: pretty;
}
/* once the card is wide the quote stops short of the far edge, so it
   keeps a quotation's measure rather than running the full card */
@media (min-width: 1120px) { .voice__q p { max-width: 30ch; } }
/* both marks, set inline so the quote reads as a quotation rather than
   as a paragraph with an ornament above it */
.voice__q p::before { content: "\201C"; color: var(--line3); }
.voice__q p::after  { content: "\201D"; color: var(--line3); }

/* stacked rather than split: with the badges pushed right, every one of
   the four cards wrapped anyway, so half of them read as a split row and
   half as two rows. Two rows, always. */
.voice__foot {
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line);
  display: grid; gap: 14px; justify-items: start;
}
.voice__by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; }
.voice__by b { font-size: 16.5px; font-weight: 600; letter-spacing: -0.018em; color: var(--fg); }
.voice__by span { font-size: 14px; color: var(--fg3); letter-spacing: -0.006em; }

/* the work carried out, as badges rather than a run of small capitals:
   they name the same services the offers above are named with */
.voice__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.voice__tags li {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px;
  border: 1px solid var(--line2); border-radius: 999px;
  background: rgba(226,240,243,.035);
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg2); white-space: nowrap;
  transition: border-color .3s ease, color .3s ease, background-color .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .voice:hover .voice__tags li { border-color: var(--line-b); color: var(--brand-hi);
                                 background: var(--brand-wash); }
}

/* ───────────────────────── who turns up ───────────────────── */

.who { max-width: var(--max); margin: 0 auto;
       padding: clamp(70px, 11vw, 178px) var(--gut); }
.who__head { margin-bottom: clamp(30px, 3.5vw, 44px); }

/* no cards here. Rules and generous space read as people, not product. */
.crew { display: grid; gap: 0; }
@media (min-width: 940px) { .crew { grid-template-columns: repeat(2, 1fr);
                                    column-gap: clamp(40px, 5vw, 96px); } }

.person {
  display: grid; grid-template-columns: auto minmax(0,1fr);
  gap: clamp(20px, 2.4vw, 32px); align-items: start;
  padding: clamp(28px, 3.2vw, 40px) 0; border-top: 1px solid var(--line);
}
@media (max-width: 559px) { .person { grid-template-columns: 1fr; gap: 20px; } }

.person__photo {
  width: clamp(104px, 11vw, 148px); aspect-ratio: 1 / 1; height: auto; flex: none;
  border-radius: 50%; object-fit: cover; object-position: center top;
  background: var(--s2); filter: saturate(.94) contrast(1.02);
  box-shadow: 0 0 0 1px rgba(226,240,243,.14), 0 14px 34px -18px rgba(0,0,0,.9);
  transition: box-shadow .4s var(--e-out), filter .4s ease;
}
@media (hover: hover) and (pointer: fine) {
  .person:hover .person__photo { filter: saturate(1) contrast(1.02);
    box-shadow: 0 0 0 1px var(--line-b), 0 18px 40px -18px rgba(0,0,0,.9); }
}

.person__body { display: grid; align-content: start; gap: 10px; }
.person__body h3 {
  font-family: var(--disp); font-weight: var(--disp-w);
  font-variation-settings: var(--disp-vf);
  font-size: clamp(1.3rem, 1.7vw, 1.5rem); letter-spacing: -0.03em; line-height: 1.08;
}
.person__role { font-size: 14px; color: var(--brand-hi); margin-top: -4px;
                letter-spacing: -0.008em; }
.person__bio { font-size: 15.5px; color: var(--fg2); line-height: 1.58;
               text-wrap: pretty; letter-spacing: -0.006em; max-width: 42ch; }
.person__meta { font-size: 13.5px; color: var(--fg3); line-height: 1.62;
                margin-top: 4px; letter-spacing: -0.004em; max-width: 40ch; }
.person__meta i { font-style: normal; color: var(--line3); padding: 0 7px; }

/* ─────────────────────────── talk ─────────────────────────── */

.talk {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg,
    var(--bg) 0, var(--s0) var(--fade),
    var(--s0) calc(100% - var(--fade)), var(--bg) 100%);
  padding: clamp(70px, 11vw, 178px) var(--gut);
}
.talk::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: -22%; width: min(1100px, 120vw); aspect-ratio: 1/1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(20,166,182,.16), transparent 70%);
}
.talk__in { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto;
            display: grid; gap: clamp(38px, 5vw, 76px); }
@media (min-width: 1020px) {
  .talk__in { grid-template-columns: minmax(0,1fr) minmax(0,.9fr); align-items: start; }
}
.talk .disp--sm { margin-bottom: 22px; }
.talk .lede { max-width: 44ch; }

.assure { display: grid; gap: 0; margin-top: 30px; max-width: 40ch; }
.assure li { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 13px;
             padding: 12px 0; border-top: 1px solid var(--line);
             font-size: 15px; color: var(--fg2); letter-spacing: -0.008em; }
.assure li:first-child { border-top: 0; }
.assure svg { width: 15px; height: 15px; color: var(--brand-hi); margin-top: 5px; }

.post {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 26px;
  font-family: var(--sans); font-size: 17px; font-weight: 600;
  letter-spacing: -0.014em; color: var(--fg);
  transition: color .25s ease;
}
.post span { border-bottom: 1px solid var(--line2); padding-bottom: 3px;
             transition: border-color .3s ease; }
.post i { width: 30px; height: 30px; flex: none; border-radius: 50%;
          display: grid; place-items: center; color: var(--brand-hi);
          border: 1px solid var(--line2);
          transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.post svg { width: 14px; height: 14px; transition: transform .34s var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .post:hover span { border-bottom-color: var(--brand-hi); }
  .post:hover i { background: var(--brand-hi); border-color: var(--brand-hi); color: #011016; }
  .post:hover svg { transform: translate(2px, -2px); }
}

.note {
  background: linear-gradient(176deg, var(--s2), var(--s1) 70%);
  border: 1px solid var(--line2); border-radius: var(--r-lg);
  padding: clamp(24px, 2.8vw, 34px);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.95);
  display: grid; gap: 16px;
}
.note__k { color: var(--brand-hi); display: block; }
.note__t { font-family: var(--disp); font-weight: var(--disp-w);
           font-variation-settings: var(--disp-vf);
           font-size: 1.35rem; letter-spacing: -0.03em; line-height: 1.1;
           margin: -8px 0 4px; }
.row { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.row label, .row legend { font-size: 13px; font-weight: 600; color: var(--fg2);
                          letter-spacing: -0.004em; padding: 0; }
.row input, .row textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: 13px 14px; font-size: 15.5px;
  letter-spacing: -0.01em; resize: vertical;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.row input::placeholder, .row textarea::placeholder { color: var(--fg3); opacity: .8; }
.row input:focus, .row textarea:focus { outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(14,153,168,.16); }
.row legend { margin-bottom: 10px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%;
              margin: 0; cursor: pointer; }
.pill span {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 15px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  font-size: 14px; color: var(--fg2); letter-spacing: -0.01em;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .pill:hover span { border-color: var(--line2); } }
.pill input:checked + span { background: var(--brand-wash); border-color: var(--brand);
                             color: var(--brand-hi); }
.pill input:focus-visible + span { outline: 2px solid var(--brand-hi); outline-offset: 3px; }
.note .btn--wide { margin-top: 4px; }

/* ─────────────────────────── footer ───────────────────────── */

.base { padding: clamp(44px, 5.5vw, 70px) var(--gut) clamp(32px, 4vw, 48px); }
.base__in { max-width: var(--max); margin: 0 auto; display: grid; gap: 28px; }
@media (min-width: 940px) {
  .base__in { grid-template-columns: auto 1fr auto; align-items: center; gap: 44px; }
}
.base__mark { width: 122px; opacity: .8; }
.base__nav { display: flex; flex-wrap: wrap; gap: 22px; }
.base__nav a { font-size: 14px; color: var(--fg3); letter-spacing: -0.012em;
               transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .base__nav a:hover { color: var(--fg); } }
.base__meta { display: grid; gap: 5px; color: var(--fg3); font-size: 10px;
              line-height: 1.7; text-align: left; }
@media (min-width: 940px) { .base__meta { text-align: right; } }

/* ─────────────────────────── reveals ──────────────────────── */

.up { opacity: 0; transform: translateY(16px);
      transition: opacity .8s var(--e-out), transform .8s var(--e-out); }
.up.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .up { opacity: 1; transform: none; transition: none; }
}