/* Homepage, premium direction (Nov 2026). Self-contained: this page does not load site.css,
   so the new header, menu and footer cannot collide with the shared chrome on other pages. */
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:300 500;font-display:swap;src:url("/assets/fonts/host-grotesk-latin.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{
  --ink:#0F2540;--ink-2:#475569;--ink-3:#64748B;--paper:#FFFFFF;--paper-2:#F2F6FB;--rule:#E2E8F0;
  --night:#0F2540;--night-2:#0B1E35;--on:#EEF2F0;--on-2:rgba(238,242,240,.72);--on-3:rgba(238,242,240,.58);--hair:rgba(238,242,240,.12);
  --mint:#C7E2D0;--mint-2:#9FDCC2;--green:#43705A;
  --sans:'Host Grotesk','Helvetica Neue',Arial,sans-serif;--mono:'PM',ui-monospace,'IBM Plex Mono',Menlo,monospace;--wm:'ZS','Zalando Sans',Arial,sans-serif;
  --gut:clamp(20px,4vw,48px);--max:1240px;--ease:cubic-bezier(.2,.7,.2,1)
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{font-family:var(--sans);font-weight:300;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--mint);color:var(--night)}
:focus-visible{outline:2px solid var(--mint-2);outline-offset:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.lbl{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:flex;gap:14px;align-items:baseline}
.lbl .n{opacity:.6}
.dark .lbl,.lbl.on-dark{color:var(--on-3)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr:focus{position:fixed!important;left:16px;top:16px;width:auto;height:auto;clip:auto;z-index:200;background:var(--on);color:var(--night);padding:10px 16px;border-radius:999px}

/* pills */
.pill{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:14px 26px;border-radius:999px;font:400 16px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s}
.pill .ar{transition:transform .25s var(--ease)}
.pill:hover{transform:translateY(-2px)}.pill:hover .ar{transform:translateX(4px)}
.pill.light{background:var(--on);color:var(--night);font-weight:500}
.pill.light:hover{background:#fff;color:var(--night)}
.pill.ghost{color:var(--on);border:1px solid rgba(238,242,240,.32)}
.pill.ghost:hover{border-color:var(--on);color:#fff}
.pill.ink{background:var(--ink);color:var(--paper);font-weight:500}
.pill.ink:hover{background:#1A3A5E;color:#fff}
.pill.mint{background:var(--mint-2);color:var(--night);font-weight:500}
.pill.mint:hover{background:var(--mint);color:var(--night)}
.pill.ink-ghost{color:var(--ink);border:1px solid rgba(15,37,64,.3)}
.pill.ink-ghost:hover{border-color:var(--ink)}
.tl{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .35s var(--ease),color .25s}
.tl:hover{background-size:100% 1px}

/* logo */
.logo{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:#fff;flex:none}
.logo svg{width:34px;height:34px;flex:none}
.logo .word{font-family:var(--wm);font-weight:400;font-size:16px;letter-spacing:.4em;white-space:nowrap;margin-right:-.4em}
.logo .word b{font-weight:400;color:var(--mint)}

/* header: transparent over the hero, dark glass once scrolled */
.hn{position:fixed;top:0;left:0;right:0;z-index:50;color:var(--on);border-bottom:1px solid transparent;transition:background-color .35s,border-color .35s,padding .35s}
.hn .bar{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:16px;max-width:none;padding:22px var(--gut);transition:padding .35s}
.hn .right{display:flex;align-items:center;gap:28px;flex:none}
.hn .book{font-size:15px;color:var(--on)}
.menu-btn{display:inline-flex;align-items:center;gap:12px;min-height:44px;min-width:44px;background:none;border:0;color:var(--on);font:400 15px var(--sans);cursor:pointer;padding:0}
.menu-btn svg{flex:none}
.hn.scrolled,html:not(.js) .hn{background:rgba(15,37,64,.96);border-bottom-color:rgba(255,255,255,.08);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px)}
.hn.scrolled .bar{padding-top:14px;padding-bottom:14px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hn.scrolled{background:var(--night)}}

/* full-screen menu */
.menu{position:fixed;inset:0;z-index:100;background:var(--night-2);color:var(--on);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.menu[hidden]{display:none}
.menu .halo{position:fixed;width:1200px;height:1200px;right:-560px;bottom:-660px;border-radius:50%;background:radial-gradient(circle at center,rgba(11,30,53,0) 55%,rgba(127,196,166,.16) 62%,rgba(86,150,214,.08) 66%,rgba(11,30,53,0) 71%);pointer-events:none}
.menu .bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px var(--gut)}
.menu-body{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px 64px;align-items:end;padding:32px var(--gut) 56px;max-width:1440px;width:100%;margin:0 auto}
.m-main{list-style:none;display:grid;gap:2px}
.m-main a{display:inline-block;color:var(--on);text-decoration:none;font-weight:300;font-size:clamp(40px,6vw,84px);letter-spacing:-.045em;line-height:1.06;transition:color .25s,transform .35s var(--ease)}
.m-main a:hover,.m-main a:focus-visible{color:var(--mint-2);transform:translateX(10px)}
.m-side{display:grid;grid-template-columns:1fr 1fr;gap:36px 40px;align-content:end}
.m-grp{display:grid;gap:10px;align-content:start}
.m-grp.wide{grid-column:1/-1}
.m-grp .lbl{color:var(--on-3);margin-bottom:4px}
.m-grp a{color:var(--on-2);text-decoration:none;font-size:15.5px;line-height:1.35;justify-self:start}
.m-grp a:hover{color:#fff}
.m-grp a.hl{color:var(--mint-2)}
.m-grp .place{color:var(--on-2);font-size:15.5px}
@media (prefers-reduced-motion:no-preference){
  .menu.open{animation:menuFade .35s ease both}
  .menu.open .mi{animation:menuIn .7s var(--ease) both;animation-delay:calc(var(--d,0) * 55ms + 60ms)}
}
@keyframes menuFade{from{opacity:0}to{opacity:1}}
@keyframes menuIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
html.menu-open,html.menu-open body{overflow:hidden}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--night);color:var(--on);min-height:min(100svh,980px);display:flex;align-items:flex-end}
.glowfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:blur(46px) saturate(1.15);transform:scale(1.2);will-change:transform}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.2;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.hero-inner{position:relative;width:100%;max-width:var(--max);margin:0 auto;padding:180px var(--gut) clamp(72px,9vh,120px);display:grid;gap:32px}
.hero .lbl{color:var(--on-3)}
.hero h1{font-weight:300;font-size:clamp(38px,4.9vw,70px);line-height:1.02;letter-spacing:-.04em;max-width:15.5ch;text-wrap:balance}
.hero .sub{max-width:540px;font-size:18px;line-height:1.6;color:var(--on-2)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;padding-top:6px}

/* section scaffolding */
.sec{padding:clamp(80px,10vw,148px) 0}
.dark{background:var(--night);color:var(--on)}
.h2{font-weight:300;font-size:clamp(32px,3.9vw,56px);line-height:1.04;letter-spacing:-.04em;max-width:18ch;text-wrap:balance}
.lead{font-size:clamp(16.5px,1.25vw,18px);line-height:1.65;color:var(--ink-2);max-width:60ch}

/* about */
.about{display:grid;gap:40px}
.about-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 80px;align-items:end}
.about-top .h2{font-size:clamp(30px,3.2vw,46px);max-width:20ch}
#about{padding-bottom:clamp(56px,7vw,104px)}
.stmt{font-weight:300;font-size:clamp(24px,2.9vw,42px);line-height:1.22;letter-spacing:-.025em;max-width:30ch;margin-top:clamp(16px,3vw,40px);padding-top:clamp(28px,4vw,56px);border-top:1px solid var(--rule);color:var(--ink)}
.stmt .sw{transition:color .5s ease}
html.ink-js .stmt .sw{color:#C5CEDA}
html.ink-js .stmt .sw.on{color:var(--ink)}

/* services */
.svc{padding-bottom:clamp(88px,10vw,150px)}
.marq-wrap{overflow:hidden;padding:clamp(18px,2vw,28px) 0;margin-bottom:clamp(64px,8vw,120px);background:var(--night);color:var(--on)}
.marq{display:flex;gap:clamp(28px,4vw,56px);white-space:nowrap;font-weight:300;font-size:clamp(22px,2.6vw,38px);letter-spacing:-.025em;line-height:1.2;color:var(--on);will-change:transform}
.marq .dot{color:var(--mint-2)}
.svc-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 80px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.svc-list{list-style:none;border-top:1px solid var(--ink)}
.svc-list li{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.15fr);gap:20px 40px;padding:28px 0;border-bottom:1px solid var(--rule);align-items:baseline;scroll-margin-top:96px}
.svc-list .n{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.svc-list h3{font-weight:400;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.2}
.svc-list h3 a{text-decoration:none}
.svc-list h3 a:hover{color:var(--green)}
.svc-list p{font-size:16px;line-height:1.65;color:var(--ink-2);max-width:56ch}
.svc-more{margin-top:36px}

/* values */
.vals{padding-top:0}
.vals .lbl{margin-bottom:36px}
.val-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:36px 28px}
.val{border-top:1px solid var(--ink);padding-top:22px;display:grid;gap:12px;align-content:start}
.val .n{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.val h3{font-weight:400;font-size:clamp(21px,1.7vw,25px);letter-spacing:-.02em;line-height:1.2}
.val p{font-size:15px;line-height:1.6;color:var(--ink-2)}

/* cases */
.cases .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(36px,5vw,56px)}
.cases .head .lbl{margin-bottom:22px}
.case-big{position:relative;display:block;overflow:hidden;border-radius:6px;color:var(--on);text-decoration:none;min-height:clamp(520px,48vw,660px);isolation:isolate}
.case-big .ph{position:absolute;inset:0;z-index:-2;overflow:hidden}
.case-big .ph img{width:100%;height:100%;object-fit:cover;object-position:60% 55%;transform-origin:60% 50%}
.case-big::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,37,64,.94) 0%,rgba(15,37,64,.62) 46%,rgba(15,37,64,.05) 80%)}
.case-big .body{position:relative;padding:clamp(28px,5vw,64px);display:grid;gap:22px;max-width:620px}
.case-big .lg{height:38px;width:auto}
.case-big h3{font-weight:300;font-size:clamp(28px,2.8vw,40px);line-height:1.08;letter-spacing:-.03em}
.metric{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;color:var(--on-2);font-size:16px;line-height:1.5}
.metric b{font-weight:400;color:var(--mint);font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;white-space:nowrap}
.go{font-size:15px;color:var(--mint-2)}
.cap{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(238,242,240,.86);background:rgba(15,37,64,.5);padding:6px 9px;border-radius:3px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.case-big .cap{left:auto;right:16px}
.case-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:28px}
.case-card{display:grid;gap:16px;align-content:start;color:var(--on);text-decoration:none}
.case-card .ph{position:relative;overflow:hidden;border-radius:6px;aspect-ratio:16/10}
.case-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.case-card:hover .ph img{transform:scale(1.04)}
.case-card h3{font-weight:300;font-size:clamp(22px,1.9vw,27px);line-height:1.14;letter-spacing:-.025em;transition:color .3s}
.case-card:hover h3{color:var(--mint-2)}
.case-card .m2{font-size:15.5px;line-height:1.55;color:var(--on-2)}
.case-card .m2 b{font-weight:400;color:var(--mint)}

