/* Futuresafe v7 · one stylesheet for every page. Evolve tokens; Space Grotesk (display) + Satoshi (body). */
@font-face{font-family:'Space Grotesk';src:url('assets/SpaceGrotesk-Variable.woff2?v=a0d054c4af') format('woff2');font-weight:300 700;font-display:swap}
:root{
  --ground:#050E16; --navy:#07141F; --raised:#0E2233; --ice:#EAF2F8; --paper:#FDFEFF;
  --blue:#008FE8; --bridge:#00BBD4; --signal:#00E0A4; --deep:#00795A; --slate:#5A6E83; --mist:#9DB2C4;
  --paper-a08:rgba(253,254,255,.08); --paper-a14:rgba(253,254,255,.14); --paper-a24:rgba(253,254,255,.24); --paper-a60:rgba(253,254,255,.6); --paper-a12:rgba(253,254,255,.12);
  --ink-2:rgba(7,20,31,.76); --navy-a05:rgba(7,20,31,.06); --navy-a12:rgba(7,20,31,.12); --navy-a20:rgba(7,20,31,.2);
  --raised-a:rgba(14,34,51,.55); --sig-a16:rgba(0,224,164,.16); --bridge-a18:rgba(0,187,212,.18); --mist-a30:rgba(157,178,196,.3);
  --ramp:linear-gradient(118deg,#008FE8 0%,#00BBD4 52%,#00E0A4 100%);
  --f-d:'Space Grotesk',system-ui,sans-serif; --f-b:'Satoshi',system-ui,sans-serif;
  /* --max is the content width; the gutter grows past 1440 so every section, nav and footer holds a 1440 container
     (80px gutters round 1280 of content, the width every panel and pgrid is drawn at). Backgrounds still run edge to edge. */
  --gut:max(80px, calc((100vw - var(--max)) / 2)); --sec:176px; --max:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ground);scroll-behavior:smooth}
body{background:var(--ground);color:var(--paper);font-family:var(--f-b);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none} img{display:block;max-width:100%;height:auto} ul,ol{list-style:none}
.tn{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.light :focus-visible,.bar :focus-visible,.ramped :focus-visible,.model :focus-visible{outline-color:var(--navy)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--paper);color:var(--navy);padding:10px 16px;border-radius:8px;font-weight:500}.skip:focus{top:12px}
main:focus{outline:none}

/* ---------- type ---------- */
.h1{font:700 64px/1.04 var(--f-d);letter-spacing:-.03em;text-wrap:balance}
.h1.xl{font-size:84px;line-height:.98;letter-spacing:-.035em}
.h2{font:600 48px/1.08 var(--f-d);letter-spacing:-.022em;text-wrap:balance}
.h3{font:600 22px/1.25 var(--f-d);letter-spacing:-.01em}
.hl{color:var(--signal)} .hl2{color:var(--bridge)}
.lead{font-size:18px;font-weight:500;line-height:1.55;color:var(--mist)} .lead.big{font-size:21px;line-height:1.5;color:var(--paper)}
.body{font-size:16px;line-height:1.62;color:var(--mist)} .sm{font-size:14.5px}
.label{display:inline-flex;align-items:center;gap:8px;font:700 11.5px var(--f-b);color:var(--signal);letter-spacing:.14em;text-transform:uppercase}
.label svg{width:15px;height:15px;flex:none} .hexi{fill:var(--signal)}
.label.on-light{color:var(--deep)} .on-light .hexi{fill:var(--deep)}
.label.on-ramp{color:var(--navy)} .on-ramp .hexi{fill:var(--navy)}
.ill{position:absolute;right:14px;top:12px;z-index:3;background:var(--ground);padding:3px 8px;border-radius:4px;font:700 11px var(--f-b);color:var(--mist);letter-spacing:.14em;text-transform:uppercase}
.illk{font:700 11px var(--f-b);letter-spacing:.14em;text-transform:uppercase}
.num{font:500 13px var(--f-b);color:var(--mist)}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;font:500 15px var(--f-b);white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease}
.pill:hover{transform:translateY(-1px)}
.pill.paper{background:var(--paper);color:var(--navy)}
.pill.ghost{background:var(--raised);color:var(--paper);box-shadow:inset 0 0 0 1px var(--paper-a14)}
.pill.line{color:var(--paper);box-shadow:inset 0 0 0 1px var(--paper-a24)}
.pill.ink,.pill.navy{background:var(--navy);color:var(--paper)}
.pill.line-navy{color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.pill.sm{height:36px;padding:0 16px;font-size:13.5px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- chrome ---------- */
.bar{background:var(--signal);color:var(--navy);min-height:34px;display:flex;align-items:center;justify-content:center;gap:12px;font:500 13px var(--f-b);padding:6px 20px}
.bar a{text-decoration:underline;text-underline-offset:3px}
.nav{height:64px;display:flex;align-items:center;padding:0 var(--gut);position:relative;z-index:20}
.nav .logo{display:block;line-height:0}.nav .lock{height:22px;width:auto}
.nav>nav ul{display:flex;gap:34px;position:absolute;left:50%;transform:translateX(-50%);top:0;height:64px;align-items:center;font-size:14.5px;color:var(--mist)}
.nav>nav li{position:relative;display:flex;align-items:center;height:100%}
.nav>nav a{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.nav>nav a:hover,.nav>nav a[aria-current]{color:var(--paper)}
.nav .dd{width:10px;height:6px}.nav .dd path{fill:none;stroke:currentColor;stroke-width:1.4}
.nav .ddm{position:absolute;left:-16px;top:100%;display:none;z-index:30}
.nav li.has-dd:hover .ddm,.nav li.has-dd:focus-within .ddm{display:block}
.nav .ddm ul{position:static;transform:none;height:auto;display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:230px;background:var(--raised);border-radius:10px;padding:8px;box-shadow:inset 0 0 0 1px var(--paper-a14),0 18px 40px rgba(0,0,0,.35)}
.nav .ddm li{height:auto}.nav .ddm a{display:block;width:100%;padding:9px 12px;border-radius:6px;font-size:14px;color:var(--mist)}
.nav .ddm a:hover,.nav .ddm a:focus-visible{background:var(--paper-a08);color:var(--paper)}
.nav .r{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav .menu{display:none;width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer;position:relative}
.nav .menu i{position:absolute;left:10px;right:10px;height:2px;background:var(--paper)}.nav .menu i:nth-child(1){top:14px}.nav .menu i:nth-child(2){top:21px}.nav .menu i:nth-child(3){top:28px}
.mmenu{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--navy);padding:8px 20px 24px;border-bottom:1px solid var(--paper-a14);display:flex;flex-direction:column}
.mmenu[hidden]{display:none}
.mmenu .mhome{padding:16px 0;font:600 20px var(--f-d);border-bottom:1px solid var(--paper-a14)}
.mmenu details{border-bottom:1px solid var(--paper-a14)}
.mmenu summary{list-style:none;cursor:pointer;padding:16px 0;font:600 20px var(--f-d)}.mmenu summary::-webkit-details-marker{display:none}
.mmenu .ddm a{display:block;padding:10px 0;font:500 16px var(--f-b);color:var(--mist)}.mmenu .ddm ul{padding-bottom:12px}
.mmenu .pill{margin-top:20px;justify-content:center}

/* ---------- the first screen: bar + nav + hero = exactly one viewport ---------- */
.first{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;position:relative;overflow:hidden}
.first>.hero{flex:1}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding:24px var(--gut) 56px}
.hero .ht{display:flex;flex-direction:column;align-items:flex-start;gap:22px;position:relative;z-index:2;max-width:680px}
.hero .kick{font:500 14px var(--f-b);color:var(--mist);letter-spacing:.02em}
.hero .sub{font-size:17px;line-height:1.6;color:var(--mist);max-width:620px}
.hero .ctas{margin-top:8px}
.hero .stand{max-width:600px}
.hart{position:relative;height:100%;min-height:420px;display:flex;align-items:center;justify-content:center}
.art{position:relative;width:100%}
.art .grid{display:block;width:100%;height:auto}
.art .grid.mob{display:none}
.aframe{max-width:640px;border-radius:14px;background:rgba(14,34,51,.3);box-shadow:inset 0 0 0 1px var(--paper-a08);padding:22px}

/* Home hero: bigger H1, the mark in cells on the right */
.hhome{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);padding-top:8px}
.hhome .ht{max-width:740px}
.hhome .sub{font-size:16.5px}
.mk{position:relative;width:min(100%,700px);aspect-ratio:1128/936;perspective:1600px;--rx:0deg;--ry:0deg}
.mk-stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(6deg + var(--rx))) rotateY(calc(-14deg + var(--ry)));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.mk-pl{position:absolute;inset:0;width:100%;height:100%}
.mk-b{transform:translate3d(30px,-26px,-110px)} .mk-m{transform:translate3d(15px,-13px,-55px)} .mk-f{transform:translateZ(0)}
.hchip{position:absolute;left:46%;top:44%;z-index:3;display:flex;gap:12px;align-items:center;padding:12px 16px;transform:translate(-50%,-50%)}
.hchip .ill{position:static;background:none;padding:0}
/* cell classes: lit/unlit by color, never opacity */
.g0{fill:var(--raised-a)} .gS{fill:var(--signal)} .gSd{fill:var(--sig-a16)} .gB{fill:var(--bridge)} .gBd{fill:var(--bridge-a18)} .gPl{fill:var(--paper-a60)} .gPd{fill:var(--paper-a12)}
.gM{fill:var(--mist-a30)} .gR{fill:#0B1C2A} .gF{fill:#12293B} .gMi{fill:#0D2231} .gOs{fill:none;stroke:var(--mist);stroke-width:1.2}

/* ---------- sections ---------- */
.sec{position:relative;padding:var(--sec) var(--gut)}
.sec.light{background:var(--ice);color:var(--navy)}
.light .h2,.light .h3{color:var(--navy)} .light .lead,.light .body{color:var(--ink-2)} .light .lead.big{color:var(--navy)}
.ramped{background:var(--ramp);color:var(--navy)} .ramped .h2{color:var(--navy)}
.sc-h{display:flex;justify-content:space-between;align-items:flex-end;gap:72px}
.sc-h .l{max-width:720px;display:flex;flex-direction:column;gap:20px}
.sc-h .r{max-width:520px;display:flex;flex-direction:column;gap:16px}

/* panel + chip (product UI, always Illustrative) */
.panel{background:rgba(14,34,51,.28);border-radius:10px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--paper-a08)}
.panel .grid{position:absolute;left:24px;top:24px;width:calc(100% - 48px);height:calc(100% - 48px);display:block}
.panel .grid.mob{display:none}
.chip{position:absolute;z-index:2;background:var(--ground);border-radius:10px;box-shadow:inset 0 0 0 1px var(--paper-a14);padding:16px 18px}
.achip{left:50%;top:50%;transform:translate(-50%,-50%);padding:12px}
.chip .tl{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.tchip{font:500 12px var(--f-b);height:24px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;color:var(--mist);box-shadow:inset 0 0 0 1px var(--paper-a14)}
.tchip.on{background:var(--paper);color:var(--navy);box-shadow:none}
.chip .q{font:500 20px/1.4 var(--f-b);color:var(--paper)}
.redact{background:var(--paper);color:var(--paper);border-radius:3px;padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.file{max-width:100%;display:inline-flex;gap:8px;align-items:center;margin-top:10px;font:500 13px var(--f-b);color:var(--mist);height:30px;padding:0 12px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--paper-a14)}
.file .bar2{width:34px;height:8px;background:var(--paper);border-radius:2px}
.vrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--paper-a14)}
.vp{font:500 13px var(--f-b);height:28px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;letter-spacing:.02em;white-space:nowrap}
.vp.b{background:var(--paper);color:var(--navy)} .vp.c{color:var(--bridge);box-shadow:inset 0 0 0 1.5px var(--bridge)} .vp.a{background:var(--signal);color:var(--navy)}
.vwhy{font:400 14px var(--f-b);color:var(--mist)}
.code{display:flex;flex-direction:column;gap:7px;margin-top:10px;padding:12px;border-radius:6px;background:var(--navy)}.code i{display:block;height:8px;border-radius:2px;background:var(--slate)}.code i.r{background:var(--paper)}
.codel{font:500 12px var(--f-b);color:var(--mist);margin-top:10px;display:block}
.rowc{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--paper-a14)}.rowc:first-child{border-top:0;padding-top:0}.rowc:last-child{padding-bottom:0}
.chip .label+.rowc{margin-top:12px;border-top:0}
.rowc .nm{font:600 18px var(--f-d)}.rowc .sb{margin-left:auto;font-size:13px;color:var(--mist)}.rowc .vp{margin-left:auto}
.steps{display:flex;align-items:center;gap:12px}
.stp{white-space:nowrap;font:500 18px var(--f-d);height:44px;padding:0 20px;border-radius:999px;display:inline-flex;align-items:center;box-shadow:inset 0 0 0 1px var(--paper-a24);background:var(--ground)}
.stp.o{box-shadow:inset 0 0 0 1.5px var(--signal)}
.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--signal);margin-right:8px}
.arrow{width:40px;height:16px;flex:none}
.slot2{font:600 22px var(--f-d);height:56px;padding:0 24px;border-radius:8px;display:inline-flex;align-items:center;white-space:nowrap;background:var(--ground)}
.slot2.empty{box-shadow:inset 0 0 0 1.5px var(--slate);color:var(--mist)}.slot2.full{background:var(--raised);color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--signal)}
.bigcell{position:relative;width:200px;height:175px;display:flex;align-items:center;justify-content:center}
.bigcell svg{position:absolute;inset:0;width:100%;height:100%}.bigcell span{position:relative;font:600 20px var(--f-d);display:inline-flex;align-items:center}
.bigcell.sm{position:absolute;top:50%;transform:translateY(-50%);width:170px;height:150px}.bigrow{position:absolute;inset:0;z-index:2}
.bl{position:absolute;left:30px;right:30px;height:40px;display:flex;align-items:center;gap:14px;z-index:2}
.bl .nm{font:600 18px var(--f-d);width:200px;background:var(--ground);padding:6px 10px;border-radius:6px}

