/* ============================================================
   ONE TYPEFACE. ONE ACCENT. ONE DEVICE.
   ============================================================ */
:root{
  --ink:#0A1626; --graphite:#333B49; --grey:#585F6D;
  --paper:#F6F5F2; --paper-2:#EBE9E3;
  --blue:#123BFE;      /* the mark's blue — the only accent */
  --blue-d:#0E2FC9;    /* same accent, AA on paper */
  --blue-l:#8FA6FF;    /* same accent, AA on ink */
  --rule:rgba(10,22,38,.18); --rule-s:rgba(10,22,38,.10);
  --rule-d:rgba(246,245,242,.22); --rule-ds:rgba(246,245,242,.11);
  --f:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --page:1240px; --gut:clamp(21px,5vw,55px); --nav:102px;
  --e:cubic-bezier(.22,.61,.36,1);

  /* ---- Fibonacci ------------------------------------------------------
     8 · 13 · 21 · 34 · 55 · 89 · 144.  Every gap, pad and radius on this
     page is one of these.  Nothing in between, ever — if a value is not
     here it does not get used.                                          */
  --f1:8px; --f2:13px; --f3:21px; --f4:34px; --f5:55px; --f6:89px; --f7:144px;

  /* the rhythm, fluid but pinned to the scale at both ends */
  --sp-sec:clamp(var(--f5),6.2vw,var(--f6));   /* between sections   55→89  */
  --sp-blk:clamp(var(--f4),3.8vw,var(--f5));   /* between blocks     34→55  */
  --sp-grp:clamp(var(--f3),2.4vw,var(--f4));   /* between groups     21→34  */
  --sp-itm:var(--f3);                          /* inside a card      21     */
  --sp-tgt:var(--f2);                          /* tight pairs        13     */

  /* shape — three radii, by role */
  --r-chip:8px;   /* chips, buttons          */
  --r-inp:13px;   /* inputs                  */
  --r-card:21px;  /* cards, panels, dialogs  */

  /* signal — the one place a second hue is allowed, because it carries
     information rather than decoration. Muted on purpose: a primary red and
     green would fight everything else on the page. The mid is the step the
     mockup lacks, so the scale reads as a progression and not a pass/fail. */
  --sig-low:#C1785F; --sig-mid:#C2A15F; --sig-ok:#7FA98C;

  /* depth — two levels, never a third */
  --sh-rest:0 1px 2px rgba(10,22,38,.04),0 2px 8px -6px rgba(10,22,38,.10);
  --sh-lift:0 21px 55px -34px rgba(10,22,38,.5);
  --sh-rest-d:0 1px 2px rgba(0,0,0,.20),0 2px 8px -6px rgba(0,0,0,.36);
  --sh-lift-d:0 21px 55px -34px rgba(0,0,0,.75);
}

/* ---- rhythm utilities -------------------------------------------------
   So that no element has to carry a hand-written margin in the markup. */
.mt-tgt{margin-top:var(--sp-tgt)}
.mt-itm{margin-top:var(--sp-itm)}
.mt-grp{margin-top:var(--sp-grp)}
.mt-blk{margin-top:var(--sp-blk)}
.mt-sec{margin-top:var(--sp-sec)}

/* ---- the three ratios -------------------------------------------------
   1:2 label/content · 2:3 text/visual · 5:8 the main asymmetric split.
   Single column until 900px, where the split has room to mean something. */
.rt{display:grid;grid-template-columns:1fr;gap:var(--sp-blk)}
@media(min-width:900px){
  .rt{gap:clamp(var(--f4),5vw,var(--f6))}
  .rt--12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .rt--21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .rt--23{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
  .rt--32{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .rt--58{grid-template-columns:minmax(0,5fr) minmax(0,8fr)}
  .rt--85{grid-template-columns:minmax(0,8fr) minmax(0,5fr)}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p,ul,form{margin:0}
ul{list-style:none;padding:0}
[id]{scroll-margin-top:calc(var(--nav) + 24px)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
::selection{background:rgba(18,59,254,.14)}
.skip{position:fixed;top:12px;left:-9999px;z-index:300}
.skip:focus{left:12px}

/* hierarchy from weight, size and tracking only */
.d1{font-weight:800;font-size:clamp(2.7rem,6.6vw,6rem);line-height:.98;letter-spacing:-.042em;
  max-width:15ch;text-wrap:balance}
.d2{font-weight:800;font-size:clamp(1.85rem,3.7vw,3.15rem);line-height:1.04;letter-spacing:-.036em;
  max-width:20ch;text-wrap:balance}
.d2--w{max-width:28ch}
.d3{font-weight:700;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.14;letter-spacing:-.03em}
.big{font-weight:500;font-size:clamp(1.3rem,2.5vw,2.05rem);line-height:1.24;letter-spacing:-.026em;
  max-width:26ch;text-wrap:balance}
.lede{font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.5;color:var(--graphite);max-width:46ch;text-wrap:pretty}
.body{color:var(--graphite);max-width:54ch;text-wrap:pretty}
.small{font-size:.885rem;line-height:1.5;color:var(--grey)}
.tag{font-size:.7rem;font-weight:700;letter-spacing:.155em;text-transform:uppercase;color:var(--grey)}
.tag--b{color:var(--blue-d)}
.hd .tag{display:block;margin-bottom:var(--f3)}
.hd{margin-bottom:var(--sp-blk)}
/* a tag used as a column label, not a section label */
.tag--c{display:block;margin-bottom:var(--f3)}

.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--gut)}
.p{padding-block:var(--sp-sec)}
.s{padding-block:var(--sp-blk)}
.tint{background:var(--paper-2)}
.dark{background:var(--ink);color:rgba(246,245,242,.9)}
.dark .lede,.dark .body{color:rgba(246,245,242,.76)}
.dark .tag{color:rgba(246,245,242,.66)}
.dark .tag--b{color:var(--blue-l)}
.dark .small{color:rgba(246,245,242,.66)}
/* headings on ink carry full white — replaces per-element style="color:#fff" */
.dark .d1,.dark .d2,.dark .d3,.dark .big,.dark .bl__s{color:#fff}

/* ============================================================
   THE DEVICE — a measured gap. Now only in the close, reading zero.
   ============================================================ */
.gap{display:grid;gap:var(--f2);align-items:center;grid-template-areas:"a" "m" "b";grid-template-columns:1fr}
@media(min-width:760px){
  .gap{grid-template-areas:"a m b";grid-template-columns:auto minmax(var(--f6),1fr) auto;gap:var(--f3)}
}
.gap__a{grid-area:a}.gap__b{grid-area:b}.gap__m{grid-area:m}
.gap__a,.gap__b{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--grey);white-space:nowrap}
.dark .gap__a,.dark .gap__b{color:rgba(246,245,242,.7)}
.gap__m{position:relative;height:1px;background:var(--rule);
  transform:scaleX(0);transform-origin:center;transition:transform 1.2s var(--e) .3s}
.in .gap__m{transform:scaleX(1)}
.dark .gap__m{background:var(--rule-d)}
.gap__m::before,.gap__m::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--ink)}
.dark .gap__m::before,.dark .gap__m::after{background:rgba(246,245,242,.78)}
.gap__m::before{left:0}.gap__m::after{right:0}
.gap__l{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--paper);padding:0 .85rem;white-space:nowrap;
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--blue-d)}
.dark .gap__l{background:var(--ink);color:var(--blue-l)}
/* the same instrument, reading zero */
.gap--shut{grid-template-areas:"a" "m" "b"}
@media(min-width:760px){
  .gap--shut{grid-template-areas:"a m b";grid-template-columns:auto auto auto;
    justify-content:center;gap:1.15rem}
}
.gap--shut .gap__m{width:24px;justify-self:center;transform:scaleX(1)}
.gap--shut .gap__l{position:static;transform:none;padding:0;background:none;
  display:block;text-align:center}
