/* Poppins, self-hosted (no requests to Google) */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/poppins-latin-ext-300-normal.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:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/poppins-latin-300-normal.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:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-latin-ext-400-normal.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:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-latin-400-normal.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:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-latin-ext-500-normal.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:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-latin-500-normal.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:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-latin-ext-600-normal.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:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-latin-600-normal.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:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-latin-ext-700-normal.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:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-latin-700-normal.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}
:root{--orange:#FE5900;--teal:#005266;--teal-light:#97CECC;--grey:#E4E2E0;--slate:#414A4F;--black:#000;--white:#fff;
--ink:#1d2426;--muted:#6f777b;--line:#dcdad7;--paper:#F4F3F1;--night:#07181d;--night2:#0b2a32;--max:1280px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:"Draft C","Poppins","Century Gothic","Futura",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
h1,h2,h3{margin:0;color:var(--black);letter-spacing:-.02em}
.display{font-weight:300;line-height:1.02}
h2.display{font-size:clamp(36px,4.4vw,64px);max-width:16em;margin-bottom:22px}
h3{font-size:20px;font-weight:600;line-height:1.3}
p{margin:0 0 16px}
.eyebrow{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);font-weight:700;margin:0 0 18px}
.lede{font-size:20px;line-height:1.55;color:var(--slate);max-width:34em}
.muted{color:var(--muted)}
.arrow{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--black)}
.arrow:after{content:"\2192";font-size:17px;line-height:1;font-weight:400;color:var(--orange);transform:translateY(-1px);transition:transform .2s ease} /* a small arrow, not a flat line (18 Sept 2026) */
.arrow:hover:after{transform:translate(5px,-1px)}
.btn{display:inline-block;background:var(--orange);color:var(--white);text-decoration:none;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:16px 28px;border:1px solid var(--orange);transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--black);border-color:var(--black)}
.btn.ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)}
.btn.ghost:hover{background:var(--white);color:var(--black);border-color:var(--white)}
mark.todo{background:#FFE58A;color:#5a4300;font-size:.8em;font-weight:700;padding:1px 6px;border-radius:2px}
section{padding:128px 0}
section.paper{background:var(--paper)}
section.teal{background:var(--teal);color:#DCEBEB}
section.teal h2,section.teal h3{color:var(--white)}
section.teal .eyebrow{color:var(--teal-light)}
section.night{background:var(--night);color:#c9d6d8}
section.night h2,section.night h3{color:var(--white)}
section.night .eyebrow{color:var(--teal-light)}
section.night .arrow{color:var(--white)}
section[id]{scroll-margin-top:80px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:56px}
.head .arrow{flex:none;margin-bottom:10px}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* header */
header.top{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .25s,border-color .25s;border-bottom:1px solid transparent}
header.top .in{max-width:var(--max);margin:0 auto;padding:0 40px;display:flex;align-items:center;height:76px;gap:24px}
.wordmark{font-size:21px;text-decoration:none;white-space:nowrap;letter-spacing:-.01em;color:var(--white)}
.wordmark b{color:var(--orange)}.wordmark span{font-weight:700}
header nav{margin-left:auto;display:flex;gap:4px;align-items:center}
header nav a{text-decoration:none;color:rgba(255,255,255,.85);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;white-space:nowrap;border-bottom:2px solid transparent}
header nav a:hover{color:var(--white);border-bottom-color:var(--orange)}
header nav a.cta{background:var(--orange);color:var(--white);padding:12px 18px;margin-left:10px;border:0}
header nav a.cta:hover{background:var(--white);color:var(--black)}
header.top.scrolled{background:rgba(7,24,29,.96);border-bottom-color:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}  /* over the hero while scrolling: dark bar, no overlap with the banner text */
header.top.solid{background:rgba(255,255,255,.96);border-bottom-color:var(--line)}
header.top.solid .wordmark{color:var(--black)}
header.top.solid nav a{color:var(--slate)}
header.top.solid nav a:hover{color:var(--black)}
header.top.solid nav a.cta{color:var(--white)}
header.top.solid nav a.cta:hover{background:var(--black)}
header nav a:focus-visible,.btn:focus-visible,.arrow:focus-visible,.menu:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
/* mobile menu: the button shows under 760px; the nav becomes a full-width panel under the header bar */
header .menu{display:none;margin-left:auto;width:44px;height:44px;padding:10px;border:0;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;gap:5px}
header .menu span{display:block;height:2px;background:var(--white);transition:transform .2s,opacity .2s}
header.top.solid .menu span,header.top.open .menu span{background:var(--black)}
header.top.open .menu span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.top.open .menu span:nth-child(2){opacity:0}
header.top.open .menu span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:760px){
 header .menu{display:flex}
 header nav{display:none;position:fixed;top:76px;left:0;right:0;bottom:0;flex-direction:column;align-items:stretch;gap:0;padding:12px 22px 30px;background:var(--white);border-top:1px solid var(--line);overflow:auto}
 header.top.open{background:var(--white);border-bottom-color:var(--line)}
 header.top.open .wordmark{color:var(--black)}
 header.top.open nav{display:flex}
 header nav a,header.top.solid nav a{color:var(--black);font-size:15px;padding:16px 0;border-bottom:1px solid var(--line);white-space:normal}
 header nav a:hover{border-bottom-color:var(--line)}
 header nav a.cta,header.top.solid nav a.cta{margin:18px 0 0;padding:16px;text-align:center;border:0;color:var(--white)}
}

header .lang{position:relative;margin-left:8px;flex:none}
header .lang summary{list-style:none;cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.85);padding:8px 10px;border:1px solid rgba(255,255,255,.28);border-radius:999px;display:inline-flex;align-items:center;gap:6px}
header .lang summary::-webkit-details-marker{display:none}
header .lang summary:after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
header.top.solid .lang summary{color:var(--black);border-color:var(--line)}
header .lang ul{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:8px 0;list-style:none;background:var(--white);border:1px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.14);min-width:170px;z-index:60}
header .lang li{margin:0}
header .lang li a,header .lang li span{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 16px;font-size:14px;color:var(--black);text-decoration:none;white-space:nowrap}
header .lang li a:hover{background:var(--paper)}
header .lang li .cur{font-weight:600}
header .lang li .cur:after{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
header .lang li .soon{color:var(--muted)}
header .lang li .soon small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);padding:2px 6px;border-radius:999px}
@media (max-width:760px){header .lang{margin-left:auto;order:4}header .lang summary{padding:7px 9px}header .menu{margin-left:0;order:5}header.top .in{gap:12px}}
/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;background:var(--night);color:var(--white);overflow:hidden;padding:140px 0 120px}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,24,29,.92) 0%,rgba(7,24,29,.55) 45%,rgba(7,24,29,.05) 100%);pointer-events:none}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{color:var(--white);font-size:clamp(46px,7vw,104px);max-width:9.5em;margin-bottom:28px}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .eyebrow{color:var(--teal-light);font-size:16px;letter-spacing:.16em;margin-bottom:24px}
.hero .lede{color:#cfdcdf;font-size:21px;margin-bottom:40px;max-width:30em}
.hero .cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero .foot{position:absolute;left:0;right:0;bottom:0;z-index:2;border-top:1px solid rgba(255,255,255,.14)}
.hero .foot .wrap{display:flex;justify-content:space-between;gap:30px;padding-top:20px;padding-bottom:20px;font-size:16px;color:#9fb3b7;letter-spacing:.03em}
.hero .foot b{color:var(--white);font-weight:600}

/* numbers */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
.num{display:block;text-decoration:none;color:var(--ink);border-top:1px solid var(--slate);padding:30px 0 44px;transition:border-color .2s}
.num:hover{border-top-color:var(--orange)}
.num .v{font-size:clamp(72px,8vw,124px);line-height:.95;font-weight:300;color:var(--orange);letter-spacing:-.04em;margin:0 0 18px;white-space:nowrap}
.num .v small{font-size:.42em;letter-spacing:-.02em;margin-left:.15em}
.num .k{font-size:17px;color:var(--ink);margin:0 0 6px;line-height:1.4;max-width:18em}
.num .s{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* impact tiles */
.intro{font-size:17px;line-height:1.6;color:var(--slate);max-width:44em;margin:0}
.rail{position:relative}
.tiles{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 40px 28px;margin:0 -40px;scrollbar-width:none}
.tiles::-webkit-scrollbar{display:none}
.tile{flex:0 0 400px;scroll-snap-align:start;background:var(--night);color:var(--white);text-decoration:none;display:flex;flex-direction:column;min-height:520px;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.tile:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(0,0,0,.18)}
.tile .art{height:290px;position:relative;overflow:hidden}
.tile .art svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .6s ease}
.tile:hover .art svg{transform:scale(1.05)}
.tile .body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.tile .sec{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-light);font-weight:700;margin:0 0 12px}
.tile h3{color:var(--white);font-size:22px;font-weight:500;line-height:1.28;margin:0 0 20px}
.tile .more{margin-top:auto;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--white)}
.tile .more:after{content:" →";color:var(--orange)}
.tile.all{background:var(--white);border:1px solid var(--line);color:var(--black);justify-content:center;align-items:flex-start;padding:40px}
.tile.all h3{color:var(--black);font-size:30px;font-weight:300}
.tile.all .more{margin-top:24px;color:var(--black)}
.rail .rnav{position:absolute;top:calc(50% - 14px);transform:translateY(-50%);z-index:3;width:52px;height:52px;border-radius:50%;border:1px solid var(--slate);background:var(--white);cursor:pointer;font-size:20px;color:var(--black);box-shadow:0 8px 24px rgba(0,0,0,.14);transition:background .15s,color .15s}
.rail .rnav.prev{left:-26px}.rail .rnav.next{right:-26px}
.rail .rnav:hover{background:var(--black);color:var(--white)}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:56px;padding-top:56px;border-top:1px solid var(--line)}
.quote{font-size:24px;font-weight:300;line-height:1.4;color:var(--black)}
.quote:before{content:"“";color:var(--orange);font-size:48px;line-height:0;vertical-align:-.35em;margin-right:6px;font-weight:300}
.quote .who{display:block;font-size:13px;color:var(--muted);margin-top:14px;font-weight:400}