/* ---------- tabs + pinned scenes ---------- */
.tabs{display:flex;flex-direction:column;gap:6px}
.tab{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;border-radius:999px;color:var(--mist);background:none;border:0;width:100%;text-align:left;cursor:pointer;font:500 15px/1.35 var(--f-b)}
.tab .hi{flex:none;width:18px;height:18px;margin-top:1px}.hi path{fill:none;stroke:var(--mist);stroke-width:1.4}
.tab:hover{color:var(--paper)}
.tab.on{background:var(--paper-a08);color:var(--signal)}.tab.on .hi path{stroke:var(--signal)}
.tab .tx{display:flex;flex-direction:column;gap:3px}.tab .vd2{font-size:13px;color:var(--mist)}.tab.on .vd2{color:var(--signal)}
.tp{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start;min-width:0}.tp[hidden]{display:none}
.mid{display:flex;flex-direction:column;gap:16px;padding-top:6px}.mid .h3{font-size:26px}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}.feat .hi{width:22px;height:22px}.feat h4{font:500 15px var(--f-d);margin:10px 0 6px}
.pin{height:calc(100vh + (var(--steps) - 1) * 62vh)}
.pin-in{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.pin-in>.sec{width:100%;padding-top:40px;padding-bottom:40px}
.itc .sc-h,.progsec .sc-h{margin-bottom:36px}
.prod3{display:grid;grid-template-columns:190px minmax(0,1fr);gap:40px;align-items:start}
.prog{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start;position:relative}
.prog .tp{grid-template-columns:320px minmax(0,1fr)}
.pbar{display:none}

/* ---------- Home: Stacked FOMO + what they are doing instead (one ice section) ---------- */
.trip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:80px;align-items:start}
.trip .card{background:var(--paper);border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--navy-a12);margin-top:calc(var(--k) * 32px)}
.trip .art{background:var(--navy);height:280px;position:relative}.trip .art svg{position:absolute;inset:0;width:100%;height:100%}
.trip .tx{padding:24px 26px 28px;display:flex;flex-direction:column;gap:8px}
.failed{margin-top:var(--sec);padding-top:var(--sec);border-top:1px solid var(--navy-a12)}
.cols4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:72px}
.col{padding:0 28px;border-left:1px solid var(--navy-a12);display:flex;flex-direction:column;gap:12px}.col:first-child{border-left:0;padding-left:0}
.col .n{color:var(--slate)}
.fart{height:200px;display:flex;align-items:center;justify-content:flex-start;border-bottom:1px dotted var(--navy-a20);margin-bottom:6px}.fart svg{width:200px;height:200px}
.fgs{fill:none;stroke:var(--slate);stroke-width:1}.fgg{fill:none;stroke:var(--navy-a20);stroke-dasharray:2 5}.fgl{fill:var(--deep)}.fgo{fill:none;stroke:var(--slate);stroke-width:1.2}
.capstrip{display:flex;flex-wrap:wrap;gap:4px 8px;margin:6px 0}
.cs{font:500 12px var(--f-b);height:24px;padding:0 9px;border-radius:999px;display:inline-flex;align-items:center;color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy-a20)}
.cs.miss{color:var(--slate);text-decoration:line-through}
.key{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:36px;font:500 12.5px var(--f-b);color:var(--ink-2)}.key span{display:inline-flex;align-items:center;gap:8px}

/* ---------- Home: Safeguard replaces the chain (gradient, type only) ---------- */
.replaces{padding-top:200px;padding-bottom:200px}
.rp-a{font:700 112px/.95 var(--f-d);letter-spacing:-.04em;max-width:1200px}
.rp-b{font:500 30px/1.35 var(--f-d);letter-spacing:-.012em;max-width:980px;margin-top:40px}
.replaces .ctas{margin-top:48px}