/* Stacked, the instrument falls apart: a 24px rule sits orphaned under the
   first label and the word hangs below it, reading as though it belonged to
   the second. So turn the reading ninety degrees — the measure brackets the
   word and the middle row becomes one centred line instead of three loose
   pieces, with the grid's own gap above and below it. */
@media(max-width:759px){
  .gap--shut .gap__m{width:auto;height:auto;background:none;
    display:flex;align-items:center;justify-content:center;gap:var(--f2)}
  .gap--shut .gap__m::before,.gap--shut .gap__m::after{
    position:static;top:auto;left:auto;right:auto;
    width:var(--f3);height:1px;background:var(--rule)}
  .dark .gap--shut .gap__m::before,.dark .gap--shut .gap__m::after{background:var(--rule-d)}
}
@media(min-width:760px){
  .gap--shut .gap__l{position:absolute;left:50%;top:-2.3em;transform:translateX(-50%);margin:0}
}

/* ============================================================
   CONTROLS
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:.55em;padding:.85em 1.35em;border-radius:var(--r-chip);
  font-size:.92rem;font-weight:700;letter-spacing:-.008em;text-decoration:none;
  transition:background .25s var(--e),border-color .25s var(--e),color .25s var(--e),transform .25s var(--e)}
.btn:hover{transform:translateY(-1px)}
.btn--p{background:var(--blue);color:#fff}
.btn--p:hover{background:#0B27A8}
.btn--g{border:1px solid var(--rule);color:var(--ink)}
.btn--g:hover{border-color:var(--ink);background:rgba(10,22,38,.04)}
.dark .btn--g{border-color:var(--rule-d);color:#fff}
.dark .btn--g:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btns{display:flex;flex-wrap:wrap;gap:var(--f2)}
@media(max-width:520px){.btn{white-space:normal}.btns .btn{width:100%;justify-content:space-between}}
.ar{transition:transform .25s var(--e)}
.btn:hover .ar,.lnk:hover .ar{transform:translateX(3px)}
.lnk{display:inline-flex;align-items:center;gap:.45em;text-decoration:none;font-weight:700;font-size:.9rem;
  padding-bottom:2px;border-bottom:1px solid var(--rule);
  transition:border-color .22s var(--e),color .22s var(--e)}
.lnk:hover{border-color:var(--blue-d);color:var(--blue-d)}
.dark .lnk{border-color:var(--rule-d)}
.dark .lnk:hover{border-color:var(--blue-l);color:var(--blue-l)}

/* ============================================================
   NAV
   ============================================================ */
.nv{position:fixed;inset:0 0 auto 0;z-index:120;height:var(--nav);display:flex;align-items:center;
  border-bottom:1px solid transparent;transition:background .36s var(--e),border-color .36s var(--e)}
.nv__i{max-width:var(--page);width:100%;margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem}
.bd{display:block;line-height:0}
.bd img{height:30px;width:auto}
.bd__l{display:block}.bd__d{display:none}
.nv.on .bd__l{display:none}.nv.on .bd__d{display:block}
.nv.on{background:rgba(246,245,242,.94);backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom-color:var(--rule-s)}
.mn{display:none;align-items:center;gap:clamp(16px,2vw,32px)}
@media(min-width:900px){.mn{display:flex}}
.mn a{position:relative;text-decoration:none;font-size:.87rem;font-weight:600;
  color:rgba(246,245,242,.78);padding:6px 0;transition:color .22s var(--e)}