/* point of view, slim strip */
.povstrip{display:grid;grid-template-columns:150px 1fr auto;gap:36px;align-items:center;margin-top:56px;padding:34px 0 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.povstrip img{width:150px;aspect-ratio:1;object-fit:cover;display:block;border:1px solid var(--line)}
.povstrip .eyebrow{margin-bottom:8px}
.povstrip h3{font-size:22px;font-weight:500;line-height:1.25;margin-bottom:8px;transition:color .15s}
.povstrip:hover h3{color:var(--orange)}
.povstrip p{font-size:14.5px;color:var(--muted);margin:0;max-width:44em}
.povstrip .meta{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.povstrip .more{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--black);white-space:nowrap}
.povstrip .more:after{content:" →";color:var(--orange)}

/* what we do */
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:center}
.split figure{margin:0}
.split figcaption{font-size:13px;color:var(--muted);margin-top:12px}
.outcomes{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:88px;padding-top:40px;border-top:1px solid var(--line)}
.outcome{text-decoration:none;color:var(--ink)}
.outcome .n{font-size:12px;letter-spacing:.14em;color:var(--orange);font-weight:700;margin-bottom:12px;display:block}
.outcome h3{font-size:22px;font-weight:500;margin-bottom:10px;line-height:1.25;transition:color .15s}
.outcome:hover h3{color:var(--orange)}
.outcome p{font-size:14px;color:var(--muted);margin:0}

