/* ==========================================================================
   BluPrint Capital
   One stylesheet. Written for this brand: near black, one typeface, one
   accent, a small set of components. Nothing inherited, nothing overridden.
   ========================================================================== */

/* ---------- tokens ------------------------------------------------------ */
:root{
  --bg:        #0A0D11;
  --bg-raised: #12161C;
  --bg-sunken: #070A0D;

  --fg:        #FFFFFF;
  --fg-2:      rgba(255,255,255,.66);
  --fg-3:      rgba(255,255,255,.42);

  /* palette: BluPrint blue is the accent, gold is the rare highlight */
  --accent:    #20A2CE;
  --accent-2:  #37B3B5;
  --accent-dk: #137184;
  --gold:      #D9C666;

  --rule:      rgba(255,255,255,.10);
  --rule-2:    rgba(255,255,255,.20);

  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --display:   'Archivo', 'Arial Black', Helvetica, Arial, sans-serif;

  --pad:       clamp(22px, 5vw, 72px);
  --maxw:      1280px;
  --block:     clamp(84px, 11vw, 180px);
  --ease:      cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font);font-size:16px;font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- type scale -------------------------------------------------- */
/* titles are set in caps. Caps need looser tracking and tighter leading. */
.t-hero,.t-1,.t-2,.t-3{font-family:var(--display);text-transform:uppercase;font-weight:800}
.t-hero{font-size:clamp(38px,7.1vw,110px);line-height:.9;letter-spacing:-.032em}
.t-1   {font-size:clamp(30px,4.9vw,72px);  line-height:.94;letter-spacing:-.03em}
.t-2   {font-size:clamp(23px,3.1vw,44px);line-height:1.0; letter-spacing:-.026em}
.t-3   {font-size:clamp(16px,1.6vw,22px);line-height:1.12;letter-spacing:-.008em}
.t-body{font-size:clamp(16px,1.25vw,18.5px);line-height:1.62;color:var(--fg-2);font-weight:400}
.t-sm  {font-size:14.5px;line-height:1.55;color:var(--fg-2)}
.t-lab {font-size:11px;line-height:1.4;letter-spacing:.17em;text-transform:uppercase;
        color:var(--fg-3);font-weight:500}
.t-fine{font-size:12.5px;line-height:1.65;color:var(--fg-3)}

/* ---------- layout ------------------------------------------------------ */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.block{padding-block:var(--block)}
.block--raised{background:var(--bg-raised)}

/* light sections. The page alternates: dark, light, image, dark. */
.block--light{
  background:#F2F2EE;
  --fg:#0A0D11; --fg-2:rgba(10,13,17,.68); --fg-3:rgba(10,13,17,.46);
  --rule:rgba(10,13,17,.13); --rule-2:rgba(10,13,17,.26);
  color:var(--fg);
}
.block--light .btn{background:#0A0D11;color:#fff;border-color:#0A0D11}
.block--light .btn:hover{background:transparent;color:#0A0D11}
.block--light .go{color:#0A0D11}
.block--light .go:hover{border-bottom-color:#0A0D11}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(28px,6vw,110px);align-items:start}
@media (max-width:900px){ .lead{grid-template-columns:1fr;gap:26px} }

/* ---------- header ------------------------------------------------------ */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(10,13,17,0);transition:background .4s var(--ease),border-color .4s}
.hdr.is-stuck{background:rgba(10,13,17,.9);backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--rule)}
.hdr-in{max-width:var(--maxw);margin:0 auto;padding:20px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr-logo{height:clamp(26px,2.3vw,34px);width:auto}
.nav{display:flex;gap:clamp(18px,2.6vw,38px)}
.nav a{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:500;
  color:var(--fg-2);transition:color .25s}
.nav a:hover,.nav a[aria-current]{color:var(--fg)}
.burger{display:none;width:26px;height:16px;position:relative}
.burger span{position:absolute;left:0;right:0;height:1.5px;background:#fff;transition:transform .35s var(--ease)}
.burger span:first-child{top:0}.burger span:last-child{bottom:0}
/* The drawer is translated off the top when closed. Its content can be taller
   than a short viewport, and the overflow would then sit on screen, so it is
   also made invisible until opened, and it does not exist at desktop width. */
.drawer{position:fixed;inset:0;z-index:99;background:var(--bg);padding:96px var(--pad) 40px;
  transform:translateY(-100%);visibility:hidden;overflow-y:auto;
  transition:transform .5s var(--ease),visibility 0s linear .5s;
  display:grid;align-content:start;gap:4px}
.drawer.open{transform:none;visibility:visible;
  transition:transform .5s var(--ease),visibility 0s}
.drawer a{font-size:clamp(26px,7vw,40px);font-weight:600;letter-spacing:-.03em;padding:13px 0;
  border-bottom:1px solid var(--rule)}
@media (max-width:860px){ .nav{display:none} .burger{display:block} }
@media (min-width:861px){ .drawer{display:none} }

/* ---------- hero -------------------------------------------------------- */
.hero{position:relative;min-height:min(86vh,800px);display:flex;align-items:center;
  overflow:hidden;padding-block:clamp(96px,12vh,150px) clamp(40px,6vh,80px)}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center center}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,13,17,.78) 0%,rgba(10,13,17,.42) 38%,rgba(10,13,17,.92) 100%)}
.hero-in{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.hero h1{max-width:14ch}
.hero p{margin-top:clamp(20px,2.4vw,32px);max-width:54ch}

/* ---------- statement --------------------------------------------------- */
.say{max-width:15ch}
.say--wide{max-width:22ch}

/* ---------- numbered rows ----------------------------------------------- */
.rows{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:clamp(46px,6vw,96px) minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(14px,3vw,56px);padding:clamp(26px,3.4vw,48px) 0;border-bottom:1px solid var(--rule);
  align-items:start}
.row .n{padding-top:7px}
.row p{margin-top:0}
a.row{transition:background .3s var(--ease)}
a.row:hover{background:rgba(255,255,255,.035)}
a.row:hover .t-3{opacity:.78}
@media (max-width:820px){ .row{grid-template-columns:1fr;gap:10px} .row .n{padding-top:0} }

/* ---------- image band -------------------------------------------------- */
.band{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.band a{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bg-raised);display:block}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.18);
  filter:brightness(.78) contrast(1.1) saturate(1.05);
  transition:transform 1.4s var(--ease),filter .7s var(--ease)}