.mn a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--blue-l);
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--e)}
.mn a:hover,.mn a[aria-current="true"]{color:#fff}
.mn a[aria-current="true"]::after{transform:scaleX(1)}
.nv.on .mn a{color:var(--graphite)}
.nv.on .mn a:hover,.nv.on .mn a[aria-current="true"]{color:var(--ink)}
.nv.on .mn a::after{background:var(--blue)}
.nv__c{display:none}
@media(min-width:900px){.nv__c{display:inline-flex;padding:.62em 1.15em;font-size:.85rem}}
.bg{display:inline-flex;flex-direction:column;gap:5px;padding:10px;margin-right:-10px}
@media(min-width:900px){.bg{display:none}}
.bg span{display:block;width:22px;height:1.5px;background:#fff;transition:.28s var(--e)}
.nv.on .bg span{background:var(--ink)}
.nv.op .bg span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nv.op .bg span:nth-child(2){opacity:0}
.nv.op .bg span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.dw{position:fixed;inset:var(--nav) 0 0 0;z-index:110;background:var(--ink);
  padding:clamp(24px,6vw,48px) var(--gut);display:flex;flex-direction:column;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .32s var(--e),transform .32s var(--e),visibility .32s}
.dw[hidden]{display:none}
.dw.op{opacity:1;visibility:visible;transform:none}
.dw a{text-decoration:none;color:rgba(246,245,242,.9);font-weight:700;
  font-size:clamp(1.6rem,6vw,2.1rem);line-height:1.3;letter-spacing:-.035em;
  border-bottom:1px solid var(--rule-ds);padding:.42em 0}
.dw .btn{margin-top:1.5rem;align-self:flex-start;border-bottom:0;font-size:.9rem}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:var(--ink);color:#fff;
  padding-block:calc(var(--nav) + clamp(var(--f5),11vh,var(--f6))) var(--sp-sec)}
.hero .d1{color:#fff}
.hero .lede{color:rgba(246,245,242,.78);margin-top:var(--f4);max-width:50ch}
.hero .btns{margin-top:var(--f4)}
/* The hero is dark but does not carry .dark, so the ghost button was taking the
   light-theme border and vanishing against the globe on every desktop size. */
.hero .btn--g{border-color:rgba(246,245,242,.42);color:#fff}
.hero .btn--g:hover{border-color:#fff;background:rgba(255,255,255,.07)}
/* 8:5 — copy holds the eight, the globe is given the five and stops being
   crossed by the headline. */
.hero__g{display:grid;grid-template-columns:1fr}
@media(min-width:900px){.hero__g{grid-template-columns:minmax(0,8fr) minmax(0,5fr);gap:var(--f5)}}

/* ============================================================
   THE FAILURES — three disciplines, one shared hairline
   ============================================================ */
/* The 1px grid gap is the divider: the grid's own background shows through it,
   so the three blocks are separated by one continuous rule rather than three
   borders that have to be kept in step. */
.tri{display:grid;grid-template-columns:1fr}
@media(min-width:760px){
  .tri{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* The divider belongs to the block on its right, so it can carry a cap.
     --rule, not --rule-s: at 10% ink on paper the line was barely there. */
  .tri__b + .tri__b{border-left:1px solid var(--rule)}
  /* an accent cap at the head of each divider — the same instrument mark the
     measure uses, turned upright */
  .tri__b + .tri__b::before{content:"";position:absolute;left:-1px;top:0;
    width:1px;height:var(--f3);background:var(--blue)}
  .tri__b:first-child{padding-left:0}
  .tri__b:last-child{padding-right:0}
}
/* padding-bottom is tight so the divider ends near the copy instead of
   dangling into empty space below it */
.tri__b{position:relative;padding:var(--sp-grp) var(--sp-grp) var(--f3)}
.tri__n{display:block;font-size:.7rem;font-weight:700;letter-spacing:.155em;
  text-transform:uppercase;color:var(--blue-d);margin-bottom:var(--f3)}
.tri__b p{font-size:clamp(1rem,1.3vw,1.13rem);line-height:1.48;font-weight:500;
  letter-spacing:-.014em;color:var(--graphite);max-width:34ch}

/* This section carries only three short statements, so it can afford — and
   needs — more air than the standard rhythm gives. Both gaps step up: the
   heading takes the section-level gap rather than the block-level one, and the
   close takes the section gap plus a group on top of it. Still sums of the
   scale, nothing off it. */
.pb .hd{margin-bottom:calc(var(--sp-sec) + var(--sp-grp))}

/* the close: centred, but its rule spans the full measure so the block is
   anchored to the same width as the triptych above it */
.pb__close{margin-top:calc(var(--sp-sec) + var(--sp-grp));padding-top:var(--sp-blk);
  border-top:1px solid var(--rule);
  text-align:center;
  font-weight:500;font-size:clamp(1.2rem,2.1vw,1.7rem);line-height:1.34;
  letter-spacing:-.024em;text-wrap:balance}
.pb__close em{font-style:normal;color:var(--blue-d)}
.pb__close span{display:block;max-width:60ch;margin-inline:auto}

/* ============================================================
   THE BELIEF — the statement, then the instrument that proves it
   ============================================================ */
.bl{padding-block:var(--sp-sec)}
.bl .tag{display:block;margin-bottom:var(--f3)}
/* display size, weight 500 — a statement, not a heading */
.bl__s{font-weight:500;font-size:clamp(1.4rem,2.9vw,2.2rem);line-height:1.16;
  letter-spacing:-.032em;max-width:34ch;text-wrap:balance}
.bl__b{max-width:74ch}
/* One step down from a section break. The panel is centred, so whatever this
   gap gives up is returned to the top and the bottom in equal share. */
.bl__t{margin-bottom:var(--sp-blk)}

/* ---- the instrument -------------------------------------------------
   A panel on ink at the card radius. Four levers, a score, and the
   consequence of where they sit. */
.al{border:1px solid var(--rule-ds);border-radius:var(--r-card);
  background:rgba(246,245,242,.035);overflow:hidden;box-shadow:var(--sh-lift-d)}
.al__hd{display:flex;flex-wrap:wrap;gap:var(--f3);align-items:flex-end;
  justify-content:space-between;
  padding:var(--sp-itm) var(--sp-grp);border-bottom:1px solid var(--rule-ds)}
.al__h{font-weight:700;font-size:clamp(1.05rem,1.5vw,1.25rem);letter-spacing:-.028em;color:#fff}
.al__n{margin-top:var(--f1);max-width:52ch}
.al__score{display:flex;align-items:baseline;gap:var(--f2);white-space:nowrap}
.al__score b{font-weight:800;font-size:1.35rem;letter-spacing:-.03em;color:var(--sig-mid);
  font-variant-numeric:tabular-nums;transition:color .4s var(--e)}
.al__score b.is-low{color:var(--sig-low)}
.al__score b.is-ok{color:var(--sig-ok)}

/* 3:2 — the levers against what they add up to */
.al__b{gap:0}
@media(min-width:900px){.al__b{gap:0}}
.al__ls{padding:var(--sp-grp)}
@media(min-width:900px){.al__ls{border-right:1px solid var(--rule-ds)}}
@media(max-width:899px){.al__ls{border-bottom:1px solid var(--rule-ds)}}

.al__l + .al__l{margin-top:var(--sp-tgt)}
.al__lt{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:var(--f1);font-size:.875rem}
.al__lb{display:flex;align-items:center;gap:var(--f2);color:rgba(246,245,242,.9)}
.al__v{font-weight:700;color:rgba(246,245,242,.55);font-variant-numeric:tabular-nums}
/* every part of a lever reads the same signal, so one glance down the column
   tells you which one is costing you */
.al__l{--sig:var(--sig-low)}
.al__l.is-mid{--sig:var(--sig-mid)}
.al__l.is-ok{--sig:var(--sig-ok)}
.al__d{width:7px;height:7px;border-radius:50%;background:var(--sig);
  transition:background .35s var(--e),box-shadow .35s var(--e)}
.al__l.is-ok .al__d{box-shadow:0 0 0 3px rgba(127,169,140,.18)}

/* the track fills to the lever's position, and eases when it moves */
.al__l input[type=range]{--fill:50%;-webkit-appearance:none;appearance:none;
  width:100%;height:2px;border-radius:2px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,var(--sig) 0 var(--fill),rgba(246,245,242,.18) var(--fill) 100%);
  transition:background .35s var(--e)}
.al__l input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:var(--f2);height:var(--f2);border-radius:50%;background:var(--sig);
  border:2px solid var(--ink);box-shadow:0 0 0 1px var(--sig);cursor:pointer;
  transition:transform .25s var(--e),box-shadow .25s var(--e)}
.al__l input[type=range]::-moz-range-thumb{width:var(--f2);height:var(--f2);border:2px solid var(--ink);
  border-radius:50%;background:var(--sig);box-shadow:0 0 0 1px var(--sig);cursor:pointer}
.al__l input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.18)}
.al__l input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(246,245,242,.32)}

.al__c{padding:var(--sp-grp);display:flex;flex-direction:column;
  justify-content:flex-start;gap:var(--sp-blk)}
.al__cta{margin-top:auto}
.al__ct{font-weight:500;font-size:clamp(1.02rem,1.35vw,1.16rem);line-height:1.42;
  letter-spacing:-.018em;color:rgba(246,245,242,.92);
  transition:opacity .3s var(--e)}
.al__ct.is-out{opacity:0}
.al__ct .tag{display:block;margin-bottom:var(--f2);color:var(--sig-mid);
  transition:color .3s var(--e)}
.al__ct.is-low .tag{color:var(--sig-low)}
.al__ct.is-ok  .tag{color:var(--sig-ok)}
@media (prefers-reduced-motion:reduce){
  .al__ct,.al__d,.al__l input[type=range]{transition:none}
}

/* ============================================================
   THE MEASURE — three spans on one unbroken rule
   ============================================================ */
/* Three cards, at the same radius as the bento below and the instrument in
   the belief section, so the page has one card language rather than four
   treatments. The shared rule with its tick marks is gone: at three columns
   the column gaps broke it into three pieces, which said the opposite of
   'under one roof'. */
.ms{display:grid;grid-template-columns:1fr;gap:var(--sp-itm)}
@media(min-width:880px){.ms{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}}
.ms__s{position:relative;display:flex;flex-direction:column;
  padding:var(--sp-itm) var(--sp-grp);
  border:1px solid var(--rule-s);border-radius:var(--r-card);
  background:var(--paper);box-shadow:var(--sh-rest);
  transition:border-color .28s var(--e),box-shadow .28s var(--e),transform .28s var(--e)}
@media(min-width:880px){
  .ms__s:hover{border-color:var(--rule);box-shadow:var(--sh-lift);transform:translateY(-2px)}
}
.ms__n{font-size:.7rem;font-weight:700;letter-spacing:.15em;color:var(--blue-d)}
.ms__s h3{margin-top:var(--f2);font-weight:800;font-size:clamp(1.35rem,2.2vw,1.75rem);
  line-height:1.14;letter-spacing:-.036em;min-height:2.28em}
.ms__s p{margin-top:var(--f2);color:var(--graphite);font-size:.94rem;line-height:1.5;
  max-width:32ch;min-height:4.5em}

/* ---- the phases, folded away until asked for -------------------------
   One open at a time. The room is taken only while a phase is open, so the
   closed card stays tight — which is what makes the open state fit the
   screen without a permanent gap holding space for it. */
.ms__ph{padding-top:var(--sp-tgt)}
.ph{border-top:1px solid var(--rule-s)}
.ph summary{list-style:none;cursor:pointer;padding:var(--f1) 0;
  display:flex;align-items:center;justify-content:space-between;gap:var(--f2);
  font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--graphite);transition:color .22s var(--e)}