/* what we do, dark */
section.night .lede{color:#a9bcc0}
section.night .outcomes{border-top-color:rgba(255,255,255,.18)}
section.night .outcome{color:#c9d6d8}
section.night .outcome h3{color:var(--white)}
section.night .outcome p{color:#8fa3a7}
section.night figcaption{color:#8fa3a7}

/* how we work */
.wheel{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.wheel figure{margin:0;max-width:600px}
.wheel figure svg{display:block;width:100%;height:auto}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:20px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps .n{width:32px;height:32px;border-radius:50%;background:var(--orange);color:var(--white);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.steps b{display:block;font-size:19px;font-weight:500;color:var(--black);margin-bottom:4px}
.steps p{font-size:15px;color:var(--slate);margin:0;line-height:1.5}
.prow{margin-top:96px;padding-top:40px;border-top:1px solid var(--line)}
.prow h3{font-size:24px;font-weight:300;margin-bottom:26px}
.pcards{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-bottom:30px}
.pcard{background:var(--white);border:1px solid var(--line);padding:22px 20px;text-decoration:none;color:var(--black);font-size:15.5px;line-height:1.35;font-weight:500;display:flex;flex-direction:column;gap:14px;transition:transform .2s,border-color .2s}
.pcard:hover{transform:translateY(-3px);border-color:var(--orange)}
.pcard svg{width:30px;height:30px;stroke:var(--black);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* principles page */
.phead{padding:180px 0 96px}
.phead h1{color:var(--white);font-size:clamp(44px,6vw,88px);max-width:10em;margin-bottom:26px}
.toc{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:t}
.toc li{counter-increment:t;border-top:1px solid rgba(255,255,255,.2);padding-top:14px}
.toc li:before{content:"0" counter(t);display:block;color:var(--orange);font-size:12px;font-weight:700;letter-spacing:.14em;margin-bottom:6px}
.toc a{color:var(--white);text-decoration:none;font-size:15.5px;line-height:1.35}
.toc a:hover{color:var(--orange)}
.pblock{padding:112px 0}
.pgrid{display:grid;grid-template-columns:1fr 1.2fr;gap:72px;align-items:start}
.pgrid > div > svg{width:44px;height:44px;stroke:var(--black);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px;display:block}
.pgrid h2{max-width:10em}
.pfig{margin:34px 0 0}
.phd{max-width:46em}
.phd > svg{width:44px;height:44px;stroke:var(--black);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px;display:block}
.phd h2{max-width:12em}
.phd .lede{margin:0}
.pblock .fig{margin-top:56px}
.pblock .fig.narrow{max-width:680px}
.pblock .fig.dark{max-width:640px}.pblock .fig.dark svg{display:block}
.phsplit .fig{max-width:400px;justify-self:end}
.pblock .psub{margin-top:64px}
.pblock .psub+.fig{margin-top:0}
.pmore{margin-top:48px;max-width:60em}
.pmore h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.pmore p{font-size:16px;color:var(--slate);line-height:1.65;margin:0 0 18px}
.pmore .define{margin-top:8px}
.pmore .plain li{border:0;padding:7px 0 7px 26px;position:relative}
.pmore .plain li:before{content:"";position:absolute;left:0;top:19px;width:14px;height:2px;background:var(--orange)}
.pmore .plain li:last-child{border:0}
.phsplit{align-items:center}.phsplit .fig{margin-top:0}
.bwheel{margin:0;width:100%;max-width:540px;justify-self:end}.bwheel svg{display:block;width:100%;height:auto}
.phead .toc{margin-top:56px}
.psub{margin-top:72px}.psub h3{font-size:clamp(26px,2.6vw,34px);font-weight:300;line-height:1.15;margin:0 0 16px;letter-spacing:-.02em}.psub p{max-width:60em;color:var(--slate);font-size:16px;margin:0 0 28px}.psub .eyebrow{margin-bottom:12px}
.pgrid .define{margin-top:18px}.pgrid .plain li b{color:var(--black);font-weight:500}
.pfig figcaption{font-size:13px;color:var(--muted);margin-top:10px}
.pgrid h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:40px 0 12px}
.seen a{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--black);font-size:16px}
.seen a:last-child{border-bottom:1px solid var(--line)}
.seen a span{color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;white-space:nowrap;padding-top:4px}
.seen a:hover{color:var(--orange)}
.seenstrip{margin-top:64px;padding-top:26px;border-top:1px solid var(--line)}
.seenstrip h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.seenrow{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.seenrow::-webkit-scrollbar{display:none}
.stile{flex:1 1 0;min-width:168px;max-width:236px;display:block;background:var(--night);color:var(--white);text-decoration:none;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.stile:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.16)}
.stile .art{position:relative;aspect-ratio:400/150;overflow:hidden}
.stile .art svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .5s ease}
.stile:hover .art svg{transform:scale(1.05)}
.stile .body{padding:10px 12px 12px}
.stile .sec{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-light);font-weight:700;margin:0 0 4px}
.stile h4{font-size:12.5px;font-weight:500;line-height:1.3;margin:0;color:var(--white);letter-spacing:-.01em}

.plist{list-style:none;margin:0;padding:0}
.plist li{border-top:1px solid var(--line)}
.plist li:last-child{border-bottom:1px solid var(--line)}
.plist a{display:grid;grid-template-columns:44px 40px 1fr;align-items:center;gap:16px;padding:22px 0;text-decoration:none;color:var(--black);font-size:22px;font-weight:400;line-height:1.25;transition:padding-left .2s}
.plist a:hover{padding-left:8px;color:var(--orange)}
.plist .n{font-size:12px;letter-spacing:.14em;color:var(--orange);font-weight:700}
.plist svg{width:32px;height:32px;stroke:var(--black);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* hAIzel statement */
.statement{display:grid;grid-template-columns:1fr 1fr;gap:40px 72px;align-items:center}
.statement figure{margin:0;max-width:560px;justify-self:end}
.statement figure svg{display:block;width:100%;height:auto}
.statement figcaption{font-size:13px;color:#8fa3a7;margin-top:10px}
.statement .pullquote{grid-column:1/-1;font-size:clamp(22px,2.4vw,30px);font-weight:300;line-height:1.4;color:var(--white);margin:0;padding:32px 0 0 28px;border-left:3px solid var(--orange)}
.statement ul{list-style:none;margin:40px 0 0;padding:40px 0 0;border-top:1px solid rgba(255,255,255,.18);grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.statement li{font-size:15px;line-height:1.5;color:#a9bcc0}
.statement li b{color:var(--white);display:block;font-size:18px;font-weight:500;margin-bottom:4px}

/* who we serve: the same list language as the four outcomes */
.outcomes.serve{margin-top:0;padding-top:0;border-top:0}
.founding .more{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--black);text-decoration:none}
.founding .more:after{content:" →";color:var(--orange)}
.founding .more:hover{color:var(--orange)}

/* point of view */
.povband{padding:96px 0}
.pov{display:grid;grid-template-columns:380px 1fr;gap:64px;align-items:center}
.pov .imgs{display:block;margin:0}
.pov .imgs img{display:block;width:100%;height:auto;border:1px solid var(--line);transition:transform .2s ease,box-shadow .2s ease}
.pov .imgs:hover img{transform:translateY(-4px);box-shadow:0 22px 50px rgba(0,0,0,.14)}
.pov h2.display{font-size:clamp(30px,3.2vw,44px);max-width:14em}
.pov .lede{font-size:17px}
.pov .meta{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 24px}

/* about: the tree with the four values */
.tree{position:relative;width:100%;max-width:520px;margin:0 auto;container-type:inline-size}
.tree img{display:block;width:100%;height:auto}
.tree .val{position:absolute;transform:translate(-50%,-50%);color:var(--white);text-align:center;font-weight:600;line-height:1.15;font-size:3.1cqw;letter-spacing:-.02em;pointer-events:none}
.tree .val.sm{font-size:2.45cqw}
.tree{margin-bottom:64px}
.tree .root{position:absolute;font-size:3.1cqw;font-weight:600;color:var(--black);white-space:nowrap;letter-spacing:-.01em;line-height:1.2}
.tree .root em{font-style:normal;color:var(--orange)}
.tree .root.l{left:0;top:84%}
.tree .root.r{right:0;top:84%}
.tree .root.b{left:46%;top:101.5%;transform:translateX(-50%)}
.tree.missing{aspect-ratio:974/1378;background:linear-gradient(160deg,#dcdad7,#a9adb0);display:flex;align-items:flex-end}
.tree.missing .ph{margin:24px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:10px 14px}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.ringfig{margin:0;width:100%;max-width:460px;justify-self:center;border:0;position:relative} /* width:100% because the SVG has no intrinsic size */
.ringfig img,.ringfig svg{position:relative;z-index:1;display:block;width:100%;height:auto;border:0;box-shadow:none} /* the rings SVG is revealed from the core outwards by v6_js.py (see rings_growing() in build_v6.py) */
.photo{position:relative;background:linear-gradient(160deg,#dcdad7 0%,#a9adb0 55%,#6d7378 100%);min-height:560px;display:flex;align-items:flex-end;overflow:hidden}
.photo:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 30%,rgba(255,255,255,.35),transparent 55%)}
.photo .ph{position:relative;margin:24px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:10px 14px;display:inline-flex;align-items:center;gap:10px}
.photo .ph:before{content:"";width:16px;height:12px;border:2px solid #fff;border-radius:2px}
.photo .pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%}  /* the Veehof photo; 30% keeps the sign and the gables in a square crop */
.founding{list-style:none;margin:0 0 36px;padding:0}
.founding li{border-top:1px solid var(--line);padding:16px 0}
.founding li:last-child{border-bottom:1px solid var(--line)}
.founding b{display:block;font-size:17px;font-weight:600;color:var(--black);margin-bottom:3px}
.founding p{font-size:14.5px;color:var(--slate);margin:0;line-height:1.5}
.vhead{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 18px}
.values{display:grid;grid-template-columns:1fr 1fr;gap:22px 40px;margin:0 0 36px}
.value h3{font-size:17px;font-weight:600;margin-bottom:4px}
.value p{font-size:14.5px;color:var(--slate);margin:0;line-height:1.5}
.facts{display:flex;gap:44px;flex-wrap:wrap;margin:0 0 36px;padding-top:26px;border-top:1px solid var(--line)}
.facts div{font-size:14px;color:var(--slate)}
.facts b{display:block;font-size:30px;font-weight:300;color:var(--black);letter-spacing:-.02em;line-height:1.1}
.founder{font-size:19px;line-height:1.5;color:var(--black);font-weight:300;border-left:3px solid var(--orange);padding-left:20px;max-width:34em}
.founder .who{display:block;font-size:13px;color:var(--muted);margin-top:8px}
.teasers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:88px}
.teaser{min-height:340px;padding:34px;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;color:var(--white);position:relative;overflow:hidden;transition:transform .2s ease}
.teaser:hover{transform:translateY(-4px)}
.teaser .eyebrow{color:var(--teal-light);margin-bottom:10px}
.teaser h3{color:var(--white);font-size:26px;font-weight:300;line-height:1.2;margin-bottom:16px}
.teaser .more{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.teaser .more:after{content:" →";color:var(--orange)}
.teaser.t1{background:linear-gradient(160deg,#cfccc8,#6d7378)}
.teaser.t1 .pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%;z-index:0;transition:transform .4s ease}
.teaser.t1:hover .pic{transform:scale(1.03)}
.teaser.t1:after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(15,20,26,.08) 25%,rgba(15,20,26,.78) 100%)}  /* dark veil so the white text stays legible on the photo */
.teaser.t1 .eyebrow,.teaser.t1 h3,.teaser.t1 .more{position:relative;z-index:1}
.teaser.t1 .eyebrow{color:#fff}
.teaser.t2{background:var(--night)}
.teaser.t3{background:var(--orange)}
.teaser.t3 .eyebrow{color:#ffd9c4}
.teaser.t3 .more:after{color:var(--white)}
.teaser .ph{position:absolute;top:20px;left:20px;background:rgba(0,0,0,.5);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:8px 12px}

/* contact */
.contact{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:start}
.options{list-style:none;margin:0 0 36px;padding:0}
.options li{border-top:1px solid rgba(255,255,255,.18);padding:22px 0}
.options li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.options b{display:block;color:var(--white);font-size:19px;font-weight:500;margin-bottom:6px}
.options p{font-size:15px;margin:0;color:#a9bcc0}
.contact .big{font-size:clamp(28px,3vw,40px);font-weight:300;color:var(--white);line-height:1.25;margin-bottom:34px}
.contact .big a{color:var(--orange);text-decoration:none;border-bottom:1px solid rgba(254,89,0,.5)}
.offices{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:80px;padding-top:36px;border-top:1px solid rgba(255,255,255,.14);font-size:14px;color:#a9bcc0}
.offices b{display:block;color:var(--white);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
/* footer */
footer.site{background:var(--night);color:#a9bcc0;font-size:14px;border-top:1px solid rgba(255,255,255,.1)}
footer.site .in{max-width:var(--max);margin:0 auto;padding:56px 40px 40px;display:grid;grid-template-columns:1.2fr 1.3fr 1.2fr;gap:40px}
footer.site.noffices .in{grid-template-columns:1.4fr 1fr}
footer.site .flinks a{white-space:nowrap}
footer.site a{color:#c9d6d8;text-decoration:none}
footer.site a:hover{color:var(--white)}
footer.site p{margin:0 0 10px}
footer.site .fcol>b{display:block;color:var(--white);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
footer.site .brand .wordmark{display:inline-block;margin-bottom:12px}
footer.site .brand a:not(.wordmark){color:var(--orange)}
footer.site .flinks{display:grid;grid-template-columns:1fr 1fr;gap:8px 40px;grid-auto-flow:column;grid-template-rows:repeat(4,auto)}  /* two columns of four (14 Sept): the eight links in one column made the footer tall and left the row empty */
footer.site .offices{display:block;margin:0;padding:0;border:0}
footer.site .offices p b{display:block;color:var(--white);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px}
.offices a.map{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22)}.offices a.map:hover{color:var(--white);border-bottom-color:var(--orange)}
footer.site .legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:18px 40px 26px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:#7f9498}

/* responsive */
@media (max-width:1100px){
 footer.site .in{grid-template-columns:1fr 1fr}
 .nums{grid-template-columns:1fr 1fr}
 .split,.statement,.pov,.about,.contact,.wheel,.pgrid{grid-template-columns:1fr;gap:48px}
 .pcards,.toc{grid-template-columns:1fr 1fr}
 .outcomes,.teasers,.statement ul{grid-template-columns:1fr 1fr}
 .statement figure{justify-self:start}
}
@media (max-width:760px){
 .wrap,header.top .in{padding:0 22px}
 footer.site .in,footer.site.noffices .in{grid-template-columns:1fr;gap:28px;padding:44px 22px 24px}
 footer.site .legal{padding:16px 22px 22px}
 section{padding:88px 0}
 .nums,.outcomes,.teasers,.quotes,.values,.offices,.pcards,.toc{grid-template-columns:1fr}
 .tiles{padding:4px 22px 28px;margin:0 -22px}
 .tile{flex-basis:82vw;min-height:460px}
 .hero{display:block;min-height:0;padding:132px 0 0}  /* not centred at 100vh on phones: the content is taller than the screen */
 .hero .foot{position:static;margin-top:56px}
 .head{flex-direction:column;align-items:flex-start;gap:14px}
 .contact .big a{overflow-wrap:anywhere}
 .hero .foot .wrap{flex-direction:column;gap:6px}
 .rail .rnav{display:none}
 .povstrip{grid-template-columns:1fr;gap:18px}
 .statement ul{grid-template-columns:1fr}
}

/* subpages */
.phead.short{padding:170px 0 72px}
.phead .split{align-items:center}
.phead .split figure{margin:0}
.phead .split figcaption{font-size:13px;color:#8fa3a7;margin-top:12px}
.phead .lede{color:#a9bcc0}
.crumb{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#8fa3a7;margin:0 0 28px;font-weight:700}
.crumb a{color:#c9d6d8;text-decoration:none}.crumb a:hover{color:var(--white)}
.storyline{display:flex;flex-wrap:wrap;gap:8px 6px;margin-top:44px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#c9d6d8;align-items:center}
.storyline span{border:1px solid rgba(255,255,255,.22);padding:9px 13px}
.storyline i{color:var(--orange);font-style:normal;padding:0 2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:64px}
.two h3{font-size:21px;font-weight:500;margin:0 0 12px}
.two h3+p{margin-bottom:28px}
.two p{font-size:16px;color:var(--slate);line-height:1.6}
.plain{list-style:none;margin:0;padding:0}
.plain li{border-top:1px solid var(--line);padding:14px 0;font-size:16px;color:var(--slate);line-height:1.5}
.plain li:last-child{border-bottom:1px solid var(--line)}
.plain a{color:var(--black)}
.fig{margin:0}.fig svg{display:block;width:100%;height:auto}.fig figcaption{font-size:13px;color:var(--muted);margin-top:14px;max-width:60em}
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.cap .n,.pillar .n{font-size:12px;letter-spacing:.14em;color:var(--orange);font-weight:700;margin-bottom:12px;display:block}
.cap h3{font-size:22px;font-weight:500;margin-bottom:10px;line-height:1.25}
.cap p{font-size:15px;color:var(--slate);margin:0;line-height:1.6}
.note{font-size:14px;color:var(--muted);margin:48px 0 0;max-width:50em}
.outcome .more{display:block;margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--black)}
.outcome .more:after{content:" →";color:var(--orange)}
.notlist{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.notlist div{background:var(--white);border:1px solid var(--line);padding:22px 20px;font-size:15.5px;line-height:1.4;color:var(--black)}
section.paper .notlist div{background:var(--white)}
.notlist b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.define{border-left:3px solid var(--orange);padding:6px 0 6px 20px;font-size:15px;color:var(--slate);margin-top:8px;line-height:1.6}
.define b{color:var(--black)}
.loop{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:64px}
.loop div{background:var(--night);color:#c9d6d8;padding:28px 24px;font-size:15px;line-height:1.5}
.loop b{display:block;color:var(--orange);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-top:40px;border-top:1px solid rgba(255,255,255,.18)}
.pillar h3{color:var(--white);font-size:22px;font-weight:500;margin-bottom:10px;line-height:1.25}
.pillar p{font-size:15px;color:#a9bcc0;margin:0;line-height:1.6}
.values.four{grid-template-columns:repeat(4,1fr);gap:40px;margin:0}
.values.four h3{font-size:20px;font-weight:500;margin-bottom:10px}
.rootline{font-weight:600;color:var(--black)}
.rootline em{font-style:normal;color:var(--orange)}
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.project{background:var(--white);border:1px solid var(--line);padding:24px 22px}
.project .plogos{display:flex;align-items:center;gap:18px;height:64px;margin-bottom:18px}
.project .plogos img{display:block;height:auto;width:auto;max-height:64px;max-width:100%;object-fit:contain}
.project .plogos img.l-twerk,.project .plogos img.l-oak{max-height:64px}
.project .plogos img.l-veehof{max-height:64px}
.project .plogos img.l-intec,.project .plogos img.l-girleek{max-height:44px}
.project .plogos img.l-tribe,.project .plogos img.l-experience-at-work{max-height:30px}
.project b{display:block;font-size:17px;font-weight:600;color:var(--black);margin-bottom:6px}
.project p{font-size:14.5px;color:var(--slate);margin:0;line-height:1.5}
a.project{display:block;text-decoration:none;color:inherit;transition:border-color .15s}
a.project:hover{border-color:var(--orange)}
a.project .more{display:inline-block;margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--black)}
a.project .more:after{content:" →";color:var(--orange)}
.filters{display:flex;flex-wrap:wrap;gap:18px 40px;margin-bottom:40px}
.filters div{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:8px}
.filters a{font-size:13px;font-weight:600;padding:8px 14px;border:1px solid var(--line);background:var(--white);text-decoration:none;color:var(--black);border-radius:999px;transition:background .15s,color .15s}
.filters a:hover{border-color:var(--black)}
.filters a.on{background:var(--black);color:var(--white);border-color:var(--black)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tgrid .tile{flex:none;min-height:500px}
.tile .hf{font-size:14px;color:#a9bcc0;margin:-8px 0 22px;line-height:1.4}
.tile .hf b{color:var(--orange);font-weight:600}
.empty{margin-top:30px;color:var(--slate)}
/* story hero: the tile art sits straight on the banner, no frame, with the homepage constellation behind it and a slow drift */
.phead.shero{position:relative;overflow:hidden}
.phead.shero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.phead.shero:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,24,29,.94) 0%,rgba(7,24,29,.6) 48%,rgba(7,24,29,.1) 100%);pointer-events:none}
.phead.shero .wrap{position:relative;z-index:2}
.artpanel{position:relative;aspect-ratio:400/290;overflow:visible;background:transparent;border:0}
.artpanel svg{position:absolute;inset:0;width:100%;height:100%;animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,8px,0) scale(1)}to{transform:translate3d(0,-8px,0) scale(1.03)}}
@media (prefers-reduced-motion:reduce){.artpanel svg{animation:none}}
.joint{font-size:13.5px;color:#a9bcc0;margin:-6px 0 0;letter-spacing:.02em}
.joint:before{content:"";display:inline-block;width:18px;height:2px;background:var(--orange);vertical-align:middle;margin-right:12px}
/* about banner: the tree in the hero's language, next to the title */
.btree{margin:0;width:100%;max-width:440px;justify-self:end}.btree svg,.btree img{display:block;width:100%;height:auto}
.phead.abhero .split{grid-template-columns:1fr 1.3fr} /* note: needs the .phead prefix, the later `.phead .split` rule (1.15fr 1fr) silently won before 14 Sept */
.btree.office{max-width:760px} /* the Veehof drawing is wide (3:1), so it gets a wider right column than the tree */
.cap .arrow{margin-top:18px;font-size:12px}
/* responsible AI on a light band (what-we-do.html) */
section.paper .pillars{border-top-color:var(--line)}
section.paper .pillar h3{color:var(--black)}
section.paper .pillar p{color:var(--slate)}
/* what we do: the end-to-end drawing on the light band, then the three capabilities stacked, each with one text and its legend */
.e2e{margin:0 0 72px;max-width:none}
.treewrap{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start;margin-top:8px}
.capblocks{max-width:640px}
.capblock{border-top:4px solid var(--orange);padding-top:22px;margin-bottom:64px}
.capblock .seenstrip{margin-top:36px;padding-top:22px}  /* the strip sits inside the 640 px capability column: tighter than under a principle, and wrapped in a grid instead of a sideways scroll */
.capblock .seenstrip h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:600}
.capblock .seenrow{scroll-snap-type:x mandatory;padding:4px 0 6px}  /* one row, scrolled with the rail buttons (or swiped on phones) */
.capblock .stile{flex:0 0 196px;min-width:0;max-width:none;scroll-snap-align:start}
.rail.small .rnav{width:40px;height:40px;font-size:16px;top:50%}
.rail.small .rnav.prev{left:-20px}.rail.small .rnav.next{right:-20px}
.capblocks{min-width:0;max-width:640px}
.capblock .tag{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px}
.capblock .n{font-size:12px;letter-spacing:.14em;color:var(--orange);font-weight:700;margin-bottom:12px;display:block}
.capblock h3{font-size:22px;font-weight:500;margin-bottom:10px;line-height:1.25}
.capblock p{font-size:15px;color:var(--slate);margin:0 0 22px;line-height:1.6;max-width:48em}
.treefig{margin:0;position:sticky;top:max(110px,calc(50vh - 180px))} /* tree centred in the viewport (image ~358px tall at 340px wide), never under the header */
.treestick{overflow:hidden;transform:translateY(calc(var(--reveal,69.5%) * -0.5))} /* keeps the CENTRE of the revealed part of the tree at the viewport centre while it grows */
@property --reveal{syntax:'<percentage>';inherits:true;initial-value:69.5%}
.treestick img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--reveal,69.5%) - 9%),#000 var(--reveal,69.5%));mask-image:linear-gradient(to bottom,transparent calc(var(--reveal,69.5%) - 9%),#000 var(--reveal,69.5%))}
@media (prefers-reduced-motion:no-preference){.treestick,.treestick img{transition:--reveal .15s linear}}
.legend.two{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;padding-top:14px;border-top:1px solid var(--line)}
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
.bar{position:relative;border-top:4px solid var(--orange);padding-top:20px}
.bar .n{font-size:12px;letter-spacing:.14em;color:var(--orange);font-weight:700;margin-bottom:12px;display:block}
.bar h3{font-size:22px;font-weight:500;margin-bottom:10px;line-height:1.25}
.bar p{font-size:15px;color:var(--slate);margin:0;line-height:1.6}
.bar+.bar:before{content:"";position:absolute;left:-40px;top:-13px;width:20px;height:20px;border-top:3px solid var(--slate);border-right:3px solid var(--slate);transform:rotate(45deg)}
section.night .bar h3,section.night .legend b{color:var(--white)}
section.night .bar p,section.night .legend span,section.night .phase .sum{color:#a9bcc0}
section.night .bar+.bar:before{border-color:#8fa3a7}
.e2e svg{display:block;width:100%;height:auto}
.phase .sum{font-size:15.5px;font-style:italic;color:var(--slate);line-height:1.5;margin:0 0 14px}
.legend{list-style:none;margin:0;padding:0;counter-reset:l}
.legend li{counter-increment:l;display:grid;grid-template-columns:26px 1fr;gap:10px;padding:8px 0;font-size:15px;line-height:1.5}
.legend li:before{content:"0" counter(l);color:var(--orange);font-weight:700;font-size:11px;letter-spacing:.1em;padding-top:3px}
.legend b{display:block;font-weight:600;color:var(--black)}
.legend span{color:var(--slate)}
.phead .split{grid-template-columns:1.15fr 1fr}
.phead .split h1{font-size:clamp(36px,4.4vw,64px)}
.figs .num{border-top-color:var(--line);padding-bottom:36px}
.figs .num .v{font-size:clamp(44px,4.6vw,72px);white-space:normal}
.figs.n4{grid-template-columns:repeat(4,1fr);gap:0 40px}
.figs.n2{grid-template-columns:1fr 1fr;max-width:820px}
.basis{margin:-8px 0 0;padding:14px 28% 0 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--muted)}
@media(max-width:820px){.basis{padding-right:0}}
.story{display:grid;grid-template-columns:1fr 1fr;gap:44px 64px}
.step .n{display:flex;gap:16px;align-items:baseline;font-size:21px;font-weight:500;color:var(--black);margin:0 0 10px}
.step .n i{font-style:normal;color:var(--orange);font-size:12px;letter-spacing:.14em;font-weight:700}
.step p{font-size:16px;color:var(--slate);margin:0;line-height:1.65}
.step p+p{margin-top:12px}
.step ul{margin:6px 0 0;padding:0 0 0 20px;font-size:16px;color:var(--slate);line-height:1.65}
.step li{margin:4px 0}
.tags{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:64px;padding-top:36px;border-top:1px solid var(--line)}
.tags span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-right:8px}
.tags a{border:1px solid var(--line);background:var(--white);padding:8px 14px;text-decoration:none;color:var(--black);font-size:14px;font-weight:500;transition:border-color .15s}
.tags a:hover{border-color:var(--orange)}
.pn{display:flex;justify-content:space-between;gap:30px;margin-top:44px;padding-top:26px;border-top:1px solid var(--line);font-size:15px}
.pn a{color:var(--black);text-decoration:none;font-weight:500}.pn a:hover{color:var(--orange)}
.pn div:last-child{text-align:right}
.pn .eyebrow{display:block;font-size:11px;letter-spacing:.14em;margin:0 0 8px}
.prose{max-width:46em}
.prose h2{font-size:26px;font-weight:500;margin:44px 0 14px;letter-spacing:-.01em;line-height:1.25}
.prose h2:first-child{margin-top:0}
.prose p{font-size:17px;line-height:1.7;color:var(--slate)}
.prose b{color:var(--black)}
.ctab{display:flex;justify-content:space-between;align-items:flex-end;gap:56px}
.ctab h2{margin-bottom:14px}
.ctab .lede{margin:0}
.ctab .btns{display:flex;gap:14px;flex-wrap:wrap;flex:none;padding-bottom:6px}
@media (max-width:1100px){
 .caps,.notlist,.loop,.pillars,.projects,.tgrid,.values.four,.figs.n4{grid-template-columns:1fr 1fr}
 .phead .split,.phead.abhero .split{grid-template-columns:1fr}
 .phases{grid-template-columns:1fr;gap:48px}.bar+.bar:before{display:none}
 .ctab{flex-direction:column;align-items:flex-start}
 .treewrap{display:flex;flex-direction:column}
 .capblocks{max-width:none;min-width:0;width:100%}
 .treefig{order:-1;position:static;max-width:280px;margin:0 0 32px}
 .treestick{transform:none} .treestick img{-webkit-mask-image:none;mask-image:none}
}
@media (max-width:760px){
 .e2e{overflow-x:auto;margin:0 -22px 48px;padding:0 22px}.e2e svg{min-width:520px}
 .legend.two{grid-template-columns:1fr}
 .caps,.notlist,.loop,.pillars,.projects,.tgrid,.values.four,.two,.story,.figs.n4,.figs.n2{grid-template-columns:1fr}
 .pn{flex-direction:column}.pn div:last-child{text-align:left}
 .tgrid .tile{min-height:0}
}

/* 14 Sept 2026 additions */
[id]{scroll-margin-top:90px}  /* anchors land under the fixed 76 px header otherwise (careers, values, beyond, p1..p5) */
.tile[hidden],.tgrid .tile[hidden]{display:none}  /* .tile sets display:flex, which beat the hidden attribute: the impact filters only changed the URL */
.scurve-m{display:none}.scurve-d,.scurve-m{display:block}.scurve-m{display:none}
.scurve-d svg,.scurve-m svg{display:block;width:100%;height:auto}
.icp{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start;margin-top:56px;padding-top:36px;border-top:1px solid var(--line)}
.icp .eyebrow{margin:6px 0 0}
.icp p{margin:0;font-size:17px;line-height:1.65;color:var(--slate);max-width:44em}
.pov .links{display:flex;flex-wrap:wrap;gap:12px 36px;margin:0}
.pov .links .arrow{margin-top:0}
.povlist{display:grid;gap:40px}
.povitem{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:center;padding:40px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--black)}
.povitem:last-child{border-bottom:1px solid var(--line)}
.povitem img{display:block;width:100%;height:auto;border:1px solid var(--line);transition:transform .2s ease,box-shadow .2s ease}
.povitem:hover img{transform:translateY(-4px);box-shadow:0 22px 50px rgba(0,0,0,.14)}
.povitem h2{font-size:clamp(24px,2.4vw,32px);font-weight:400;letter-spacing:-.02em;line-height:1.2;margin:10px 0 14px}
.povitem p{font-size:16px;line-height:1.6;color:var(--slate);margin:0 0 16px;max-width:40em}
.povitem .meta{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 18px}
.povitem .more{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.povitem .more:after{content:" →";color:var(--orange)}
.project .plogos img.l-citypirates{max-height:64px}
@media (max-width:1100px){
 .povitem{grid-template-columns:1fr;gap:24px}
 .povitem img{max-width:420px}
}
@media (max-width:760px){
 .scurve-d{display:none}.scurve-m{display:block}
 #what figure{margin:0 -22px}#what figure figcaption{padding:0 22px}  /* the phone S-curve runs edge to edge */
 .icp{grid-template-columns:1fr;gap:12px;margin-top:40px}
 #careers .about .photo{order:2;min-height:220px}  /* text first on phones, so the Careers anchor lands on the heading, not on a grey block */
}

/* former inline style="" attributes (kept identical, moved here for the CSP) */
.u-1{margin-top:56px !important}
.u-2{margin-top:14px !important;white-space:nowrap !important}
.u-3{margin:72px 0 22px !important}
.u-4{margin-top:30px !important}
.u-5{margin-top:36px !important}
.u-6{margin-top:40px !important}
.u-7{left:45.8% !important;top:9.6% !important;width:24% !important}
.u-8{left:15.0% !important;top:22.4% !important;width:22% !important}
.u-9{left:68.1% !important;top:21.8% !important;width:18% !important}
.u-10{left:87.9% !important;top:35.2% !important;width:20% !important}
.u-11{margin-top:6px !important}
.u-12{color:#a9bcc0 !important}

/* reserve space for images while they load; same size as before */
:where(img[width][height]){height:auto}

/* hide temporaly this 2 story until the client give aproval to us */
/* Temporarily hidden until the client confirms. Delete this block to show it again. */
a[href$="order-and-stock-visibility.html"]{display:none!important}
.pn div:has(> a[href$="order-and-stock-visibility.html"]){display:none!important}

/* Visible again (client confirmed). Kept here in case it needs to be hidden again:
a[href$="technology-cost-transparency.html"]{display:none!important}
.pn div:has(> a[href$="technology-cost-transparency.html"]){display:none!important}
*/