.band a:hover img{transform:scale(1.26);filter:brightness(1) contrast(1.05) saturate(1.15)}
.band .cap{position:absolute;inset:auto 0 0 0;padding:clamp(16px,1.8vw,26px);
  background:linear-gradient(0deg,rgba(7,10,13,.94),rgba(7,10,13,.5) 58%,transparent)}
.band .cap b{display:block;font-family:var(--display);font-size:clamp(15px,1.4vw,20px);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;margin-top:9px}
.band .cap i{display:block;font-style:normal;font-size:13px;color:var(--fg-2);margin-top:6px}
@media (max-width:1000px){ .band{grid-template-columns:repeat(2,1fr)} .band a{aspect-ratio:4/3} }
@media (max-width:540px){ .band{grid-template-columns:1fr} }

/* ---------- plate ------------------------------------------------------- */
.plate{position:relative;height:clamp(320px,48vw,640px);overflow:hidden;background:var(--bg-sunken)}
.plate img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.2);filter:brightness(.72) contrast(1.12) saturate(1.08)}
.plate-in{position:absolute;inset:auto 0 0 0;padding:clamp(28px,4.5vw,70px) 0;
  background:linear-gradient(0deg,rgba(7,10,13,.92),rgba(7,10,13,.3) 70%,transparent)}
.plate-in .wrap{color:#fff}
.plate-in p{max-width:20ch}

/* ---------- link -------------------------------------------------------- */
.go{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;color:var(--fg);
  border-bottom:1px solid var(--rule-2);padding-bottom:6px;transition:border-color .3s,gap .3s}
.go:hover{border-bottom-color:#fff;gap:14px}
.go svg{width:13px;height:9px;fill:none;stroke:currentColor;stroke-width:1.4}

/* ---------- button ------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;background:#fff;color:var(--bg);
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  border:1px solid #fff;transition:background .3s,color .3s}
.btn:hover{background:transparent;color:#fff}
.btn--ghost{background:transparent;color:#fff;border-color:var(--rule-2)}
.btn--ghost:hover{border-color:#fff;background:transparent;color:#fff}

/* ---------- footer ------------------------------------------------------ */
.ftr{background:var(--bg-sunken);padding-block:clamp(56px,7vw,96px)}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4vw,64px)}
.ftr-logo{height:30px;margin-bottom:24px}
.ftr-top ul{display:grid;gap:11px}
.ftr-top a{font-size:14.5px;color:var(--fg-2);transition:color .25s}
.ftr-top a:hover{color:var(--fg)}
.ftr-disc{margin-top:clamp(40px,5vw,72px);padding-top:26px;border-top:1px solid var(--rule)}
.ftr-bot{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between}
@media (max-width:760px){ .ftr-top{grid-template-columns:1fr 1fr} .ftr-top > div:first-child{grid-column:1/-1} }