.ph summary::-webkit-details-marker{display:none}
.ph summary::after{content:"";width:var(--f1);height:var(--f1);flex:0 0 auto;
  border-right:1.5px solid var(--blue-d);border-bottom:1.5px solid var(--blue-d);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--e)}
.ph[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.ph summary:hover{color:var(--ink)}
.ph[open] summary{color:var(--ink);cursor:default}
.ph[open]{border-top-color:var(--rule)}
.ph > p{font-size:.85rem;line-height:1.44;color:var(--graphite);padding-bottom:var(--sp-tgt)}

/* ---- the two commitments, as a bento ---------------------------------
   3:2, so the pair is weighted rather than symmetrical, and each tile
   carries its own device — a figure on one, the pod on the other. */
.bn{display:grid;grid-template-columns:1fr;gap:var(--sp-itm);margin-top:var(--sp-itm)}
@media(min-width:760px){.bn{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
.bn__t{border:1px solid var(--rule-s);border-radius:var(--r-card);
  padding:var(--sp-itm) var(--sp-grp);background:var(--paper);
  box-shadow:var(--sh-rest);
  transition:border-color .28s var(--e),box-shadow .28s var(--e),transform .28s var(--e)}
.bn__t:hover{border-color:var(--rule);box-shadow:var(--sh-lift);transform:translateY(-2px)}
.bn__t .tag{display:block;margin-bottom:var(--f2)}
.bn__p{font-size:.92rem;line-height:1.5;color:var(--graphite);max-width:46ch}
/* the figure states the promise before the sentence explains it */
/* "Within 2 weeks" is a phrase, not a number with a unit stuck after it. Set
   in uppercase grey the words either side read as a second label under the
   tag, and left the big numeral stranded in the middle of a line it was
   supposed to lead. Sentence case, in the ink, one size up. */
.bn__f{display:flex;align-items:baseline;gap:.28em;margin-bottom:var(--f1);
  font-size:1.02rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.bn__f b{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;letter-spacing:-.04em;
  line-height:1;color:var(--ink)}
/* five dots: the pod, fixed, not a bench you get rotated through */
.bn__pod{display:flex;gap:var(--f1);margin-top:var(--sp-itm)}
.bn__pod li{width:var(--f2);height:var(--f2);border-radius:50%;background:var(--blue);
  opacity:.9;transition:transform .3s var(--e)}
.bn__t--b:hover .bn__pod li{transform:translateY(-2px)}
.bn__t--b:hover .bn__pod li:nth-child(2){transition-delay:.04s}
.bn__t--b:hover .bn__pod li:nth-child(3){transition-delay:.08s}
.bn__t--b:hover .bn__pod li:nth-child(4){transition-delay:.12s}
.bn__t--b:hover .bn__pod li:nth-child(5){transition-delay:.16s}
@media (prefers-reduced-motion:reduce){
  .bn__t,.bn__pod li,.ph summary::after{transition:none}
}

/* ============================================================
   FOCUS — the four things a brand wants before it wants us

   Spacing here is set from one unit and the ratio, not from three
   different spacing roles. Inside the pager the roles are clamped
   against viewport height, which drags them toward each other: all
   three gaps in this section came out at 28px, so the claim, the lede,
   the cards and the close read as four equal things instead of a
   hierarchy. Deriving them keeps 1 : phi at every screen height.
   ============================================================ */
/* .hd carries its own bottom margin, which is larger than the tight step and
   wins the collapse — so the first gap came from the heading block rather
   than from the ratio. Zeroed here so the unit governs all three. */
.fy .hd{margin-bottom:0}
.fy{--fy-u:var(--sp-grp)}                    /* the tight step */
.fy{--fy-b:calc(var(--fy-u) * 1.618)}        /* and the break between groups */

/* the lede carries the argument, so it is set larger than the cards under it.
   It sits one tight step under the heading — they are one thought. */
.fy__lead{font-size:clamp(1.05rem,1.45vw,1.2rem);line-height:1.5;
  letter-spacing:-.014em;color:var(--ink);max-width:66ch;margin-top:var(--fy-u)}

/* Two by two on desktop, one column below 760. The tile takes its border,
   radius, shadow and lift from the Approach bento deliberately — same object,
   same behaviour, so the page reads as one system rather than four.
   Its own proportions are the raw Fibonacci steps, which are exactly golden:
   21/13 and 34/21 are both 1.618, where the clamped roles were 1.32. */
.fy__q{list-style:none;display:grid;grid-template-columns:1fr;
  gap:var(--f3);margin-top:var(--fy-b)}
@media(min-width:760px){
  .fy__q{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--f3) var(--f4)}
}
.fy__i{padding:var(--f3) var(--f4);border:1px solid var(--rule-s);
  border-radius:var(--r-card);background:var(--paper);box-shadow:var(--sh-rest);
  transition:border-color .28s var(--e),box-shadow .28s var(--e),transform .28s var(--e)}
.fy__i:hover{border-color:var(--rule);box-shadow:var(--sh-lift);transform:translateY(-2px)}
.fy__i h3{font-size:clamp(1rem,1.4vw,1.16rem);font-weight:800;letter-spacing:-.026em;
  line-height:1.2;color:var(--ink)}
.fy__i p{margin-top:var(--f2);color:var(--graphite);font-size:.93rem;line-height:1.5}

.fy__cta{margin-top:var(--fy-b);font-size:.95rem;color:var(--graphite)}

/* The four arrive one after another rather than as a slab. They are the
   substance of the section, so they are worth the extra beat; the delays
   pick up where the panel's own sequence leaves off. */
.rv .fy__i{opacity:0;transform:translateY(var(--f3));
  transition:opacity .85s var(--e),transform .85s var(--e)}
.rv.in .fy__i{opacity:1;transform:none}
.rv.in .fy__i:nth-child(1){transition-delay:.46s}
.rv.in .fy__i:nth-child(2){transition-delay:.60s}
.rv.in .fy__i:nth-child(3){transition-delay:.74s}
.rv.in .fy__i:nth-child(4){transition-delay:.88s}
/* the lift on hover keeps working while the entrance transition is declared */
.rv.in .fy__i:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
  .rv .fy__i{opacity:1;transform:none;transition:none}
}

/* ============================================================
   CLOSE + FORM
   ============================================================ */
.cl{text-align:center}
.cl__g{max-width:var(--page);width:min(640px,100%);margin-inline:auto}
.sig{margin-top:var(--sp-blk);font-weight:800;
  font-size:clamp(2rem,5.4vw,4.2rem);line-height:1;letter-spacing:-.045em;color:var(--ink)}
/* 2:3 — the closing statement against the form */
.ct{margin-top:var(--sp-sec);padding-top:var(--sp-blk);border-top:1px solid var(--rule);
  text-align:left;align-items:start}
.f{display:grid;gap:var(--sp-itm)}
.f__r{display:grid;grid-template-columns:1fr;gap:var(--sp-itm)}
@media(min-width:560px){.f__r{grid-template-columns:1fr 1fr}}
.f label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);margin-bottom:var(--f1)}
/* On tint the field has to read as a field: paper is the one surface lighter
   than its ground, so the input is the lit thing rather than a hole in it. */