/* ---------- margin ---------- */
.tile{background:var(--navy-a05);border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:6px}
.tile .k{font:500 14px var(--f-b);color:var(--ink-2)}.tile .v{font:500 40px/1.1 var(--f-b);color:var(--navy);font-variant-numeric:tabular-nums}.tile .s{font:500 13.5px var(--f-b);color:var(--ink-2)}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.teaser .tz{margin:72px 0 22px;display:flex;flex-direction:column;gap:8px;max-width:680px}
.tz-foot{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:24px}.assume{max-width:780px}
.pts4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:72px;border-top:1px solid var(--navy-a20)}
.pt{padding:28px 28px 8px 0;display:flex;flex-direction:column;gap:10px}.pt+.pt{padding-left:28px;border-left:1px solid var(--navy-a12)}.pt svg{width:18px;height:18px}
.model{margin-top:56px;background:var(--paper);border-radius:14px;padding:40px;display:flex;flex-direction:column;gap:30px}
.mh{max-width:660px;display:flex;flex-direction:column;gap:6px}
.mcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.ins{display:flex;flex-direction:column;gap:24px}.inp{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.inp label{font:500 14px var(--f-b);color:var(--ink-2)}.inp .v{font:500 26px/1.1 var(--f-b);color:var(--navy)}.inp input{grid-column:1/-1}
.outs{display:flex;flex-direction:column;gap:12px}.model .tile{background:var(--ice)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--navy) var(--p,50%),var(--slate) var(--p,50%))}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--navy) var(--p,50%),var(--slate) var(--p,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--navy);border:3px solid var(--ice);box-shadow:0 0 0 1.5px var(--navy);margin-top:-8px}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--navy);border:3px solid var(--ice)}

/* ---------- Safeguard ---------- */
.sghero{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-bottom:0;padding-top:28px}
.sghero .ht{max-width:1040px}.sghero .h1{font-size:72px}
.bleed{position:relative;margin:40px calc(var(--gut) * -1) 0;flex:1;min-height:260px}
.bleed .grid{position:absolute;inset:0;width:100%;height:100%}.bleed .grid.mob{display:none}
.bleed .chip{left:50%;top:50%;transform:translate(-50%,-50%)}.bleed .ill{right:var(--gut)}
.swap .slot2.full.big{font-size:52px;height:100px;padding:0 42px;border-radius:12px}.swap .slot2.empty{font-size:26px;height:70px;padding:0 26px;border-radius:12px}.swap .steps{gap:22px}
.capgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--paper-a08);border-radius:14px;overflow:hidden;margin-top:72px}
.cap{background:var(--ground);padding:40px 36px 44px;display:flex;flex-direction:column;gap:12px}.cap .hi{width:46px;height:46px;margin-bottom:12px}.cap .hi path{stroke:var(--signal);stroke-width:1.3}
/* tiers: interactive */
.tierx{margin-top:72px}
.ttabs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ttab{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:12px;padding:28px 30px;border-radius:14px;background:var(--raised-a);box-shadow:inset 0 0 0 1px var(--paper-a14);transition:box-shadow .2s ease,background .2s ease}
.ttab:hover{box-shadow:inset 0 0 0 1px var(--paper-a24)}
.ttab.on{background:var(--raised);box-shadow:inset 0 0 0 2px var(--signal)}
.ttab:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.ttab .tn2{font:600 34px/1.1 var(--f-d);letter-spacing:-.02em;color:var(--paper)}
.ttab .tw{font:500 16px/1.5 var(--f-b);color:var(--mist)}
.ttab .tdepth{font:500 13px var(--f-b);color:var(--mist);margin-top:auto;display:inline-flex;align-items:center;gap:8px}
.ttab.on .tdepth{color:var(--signal)}
.tbody{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;margin-top:40px;align-items:start}
.depth{position:relative;height:440px;perspective:1400px}
.dstage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(56deg) rotateZ(-32deg) translateY(-20px)}
.dp{position:absolute;left:8%;top:22%;width:84%;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s ease;transform-style:preserve-3d}
.dp svg{width:100%;display:block;border-radius:10px;background:rgba(14,34,51,.6);box-shadow:inset 0 0 0 1px var(--paper-a14)}
.dp1{transform:translateZ(0)} .dp2{transform:translateZ(140px)}
.dpl{position:absolute;left:0;top:-30px;font:700 11px var(--f-b);letter-spacing:.14em;text-transform:uppercase;color:var(--mist);white-space:nowrap}
.tierx[data-depth="1"] .dp2{transform:translateZ(260px);opacity:.14}
.tierx[data-depth="1"] .dp1 .dpl{color:var(--signal)}
.tierx[data-depth="2"] .dp .dpl{color:var(--signal)}
.tpanel{display:flex;flex-direction:column;gap:16px}.tpanel .h3{font-size:32px}.tpanel[hidden]{display:none}
.tb{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
.tb li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.55;color:var(--paper)}
.bh{width:14px;height:14px;flex:none;margin-top:6px}.bh path{fill:var(--signal)}
.tb li.inc{padding:12px 14px;margin:0 -14px;background:var(--sig-a16);border-radius:8px;font-weight:500}
/* boom */
.boomwrap{margin-top:72px}
.seam{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:1}.seam path{fill:var(--paper-a60)}.seam.mob{display:none}
.bchip{left:calc(50% + 40px);top:50%;transform:translateY(-50%);width:560px;padding:12px 14px}.bchip .steps{justify-content:space-between}
.bcols{display:grid;grid-template-columns:1fr 1fr;position:relative;padding-top:48px}
.bcols::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--paper-a24)}
.bcol{display:flex;flex-direction:column;gap:14px;padding-right:64px}.bcol.rgt{padding-right:0;padding-left:64px}.bcol .h3{font-size:30px}
.bcol.rgt .label{color:var(--mist)}.bcol.rgt .hexi{fill:var(--mist)}
.bl2{display:flex;flex-direction:column;margin-top:12px}.bl2 li{padding:18px 0;border-top:1px solid var(--paper-a14)}.bl2 h4{font:500 17px var(--f-d);margin-bottom:6px}

/* ---------- briefing form: centered ---------- */
.brief{padding-top:var(--sec);padding-bottom:var(--sec);background:radial-gradient(60% 50% at 50% 0%,rgba(0,143,232,.10),transparent 70%),var(--ground)}
.brief-in{max-width:880px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:48px}
.brief-h{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;max-width:820px}
.brief-h .h2{font-size:52px}
.brief-h .lead{max-width:640px}
.form{width:100%;background:var(--raised-a);border-radius:16px;padding:36px;display:flex;flex-direction:column;gap:22px;box-shadow:inset 0 0 0 1px var(--paper-a08)}
.frow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fld{display:flex;flex-direction:column;gap:8px;border:0;min-width:0}
.fld>label,.fld legend{font:500 13.5px var(--f-b);color:var(--mist);padding:0}
.fld legend{margin-bottom:8px}
.fld input[type=text],.fld input[type=email]{height:50px;width:100%;border:0;border-radius:8px;background:var(--navy);box-shadow:inset 0 0 0 1px var(--mist);padding:0 14px;color:var(--paper);font:400 16px var(--f-b)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;cursor:pointer;font:500 14px var(--f-b);height:38px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;box-shadow:inset 0 0 0 1px var(--paper-a24)}
.opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.opt:has(input:checked){background:var(--paper);color:var(--navy);box-shadow:none}
.opt:has(input:focus-visible){outline:2px solid var(--signal);outline-offset:3px}
.fgo{display:flex;align-items:center;gap:24px;margin-top:4px}
.go{height:52px;padding:0 36px;border:0;cursor:pointer;border-radius:999px;font:500 16px var(--f-b);background:var(--paper);color:var(--navy);flex:none}
.under{font-size:13.5px;color:var(--mist)}
.thanks{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;max-width:720px}.thanks[hidden],.form[hidden]{display:none}
.tk-art{width:120px}
.brief.big .brief-h .h2{font-size:60px}

/* ---------- closing band: the mark, cropped ---------- */
.closeband{position:relative;overflow:hidden;min-height:760px;padding:0 var(--gut);display:flex;align-items:center;border-top:1px solid var(--paper-a08)}
.cb-art{position:absolute;right:-180px;top:-120px;width:1060px;z-index:0;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 28%);mask-image:linear-gradient(to right,transparent 0,#000 28%)}
.mkcrop{display:block;width:100%;height:auto}
.cb-t{position:relative;z-index:2;max-width:720px;display:flex;flex-direction:column;gap:36px}
.cb-h{font-size:64px}

/* ---------- footer ---------- */
.sfoot{padding:96px var(--gut) 48px;border-top:1px solid var(--paper-a08)}
.foot{display:grid;grid-template-columns:260px 1fr 1fr;gap:56px}.foot .lc{display:flex;flex-direction:column;gap:14px}.foot .h3{font-size:18px}
.foot .logo img{height:26px;width:auto}
.fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:56px;padding-top:40px;border-top:1px solid var(--paper-a08)}
.fh{color:var(--paper)}.fcol ul{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.fcol a,.legal a{font:500 14px var(--f-b);color:var(--mist)}.fcol a:hover,.legal a:hover{color:var(--paper)}
.legal{display:flex;justify-content:space-between;gap:24px;padding-top:24px;margin-top:56px;border-top:1px solid var(--paper-a14);color:var(--mist);font-size:13px}
.lg{display:flex;flex-wrap:wrap;gap:10px 28px}.legal a{font-size:13px}
.social{display:flex;gap:20px;margin-top:4px}.social a{font:500 14px var(--f-b);color:var(--mist);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--paper-a14)}.social a:hover{color:var(--paper)}   /* 12 Nov: socials back, as on the live site */

