/* fonts, self-hosted (Latin + Latin Extended of Geist and Newsreader, from Google Fonts, OFL), 2026-10-01 */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-normal-latin-ext.49215a3bccae.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-normal-latin.f4634c3bc1fa.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-normal-latin-ext.49215a3bccae.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-normal-latin.f4634c3bc1fa.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/geist-normal-latin-ext.49215a3bccae.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/geist-normal-latin.f4634c3bc1fa.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("fonts/newsreader-italic-latin-ext.045b9f0ec267.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("fonts/newsreader-italic-latin.6d201901085f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("fonts/newsreader-normal-latin-ext.40f89707c10e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("fonts/newsreader-normal-latin.0a301b6df4c7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@property --a{syntax:'<angle>';inherits:false;initial-value:180deg}
:root{color-scheme:light;
  --white:#FFFFFF; --paper:#F6F4EE; --panel:#F0EEE7; --line:#E3E0D6;
  --ink:#141414; --ink-2:#4F4F49; --ink-3:#66655F;
  --deep:#1B2A29; --forest:#273A39; --green:#3A6133; --green-2:#2E4F29; --leaf:#5C9000;
  --gold:#DDB47A; --gold-ink:#86602D; --sand:#EFE4CF; --sand-2:#E5D5B6;
  --cream:#F3EFE5; --cream-2:rgba(243,239,229,.8);
  --night:#0C0C13; --lamp:#E6B27C; --pink:#EEEDE4; --pink-2:#A4A2AF;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Geist',-apple-system,'Segoe UI',system-ui,sans-serif;
  --max:1280px; --gut:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1); --pe:cubic-bezier(.4,0,.2,1);}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px;background:var(--deep)}   /* the bounce past the top and bottom shows the hero's and the footer's colour, not white */
body{margin:0;background:var(--white);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:6px}
.dark :focus-visible{outline-color:var(--gold)}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;background:var(--ink);color:#fff;font:500 15px/1 var(--sans);white-space:nowrap;transition:background .2s,box-shadow .2s;border:0;cursor:pointer}
.btn:hover{background:#000}
.btn.gold{background:var(--gold);color:var(--deep)}
.btn.gold:hover{background:#E6C38F}
.btn.ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px rgba(243,239,229,.4)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--cream)}
.btn.light{background:var(--panel);color:var(--ink)}
.btn.light:hover{background:#E7E4DB}
.btn.sm{height:36px;padding:0 15px;font-size:14px}

.h2{font-family:var(--serif);font-weight:400;font-optical-sizing:auto;font-size:clamp(34px,4.3vw,58px);line-height:1.04;letter-spacing:-.028em;text-wrap:balance}
.h3{font:400 clamp(26px,2.5vw,34px)/1.12 var(--serif);letter-spacing:-.02em;text-wrap:balance}

.src{display:block;margin-top:10px;font-size:12px;color:var(--ink-3)}
.dark .src{color:rgba(243,239,229,.62)}
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* nav: sits on the hero, then follows the colour of whatever section is under it */
.nav{position:fixed;z-index:50;inset:0 0 auto 0;padding-top:env(safe-area-inset-top,0px);color:var(--ink);transition:background .35s,color .35s,box-shadow .35s}
.nav.dark{color:var(--cream)}
.nav .row{display:flex;align-items:center;gap:32px;height:72px}
.nav .logo{position:relative;display:block;height:24px}
.nav .logo img{height:24px;width:auto;transition:opacity .35s}
.nav .logo .w{position:absolute;left:0;top:0;opacity:0}
.nav.dark .logo .w{opacity:1}
.nav.dark .logo .k{opacity:0}
.nav ul{display:flex;gap:4px;margin-left:auto;font-size:14.5px}
.nav ul a{position:relative;display:block;padding:8px 12px;border-radius:999px;opacity:.72;transition:opacity .2s,background .2s}
.nav ul a:hover{opacity:1}
.nav ul a[aria-current]{opacity:1}
.nav ul a[aria-current]::after{content:"";position:absolute;left:50%;bottom:1px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--gold)}
.nav .act{display:flex;align-items:center;gap:18px}
.nav .act .in{font-size:14.5px;opacity:.72;transition:opacity .2s}
.nav .act .in:hover{opacity:1}
.nav .btn{background:var(--ink);color:#fff}
.nav.dark .btn{background:var(--gold);color:var(--deep)}
.nav .menu{display:none;width:44px;height:44px;margin-right:-10px;border:0;background:transparent;color:inherit;cursor:pointer}
.nav .menu span{display:block;width:20px;height:1.5px;margin:5px auto;background:currentColor;transition:transform .3s}
.nav.open .menu span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav.open .menu span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.sheet{display:none}
@media (max-width:1120px){
  .nav ul,.nav .act .in{display:none}
  .nav .menu{display:block}
  .nav .act{margin-left:auto;gap:12px}
  .sheet{display:block;position:fixed;z-index:49;inset:0;padding:calc(96px + env(safe-area-inset-top,0px)) var(--gut) 40px;background:var(--deep);color:var(--cream);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .nav.open + .sheet{opacity:1;visibility:visible}
  .nav.open{color:var(--cream);background:transparent;box-shadow:none}
  .nav.open .logo .w{opacity:1}
  .nav.open .logo .k{opacity:0}
  .sheet a{display:block;padding:12px 0;font:400 clamp(30px,8vw,44px)/1.1 var(--serif);letter-spacing:-.02em;border-bottom:1px solid rgba(243,239,229,.1)}
  .sheet .btn{display:flex;height:52px;margin-top:32px;width:100%;font:500 16px/1 var(--sans);padding:0;border:0;letter-spacing:0}
  .sheet .in{font:400 16px/1 var(--sans);border:0;opacity:.75;text-align:center;margin-top:10px}
}
@media (max-width:520px){
  .nav .logo img{height:21px}
  .nav .act .btn{display:none}
}

/* hero: colour block + painting */
.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);background:var(--deep);color:var(--cream);min-height:min(100vh,940px);padding-top:72px}
.hero .txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,7vw,110px) clamp(24px,5vw,80px) clamp(40px,5vw,72px) max(var(--gut),calc((100vw - var(--max))/2 + 40px))}
.hero h1{margin-top:0;font-family:var(--serif);font-weight:400;font-optical-sizing:auto;font-size:clamp(46px,6.2vw,92px);line-height:.99;letter-spacing:-.034em;max-width:12ch;text-wrap:balance}
.hero .sub{margin-top:26px;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--cream-2);max-width:40ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}

.hero{position:relative;overflow:hidden}
.hero .txt{position:relative;z-index:2;pointer-events:none}
.hero .txt a{pointer-events:auto}

/* the weave: 24 strengths followed through a team of example orders; drawn by the script at the end */
.hero .weave{position:absolute;inset:0;width:100%;height:100%;z-index:1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 34%,#000 64%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 34%,#000 64%)}
.hero .weave path{fill:none;stroke:var(--leaf);stroke-opacity:.28;stroke-width:1;transition:stroke .4s,stroke-opacity .4s,stroke-width .4s}
.hero .weave path.shared{stroke:var(--gold);stroke-opacity:.45}
.hero .weave path:not(.shared){stroke-opacity:var(--o,.12);stroke-width:.8}
.hero .weave path.warm{stroke:var(--gold);stroke-opacity:.5}
.hero .weave .wv-dot{fill:#f1d9a8;opacity:0;pointer-events:none}
.hero .weave .wv-halo{fill:var(--gold);opacity:0;filter:blur(4px);pointer-events:none}
@media (min-resolution:2dppx){.hero .weave path:not(.shared){stroke-width:.6}}
.hero .weave path.on{stroke:var(--gold);stroke-opacity:.95;stroke-width:1.8}
.hero .weave.dim path:not(.on){stroke-opacity:.12}
.hero .tag{position:absolute;z-index:3;left:0;top:0;pointer-events:none;font:400 20px/1 var(--serif);color:var(--gold);opacity:0;transition:opacity .25s;white-space:nowrap;text-shadow:0 0 18px var(--deep)}
.hero .tag small{display:block;font:400 12px/1.4 var(--sans,system-ui);color:rgba(243,239,229,.62);margin-top:6px}
.hero .note{position:absolute;z-index:2;right:max(var(--gut),calc((100vw - var(--max))/2 + 40px));bottom:clamp(40px,5vw,72px);max-width:34ch;text-align:right;font-size:13px;line-height:1.5;color:rgba(243,239,229,.55)}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;padding-bottom:min(78vw,400px)}
  .hero .txt{padding:56px var(--gut) 44px}
  
  .hero .weave{top:auto;height:min(78vw,400px);-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 80%,transparent)}
  .hero .note{left:var(--gut);right:var(--gut);bottom:14px;text-align:left;max-width:none}
}

/* our story + two arenas */
.story{padding-block:clamp(40px,5vw,72px) clamp(96px,11vw,150px)}
.story .head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px 72px;align-items:end}