.f input,.f textarea{width:100%;background:var(--paper);color:var(--ink);font:inherit;font-size:.96rem;
  border:1px solid var(--rule-s);padding:var(--f2);border-radius:var(--r-inp);
  transition:border-color .22s var(--e),box-shadow .22s var(--e)}
.f input:focus,.f textarea:focus{outline:0;border-color:var(--blue-d);
  box-shadow:0 0 0 3px rgba(18,59,254,.12)}
.f input::placeholder,.f textarea::placeholder{color:var(--grey);opacity:.75}
.f textarea{resize:vertical;min-height:var(--f6)}
.f__a{display:flex;flex-wrap:wrap;gap:var(--sp-itm);align-items:center;margin-top:var(--f1)}
.f__n{font-size:.82rem;color:var(--grey)}

/* ============================================================
   FOOTER
   ============================================================ */
.ft{background:var(--ink);color:rgba(246,245,242,.74);
  /* A fixed step, not a spacing role. Inside the pager the roles become
     height-aware and collapse — --sp-blk lands at 28px on a 900 screen, which
     is what the foot had before. The footer is not a fixed-height panel and
     has no budget to defend, so it keeps its air. */
  padding:var(--sp-sec) 0 var(--f5);border-top:1px solid var(--rule-ds)}
/* 2:3 — the mark and address against the link columns */
.ft__t{display:grid;grid-template-columns:1fr;gap:var(--sp-blk)}
@media(min-width:760px){.ft__t{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--sp-sec)}}
.ft__b img{height:34px;width:auto}
.ft__b p{margin-top:var(--f3);max-width:32ch;color:rgba(246,245,242,.68);font-size:.9rem}
.ft__b address{margin-top:var(--f3);font-style:normal;font-size:.9rem;line-height:1.75}
.ft__b address a{text-decoration:none;border-bottom:1px solid var(--rule-d)}
.ft__b address a:hover{color:#fff;border-color:var(--blue-l)}
.soc{display:flex;gap:var(--f1);margin-top:var(--sp-grp)}
.soc a{display:inline-flex;align-items:center;justify-content:center;width:var(--f4);height:var(--f4);
  border:1px solid var(--rule-d);border-radius:var(--r-chip);color:rgba(246,245,242,.78);
  transition:border-color .22s var(--e),color .22s var(--e),transform .22s var(--e)}
.soc a:hover{border-color:var(--blue-l);color:#fff;transform:translateY(-2px)}
.soc svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.ft__n{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-grp)}
.ft__n h3{font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(246,245,242,.5);margin-bottom:var(--f3)}
.ft__n a,.ft__n button{display:block;text-align:left;text-decoration:none;font-size:.9rem;
  color:rgba(246,245,242,.74);padding:.28em 0;transition:color .2s var(--e)}
.ft__n a:hover,.ft__n button:hover{color:#fff}
/* The close is a stack, not a row: the sign-off is the brand's own line and
   reads as one when it is centred and alone, with the legal line under it. */
.ft__e{margin-top:var(--sp-blk);padding-top:var(--f3);border-top:1px solid var(--rule-ds);
  display:grid;justify-items:center;gap:var(--f2);text-align:center}
.ft__e p{font-size:.82rem;color:rgba(246,245,242,.6)}
/* A small diamond at each end of the sign-off. Drawn rather than typed: a
   rotated square holds its weight at 5px, where the glyph in a text font is
   at the mercy of whatever is installed. They are empty and aria-hidden —
   drawing, not text. */
.ft__sign{color:rgba(246,245,242,.82);letter-spacing:-.008em;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--f2) var(--f3);text-wrap:balance}
.ft__sign i{flex:0 0 auto;width:5px;height:5px;transform:rotate(45deg);
  background:var(--blue-l);opacity:.75}
@media(max-width:520px){ .ft__sign i{display:none} }

.ft__law{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.5rem}
.ft__law span{opacity:.45}
/* a button, because it opens a dialog rather than going anywhere — styled as
   the link it reads as */
.ft__lnk{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  border-bottom:1px solid var(--rule-d);transition:color .2s var(--e),border-color .2s var(--e)}
.ft__lnk:hover,.ft__lnk:focus-visible{color:#fff;border-color:var(--blue-l)}


/* ============================================================
   DIALOG
   ============================================================ */
dialog{max-width:720px;width:calc(100% - var(--f4));max-height:84vh;padding:0;border:0;border-radius:var(--r-card);
  background:var(--paper);color:var(--ink);overflow:hidden}
dialog::backdrop{background:rgba(10,22,38,.66);backdrop-filter:blur(3px)}
.dl{display:flex;flex-direction:column;max-height:84vh}
.dl__h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--f3);
  padding:var(--sp-itm) var(--sp-itm) var(--f2);border-bottom:1px solid var(--rule-s)}