/* ---------- Services ---------- */
.open3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:72px 56px;margin-top:88px}
.oc{display:flex;flex-direction:column;gap:14px;padding-top:28px;border-top:1px solid var(--paper-a14)}
.oc .hi{width:40px;height:40px}.oc .hi path{stroke:var(--signal);stroke-width:1.3}
.ocn{font:500 13px var(--f-b);color:var(--mist)}
.ox{justify-content:flex-start}/* 11 Nov: the underline is drawn on the link's own box, not as text-decoration, because the letter-split animation turns the words into inline-blocks and a text underline then survives only under the spaces */
.xlink{color:var(--signal);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(50% + .62em)/100% 1px no-repeat}
.iboss{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:80px;background:var(--paper);border-radius:16px;padding:56px 64px;box-shadow:inset 0 0 0 1px var(--navy-a12)}
.ib-l{display:flex;flex-direction:column;gap:28px}.ib-l img{width:min(100%,460px)}
.ib-art{background:var(--navy);border-radius:12px;padding:16px}.ib-art svg{display:block;width:100%;height:auto}
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px;--k:1}
.wall li{background:var(--paper);border-radius:12px;height:140px;display:flex;align-items:center;justify-content:center;padding:24px 34px;box-shadow:inset 0 0 0 1px var(--navy-a12)}
.wall img{width:calc(var(--w,150px)*var(--k));max-width:100%;height:auto;object-fit:contain}
.useband{padding-top:160px;padding-bottom:160px}
.rows{margin-top:48px;display:flex;flex-direction:column}
.rows li{display:flex;align-items:baseline;gap:28px;padding:30px 0;border-top:1px solid rgba(7,20,31,.22);font:600 40px/1.15 var(--f-d);letter-spacing:-.02em}
.rows li:last-child{border-bottom:1px solid rgba(7,20,31,.22)}.rows .num{color:var(--navy);font-size:14px}

/* ---------- About ---------- */
.story{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:120px;align-items:start}
.st-l{display:flex;flex-direction:column;gap:24px}.st-l .turn{color:var(--paper);font-size:28px}
.st-r{display:flex;flex-direction:column;gap:28px;position:sticky;top:40px}
.ix{display:flex;flex-direction:column}.ix li{display:flex;gap:20px;align-items:baseline;padding:22px 0;border-top:1px solid var(--paper-a14);font:600 22px/1.3 var(--f-d);letter-spacing:-.01em}
.ix li:last-child{border-bottom:1px solid var(--paper-a14)}
.tail{color:var(--paper)}
.role{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:96px;align-items:end}
.rl-l,.rl-r{display:flex;flex-direction:column;gap:24px}
.swapq{font:600 64px/1.06 var(--f-d);letter-spacing:-.03em;color:var(--navy)}.swapq s{color:var(--slate);text-decoration-thickness:3px}.swapq b{font-weight:700;color:var(--deep)}
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:80px}
.person{display:flex;flex-direction:column;gap:10px;outline:none}
.person .ph{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:var(--raised);margin-bottom:14px;box-shadow:inset 0 0 0 1px var(--paper-a14)}
.person .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.92);transform:scale(1.02);transition:filter .5s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.ph-cells{position:absolute;left:0;right:0;bottom:-1px;transform:translateY(102%);transition:transform .6s cubic-bezier(.2,.7,.2,1)}.ph-cells svg{display:block;width:100%;height:auto}
.person .ph::after{content:'';position:absolute;inset:0;border-radius:14px;box-shadow:inset 0 0 0 2px var(--signal);opacity:0;transition:opacity .4s ease}
.person:hover .ph img,.person:focus-visible .ph img{filter:none;transform:scale(1.06)}
.person:hover .ph-cells,.person:focus-visible .ph-cells{transform:translateY(0)}
.person:hover .ph::after,.person:focus-visible .ph::after{opacity:1}
.person .role{font:500 14px var(--f-b);color:var(--signal);letter-spacing:.02em}
.person .h3{transition:color .3s ease}.person:hover .h3{color:var(--signal)}

/* ---------- Blog ---------- */
.bfwrap{padding:0;overflow:hidden}
.bfield{display:block;width:100%;height:auto}
.bf{animation:bfw 6s ease-in-out infinite;animation-delay:var(--d)}
.bf.gS{animation-name:bfl}
@keyframes bfw{0%,100%{fill:var(--raised-a)}50%{fill:var(--sig-a16)}}
@keyframes bfl{0%,100%{fill:var(--signal)}50%{fill:var(--bridge)}}
.posts>.label{margin-bottom:48px}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 32px}
.pc{display:flex;flex-direction:column;gap:20px}
.pcimg{display:block;border-radius:12px;overflow:hidden;background:var(--navy)}
.thumb svg{display:block;width:100%;height:auto;transition:transform .5s ease}.pc:hover .thumb svg{transform:scale(1.04)}
.pct{display:flex;flex-direction:column;gap:10px}.pct time{font:500 13px var(--f-b);color:var(--ink-2)}
/* 11 Nov: drawn as a background like .xlink, because the word-split animation makes each word an inline-block and a text underline then only shows under the spaces */
.pc .h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 200ms cubic-bezier(0.23,1,0.32,1)}
@media (hover:hover) and (pointer:fine){.pc .h3 a:hover{background-size:100% 2px}}
.pc .h3 a:focus-visible{background-size:100% 2px}
@media (prefers-reduced-motion:reduce){.pc .h3 a{transition:none}}
.pc.feat{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:center}.pc.feat .h3{font-size:36px;line-height:1.12}
.more .pct time{color:var(--mist)}.pgrid.three{margin-top:72px}
.crumb{font:500 14px var(--f-b);color:var(--mist)}.crumb a{text-decoration:underline;text-underline-offset:3px}
.docmeta{display:flex;gap:20px;font:500 14px var(--f-b);color:var(--mist)}
.doc,.legaldoc{max-width:760px;margin:0 auto;font-size:18px;line-height:1.7;color:var(--ink-2)}
.doc h2,.legaldoc h2{font:600 32px/1.2 var(--f-d);color:var(--navy);margin:56px 0 16px;letter-spacing:-.015em}
.doc h3,.legaldoc h3{font:600 22px/1.3 var(--f-d);color:var(--navy);margin:36px 0 12px}
.doc p,.legaldoc p{margin:0 0 18px}.doc ul,.legaldoc ul,.doc ol,.legaldoc ol{margin:0 0 18px 22px;list-style:disc}.legaldoc ol{list-style:decimal}
.doc a,.legaldoc a{color:var(--deep);text-decoration:underline}
.legaldoc table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}.legaldoc td,.legaldoc th{border:1px solid var(--navy-a20);padding:10px;vertical-align:top;text-align:left}
.legaldoc{font-size:16px}
.htoc{max-height:min(70vh,640px);overflow:auto;background:var(--raised-a);border-radius:14px;padding:28px 30px;box-shadow:inset 0 0 0 1px var(--paper-a08);width:100%;max-width:560px}
.htoc ol{margin-top:16px;display:flex;flex-direction:column;gap:2px}.htoc a{display:block;padding:7px 0;color:var(--mist);font-size:15px}.htoc a:hover{color:var(--paper)}

/* ---------- Contact, Book a call ---------- */
.ccards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;margin-top:56px}
.cc{display:flex;flex-direction:column;gap:14px;padding-top:28px;border-top:1px solid var(--paper-a14)}
.cc .big{font:600 26px var(--f-d);color:var(--signal);overflow-wrap:anywhere;letter-spacing:-.01em;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.cc .tel{font:500 18px var(--f-b)}
.routes{display:flex;flex-wrap:wrap;gap:12px;margin-top:56px}
.contactsec{padding-top:120px;padding-bottom:120px}
.pick{display:flex;flex-direction:column;align-items:center;gap:56px}
.pk-h{text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center;max-width:760px}
.sched{position:relative;width:100%;max-width:1100px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);background:var(--raised-a);border-radius:18px;box-shadow:inset 0 0 0 1px var(--paper-a14);overflow:hidden}
.sc-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:44px 40px}
.sc-d{display:flex;flex-direction:column;gap:10px}.sc-dn{font:600 15px var(--f-d);color:var(--mist);margin-bottom:6px}
.sc-t{height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;font:500 14px var(--f-b);box-shadow:inset 0 0 0 1px var(--paper-a14)}
.sc-t.off{color:var(--mist);box-shadow:inset 0 0 0 1px var(--paper-a08);text-decoration:line-through}
.sc-t.on{background:var(--signal);color:var(--navy);box-shadow:none}
.sc-side{background:var(--raised);padding:44px 40px;display:flex;flex-direction:column;gap:20px;justify-content:center}
.sched .ill{top:14px;right:16px}
.sched.solo{display:block;max-width:760px}.sched.solo .sc-side{background:none}.sched.solo .pill{align-self:flex-start}   /* 12 Nov: one box, the link only */
.cov3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;margin-top:64px}
.cov3 li{display:flex;flex-direction:column;gap:12px;padding-top:28px;border-top:1px solid var(--navy-a20)}
.cov3 .hi{width:38px;height:38px}.cov3 .hi path{stroke:var(--deep);stroke-width:1.4}
.direct{padding-top:120px;padding-bottom:120px}.direct>.lead{margin-top:16px;max-width:680px}