/* ---------- motion ------------------------------------------------------ */
[data-in]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-in].in{opacity:1;transform:none}
[data-in][data-d="1"]{transition-delay:.08s}
[data-in][data-d="2"]{transition-delay:.16s}
[data-in][data-d="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){ [data-in]{opacity:1;transform:none;transition:none} }

/* ---------- utility ----------------------------------------------------- */
.mt-s{margin-top:clamp(14px,1.6vw,22px)}
.mt-m{margin-top:clamp(24px,3vw,40px)}
.mt-l{margin-top:clamp(40px,5.5vw,84px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:14px;z-index:200;background:#fff;color:var(--bg);padding:10px 16px}

/* ---------- accent application ------------------------------------------ */
.t-lab{color:var(--accent)}
.block--light .t-lab{color:var(--accent-dk)}
.row .n{color:var(--accent)}
.block--light .row .n{color:var(--accent-dk)}
.band .cap .t-lab{color:var(--accent-2)}
.go:hover{border-bottom-color:var(--accent)}
.block--light .go:hover{border-bottom-color:var(--accent-dk)}
a.row:hover{background:rgba(32,162,206,.07)}
.hero h1::after{content:'';display:block;width:84px;height:4px;background:var(--accent);
  margin-top:clamp(20px,2.4vw,32px)}
.btn{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:hover{background:transparent;color:var(--accent);border-color:var(--accent)}
.block--light .btn{background:var(--accent-dk);border-color:var(--accent-dk);color:#fff}
.block--light .btn:hover{background:transparent;color:var(--accent-dk)}

/* ---------- coverage logo strip ----------------------------------------- */
.logos{display:grid;grid-template-columns:repeat(10,1fr);gap:1px;background:var(--rule);
  border-block:1px solid var(--rule)}
.logos span{background:var(--bg);display:grid;place-items:center;aspect-ratio:16/9;padding:14px}
.logos img{max-width:100%;max-height:30px;width:auto;height:auto;opacity:.5;
  filter:grayscale(1) brightness(1.6);transition:opacity .35s,filter .35s}
.logos span:hover img{opacity:1;filter:grayscale(0) brightness(1)}
@media (max-width:1100px){ .logos{grid-template-columns:repeat(6,1fr)} }
@media (max-width:640px){ .logos{grid-template-columns:repeat(4,1fr)} }

/* ---------- one image system: blue duotone, hard crops ------------------- */
/* grayscale underneath, brand blue laid over in colour blend = duotone */
.band a,.plate{position:relative;isolation:isolate}
.hero-img{position:absolute;inset:0;isolation:isolate}
.band a::after,.plate::after,.hero-img::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(165deg,#2BA6D6 0%,#0E5C84 48%,#07253A 100%);
  mix-blend-mode:color;opacity:.72;transition:opacity .6s var(--ease)}
.band a:hover::after{opacity:.42}
.band img,.plate img,.hero-img img{filter:grayscale(1) brightness(.82) contrast(1.22)}
.band a:hover img{filter:grayscale(1) brightness(1) contrast(1.16)}
.band .cap{z-index:2}
.plate-in{z-index:2}
.hero-veil{z-index:2}
.hero-in{z-index:3}

/* harder crops so machinery reads as geometry, not as a scene */
.band img{transform:scale(1.42);transform-origin:center 46%}
.band a:hover img{transform:scale(1.5)}
.plate img{transform:scale(1.3)}

/* the coverage tiles show the sector plainly: no duotone, lighter crop */
.band a::after{display:none}
.band img{filter:brightness(.74) contrast(1.08) saturate(1.02);transform:scale(1.06);transform-origin:center}
.band a:hover img{filter:brightness(.95) contrast(1.04) saturate(1.1);transform:scale(1.12)}

/* ══════════════════════════════════════════════════════════════════════════
   BLUEPRINT
   The brand is a blueprint. Cyan line work on deep navy, amber annotation,
   a measured grid. Drawn in SVG so it stays sharp at any size.
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  --bp-ground:#081821;
  --bp-ground-2:#0B222E;
  --bp-line:#35C9F0;
  --bp-line-soft:rgba(53,201,240,.30);
  --bp-line-faint:rgba(53,201,240,.13);
  --bp-note:#E8C547;
}

/* the drafting grid, 10mm minor and 50mm major */
.bp{position:relative;background:var(--bp-ground);overflow:hidden;isolation:isolate}
.bp::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--bp-line-faint) 1px,transparent 1px),
    linear-gradient(90deg,var(--bp-line-faint) 1px,transparent 1px),
    linear-gradient(rgba(53,201,240,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(53,201,240,.07) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  mask-image:radial-gradient(ellipse 120% 85% at 50% 40%,#000 35%,transparent 100%)}
.bp > *{position:relative;z-index:1}

/* technical annotation label */
.anno{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;
  border:1px solid var(--bp-note);color:var(--bp-note);
  font-family:var(--font);font-size:10.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  background:rgba(8,24,33,.75)}
.anno::before{content:'';width:5px;height:5px;background:var(--bp-note);border-radius:50%}

/* the hero drawing */
.draw{position:relative;display:grid;place-items:center;padding-block:clamp(40px,6vw,90px)}
.draw svg{width:min(100%,760px);height:auto;overflow:visible}
.draw .ln{fill:none;stroke:var(--bp-line);stroke-width:1;vector-effect:non-scaling-stroke}
.draw .ln-soft{fill:none;stroke:var(--bp-line-soft);stroke-width:1;vector-effect:non-scaling-stroke}
.draw .ln-note{fill:none;stroke:var(--bp-note);stroke-width:1;vector-effect:non-scaling-stroke}
.draw .tx{fill:var(--bp-note);font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:.14em}
.draw .tx-c{fill:var(--bp-line);font-family:var(--font);font-size:10px;font-weight:500;letter-spacing:.12em}
/* the drawing draws itself */
.draw .ink{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900)}
.in .draw .ink,.draw.in .ink{animation:bpDraw 2.2s var(--ease) forwards}
.draw .fade{opacity:0}
.in .draw .fade,.draw.in .fade{animation:bpFade .8s var(--ease) 1.5s forwards}
@keyframes bpDraw{to{stroke-dashoffset:0}}
@keyframes bpFade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .draw .ink{stroke-dashoffset:0;animation:none} .draw .fade{opacity:1;animation:none} }

/* the plate statement carries the page: set it large */
.plate{height:auto;min-height:clamp(420px,62vw,760px);display:flex;align-items:flex-end}
.plate img{position:absolute;inset:0}
.t-plate{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,5.4vw,82px);line-height:.96;letter-spacing:-.03em;color:#fff;max-width:17ch}
.plate-links{display:flex;flex-wrap:wrap;gap:clamp(16px,2.6vw,42px);margin-top:clamp(26px,3.4vw,48px)}
.plate-in{position:relative;width:100%;padding-block:clamp(40px,6vw,96px)}
/* the hero image always covers; it must never enter the flow */
.hero-img{position:absolute;inset:0;z-index:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center}

/* ---- header spans the full width so the logo aligns with the headline --- */
.hdr{left:0;right:0;width:100%}
.hdr-in{width:100%;max-width:var(--maxw);margin-inline:auto}

/* ---- the hero image carries the page: let it fill the viewport --------- */
.hero{min-height:100svh;min-height:100vh;max-height:980px}
.hero-in{padding-block:0}

/* ---- tighten the light bands; they were mostly empty ------------------- */
.block--light{padding-block:clamp(56px,6.5vw,96px)}

/* ══════════════════════════════════════════════════════════════════════════
   VALUE CHAIN on the dark ground.
   The component was authored for a light page: white panels, white knockout
   logos and a five hue ladder. All three fail here, so they are restated.
   ═════════════════════════════════════════════════════════════════════════ */
.vengine{--s1:#2BA6D6;--s2:#3FB6DF;--s3:#56C4E6;--s4:#73D2EC;--s5:#95DFF2}

.vseg{background:rgba(255,255,255,.04);border:1px solid var(--rule);border-radius:0;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.vseg:hover,.vseg.on{background:rgba(43,166,214,.10);border-color:var(--accent);box-shadow:none;
  transform:translateY(-2px)}
.vseg-idx{color:var(--fg-3)}
.vseg-name{color:#fff;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.vseg-sub{color:var(--fg-2)}
.vseg-n{color:var(--accent)}

.veng-tray{background:rgba(255,255,255,.03);border:1px solid var(--rule);
  border-left:3px solid var(--accent);box-shadow:none}
.vtray-lab{color:var(--fg-2)}
.vtray-lab i{background:var(--accent)}

/* the tray carries white knockout marks, so each chip needs a dark field */
.vchip{background:#0E141B;border:1px solid var(--rule);box-shadow:none;
  min-height:62px;display:grid;place-items:center}
.vchip:hover{border-color:var(--accent);box-shadow:none;transform:translateY(-2px)}
.vchip img{max-width:84px;max-height:26px;opacity:.85;filter:none}
.vchip:hover img{opacity:1}
.vchip-mono,.vchip b{color:#fff;font-family:var(--display);font-weight:700}

/* ══════════════════════════════════════════════════════════════════════════
   THE CHAIN
   A continuous rail with five nodes, not five cards. The fill travels to the
   selected stage and the company set cross fades beneath it.
   ═════════════════════════════════════════════════════════════════════════ */
.chainx{--c:var(--accent);position:relative;margin-top:clamp(44px,6vw,90px)}

/* rail */
.chainx-rail{position:relative;height:2px;background:rgba(255,255,255,.14);margin:0}
.chainx-fill{position:absolute;inset:0 auto 0 0;background:var(--c);width:10%;
  transition:width .75s cubic-bezier(.65,0,.35,1)}

/* nodes sit on the rail */
.chainx-nodes{display:grid;grid-template-columns:repeat(5,1fr);margin-top:-7px}
.chainx-node{position:relative;display:flex;flex-direction:column;align-items:center;
  background:none;border:0;padding:0 8px;cursor:pointer;text-align:center}
.chainx-dot{width:12px;height:12px;border-radius:50%;background:var(--bg);
  border:2px solid rgba(255,255,255,.3);transition:all .45s var(--ease);flex:none}
.chainx-node:hover .chainx-dot{border-color:var(--c);transform:scale(1.25)}
.chainx-node[aria-selected="true"] .chainx-dot{background:var(--c);border-color:var(--c);
  transform:scale(1.5);box-shadow:0 0 0 7px rgba(43,166,214,.16)}

.chainx-k{margin-top:22px;font-size:10.5px;letter-spacing:.2em;color:var(--fg-3);font-weight:500}
.chainx-t{margin-top:9px;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(14px,1.5vw,21px);letter-spacing:-.018em;line-height:1.05;color:rgba(255,255,255,.52);
  transition:color .4s var(--ease)}
.chainx-s{margin-top:7px;font-size:12.5px;line-height:1.4;color:var(--fg-3);max-width:15ch;
  transition:color .4s var(--ease)}
.chainx-node:hover .chainx-t{color:rgba(255,255,255,.82)}
.chainx-node[aria-selected="true"] .chainx-t{color:#fff}
.chainx-node[aria-selected="true"] .chainx-s{color:var(--fg-2)}

/* the panel beneath */
.chainx-panel{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--rule);padding-top:clamp(24px,3vw,40px)}
.chainx-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.chainx-head b{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(17px,1.8vw,26px);letter-spacing:-.022em;color:#fff}
.chainx-head span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--c);font-weight:500}
.chainx-co{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;margin-top:clamp(20px,2.4vw,32px);
  background:var(--rule)}
.chainx-co a{background:#0D1319;display:grid;place-items:center;gap:10px;padding:clamp(18px,2vw,28px) 12px;
  transition:background .3s var(--ease)}
.chainx-co a:hover{background:#131B23}
.chainx-co img{max-width:88px;max-height:26px;width:auto;opacity:.78;transition:opacity .3s}
.chainx-co a:hover img{opacity:1}
.chainx-co em{font-style:normal;font-size:10px;letter-spacing:.16em;color:var(--fg-3)}
.chainx-co.swap{animation:coSwap .55s var(--ease)}
@keyframes coSwap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .chainx-nodes{grid-template-columns:repeat(5,1fr)}
  .chainx-t{font-size:12px} .chainx-s{display:none}
  .chainx-co{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){ .chainx-fill,.chainx-dot,.chainx-co.swap{transition:none;animation:none} }

/* ══════════════════════════════════════════════════════════════════════════
   POSTS — editorial cards in the McKinsey Insights register
   ═════════════════════════════════════════════════════════════════════════ */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,38px);
  margin-top:clamp(36px,4.4vw,66px)}
.post{display:flex;flex-direction:column;background:none}
.post-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-raised)}
.post-img img{width:100%;height:100%;object-fit:cover;
  filter:brightness(.82) contrast(1.06);transition:transform 1.1s var(--ease),filter .5s var(--ease)}
.post:hover .post-img img{transform:scale(1.05);filter:brightness(1) contrast(1.02)}
.post-tag{position:absolute;left:0;bottom:0;background:var(--accent);color:#fff;
  padding:7px 13px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.post-body{padding-top:clamp(18px,2vw,26px);display:flex;flex-direction:column;flex:1}
.post h3{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(17px,1.55vw,23px);line-height:1.1;letter-spacing:-.022em;color:var(--fg);
  transition:color .3s var(--ease)}
.post:hover h3{color:var(--accent)}
.block--light .post:hover h3{color:var(--accent-dk)}
.post p{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--fg-2);flex:1}
.post-meta{margin-top:18px;display:flex;align-items:center;gap:10px;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);font-weight:500}
.post-meta i{width:3px;height:3px;border-radius:50%;background:var(--fg-3);font-style:normal}
@media (max-width:980px){ .posts{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .posts{grid-template-columns:1fr} }

/* ---- the chain panel carries real content, not just logos -------------- */
.chainx-panel{margin-top:clamp(42px,5vw,76px);border-top:1px solid var(--rule);
  padding-top:clamp(28px,3.4vw,46px);display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(26px,4.5vw,80px);align-items:start}
.chainx-lede h4{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(24px,3vw,44px);line-height:1;letter-spacing:-.032em;color:#fff}
.chainx-lede .k{display:block;margin-bottom:14px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);font-weight:500}
.chainx-lede p{margin-top:16px;font-size:clamp(15px,1.25vw,17.5px);line-height:1.62;color:var(--fg-2);max-width:46ch}
.chainx-lede .drv{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.chainx-lede .drv span{border:1px solid var(--rule-2);padding:6px 12px;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.chainx-right .k{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);font-weight:500;
  padding-bottom:14px;border-bottom:1px solid var(--rule)}
.chainx-co{grid-template-columns:repeat(3,1fr);margin-top:0;border-top:0}
@media (max-width:900px){ .chainx-panel{grid-template-columns:1fr;gap:28px} .chainx-co{grid-template-columns:repeat(3,1fr)} }

/* ---- hero: the drawing sits right, the type gets a clean field left ---- */
.hero-img img{object-position:72% center}
.hero-veil{background:
  linear-gradient(90deg,rgba(10,13,17,.94) 0%,rgba(10,13,17,.82) 38%,rgba(10,13,17,.34) 68%,rgba(10,13,17,.55) 100%),
  linear-gradient(180deg,rgba(10,13,17,.72) 0%,rgba(10,13,17,.18) 42%,rgba(10,13,17,.88) 100%)}
.hero h1{max-width:17ch}
.t-hero{font-size:clamp(34px,5.6vw,86px)}
@media (max-width:860px){
  .hero-img img{object-position:62% center}
  .hero-veil{background:linear-gradient(180deg,rgba(10,13,17,.8) 0%,rgba(10,13,17,.55) 40%,rgba(10,13,17,.92) 100%)}
}

/* the drafting grid read as noise behind content: drop it */
.bp::before{display:none}
.bp{background:var(--bg-raised)}

/* ══════════════════════════════════════════════════════════════════════════
   THE CHAIN on a light ground, with the colour marks
   ═════════════════════════════════════════════════════════════════════════ */
.block--light .chainx-rail{background:rgba(10,13,17,.14)}
.block--light .chainx-fill{background:var(--accent-dk)}
.block--light .chainx-dot{background:#F2F2EE;border-color:rgba(10,13,17,.26)}
.block--light .chainx-node:hover .chainx-dot{border-color:var(--accent-dk)}
.block--light .chainx-node[aria-selected="true"] .chainx-dot{background:var(--accent-dk);
  border-color:var(--accent-dk);box-shadow:0 0 0 7px rgba(19,113,132,.14)}
.block--light .chainx-k{color:rgba(10,13,17,.56)}
.block--light .chainx-t{color:rgba(10,13,17,.55)}
.block--light .chainx-node:hover .chainx-t{color:rgba(10,13,17,.75)}
.block--light .chainx-node[aria-selected="true"] .chainx-t{color:#0A0D11}
.block--light .chainx-s{color:rgba(10,13,17,.5)}
.block--light .chainx-node[aria-selected="true"] .chainx-s{color:rgba(10,13,17,.7)}

.block--light .chainx-panel{border-top-color:rgba(10,13,17,.14)}
.block--light .chainx-lede .k{color:var(--accent-dk)}
.block--light .chainx-lede h4{color:#0A0D11}
.block--light .chainx-lede p{color:rgba(10,13,17,.68)}
.block--light .chainx-lede .drv span{border-color:rgba(10,13,17,.2);color:rgba(10,13,17,.62)}
.block--light .chainx-right .k{color:rgba(10,13,17,.56);border-bottom-color:rgba(10,13,17,.14)}

/* colour marks on white tiles, larger and with room to breathe */
.block--light .chainx-co{background:rgba(10,13,17,.12);gap:1px}
.block--light .chainx-co a{background:#fff;padding:clamp(22px,2.6vw,34px) 14px;gap:12px}
.block--light .chainx-co a:hover{background:#FAFAF8}
.block--light .chainx-co img{max-width:112px;max-height:34px;opacity:1;
  filter:none;transition:transform .35s var(--ease)}
.block--light .chainx-co a:hover img{transform:scale(1.05)}
.block--light .chainx-co em{color:rgba(10,13,17,.5);font-weight:500}

/* ---- four steps, read across, numbers doing the work ------------------- */
/* Three shared rows: number, heading, body. Every column is a subgrid of them,
   so a heading that wraps to two lines pushes every body paragraph down with
   it and the four columns stay on one baseline. */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,54px);
  grid-template-rows:auto auto auto}
.step{position:relative;padding-top:clamp(26px,3vw,40px);border-top:1px solid rgba(255,255,255,.22);
  display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
.step-n{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(40px,4.6vw,68px);line-height:.9;letter-spacing:-.04em;
  color:rgba(140,200,235,.32);margin-bottom:clamp(16px,2vw,26px)}
.step h3{color:#fff;margin-bottom:10px;align-self:start}
.step p{color:rgba(255,255,255,.7);max-width:30ch;align-self:start}

/* without subgrid the headings still share a two line floor */
@supports not (grid-template-rows:subgrid){
  .step{display:block}
  .step h3{min-height:2.24em}
}

@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr;gap:28px 32px} }
@media (max-width:540px){
  .steps{grid-template-columns:1fr}
  .step{display:block}
  .step h3{min-height:0}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE PANEL
   The dark sections are not flat colour. Each one is a full bleed industrial
   photograph with a scrim pulled across the left two thirds, so the type sits
   on near black while the right of the frame stays open. This is the only
   dark treatment on the page: every section between two panels is light.
   ═════════════════════════════════════════════════════════════════════════ */
.panel{position:relative;background:#05070A}

/* the photographed half: type left, frame open right, nothing laid over it */
.panel-shot{position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;
  padding-block:clamp(72px,9vw,128px);
  min-height:clamp(540px,78vh,800px)}
.panel-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  filter:brightness(.94) contrast(1.05) saturate(1.02)}
.panel-shot::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(97deg,
      rgba(5,7,10,.96) 0%,  rgba(5,7,10,.92) 24%,
      rgba(5,7,10,.66) 44%, rgba(5,7,10,.24) 64%,
      rgba(5,7,10,.10) 80%, rgba(5,7,10,.46) 100%),
    linear-gradient(180deg,
      rgba(5,7,10,.58) 0%, rgba(5,7,10,.04) 24%,
      rgba(5,7,10,.04) 68%, rgba(5,7,10,.62) 100%)}
.panel-in{position:relative;z-index:2;width:100%}
.panel-col{max-width:min(50ch,56%)}
.panel .t-1{color:#fff;max-width:15ch}
.panel .t-body{color:rgba(255,255,255,.78)}
.panel .t-sm{color:rgba(255,255,255,.62)}
.panel .t-lab{display:block;margin-bottom:clamp(18px,2vw,26px)}
.panel .t-fine{color:rgba(255,255,255,.44)}

/* the four across strip, on solid ground so the photograph is never fought */
.panel-foot{padding-block:clamp(48px,6vw,88px)}
.panel .step{border-top-color:rgba(255,255,255,.26)}
.panel .step-n{color:rgba(255,255,255,.34)}
.panel .step p{color:rgba(255,255,255,.72)}
.panel .step h3{color:#fff}

@media (max-width:960px){
  .panel-shot{min-height:0;padding-block:clamp(72px,12vw,110px)}
  .panel-col{max-width:none}
  .panel-shot::after{background:
    linear-gradient(180deg,rgba(5,7,10,.88) 0%,rgba(5,7,10,.64) 45%,rgba(5,7,10,.92) 100%)}
}

/* ---- pill actions, the panel's own button ------------------------------ */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3.2vw,44px)}
.pill{display:inline-flex;align-items:center;gap:14px;
  padding:15px 25px;border-radius:999px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.17);
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  color:#fff;font-size:14px;font-weight:500;line-height:1;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.pill:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.36);transform:translateY(-1px)}
.pill svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.pill:hover svg{transform:translate(2px,-2px)}
.pill--solid{background:var(--accent);border-color:var(--accent)}
.pill--solid:hover{background:#2FB4E0;border-color:#2FB4E0}

/* ---- the light ground needs its own steps and facts -------------------- */
.block--light .steps .step{border-top-color:rgba(10,13,17,.18)}
.block--light .step-n{color:rgba(10,13,17,.26)}
.block--light .step h3{color:#0A0D11}
.block--light .step p{color:rgba(10,13,17,.64)}

/* the short light strip under the hero: three facts, no prose */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,4vw,72px)}
.fact{border-top:1px solid rgba(10,13,17,.18);padding-top:clamp(18px,2vw,26px)}
.fact b{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(38px,5vw,76px);line-height:.92;color:#0A0D11}
.fact span{display:block;margin-top:12px;font-size:14px;line-height:1.5;color:rgba(10,13,17,.62);max-width:26ch}
@media (max-width:700px){ .facts{grid-template-columns:1fr;gap:26px} }

/* ---- reveal ------------------------------------------------------------ */
[data-in]{opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-in].in{opacity:1;transform:none}
[data-in][data-d="1"]{transition-delay:.09s}
[data-in][data-d="2"]{transition-delay:.18s}
[data-in][data-d="3"]{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){ [data-in]{opacity:1;transform:none;transition:none} }

/* ---- scroll progress ---------------------------------------------------- */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* a bright or busy frame needs a heavier hand so the type stays first */
.panel--dim .panel-bg{filter:brightness(.74) contrast(1.10) saturate(1.04)}

/* ---- interior page head: same panel, less air -------------------------- */
.panel--head .panel-shot{min-height:clamp(380px,52vh,540px);
  padding-block:clamp(96px,10vw,140px) clamp(56px,7vw,96px)}
.panel--head .panel-col{max-width:min(46ch,62%)}
.panel--head .t-hero{max-width:16ch}

/* ---- a plain definition list, for pages that are mostly prose ---------- */
.defs{display:grid;gap:0;border-top:1px solid var(--rule)}
.def{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,1fr);
  gap:clamp(18px,4vw,64px);padding-block:clamp(24px,3vw,38px);
  border-bottom:1px solid var(--rule)}
.def h3{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(15px,1.5vw,21px);line-height:1.12;letter-spacing:-.01em;color:var(--fg)}
.def p{font-size:14.5px;line-height:1.6;color:var(--fg-2);max-width:56ch}
.block--light .defs{border-top-color:rgba(10,13,17,.18)}
.block--light .def{border-bottom-color:rgba(10,13,17,.12)}
@media (max-width:760px){ .def{grid-template-columns:1fr;gap:10px} }

/* ---- two column prose, used on firm and contact ------------------------ */
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,4vw,72px)}
@media (max-width:760px){ .cols2{grid-template-columns:1fr} }

/* ---- enquiry form ------------------------------------------------------ */
.form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px)}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field.wide{grid-column:1 / -1}
.field label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--fg-3)}
.field input,.field select,.field textarea{
  font:inherit;font-size:15px;color:var(--fg);background:transparent;
  border:0;border-bottom:1px solid var(--rule-2);padding:11px 2px;border-radius:0;
  transition:border-color .25s var(--ease)}
.field textarea{min-height:120px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-bottom-color:var(--accent)}
.field select option{background:var(--bg);color:#fff}
.form-note{grid-column:1 / -1;font-size:12.5px;line-height:1.6;color:var(--fg-3)}
.form-ok{grid-column:1 / -1;display:none;font-size:14px;line-height:1.6;
  border-left:2px solid var(--accent);padding:14px 18px;background:rgba(32,162,206,.08);
  color:var(--fg-2)}
.form-ok.on{display:block}
@media (max-width:620px){ .form{grid-template-columns:1fr} }

/* on the light ground the inputs invert with everything else */
.block--light .field label{color:rgba(10,13,17,.5)}
.block--light .field input,
.block--light .field select,
.block--light .field textarea{color:#0A0D11;border-bottom-color:rgba(10,13,17,.24)}
.block--light .field input::placeholder,
.block--light .field textarea::placeholder{color:rgba(10,13,17,.38)}
.block--light .field input:focus,
.block--light .field select:focus,
.block--light .field textarea:focus{border-bottom-color:var(--accent-dk)}
.block--light .field select option{background:#fff;color:#0A0D11}
.block--light .form-note{color:rgba(10,13,17,.5)}
.block--light .form-ok{border-left-color:var(--accent-dk);background:rgba(19,113,132,.08);
  color:rgba(10,13,17,.7)}

/* ---- a small labelled fact list ---------------------------------------- */
.info{display:grid;gap:clamp(16px,2vw,24px);border-top:1px solid var(--rule);
  padding-top:clamp(20px,2.4vw,30px)}
.info > div{display:grid;gap:5px}
.info b{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--accent)}
.info a,.info span{font-size:15px;color:var(--fg-2)}
.info a:hover{color:var(--fg)}
.block--light .info{border-top-color:rgba(10,13,17,.18)}
.block--light .info b{color:var(--accent-dk)}
.block--light .info a,.block--light .info span{color:rgba(10,13,17,.68)}

/* ---- filters ----------------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.fbtn{padding:9px 16px;border:1px solid var(--rule-2);border-radius:999px;
  font-size:12.5px;font-weight:500;color:var(--fg-2);
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.fbtn:hover{border-color:var(--fg-3);color:var(--fg)}
.fbtn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.block--light .fbtn{border-color:rgba(10,13,17,.22);color:rgba(10,13,17,.6)}
.block--light .fbtn:hover{border-color:rgba(10,13,17,.45);color:#0A0D11}
.block--light .fbtn.active{background:var(--accent-dk);border-color:var(--accent-dk);color:#fff}

/* ---- mandate tombstones ------------------------------------------------ */
.tomb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,32px)}
.tomb{display:flex;flex-direction:column;background:var(--bg-raised);
  border:1px solid var(--rule);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.tomb:hover{border-color:var(--rule-2);transform:translateY(-2px)}
.tomb[hidden]{display:none}
.tomb-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-sunken)}
.tomb-img img{width:100%;height:100%;object-fit:cover;
  filter:brightness(.8) contrast(1.06) saturate(.92);transition:transform .5s var(--ease)}
.tomb:hover .tomb-img img{transform:scale(1.04)}
.tomb-body{padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;flex:1}
.tomb-val{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:600;
  color:var(--accent)}
.tomb-name{margin-top:12px;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(15px,1.4vw,19px);line-height:1.14;letter-spacing:-.015em;color:var(--fg)}
.tomb-desc{margin-top:11px;font-size:14px;line-height:1.55;color:var(--fg-2);flex:1}
.tomb-rule{height:1px;background:var(--rule);margin:18px 0 14px}
.tomb-role{font-size:12.5px;line-height:1.5;color:var(--fg-2)}
.tomb-role b{font-weight:600;color:var(--fg)}
.tomb-meta{margin-top:12px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3)}
.block--light .tomb{background:#fff;border-color:rgba(10,13,17,.12)}
.block--light .tomb:hover{border-color:rgba(10,13,17,.26)}
.block--light .tomb-val{color:var(--accent-dk)}
.block--light .tomb-name{color:#0A0D11}
.block--light .tomb-desc,.block--light .tomb-role{color:rgba(10,13,17,.66)}
.block--light .tomb-role b{color:#0A0D11}
.block--light .tomb-rule{background:rgba(10,13,17,.14)}
.block--light .tomb-meta{color:rgba(10,13,17,.45)}
@media (max-width:1000px){ .tomb-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .tomb-grid{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════════════════════════
   THREE WAYS TO SET OUT FOUR THINGS

   A numbered strip repeated on every panel stopped carrying meaning. These
   three replace it, chosen by what the four things actually are:

     .rail    a sequence, drawn on one line that runs as the section arrives
     .switch  a set of choices, where picking one reveals it
     .marks   criteria that all hold at once, so nothing is ordered
   ═════════════════════════════════════════════════════════════════════════ */

/* ---- A. the rail: a process, connected ---------------------------------
   Each item carries its own connector to the next one, so the line stops at
   the last node instead of running on to the container edge, and the whole
   thing holds together at any column count. Two shared grid rows keep the
   headings and the body copy on one baseline however the titles wrap. */
.rail{--gap:clamp(20px,3vw,54px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
  grid-template-rows:auto auto}
.rail-item{position:relative;display:grid;grid-row:span 2;grid-template-rows:subgrid;
  row-gap:0;align-content:start;padding-top:clamp(26px,2.6vw,34px)}

/* the node */
.rail-item::before{content:'';position:absolute;left:0;top:0;width:10px;height:10px;
  border-radius:50%;background:var(--accent);
  opacity:0;transform:scale(.3);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
/* the connector to the next node */
.rail-item::after{content:'';position:absolute;left:10px;top:4.5px;height:1px;
  right:calc(-1 * var(--gap));background:rgba(255,255,255,.22);
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease)}
.rail-item:last-child::after{display:none}

.rail.in .rail-item::before{opacity:1;transform:none}
.rail.in .rail-item::after{transform:scaleX(1)}
.rail.in .rail-item:nth-child(1)::before{transition-delay:.05s}
.rail.in .rail-item:nth-child(1)::after {transition-delay:.15s}
.rail.in .rail-item:nth-child(2)::before{transition-delay:.60s}
.rail.in .rail-item:nth-child(2)::after {transition-delay:.70s}
.rail.in .rail-item:nth-child(3)::before{transition-delay:1.15s}
.rail.in .rail-item:nth-child(3)::after {transition-delay:1.25s}
.rail.in .rail-item:nth-child(4)::before{transition-delay:1.70s}

.rail-item h3{color:#fff;margin-bottom:11px;align-self:start}
.rail-item p{color:rgba(255,255,255,.72);max-width:32ch;align-self:start}

.block--light .rail-item::before{background:var(--accent-dk)}
.block--light .rail-item::after{background:rgba(10,13,17,.2)}
.block--light .rail-item h3{color:#0A0D11}
.block--light .rail-item p{color:rgba(10,13,17,.66)}

@supports not (grid-template-rows:subgrid){
  .rail-item{display:block}
  .rail-item h3{min-height:2.24em}
}
@media (max-width:900px){
  .rail{grid-template-columns:1fr 1fr;gap:32px var(--gap)}
  .rail-item{display:block;padding-top:26px}
  .rail-item h3{min-height:0}
  .rail-item::after{display:none}
  .rail-item:nth-child(-n+2)::after{display:none}
}
@media (max-width:560px){ .rail{grid-template-columns:1fr} }


/* ---- B. the switch: choices, one open at a time ------------------------- */
.switch{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(26px,4vw,76px);padding-top:clamp(34px,4vw,54px);align-items:start}
.switch-list{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.16)}
.switch-btn{display:flex;align-items:baseline;gap:14px;width:100%;text-align:left;
  padding:clamp(16px,1.8vw,22px) 0;border-bottom:1px solid rgba(255,255,255,.16);
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(15px,1.55vw,21px);line-height:1.14;letter-spacing:-.014em;
  color:rgba(255,255,255,.46);transition:color .3s var(--ease),padding-left .35s var(--ease)}
.switch-btn::before{content:'';flex:none;width:0;height:2px;background:var(--accent);
  transition:width .35s var(--ease);align-self:center}
.switch-btn:hover{color:rgba(255,255,255,.8)}
.switch-btn[aria-selected="true"]{color:#fff}
.switch-btn[aria-selected="true"]::before{width:26px}
.switch-panel{position:relative;min-height:1px}
.switch-pane{display:none}
.switch-pane[data-on]{display:block;animation:paneIn .5s var(--ease)}
.switch-pane p{color:rgba(255,255,255,.78);font-size:clamp(15px,1.25vw,17.5px);line-height:1.62;
  max-width:46ch}
.switch-pane .k{display:block;margin-bottom:14px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;color:var(--accent)}
@keyframes paneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.block--light .switch-list,.block--light .switch-btn{border-color:rgba(10,13,17,.14)}
.block--light .switch-btn{color:rgba(10,13,17,.45)}
.block--light .switch-btn:hover{color:rgba(10,13,17,.78)}
.block--light .switch-btn[aria-selected="true"]{color:#0A0D11}
.block--light .switch-btn::before{background:var(--accent-dk)}
.block--light .switch-pane p{color:rgba(10,13,17,.68)}
.block--light .switch-pane .k{color:var(--accent-dk)}
@media (max-width:820px){ .switch{grid-template-columns:1fr;gap:26px} }

/* ---- C. the marks: criteria, all of them at once ------------------------ */
.marks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,52px);
  padding-top:clamp(34px,4vw,54px)}
.mark{position:relative;padding-left:clamp(20px,2.2vw,30px)}
.mark::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:2px;
  background:var(--accent);opacity:.5;transform:scaleY(0);transform-origin:top;
  transition:transform .7s var(--ease),opacity .7s var(--ease)}
.mark.in::before,[data-in].in .mark::before{transform:scaleY(1);opacity:.5}
.mark h3{color:#fff;margin-bottom:10px}
.mark p{color:rgba(255,255,255,.72);max-width:44ch}
.block--light .mark::before{background:var(--accent-dk)}
.block--light .mark h3{color:#0A0D11}
.block--light .mark p{color:rgba(10,13,17,.66)}
@media (max-width:760px){ .marks{grid-template-columns:1fr;gap:26px} }

/* the stat strip, on a panel's dark ground */
.panel .facts .fact{border-top-color:rgba(255,255,255,.26)}
.panel .facts .fact b{color:#fff}
.panel .facts .fact span{color:rgba(255,255,255,.7)}

/* ---- the figures arrive, they do not count ----------------------------
   A count up animation on 30, 5 and $3BN renders 16, 3 and $2BN on the way
   there. Those are factual claims, and a screenshot taken mid animation
   shows the wrong ones, so the number slides into place at its real value
   instead of being animated through values that are not true. */
.fact b{display:block;clip-path:inset(0 0 0 0)}
[data-in] .fact b,.fact b{transform:translateY(0)}
.facts [data-in] b{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.facts [data-in].in b{opacity:1;transform:none}
.facts [data-in][data-d="1"] b{transition-delay:.1s}
.facts [data-in][data-d="2"] b{transition-delay:.2s}
@media (prefers-reduced-motion:reduce){
  .facts [data-in] b{opacity:1;transform:none;transition:none}
}

/* ---- animations are an enhancement, never a dependency -----------------
   The rail, the marks and the reveal all render finished by default. Only
   once site.js has set .js on the document do they start hidden, so a
   blocked script or an observer that never fires cannot leave the page
   with invisible rules, dots and connectors. */
.rail-item::before{opacity:1;transform:none}
.rail-item::after{transform:scaleX(1)}
.mark::before{transform:scaleY(1)}

.js .rail-item::before{opacity:0;transform:scale(.3)}
.js .rail-item::after{transform:scaleX(0)}
.js .rail.in .rail-item::before{opacity:1;transform:none}
.js .rail.in .rail-item::after{transform:scaleX(1)}
.js .mark::before{transform:scaleY(0)}
.js .mark.in::before{transform:scaleY(1)}

/* the form's error panel, same shape as the success one */
.form-err{grid-column:1 / -1;display:none;font-size:14px;line-height:1.6;
  border-left:2px solid #D4635C;padding:14px 18px;background:rgba(212,99,92,.10);
  color:var(--fg-2)}
.form-err.on{display:block}
.form-err a{text-decoration:underline}
.block--light .form-err{color:rgba(10,13,17,.72)}
.form button[disabled]{opacity:.6;cursor:default}