.dl__x{flex:0 0 auto;width:var(--f4);height:var(--f4);display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);border-radius:var(--r-chip);font-size:1.15rem;line-height:1;
  transition:border-color .2s var(--e),background .2s var(--e)}
.dl__x:hover{border-color:var(--ink);background:rgba(10,22,38,.05)}
/* contain, so reaching the end of a policy does not hand the rest of the
   gesture to the page behind it */
.dl__b{padding:var(--sp-itm);overflow-y:auto;overscroll-behavior:contain}
.dl__b h3{font-weight:800;font-size:1rem;letter-spacing:-.026em;margin-top:var(--sp-grp)}
.dl__b h3:first-child{margin-top:0}
.dl__b p{color:var(--graphite);margin-top:var(--f1);max-width:62ch}
.dl__b ul{margin-top:var(--f2)}
.dl__b ul li{padding:.32em 0 .32em 1.1rem;position:relative;color:var(--graphite);font-size:.96rem}
.dl__b ul li::before{content:"";position:absolute;left:0;top:.95em;width:var(--f1);height:1px;background:var(--blue)}

/* the legal dialogs are long, so they read narrower and looser than the
   careers one, and the revision date sits apart from the clauses */
.dl__b--legal p{max-width:70ch}
.dl__b--legal h3{margin-top:var(--sp-blk)}
/* The clauses are mostly lists, and the dialog's default dash sat on a lot of
   air — 34px a line for one short phrase, which reads as a loose draft rather
   than a document. A round bullet and half the padding tightens each list into
   a block you can scan. */
.dl__b--legal ul{margin-top:var(--f1)}
.dl__b--legal ul li{padding:.1em 0 .1em 1.05rem;font-size:.93rem;line-height:1.5}
.dl__b--legal ul li::before{content:"";top:.66em;left:.2rem;
  width:4px;height:4px;border-radius:50%;background:var(--blue)}
.dl__b--legal ul + p{margin-top:var(--f2)}
.dl__meta{font-size:.72rem !important;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey) !important;margin-bottom:var(--sp-grp)}
.dl__addr{line-height:1.7}

/* ---- open roles ------------------------------------------------------
   A card per position, not a paragraph about hiring. Scoped under .dl__b
   so it outranks the dialog's own list styling, which draws a dash bullet
   and indents — neither of which a card wants. */
.dl__b .rl{margin-top:var(--sp-grp);display:grid;gap:var(--f2)}
.dl__b .rl__i{padding:var(--sp-grp);border:1px solid var(--rule);border-radius:var(--r-card);
  background:var(--paper);
  transition:border-color .22s var(--e),box-shadow .22s var(--e)}
.dl__b .rl__i::before{content:none}
.dl__b .rl__i:hover{border-color:var(--ink);box-shadow:var(--sh-rest)}
.dl__b .rl__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--f2) var(--f3)}
.dl__b .rl__t{font-weight:800;font-size:1.06rem;letter-spacing:-.026em;color:var(--ink);margin:0}
.dl__b .rl__m{display:flex;align-items:center;gap:var(--f2);margin:0;font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.dl__b .rl__m span+span{position:relative;padding-left:var(--f2)}
.dl__b .rl__m span+span::before{content:"";position:absolute;left:0;top:50%;
  width:5px;height:1px;background:var(--rule)}
.dl__b .rl__s{margin-top:var(--f2);color:var(--graphite);font-size:.94rem;max-width:60ch}
.dl__b .rl__a{margin-top:var(--sp-itm);display:flex;flex-wrap:wrap;align-items:center;gap:var(--f3)}
.btn--sm{padding:.62em 1.05em;font-size:.85rem}

/* ============================================================
   THE PEOPLE — a soft-cornered 2:3 card in two layers
   Layer 1  the portrait, fixed, filling the top two thirds.
   Layer 2  one sheet carrying identity (⅓) and the brief (⅔).
            At rest the sheet sits two thirds down, so only the
            identity shows. On hover it rides up over the portrait
            and covers it — the portrait itself never moves.
   GSAP drives it when present (.tm.is-gsap); the rules below are
   the fallback and are also what runs with JS off.
   ============================================================ */
.tm{--tm-cols:1.12;--tm-gap:clamp(var(--f2),1.5vw,var(--f3));--tm-r:var(--r-card);
    --tm-soft:cubic-bezier(.16,.84,.24,1);
    margin-top:var(--sp-blk)}
@media(min-width:560px){.tm{--tm-cols:2.12}}
@media(min-width:940px){.tm{--tm-cols:3}}
.tm__sp{position:absolute;width:0;height:0;overflow:hidden}

/* section header meta */
.tm__st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--f3);margin-top:var(--sp-grp);
  padding-top:var(--f3);border-top:1px solid var(--rule)}
.tm__st li{display:grid;gap:.25rem;align-content:start}
.tm__st b{font-size:1.3rem;font-weight:800;letter-spacing:-.035em;line-height:1}
.tm__st span{font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--grey)}