/* founder */
.founder{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,96px);align-items:center}
.founder .ph{max-width:480px}
.founder .ph img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:6px}
.quote{font-weight:300;font-size:clamp(24px,2.4vw,35px);line-height:1.2;letter-spacing:-.025em;text-wrap:pretty}
.who{display:grid;gap:4px;margin-top:28px}
.who b{font-weight:500;font-size:17px}
.who span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.founder .bio{margin-top:28px;padding-top:28px;border-top:1px solid var(--rule);font-size:16px;line-height:1.7;color:var(--ink-2);max-width:58ch}
.founder .pill{margin-top:28px}

/* micro CTA */
.micro{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper-2)}
.micro .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px)}
.micro p{font-weight:300;font-size:clamp(26px,2.8vw,40px);letter-spacing:-.03em;line-height:1.12;max-width:22ch}

/* approach */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 28px;margin-top:clamp(40px,5vw,72px)}
.step{border-top:1px solid var(--ink);padding-top:22px;display:grid;gap:12px;align-content:start}
.step .big{font-weight:300;font-size:clamp(48px,5vw,72px);letter-spacing:-.04em;line-height:1;color:#C5CEDA}
.step h3{font-weight:400;font-size:24px;letter-spacing:-.02em}
.step p{font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.approach .lead{margin-top:22px}

/* faq */
.faq-sec{background:var(--paper-2);border-top:1px solid var(--rule)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px 80px;align-items:start}
.faq-grid .h2{font-size:clamp(30px,3.2vw,46px)}
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;font-weight:400;font-size:clamp(18px,1.6vw,21px);letter-spacing:-.01em;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{flex:none;width:28px;height:28px;border:1px solid rgba(15,37,64,.3);border-radius:50%;position:relative;transition:transform .3s,border-color .3s}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;background:var(--ink);left:50%;top:50%}
.faq .pm::before{width:11px;height:1.5px;transform:translate(-50%,-50%)}
.faq .pm::after{width:1.5px;height:11px;transform:translate(-50%,-50%)}
.faq details[open] .pm{transform:rotate(45deg);border-color:var(--ink)}
.faq details p{font-size:16px;line-height:1.65;color:var(--ink-2);max-width:62ch;padding:0 0 26px}

/* closing band */
.final{position:relative;overflow:hidden}
.final .ctaring{position:absolute;width:1100px;height:1100px;left:45%;top:-140px;border-radius:50%;background:radial-gradient(circle at center,rgba(15,37,64,0) 55%,rgba(127,196,166,.22) 62%,rgba(86,150,214,.1) 66%,rgba(15,37,64,0) 71%);pointer-events:none}
.final .inner{position:relative;display:grid;gap:30px;padding-top:clamp(96px,13vw,200px);padding-bottom:clamp(88px,11vw,160px)}
.final h2{font-weight:300;font-size:clamp(40px,5vw,76px);line-height:1;letter-spacing:-.045em;max-width:12ch}
.final .sub{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--on-2);max-width:560px}