/* ---------- one-pager ---------- */
.ring{position:relative}
.ringn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:0;background:var(--ground);border-radius:50%;width:180px;height:180px;justify-content:center;box-shadow:inset 0 0 0 1px var(--paper-a14)}
.ringn span{font:700 76px/1 var(--f-d);letter-spacing:-.04em}.ringn small{font:500 15px var(--f-b);color:var(--mist)}
.op-problem{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:96px;align-items:start}
.oph{display:flex;flex-direction:column;gap:20px}
.probs{display:flex;flex-direction:column}
.probs li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:baseline;padding:30px 0;border-top:1px solid var(--paper-a14)}.probs li:last-child{border-bottom:1px solid var(--paper-a14)}
.probs .h3{font-size:30px;line-height:1.2}
.op-sol .rp-a{font:700 88px/1 var(--f-d);letter-spacing:-.035em;margin-top:28px;max-width:1150px}.op-sol .rp-b{font:500 28px/1.4 var(--f-d);max-width:900px;margin-top:36px}
.op-handle{display:grid;grid-template-columns:1fr 1fr;gap:96px}
.hd2{display:flex;flex-direction:column;gap:48px}
.tiles4{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tile4{background:var(--raised-a);border-radius:14px;padding:30px 28px 34px;display:flex;flex-direction:column;gap:22px;box-shadow:inset 0 0 0 1px var(--paper-a08);min-height:220px}
.tile4 .hi{width:40px;height:40px}.tile4 .hi path{stroke:var(--signal);stroke-width:1.3}
.diffs{display:flex;flex-direction:column}.diffs li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:baseline;padding:26px 0;border-top:1px solid var(--paper-a14)}.diffs li:last-child{border-bottom:1px solid var(--paper-a14)}
.op-sla{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:96px;align-items:center}
.sla-n{display:flex;align-items:baseline;gap:16px;color:var(--navy)}.sla-n span{font:700 280px/.8 var(--f-d);letter-spacing:-.06em}.sla-n small{font:600 40px var(--f-d)}
.sla-t{display:flex;flex-direction:column;gap:22px}.sla-t .oh{margin-top:40px}
.outs4{display:grid;grid-template-columns:1fr 1fr;gap:14px 32px}
.outs4 li{display:flex;gap:12px;align-items:flex-start;font:500 18px/1.4 var(--f-b);color:var(--navy)}
.outs4 svg{width:24px;height:24px;flex:none}.outs4 path:first-child{fill:var(--deep)}.outs4 path+path{fill:none;stroke:var(--paper);stroke-width:2}

/* ---------- 404, thank you ---------- */
.tyhero{display:flex;align-items:center;justify-content:center;padding:80px var(--gut)}
.tyhero .h2{font-size:56px}