/* the rail ------------------------------------------------- */
.tm__rail{position:relative}
.tm__vp{overflow-x:auto;overflow-y:hidden;
  padding-block:var(--f3);margin-block:calc(var(--f3) * -1);   /* room for the card shadow */
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.tm__vp::-webkit-scrollbar{display:none}
.tm__vp.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.tm.is-tw .tm__vp{scroll-snap-type:none}             /* while a tween owns scrollLeft */
.tm__t{display:flex;gap:var(--tm-gap);align-items:stretch}
.tm__i{flex:0 0 calc((100% - (var(--tm-cols) - 1)*var(--tm-gap))/var(--tm-cols));scroll-snap-align:start}

/* the card -------------------------------------------------- */
.tm__c{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--paper);
  border-radius:var(--tm-r);border:1px solid var(--rule-s);
  transition:box-shadow .7s var(--tm-soft),border-color .5s var(--tm-soft),transform .7s var(--tm-soft)}
.tm__c:hover,.tm__c:focus-within,.tm__c.is-open{
  border-color:var(--rule);transform:translateY(-5px);
  box-shadow:var(--sh-lift)}
@media(hover:none){.tm__c{cursor:pointer}}

/* 1 · portrait — stays exactly where it is */
.tm__ph{position:absolute;inset:0;overflow:hidden;background:var(--ink);
  border-radius:var(--tm-r) var(--tm-r) 0 0}
.tm__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  filter:saturate(1.03) contrast(1.02)}
/* Drawn, not a file, and always underneath: a card with no portrait shows it,
   a card whose portrait fails shows it once the broken img is removed, and a
   card with a portrait simply covers it. No class to keep in sync.
   An inline SVG rather than layered gradients — the gradient version parsed
   to background-image:none, which is a silent failure worth avoiding. */
.tm__ph{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E%3Ccircle cx='50' cy='55' r='16' fill='%23F6F5F2' opacity='.15'/%3E%3Cpath d='M21 126c0-17 13-30 29-30s29 13 29 30v24H21z' fill='%23F6F5F2' opacity='.15'/%3E%3C/svg%3E") center 46%/54% no-repeat,
  linear-gradient(180deg,#16202e 0%,#0A1626 100%)}
.tm:not(.is-gsap) .tm__ph img{transition:transform 1s var(--tm-soft)}
.tm:not(.is-gsap) .tm__c:hover .tm__ph img,
.tm:not(.is-gsap) .tm__c:focus-within .tm__ph img,
.tm:not(.is-gsap) .tm__c.is-open .tm__ph img{transform:scale(1.05)}
.tm__ph::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;
  background:linear-gradient(0deg,rgba(10,22,38,.62),rgba(10,22,38,0))}
/* 2 + 3 · the sheet that rides up over the portrait */
/* 2 · identity. Parked entirely below the card and brought up over the
   portrait on hover, so the portrait is the whole card at rest. */
.tm__sh{position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:var(--paper);border-radius:var(--tm-r) var(--tm-r) 0 0;
  box-shadow:0 -20px 44px -28px rgba(10,22,38,.5);
  transform:translateY(100%)}
.tm:not(.is-gsap) .tm__sh{transition:transform .78s var(--tm-soft)}
.tm:not(.is-gsap) .tm__c:hover .tm__sh,
.tm:not(.is-gsap) .tm__c:focus-within .tm__sh,
.tm:not(.is-gsap) .tm__c.is-open .tm__sh{transform:translateY(0)}
/* Without a pointer there is no hover to reveal it, so it simply stays up. */
@media(hover:none){
  .tm__sh{transform:none}
  .tm:not(.is-gsap) .tm__sh{transition:none}
}
.tm__id{display:flex;flex-direction:column;justify-content:center;gap:.3rem;overflow:hidden;
  padding:clamp(16px,1.6vw,22px) clamp(15px,1.6vw,22px) clamp(10px,1.1vw,15px)}
.tm__n{font-weight:800;font-size:clamp(1.02rem,1.2vw,1.18rem);letter-spacing:-.03em;line-height:1.12}
.tm__r{font-size:.645rem;font-weight:700;letter-spacing:.125em;text-transform:uppercase;
  color:var(--blue-d);line-height:1.35}
.tm__s{display:flex;gap:.35rem;margin-top:.35rem}
.tm__s a{width:var(--f4);height:var(--f4);display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);border-radius:var(--r-chip);color:var(--graphite);
  transition:border-color .3s var(--tm-soft),color .3s var(--tm-soft),
             background .3s var(--tm-soft),transform .3s var(--tm-soft)}
.tm__s a:hover{border-color:var(--blue-d);color:#fff;background:var(--blue-d);transform:translateY(-2px)}
.tm__s svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* 3 · the brief */
.tm__b{display:flex;flex-direction:column;overflow:hidden;
  padding:clamp(14px,1.5vw,20px) clamp(15px,1.6vw,22px) clamp(16px,1.7vw,22px);
  border-top:1px solid var(--rule-s);color:var(--graphite);font-size:.92rem;line-height:1.55}
.tm__bt{max-width:38ch}
.tm__tg{display:flex;flex-wrap:wrap;gap:var(--f1);padding-top:var(--f3)}
.tm__tg li{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);border:1px solid var(--rule-s);border-radius:999px;padding:.36em .72em;line-height:1}
.tm__ml{margin-top:auto;padding-top:1.15rem;align-self:flex-start;font-size:.82rem}
.tm__ml svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* the arrows — a disc, a hairline ring, a shaft that draws out ---- */
.tm__nav{position:absolute;top:50%;z-index:6;width:56px;height:56px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink);
  transform:translateY(-50%);
  transition:transform .5s var(--tm-soft),color .35s var(--tm-soft),opacity .4s var(--tm-soft)}
.tm__nav--p{left:calc(-1*clamp(18px,2.4vw,44px))}
.tm__nav--n{right:calc(-1*clamp(18px,2.4vw,44px))}
.tm:has(.tm__c:hover) .tm__nav,.tm:has(.tm__c.is-open) .tm__nav{opacity:.16}
.tm .tm__nav:hover,.tm .tm__nav:focus-visible{opacity:1}
.tm__nav__d{position:absolute;inset:0;border-radius:999px;
  background:rgba(246,245,242,.82);border:1px solid rgba(10,22,38,.10);
  backdrop-filter:blur(11px) saturate(1.5);-webkit-backdrop-filter:blur(11px) saturate(1.5);
  box-shadow:0 12px 30px -18px rgba(10,22,38,.6);
  transition:background .4s var(--tm-soft),border-color .4s var(--tm-soft),
             box-shadow .5s var(--tm-soft)}
.tm__nav svg{position:absolute;inset:0;width:100%;height:100%;fill:none}
.tm__nav__ring{stroke:rgba(10,22,38,.13);stroke-width:1}
.tm__nav__pg{stroke:var(--blue);stroke-width:2;stroke-linecap:round;opacity:0;
  transform:rotate(-90deg);transform-origin:50% 50%;transition:opacity .4s var(--tm-soft)}