.story .head .h2{margin-top:16px}
.arena{border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.arena figure{aspect-ratio:16/10;overflow:hidden}
.arena figure img{width:100%;height:100%;object-fit:cover}
.arena .in{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:14px;flex:1}
.arena h3{font:400 clamp(26px,2.5vw,34px)/1.12 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.arena p{font-size:16px;line-height:1.6}
.arena.sport{background:var(--green);color:#fff}
.arena.sport p{color:rgba(255,255,255,.86)}

@media (max-width:980px){
  .story .head{grid-template-columns:1fr}
}

/* advisory */
.run{background:var(--sand);padding-block:clamp(80px,10vw,128px)}
.run .top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 72px;align-items:end}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(40px,5vw,60px);counter-reset:s}
.steps li{counter-increment:s;background:#FBF7EE;border-radius:16px;padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--deep);color:var(--gold);font:500 14px/1 var(--sans);margin-bottom:10px}
.steps h4{font:400 22px/1.2 var(--serif);letter-spacing:-.012em}
.steps p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.ways{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--ink-2)}
@media (max-width:1000px){
  .run .top{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
}
.who{padding-block:clamp(88px,11vw,140px) 0}
.who .top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 72px;align-items:end}
@media (max-width:980px){
  .who .top{grid-template-columns:1fr}
}
.case{border-radius:18px;padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:12px;overflow:hidden}
.case h4{font:400 clamp(24px,2.2vw,30px)/1.12 var(--serif);letter-spacing:-.018em;text-wrap:balance}
.case p{font-size:15px;line-height:1.55}
.case blockquote{margin-top:6px;font:400 19px/1.38 var(--serif);letter-spacing:-.006em}
.case cite{display:block;margin-top:8px;font:400 13px/1.45 var(--sans);font-style:normal;opacity:.82}
.case .src{margin-top:auto;padding-top:8px}
.case.az{grid-column:span 3;background:var(--forest);color:var(--cream)}
.case.az .in{display:flex;flex-direction:column;gap:12px;flex:1}
.case.az p{color:var(--cream-2)}
.case.club{grid-column:span 3;background:var(--sand)}
.case.club p{color:var(--ink-2)}
@media (max-width:900px){
  .case.az,.case.club{grid-column:auto}
}

/* platform (green) */

.ranks{display:grid;gap:6px}
.ranks .k{font-size:12px;color:var(--ink-3);margin-bottom:6px}
.rank{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 14px;border-radius:9px;background:#E9EEE7;box-shadow:inset 0 0 0 1px rgba(58,97,51,.16)}
.rank b{font:600 13px/1 var(--sans);color:#2F5A2A;font-variant-numeric:tabular-nums}
.rank > span{font:500 14.5px/1.25 var(--sans)}
.rank small{font-size:12px;color:var(--ink-2);text-align:right}
.rank.low{background:#F7ECEA;box-shadow:inset 0 0 0 1px rgba(160,70,55,.16)}
.rank.low b{color:#8E4436}

.ranks .gap{font-size:11.5px;color:var(--ink-3);padding:2px 14px}

@media (max-width:560px){
  .rank{grid-template-columns:24px minmax(0,1fr);padding:9px 11px}
  .rank small{grid-column:2;text-align:left;margin-top:-4px}
  
  
}

/* the sort */
.sort{margin-top:16px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center;background:var(--green-2);border-radius:22px;padding:clamp(24px,4vw,56px)}
.sort .h3{margin-top:14px}

.sort .note{display:inline-flex;align-items:center;gap:8px;margin-top:18px;min-height:28px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.12);font-size:13px;color:#fff}
.sort .note i{width:6px;height:6px;border-radius:50%;background:#B9DB7A;flex:none}
.game{border-radius:18px;background:var(--paper);color:var(--ink);padding:clamp(18px,2.6vw,28px);min-height:420px;display:flex;flex-direction:column}
.game .meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:var(--ink-2)}
.dots{display:flex;gap:5px}
.dots i{width:18px;height:3px;border-radius:2px;background:rgba(0,0,0,.12);transition:background .3s}
.dots i.done{background:var(--green)}
.game h4{margin-top:18px;font:400 clamp(24px,2.2vw,30px)/1.15 var(--serif);letter-spacing:-.02em}
.game [data-g-play]{flex:1;display:flex;flex-direction:column}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;flex:1}
.opt{display:flex;flex-direction:column;justify-content:space-between;text-align:left;gap:16px;min-height:180px;padding:20px;border-radius:14px;border:0;background:var(--white);box-shadow:0 1px 2px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.05);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,opacity .3s}
.opt:hover{transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(30,32,28,.35),0 0 0 1px rgba(58,97,51,.35)}
.opt b{display:block;font:400 clamp(24px,2.2vw,30px)/1.08 var(--serif);letter-spacing:-.02em}
.opt > span > span{display:block;margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.opt kbd{align-self:flex-start;font:500 11px/1 var(--sans);color:var(--ink-3);padding:4px 7px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--line)}
.pair.fade .opt{opacity:0;transform:translateY(6px)}

.game [hidden]{display:none!important}
@media (max-width:900px){
  .sort{grid-template-columns:1fr}
}
@media (max-width:560px){
  .dots{display:none}
  .pair{grid-template-columns:1fr}
  .opt{min-height:0;padding:16px}
  .opt kbd{display:none}
  .game{min-height:0}
}

/* Pete & Puck */
.agents{background:var(--paper);padding-block:clamp(96px,12vw,150px)}
.agents .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center}
.agents .h2{margin-top:16px}

.pilot{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:13.5px;color:var(--ink-2)}
.pilot i{width:7px;height:7px;border-radius:50%;background:var(--leaf)}

.play{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:999px;border:0;background:rgba(255,255,255,.09);color:var(--pink);font-size:12.5px;cursor:pointer;transition:background .2s}
.play:hover{background:rgba(230,178,124,.16)}
.play svg{width:9px;height:10px;flex:none}

.lt{position:absolute;pointer-events:none;z-index:3;transition:opacity .45s var(--pe)}

.arc{left:29%;right:29%;height:1.5px;background:linear-gradient(90deg,transparent,rgba(236,184,128,.95) 30%,rgba(246,210,160,1) 50%,rgba(236,184,128,.95) 70%,transparent);opacity:0}
.arc::after{content:"";position:absolute;left:-12%;right:-12%;height:70px;background:radial-gradient(50% 100% at 50% var(--o),rgba(230,160,100,.42),rgba(230,160,100,0) 72%)}
.arc.top{top:0;transition:opacity .08s linear}
.arc.top::after{top:0;--o:0%}
.arc.bot{bottom:0}
.arc.bot::after{bottom:0;--o:100%}

@media (max-width:980px){
  .agents .grid{grid-template-columns:1fr}
}

/* trust */
.trust{padding-block:clamp(96px,12vw,150px) 0}
.trust .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:32px 72px}

@media (max-width:900px){
  .trust .grid{grid-template-columns:1fr}
}

/* insights */
.blog{margin-top:40px;border-top:1px solid var(--line)}
.blog a{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);transition:padding .3s var(--ease)}
.blog a:hover{padding-left:6px}
.blog span.c{font-size:13px;color:var(--ink-3)}
.blog b{font:400 19px/1.3 var(--serif)}
@media (max-width:980px){
  .blog a{grid-template-columns:1fr auto}
  .blog span.c{display:none}
}

/* ways of working + pricing */
.work{padding-block:clamp(96px,12vw,150px) clamp(96px,12vw,150px)}
.work .top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 72px;align-items:end}
.way{border-radius:18px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;gap:12px}
.way .tag{font-size:12px;font-weight:500;padding:3px 9px;border-radius:999px;background:var(--gold);color:var(--deep)}
.way h3{font:400 clamp(26px,2.4vw,32px)/1.1 var(--serif);letter-spacing:-.02em}
.way p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.way .prices{margin-top:6px;border-top:1px solid var(--line)}
.way .prices li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.way .prices b{font:400 20px/1 var(--serif);letter-spacing:-.01em;white-space:nowrap}
.way .prices small{display:block;font-size:12px;color:var(--ink-3)}
.way .btn{margin-top:auto;align-self:flex-start}
@media (max-width:1000px){
  .work .top{grid-template-columns:1fr}
}

/* close on the painting */
.close{position:relative;min-height:min(820px,92vh);display:grid;align-items:center;overflow:hidden;background:#C9A58D}
.close > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.close .wrap{position:relative;width:100%;padding-block:clamp(72px,9vw,120px)}
@media (max-width:640px){
  .close{min-height:0}
}

/* footer */
.foot{background:var(--deep);color:var(--cream);padding-block:64px 30px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:32px 24px}
.fgrid .brand img{height:52px;width:auto}
.fgrid .brand p{margin-top:16px;font-size:14px;color:var(--cream-2);max-width:30ch;line-height:1.5}
.fgrid h4{font:500 13.5px/1.3 var(--sans);margin-bottom:12px;color:var(--gold)}
.fgrid li{margin-bottom:8px;font-size:14px;color:var(--cream-2)}
.fgrid li a:hover{color:#fff}
.base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:48px;padding-top:20px;border-top:1px solid rgba(243,239,229,.16);font-size:12px;color:rgba(243,239,229,.66)}
@media (max-width:980px){
  .fgrid{grid-template-columns:1fr 1fr}
  .fgrid .brand{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .opt{transition:none!important}
  
  .pair.fade .opt{opacity:1;transform:none}
}

/* ================= landing v2 pages: shared layout on v4's tokens ================= */
:root{--pad:max(var(--gut),calc((100vw - var(--max))/2 + 40px));--sect:clamp(88px,11vw,152px)}
.hero h1 em{font-style:italic;color:var(--gold)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor}
.dark .eyebrow{color:var(--gold)}
.sec{padding:var(--sect) var(--pad)}
.sec.paper{background:var(--paper)}
.sec.deep{background:var(--deep);color:var(--cream)}
.sec-h{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px clamp(32px,5vw,80px);align-items:end}
.sec-h h2{margin-top:18px;font:300 clamp(36px,4.6vw,68px)/1.02 var(--serif);letter-spacing:-.03em;max-width:16ch;text-wrap:balance}
.sec-h h2 em{font-style:italic;color:var(--gold-ink)}
.deep .sec-h h2 em{color:var(--gold)}
.sec-h p{color:var(--ink-2);max-width:46ch;font-size:clamp(16px,1.3vw,18px)}
.deep .sec-h p{color:rgba(243,239,229,.7)}
@media (max-width:900px){
  .sec-h{grid-template-columns:1fr}
}
.arrow{display:inline-flex;align-items:center;gap:8px;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:2px}
.arrow:hover{color:var(--gold-ink)}
.deep .arrow:hover{color:var(--gold)}

/* the moments that decide: a sticky story (v3), steps on the left, the product on the right */
.mom .eyebrow{color:var(--gold)}
.mom-h h2{margin-top:18px;font:300 clamp(40px,5.2vw,78px)/1 var(--serif);letter-spacing:-.03em;max-width:14ch}
.mom-h h2 em{font-style:italic;color:var(--gold)}
.mom-h p{margin-top:22px;max-width:44ch;font-size:clamp(17px,1.4vw,20px);color:rgba(243,239,229,.74)}
.mom{background:var(--forest);color:var(--cream);padding:var(--sect) var(--pad) calc(var(--sect) * .6)}
.story{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);margin-top:clamp(40px,5vw,64px)}
.day{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--gold)}
.day::before{content:"";width:18px;height:1px;background:currentColor}
.frame{display:none}
.squad{display:grid;gap:0}

@media (max-width:980px){
  .story{grid-template-columns:1fr}
}

/* founders strip */
.fstrip{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.fstrip h2{margin-top:18px;font:300 clamp(36px,4.4vw,64px)/1.02 var(--serif);letter-spacing:-.03em;max-width:13ch}
.fstrip h2 em{font-style:italic;color:var(--gold-ink)}
.fstrip p{margin:22px 0 26px;color:var(--ink-2);max-width:42ch}
.faces{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.faces figure{margin:0}
.faces .ph2{aspect-ratio:4/5;overflow:hidden;background:var(--gold);isolation:isolate;position:relative;border-radius:4px}
.faces img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(1.04);mix-blend-mode:multiply;transition:filter .7s}
.faces .ph2::after{content:"";position:absolute;inset:0;background:var(--deep);mix-blend-mode:lighten;transition:opacity .7s}
.faces figure:hover img{filter:none;mix-blend-mode:normal}
.faces figure:hover .ph2::after{opacity:0}
.faces figcaption{margin-top:12px;font:400 17px/1.2 var(--serif)}
.faces figcaption small{display:block;margin-top:4px;font:400 12.5px/1.3 var(--sans);color:var(--ink-2)}
@media (max-width:900px){
  .fstrip{grid-template-columns:1fr}
}

/* insights strip */
.reads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(36px,5vw,56px)}
.read{display:flex;flex-direction:column;padding:26px;border-top:2px solid var(--ink);transition:background .3s}
.read:hover{background:rgba(20,20,20,.03)}
.read span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.read h3{margin-top:14px;font:400 23px/1.2 var(--serif);letter-spacing:-.01em}
.read p{margin-top:10px;font-size:14.5px;color:var(--ink-2)}
@media (max-width:900px){
  .reads{grid-template-columns:1fr}
}