/* ---------- laptop ---------- */
@media (max-width:1180px){
  :root{--gut:48px;--sec:136px}
  .h1{font-size:52px}.h1.xl{font-size:64px}.h2{font-size:40px}
  .hero{gap:32px}.hart{min-height:360px}
  .prod3{grid-template-columns:170px minmax(0,1fr)}.tp{grid-template-columns:minmax(0,1fr)}.tp .mid .feats{display:none}
  .prog{grid-template-columns:220px minmax(0,1fr)}.prog .tp{grid-template-columns:minmax(0,1fr)}
  .rp-a{font-size:84px}.cb-h{font-size:52px}.rows li{font-size:32px}.swapq{font-size:52px}
  .open3{grid-template-columns:1fr 1fr}.wall{--k:.8}
  .sla-n span{font-size:200px}
}
/* ---------- phone ---------- */
@media (max-width:760px){
  :root{--gut:20px;--sec:96px}
  body{font-size:15px}
  .h1,.sghero .h1{font-size:38px}.h1.xl{font-size:46px}.h2,.brief-h .h2,.brief.big .brief-h .h2{font-size:32px}.h3{font-size:20px}.lead{font-size:16.5px}.lead.big{font-size:18px}
  .nav{height:56px}.nav>nav,.nav .r .pill{display:none}.nav .menu{display:block}
  .bar{font-size:12px;text-align:center;flex-wrap:wrap;gap:4px 8px}
  .hero{grid-template-columns:minmax(0,1fr);gap:28px;padding:24px var(--gut) 40px;align-content:start}
  .hero .ctas{flex-direction:column;align-self:stretch}.hero .ctas .pill{justify-content:center}
  .hart{min-height:0;height:auto}
  .art .grid.dsk{display:none}.art .grid.mob{display:block}.aframe{padding:14px}
  .hhome .hart{margin:-10px -40px 0}.mk{width:100%}
  .hchip{padding:8px 12px;gap:8px;left:50%}.hchip .ill{display:none}
  .sc-h{flex-direction:column;align-items:flex-start;gap:20px}
  .pin{height:auto!important}.pin-in{position:static;height:auto;display:block}.pin-in>.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
  .prod3,.prog{grid-template-columns:minmax(0,1fr);gap:20px}
  .tabs{flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:0 var(--gut)}
  .tab{flex:none;width:auto;white-space:nowrap}
  .panel .grid.dsk{display:none}.panel .grid.mob{display:block}.panel{height:420px!important}
  .chip .q{font-size:17px}.feats{grid-template-columns:1fr}
  .prog .pbar{display:block;position:relative;height:2px;background:var(--paper-a14);border-radius:2px;overflow:hidden;order:2}
  .prog .pbar i{position:absolute;inset:0;background:var(--signal);transform-origin:left;transform:scaleX(0)}
  .prog.run .pbar i{animation:pb 5s linear forwards}
  .trip{grid-template-columns:minmax(0,1fr);margin-top:48px}.trip .card{margin-top:0}
  .cols4{grid-template-columns:minmax(0,1fr);row-gap:40px;margin-top:48px}.col{border-left:0;padding:0}.col+.col{border-top:1px solid var(--navy-a12);padding-top:28px}
  .rp-a{font-size:52px}.rp-b{font-size:21px}.replaces{padding-top:112px;padding-bottom:112px}
  .g3,.pts4,.mcols{grid-template-columns:minmax(0,1fr)}.pt,.pt+.pt{padding:22px 0;border-left:0}.pt+.pt{border-top:1px solid var(--navy-a12)}
  .tz-foot{flex-direction:column;align-items:flex-start}.tile .v{font-size:30px}.model{padding:24px 18px}
  .sghero .ht{gap:18px}.bleed{margin:24px calc(var(--gut) * -1) 0;min-height:300px}.bleed .grid.dsk{display:none}.bleed .grid.mob{display:block}
  .swap .steps{flex-direction:column;gap:6px}.swap .arrow{transform:rotate(90deg);margin:10px 0}.swap .slot2.full.big{font-size:30px;height:60px;padding:0 22px}.swap .slot2.empty{font-size:17px;height:46px}
  .capgrid{grid-template-columns:minmax(0,1fr);margin-top:48px}.cap{padding:28px 22px}
  .ttabs{grid-template-columns:minmax(0,1fr)}.ttab{padding:22px}.ttab .tn2{font-size:26px}
  .tbody{grid-template-columns:minmax(0,1fr);gap:24px}.depth{height:300px}
  .seam.dsk{display:none}.seam.mob{display:block}.panel.boom{height:470px!important}
  .bchip{left:calc(50% + 14px);width:150px}.bchip .steps{flex-direction:column;align-items:stretch;gap:4px}.bchip .stp{justify-content:center;font-size:15px;height:38px}.bchip .arrow{transform:rotate(90deg);margin:8px auto}
  .bcols{grid-template-columns:minmax(0,1fr)}.bcols::before{display:none}.bcol,.bcol.rgt{padding:0}.bcol.rgt{margin-top:32px;padding-top:32px;border-top:1px solid var(--paper-a24)}
  .form{padding:22px}.frow{grid-template-columns:minmax(0,1fr)}.fgo{flex-direction:column;align-items:stretch}.go{width:100%}
  .closeband{min-height:720px;align-items:flex-start;padding-top:96px}.cb-art{right:-260px;top:auto;bottom:-120px;width:640px}.cb-h{font-size:38px}
  .cb-t .ctas{flex-direction:column;align-items:stretch}.cb-t .pill{justify-content:center}
  .foot{grid-template-columns:1fr;gap:28px}.fcols{grid-template-columns:1fr 1fr}.legal{flex-direction:column}
  .open3{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:48px}
  .iboss{grid-template-columns:minmax(0,1fr);padding:28px 22px;gap:28px;margin-top:48px}.wall{grid-template-columns:1fr 1fr;--k:.75}.wall li{height:108px;padding:18px}
  .rows li{font-size:24px;gap:16px;padding:22px 0}
  .story,.role,.op-problem,.op-handle,.op-sla{grid-template-columns:minmax(0,1fr);gap:56px}.st-r{position:static}
  .swapq{font-size:40px}.people{grid-template-columns:minmax(0,1fr);gap:48px;margin-top:48px}
  .pgrid,.pc.feat{grid-template-columns:minmax(0,1fr)}.pc.feat .h3{font-size:26px}
  .doc{font-size:17px}
  .htoc{max-height:none}
  .ccards,.cov3{grid-template-columns:minmax(0,1fr);gap:36px}
  .sched{grid-template-columns:minmax(0,1fr)}.sc-days{padding:28px 18px;gap:6px}.sc-t{height:40px;font-size:12px}.sc-side{padding:28px 22px}
  .op-sol .rp-a{font-size:46px}.op-sol .rp-b{font-size:20px}.tiles4,.outs4{grid-template-columns:minmax(0,1fr)}.tile4{min-height:0}
  .sla-n span{font-size:150px}.sla-n small{font-size:28px}
  .ringn{width:120px;height:120px}.ringn span{font-size:48px}
}
@keyframes pb{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* Modal check (21 Oct): hero objects float free, no frame box, with a soft light behind them, as modal.com's hero object does */
.aframe{background:none;box-shadow:none;padding:0;max-width:680px}
.hart::before{content:'';position:absolute;inset:8% 4%;background:radial-gradient(closest-side,rgba(0,224,164,.10),rgba(0,187,212,.05) 55%,transparent);z-index:0;pointer-events:none}
.hart>*{position:relative;z-index:1}
/* wide screens (13 Nov): past 1440 the hero is taller than its capped art column, so the glow keeps a circle instead of stretching to an oval */
@media (min-width:1441px){.hart::before{inset:auto 4%;top:50%;aspect-ratio:1;transform:translateY(-50%)}}
.htoc{position:relative}
.aframe .grid{-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.aframe>.ill{display:none}

/* ---------- brand-dod fixes (21 Oct) ---------- */
.nw{white-space:nowrap}
/* the closing-band crop keeps the mark's top bar in frame, so it reads as the Futuresafe mark */
.cb-art{top:56px;right:-120px;width:980px}
.closeband{min-height:820px}
/* hero chip sits off the bars, on the open lower-left of the mark */
.hchip{left:30%;top:80%}
/* tiers: the depth stack lives inside its own column, under the cards, inside the margins */
.tbody{margin-top:56px}
.depth{overflow:hidden;border-radius:14px;height:460px}
.dp{top:34%}
/* form: everything centered in the panel */
.form .fld legend{text-align:center;width:100%}.form fieldset .opts{justify-content:center}
.fgo{justify-content:center}
/* privacy contents: room at the end, and a fade that says it scrolls */
.htoc{padding-bottom:36px;-webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent);mask-image:linear-gradient(to bottom,#000 88%,transparent)}
/* rows line up */
.person .role{min-height:2.9em}.oc .h3{min-height:2.5em}
.wall img{mix-blend-mode:multiply}
/* contact details: a step in ground so three navy sections don't run together */
.contactsec{background:var(--navy)}
@media (max-width:760px){
  /* phone first screen: exactly one viewport; the hero graphic takes whatever height the text leaves, whole, never cut */
  .first{height:100svh;min-height:0}
  .first>.hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-bottom:20px}
  .hero .ht{flex:none}
  .hart{flex:1 1 0;min-height:0;margin:0!important;display:flex;align-items:center;justify-content:center}
  .hart::before{inset:0}
  .hart>.mk,.hart>.art{height:100%;width:auto;max-width:100%;aspect-ratio:auto}
  .hart>.mk{aspect-ratio:1128/936}
  .hart .art .grid.mob{height:100%;width:auto;max-width:100%;margin:0 auto}
  .hart>.htoc{display:none}
  .ringn{width:96px;height:96px}.ringn span{font-size:38px}.ringn small{font-size:12px}
  .sghero .bleed{min-height:0}.sghero .swap .chip{padding:12px 14px!important;transform:translate(-50%,-50%) scale(.82)}
  /* closing band: text first, then the mark below it, never under the buttons */
  .closeband{flex-direction:column;align-items:stretch;min-height:0;padding:88px var(--gut) 0}
  .cb-art{position:relative;right:auto;top:auto;bottom:auto;width:130%;margin:48px -15% -40px 0;align-self:flex-end}
  /* tab rows: fade at the right edge so they read as scrollable */
  .tabs{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent);padding-right:48px}
  .sched .ill{top:12px;right:12px}.sched .sc-days{padding-top:48px}.sched{display:flex;flex-direction:column}   /* 10 Nov: the Illustrative tag stays on the card's corner, over a taller top margin, instead of dropping into a strip below the button */
  .depth{height:300px}.dp{top:30%}
  .person .role,.oc .h3{min-height:0}
}
@media (max-width:760px){.hhome .hchip{display:none}}
@media (max-width:760px){.closeband .cb-t{order:0}.closeband .cb-art{order:1;margin-top:56px}}
@media (max-width:760px){.dp{left:16%;width:72%}}

/* brand-dod round 2: the chip sits beside the mark, clear of the V; the phone hero tag stays inside the frame */
.hchip{left:auto;right:-2%;top:88%;transform:translateY(-50%)}
@media (max-width:760px){.sghero .bleed .ill{right:12px;top:8px}}

/* Raph, 21 Oct (the gradient mark): the phone hero draws its own plane, bigger cells with a fuller sparse side, so the S half reads at ~130px.
   The desktop chip sits under the mark, clear of every cell. */
.mk-s{display:none}
@media (max-width:760px){.mk-s{display:block}.mk-f,.mk-m{display:none}}
.hchip{right:0;top:auto;bottom:-88px;transform:none}
/* the closing-band fade is short, so the mark's #008FE8 end shows at full value (the headline ends ~110px left of the first cells) */
@media (min-width:761px){.cb-art{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%);mask-image:linear-gradient(to right,transparent 0,#000 10%)}}

/* ---------- Raph, 21 Oct round 2 ---------- */
/* one highlight: the brand accent (signal on dark, signal deep on light grounds) */
.hl2{color:var(--signal)} .sec.light .hl,.sec.light .hl2{color:var(--deep)}
/* Home: the hero chip centered under the mark */
.hhome .hchip{left:50%;right:auto;top:auto;bottom:-88px;transform:translateX(-50%)}
/* Home: replaces the chain, a heading top-left and the hexagon timeline bottom-right */
.replaces{display:grid;grid-template-columns:minmax(0,1fr);row-gap:96px;padding-top:144px;padding-bottom:144px}
.replaces .rp-a{font:700 64px/1.02 var(--f-d);letter-spacing:-.03em;max-width:820px;margin:0}
.replaces .rp-b{font:500 22px/1.45 var(--f-b);letter-spacing:0;max-width:640px;margin-top:24px}
.replaces .ctas{margin-top:36px}
.hexsteps{justify-self:end;display:flex;gap:0;list-style:none;margin:0;padding:0;position:relative}
.hexsteps::before{content:"";position:absolute;left:56px;right:56px;top:49px;height:3px;background:var(--navy)}
.hexsteps li{position:relative;width:132px;display:flex;flex-direction:column;align-items:center;gap:14px}
.hexsteps svg{width:112px;height:auto;display:block}.hexsteps path{fill:var(--navy)}
.hexsteps span{font:700 17px/1 var(--f-d);color:var(--navy);letter-spacing:-.01em}
@media (max-width:760px){.replaces{row-gap:56px;padding-top:96px;padding-bottom:96px}.replaces .rp-a{font-size:40px}.replaces .rp-b{font-size:18px}
  .hexsteps{justify-self:stretch;justify-content:space-between}.hexsteps li{width:auto;flex:1}.hexsteps svg{width:56px}.hexsteps::before{left:28px;right:28px;top:23px}.hexsteps span{font-size:13px}}
/* Safeguard hero: two columns, the swap graphic on the right */
.sghero2 .swapart{max-width:620px;margin:0 auto}
.steps.vert{display:flex;flex-direction:column;align-items:center;gap:8px}.steps.vert .arrow{transform:rotate(90deg);width:40px;margin:6px 0}
.sghero2 .slot2.full{font-size:34px;height:72px;padding:0 30px;border-radius:12px}.sghero2 .slot2.empty{font-size:20px;height:52px;padding:0 22px;border-radius:10px}
@media (max-width:760px){.sghero2 .slot2.full{font-size:22px;height:48px;padding:0 18px}.sghero2 .slot2.empty{font-size:14px;height:36px;padding:0 14px}.sghero2 .steps.vert .arrow{width:28px;margin:0}}
/* closing band (Raph, 21 Oct round 2): the mark bigger, pushed into the bottom-right corner and cropped, about three-quarters in view */
@media (min-width:761px){.closeband{min-height:860px;align-items:center}.cb-t{max-width:520px}.cb-art{top:auto;right:calc(var(--gut) - 370px);bottom:-270px;width:1060px}}
@media (min-width:761px) and (max-width:1100px){.closeband{min-height:780px}.cb-t{max-width:420px}.cb-h{font-size:44px}.cb-art{right:-200px;bottom:-180px;width:720px}}
@media (max-width:760px){.closeband .cb-art{width:120%;margin:32px -38% -26% auto;align-self:flex-end}}
/* About leadership (Raph, 21 Oct round 2): smaller, square, full color; a small lift on hover, no grayscale and no cell overlay */
.people{grid-template-columns:repeat(3,minmax(0,240px));gap:48px;justify-content:start}
.person .ph{aspect-ratio:1/1;border-radius:12px;width:100%;max-width:240px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.person .ph img{filter:none;transform:none;transition:none;object-position:50% 22%}
.person .ph-cells{display:none}.person .ph::after{display:none}
.person:hover .ph img,.person:focus-visible .ph img{filter:none;transform:none}
.person:hover .ph,.person:focus-visible .ph{transform:translateY(-6px);box-shadow:inset 0 0 0 2px var(--signal),0 18px 40px rgba(0,0,0,.35)}
@media (max-width:760px){.people{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}.person .ph{max-width:none}}
/* Services, How MSPs use Futuresafe: each row opens on hover or focus; the first stands open until another is chosen */
.rows.exp li{cursor:default;outline:none;transition:padding .35s ease}
.rows.exp .rw{display:flex;flex-direction:column;min-width:0}
.rows.exp .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.rows.exp .more>p{overflow:hidden;margin:0;font:500 19px/1.5 var(--f-b);letter-spacing:0;color:var(--navy);max-width:760px}
.rows.exp li:hover .more,.rows.exp li:focus-within .more,.rows.exp:not(:hover):not(:focus-within) li:first-child .more{grid-template-rows:1fr}
.rows.exp li:hover .more>p,.rows.exp li:focus-within .more>p,.rows.exp:not(:hover):not(:focus-within) li:first-child .more>p{padding-top:16px}
@media (max-width:760px){.rows.exp .more>p{font-size:16px}}
/* brand-dod round 2 fixes */
.person .role{display:block}
.person:nth-child(2) .ph img{object-position:50% 4%}
.hchip,.hchip *{white-space:nowrap}
@media (max-width:1100px){.nav>nav,.nav .r .pill{display:none}.nav .menu{display:block}}
@media (max-width:760px){.sghero2 .steps.vert{flex-direction:row;gap:8px}.sghero2 .steps.vert .arrow{transform:none;width:26px;margin:0}
  .sghero2 .slot2.full{font-size:15px;height:34px;padding:0 12px;border-radius:8px}.sghero2 .slot2.empty{font-size:12px;height:28px;padding:0 10px;border-radius:7px}
  .sghero2 .chip{padding:10px 12px!important}.sghero2 .ill{display:none}}
/* Services hero on phones: a wide band with a compact chip, so the field (and its motion) shows around it */
@media (max-width:760px){.svart .achip{padding:6px}.svart .slot2.full{font-size:14px;height:30px;padding:0 12px;border-radius:7px}.svart .ill{display:none}}
/* About leadership (Raph, 21 Oct): the three cards centered in the section; on phones the third card centers under the first two */
.people{display:flex;flex-wrap:wrap;justify-content:center;gap:48px}.people>.person{width:240px}
@media (max-width:760px){.people{gap:28px 20px}.people>.person{width:calc(50% - 10px)}}
/* v8, Jason 27 Oct: the closing band's italic line; the Barracuda placeholder tile; Safeguard shows Complete first */
.cb-note{margin:-12px 0 0;font:italic 400 16px/1.55 var(--f-b);color:var(--mist);max-width:520px}
/* review fixes: the core grid closes its last row; the two posts under the featured one sit side by side (10 Nov: two posts are pulled); the long chip slot at phone size */
@media (min-width:761px){.open3 .ox{grid-column:span 2}.posts .pgrid.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.more .pgrid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.sghero2 .slot2.full{font-size:13px;padding:0 10px}}
.tierx[data-depth="2"] .dp{left:13%;width:74%}

/* the quote credits in the posts (31 Oct): the name on its own line under the quote, quiet */
.doc cite{display:block;margin-top:8px;font:500 14px/1.5 var(--f-b);font-style:normal;color:var(--slate)}

/* Raph, 10 Nov: eight partner tiles, four by two (two by four on a phone), every logo at the same ink area (pages.mjs WALL); narrower tiles get less padding and a smaller scale so the longest wordmark keeps readable lettering */
@media (max-width:1100px){.wall li{padding:18px 16px}}
.wall li.fill img{--k:1}@media (max-width:1100px){.wall li.fill{padding-inline:8px}}   /* Zoho is the one logo sized by its lettering: it takes the whole tile width */
@media (min-width:761px) and (max-width:900px){.wall{--k:.68}}
/* Jason, 10 Nov: the previous Master Services Agreement opens on a notice; the booking card says what Safeguard is */
.legalnote{margin:22px 0 0;max-width:560px;padding-left:16px;border-left:2px solid var(--signal);font:500 15px/1.55 var(--f-b);color:var(--paper)}
.legalnote a{color:var(--signal);text-decoration:underline;text-underline-offset:3px}
.sc-desc{margin:0;color:var(--mist)}

/* Webinars (10 Nov preview): the library card and the next-recording row, and the replay (video beside its chapters, summary, takeaways, speakers) */
.wbfeat .pcimg,.wbcard .pcimg{position:relative;aspect-ratio:16/9}.wbcard .pcimg img{width:100%;height:100%;object-fit:cover}
.wbplay{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--paper);color:var(--navy);display:grid;place-items:center;box-shadow:0 0 0 12px rgba(253,254,255,.2);transition:background-color .25s ease}
.wbplay svg{width:30px;height:30px;margin-left:4px;fill:currentColor}.pc:hover .wbplay,.pcimg:focus-visible .wbplay{background:var(--signal)}
.wbm{display:flex;flex-wrap:wrap;gap:4px 20px;font:500 14px var(--f-b);color:var(--ink-2)}.wbwith{margin:0;font-size:15px}.wbfeat .ctas{margin-top:6px}
.wbgrid+.wbup{margin-top:72px}.wbgrid:empty+.wbup{margin-top:0}
.wbup li{display:flex;flex-wrap:wrap;align-items:center;gap:10px 32px;padding:28px 0;border-top:1px solid var(--navy-a20);border-bottom:1px solid var(--navy-a20)}.wbup li+li{border-top:0}
.sec.wbwatch{padding-top:96px;padding-bottom:128px}
.wbplayer{scroll-margin-top:80px;border-radius:14px;overflow:hidden;background:#000;outline:1px solid var(--paper-a14);outline-offset:-1px}
.wbplayer video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.wbchap{margin-top:24px;background:var(--raised-a);border-radius:14px;box-shadow:inset 0 0 0 1px var(--paper-a08);padding:6px 12px 14px}.wbchap .label{padding:18px 12px 10px}
.wbchap ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:12px}
.wbchap button{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:baseline;align-content:center;width:100%;min-height:48px;padding:10px 12px;border:0;border-radius:10px;background:none;color:var(--mist);font:500 15px/1.35 var(--f-b);text-align:left;cursor:pointer;transition:color .2s ease}
.wbchap button .tn{font-size:13px;color:var(--mist)}
.wbchap button:hover,.wbchap button:hover .tn{color:var(--paper)}
.wbchap button.on{background:var(--raised);box-shadow:inset 2px 0 0 var(--signal);color:var(--paper)}.wbchap button.on .tn{color:var(--signal)}
.sec.wbsum{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:96px;align-items:start}
.wbsum-l,.wbsum-r{display:flex;flex-direction:column;gap:24px}
.wbtake{margin-top:8px}.wbtake li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:baseline;padding:26px 0;border-top:1px solid var(--navy-a20)}.wbtake li:last-child{border-bottom:1px solid var(--navy-a20)}
.wbtake .num{color:var(--ink-2)}.wbtake .body{margin-top:8px}
.wbrole{font:500 14px var(--f-b);color:var(--signal);letter-spacing:.02em}.sec.wbspk{padding-bottom:96px;background:radial-gradient(60% 50% at 50% 100%,rgba(0,143,232,.10),transparent 70%),var(--ground)}.wbspk .ccards{margin-top:72px}
.wbhead .docmeta{flex-wrap:wrap;gap:4px 20px}.wbhead .docmeta>*{white-space:nowrap}
@media (max-width:899px){.wbchap ol{display:block}}
@media (max-width:760px){.sec.wbwatch{padding-top:40px;padding-bottom:72px}.wbchap{margin-top:16px;padding:4px 8px 10px}.sec.wbsum{grid-template-columns:minmax(0,1fr);gap:48px}.wbplay{width:64px;height:64px;margin:-32px 0 0 -32px;box-shadow:0 0 0 8px rgba(253,254,255,.2)}.wbchap button{min-height:52px}.wbgrid+.wbup{margin-top:48px}.wbspk .ccards{margin-top:48px}}

/* ---------- mobile pass (11 Nov): phone only, no desktop rule touched ---------- */
@media (max-width:760px){
  /* body copy 16px minimum; the small variants and role/credit lines come up with it */
  body{font-size:16px}
  .sm,.body.sm,.under,.person .role,.wbrole,.wbwith,.inp label,.fld>label,.fld legend{font-size:16px}
  .legaldoc table{font-size:16px}
  /* no one-word last lines in paragraphs, balanced headings (progressive: older browsers ignore it) */
  p,li,.lead,.body{text-wrap:pretty}
  h1,h2,h3,h4,.h1,.h2,.h3,.cb-h,.rp-a,.rp-b{text-wrap:balance}
  /* touch targets: 44px minimum */
  .pill{font-size:16px}.pill.sm{height:44px;font-size:16px}
  .bar{font-size:14px;padding:0 20px}.bar a{display:inline-block;padding:14px 0;margin:-14px 0}
  .nav .logo{display:flex;align-items:center;min-height:44px}
  .tab{min-height:44px;align-items:center}
  .opt{height:44px;font-size:16px}
  input[type=range]{height:44px}
  .sfoot .foot .logo{display:flex;align-items:center;min-height:44px}
  .fcol ul{display:flex;flex-direction:column}
  .fcol a,.lg a{display:flex;align-items:center;min-height:44px;font-size:16px}
  .lg{gap:0 24px}.legal{font-size:14px}
  .cc .big,.cc .tel{display:inline-flex;align-items:center;min-height:44px}
  .mmenu summary{min-height:44px;display:flex;align-items:center}
  .mtoc summary{min-height:44px;display:flex;align-items:center}
}
/* mobile pass (11 Nov): the phone menu's sections never opened by touch, because the desktop dropdown's display:none (.nav .ddm) also matched the menu's own lists. They are plain lists inside <details> here, and the summary shows a chevron. */
.mmenu .ddm{position:static;display:block}
.mmenu summary{display:flex;align-items:center;justify-content:space-between}
.mmenu summary::after{content:'';width:9px;height:9px;margin-right:6px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.mmenu details[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
@media (max-width:760px){
  .htoc a,.mtoc a{display:flex;align-items:center;min-height:44px;padding:0;font-size:16px}
  .crumb{font-size:16px}.crumb a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .legalnote{font-size:16px}.legalnote a{padding:13px 0}
}
.mmenu .ddm a{display:flex;align-items:center;min-height:44px;padding:0}
.mmenu .ddm ul{background:none;box-shadow:none;border-radius:0;padding:0 0 12px;min-width:0}
@media (max-width:760px){
  /* the first screen is one viewport; the mark takes what the text leaves (an absolutely placed box inside .hart, so its height is definite) and
     is not drawn at all when that is under 120px: a sliver of mark reads as a rendering fault. The screen only grows if the text alone is taller. */
  .first{height:auto;min-height:100svh}
  .hart{flex:1 1 0;min-height:0;position:relative;container-type:size}
  .hart>.mk,.hart>.art{position:absolute;inset:0;margin:auto;height:100%;width:auto;max-width:100%}
  .hart .art .grid.mob{position:static}
  /* 11 Nov: the post, webinar and blog heroes are a box holding a drawing (and the canvas hero-motion lays over it). The box took the space
     but the drawing kept its full-width height and ran out of the bottom, cut. The drawing now fills the box and scales inside it (meet) */
  .hart>.art>svg{display:block;width:100%;height:100%}
  @container (max-height:119px){.hart>*{display:none}}
}
/* mobile pass (11 Nov): touch targets on touch screens wider than a phone (tablet portrait and landscape); a mouse sees nothing change */
@media (pointer:coarse) and (min-width:761px){
  .bar a{display:inline-block;padding:14px 0;margin:-14px 0}
  .nav .logo{display:flex;align-items:center;min-height:44px}
  .tab{min-height:44px}
  .pill.sm{height:44px}
  .opt{height:44px}
  input[type=range]{height:44px}
  .sfoot .foot .logo{display:flex;align-items:center;min-height:44px}
  .fcol a,.lg a{display:flex;align-items:center;min-height:44px}
  .crumb a{display:inline-flex;align-items:center;min-height:44px}
  .htoc a{display:flex;align-items:center;min-height:44px;padding:0}
  .cc .big,.cc .tel{display:inline-flex;align-items:center;min-height:44px}
}
/* mobile pass (11 Nov): tablet portrait: the seven-step hexagon row is 784px wide and the column 672px at 768, so it ran 64px off the left edge; the steps share the column instead */
@media (min-width:761px) and (max-width:880px){
  ol.hexsteps.n7{--hw:calc((100vw - 96px) / 7)}
  ol.hexsteps.n7 li{width:var(--hw)}
  ol.hexsteps.n7 svg{width:calc(var(--hw) - 14px)}
  ol.hexsteps.n7::before{left:calc(var(--hw) / 2);right:calc(var(--hw) / 2);top:calc((var(--hw) - 14px) * .44 - 1.5px)}
  ol.hexsteps.n7 span{font-size:15px}
}
@media (max-width:760px),(pointer:coarse){.xlink{padding:13px 0}}
/* mobile pass (11 Nov): the open phone menu is a panel of its own (site.js sets its max-height to the screen below it); the page behind it holds still */
.mmenu{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;max-height:calc(100dvh - 100px)}
html.menu-open,html.menu-open body{overflow:hidden}
/* mobile pass (11 Nov): v8-motion.css sets the phone Contents list after this file, so these carry one more class to win */
@media (max-width:760px){
  details.mtoc summary{font-size:14px}
  details.mtoc a{font-size:16px;padding:0;min-height:44px;display:flex;align-items:center}
  .wbchap button{font-size:16px}.wbchap button .tn{font-size:13px}
}
/* mobile pass (11 Nov): on a short phone (360x780 and the like) the hero text is tightened a little so the mark keeps room to show */
@media (max-width:760px) and (max-height:820px){
  .hero{padding-top:14px;padding-bottom:12px}
  .hero .ht{gap:14px}
  .h1.xl{font-size:40px}.h1,.sghero .h1{font-size:34px}
  .hero .lead{font-size:16px;line-height:1.5}.hero .ctas{gap:10px}
  .hero .ctas .pill{height:44px}
}
.mmenu>*{flex:none}
/* mobile pass (11 Nov): the contact email at 26px was 2px wider than its card at 360 and pushed the page to 362 */
@media (max-width:760px){.cc .big{font-size:clamp(20px,6.2vw,26px);overflow-wrap:anywhere}}
/* tablet pass (13 Nov): from 761 to 1000 the desktop rows were too narrow, so headings broke one word a line and the four
   failure columns squeezed to about 100px. Headings stack over their intro, the four columns go two by two, the footer legal
   row stacks and the book-of-business chips sit two by two instead of leaving one alone. */
@media (min-width:761px) and (max-width:1000px){
  .sc-h{flex-direction:column;align-items:flex-start;gap:20px}
  .cols4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}.cols4 .col:nth-child(3){border-left:0;padding-left:0}
  .legal{flex-direction:column;gap:16px}
  .form .opts{display:grid;grid-template-columns:repeat(2,max-content)}
}
/* closing band, 761-1100: the mark starts past the text column instead of running under it (unchanged at 1100) */
@media (min-width:761px) and (max-width:1100px){.cb-art{left:max(calc(var(--gut) + 444px),calc(100% - 520px));right:auto}}
/* closing band, 761-900: too narrow for text and mark side by side, so the mark sits under the text, cropped bottom-right as on phones */
@media (min-width:761px) and (max-width:900px){
  .closeband{flex-direction:column;align-items:flex-start;min-height:0;padding-top:120px}
  .cb-t{order:0}
  .cb-art{order:1;position:relative;left:auto;right:auto;top:auto;bottom:auto;width:86%;margin:48px -18% -24% auto;align-self:flex-end}
}
/* scene panels, 761-860: the panel is about 400-460 wide, so the desktop grid (drawn 572-760 wide) shrank to a strip with
   empty dark above and below. The phone grid (drawn 350 wide at the same height) fills it. */
@media (min-width:761px) and (max-width:860px){.scene .panel .grid.dsk{display:none}.scene .panel .grid.mob{display:block}}
/* Safeguard hero, 761-1300: at 34px the "Your name on every report" slot made the chip 538 wide, wider than the art column
   below 1300, so it ran over the intro paragraph (900, 1024). The slots scale with the column instead. */
@media (min-width:761px) and (max-width:1180px){.sghero2 .slot2.full{font-size:calc(3vw - 4px);height:2.12em;padding:0 .88em}.sghero2 .slot2.empty{font-size:max(14px,calc(1.76vw - 2px));height:2.6em;padding:0 1.1em}}
@media (min-width:1181px) and (max-width:1300px){.sghero2 .slot2.full{font-size:calc(3vw - 6.5px);height:2.12em;padding:0 .88em}.sghero2 .slot2.empty{font-size:calc(1.76vw - 3.8px);height:2.6em;padding:0 1.1em}}
/* Safeguard lifecycle (Left/Right of Boom): the 560px step row starts 40px right of the seam, so it only fits a panel 1200+ wide
   and ran off the panel from 900 to 1360. 761-1160 uses the stacked step column phones use; 1161-1360 the row narrows to fit. */
@media (min-width:761px) and (max-width:1160px){.bchip{width:150px}.bchip .steps{flex-direction:column;align-items:stretch;gap:4px}.bchip .stp{justify-content:center;font-size:15px;height:38px}.bchip .arrow{transform:rotate(90deg);margin:8px auto}}
@media (min-width:1161px){.bchip{width:min(560px,calc(50% - 64px))}}
@media (min-width:1161px) and (max-width:1360px){.bchip .stp{font-size:16px;padding:0 14px;height:40px}}
/* closing band, 1101 up: the mark never starts before the end of the text column (520 + 24px gap). From 1440 up this resolves to
   the same place as before; between 1101 and about 1360 it moves right, because it used to run into "takes the win." */
@media (min-width:1101px){.cb-art{left:max(calc(var(--gut) + 544px),calc(100% - 690px - var(--gut)));right:auto}}
/* tablet type and grids (13 Nov): in the two-column hero, 761-1000 leaves the heading about 390 wide, so it ran 6 lines with
   single words stranded; the About leadership row was 12px too wide at 900 and dropped Miggy onto a row of his own. */
@media (min-width:761px) and (max-width:1000px){
  .h1{font-size:44px}.h1.xl{font-size:52px}
  .people{gap:24px}.people>.person{width:calc((100% - 48px) / 3);max-width:240px}
}
/* About "What we believe": no single word left on the last line of the closing lead */
.story .lead.tail{text-wrap:pretty}
/* final QA pass (13 Nov) */
@media (min-width:761px) and (max-width:1000px){
  /* one-pager: the two-column sections stack, so the capability cards stop breaking one word a line and "minutes" no longer runs into the outcomes */
  .op-handle,.op-sla{grid-template-columns:minmax(0,1fr);gap:56px}
  /* contact cards: the email addresses fit on one line instead of breaking mid-word */
  .cc .big{font-size:21px}
  /* hero buttons stack in the narrow hero column, so none is left alone on a second row (404) */
  .hero .ctas{flex-direction:column;align-items:flex-start}
}
/* legal contents card scrolls inside itself; the bottom fades so it reads as a scroll box, not a cut-off list */
.htoc{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 32px),transparent)}
/* tiers: the highlighted "Everything in ..." row bled 14px past the column on the right; it keeps the left bleed that lines its text up */
.tb li.inc{margin-right:0}