.tm.is-gsap .tm__nav__pg{opacity:.9}
.tm__nav__g{stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tm__nav__sh{opacity:.5;transform:scaleX(.4);
  transition:transform .5s var(--tm-soft),opacity .4s var(--tm-soft)}
.tm__nav--n .tm__nav__sh{transform-origin:64% 50%}
.tm__nav--p .tm__nav__sh{transform-origin:36% 50%}
.tm__nav:hover{color:var(--paper);transform:translateY(-50%) scale(1.06)}
.tm__nav:hover .tm__nav__d{background:var(--ink);border-color:var(--ink);
  box-shadow:0 18px 38px -20px rgba(10,22,38,.75)}
.tm__nav:hover .tm__nav__ring{stroke:rgba(246,245,242,.28)}
.tm__nav:hover .tm__nav__sh{transform:scaleX(1);opacity:1}
.tm__nav:active{transform:translateY(-50%) scale(.97)}
@media(max-width:560px){.tm__nav{width:46px;height:46px}}

/* markers and count ------------------------------------------- */
.tm__hd{display:grid;grid-template-columns:1fr;gap:clamp(14px,2vw,28px)}
@media(min-width:900px){
  /* Tops, not bottoms. Bottom-aligning worked while the heading ran to three
     lines and the two columns were near enough the same height. At two lines
     the heading is 80px shorter than the lede and stats beside it, so end
     alignment dropped it down the panel and opened a hole above it. */
  .tm__hd{grid-template-columns:minmax(0,1fr) minmax(0,.84fr);align-items:start;gap:clamp(32px,5vw,80px)}
}
.tm__ui{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  margin-top:clamp(16px,2vw,26px);padding-top:clamp(13px,1.6vw,19px);border-top:1px solid var(--rule)}
.tm__mk{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.tm__mk button{width:28px;height:16px;display:inline-flex;align-items:center;padding:0}
.tm__mk button::before{content:"";width:100%;height:1px;border-radius:1px;background:var(--rule);
  transition:background .45s var(--tm-soft),height .45s var(--tm-soft)}
.tm__mk button:hover::before{background:var(--graphite)}
.tm__mk button[aria-current="true"]::before{background:var(--blue);height:2px}
.tm__ct{font-size:.7rem;font-weight:700;letter-spacing:.14em;color:var(--grey)}
.tm__ct i{font-style:normal;opacity:.45;margin:0 .1rem}

/* ============================================================
   MOTION
   ============================================================ */
.rv{opacity:0;transform:translateY(12px);transition:opacity .7s var(--e),transform .7s var(--e)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
  .gap__m{transform:scaleX(1)}
}

/* ============================================================
   HERO INTELLIGENCE GLOBE (additive layer — hero background only)
   ============================================================ */
.hero{position:relative;overflow:hidden;isolation:isolate}
/* Layer 01 — deep space (behind the transparent WebGL canvas) */
/* Held down until the globe's timeline reveals them (see head.html). globe.js
   reveals by setting opacity inline, which outranks these, so the failsafe and
   the reduced-motion path both still work. */
html.hero-armed .hero .tag,
html.hero-armed .hero .d1,
html.hero-armed .hero .lede,
html.hero-armed .hero .btns,
html.hero-armed .hero__gap{opacity:0;transform:translateY(14px)}
html.hero-armed #nv{opacity:0}

#tsl-globe{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(125% 105% at 70% 42%, #060d18 0%, #04080f 46%, #02050a 100%)}
#tsl-globe canvas{display:block;width:100%;height:100%}
#tsl-labels{position:absolute;inset:0;z-index:1;pointer-events:none}
/* Layer 15 — subtle cinematic vignette */
.hero__vig{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 120% at 62% 45%, rgba(2,5,10,0) 55%, rgba(2,5,10,.45) 100%)}
/* left-weighted legibility veil so copy stays crisp over the globe */
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg, var(--ink) 0%, rgba(10,22,38,.92) 26%, rgba(10,22,38,.55) 46%, rgba(10,22,38,.12) 66%, rgba(10,22,38,0) 82%),
    linear-gradient(0deg, rgba(10,22,38,.55) 0%, rgba(10,22,38,0) 30%);}
@media(max-width:760px){.hero__veil{background:linear-gradient(180deg, rgba(10,22,38,.30) 0%, rgba(10,22,38,.72) 55%, var(--ink) 100%)}}
.hero .wrap{position:relative;z-index:2}
/* Staged reveal is driven by inline opacity set in JS (deterministic; always
   fails open via a hard timeout). No opacity rules here, so nothing fights the
   page's existing .rv styles. */

/* ============================================================
   RESPONSIVE POLISH — mobile + tablet only. Desktop (>900px)
   is untouched; every rule below lives inside a media query.
   ============================================================ */
html,body{max-width:100%;overflow-x:hidden}          /* safety net: never scroll sideways */
*{min-width:0}                                        /* let flex/grid children shrink, no overflow */

/* Tablet — keep side-by-side, ease the globe down a touch, tighten nav */
@media(max-width:1100px) and (min-width:901px){
  .hero__veil{background:
    linear-gradient(100deg, var(--ink) 0%, rgba(10,22,38,.92) 30%, rgba(10,22,38,.5) 52%, rgba(10,22,38,.1) 72%, rgba(10,22,38,0) 86%),
    linear-gradient(0deg, rgba(10,22,38,.5) 0%, rgba(10,22,38,0) 30%);}
}

/* Mobile — immersive globe backdrop, headline-first, everything fits the fold */
@media(max-width:760px){
  /* stronger top-weighted veil so copy stays crisp over the lit globe */
  .hero__veil{background:linear-gradient(180deg,
    rgba(6,10,18,.78) 0%, rgba(6,10,18,.60) 30%, rgba(10,22,38,.34) 58%, rgba(10,22,38,.62) 100%)}
  .hero__vig{background:radial-gradient(150% 130% at 50% 40%, rgba(2,5,10,0) 52%, rgba(2,5,10,.5) 100%)}
  /* pull the core hero (headline → CTA) up into the first viewport */
  .hero{padding-block:calc(var(--nav) + 20px) 40px}
  .hero .lede{margin-top:1.05rem;max-width:96%}
  .hero .btns{margin-top:1.5rem;flex-direction:column;gap:.7rem}
  .hero .btns .btn{width:100%;justify-content:center;min-height:52px}   /* touch target ≥48px */
  .btn--g{border-color:rgba(246,245,242,.42)}                            /* secondary readable over globe */
}

/* Small phones — keep the two-line-per-thought headline balanced, never clipped */
@media(max-width:430px){
  .hero .d1{font-size:clamp(2.15rem,10vw,3rem);letter-spacing:-.03em}
  .hero .lede{font-size:1.02rem}
  .wrap{padding-inline:20px}
}
@media(max-width:360px){
  .hero .d1{font-size:clamp(1.95rem,10.5vw,2.6rem)}
}