/* call to action */
.cta2{background:var(--deep);color:var(--cream);text-align:center;padding:clamp(110px,16vw,190px) var(--pad)}
.cta2 h2{margin:0 auto;font:300 clamp(44px,6.4vw,100px)/.97 var(--serif);letter-spacing:-.035em;max-width:12ch;text-wrap:balance}
.cta2 h2 em{font-style:italic;color:var(--gold)}
.cta2 p{margin:28px auto 40px;max-width:46ch;color:rgba(243,239,229,.7)}
.cta2 .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* inner-page hero (sport, business, about, platform) */
.phero{position:relative;background:var(--deep);color:var(--cream);padding:clamp(150px,20vh,210px) var(--pad) clamp(80px,11vw,130px);overflow:hidden}
.phero h1{margin-top:22px;font:300 clamp(48px,7vw,112px)/.95 var(--serif);letter-spacing:-.035em;max-width:12ch;text-wrap:balance}
.phero h1 em{font-style:italic;color:var(--gold)}
.phero .lede3{margin-top:30px;max-width:48ch;font-size:clamp(17px,1.45vw,20px);color:rgba(243,239,229,.72)}
.phero .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}
.phero .weave{-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 80%);mask-image:linear-gradient(90deg,transparent 30%,#000 80%);opacity:.8}

/* platform tiles: drawn UI, not screenshots (same example person as the ranks tile) */

.close{background:var(--deep)}

/* the weave behind an inner-page hero (v4 scopes its rules to .hero) */
.phero .weave{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.phero .weave path{fill:none;stroke:var(--leaf);stroke-opacity:.26;stroke-width:1;transition:stroke .4s,stroke-opacity .4s,stroke-width .4s}
.phero .weave path.shared{stroke:var(--gold);stroke-opacity:.42}
.phero .weave path.on{stroke:var(--gold);stroke-opacity:.95;stroke-width:1.8}
.phero .weave.dim path:not(.on){stroke-opacity:.1}
.phero .tag{position:absolute;z-index:3;left:0;top:0;pointer-events:none;font:400 20px/1 var(--serif);color:var(--gold);opacity:0;transition:opacity .25s;white-space:nowrap}
.phero .tag small{display:block;font:400 12px/1.4 var(--sans);color:rgba(243,239,229,.62);margin-top:6px}
.phero > :not(.weave):not(.tag){position:relative;z-index:1}

/* our own colours: the dark gold (read as brown on paper) becomes logo green; gold stays on dark */
:root{--gold-ink:#3A6133}

/* gain points */

/* what happens when you call */
.call .eyebrow{color:var(--gold)}
.call h2{margin-top:18px}

/* the gains inside the moments section (forest): one section with the story above */

.mom-h p{max-width:52ch}

/* home hero: exactly one screen, with the clients as its bottom row */
.home .hero{min-height:100vh;min-height:100svh;padding-bottom:132px}
.hero-logos{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:22px 0 30px;border-top:1px solid rgba(243,239,229,.08);background:linear-gradient(180deg,rgba(27,42,41,0),rgba(27,42,41,.85) 40%)}
.hero-logos p{margin:0 var(--pad) 18px;font:500 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,239,229,.5)}
.hl-view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.hl-track{display:flex;align-items:center;gap:72px;width:max-content;margin:0;padding:0 72px 0 0;list-style:none;animation:hl-run 60s linear infinite}
.hl-track li{flex:none;display:flex;align-items:center;height:52px}
.hl-track img{display:block;width:auto;max-height:52px;transform:scale(.82);filter:brightness(0) invert(1);opacity:.6;transition:opacity .3s}
.hl-track img:hover{opacity:1}
.hero-logos:hover .hl-track{animation-play-state:paused}
@keyframes hl-run{to{transform:translateX(-50%)}}
@media (max-width:900px){
  .home .hero{padding-bottom:min(78vw,400px)}
  .hl-track{gap:48px;padding-right:48px;animation-duration:45s}
  .hero-logos p{margin-bottom:14px}
}
/* reduce motion (an iPhone setting many people have on): no sliding, but still one row, which you can swipe;
   a wrapped grid grew to four rows on phones and covered the hero buttons */
@media (prefers-reduced-motion:reduce){
  .hl-view{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hl-view::-webkit-scrollbar{display:none}
  .hl-track{animation:none;flex-wrap:nowrap;width:max-content;padding:0 var(--pad)}
  .hl-track li[aria-hidden]{display:none}
}
.home .hero .txt{padding-top:clamp(24px,5vh,72px);padding-bottom:clamp(24px,4vh,56px)}
@media (max-width:900px){
  .home .hero{padding-bottom:min(62vw,290px)}
  .home .hero .txt{padding-top:36px;padding-bottom:24px}
}

/* the founders in plain black and white */
.faces .ph2{background:transparent}
.faces .ph2::after{display:none}
.faces img{filter:grayscale(1) contrast(1.05);mix-blend-mode:normal}
.faces figure:hover img{filter:grayscale(1) contrast(1.05)}

/* every logo in its own colours: the bottom row of the hero is a light band */
.hero-logos{background:var(--paper);border-top:0;padding:20px 0 24px}
.hero-logos p{color:var(--ink-3)}
.hl-track img{filter:none;opacity:1}
.hl-track img:hover{opacity:1}

/* the moments that decide, as gains: six sport <-> business mirrors, one case, one line */
.moments2 .mom-h .eyebrow{margin-bottom:18px}
.arena-switch{display:inline-flex;gap:4px;margin-top:clamp(32px,5vw,48px);padding:4px;border-radius:999px;background:rgba(243,239,229,.08)}
.arena-switch button{border:0;background:none;height:40px;padding:0 20px;border-radius:999px;font:500 14.5px/1 var(--sans);color:rgba(243,239,229,.72);cursor:pointer;transition:background .3s,color .3s}
.arena-switch button[aria-pressed="true"]{background:var(--cream);color:var(--deep)}

.case{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,2.3fr);gap:clamp(24px,4vw,64px);margin-top:clamp(64px,9vw,112px);padding-top:clamp(36px,5vw,56px);border-top:1px solid rgba(243,239,229,.12)}

@media (max-width:1000px){
  
  .case{grid-template-columns:1fr}
}

/* the moments that decide, as an editorial list (replaces the card grid above) */
.mg-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(32px,5vw,80px);align-items:end}
.mg-head .eyebrow{margin-bottom:18px}
.mg-head h2{font:300 clamp(40px,5.2vw,78px)/1 var(--serif);letter-spacing:-.03em}
.mg-head h2 em{font-style:italic;color:var(--gold)}
.mg-head p{max-width:46ch;color:rgba(243,239,229,.72);font-size:clamp(16px,1.3vw,18px)}
.mg-head .arena-switch{margin-top:26px}
.mg-list{list-style:none;margin:clamp(48px,7vw,80px) 0 0;padding:0;border-bottom:1px solid rgba(243,239,229,.14)}
.mg-row{position:relative;display:grid;padding:clamp(26px,3vw,36px) 0;border-top:1px solid rgba(243,239,229,.14)}
.mg-row::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.mg-row:hover::before{transform:scaleX(1)}
.mg-face{grid-area:1/1;display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr) minmax(0,17rem);gap:clamp(20px,3vw,48px);align-items:baseline;
  transition:opacity .5s calc(var(--i) * 70ms),transform .5s calc(var(--i) * 70ms) cubic-bezier(.2,.7,.2,1),visibility 0s linear 0s}
.moments2[data-arena="sport"] .mg-face[data-a="business"],.moments2[data-arena="business"] .mg-face[data-a="sport"]{opacity:0;transform:translateY(14px);visibility:hidden;
  transition:opacity .25s,transform .25s,visibility 0s linear .25s}
.mg-moment{font:500 11.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.mg-q{margin:0;font:300 clamp(22px,2.3vw,32px)/1.18 var(--serif);letter-spacing:-.015em;color:var(--cream);max-width:30ch}
.mg-gain{margin:0;font-size:14.5px;line-height:1.5;color:rgba(243,239,229,.7)}
.mg-gain::before{content:"→ ";color:var(--gold)}
.mg-case{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr);gap:clamp(28px,5vw,80px);margin-top:clamp(80px,11vw,140px)}
.mg-case h3{margin-top:16px;font:300 clamp(30px,3.4vw,48px)/1.04 var(--serif);letter-spacing:-.02em;color:var(--cream)}
.mg-case small{display:block;margin-top:14px;font-size:12.5px;color:rgba(243,239,229,.5)}
.mg-case ol{position:relative;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin:0;padding:34px 0 0}
.mg-case ol::before{content:"";position:absolute;left:6px;right:0;top:6px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(221,180,122,.25))}
.mg-case li{position:relative}
.mg-case li::before{content:"";position:absolute;left:0;top:-34px;width:13px;height:13px;border-radius:50%;background:var(--forest);box-shadow:inset 0 0 0 1.5px var(--gold)}
.mg-case li:last-child::before{background:var(--gold)}
.mg-case b{display:block;font:400 clamp(19px,1.6vw,22px)/1.2 var(--serif);color:var(--cream)}
.mg-case li p{margin-top:10px;font-size:15px;line-height:1.55;color:rgba(243,239,229,.72)}

@media (max-width:1000px){
  .mg-face{grid-template-columns:minmax(0,10rem) minmax(0,1fr)}
  .mg-gain{grid-column:2}
  .mg-case{grid-template-columns:1fr}
}
@media (max-width:700px){
  .mg-head{grid-template-columns:1fr}
  .mg-face{grid-template-columns:1fr;gap:10px}
  .mg-gain{grid-column:auto}
  .mg-case ol{grid-template-columns:1fr;padding:0 0 0 30px;gap:26px}
  .mg-case ol::before{left:6px;right:auto;top:6px;bottom:6px;width:1px;height:auto;background:linear-gradient(180deg,var(--gold),rgba(221,180,122,.25))}
  .mg-case li::before{left:-30px;top:4px}
}
@media (prefers-reduced-motion:reduce){
  .mg-face,.mg-row::before{transition:none}
}

/* the gains: "What you get" above the deliverable, instead of an arrow */
.mg-gain::before{content:none}
.mg-get{display:block;margin-bottom:6px;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.mg-gain{color:rgba(243,239,229,.8)}

/* the case follows the switch: the hockey team on the pitch, the PE firm in the boardroom */
.moments2[data-arena="sport"] .mg-case[data-a="business"],.moments2[data-arena="business"] .mg-case[data-a="sport"]{display:none}

/* two ways to work with us: with us, or the platform on its own */
.way2{display:flex;flex-direction:column;padding:clamp(28px,3vw,40px);border-radius:20px;background:var(--white);box-shadow:0 0 0 1px var(--line)}
.way2 h3{margin-top:16px;font:300 clamp(28px,2.8vw,40px)/1.05 var(--serif);letter-spacing:-.02em}
.way2 > p{margin-top:14px;max-width:44ch;color:var(--ink-2)}
.way2 ul{list-style:none;margin:22px 0 30px;padding:0;display:grid;gap:10px;font-size:15px}
.way2 li{display:flex;gap:10px;align-items:baseline}
.way2 li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--green);transform:translateY(-2px)}
.way2 .btn{margin-top:auto;align-self:flex-start}
.way2.deep{background:var(--deep);color:var(--cream);box-shadow:none}
.way2.deep .eyebrow{color:var(--gold)}
.way2.deep > p{color:rgba(243,239,229,.72)}
.way2.deep li::before{background:var(--gold)}

/* platform: four layers (tiles 1, 2 / 3, 4), the under-pressure zones, how you start */