/* footer */
.foot{border-top:1px solid var(--hair);position:relative}
.f-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;padding:64px 0 52px}
.f-brand .desc{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-3);margin-top:20px}
.f-brand p{font-size:14.5px;line-height:1.6;color:var(--on-2);margin-top:12px;max-width:30ch}
.f-col h2{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-3);margin-bottom:16px}
.f-col a{display:block;width:fit-content;font-size:15px;color:var(--on-2);text-decoration:none;padding:6px 0;transition:color .25s}
.f-col a:hover{color:var(--mint)}
.f-col a.logo{display:inline-flex;padding:0;color:#fff}
.f-col a.pill{display:inline-flex;color:var(--night)}
.f-col address{font-style:normal;font-size:15px;color:var(--on-2);padding:6px 0}
.f-col address a{display:inline;padding:0}
.f-accred{display:flex;gap:12px;margin-top:26px}
.f-accred a{display:flex!important;align-items:center;justify-content:center;width:88px;height:76px;padding:0!important;background:#fff;border-radius:6px;transition:opacity .25s}
.f-accred a:hover{opacity:.85}
.f-accred img{height:56px;width:auto}
.f-col .pill{margin-top:14px;padding:12px 20px;min-height:44px;font-size:15px}
.legal{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;border-top:1px solid var(--hair);padding:22px 0 28px;font-size:13px;line-height:1.6;color:var(--on-3)}
.legal a{color:var(--on-3);text-decoration:none;margin-left:20px}
.legal a:first-child{margin-left:0}
.legal a:hover{color:var(--mint)}
.legal .llms{font-size:8px}

/* ---------- motion ---------- */
@keyframes ringSpin{to{transform:rotate(360deg)}}
@keyframes ringPulse{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes wordUp{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hw{display:inline-block;animation:wordUp .9s var(--ease) both;animation-delay:calc(var(--d) * 70ms + 120ms)}
  .load{animation:fadeUp 1s var(--ease) both}
  .hero .lbl.load{animation-delay:.05s}.hero .sub.load{animation-delay:.75s}.hero .ctas.load{animation-delay:.95s}
}
/* Scroll-driven path (Chrome, Edge, Safari 26+). Everything is visible by default; these only
   animate from a start state, so a browser that skips them shows the finished page. */
@supports (animation-timeline:view()){
  @keyframes heroAway{to{transform:translateY(-70px);opacity:.25}}
  @keyframes ringAway{from{transform:scale(1.2)}to{transform:translateY(140px) scale(1.3)}}
  @keyframes wordInk{from{color:#C5CEDA}to{color:var(--ink)}}
  @keyframes reveal{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
  @keyframes zoomOut{from{transform:scale(1.22)}to{transform:scale(1)}}
  @keyframes slideL{from{transform:translateX(6%)}to{transform:translateX(-30%)}}
  @keyframes clipOpen{from{clip-path:inset(16% 12% 16% 12% round 6px)}to{clip-path:inset(0 0 0 0 round 6px)}}
  @keyframes ringGrow{from{transform:translateX(-10%) scale(.7);opacity:.3}to{transform:translateX(-10%) scale(1.12);opacity:1}}
  @media (prefers-reduced-motion:no-preference){
    .hero-inner{animation:heroAway linear both;animation-timeline:scroll(root);animation-range:0 760px}
    .glowfx{animation:ringAway linear both;animation-timeline:scroll(root);animation-range:0 900px}
    .stmt{view-timeline-name:--stmt}
    .stmt .sw{animation:wordInk linear both;animation-timeline:--stmt}
    .rv{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% cover 26%}
    .rv.d1{animation-range:entry 6% cover 30%}.rv.d2{animation-range:entry 12% cover 34%}.rv.d3{animation-range:entry 18% cover 38%}.rv.d4{animation-range:entry 24% cover 42%}
    .zoom img{animation:zoomOut linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
    .marq{animation:slideL linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .clip{animation:clipOpen linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    .ctaring{animation:ringGrow linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
  }
}
/* Fallback path (older iOS Safari, Firefox): page script adds html.io and toggles .in */
html.io .rv{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.io .rv.d1{transition-delay:.08s}html.io .rv.d2{transition-delay:.16s}html.io .rv.d3{transition-delay:.24s}html.io .rv.d4{transition-delay:.32s}
html.io .rv.in{opacity:1;transform:none}
html.io .zoom img{transform:scale(1.18);transition:transform 1.6s var(--ease)}
html.io .zoom.in img{transform:scale(1)}
html.io .clip{clip-path:inset(16% 12% 16% 12% round 6px);transition:clip-path 1.3s var(--ease)}
html.io .clip.in{clip-path:inset(0 0 0 0 round 6px)}
html.io .marq{transform:translateX(calc(6% - var(--mp,0) * 36%))}
html.io .glowfx{transform:translateY(calc(var(--sp,0) * 140px)) scale(calc(1.2 + var(--sp,0) * .1))}
html.io .hero-inner{transform:translateY(calc(var(--sp,0) * -70px));opacity:calc(1 - var(--sp,0) * .75)}
html.io .ctaring{transform:translateX(-10%) scale(.8);opacity:.4;transition:transform 1.6s var(--ease),opacity 1.6s}
html.io .ctaring.in{transform:translateX(-10%) scale(1.08);opacity:1}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .val-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .about-top,.svc-head,.founder,.faq-grid{grid-template-columns:minmax(0,1fr)}
  .svc-list li{grid-template-columns:44px minmax(0,1fr);gap:10px 12px;padding:24px 0}
  .svc-list p{grid-column:2}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-two{grid-template-columns:minmax(0,1fr);gap:48px}
  .f-cols{grid-template-columns:1fr 1fr}
  .menu-body{grid-template-columns:minmax(0,1fr);align-items:start;gap:44px}
  .ctaring{display:none}
}
@media (max-width:640px){
  .hn .bar,.menu .bar{padding:16px 20px}
  .hn.scrolled .bar{padding-top:12px;padding-bottom:12px}
  .logo{gap:11px}
  .logo svg{width:30px;height:30px}
  .logo .word{font-size:13px;letter-spacing:.32em;margin-right:-.32em}
  .hn .right{gap:20px}
  .hn .book{font-size:14px}
  .menu-btn{font-size:14px;gap:9px}
  .menu-btn svg{width:18px}
  .hero h1{font-size:38px;line-height:1.06}
  .hero{min-height:0}
  .hero-inner{padding:132px 20px 72px;gap:26px}
  .hero .sub{font-size:17px}
  .val-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .steps{grid-template-columns:minmax(0,1fr);gap:30px}
  .case-big{min-height:0;display:flex;flex-direction:column}
  .case-big .ph{position:relative;inset:auto;aspect-ratio:4/3}
  .case-big::before{display:none}
  .case-big{background:#13304F}
  .case-big .body{padding:26px 22px 30px}
  .case-big .lg{height:32px}
  .case-big .cap{top:14px;bottom:auto;right:12px}
  .micro .pill,.final .pill{width:100%;justify-content:center}
  .f-cols{grid-template-columns:minmax(0,1fr);gap:34px;padding:52px 0 40px}
  .legal{flex-direction:column}
  .m-side{grid-template-columns:minmax(0,1fr);gap:30px}
  .m-main a{font-size:44px}
  .m-grp.talk{order:-1}
  .hero .lbl{font-size:10.5px;letter-spacing:.08em}
  .menu-body{padding:20px 20px 44px}
}
@media (max-width:370px){
  .hn .book{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .pill,.pill .ar,.case-card .ph img,.m-main a{transition:none}
}

/* Nov 2026 restructure: intro photo, how-we-work wash, industries; no mono anywhere */
.lbl,.cap,.who span,.f-col h2,.f-brand .desc,.svc-list .n,.val .n{font-family:var(--sans);text-transform:none;letter-spacing:0}
.lbl{font-size:15px;font-weight:400;gap:12px}
.cap{font-size:13px}.who span{font-size:14px}.f-col h2,.f-brand .desc{font-size:14px;font-weight:400}
.about-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,7vw,112px);align-items:center}
.about-copy{display:grid;gap:30px;justify-items:start}
.about-copy .h2{max-width:11ch}
.about-ph{overflow:hidden;border-radius:6px;aspect-ratio:4/5;max-width:480px;justify-self:end;width:100%}
.about-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
@media (max-width:900px){.about-split{grid-template-columns:minmax(0,1fr)}.about-ph{justify-self:start}}
.how{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.how-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(40px,5vw,64px)}
.how-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.how-grid li{background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:clamp(24px,2.4vw,34px);display:grid;gap:14px;align-content:start;min-height:300px;transition:border-color .3s,transform .3s var(--ease)}
.how-grid li:hover{border-color:rgba(15,37,64,.35);transform:translateY(-4px)}
.how-grid .n{font-size:clamp(40px,4vw,56px);font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--green);margin-bottom:clamp(28px,4vw,64px)}
.how-grid h3{font-weight:400;font-size:clamp(22px,1.9vw,27px);letter-spacing:-.02em;line-height:1.15}
.how-grid p{font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.ind{padding-bottom:clamp(40px,5vw,72px)}
.ind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(40px,5vw,64px)}
.ind-card{display:grid;gap:14px;align-content:start;min-height:260px;padding:clamp(26px,2.6vw,38px);border-radius:6px;background:var(--paper-2);border:1px solid var(--rule);text-decoration:none;color:var(--ink);transition:background .3s,color .3s,transform .3s var(--ease)}
.ind-card h3{font-weight:400;font-size:clamp(22px,1.9vw,28px);letter-spacing:-.025em;line-height:1.12}
.ind-card p{font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:34ch}
.ind-card .go-i{margin-top:auto;padding-top:24px;font-size:15px;color:var(--green)}
.ind-card:hover{background:var(--ink);color:var(--on);transform:translateY(-4px)}
.ind-card:hover p{color:var(--on-2)}.ind-card:hover .go-i{color:var(--mint-2)}
.ind-card.alt{background:var(--paper)}
@media (max-width:1000px){.how-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ind-grid{grid-template-columns:minmax(0,1fr)}.ind-card{min-height:0}}
@media (max-width:640px){.how-grid{grid-template-columns:minmax(0,1fr)}.how-grid li{min-height:0}.how-grid .n{margin-bottom:8px;font-size:36px}.about-ph{aspect-ratio:4/3}}

/* statement: scroll ink-in, key phrases land in green */
.stmt-sec{padding:clamp(88px,10vw,150px) 0 0}
#about{padding-top:clamp(64px,8vw,120px)}
.stmt-sec .stmt{font-size:clamp(25px,2.7vw,40px);line-height:1.2;letter-spacing:-.025em;max-width:34ch;margin:0;padding:0;border:0}
html.ink-js .stmt .sw.k.on{color:var(--green)}
@supports (animation-timeline:view()){@keyframes wordInkK{from{color:#C5CEDA}to{color:var(--green)}}
@media (prefers-reduced-motion:no-preference){.stmt .sw.k{animation-name:wordInkK}}}
.stmt .sw.k{color:var(--green)}
.stmt-sec .stmt-2{display:block;margin-top:.9em}
@media (max-width:640px){.stmt-sec .stmt{font-size:27px;line-height:1.2}}

/* About sits on the pale wash so it separates from the statement; How we work flips to white with wash cards */
#about{background:var(--paper-2);border-top:1px solid var(--rule);padding-bottom:clamp(88px,10vw,150px)}
.stmt-sec{padding-bottom:clamp(96px,12vw,180px)}
.how{background:var(--paper);border-top:0}
.how-grid li{background:var(--paper-2)}

/* menu: centred, lighter */
.menu:focus{outline:none}
.menu-body{align-items:center;max-width:var(--max)}
@media (min-width:901px){.menu-body{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.m-main a{font-size:clamp(40px,5vw,72px)}.m-side{align-content:center}}
@media (max-width:900px){.menu-body{align-items:start}}

/* how we work: a timeline, not four boxes. The AI team step is the anchor. */
.how-line{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;border-top:1px solid var(--rule)}
.how-line::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(1)}
.how-line li{position:relative;display:grid;gap:12px;align-content:start;padding:28px 32px 36px 0}
.how-line li::before{content:"";position:absolute;left:0;top:-5px;width:1px;height:9px;background:var(--ink)}
.how-line .n{font-size:15px;color:var(--ink-3)}
.how-line .t{font-size:15px;color:var(--green);margin-top:clamp(20px,3vw,40px)}
.how-line h3{font-weight:300;font-size:clamp(25px,2.2vw,32px);letter-spacing:-.03em;line-height:1.08}
.how-line p{font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:30ch}
.how-line li.core{background:var(--ink);color:var(--on);padding:28px 28px 36px;margin:-1px 16px 0 -28px;border-radius:0 0 6px 6px}
.how-line li.core::before{display:none}
.how-line li.core .n{color:var(--on-3)}.how-line li.core .t{color:var(--mint-2)}.how-line li.core p{color:var(--on-2)}
@supports (animation-timeline:view()){@keyframes lineFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:no-preference){.how-line::before{animation:lineFill linear both;animation-timeline:view();animation-range:entry 20% cover 50%}}}
@media (max-width:1000px){.how-line{grid-template-columns:repeat(2,minmax(0,1fr))}.how-line li.core{margin:0 16px 0 -28px}}
@media (max-width:640px){
  .how-line{grid-template-columns:minmax(0,1fr);border-top:0;border-left:1px solid var(--rule);margin-left:4px}
  .how-line::before{display:none}
  .how-line li{padding:4px 0 36px 24px}
  .how-line li::before{left:-5px;top:12px;width:9px;height:1px}
  .how-line .t{margin-top:4px}
  .how-line li.core{margin:0 0 28px -1px;padding:24px;border-radius:0 6px 6px 0}
}

/* statement entrance: each word rises, sharpens and inks in as you scroll */
.stmt .sw{display:inline-block}
@supports (animation-timeline:view()){
  @keyframes wordRise{from{opacity:.08;transform:translateY(.45em);filter:blur(8px);color:#C5CEDA}60%{filter:blur(0)}to{opacity:1;transform:none;filter:none;color:var(--ink)}}
  @keyframes wordRiseK{from{opacity:.08;transform:translateY(.45em);filter:blur(8px);color:#C5CEDA}60%{filter:blur(0)}to{opacity:1;transform:none;filter:none;color:var(--green)}}
  @media (prefers-reduced-motion:no-preference){.stmt .sw{animation-name:wordRise}.stmt .sw.k{animation-name:wordRiseK}}
}
html.ink-js .stmt .sw{opacity:.08;transform:translateY(.45em);filter:blur(8px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease),color .7s}
html.ink-js .stmt .sw.on{opacity:1;transform:none;filter:none}

/* pinned statement: holds mid-screen while the words fill in, ring of light turns behind it */
.stmt-pin{position:relative;height:175vh;background:var(--paper);view-timeline-name:--pin}
.stmt-stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.stmt-stick .wrap{position:relative;width:100%}
.stmt-pin .stmt{font-weight:300;font-size:clamp(26px,3vw,46px);line-height:1.2;letter-spacing:-.028em;max-width:30ch;margin:0;padding:0;border:0;color:var(--ink)}
.pin-ring{position:absolute;width:min(1100px,120vw);aspect-ratio:1;right:-28%;top:50%;margin-top:calc(min(1100px,120vw) / -2);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at center,rgba(255,255,255,0) 54%,rgba(127,196,166,.30) 61%,rgba(86,150,214,.16) 65.5%,rgba(255,255,255,0) 71%);filter:blur(10px);opacity:.9}
@supports (animation-timeline:view()){
  @keyframes pinRing{from{transform:rotate(-20deg) scale(.82);opacity:.35}to{transform:rotate(25deg) scale(1.08);opacity:1}}
  @media (prefers-reduced-motion:no-preference){
    .stmt-pin .sw{animation:wordRise linear both;animation-timeline:--pin}
    .stmt-pin .sw.k{animation-name:wordRiseK}
    .pin-ring{animation:pinRing linear both;animation-timeline:--pin;animation-range:contain 0% contain 100%}
  }
}
@media (max-width:640px){.stmt-pin{height:165vh}.stmt-pin .stmt{font-size:27px;line-height:1.22}.pin-ring{right:-70%}}
@media (prefers-reduced-motion:reduce){.stmt-pin{height:auto}.stmt-stick{position:relative;height:auto;padding:120px 0}}

/* phones: no pin, no ring, no scroll-linked hero motion (iOS toolbar resizes make them shake) */
@media (max-width:640px){
  .stmt-pin{height:auto}
  .stmt-stick{position:relative;height:auto;padding:84px 0 24px;overflow:visible}
  .pin-ring{display:none}
  .hero-inner,.glowfx{animation:none!important}
  html.io .hero-inner{transform:none;opacity:1}
  html.io .glowfx{transform:scale(1.2)}
}
@supports (animation-timeline:view()){@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  .stmt-pin .sw{animation-timeline:view()!important;animation-range:entry 0% cover 30%!important}
}}

/* hero always fills the screen, any size. svh = the small viewport, so the iPhone toolbar never resizes it */
.hero{min-height:100vh;min-height:100svh}
@media (max-width:640px){.hero{min-height:100vh;min-height:100svh}}

/* statement: no pin, no ring, no blur. Scrolls normally; each line rises and inks in as it comes up the screen */
.stmt-pin{height:auto}
.stmt-stick{position:relative;height:auto;overflow:visible;padding:clamp(96px,11vw,160px) 0 clamp(72px,8vw,120px)}
.pin-ring{display:none}
@supports (animation-timeline:view()){
  @keyframes wordUp2{from{opacity:.12;transform:translateY(.35em);color:#C5CEDA}to{opacity:1;transform:none;color:var(--ink)}}
  @keyframes wordUp2K{from{opacity:.12;transform:translateY(.35em);color:#C5CEDA}to{opacity:1;transform:none;color:var(--green)}}
  @media (prefers-reduced-motion:no-preference){
    .stmt-pin .sw{animation:wordUp2 linear both!important;animation-timeline:view()!important;animation-range:entry 0% cover 32%!important}
    .stmt-pin .sw.k{animation-name:wordUp2K!important}
  }
}
html.ink-js .stmt .sw{filter:none!important}

/* section 2 (option D): split statement + photo, emphasis by colour only, reads instantly */
.s2{background:var(--paper)}
.s2-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(40px,7vw,104px);align-items:center}
.s2-stm{margin:0;font-weight:300;font-size:clamp(26px,2.9vw,42px);line-height:1.2;letter-spacing:-.03em;text-wrap:pretty}
.s2-copy{display:grid;gap:28px}.s2-name{margin:0;font-weight:500;font-size:17px;color:var(--ink)}
.s2-stm .q{color:var(--ink)}.s2-stm .b{color:var(--ink)}.s2-stm .g{color:var(--green)}
.s2-fig{margin:0;justify-self:end;width:100%;max-width:440px}
.s2-ph{overflow:hidden;border-radius:6px;aspect-ratio:4/5}
.s2-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.s2-fig figcaption{margin-top:12px;font-size:14px;color:var(--ink-3)}
@media (max-width:900px){.s2-grid{grid-template-columns:minmax(0,1fr)}.s2-fig{justify-self:start;max-width:none}.s2-ph{aspect-ratio:4/3}.s2-ph img{object-position:50% 25%}}

/* About photo toned into the palette: less orange, light navy tint, crop lifts the tarp out */
#about .about-ph{position:relative}
#about .about-ph img{object-position:50% 40%}


/* case studies, light: pale wash, Peacock as photo + white text panel, cards with navy text */
.light-cases{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);color:var(--ink)}
.light-cases .lbl{color:var(--ink-3)}
.light-cases .case-big{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);min-height:0;background:var(--paper);color:var(--ink);border:1px solid var(--rule)}
.light-cases .case-big::before{display:none}
.light-cases .case-big .ph{position:relative;inset:auto;z-index:0;min-height:clamp(360px,36vw,520px)}
.light-cases .case-big .body{align-content:center;max-width:none;padding:clamp(28px,4vw,56px)}
.light-cases .case-big .lg{filter:brightness(0) saturate(100%) invert(12%) sepia(35%) saturate(1800%) hue-rotate(190deg) brightness(.9)}
.light-cases .case-big h3{color:var(--ink)}
.light-cases .metric{color:var(--ink-2)}.light-cases .metric b{color:var(--green)}
.light-cases .go{color:var(--green)}
.light-cases .case-big:hover .go,.light-cases .case-big:hover h3{color:var(--green)}
.light-cases .case-big .cap{left:16px;right:auto}
.light-cases .case-card{color:var(--ink)}
.light-cases .case-card .m2{color:var(--ink-2)}.light-cases .case-card .m2 b{color:var(--green)}
.light-cases .case-card:hover h3{color:var(--green)}
@media (max-width:900px){.light-cases .case-big{grid-template-columns:minmax(0,1fr)}.light-cases .case-big .ph{min-height:0;aspect-ratio:4/3}}
@media (max-width:640px){.light-cases .case-big{background:var(--paper)}}

.light-cases .ph img{filter:saturate(.62) contrast(.97) brightness(1.03)}

/* proposal: manufacturing band + playground */
.mfg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,104px);align-items:center}
.mfg-copy{display:grid;gap:26px;justify-items:start}
.mfg-copy .h2{max-width:14ch}
.mfg-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.mfg-alt{font-size:15px;color:var(--green)}
.mfg-list{list-style:none;border-top:1px solid var(--ink)}
.mfg-list li{border-bottom:1px solid var(--rule)}
.mfg-list a{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 4px;text-decoration:none;color:var(--ink);transition:padding .3s var(--ease),color .25s}
.mfg-list span{display:grid;gap:6px}
.mfg-list b{font-weight:400;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.02em}
.mfg-list span{font-size:15px;line-height:1.55;color:var(--ink-2)}
.mfg-list i{font-style:normal;color:var(--green);font-size:18px;transition:transform .3s var(--ease)}
.mfg-list a:hover{padding-left:12px}.mfg-list a:hover b{color:var(--green)}.mfg-list a:hover i{transform:translateX(4px)}
.pg-sec{padding-top:0}
.pg-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,80px);align-items:center;background:#EEF6F1;border-radius:6px;padding:clamp(32px,5vw,72px)}
.pg-copy{display:grid;gap:24px;justify-items:start}
.pg-copy .h2{font-size:clamp(30px,3.2vw,46px)}
.pg-list{list-style:none;border-top:1px solid rgba(15,37,64,.2)}
.pg-list li{padding:14px 0;border-bottom:1px solid rgba(15,37,64,.12);font-size:17px;color:var(--ink)}
@media (max-width:900px){.mfg-grid,.pg-card{grid-template-columns:minmax(0,1fr)}}

/* proposal v2 */
.mp{background:var(--paper-2);border:1px solid var(--rule);display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:clamp(22px,2.6vw,34px)}
.mp-n{font-weight:300;font-size:clamp(34px,3.6vw,52px);letter-spacing:-.04em;line-height:1;color:var(--ink)}
.mp-l{font-size:15px;color:var(--ink-2)}
.mp-logo{position:absolute;top:clamp(20px,2.4vw,30px);right:clamp(20px,2.4vw,30px);height:30px!important;width:auto!important;max-width:110px;object-fit:contain}
.light-cases .case-two .mp{background:#fff}
.pg-list li{display:grid;gap:4px;padding:14px 0;font-size:15px;color:var(--ink-2)}
.pg-list b{font-weight:400;font-size:17px;color:var(--ink)}

/* footer v2: solid deeper navy, contact-led, three short columns, quiet legal row */
.ft2{background:var(--night-2);position:relative;z-index:1;border-top:0}
.ft-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px 48px;padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--hair)}
.ft-brand{display:grid;gap:18px}
.ft-brand p{margin:0;font-size:15px;color:var(--on-2);max-width:34ch}
.ft-contact{display:grid;gap:8px;justify-items:start}
.ft-contact span{font-size:14px;color:var(--on-3)}
.ft-mail{font-weight:300;font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;color:var(--on);text-decoration:none;transition:color .25s}
.ft-mail:hover{color:var(--mint)}
.ft-book{font-size:15px;color:var(--mint-2);text-decoration:none}
.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:36px 40px;padding:clamp(40px,5vw,56px) 0}
.ft-cols h2{font-weight:400;font-size:14px;color:var(--on-3);margin:0 0 14px}
.ft-cols nav a{display:block;width:fit-content;font-size:15px;color:var(--on-2);text-decoration:none;padding:5px 0;transition:color .25s}
.ft-cols nav a:hover{color:var(--mint)}
.ft-accred{display:flex;gap:10px;align-items:flex-start}
.ft-accred a{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:#fff;border-radius:6px;padding:6px}
.ft-accred img{max-height:44px;width:auto}
.ft-legal span:last-child{display:flex;flex-wrap:wrap;gap:6px 20px}
.ft-legal a{margin-left:0!important}
@media (max-width:900px){.ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.ft-accred{grid-column:1/-1}}
@media (max-width:520px){.ft-cols{gap:28px 20px}.ft-cols nav a{font-size:14.5px}}

/* hero call to action: a proper large pill (Max, 8 Nov) */
.hero .ctas .pill{min-height:60px;padding:0 34px;font-size:18px;font-weight:500;gap:14px;background:#fff;color:var(--night)}
.hero .ctas .pill .ar{font-size:20px}
@media (max-width:640px){.hero .ctas{width:100%}.hero .ctas .pill{width:100%;justify-content:center;min-height:56px;font-size:17px}}

/* client logo strip under the hero (same logos as /ai-agency-uk) */
.trust{background:#fff;border-bottom:1px solid var(--rule)}
.trust-in{display:flex;justify-content:center;padding-top:36px;padding-bottom:36px}
.trust-k{font-size:15px;font-weight:400;color:var(--ink-3);white-space:nowrap}
.logos{display:flex;align-items:center;justify-content:center;gap:24px clamp(40px,5vw,72px);flex-wrap:wrap}
.logos img{display:block;width:auto;filter:brightness(0);opacity:.5}
.logos .lg-peacock{height:44px}.logos .lg-apsis{height:34px}.logos .lg-m2{height:40px}.logos .lg-replay{height:22px}.logos .lg-pacific{height:26px}
@media (max-width:640px){.trust-in{padding-top:28px;padding-bottom:28px}.logos{justify-content:center;gap:22px 30px}.logos .lg-peacock{height:36px}.logos .lg-apsis{height:28px}.logos .lg-m2{height:34px}.logos .lg-replay{height:18px}.logos .lg-pacific{height:21px}}

/* 8 Nov: About as a 50/50 navy split with a full-bleed photo (Max's preferred version) */
#about.about-sec{background:var(--night);border-top:0;padding:0}
.about-nv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(640px,60vw,860px);color:var(--on)}
.about-nv-copy{display:grid;gap:28px;justify-items:start;align-content:center;padding:clamp(88px,10vw,140px) clamp(32px,6vw,96px) clamp(88px,10vw,140px) max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)))}
.about-nv .h2{max-width:11ch;color:#fff}
.about-nv .lbl{color:var(--on-3)}
.about-pull{font-weight:300;font-size:clamp(22px,2.1vw,30px);line-height:1.25;letter-spacing:-.02em;color:var(--mint);max-width:20ch}
.about-body{font-size:clamp(16.5px,1.25vw,18px);line-height:1.65;color:var(--on-2);max-width:52ch}
.about-nv-ph{position:relative;overflow:hidden}
.about-nv-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
@media (max-width:900px){.about-nv{grid-template-columns:minmax(0,1fr);min-height:0}.about-nv-copy{padding:72px var(--gut) 44px}.about-nv-ph{aspect-ratio:4/3}}
/* header takes the colour of the section beneath it (Max, 8 Nov): set by JS as --hn-bg; light text on dark, navy on light */
.hn.scrolled{background:var(--hn-bg,rgba(15,37,64,.96))!important;border-bottom-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.hn.on-light{color:var(--ink)!important}
.hn.on-light .book,.hn.on-light .menu-btn,.hn.on-light .logo{color:var(--ink)}
.hn.on-light .logo .word b{color:var(--ink)}
.hn.on-light .logo svg rect{fill:#0F2540}
.hn.on-light .logo svg path{stroke:#C7E2D0}
.hn{transition:background-color .35s,border-color .35s,padding .35s,color .35s,box-shadow .35s}
.how-line p{font-size:17px}
#industries{background:var(--paper-2);border-top:1px solid var(--rule)}
#industries .mfg-grid{align-items:start}
#work.light-cases{background:var(--paper);border-top:0}
#work.light-cases .case-big{background:var(--paper-2);border-color:var(--paper-2)}
#work .mp{background:var(--paper-2)!important;border-color:var(--paper-2)}

/* 8 Nov: Playground as a navy band, hairline list instead of cards */
.pg-nv{position:relative;overflow:hidden;background:var(--night);color:var(--on);padding:clamp(96px,11vw,150px) 0}
.pg-glow{position:absolute;width:760px;height:760px;right:-220px;top:-260px;border-radius:50%;background:var(--mint);opacity:.14;filter:blur(110px);pointer-events:none}
.pg-nv-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,104px);align-items:center}
.pg-nv-copy{display:grid;gap:26px;justify-items:start}
.pg-nv .lbl{color:var(--on-3)}
.pg-nv .h2{color:#fff;max-width:12ch}
.pg-body{font-size:clamp(16.5px,1.25vw,18px);line-height:1.65;color:var(--on-2);max-width:52ch}
.pg-free{font-size:15px;color:var(--mint)}
.pg-cta{background:#fff;color:var(--night);font-weight:500;min-height:60px;padding:0 34px;font-size:18px;gap:14px}
.pg-cta:hover{background:#fff;color:var(--night)}
.pg-nv-list{list-style:none;border-top:1px solid rgba(238,242,240,.5)}
.pg-nv-list li{display:grid;gap:6px;padding:24px 4px;border-bottom:1px solid rgba(238,242,240,.14)}
.pg-nv-list b{font-weight:400;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.02em;color:#fff}
.pg-nv-list span{font-size:15.5px;line-height:1.55;color:var(--on-2)}
@media (max-width:900px){.pg-nv-grid{grid-template-columns:minmax(0,1fr)}.pg-nv{padding:72px 0}}
@media (max-width:640px){.pg-cta{width:100%;justify-content:center;min-height:56px;font-size:17px}}

/* 8 Nov: case studies tidy-up: heading on one line, no green, photo cards instead of metric squares */
#work .h2{max-width:none}
#work.light-cases .metric b{color:var(--ink)}
#work.light-cases .go{color:var(--ink);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;justify-self:start}
#work.light-cases .case-big:hover .go,#work.light-cases .case-big:hover h3{color:var(--ink)}
#work .cc{display:flex;flex-direction:column;gap:0;background:var(--paper-2);border-radius:6px;overflow:hidden;color:var(--ink)}
#work .cc .ph{border-radius:0;aspect-ratio:16/9}
#work .cc .ph img{object-position:50% 45%}
#work .cc-body{display:grid;gap:14px;padding:clamp(24px,2.6vw,36px);justify-items:start}
#work .cc-lg{height:30px;width:auto;filter:brightness(0) saturate(100%) invert(12%) sepia(35%) saturate(1800%) hue-rotate(190deg) brightness(.9)}
#work .cc h3{color:var(--ink);font-size:clamp(22px,1.9vw,27px)}
#work .cc p{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:46ch}
#work .cc:hover h3{color:var(--ink)}

/* 8 Nov round: mobile tidy, pain-led industries, text-only case cards */
@media (max-width:900px){
  .s2-fig{display:block;width:100%;max-width:none;justify-self:stretch}
  .s2-ph{aspect-ratio:4/5!important;width:100%}
  .s2-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%!important}
  .about-nv-ph{display:none}
}
@media (max-width:640px){.trust-in{padding-top:24px;padding-bottom:24px}.logos{flex-wrap:nowrap;justify-content:space-between;gap:12px;width:100%}.logos .lg-peacock{height:26px}.logos .lg-apsis{height:20px}.logos .lg-m2{height:24px}.logos .lg-replay{height:13px}.logos .lg-pacific{height:15px}}
.mfg-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:6px}
.mfg-links a{font-size:15px;color:var(--ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px}
.mfg-k{font-size:15px;color:var(--ink-3);margin-bottom:14px}
.pain-list{list-style:none;border-top:1px solid var(--ink)}
.pain-list li{padding:20px 4px;border-bottom:1px solid var(--rule);font-size:clamp(18px,1.5vw,21px);line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
#work .cc{min-height:0}
#work .cc-body{align-content:start;height:100%}
#work .cc .go{margin-top:auto}

/* 8 Nov: FAQ chevron instead of plus circles */
.faq .chev{flex:none;color:var(--ink-3);transition:transform .3s var(--ease),color .3s}
.faq details[open] .chev{transform:rotate(180deg);color:var(--ink)}
.faq summary:hover .chev{color:var(--ink)}

/* 8 Nov: button style A (Max): squared, solid primary, squared outline secondary, arrow pushed right */
.pill{border-radius:3px!important;min-height:56px;padding:0 24px!important;gap:40px!important;font-size:17px!important;justify-content:space-between}
.pill:hover{transform:none}
.pill.ink-ghost{border-color:rgba(15,37,64,.35)}
.pill.ghost{border-color:rgba(238,242,240,.4)}
.pg-cta{min-height:56px!important}
@media (max-width:640px){.pill{width:100%}}


/* 8 Nov: Industries rewrite: what clients share, broad starting areas, no underlined links */
.ind-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,96px);align-items:end;margin-bottom:clamp(56px,6vw,80px)}
.ind-head .lead{max-width:none}
.ind-block{margin-bottom:0}
.ind-share p{font-size:clamp(20px,1.9vw,26px)!important;line-height:1.32!important}
.ind-k{font-size:clamp(19px,1.6vw,22px);font-weight:400;color:var(--ink);margin-bottom:26px}
.ind-share{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,48px)}
.ind-share li{display:grid;gap:16px;align-content:start;border-top:1px solid var(--ink);padding-top:22px}
.ind-n{font-size:15px;color:var(--green)}
.ind-share p,.ind-areas b{font-size:clamp(19px,1.6vw,22px);line-height:1.38;letter-spacing:-.015em;color:var(--ink);font-weight:300}
.ind-areas{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,2.8vw,40px)}
.ind-areas li{display:grid;gap:12px;align-content:start;border-top:1px solid var(--ink);padding-top:22px}
.ind-areas b{font-weight:400}
.ind-areas p{font-size:16.5px;line-height:1.55;color:var(--ink-2)}
.ind-catch{margin-top:34px;font-size:clamp(18px,1.5vw,20px);line-height:1.5;color:var(--ink)}
.ind-cta{justify-self:start}
@media (max-width:1100px){.ind-areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.ind-head,.ind-share{grid-template-columns:minmax(0,1fr)}.ind-head{gap:18px}.ind-share{gap:0}.ind-share li{grid-template-columns:28px minmax(0,1fr);gap:12px;padding:18px 0;border-top-color:var(--rule)}.ind-share li:first-child{border-top-color:var(--ink)}.ind-share p{font-size:18px}.ind-n{padding-top:3px;font-size:14px}}
@media (max-width:640px){.ind-areas{grid-template-columns:minmax(0,1fr);gap:0}.ind-areas li{padding:18px 0;gap:6px;border-top-color:var(--rule)}.ind-areas li:first-child{border-top-color:var(--ink)}.ind-areas b{font-size:19px}.ind-areas p{font-size:16px}.ind-catch{margin-top:20px;font-size:18px}.ind-cta{width:100%;gap:16px!important;padding:14px 20px!important;white-space:normal;text-align:left;font-size:16px!important}}

/* 8 Nov: Playground on navy with a still brand gradient, Playground logo instead of the label */
.pg-grad{position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(60% 75% at 92% 8%,rgba(199,226,208,.30),rgba(199,226,208,0) 70%),
 radial-gradient(55% 70% at 78% 95%,rgba(67,112,90,.55),rgba(67,112,90,0) 70%),
 radial-gradient(45% 60% at 8% 100%,rgba(67,112,90,.25),rgba(67,112,90,0) 70%)}
.pg-logo{height:clamp(36px,3.2vw,46px);width:auto;display:block}
.pg-cta{border-radius:3px!important;justify-content:space-between;gap:40px!important;padding:0 24px!important;min-height:56px;font-size:17px!important}
@media (max-width:900px){.pg-grad{background:
 radial-gradient(90% 45% at 100% 0%,rgba(199,226,208,.26),rgba(199,226,208,0) 70%),
 radial-gradient(90% 45% at 0% 100%,rgba(67,112,90,.5),rgba(67,112,90,0) 70%)}}

/* 8 Nov v2: closing section bookends the hero: still brand gradient, statement, founder portrait */
.final .ctaring{display:none}
.final{background:var(--night)}
.fin-grad{position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(55% 80% at 100% 100%,rgba(199,226,208,.28),rgba(199,226,208,0) 70%),
 radial-gradient(60% 80% at 75% 0%,rgba(67,112,90,.5),rgba(67,112,90,0) 70%),
 radial-gradient(50% 70% at 0% 100%,rgba(67,112,90,.22),rgba(67,112,90,0) 70%)}
.fin{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(48px,8vw,140px);align-items:end;padding-top:clamp(110px,13vw,200px);padding-bottom:clamp(96px,11vw,170px)}
.fin-copy{display:grid;gap:clamp(36px,4vw,56px);justify-items:start}
.fin h2{font-weight:300;font-size:clamp(44px,6.4vw,104px);line-height:1;letter-spacing:-.05em;color:#fff;max-width:13ch;margin:0}
.fin h2 span{display:block;color:var(--mint)}
.fin-btn{background:#fff!important;color:var(--night)!important;font-weight:500;justify-content:space-between!important}
.fin-btn:hover{background:var(--mint)!important}
.fin-max{margin:0;display:grid;gap:16px}
.fin-max img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:6px;display:block}
.fin-max figcaption{display:grid;gap:2px}
.fin-max b{font-weight:400;font-size:17px;color:#fff}
.fin-max figcaption span{font-size:15px;color:var(--on-2)}
.ft2{background:var(--night-2)!important}
.ft-cols2{grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr))!important;padding-top:clamp(56px,6vw,80px)!important}
.ft-cols2 .ft-brand{display:grid;gap:18px;align-content:start}
.ft-cols2 .ft-brand p{margin:0;font-size:15px;line-height:1.6;color:var(--on-2);max-width:30ch}
.ft-place{display:block;font-size:15px;color:var(--on-3);padding:5px 0}
@media (max-width:900px){.fin{grid-template-columns:minmax(0,1fr);gap:48px;padding-top:96px;padding-bottom:88px}.fin-max{grid-template-columns:120px minmax(0,1fr);align-items:end;gap:18px}.ft-cols2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.ft-cols2 .ft-brand{grid-column:1/-1}}
@media (max-width:640px){.fin-btn{width:100%}.fin-copy{justify-items:stretch}}

/* 8 Nov: case studies B: photo-led Peacock feature and navy cards, with the brand green gradient */
.cs2 .head{margin-bottom:clamp(36px,4vw,56px)}
.cs-feat{position:relative;display:block;min-height:clamp(460px,44vw,640px);border-radius:6px;overflow:hidden;background:var(--night);color:#fff;text-decoration:none}
.cs-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;transition:transform 1.2s var(--ease)}
.cs-feat:hover .cs-ph{transform:scale(1.03)}
.cs-shade{position:absolute;inset:0;background:
 radial-gradient(70% 90% at 0% 100%,rgba(67,112,90,.55),rgba(67,112,90,0) 70%),
 linear-gradient(90deg,rgba(15,37,64,.94) 0%,rgba(15,37,64,.72) 42%,rgba(15,37,64,0) 76%)}
.cs-body{position:absolute;left:clamp(28px,4.4vw,64px);bottom:clamp(28px,4.4vw,64px);max-width:560px;display:grid;gap:22px;justify-items:start}
.cs-lg{height:40px;width:auto;filter:brightness(0) invert(1)}
.cs-feat h3{font-weight:300;font-size:clamp(28px,3vw,44px);line-height:1.08;letter-spacing:-.03em;color:#fff}
.cs-metric{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.cs-metric b{font-weight:300;font-size:clamp(24px,2.2vw,30px);color:var(--mint)}
.cs-metric span{font-size:16px;color:var(--on-2)}
.cs-go{font-size:16px;color:var(--mint)}
.cs-feat .cs-go{color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:4px}
.cs-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.cs-card{position:relative;overflow:hidden;display:grid;gap:18px;align-content:start;justify-items:start;padding:clamp(28px,3vw,44px);border-radius:6px;color:#fff;text-decoration:none;background:
 radial-gradient(80% 110% at 100% 0%,rgba(67,112,90,.6),rgba(67,112,90,0) 70%),
 radial-gradient(60% 80% at 100% 0%,rgba(199,226,208,.16),rgba(199,226,208,0) 70%),var(--night)}
.cs-card + .cs-card{background:
 radial-gradient(80% 110% at 0% 100%,rgba(67,112,90,.6),rgba(67,112,90,0) 70%),
 radial-gradient(60% 80% at 0% 100%,rgba(199,226,208,.16),rgba(199,226,208,0) 70%),var(--night)}
.cs-lg-ap{height:34px}.cs-lg-m2{height:40px}
.cs-card h3{font-weight:300;font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:-.02em;color:#fff}
.cs-card p{font-size:16px;line-height:1.6;color:var(--on-2);max-width:46ch}
.cs-card .cs-go{margin-top:8px}
.cs-card:hover .cs-go,.cs-feat:hover .cs-go{opacity:.85}
@media (max-width:900px){.cs-two{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:16px}
 .cs-feat{min-height:0;display:grid}.cs-ph{position:relative;height:240px}.cs-shade{display:none}
 .cs-body{position:relative;left:auto;bottom:auto;padding:28px 24px;background:radial-gradient(90% 70% at 0% 100%,rgba(67,112,90,.5),rgba(67,112,90,0) 70%),var(--night)}
 .cs-lg{height:32px}.cs-lg-ap{height:28px}}
@media (max-width:640px){.cs2 .head{flex-direction:column;align-items:flex-start}.cs-all{display:none}}

/* 8 Nov: Playground goes light (case studies are dark): mint panel on the pale blue, Playground logo, soft green in the corner */
.pg-lt{background:#fff!important;color:var(--ink)!important;padding:clamp(80px,9vw,130px) 0!important}
.pg-lt .pg-grad{display:none}
.pg-panel{position:relative;overflow:hidden;border-radius:6px;background:
 radial-gradient(60% 90% at 100% 0%,rgba(67,112,90,.18),rgba(67,112,90,0) 70%),
 #E8F3EB;padding:clamp(40px,6vw,88px)}
.pg-lt .h2{color:var(--ink)!important}
.pg-lt .pg-body{color:var(--ink-2)}
.pg-lt .pg-free{color:var(--green)}
.pg-lt .pg-cta{background:var(--night)!important;color:#fff!important}
.pg-lt .pg-cta:hover{background:var(--green)!important}
.pg-lt .pg-nv-list{border-top-color:var(--ink)}
.pg-lt .pg-nv-list li{border-bottom-color:rgba(15,37,64,.14)}
.pg-lt .pg-nv-list b{color:var(--ink)}
.pg-lt .pg-nv-list span{color:var(--ink-2)}
@media (max-width:640px){.pg-panel{padding:36px 22px}.pg-lt .wrap{padding-left:16px;padding-right:16px}}

/* 8 Nov: closing + footer back to the ring theme (Max), new words, square button, shown at 90% scale on desktop */
.fin3 .ctaring{display:block}
.fin3 .inner{gap:clamp(36px,4vw,52px)!important}
.fin3 .inner h2{font-size:clamp(44px,6vw,92px)!important;max-width:14ch!important;line-height:1!important}
.fin3 .inner h2 span{display:block;color:var(--mint)}
.fin3 .foot{background:transparent}
.fin3 .fin-btn{background:#fff!important;color:var(--night)!important;font-weight:500;justify-content:space-between!important}
.fin3 .fin-btn:hover{background:var(--mint)!important}
.fin3 .f-col .pill.light{border-radius:3px!important;gap:24px!important;min-height:44px;font-size:15px!important;padding:0 18px!important}
@media (min-width:901px){.fin3{zoom:.9}}
@media (max-width:640px){.fin3 .fin-btn{width:100%}}

/* Nov 2026 sub-pages: shared hero, section and heading patterns (About, Services, Case studies, Contact...) */
.sp-hero{position:relative;overflow:hidden;background:var(--night);color:var(--on)}
.sp-hero .grad{position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 90% at 100% 0%,rgba(67,112,90,.55),rgba(67,112,90,0) 70%),radial-gradient(40% 70% at 85% 100%,rgba(199,226,208,.16),rgba(199,226,208,0) 70%)}
.sp-hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px 64px;align-items:end;padding-top:clamp(150px,16vw,220px);padding-bottom:clamp(64px,8vw,112px)}
.sp-k{font-size:15px;font-weight:400;color:var(--ink-3);display:flex;gap:12px;align-items:baseline;margin-bottom:22px}
.sp-k .n{opacity:.6}
.sp-hero .sp-k,.sp-dark .sp-k{color:var(--on-3)}
.sp-hero h1{font-weight:300;font-size:clamp(44px,6vw,92px);line-height:1;letter-spacing:-.045em;max-width:14ch;text-wrap:balance}
.sp-hero h1 span{color:var(--mint)}
.sp-hero p{font-size:clamp(16.5px,1.3vw,18px);line-height:1.65;color:var(--on-2);max-width:48ch}
.sp-sec{padding:clamp(72px,9vw,136px) 0}
.sp-sec.wash{background:var(--paper-2)}
.sp-dark{background:var(--night);color:var(--on)}
.sp-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(36px,4.4vw,64px)}
.sp-h2{font-weight:300;font-size:clamp(32px,3.9vw,56px);line-height:1.04;letter-spacing:-.04em;max-width:16ch;text-wrap:balance}
.sp-head p{font-size:clamp(16px,1.2vw,18px);line-height:1.65;color:var(--ink-2);max-width:52ch}
.sp-dark .sp-head p{color:var(--on-2)}
@media (max-width:900px){.sp-hero .wrap,.sp-head{grid-template-columns:minmax(0,1fr)}}

/* Playground lockup (replaces the small image logo): mark, a large name, and a Free tag */
.pg-lock{display:flex;align-items:center;gap:16px}
.pg-lock svg{width:52px;height:52px;flex:none}
.pg-name{display:grid;line-height:1}
.pg-name b{font-weight:400;font-size:clamp(28px,2.6vw,36px);letter-spacing:-.03em;color:var(--ink)}
.pg-name small{font-size:14px;color:var(--ink-3);margin-top:6px}
.pg-free-tag{align-self:flex-start;margin-left:4px;font-size:13px;font-weight:500;color:var(--green);background:#fff;border:1px solid rgba(67,112,90,.35);border-radius:3px;padding:4px 9px}
.cs-card .cs-k{font-size:14px;color:var(--mint)}
/* Playground band, simplified (8 Nov): label instead of lockup, button never animates */
.pg-k{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:400;color:var(--ink-3);margin:0}
.pg-k .pg-free-tag{margin:0;align-self:center}
.pg-nv-copy .pg-cta{opacity:1!important;transform:none!important;animation:none!important;margin-top:8px}

/* 8 Nov: closing Book a call keeps its natural width on phones */
@media (max-width:640px){.fin3 .fin-btn,.fin3 .rv .pill.fin-btn{width:auto!important}}
@media (max-width:640px){.fin3 .f-col .pill.light{width:auto!important}}
.ind-more{margin-top:clamp(36px,4vw,56px);display:flex;flex-wrap:wrap;gap:12px}

/* Client reviews */
.rvw{background:var(--night);color:var(--on)}
.rvw .lbl{color:var(--on-3)}
.rvw .h2{color:#fff}
.rvw-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap;margin-bottom:clamp(36px,4vw,56px)}
.rv-st{display:inline-flex;gap:3px;color:#E9C46A}.rv-st svg{width:16px;height:16px;fill:currentColor}
.rvw-g{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--on-2);font-size:14px;line-height:1.35}
.rvw-g b{display:block;font-weight:500;font-size:16px;color:#fff}.rvw-g:hover b{color:var(--mint)}
.rvw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rvw-q{margin:0;display:grid;gap:22px;align-content:start;padding:clamp(26px,3vw,40px);border:1px solid var(--hair);border-radius:6px;background:rgba(238,242,240,.03)}
.rvw-q blockquote{margin:0}
.rvw-q blockquote p{font-weight:300;font-size:clamp(17px,1.3vw,19px);line-height:1.55;letter-spacing:-.01em;color:#fff}
.rvw-q figcaption{font-size:15px;color:var(--on-2);line-height:1.45}
.rvw-q figcaption b{display:block;font-weight:500;color:var(--mint)}
@media (max-width:900px){.rvw-grid{grid-template-columns:minmax(0,1fr)}}

/* Homepage about, text only */
#about.about-sec.ab2{padding:clamp(96px,10vw,148px) 0;color:var(--ink);background:var(--paper-2)}
.ab2 .about-pull{color:var(--green)}.ab2 .about-body{color:var(--ink-2)}
.ab2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(48px,7vw,112px);align-items:start}
.ab2-l,.ab2-r{display:grid;gap:28px;justify-items:start;align-content:start}
.ab2 .h2{max-width:11ch;color:var(--ink)}.ab2 .lbl{color:var(--ink-3)}
.ab2 .about-body{margin-top:clamp(0px,4vw,58px)}
.ab2-proof{list-style:none;width:100%;border-top:1px solid var(--hair)}
.ab2-proof li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--hair)}
.ab2-proof b{font-weight:400;font-size:clamp(19px,1.6vw,23px);color:#fff;letter-spacing:-.015em}
.ab2-proof span{font-size:15px;color:var(--on-2);text-align:right}
@media (max-width:900px){.ab2-grid{grid-template-columns:minmax(0,1fr)}.ab2 .about-body{margin-top:0}.ab2-proof li{flex-direction:column;gap:4px}.ab2-proof span{text-align:left}}

/* LCP: hero intro paints immediately, then settles */
@keyframes fadeUpSoft{from{opacity:.02;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .sub.load{animation-name:fadeUpSoft;animation-delay:.25s}