.zone{display:grid;grid-template-columns:70px 1fr;gap:12px;align-items:baseline;padding:12px 14px;border-radius:10px}
.zone b{font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.zone span{font:400 15.5px/1.35 var(--serif);color:var(--ink)}
.zone.g{background:#E9EEE7}
.zone.g b{color:#2F5A2A}
.zone.o{background:#FBF1DE}
.zone.o b{color:#86602D}
.zone.r{background:#F7ECEA}
.zone.r b{color:#8E4436}
.zone.reset{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.zone.reset b{color:var(--ink-2)}
.start-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:clamp(36px,5vw,56px) 0 0;padding:0;counter-reset:st}
.start-steps li{position:relative;padding:26px 24px 24px;border-radius:18px;background:var(--white);box-shadow:0 0 0 1px var(--line);counter-increment:st}
.start-steps li::before{content:counter(st);display:grid;place-items:center;width:30px;height:30px;margin-bottom:18px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--green);font:500 12.5px/1 var(--sans);color:var(--green)}
.start-steps b{display:block;font:400 22px/1.15 var(--serif)}
.start-steps small{display:block;margin-top:6px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.start-steps p{margin-top:12px;font-size:14.5px;color:var(--ink-2)}
@media (max-width:1000px){
  
  .start-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .start-steps{grid-template-columns:1fr}
}

/* the logo in the menu was too small */
.nav .logo,.nav .logo img{height:34px}
@media (max-width:520px){
  .nav .logo,.nav .logo img{height:28px}
}
.hero .sub{max-width:46ch}

/* business page: the logos in colour, three ways to work, a short trust list */

.ways3-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(36px,5vw,56px)}
.ways3-grid .way2 h3{margin-top:12px}
.ways3-grid .way2 > p{margin-bottom:28px}

@media (max-width:1000px){
  .ways3-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .ways3-grid{grid-template-columns:1fr}
}

/* kept from the old site: our story (about), the combined rows, and the about page */

.ways3 .way2 .eyebrow::before{display:none}
.ways3 .way2.deep .eyebrow{color:var(--gold)}
.about .phero h1{max-width:17ch;font-size:clamp(44px,5.6vw,88px)}
.bios h2,.pillars h2{margin-top:18px;font:300 clamp(36px,4.6vw,68px)/1.02 var(--serif);letter-spacing:-.03em}
.bio{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;margin-top:clamp(48px,7vw,96px)}
.bio-ph{aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--paper);max-width:420px}
.bio-ph img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.bio-txt h3{font:400 clamp(28px,2.6vw,40px)/1.05 var(--serif);letter-spacing:-.02em}
.bio-role{display:block;margin:10px 0 24px;font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.bio-txt p{margin:0 0 16px;max-width:64ch;color:var(--ink-2)}
@media (max-width:760px){
  .bio{grid-template-columns:1fr}
  .bio-ph{max-width:300px}
}
.pi-list{list-style:none;margin:clamp(36px,5vw,60px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.pi-list li{padding-top:20px;border-top:2px solid var(--green)}
.pi-list h3{font:400 24px/1.1 var(--serif)}
.pi-list p{margin-top:12px;font-size:15px;color:var(--ink-2)}
@media (max-width:1000px){
  .pi-list{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .pi-list{grid-template-columns:1fr}
}
.mg-q q{quotes:"\201C" "\201D"}

.fstrip h2 + .arrow{margin-top:28px}

/* the nav: a floating bar, inset from the edges; it takes the colour of the section under it, marks the
   page you are on, and tucks away while you read down */
.nav{padding:calc(10px + env(safe-area-inset-top,0px)) var(--gut) 0;background:none!important;box-shadow:none!important;transition:transform .45s cubic-bezier(.2,.7,.2,1),color .35s}
.nav .wrap.row{max-width:1200px;margin:0 auto;height:60px;padding:0 8px 0 22px;gap:24px;border-radius:999px;background:rgba(250,248,243,.8);-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);box-shadow:0 0 0 1px rgba(20,20,20,.07),0 12px 32px -20px rgba(20,20,20,.4);transition:background .35s,box-shadow .35s}
.nav.dark .wrap.row{background:rgba(27,42,41,.6);box-shadow:0 0 0 1px rgba(243,239,229,.1),0 12px 32px -20px rgba(0,0,0,.7)}
.nav ul{margin:0 auto}
.nav .logo,.nav .logo img{height:28px}
.nav ul a[aria-current]::after{bottom:-2px}
.nav .act .btn{height:44px;padding:0 20px}
.nav.tuck{transform:translateY(calc(-100% - 14px))}
.nav.open .wrap.row{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
@media (max-width:900px){
  .nav{padding:calc(8px + env(safe-area-inset-top,0px)) 10px 0}
  .nav .wrap.row{height:56px;padding:0 6px 0 16px}
  .nav .logo,.nav .logo img{height:26px}
}
@media (prefers-reduced-motion:reduce){
  .nav{transition:color .35s}
}

/* connect */
.cx-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(40px,6vw,96px);align-items:start}
.cx h2{margin-bottom:28px;font:300 clamp(30px,3vw,44px)/1.05 var(--serif);letter-spacing:-.02em}
.cx-form form{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.cx-field.wide,.cx-form form .btn{grid-column:1/-1}
.cx-field label{display:block;margin-bottom:8px;font:500 13.5px/1.2 var(--sans);color:var(--ink-2)}
.cx-field label small{font-weight:400;opacity:.7}
.cx-field input,.cx-field textarea{display:block;width:100%;padding:14px 16px;border:1px solid rgba(20,20,20,.16);border-radius:10px;background:#fff;color:var(--ink);font:400 16px/1.45 var(--sans);transition:border-color .2s,box-shadow .2s}
.cx-field textarea{resize:vertical;min-height:150px}
.cx-field input:focus,.cx-field textarea:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(58,97,51,.16)}
.cx-field.bad input,.cx-field.bad textarea{border-color:#A33A3A}
.cx-err{margin-top:6px;font-size:13px;color:#8E2A2A}
.cx-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cx-note{margin-bottom:22px;padding:14px 18px;border-radius:10px;font-size:15px}
.cx-note.ok{background:rgba(58,97,51,.1);color:var(--green-2)}
.cx-note.err{background:rgba(142,42,42,.08);color:#7A2121}
.cx-form .btn{justify-self:start;border:0;cursor:pointer;font:inherit;font-weight:500}
.cx-direct{padding:clamp(24px,3vw,36px);border-radius:18px;background:var(--paper)}
.cx-direct h2{font-size:clamp(24px,2.2vw,32px)}
.cx-direct ul{list-style:none;margin:0 0 26px;padding:0}
.cx-direct li{display:grid;gap:4px;padding:16px 0;border-top:1px solid rgba(20,20,20,.1)}
.cx-direct b{font:400 20px/1.2 var(--serif)}
.cx-direct li a{font-size:14.5px;color:var(--ink-2)}
.cx-direct li a:hover{color:var(--green)}
.cx-mail{margin-top:18px;font-size:14.5px;color:var(--ink-2)}
.cx-mail a{border-bottom:1px solid currentColor}
@media (max-width:900px){
  .cx-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cx-form form{grid-template-columns:1fr}
}

/* media */
.press-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.press-ph{aspect-ratio:4/3;overflow:hidden;margin-bottom:22px;border-radius:6px;background:var(--paper)}
.press-ph img{display:block;width:100%;height:100%;object-fit:cover}
.press-ph.logo{background:#fff;box-shadow:inset 0 0 0 1px rgba(20,20,20,.08)}
.press-ph.logo img{object-fit:contain;padding:14%}
.press-item h2{margin:12px 0;font:400 clamp(22px,1.9vw,28px)/1.15 var(--serif);letter-spacing:-.01em}
.press-item p{margin-bottom:18px;font-size:15.5px;color:var(--ink-2)}
@media (max-width:900px){
  .press-grid{grid-template-columns:1fr}
}

/* the blog in the v2 layout. The articles keep their own markup (shared with the old base until the
   switch); these rules style it by structure, since the utility classes in it have no stylesheet here */
.art [id$="-hero-section"]{position:relative;overflow:hidden;padding:clamp(150px,20vh,210px) var(--pad) clamp(64px,9vw,112px);background:var(--deep);color:var(--cream)}
.art [id$="-hero-section"] > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.26;filter:grayscale(1) contrast(1.05)}
.art [id$="-hero-section"]::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,42,41,.35),rgba(27,42,41,.85));pointer-events:none}
.art [id$="-hero-section"] > div:not(:last-child){display:none}
.art [id$="-hero-section"] > div:last-child{position:relative;z-index:1;max-width:1000px}
.art [id$="-hero-section"] > div:last-child > p:not([id$="-hero-paragraph"]){display:inline-flex;align-items:center;gap:10px;margin-bottom:6px;font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.art [id$="-hero-section"] > div:last-child > p:not([id$="-hero-paragraph"])::before{content:"";width:18px;height:1px;background:currentColor}
.art [id$="-hero-headline"]{margin-top:18px;font:300 clamp(38px,5.2vw,78px)/1.02 var(--serif);letter-spacing:-.03em;max-width:20ch;text-wrap:balance}
.art .gradient-text-gold{background:none;-webkit-text-fill-color:currentColor;color:var(--gold);font-style:italic}
.art [id$="-hero-paragraph"]{margin-top:26px;max-width:58ch;font-size:clamp(17px,1.4vw,20px);color:rgba(243,239,229,.74)}
.art [id$="-content-section"]{padding:clamp(56px,8vw,104px) var(--pad)}
.art [id$="-content-section"] > div > div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(32px,5vw,88px);max-width:1080px;margin:0 auto}
.art [id$="-content-section"] aside > div{position:sticky;top:104px}
.art [id$="-content-section"] aside h3{margin-bottom:14px;font:500 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.art .toc-link{display:block;padding:7px 0;font-size:14px;line-height:1.35;color:var(--ink-3);transition:color .2s}
.art .toc-link:hover{color:var(--ink)}
.art .toc-link.active{color:var(--green);font-weight:500;transform:none}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child){max-width:68ch;font-size:18px;line-height:1.72;color:var(--ink-2)}
.art .prose > div:first-child:not([id]){margin-bottom:8px;padding-bottom:18px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.5}
.art .prose > div:first-child:not([id]) p{margin:0}
.art .prose > div:first-child:not([id]) a{color:var(--ink);font-weight:500}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) [id^="section-"],.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) [id^="sectie-"]{scroll-margin-top:100px}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) h2{margin:56px 0 18px;padding:0;border:0;font:400 clamp(28px,2.6vw,38px)/1.12 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) h3{margin:36px 0 12px;font:400 clamp(22px,1.9vw,27px)/1.2 var(--serif);color:var(--ink)}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) h4{margin:26px 0 8px;font:500 18px/1.3 var(--sans);color:var(--ink)}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) p{margin:0 0 20px}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) ul,.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) ol{margin:0 0 24px;padding-left:1.3em;list-style:disc}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) ol{list-style:decimal}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) li{margin:0 0 10px;padding-left:.2em}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) li::marker{color:var(--gold-ink)}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) strong{color:var(--ink);font-weight:600}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) a{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) a:hover{color:var(--ink)}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) blockquote{margin:36px 0;padding:0;font:300 clamp(22px,2vw,28px)/1.35 var(--serif);font-style:italic;color:var(--ink)}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) blockquote::before{content:"\201C";display:block;height:.5em;font-size:2.2em;line-height:1;color:var(--gold)}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) blockquote p{margin:0}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) img{width:100%;margin:28px 0;border-radius:8px}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) figure{margin:32px 0}
.art :is(.prose,[id$="-content-section"] > div > div > div:last-child) figcaption{margin-top:-14px;font-size:14px;color:var(--ink-3)}
.art svg:not([width]){width:1.2em;height:1.2em;flex:none}
.art .case-study-box{margin:32px 0;padding:24px 28px;border:0;border-radius:14px;background:var(--paper)}
.art .case-study-box > :last-child{margin-bottom:0}
.art .synergy-section .not-prose{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.art .synergy-card{background:#fff;border:1px solid var(--line);border-radius:14px}
.art .synergy-card h4 a,.art .archetype-row h4 a{color:var(--ink);text-decoration:none}
.art .synergy-card h4 a:hover,.art .archetype-row h4 a:hover{color:var(--green)}
.art .archetype-category{color:var(--gold-ink)}
.art #connect-section{padding:clamp(80px,10vw,130px) var(--pad);background:var(--deep);color:var(--cream);text-align:center}
.art #connect-headline{margin:0 auto;font:300 clamp(34px,4.4vw,64px)/1.04 var(--serif);letter-spacing:-.03em;max-width:18ch;text-wrap:balance}
.art #connect-cta{margin-top:34px}
.art #connect-cta a{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;background:var(--gold);color:var(--deep);font-weight:500}
@media (max-width:900px){
  .art [id$="-content-section"] > div > div{grid-template-columns:1fr}
  .art [id$="-content-section"] aside{display:none}
  .art :is(.prose,[id$="-content-section"] > div > div > div:last-child){font-size:17px}
  .art .synergy-section .not-prose{grid-template-columns:1fr}
}

/* the blog index */
.bl-lang{display:inline-flex;gap:4px;margin-top:32px;padding:4px;border-radius:999px;background:rgba(243,239,229,.08);font-size:14px}
.bl-lang a,.bl-lang span{padding:8px 16px;border-radius:999px}
.bl-lang a{color:rgba(243,239,229,.72)}
.bl-lang a:hover{color:var(--cream)}
.bl-lang span{background:var(--cream);color:var(--deep);font-weight:500}
.bl-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(20px,2.4vw,36px);margin:0;padding:0}
.bl-post:first-child{grid-column:span 2}
.bl-post a{display:block}
.bl-ph{position:relative;aspect-ratio:3/2;overflow:hidden;margin-bottom:20px;border-radius:8px;background:var(--deep)}
.bl-post:first-child .bl-ph{aspect-ratio:2.5/1}
.bl-post:first-child .bl-ph img{object-position:50% 68%}
.bl-ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.bl-post a:hover .bl-ph img{transform:scale(1.03)}
.bl-type .bl-ph{display:flex;align-items:flex-end;padding:clamp(20px,2.4vw,32px);background:linear-gradient(135deg,var(--forest),var(--deep))}
.bl-type .bl-ph span{font:300 clamp(28px,3vw,44px)/1 var(--serif);font-style:italic;color:var(--gold)}
.bl-meta{display:block;font:500 11.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.bl-post h2{margin:12px 0 10px;font:400 clamp(22px,1.8vw,27px)/1.18 var(--serif);letter-spacing:-.01em}
.bl-post:first-child h2{font-size:clamp(28px,2.8vw,40px)}
.bl-post p{margin-bottom:16px;font-size:15.5px;color:var(--ink-2)}
.bl-post a:hover h2{color:var(--green)}
.se-list{list-style:none;margin:clamp(32px,4vw,52px) 0 0;padding:0}
.se-list a{display:grid;grid-template-columns:56px minmax(0,220px) minmax(0,1fr);gap:18px;align-items:baseline;padding:18px 0;border-top:1px solid rgba(20,20,20,.12);transition:color .2s}
.se-list a:hover{color:var(--green)}
.se-n{font:500 12px/1 var(--sans);letter-spacing:.14em;color:var(--gold-ink)}
.se-list b{font:400 21px/1.2 var(--serif)}
.se-t{color:var(--ink-2)}
@media (max-width:1000px){
  .bl-grid{grid-template-columns:1fr 1fr}
  .bl-post:first-child{grid-column:span 2}
}
@media (max-width:640px){
  .bl-grid{grid-template-columns:1fr}
  .bl-post:first-child{grid-column:auto}
  .bl-post:first-child .bl-ph{aspect-ratio:3/2}
  .se-list a{grid-template-columns:44px 1fr}
  .se-t{grid-column:2}
}
.art #connect-section > div > p{max-width:48ch;margin:18px auto 0;color:rgba(243,239,229,.7)}
.art .pk-series{padding:clamp(64px,8vw,104px) var(--pad);background:var(--paper)}
.art .pk-series > div > div:first-child{margin-bottom:28px}
.art .pk-series > div > div:first-child > p{font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.art .pk-series h2{margin-top:14px;font:300 clamp(28px,3vw,44px)/1.05 var(--serif);letter-spacing:-.02em}
.art .pk-series > div > div:last-child{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:1080px}
.art .pk-series a{display:block;padding:16px 18px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s}
.art .pk-series a:hover{box-shadow:inset 0 0 0 1px var(--green)}
.art .pk-series a p:first-child{font:500 11.5px/1 var(--sans);letter-spacing:.14em;color:var(--gold-ink)}
.art .pk-series a p:last-child{margin-top:8px;font:400 19px/1.2 var(--serif)}
@media (max-width:900px){
  .art .pk-series > div > div:last-child{grid-template-columns:1fr 1fr}
}

/* ---- the nav (variant A, chosen 2026-09-30): a compact pill, as wide as what is in it; the gold ink follows
   the link you point at and rests on the page you are on; a reading line on articles ---- */
.nav .links{position:relative;margin:0 auto}
.nav .links ul{margin:0}
.nav{transition:transform .6s cubic-bezier(.22,.61,.36,1),color .6s,background .6s,box-shadow .6s}
.nav .wrap.row{transition:background .6s,box-shadow .6s}
.nav .ink{display:block;position:absolute;left:0;bottom:3px;width:0;height:1.5px;border-radius:2px;background:var(--gold);opacity:0;transition:transform .4s var(--ease),width .4s var(--ease),opacity .25s;pointer-events:none}
.nav ul a[aria-current]::after{display:none}
.nav .prog{display:block;position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform-origin:left;transform:scaleX(var(--read,0));pointer-events:none}

/* A: the compact pill, as wide as what is in it */
.nav .wrap.row{position:relative;overflow:hidden;width:max-content;max-width:calc(100% - 8px);height:52px;gap:4px;padding:0 6px 0 18px;background:rgba(250,248,243,.7);box-shadow:0 0 0 1px rgba(20,20,20,.06),0 10px 28px -18px rgba(20,20,20,.35)}
.nav.dark .wrap.row{background:rgba(27,42,41,.5);box-shadow:0 0 0 1px rgba(243,239,229,.09),0 10px 28px -18px rgba(0,0,0,.6)}
.nav .logo{margin-right:14px}
.nav .logo .k,.nav .logo .w{display:none}

.nav .links{margin:0}
.nav ul{gap:0;font-size:14px}
.nav ul a{padding:8px 13px;opacity:.72}
.nav ul a:hover,.nav ul a[aria-current]{opacity:1}
.nav .act{gap:2px;margin-left:10px}
.nav .act .in{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;opacity:.7}
.nav .act .in:hover{opacity:1;background:rgba(20,20,20,.05)}
.nav.dark .act .in:hover{background:rgba(243,239,229,.08)}
.nav .act .in span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nav .in-ico{display:block;width:19px;height:19px}
.nav .act .btn{height:40px;padding:0 18px;font-size:13.5px;background:var(--ink);color:#fff}
.nav.dark .act .btn{background:var(--cream);color:var(--deep)}
@media (max-width:900px){
  .nav .wrap.row{width:auto;padding:0 6px 0 16px}
  .nav .act{margin-left:auto}
  .nav .act .in{display:none}
}

/* both: the phone menu, large serif links arriving one by one, the button where the thumb is */
@media (max-width:900px){
  .sheet{display:flex;flex-direction:column}
  .sheet a:not(.btn):not(.in){font:300 clamp(36px,10vw,52px)/1.05 var(--serif);border:0;padding:10px 0;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s var(--ease)}
  .nav.open + .sheet a{opacity:1;transform:none}
  .sheet a:nth-child(2){transition-delay:.05s}
  .sheet a:nth-child(3){transition-delay:.1s}
  .sheet a:nth-child(4){transition-delay:.15s}
  .sheet .btn{margin-top:auto}
}

/* between pages: a short cross-fade, the nav holding still (cross-document view transitions; browsers
   without them just navigate). site.js skips it on the way to a page that does not take part. */
@view-transition{navigation:auto}
.nav{view-transition-name:site-nav}
/* between pages: the old page stays put underneath and the new one settles in over it, a fade and an 8px rise.
   Fading both out and in let the dark page background flash through halfway (2026-10-01). */
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:.42s cubic-bezier(.2,.7,.2,1) both vt-in}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* platform: the four layers as a list of line figures, not mock dashboard screens */
.layers{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,88px);margin:clamp(40px,5vw,64px) 0 clamp(64px,8vw,104px);padding:0}
.layers li{display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:28px;padding:30px 0 34px;border-top:1px solid rgba(255,255,255,.16)}

.layers h3{margin:10px 0 8px;font:400 clamp(24px,2.2vw,30px)/1.1 var(--serif);letter-spacing:-.01em}
.layers p{font-size:15.5px;color:rgba(255,255,255,.72)}
@media (max-width:900px){
  .layers{grid-template-columns:1fr}
}
@media (max-width:520px){
  .layers li{grid-template-columns:96px minmax(0,1fr);column-gap:18px}
  
}

/* fewer identical card rows: the trust points and the principles read as lists */

.pi-list{grid-template-columns:1fr;gap:0}
.pi-list li{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:24px clamp(32px,5vw,80px);padding:30px 0;border-top:1px solid rgba(20,20,20,.14)}
.pi-list h3{font-size:clamp(28px,2.8vw,40px);letter-spacing:-.02em}
.pi-list p{margin-top:6px;max-width:62ch;font-size:16.5px}
@media (max-width:900px){
  
  .pi-list li{grid-template-columns:1fr;gap:6px}
}

/* what we do: the scroll story. One line is one strength; the drawing stays on its card while the steps pass */
.st4{padding:var(--sect) var(--pad) calc(var(--sect) * .6);background:var(--paper)}
.st4-head{max-width:780px;margin:0 auto clamp(24px,4vw,48px);text-align:center}
.st4-head h2{margin:18px auto 0;max-width:17ch;font:300 clamp(38px,5.2vw,78px)/1.02 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.st4-head h2 em{font-style:italic;color:var(--gold-ink)}
.st4-head p{margin:22px auto 0;max-width:54ch;font-size:clamp(16px,1.3vw,18px);color:var(--ink-2);text-wrap:balance}
.st4-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,88px);max-width:1200px;margin:0 auto}
.st4-fig{position:sticky;top:max(92px,calc(50vh - 350px));align-self:start;margin:0;padding:clamp(20px,2.4vw,32px) clamp(20px,2.4vw,32px) 18px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(20,20,20,.06),0 24px 60px -36px rgba(27,42,41,.35)}
.st4-fig svg{display:block;width:100%;height:auto;overflow:visible}
.st4-fig figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;height:42px;overflow:hidden;white-space:nowrap;margin-top:14px;padding-top:12px;border-top:1px solid rgba(20,20,20,.08);font-size:12.5px;color:var(--ink-3)}
.st4-count{font-variant-numeric:tabular-nums;color:var(--gold-ink);transition:opacity .5s}
.st4:not([data-step="1"]) .st4-count{opacity:0}
.st4-steps{list-style:none;margin:0;padding:0}
.st4-steps li{display:flex;flex-direction:column;justify-content:center;min-height:64vh;opacity:.28;transition:opacity .5s}
.st4-steps li.on{opacity:1}
.st4-n{font:500 12px/1 var(--sans);letter-spacing:.14em;color:var(--gold-ink)}
.st4-steps h3{margin:14px 0 14px;font:300 clamp(32px,3.2vw,48px)/1.04 var(--serif);letter-spacing:-.02em}
.st4-steps p{max-width:40ch;font-size:clamp(16px,1.3vw,18px);color:var(--ink-2)}
.st4-steps .st4-usp{margin-top:16px;font:400 clamp(19px,1.6vw,23px)/1.3 var(--serif);font-style:italic;color:var(--green)}
/* the drawing: capsules. Every capsule is the same size; only its place means something. A person is a card */
.st4{--c-top:oklch(.48 .12 142);--c-reset:oklch(.72 .14 70);--c-bottom:oklch(.62 .12 25);--c-brake:oklch(.42 .04 250)}
.st4-card{fill:#FAF8F3;stroke:rgba(20,20,20,.07);stroke-width:1}
.st4-card.me{fill:#FCFBF8;stroke:oklch(.48 .12 142 / .3);filter:drop-shadow(0 8px 18px rgba(27,42,41,.07))}
.st4-who2,.st4-name{font:500 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;fill:var(--ink-3)}
.st4-you{transition:opacity .4s}
.st4-cap{filter:drop-shadow(0 1px 1.5px rgba(20,20,20,.18));transition:opacity .5s}
.st4-cap .col{transition:opacity .3s}
.st4-cap.dim{opacity:.18}
.st4-chip{opacity:0;transition:opacity .5s}
.st4-chip line{stroke-width:1.2;stroke-dasharray:2 3}
.st4-chip rect{stroke:none}
.st4-chip text{font:500 11.5px/1 var(--sans)}
.st4-chip.press line{stroke:var(--c-top)}.st4-chip.press rect{fill:oklch(.93 .04 142)}.st4-chip.press text{fill:oklch(.38 .1 142)}
.st4-chip.brake line{stroke:var(--c-brake)}.st4-chip.brake rect{fill:oklch(.93 .015 250)}.st4-chip.brake text{fill:var(--c-brake)}
.st4-chip.reset line{stroke:var(--c-reset)}.st4-chip.reset rect{fill:oklch(.94 .05 75)}.st4-chip.reset text{fill:oklch(.48 .12 65)}
.st4-s2 .st4-chip.press,.st4-s2 .st4-chip.brake,.st4-s3 .st4-chip{opacity:1}
.st4-br{fill:none;stroke-width:1.2;opacity:0;transition:opacity .5s}
.st4-br.top{stroke:var(--c-top)}.st4-br.bottom{stroke:var(--c-bottom)}
.st4-lab{font:500 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .5s}
.st4-lab.top{fill:var(--c-top)}.st4-lab.bottom{fill:var(--c-bottom)}
.st4-s1 .st4-you .st4-br,.st4-s1 .st4-you .st4-lab,.st4-team .st4-teamview .st4-lab{opacity:1}
/* the team */
.st4-teamview{opacity:0;pointer-events:none}
.st4-team .st4-teamview{pointer-events:auto}
.st4-band{stroke:none}
.st4-band.top{fill:oklch(.48 .12 142 / .06)}.st4-band.bottom{fill:oklch(.62 .12 25 / .07)}
.st4-tcap{fill:oklch(.88 .01 90);stroke:none;stroke-width:1.6;cursor:pointer;transition:fill .4s,opacity .3s}
.st4-tcap.tint{filter:drop-shadow(0 1px 1.5px rgba(20,20,20,.2))}
.st4-tcap.hit{filter:drop-shadow(0 0 6px oklch(.62 .14 142 / .65))}
.st4-ts{fill:none;stroke-width:2.2;stroke-linecap:round;opacity:.8}
.st4-ts.common{stroke-width:3}
.st4-ts.quiet{stroke-width:1.6;stroke-dasharray:4 5}
.st4-name{cursor:pointer;transition:fill .3s}
.st4-name:hover{fill:var(--ink)}.st4-name.on{fill:var(--c-top)}
.st4-namehit{fill:transparent;cursor:pointer}
.st4-s5 .st4-name,.st4-s5 .st4-namehit{cursor:default}
.st4-on{font:400 italic 14px/1 var(--serif);paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.st4-on.hit{fill:var(--c-top)}.st4-on.far{fill:oklch(.5 .12 25)}
.st4-teamview.spot .st4-tcap:not(.lit),.st4-teamview.spot .st4-ts:not(.lit){opacity:.16}
.st4-tcap.lit{stroke:var(--ink)!important}
.st4-ts.lit{stroke-width:3.4}
.st4-views{position:absolute;top:16px;right:18px;z-index:2;display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px rgba(20,20,20,.05);opacity:0;pointer-events:none;transition:opacity .4s}
.st4[data-step="4"] .st4-views,.st4[data-step="5"] .st4-views{opacity:1;pointer-events:auto}
.st4-views button{white-space:nowrap;height:28px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:500 12px/1 var(--sans);cursor:pointer}
.st4-views button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,20,20,.08)}
.st4-places{pointer-events:none}
.st4-hl{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-opacity:.75;transition:stroke-dashoffset .45s var(--ease)}
.st4-cta{align-self:flex-start;margin-top:26px}
.st4-rail{position:absolute;left:12px;top:50%;display:grid;gap:6px;transform:translateY(-50%)}
.st4-rail i{display:block;width:3px;height:38px;border-radius:3px;background:linear-gradient(to bottom,var(--c-top) calc(var(--f,0) * 100%),rgba(20,20,20,.1) 0)}
.st4.scrub .st4-ts{transition:none}
.st4.scrub .st4-ts.anim{transition:stroke-dashoffset 1.2s var(--ease)}
.st4:not(.scrub) .st4-teamview,.st4:not(.scrub) .st4-you,.st4:not(.scrub) .st4-cap{transition:opacity .6s,transform 1s var(--ease)}
.st4:not(.scrub) .st4-team .st4-teamview{opacity:1}
.st4:not(.scrub) .st4-team .st4-you{opacity:0}
.st4:not(.scrub) .st4-ts{transition:stroke-dashoffset 1.2s var(--ease)}
@media (max-width:900px){
  .st4-body{grid-template-columns:1fr;gap:0}
  .st4-fig{top:60px;z-index:1;padding:12px 14px 8px;border-radius:16px}
  .st4-fig svg{max-height:38vh;margin:0 auto}
  .st4-fig figcaption{display:none}
  .st4-fig{display:flex;flex-direction:column}
  .st4-views{position:static;order:3;align-self:center;margin-top:6px;display:none}
  .st4[data-step="4"] .st4-views,.st4[data-step="5"] .st4-views{display:inline-flex}
  .st4-steps li{min-height:62vh;justify-content:flex-end;padding-bottom:6vh}
  .st4-on{font-size:20px}.st4-lab,.st4-name,.st4-who2{font-size:15px}.st4-chip text{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.st4-cap,.st4-tcap,.st4-ts,.st4-teamview,.st4-you,.st4-chip{transition:none}}

/* a small line above the hero heading, so the name is on the page */
.hero-brand{margin:0 0 18px;font:500 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
/* our story as an arc: the question beside four labelled beats, the answer as the large line */
.st3-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px clamp(40px,6vw,104px);max-width:1200px;margin:0 auto;align-items:start}
.st3-head{position:sticky;top:110px}
.st3-head h2{margin-top:18px;font:300 clamp(36px,4.4vw,64px)/1.03 var(--serif);letter-spacing:-.03em;max-width:15ch;text-wrap:balance}
.st3-arc{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.st3-arc li{position:relative;padding:0 0 30px 30px}
.st3-arc li::before{content:"";position:absolute;left:-4px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.st3-arc li:last-child{padding-bottom:0}
.st3-k{display:block;margin-bottom:8px;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.st3-arc p{max-width:56ch;color:var(--ink-2);font-size:clamp(16px,1.25vw,18px)}
.st3-answer::before{background:var(--gold)!important;box-shadow:none!important}
.st3-answer p{font:300 italic clamp(30px,3.2vw,46px)/1.05 var(--serif);letter-spacing:-.02em;color:var(--green)}
@media (max-width:900px){.st3-grid{grid-template-columns:1fr}.st3-head{position:static}}
/* the hero keeps room for the logo band laid over its bottom, so the buttons never sit under it */
.home .hero .txt{padding-bottom:calc(clamp(24px,4vh,56px) + 112px)}
@media (max-width:900px){.home .hero .txt{padding-bottom:150px}}
/* the nav logo: the full logo again now the pill is taller, inline so it renders sharp on 1x screens; the
   wordmark takes the nav colour (ink on light, white on dark) */
.nav .logo{height:auto}
.nav .logo .logo-svg{display:block;height:40px;width:auto;color:var(--ink)}
.nav.dark .logo .logo-svg,.nav.open .logo .logo-svg{color:#fff}
/* a taller pill, so the mark can be larger (2026-10-01) */
.nav .wrap.row{height:64px;padding-left:20px}
@media (max-width:900px){.nav .wrap.row{height:58px;padding-left:16px}.nav .logo .logo-svg{height:34px}}

/* hero, 2026-10-01: the headline in three lines, sized to the viewport height too, so the hero is one screen */
.home .hero h1{font-size:clamp(40px,min(5.3vw,8.4vh),80px);max-width:none}
.home .hero h1 em{display:block}
.home .hero .txt{padding-top:clamp(16px,3.5vh,64px);padding-bottom:calc(clamp(12px,2.5vh,36px) + 112px)}
.home .hero .sub{margin-top:clamp(16px,2.6vh,26px);text-wrap:pretty}
.home .hero .cta{margin-top:clamp(20px,3.4vh,34px)}
.hero-brand{margin-bottom:clamp(12px,2vh,18px)}
@media (max-width:900px){.home .hero .txt{padding-bottom:120px}}

/* platform: the PeakPersonality Lab, four lines beside a small fan of three app screens */
.lab-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,88px);align-items:center;margin-top:clamp(40px,5vw,64px)}
.lab2{background:var(--paper)}
.lab2 .sec-h p{text-wrap:pretty}

.lab-phones{display:flex;justify-content:center;align-items:center;padding:24px 0}
.lab-phones figure{position:relative;margin:0 -3%;width:34%;border-radius:clamp(16px,2vw,28px);overflow:hidden;background:#efe9dc;box-shadow:0 0 0 1px rgba(20,20,20,.07),0 34px 60px -34px rgba(20,20,20,.45)}
.lab-phones figure:nth-child(1){transform:translateY(22px) rotate(-3deg)}
.lab-phones figure:nth-child(2){z-index:1;transform:translateY(-14px)}
.lab-phones figure:nth-child(3){transform:translateY(22px) rotate(3deg)}
.lab-phones img{display:block;width:100%;height:auto}
@media (max-width:900px){.lab-grid{grid-template-columns:1fr}.lab-phones{padding:8px 0 28px}}

/* business: the client loop as its own band under the hero (home's structure, not pinned to a hero), and the
   three steps of working with a team */
.hero-logos.biz-band{position:relative;left:auto;right:auto;bottom:auto}
.hero-logos.biz-band p{text-align:left}

/* home: what we do, distilled (the full scroll story lives on the platform page) */
.st4l{background:var(--paper);--c-top:oklch(.48 .12 142);--c-reset:oklch(.72 .14 70);--c-bottom:oklch(.62 .12 25);--c-brake:oklch(.42 .04 250)}
.st4l-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin:clamp(40px,5vw,64px) 0 0;padding:0}
.st4l-list figure{margin:0 0 22px;padding:18px 12px;border-radius:20px;background:var(--white);box-shadow:0 0 0 1px var(--line),0 24px 48px -36px rgba(20,20,20,.35)}
.st4l-list svg{display:block;width:100%;max-width:300px;height:auto;margin:0 auto}
.st4l-list svg .t{font:500 9.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;fill:var(--c-top)}
.st4l-list svg .t.b{fill:var(--c-bottom)}
.st4l-list svg .t.i{font:italic 400 12px/1 var(--serif);letter-spacing:0;text-transform:none}
.st4l-list svg .l{stroke-width:1;stroke-dasharray:2 3}
.st4l-list svg .ct{font:500 8.6px/1 var(--sans)}
.st4l-list svg .l.p{stroke:var(--c-top)}.st4l-list svg .c.p{fill:oklch(.93 .04 142)}.st4l-list svg .ct.p{fill:oklch(.38 .1 142)}
.st4l-list svg .l.k{stroke:var(--c-brake)}.st4l-list svg .c.k{fill:oklch(.93 .015 250)}.st4l-list svg .ct.k{fill:var(--c-brake)}
.st4l-list svg .l.r{stroke:var(--c-reset)}.st4l-list svg .c.r{fill:oklch(.94 .05 75)}.st4l-list svg .ct.r{fill:oklch(.48 .12 65)}
.st4l-list h3{font:400 24px/1.15 var(--serif);letter-spacing:-.015em}
.st4l-list p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:36ch}
.st4l-more{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin-top:clamp(28px,4vw,44px)}
.st4l-more span{font-size:12.5px;color:var(--ink-3)}
@media (max-width:900px){.st4l-list{grid-template-columns:1fr}.st4l-list figure{max-width:420px}}

/* platform, 2026-10-01: why in house, the five jobs, Pete as what comes next, the Lab as an add-on */
.why2{padding-bottom:clamp(24px,4vw,48px)}
.jobs-list{list-style:none;margin:clamp(36px,5vw,56px) 0 0;padding:0}
.jobs-list li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.8fr);gap:12px clamp(24px,4vw,56px);align-items:baseline;padding:22px 0;border-top:1px solid var(--line)}
.jobs-list li:last-child{border-bottom:1px solid var(--line)}
.jobs-list h3{font:400 24px/1.15 var(--serif);letter-spacing:-.015em}
.jobs-list p{font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:52ch}
.jobs-list small{font:italic 400 16px/1.35 var(--serif);color:var(--gold-ink)}

.lab2 .lab-text h2{margin-top:14px;font:300 clamp(30px,3vw,44px)/1.06 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.lab2 .lab-text h2 em{font-style:italic;color:var(--gold-ink)}
.lab2 .lab-text p{margin-top:18px;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:42ch}
.lab-tag{display:inline-block;padding:5px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font:500 12px/1 var(--sans);color:var(--ink-3)}
.lab2 .lab-grid{margin-top:0}
.lab2 .lab-phones figure{width:28%}
@media (max-width:900px){.jobs-list li{grid-template-columns:1fr;gap:6px}}

/* dashboard page, the five jobs: the heading stays on the left while the rows pass on the right; each row has a small
   drawing in the scroll story's capsule language (invented orders) */
.jobs2{--c-top:oklch(.48 .12 142);--c-reset:oklch(.72 .14 70);--c-bottom:oklch(.62 .12 25)}
.jobs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(32px,5vw,88px);align-items:start}
.jobs-head{position:sticky;top:110px}
.jobs-head h2{font:300 clamp(36px,4.2vw,62px)/1.03 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.jobs-head h2 em{font-style:italic;color:var(--gold-ink)}
.jobs2 .jobs-list{margin:0}
.jobs2 .jobs-list li{grid-template-columns:minmax(0,1fr) 176px;align-items:center;gap:clamp(20px,3vw,40px);padding:26px 0}
.jobs2 .jobs-list li > div{display:grid;gap:8px}
.job-fig{display:block;width:176px;height:auto}
.job-fig .l{fill:none;stroke-width:.9;stroke-dasharray:2 2}.job-fig .l.p{stroke:var(--c-top)}.job-fig .l.r{stroke:var(--c-reset)}
.job-fig .c.p{fill:oklch(.93 .04 142)}.job-fig .c.r{fill:oklch(.94 .05 75)}
.job-fig .ct{font:500 7.4px/1 var(--sans)}.job-fig .ct.p{fill:oklch(.38 .1 142)}.job-fig .ct.r{fill:oklch(.48 .12 65)}
@media (max-width:900px){.jobs-grid{grid-template-columns:1fr}.jobs-head{position:static}.jobs2 .jobs-list li{grid-template-columns:minmax(0,1fr) 110px}.job-fig{width:110px}}

/* the logo on its own on the left, no chip, the links pill in the centre; neither moves or changes when you scroll.
   The mark sits on the content's left edge (var(--pad), the axis the headings start on). */
.nav > .logo{position:absolute;left:var(--pad);top:calc(10px + env(safe-area-inset-top,0px));z-index:2;margin:0;display:flex;align-items:center;height:64px}
.nav .wrap.row{padding-left:10px}
@media (max-width:1100px){.nav > .logo .logo-svg{height:34px}}
@media (max-width:900px){
  .nav > .logo{top:calc(8px + env(safe-area-inset-top,0px));height:58px}
  .nav .wrap.row{width:max-content;margin-left:auto;margin-right:0;padding:0 6px}
}

/* phone sweep (2026-10-01): founders as rows, a headline that wraps, tap areas of at least 44px */
@media (max-width:640px){
  .faces{grid-template-columns:1fr;gap:14px}
  .faces figure{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center}
  .faces figcaption{margin-top:0;font-size:19px}
  .faces figcaption small{margin-top:6px}
  .platform .phero h1{font-size:clamp(40px,11.5vw,56px)}
  .arrow{min-height:44px}
  .cx-mail a,.media a.arrow{display:inline-flex;align-items:center;min-height:44px}
}

/* the story on phones: three stacked steps with still drawings instead of the sticky scroll */
.st4-mob{display:none}
@media (max-width:900px){
  .st4 .st4-body{display:none}
  .st4-mob{display:grid;gap:clamp(36px,8vw,56px);list-style:none;margin:32px 0 0;padding:0}
  .st4-mob figure{margin:0 0 18px;padding:16px 10px;border-radius:20px;background:var(--white);box-shadow:0 0 0 1px var(--line),0 24px 48px -36px rgba(20,20,20,.35)}
  .st4-mob svg{display:block;width:100%;max-width:320px;height:auto;margin:0 auto}
  .st4-mob h3{font:400 26px/1.15 var(--serif);letter-spacing:-.015em}
  .st4-mob p{margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
  .st4-mob .st4-usp{font:italic 400 18px/1.35 var(--serif);color:var(--gold-ink)}
  .st4-mob svg .t{font:500 9.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;fill:var(--c-top)}
  .st4-mob svg .t.b{fill:var(--c-bottom)}
  .st4-mob svg .t.i{font:italic 400 12px/1 var(--serif);letter-spacing:0;text-transform:none}
  .st4-mob svg .l{stroke-width:1;stroke-dasharray:2 3}
  .st4-mob svg .ct{font:500 8.6px/1 var(--sans)}
  .st4-mob svg .l.p{stroke:var(--c-top)}.st4-mob svg .c.p{fill:oklch(.93 .04 142)}.st4-mob svg .ct.p{fill:oklch(.38 .1 142)}
  .st4-mob svg .l.k{stroke:var(--c-brake)}.st4-mob svg .c.k{fill:oklch(.93 .015 250)}.st4-mob svg .ct.k{fill:var(--c-brake)}
  .st4-mob svg .l.r{stroke:var(--c-reset)}.st4-mob svg .c.r{fill:oklch(.94 .05 75)}.st4-mob svg .ct.r{fill:oklch(.48 .12 65)}
}

/* the quiet close, and bios that open on request */
.endline{padding:clamp(56px,8vw,96px) var(--pad);border-top:1px solid var(--line);text-align:center}
.endline p{margin:0 auto;font:400 clamp(22px,2.4vw,30px)/1.3 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.endline .arrow{margin-left:14px;font:500 16px/1 var(--sans);vertical-align:middle}
@media (max-width:640px){.endline .arrow{display:flex;justify-content:center;margin:14px auto 0;width:max-content}}
.bio-more summary{display:inline-flex;align-items:center;min-height:44px;gap:8px;font-weight:500;cursor:pointer;list-style:none;border-bottom:1px solid currentColor}
.bio-more summary::-webkit-details-marker{display:none}
.bio-more summary::after{content:"+";font-weight:400}
.bio-more[open] summary{display:none}
.bio-more[open]{animation:bio-in .4s ease-out}
@keyframes bio-in{from{opacity:0;transform:translateY(-4px)}}

/* typography: no lone last word in a paragraph, and slightly tighter large headings on phones */
main p,main li{text-wrap:pretty}
@media (max-width:640px){.sec-h h2,.mg-head h2,.st4-head h2,.jobs-head h2{line-height:.98}.phero h1{line-height:.94}}

@media (max-width:900px){.nav > .logo{left:max(var(--pad),18px)}}

/* the menu sheet: the small links under Log in */

/* phone sweep 2: smaller story drawings, a compact set-up list, the story heading on the left */
@media (max-width:900px){
  .st4-mob figure,.st4l-list figure{padding:12px 8px}
  .st4-mob svg,.st4l-list svg{max-width:250px}
  .st4-head{text-align:left;margin-left:0}
  .st4-head h2{margin-left:0}
  .start-steps{grid-template-columns:1fr;gap:0;counter-reset:st}
  .start-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;padding:18px 0;border-radius:0;background:none;box-shadow:none;border-top:1px solid var(--line)}
  .start-steps li:last-child{border-bottom:1px solid var(--line)}
  .start-steps li::before{grid-row:span 3;margin:0}
  .start-steps b,.start-steps small,.start-steps p{grid-column:2}
  .start-steps p{margin-top:6px}
}

/* the business hero gets the same moving lines as home (desktop; on phones the text needs the whole width) */
.phero .weave path:not(.shared){stroke-opacity:var(--o,.12);stroke-width:.8}
.phero .weave path.warm{stroke:var(--gold);stroke-opacity:.5}
.phero .weave .wv-dot{fill:#f1d9a8;opacity:0;pointer-events:none}
.phero .weave .wv-halo{fill:var(--gold);opacity:0;filter:blur(4px);pointer-events:none}
@media (max-width:900px){.business .phero .weave{display:none}}

/* one type scale (Carla, 2026-10-01): every section heading on the same size, every page headline in the same
   light weight. Subheads (the Lab add-on, the form, cards) keep their smaller sizes. */
.sec-h h2,.mg-head h2,.mom-h h2,.st4-head h2,.st3-head h2,.fstrip h2,.jobs-head h2,.bios h2,.pillars h2,.cta2 h2{font-size:clamp(36px,4.6vw,68px);font-weight:300}
.hero h1{font-weight:300}
.home .hero h1{font-size:clamp(44px,min(5.6vw,8.8vh),84px)}

/* the home hero on phones: the lines fill the whole hero (faint behind the text, fuller below), a one-line label,
   a larger headline (2026-10-01) */
@media (max-width:900px){
  .home .hero .weave path:not(.shared){stroke-opacity:calc(var(--o,.12) * 1.9);stroke-width:1}
  .home .hero .weave{top:0;bottom:0;height:100%;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.28) 42%,#000 78%,#000 92%,transparent);mask-image:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.28) 42%,#000 78%,#000 92%,transparent)}
}
@media (max-width:640px){
  .hero-brand .hb-tail{display:none}
  .home .hero h1{font-size:clamp(46px,13.4vw,54px)}
}

/* founders on phones: the link to About comes after the photos */
@media (max-width:900px){
  .fstrip > div:first-child{display:contents}
  .fstrip h2{order:1}
  .fstrip .faces{order:2}
  .fstrip .arrow{order:3;justify-self:start;margin-top:-8px}
  .fstrip{row-gap:28px}
}

/* consistency (2026-10-01): every page opens on one full screen, like home. The content sits centred in it; on
   business the hero and its logo strip together fill the screen. One headline size and measure (about included). */
.phero{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:100vh;min-height:100svh;padding-top:clamp(110px,14vh,150px);padding-bottom:clamp(56px,8vh,96px)}
.business .phero{min-height:calc(100vh - var(--band,124px));min-height:calc(100svh - var(--band,124px))}
.phero h1,.about .phero h1,.platform .phero h1{font-size:clamp(46px,6vw,88px);max-width:15ch}
@media (max-width:900px){.phero{padding-top:120px;padding-bottom:48px}}
@media (max-width:640px){.phero h1,.about .phero h1,.platform .phero h1{font-size:clamp(40px,11vw,48px)}}
/* the dashboard story heading starts on the left edge like every other section heading */
.st4-head{text-align:left;margin-left:0;max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px clamp(32px,5vw,80px);align-items:end}
.st4-head h2{margin-left:0;max-width:16ch}
.st4-head p{margin:0;max-width:46ch;color:var(--ink-2)}
@media (max-width:900px){.st4-head{grid-template-columns:1fr}}
/* the dashboard, About and Connect heroes stay shorter (Tex, 2026-10-01): the page gets to its content (or the form) sooner */
.platform .phero,.about .phero,.connect .phero,.notfound .phero{min-height:clamp(560px,70vh,720px);justify-content:flex-start;padding-top:clamp(120px,15vh,170px)}
@media (max-width:900px){.platform .phero,.about .phero,.connect .phero,.notfound .phero{min-height:clamp(440px,62vh,560px);padding-top:140px}}

/* media: the AZ film as the featured item */
.film{padding-bottom:0}
.film-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.film-video{border-radius:10px;overflow:hidden;background:var(--deep);box-shadow:0 30px 60px -36px rgba(20,20,20,.5)}
.film-video video{display:block;width:100%;height:auto;aspect-ratio:848/480}
.film-txt h2{margin:12px 0 14px;font:300 clamp(30px,3.2vw,46px)/1.06 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.film-txt h2 em{font-style:italic;color:var(--gold-ink)}
.film-txt p{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:40ch}
@media (max-width:900px){.film-grid{grid-template-columns:1fr}}

/* finishing touches (2026-10-01): buttons lift a pixel, arrow links nudge, the contact form says thank you */
.btn{transition:background .25s,color .25s,transform .25s var(--ease),box-shadow .25s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -12px rgba(20,20,20,.45)}
.btn:active{transform:none;box-shadow:none}
.arrow::after{content:"\2192";display:inline-block;margin-left:2px;transition:transform .25s var(--ease)}
.arrow:hover::after{transform:translateX(3px)}
.cx-done{padding:28px 0 8px;animation:cx-in .5s var(--ease) both}
.cx-done h3{font:300 clamp(32px,3.4vw,48px)/1.05 var(--serif);letter-spacing:-.025em}
.cx-done p{margin:12px 0 22px;font-size:17px;color:var(--ink-2);max-width:40ch}
.cx-form:has(.cx-done) > h2,.cx-form:has(.cx-done) form{display:none}
@keyframes cx-in{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.btn,.arrow::after{transition:none}.btn:hover{transform:none}.cx-done{animation:none}}

/* the cookie banner in the site's own style (the shared cookieconsent partial; the old site keeps its look):
   a compact dark glass card bottom-left on desktop, a rounded sheet on phones; Decline outlined, Accept gold */
body .cc-window.cc-window{position:fixed;left:clamp(12px,2vw,24px);right:auto;bottom:clamp(12px,2vw,24px);top:auto;z-index:60;
  display:flex;flex-direction:column;align-items:stretch;gap:14px;width:auto;max-width:400px;padding:20px 20px 18px;border-radius:18px;
  background:rgba(27,42,41,.92)!important;color:var(--cream)!important;-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);
  box-shadow:0 0 0 1px rgba(243,239,229,.1),0 24px 48px -24px rgba(0,0,0,.6);font:400 14px/1.5 var(--sans);animation:cc-in .5s var(--ease) both}
body .cc-window .cc-message{margin:0;max-width:none;font-size:14px;line-height:1.55;color:rgba(243,239,229,.82)}
body .cc-window .cc-link{display:inline;padding:0;opacity:1;color:var(--cream)!important;text-decoration:underline;text-underline-offset:3px}
body .cc-window .cc-link:hover{color:var(--gold)!important}
body .cc-window .cc-compliance{display:flex;gap:8px;justify-content:flex-start}
body .cc-window .cc-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:0;height:40px;padding:0 18px;border-radius:999px;
  font:500 14px/1 var(--sans)!important;border:0;transition:background .25s,color .25s}
body .cc-window .cc-btn.cc-deny{background:transparent!important;color:var(--cream)!important;box-shadow:inset 0 0 0 1px rgba(243,239,229,.32)}
body .cc-window .cc-btn.cc-deny:hover{box-shadow:inset 0 0 0 1px var(--cream);text-decoration:none}
body .cc-window .cc-btn.cc-allow{background:var(--gold)!important;color:var(--deep)!important}
body .cc-window .cc-btn.cc-allow:hover{background:#E6C38F!important}
body .cc-revoke.cc-revoke{left:clamp(12px,2vw,24px);right:auto;bottom:0;padding:8px 14px;border-radius:12px 12px 0 0;background:rgba(27,42,41,.92)!important;color:rgba(243,239,229,.8)!important;font:500 12.5px/1 var(--sans)}
@keyframes cc-in{from{opacity:0;transform:translateY(12px)}}
@media (max-width:640px){body .cc-window.cc-window{left:10px;right:10px;bottom:10px;max-width:none;padding:18px 18px 16px}body .cc-window .cc-compliance{justify-content:stretch}body .cc-window .cc-btn{flex:1}}
@media (prefers-reduced-motion:reduce){body .cc-window.cc-window{animation:none}}
body .cc-window.cc-invisible{pointer-events:none;visibility:hidden;transition:opacity .4s,visibility 0s .4s}

/* selected text: a soft gold wash instead of the browser's blue; stronger with white text on the dark sections */
::selection{background:rgba(221,180,122,.38);color:var(--ink)}
.dark ::selection,.hero ::selection,.phero ::selection,.foot ::selection,.cc-window ::selection{background:rgba(221,180,122,.42);color:#fff}
img::selection,svg::selection{background:transparent}

/* the phone menu, tidied (2026-10-12): the burger centred in a true circle that lines up with the logo, no ring
   left round the X when the menu is open, and a gold dot on the page you are on. The button and Log in stay
   at the bottom, where the thumb is; the small print under them went on Tex's word */
@media (max-width:900px){
  .nav .links{display:none}
  .nav .wrap.row{width:50px;height:50px;margin-top:4px;padding:0;gap:0;justify-content:center}
  .nav .act{margin:0;gap:0}
  .nav .menu{margin:0;width:50px;height:50px}
  .nav.nav.open .wrap.row{background:transparent;box-shadow:none}
  .sheet a[aria-current]{display:flex;align-items:center;gap:14px}
  .sheet a[aria-current]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
}

/* the quotes above "Do any of these sound familiar?" on home: no photos. One large gold quote mark, the words, and
   under them the organisation's mark from the logo strip beside the name and role. Side by side, one under the
   other on phones. */
.pq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(56px,7vw,112px);max-width:1120px;margin:0 auto}
.pq.sec.paper{background:var(--paper)}
.pq figure{margin:0;display:flex;flex-direction:column}
.pq-mark{display:block;height:.36em;margin:0 0 4px -.04em;font:300 clamp(96px,9vw,132px)/1 var(--serif);color:var(--gold)}
.pq blockquote{margin:0;flex:1}
.pq blockquote p{margin:0;font:300 clamp(24px,2.4vw,34px)/1.25 var(--serif);letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
.pq figcaption{display:flex;align-items:center;gap:20px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(20,20,20,.1)}
.pq figcaption img{display:block;width:auto;flex:none}
.pq-who{display:flex;flex-direction:column;gap:4px;padding-left:20px;border-left:1px solid rgba(20,20,20,.12);font:400 15px/1.3 var(--sans);color:var(--ink-2)}
.pq-who b{font:500 17px/1.2 var(--sans);color:var(--ink)}

/* the legal pages (landing_page/_legal_body.html): the text imported word for word from the Word files,
   the PDF link in the header, Word's own list numbering, and a contents column that scrolls on its own */
.art #legal-hero-paragraph{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.art #legal-hero-paragraph .lg-sep{opacity:.5}
.art #legal-hero-paragraph .lg-pdf{color:var(--gold);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.art #legal-content-section aside > div{max-height:calc(100vh - 140px);overflow:auto;padding-right:6px}
.art .lg-body h2{scroll-margin-top:100px;margin:48px 0 14px;font-size:clamp(24px,2.1vw,30px)}
.art .lg-body > h2:first-child{margin-top:0}
.art .lg-body ol.legal-list{list-style:none;padding-left:0}
.art .lg-body ol.legal-list li{display:grid;grid-template-columns:2.2em minmax(0,1fr);padding-left:0}
.art .lg-body .legal-marker{color:var(--ink-3)}