@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Doto:wght@700..900&display=swap");
:root{
  --ink:#0A0A0A; --ink-2:#52525B; --ink-3:#A1A1AA;
  --line:#E7E7E4; --soft:#F7F7F5; --white:#FFFFFF;
  --green:#2EBE4A; --green-d:#1F8F36;
  --wrap:1200px; --r:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font:400 17px/1.6 "Geist",system-ui,sans-serif;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--green-d);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.num{font-variant-numeric:tabular-nums}

.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:8px;font:500 15px/1 "Geist",sans-serif;text-decoration:none;transition:background .15s,border-color .15s}
.btn-primary{background:var(--ink);color:var(--white)}
.btn-primary:hover{background:#27272A}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-3)}
.link{font-weight:500;text-decoration:none;color:var(--ink)}
.link:hover{text-decoration:underline;text-underline-offset:4px}
.kind{display:inline-block;font-size:13px;font-weight:500;color:var(--ink-2);border:1px solid var(--line);border-radius:99px;padding:2px 10px;margin-bottom:16px}



/* page heads */
.hero{padding:104px 0 0;text-align:center}
.hero h1{font-size:clamp(40px,6.2vw,72px);font-weight:600;letter-spacing:-.035em;line-height:1.04;max-width:16ch;text-wrap:balance;margin:0 auto}
.hero p{font-size:20px;color:var(--ink-2);max-width:36ch;margin:22px auto 0;line-height:1.5}
.actions{display:flex;align-items:center;gap:24px;margin-top:34px;flex-wrap:wrap}
.hero .actions{justify-content:center}
.shot{margin-top:72px;position:relative}
.shot::before{content:"";position:absolute;left:-100vw;right:-100vw;top:28%;bottom:0;background:var(--soft);z-index:-1}
.frame{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white);box-shadow:0 24px 48px -24px rgba(10,10,10,.18),0 2px 6px rgba(10,10,10,.04)}
.band{background:var(--soft);padding:56px 0 96px}

.head{padding:96px 0 64px;border-bottom:1px solid var(--line)}
.head h1{font-size:clamp(36px,5vw,60px);font-weight:600;letter-spacing:-.035em;line-height:1.06;max-width:16ch}
.head p{font-size:20px;color:var(--ink-2);max-width:44ch;margin-top:20px;line-height:1.5}

/* sections */
section{padding:112px 0}
section.tight{padding-top:0}
.section-title{font-size:clamp(30px,3.6vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.1;max-width:18ch}
.lede{color:var(--ink-2);font-size:18px;max-width:46ch;margin-top:14px}

/* product feature rows */
.feature{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.feature + .feature{margin-top:112px}
.feature.flip{grid-template-columns:7fr 5fr}
.feature.flip .text{order:2}
.feature h3{font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.15}
.feature p{margin-top:14px;color:var(--ink-2);font-size:18px;max-width:36ch}
.feature ul{margin-top:18px;list-style:none;display:grid;gap:10px;color:var(--ink-2);font-size:16px}
.feature li{padding-left:20px;position:relative}
.feature li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--green)}
.feature .link{display:inline-block;margin-top:22px}
@media (max-width:900px){.feature,.feature.flip{grid-template-columns:1fr;gap:28px}.feature.flip .text{order:0}}

/* offer list: rows, not cards */
.rows{margin-top:48px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:4fr 6fr 2fr;gap:32px;padding:28px 0;border-bottom:1px solid var(--line);text-decoration:none;align-items:baseline}
.row h3{font-size:22px;font-weight:600;letter-spacing:-.02em}
.row p{color:var(--ink-2);font-size:16px}
.row .meta{color:var(--ink-3);font-size:14px;text-align:right}
a.row:hover h3{text-decoration:underline;text-underline-offset:5px}
@media (max-width:760px){.row{grid-template-columns:1fr;gap:6px}.row .meta{text-align:left}}

/* case card */
.case{background:var(--ink);color:var(--white);border-radius:20px;padding:72px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
.case blockquote{font-size:clamp(28px,3.4vw,42px);font-weight:500;letter-spacing:-.03em;line-height:1.18;max-width:24ch}
.case .who{margin-top:24px;color:var(--ink-3);font-size:15px}
.case .link{color:var(--white)}
.case small{display:block;margin-top:14px;color:#71717A;font-size:13px}
@media (max-width:900px){.case{grid-template-columns:1fr;padding:44px 28px}}

/* steps: a real sequence */
.steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;border-top:1px solid var(--line)}
.step{padding:28px 32px 0 0}
.step + .step{padding-left:32px;border-left:1px solid var(--line)}
.step .k{font-size:14px;color:var(--ink-3)}
.step h3{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-top:6px}
.step p{margin-top:8px;color:var(--ink-2);font-size:16px}
@media (max-width:820px){.steps{grid-template-columns:1fr}.step + .step{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:28px}}

/* two-column reference list (checks, sources) */
.ref{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;column-gap:48px;list-style:none;border-top:1px solid var(--line)}
.ref li{padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;font-size:16px}
.ref li span{color:var(--ink-3);min-width:9ch;font-size:14px;padding-top:2px}
@media (max-width:760px){.ref{grid-template-columns:1fr}}
.tools{margin-top:32px;display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.tools li{border:1px solid var(--line);border-radius:99px;padding:8px 16px;font-weight:500;font-size:15px}

/* closing */
.closing{border-top:1px solid var(--line);padding:112px 0}
.closing .inner{display:flex;align-items:center;gap:40px}
.closing img{width:112px;height:112px;border-radius:50%;object-fit:cover;flex:none}
.closing h2{font-size:clamp(28px,3.4vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1.12}
.closing p{color:var(--ink-2);margin-top:10px;font-size:18px;max-width:48ch}
.closing .btn{margin-top:24px}
@media (max-width:640px){.closing .inner{flex-direction:column;align-items:flex-start;gap:24px}}

/* long form: articles and case studies */
.prose{max-width:680px;margin:0 auto;padding:0 24px}
.prose .meta{color:var(--ink-3);font-size:15px;margin-bottom:18px}
.prose h1{font-size:clamp(34px,4.6vw,50px);font-weight:600;letter-spacing:-.035em;line-height:1.08}
.prose .standfirst{font-size:21px;color:var(--ink-2);line-height:1.5;margin-top:20px}
.prose h2{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:56px 0 14px}
.prose p,.prose li{font-size:18px;line-height:1.7;color:#27272A}
.prose p + p{margin-top:18px}
.prose ol,.prose ul{margin:16px 0 0 22px;display:grid;gap:10px}
.prose strong{font-weight:600;color:var(--ink)}
.prose figure{margin:40px 0}
.prose figcaption{font-size:14px;color:var(--ink-3);margin-top:10px}
.prose table{width:100%;border-collapse:collapse;margin-top:20px;font-size:16px}
.prose th{text-align:left;font-weight:500;color:var(--ink-2);font-size:14px;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.prose td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose td.r,.prose th.r{text-align:right;padding-right:0}
.prose .note{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-3)}
.article{padding:88px 0 112px}
.wide{max-width:960px;margin:48px auto}
.author{display:flex;gap:16px;align-items:center;margin-top:48px;padding:24px;border:1px solid var(--line);border-radius:var(--r)}
.author img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.author p{font-size:15px;line-height:1.5;color:var(--ink-2)}
.author strong{color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r);margin-top:40px}
.stats div{padding:20px}
.stats div + div{border-left:1px solid var(--line)}
.stats b{display:block;font-size:30px;font-weight:600;letter-spacing:-.03em}
.stats span{font-size:14px;color:var(--ink-2)}
@media (max-width:640px){.stats{grid-template-columns:1fr}.stats div + div{border-left:0;border-top:1px solid var(--line)}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.prose ol + p,.prose ul + p,.prose table + p{margin-top:20px}

/* ---- v3.1: life. Theme colours per practice area, dot-matrix signature, lighter headings ---- */
:root{--blue:#2F6BFF;--blue-bg:#EEF3FF;--violet:#7A5AF8;--violet-bg:#F3F0FF;--amber:#D9820F;--amber-bg:#FFF5E6;--green-bg:#ECF8EE}
.hero h1,.head h1,.section-title,.closing h2,.prose h1{font-weight:500;letter-spacing:-.04em}
.feature h3,.row h3,.step h3{font-weight:500}
.dot{font-family:"Doto",monospace;font-weight:800;letter-spacing:-.02em}
.hero h1 .dot{color:var(--green-d);font-size:1.08em}
.label{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;margin-bottom:14px}
.label::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor}
.t-green{color:var(--green-d)}.t-blue{color:var(--blue)}.t-violet{color:var(--violet)}.t-amber{color:var(--amber)}

/* hero field */
.field-wrap{position:relative;margin-top:64px;height:440px}
.field-wrap canvas{position:absolute;inset:0 -12vw;width:calc(100% + 24vw);height:100%;image-rendering:pixelated;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 80%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent,#000 22%,#000 80%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
.readout{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 48px -24px rgba(10,10,10,.25);padding:22px 26px;display:grid;grid-template-columns:repeat(3,auto);gap:0;text-align:left;min-width:min(620px,92vw)}
.readout div{padding:0 24px}
.readout div:first-child{padding-left:0}
.readout div + div{border-left:1px solid var(--line)}
.readout small{display:block;font-size:13px;color:var(--ink-2)}
.readout b{display:block;font-family:"Doto",monospace;font-weight:800;font-size:40px;line-height:1.1;letter-spacing:-.02em;margin-top:4px}
.readout .claim{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:2px}
.readout .real{color:var(--green-d)}
.readout p{grid-column:1/-1;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
@media (max-width:640px){.readout{grid-template-columns:1fr;min-width:0;width:88vw}.readout div{padding:10px 0!important;border-left:0!important}.readout div + div{border-top:1px solid var(--line)}.field-wrap{height:520px}}

/* practice index */
.index{margin-top:48px;border-top:1px solid var(--line)}
.index a{display:grid;grid-template-columns:28px 4fr 6fr 2fr;gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:background .2s,padding .2s}
.index a:hover{background:var(--soft);padding-left:12px;padding-right:12px}
.index .sw{width:14px;height:14px;border-radius:3px}
.index h3{font-size:22px;font-weight:500;letter-spacing:-.02em}
.index p{color:var(--ink-2);font-size:16px}
.status{justify-self:end;font-size:13px;font-weight:500;padding:4px 10px;border-radius:99px;white-space:nowrap}
.s-live{background:var(--green-bg);color:var(--green-d)}.s-service{background:var(--blue-bg);color:var(--blue)}.s-research{background:var(--amber-bg);color:var(--amber)}
@media (max-width:760px){.index a{grid-template-columns:20px 1fr;gap:6px 12px}.index p,.index .status{grid-column:2}.status{justify-self:start}}

/* dotted panels behind product images */
.panel{position:relative;border-radius:20px;padding:56px 56px 0;overflow:hidden;background:var(--green-bg)}
.panel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,var(--pc,#2EBE4A) 1.1px,transparent 1.4px) 0 0/9px 9px;opacity:.45;
  -webkit-mask-image:linear-gradient(160deg,#000,transparent 70%);mask-image:linear-gradient(160deg,#000,transparent 70%)}
.panel .frame{position:relative;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}
.panel.blue{background:var(--blue-bg);--pc:var(--blue)}.panel.violet{background:var(--violet-bg);--pc:var(--violet)}.panel.amber{background:var(--amber-bg);--pc:var(--amber)}
@media (max-width:640px){.panel{padding:28px 20px 0}}
.feature .panel{margin:0}

/* research notes with a figure */
.notes{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.notes a{padding:28px 28px 32px 0;text-decoration:none;display:flex;flex-direction:column;gap:12px}
.notes a + a{padding-left:28px;border-left:1px solid var(--line)}
.notes .fig{font-family:"Doto",monospace;font-weight:800;font-size:64px;line-height:1;letter-spacing:-.03em}
.notes h3{font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.3}
.notes .src{font-size:14px;color:var(--ink-3);margin-top:auto}
.notes a:hover h3{text-decoration:underline;text-underline-offset:4px}
@media (max-width:860px){.notes{grid-template-columns:1fr}.notes a + a{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

/* case card figures */
.case .figs{display:flex;gap:40px;margin-top:32px}
.case .figs b{display:block;font-family:"Doto",monospace;font-weight:800;font-size:48px;line-height:1;color:var(--green)}
.case .figs span{font-size:14px;color:var(--ink-3)}
.case{background:var(--ink) radial-gradient(circle,#2A2A2A 1.1px,transparent 1.4px) 0 0/9px 9px}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
.hero p,.lede,.head p{text-wrap:pretty}
.hero .readout p{max-width:none;margin:14px 0 0;font-size:13px;line-height:1.4;text-align:left;color:var(--ink-3)}

/* ---- v3.2: company voice, SEO structure ---- */
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--white);padding:8px 14px;border-radius:8px;z-index:20}
.skip:focus{left:16px}
.index a{grid-template-columns:28px 4fr 6fr 40px}
.index .go{justify-self:end;font-size:20px;color:var(--ink-3);transition:transform .2s,color .2s}
.index a:hover .go{transform:translateX(4px);color:var(--ink)}
@media (max-width:760px){.index a{grid-template-columns:20px 1fr 24px}.index p{grid-column:2}.index .go{grid-row:1;grid-column:3}}
.section-title .sw{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:14px;vertical-align:.18em}
.spec{list-style:none;border-top:1px solid var(--line)}
.spec li{padding:16px 0;border-bottom:1px solid var(--line);font-size:17px}
.closing h2 + p{max-width:52ch}
.closing .actions{margin-top:28px}

/* ---- v3.3: livelier buttons, page headers, mocks, section bands ---- */
.btn{gap:10px;height:46px;padding:0 20px;border-radius:10px;transition:transform .15s,box-shadow .2s,background .2s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--ink);color:var(--white);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px var(--ink),0 6px 16px -6px rgba(10,10,10,.45)}
.btn-primary:hover{background:#1C1C1F;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px var(--ink),0 10px 22px -8px rgba(10,10,10,.5)}
.btn-primary::after{content:"→";font-size:15px;transition:transform .2s}
.btn-primary:hover::after{transform:translateX(3px)}
.btn-ghost{background:var(--white);border:0;box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(10,10,10,.06);color:var(--ink)}
.btn-ghost:hover{box-shadow:0 0 0 1px var(--ink-3),0 4px 12px -6px rgba(10,10,10,.2)}
.nav .btn{height:38px;border-radius:9px}
.nav .btn-primary::after{content:none}
.case .btn-ghost,.dark .btn-ghost{background:transparent;color:var(--white);box-shadow:0 0 0 1px #3F3F46}
.link::after{content:"";display:block;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.link:hover{text-decoration:none}
.link:hover::after{transform:scaleX(1)}
.link{display:inline-block}

/* page headers with their own field */
.head{position:relative;overflow:hidden;background:var(--soft);border-bottom:1px solid var(--line);padding:112px 0 96px}
.head .wrap{position:relative;z-index:1}
.head canvas{position:absolute;right:0;top:0;width:58%;height:100%;image-rendering:pixelated;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%),linear-gradient(180deg,transparent,#000 25%,#000 85%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 45%),linear-gradient(180deg,transparent,#000 25%,#000 85%,transparent);mask-composite:intersect}
.head .actions{margin-top:32px}
@media (max-width:760px){.head canvas{width:100%;opacity:.35}}

/* textured and dark bands to vary rhythm */
.band-dots{background:var(--soft) radial-gradient(circle,#D9D9D4 1px,transparent 1.3px) 0 0/12px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:112px 0}
.dark{background:var(--ink) radial-gradient(circle,#26262A 1.1px,transparent 1.4px) 0 0/10px 10px;color:var(--white);padding:112px 0}
.dark .section-title{color:var(--white)}
.dark .lede,.dark p{color:#A1A1AA}
.dark .rows,.dark .row{border-color:#27272A}
.dark .row h3{color:var(--white)}

/* sequence: Check -> Fix -> Run, numbered because order matters */
.seq{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;counter-reset:s}
.seq .stage{position:relative;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:28px 28px 32px;box-shadow:0 1px 2px rgba(10,10,10,.04)}
.seq .stage::before{counter-increment:s;content:"0" counter(s);font-family:"Doto",monospace;font-weight:800;font-size:44px;line-height:1;color:var(--green)}
.seq .stage + .stage::after{content:"";position:absolute;left:-21px;top:50px;width:20px;height:2px;background:repeating-linear-gradient(90deg,var(--ink-3) 0 3px,transparent 3px 6px)}
.seq h3{font-size:24px;font-weight:500;letter-spacing:-.02em;margin-top:18px}
.seq p{color:var(--ink-2);font-size:16px;margin-top:8px}
@media (max-width:820px){.seq{grid-template-columns:1fr}.seq .stage + .stage::after{display:none}}

/* tool chips with a coloured mark */
.tools li{display:inline-flex;align-items:center;gap:10px;background:var(--white);box-shadow:0 1px 2px rgba(10,10,10,.05)}
.tools li i{width:10px;height:10px;border-radius:3px;background:var(--c,var(--ink-3))}

/* small product-style mocks for capabilities */
.mock{position:relative;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -22px rgba(10,10,10,.25);font-size:13px;overflow:hidden}
.mock-h{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font-weight:500}
.mock-h span{color:var(--ink-3);font-weight:400;font-size:12px}
.mono{font-family:"Geist Mono",monospace;font-size:12.5px}
.ev{display:grid;grid-template-columns:1fr auto;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);align-items:center}
.ev:last-child{border-bottom:0}
.ev small{display:block;color:var(--ink-3);font-size:11.5px}
.ok{font-size:11.5px;font-weight:500;padding:2px 8px;border-radius:99px;background:var(--green-bg);color:var(--green-d)}
.no{font-size:11.5px;font-weight:500;padding:2px 8px;border-radius:99px;background:#FDECEE;color:#D92D3F}
.flow{display:grid;grid-template-columns:1fr 36px 1.2fr;align-items:center;padding:18px 14px;gap:6px}
.flow .srcs{display:grid;gap:8px}
.flow .srcs div,.flow .model{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--soft)}
.flow .model{background:var(--white);box-shadow:0 0 0 3px var(--violet-bg)}
.flow .model b{display:block;font-weight:500}
.flow svg{width:36px;height:100%}
.bars{display:flex;align-items:flex-end;gap:10px;height:120px;padding:16px 14px 8px}
.bars i{flex:1;border-radius:4px 4px 0 0;background:var(--amber);opacity:.85}
.bars i:nth-child(odd){background:#F4C989}
.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.kpi-row div{padding:10px 14px}
.kpi-row div + div{border-left:1px solid var(--line)}
.kpi-row b{display:block;font-size:18px;font-weight:600;letter-spacing:-.02em}
.kpi-row small{color:var(--ink-3);font-size:11.5px}
.panel .mock{margin-bottom:56px}
.cap{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:center}
.cap .spec{margin-top:24px}
@media (max-width:900px){.cap{grid-template-columns:1fr;gap:28px}}
.notes.four{grid-template-columns:repeat(2,1fr)}
.notes.four a{padding:32px 32px 36px 0;border-bottom:1px solid var(--line)}
.notes.four a + a{padding-left:0;border-left:0}
.notes.four a:nth-child(even){padding-left:32px;padding-right:0;border-left:1px solid var(--line)}
.notes .fig{font-size:56px}
@media (max-width:860px){.notes.four{grid-template-columns:1fr}.notes.four a:nth-child(even){padding-left:0;border-left:0}}
.prose .sources{font-size:15px;gap:8px}
.prose .sources li{font-size:15px;line-height:1.5}
.prose .sources a{color:var(--ink-2);text-underline-offset:3px}
.prose em{font-style:italic}

/* ---- v3.5: Bridge page visuals ---- */
.logos{background:var(--soft);padding:8px 0 72px}
.logos p{text-align:center;font-size:14px;color:var(--ink-3);margin-bottom:22px}
.logos ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 36px}
.logos li{display:flex;align-items:center;gap:10px;font-weight:500;font-size:16px;color:var(--ink-2);filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.logos li:hover{filter:none;opacity:1}
.logos img{width:22px;height:22px}

.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:40px 0 24px}
.tabs button{all:unset;cursor:pointer;position:relative;padding:18px 20px 20px;border-radius:12px;border:1px solid var(--line);background:var(--white);display:grid;gap:4px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.tabs button b{font-weight:500;font-size:17px;letter-spacing:-.01em}
.tabs button span{font-size:14px;color:var(--ink-3)}
.tabs button[aria-selected="true"]{border-color:var(--ink);box-shadow:0 8px 20px -12px rgba(10,10,10,.35)}
.tabs button:focus-visible{outline:2px solid var(--green-d);outline-offset:2px}
.tabs button i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--green)}
.tabs button[aria-selected="true"] i{animation:tabfill var(--tab-ms,7000ms) linear forwards}
[data-tabs].paused .tabs button i{animation:none;width:0}
@keyframes tabfill{to{width:100%}}
.tabstage{padding:48px 48px 0}
.tabstage [role=tabpanel]{animation:fadein .5s cubic-bezier(.22,1,.36,1)}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:760px){.tabs{grid-template-columns:1fr}.tabstage{padding:20px 16px 0}}

.flowmap{position:relative;display:grid;grid-template-columns:36% 28% 36%;margin-top:56px;min-height:480px}
.flowmap .wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flowmap .wires path{fill:none;stroke:#C9C9C4;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:4 6;animation:flow 1.6s linear infinite}
.flowmap .wires .out path{stroke:var(--green)}
@keyframes flow{to{stroke-dashoffset:-20}}
.flowmap .col{list-style:none;display:grid;grid-auto-rows:1fr;align-items:center;position:relative;z-index:1}
.flowmap .src li{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-weight:500;box-shadow:0 1px 2px rgba(10,10,10,.05);margin:6px 0}
.flowmap .src img{width:20px;height:20px}
.glyph{width:20px;text-align:center;color:var(--ink-2)}
.flowmap .out li{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:12px;padding:12px 16px;margin:10px 0;font-size:14px;color:var(--ink-2)}
.flowmap .out b{display:block;font-weight:500;font-size:16px;color:var(--ink)}
.flowmap .core{display:grid;place-items:center;position:relative;z-index:1}
.core-box{background:var(--ink) radial-gradient(circle,#26262A 1.1px,transparent 1.4px) 0 0/8px 8px;color:var(--white);border-radius:18px;padding:26px 22px;text-align:center;width:min(200px,90%);box-shadow:0 0 0 8px rgba(46,190,74,.12),0 24px 48px -20px rgba(10,10,10,.5)}
.core-box b{display:block;font-size:22px;font-weight:500;letter-spacing:-.02em;margin-top:12px}
.core-box small{display:block;font-size:13px;color:#A1A1AA;margin-top:6px;line-height:1.4}
.core-box .mark{display:inline-block;width:34px;height:34px;border-radius:9px;background:#18181B;position:relative;box-shadow:0 0 0 1px #3F3F46}
.core-box .mark::after{content:"";position:absolute;inset:12px 7px;border-top:3px solid var(--green);border-bottom:3px solid var(--white)}
.systems{margin-top:36px;color:var(--ink-2);font-size:15px;text-align:center}
@media (max-width:860px){.flowmap{grid-template-columns:1fr;min-height:0;gap:20px}.flowmap .wires{display:none}.flowmap .col{grid-auto-rows:auto}}
@media (prefers-reduced-motion:reduce){.flowmap .wires path{animation:none}}

.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.checks > div{border:1px solid var(--line);border-radius:16px;padding:26px 26px 18px;background:var(--white)}
.checks h3{font-size:19px;font-weight:500;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;margin-bottom:10px}
.checks h3 .sw{width:10px;height:10px;border-radius:3px}
.checks ul{list-style:none}
.checks li{padding:11px 0 11px 26px;border-top:1px solid var(--line);font-size:15.5px;position:relative}
.checks li::before{content:"✓";position:absolute;left:0;color:var(--green-d);font-weight:600}
@media (max-width:860px){.checks{grid-template-columns:1fr}}

.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.trust > div{border:1px solid #27272A;border-radius:16px;padding:28px;background:rgba(255,255,255,.02)}
.trust .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#18181B;color:var(--green);font-size:18px;box-shadow:0 0 0 1px #3F3F46}
.trust h3{color:var(--white);font-size:20px;font-weight:500;letter-spacing:-.02em;margin-top:20px}
.trust p{margin-top:8px;font-size:15.5px}
@media (max-width:820px){.trust{grid-template-columns:1fr}}
.logos{padding:56px 0 80px}
.logos li{font-size:17px}
.logos img{width:26px;height:26px}

/* ---- v3.6: industries selector, platform wall, captions ---- */
.caption{font-size:13px;color:var(--ink-3);text-align:center;margin-top:14px}
.flowmap .stack{display:inline-flex;gap:4px}
.industries{display:grid;grid-template-columns:4fr 7fr;gap:56px;margin-top:48px;align-items:stretch}
.ind-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.ind-list button{all:unset;cursor:pointer;padding:22px 0;border-bottom:1px solid var(--line);font-size:clamp(20px,2.2vw,28px);font-weight:500;letter-spacing:-.025em;color:var(--ink-3);display:flex;justify-content:space-between;align-items:center;transition:color .2s,padding .2s}
.ind-list button::after{content:"→";font-size:20px;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.ind-list button:hover{color:var(--ink-2)}
.ind-list button[aria-selected="true"]{color:var(--ink);padding-left:8px}
.ind-list button[aria-selected="true"]::after{opacity:1;transform:none}
.ind-list button:focus-visible{outline:2px solid var(--green-d);outline-offset:2px}
.ind-stage{padding:48px;display:flex;align-items:center}
.ind-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:32px;width:100%;box-shadow:0 24px 48px -28px rgba(10,10,10,.3);animation:fadein .5s cubic-bezier(.22,1,.36,1)}
.ind-card small{font-size:13px;color:var(--ink-3)}
.ind-card .big{font-family:"Doto",monospace;font-weight:800;font-size:clamp(26px,3vw,38px);line-height:1.15;letter-spacing:-.02em;color:var(--green-d);margin:6px 0 24px}
.ind-card ul{list-style:none;border-top:1px solid var(--line)}
.ind-card li{padding:12px 0 12px 24px;border-bottom:1px solid var(--line);position:relative;font-size:15.5px}
.ind-card li::before{content:"";position:absolute;left:4px;top:19px;width:8px;height:8px;border-radius:50%;background:#D92D3F}
.ind-card .sys{margin-top:18px;font-size:14px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
@media (max-width:860px){.industries{grid-template-columns:1fr;gap:24px}.ind-stage{padding:20px}}

.wall{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:40px}
.wall li{list-style:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:120px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-3);transition:background .2s}
.wall li img{width:30px;height:30px;filter:grayscale(1);opacity:.8;transition:filter .25s,opacity .25s,transform .25s}
.wall li:hover{background:var(--soft)}
.wall li:hover img{filter:none;opacity:1;transform:scale(1.08)}
@media (max-width:760px){.wall{grid-template-columns:repeat(3,1fr)}}
.ind-card{position:relative;z-index:1}
.ind-card .big{font-family:"Geist",sans-serif;font-weight:500;font-size:clamp(26px,2.8vw,34px);letter-spacing:-.03em;color:var(--ink)}
.tabstage .frame,.panel .mock{z-index:1}
.hero .caption{font-size:13px;color:var(--ink-3);margin:14px auto 0;max-width:none}

/* ---- v3.7: hero reconciliation console ---- */
.console{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,92vw);background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 60px -28px rgba(10,10,10,.35);text-align:left;overflow:hidden}
.field-wrap{height:560px}
.console-h{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);font-weight:500;font-size:14px}
.console .state{position:relative;display:inline-grid;font-size:12.5px;font-weight:500}
.console .state > span{grid-area:1/1;display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border-radius:99px}
.console .state i{width:7px;height:7px;border-radius:50%}
.console .s1{background:var(--amber-bg);color:var(--amber);animation:hide .3s 2.9s forwards}
.console .s1 i{background:var(--amber);animation:blink 1s infinite}
.console .s2{background:var(--green-bg);color:var(--green-d);opacity:0;animation:show .3s 2.9s forwards}
.console .s2 i{background:var(--green)}
.srcs{list-style:none}
.srcs li{display:grid;grid-template-columns:18px 1fr auto 96px;gap:12px;align-items:center;padding:10px 20px;border-bottom:1px solid var(--line);font-size:14.5px;opacity:0;transform:translateY(6px);animation:rowin .45s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(.25s + var(--d) * .12s)}
.srcs li b{font-weight:500;text-align:right;transition:color .4s}
.srcs em{font-style:normal;font-size:11.5px;font-weight:500;padding:2px 8px;border-radius:99px;opacity:0;animation:show .3s forwards;animation-delay:calc(1.3s + var(--d) * .15s)}
.pill-bad{background:#FDECEE;color:#D92D3F}.pill-warn{background:var(--amber-bg);color:var(--amber)}.pill-good{background:var(--green-bg);color:var(--green-d)}
.srcs li:not(:last-child) b{animation:fade .4s 2.4s forwards}
.result{padding:16px 20px 18px;background:var(--soft);opacity:0;animation:show .5s 2.6s forwards}
.total{display:flex;justify-content:space-between;align-items:baseline}
.total span{font-size:13px;color:var(--ink-2)}
.total b{font-family:"Doto",monospace;font-weight:800;font-size:34px;letter-spacing:-.02em;color:var(--green-d)}
.split{display:flex;height:10px;border-radius:99px;overflow:hidden;margin-top:12px;background:#ECECE8}
.split i{width:0;background:var(--c);animation:grow .9s cubic-bezier(.22,1,.36,1) forwards;animation-delay:2.9s}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:12px;color:var(--ink-2)}
.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
@keyframes rowin{to{opacity:1;transform:none}}
@keyframes show{to{opacity:1}}
@keyframes hide{to{opacity:0}}
@keyframes fade{to{color:var(--ink-3)}}
@keyframes grow{to{width:var(--w)}}
@keyframes blink{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.srcs li,.srcs em,.result,.console .s2{animation:none;opacity:1;transform:none}.console .s1{display:none}.split i{animation:none;width:var(--w)}}
@media (max-width:640px){.field-wrap{height:620px}.srcs li{grid-template-columns:18px 1fr auto;padding:10px 14px}.srcs em{grid-column:2;grid-row:2;justify-self:start}.srcs li b{grid-row:1/3;grid-column:3}}

/* ---- v3.8: research post layout, figures, research cards, case studies ---- */
.crumbs{display:flex;gap:8px;font-size:14px;color:var(--ink-3);margin-bottom:28px;flex-wrap:wrap}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;margin-bottom:16px}
.kicker::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor}
.post-head{position:relative;padding:72px 0 48px;background:var(--soft) radial-gradient(circle,#DEDED9 1px,transparent 1.3px) 0 0/12px 12px;border-bottom:1px solid var(--line)}
.post-head h1{font-size:clamp(34px,4.8vw,58px);font-weight:500;letter-spacing:-.04em;line-height:1.06;max-width:20ch;text-wrap:balance}
.post-head .standfirst{font-size:21px;color:var(--ink-2);line-height:1.5;max-width:52ch;margin-top:22px;text-wrap:pretty}
.byline{display:flex;align-items:center;gap:12px;margin-top:32px;font-size:14px;color:var(--ink-2);line-height:1.45}
.byline b{color:var(--ink);font-weight:500}
.by-mark{width:36px;height:36px;border-radius:9px;background:var(--ink);position:relative;flex:none}
.by-mark::after{content:"";position:absolute;inset:13px 8px;border-top:3px solid var(--green);border-bottom:3px solid var(--white)}
.post-hero{margin-top:-1px;padding-top:48px}
.post-hero .fig{max-width:1000px;margin:0 auto}
.post-grid{display:grid;grid-template-columns:220px minmax(0,680px);gap:64px;justify-content:center;padding-top:56px;padding-bottom:40px}
.toc{position:sticky;top:96px;align-self:start;font-size:14px}
.toc p{color:var(--ink-3);margin-bottom:12px}
.toc ol{list-style:none;border-left:1px solid var(--line)}
.toc li a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--ink-2);text-decoration:none;line-height:1.35}
.toc li a:hover,.toc li a.on{color:var(--ink);border-left-color:var(--green)}
@media (max-width:980px){.post-grid{grid-template-columns:minmax(0,1fr)}.toc{position:static;display:none}}
.post-body{padding:0;margin:0;max-width:none}
.post-body h2{scroll-margin-top:96px}
.tldr{border:1px solid var(--line);border-radius:14px;padding:22px 24px;background:var(--white);box-shadow:0 1px 2px rgba(10,10,10,.04)}
.tldr > p{font-size:13px;font-weight:500;color:var(--green-d);margin-bottom:10px}
.tldr ul{list-style:none;margin:0;display:grid;gap:10px}
.tldr li{padding-left:22px;position:relative;font-size:16.5px;line-height:1.55}
.tldr li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:2px;background:var(--green)}
.prose sup a{font-size:11px;color:var(--green-d);text-decoration:none;margin-left:1px;padding:0 2px}
.prose sup a:hover{text-decoration:underline}
.callout{margin:28px 0;padding:20px 22px;border-left:3px solid var(--amber);background:var(--amber-bg);border-radius:0 12px 12px 0}
.callout p{font-size:16.5px;margin:0}
.pull{margin:36px 0;padding-left:20px;border-left:3px solid var(--ink)}
.pull p{font-size:24px;line-height:1.35;letter-spacing:-.02em;color:var(--ink)}
.pull cite{display:block;margin-top:8px;font-size:14px;font-style:normal;color:var(--ink-3)}
.tbl{overflow-x:auto}
.ourwork{margin-top:56px;padding:28px 28px 26px;border-radius:16px;background:var(--ink) radial-gradient(circle,#26262A 1.1px,transparent 1.4px) 0 0/10px 10px;color:var(--white)}
.ourwork h2{color:var(--white);margin-top:0!important}
.ourwork ul{list-style:none;margin:16px 0 20px;display:grid;gap:12px}
.ourwork li{color:#D4D4D8!important;padding-left:24px;position:relative;font-size:16.5px!important}
.ourwork li::before{content:"✓";position:absolute;left:0;color:var(--green)}
.ourwork .link{color:var(--white)}
details.faq{border-bottom:1px solid var(--line);padding:16px 0}
details.faq summary{cursor:pointer;font-weight:500;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
details.faq summary::after{content:"+";color:var(--ink-3);font-size:20px;line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq p{margin-top:10px;font-size:16.5px}
.sources-sec .sources{list-style:decimal;margin-left:20px}
.sources li{font-size:15px!important;line-height:1.5}
.sources li span{display:block;font-size:13px;color:var(--ink-3)}
.sources li:target{background:var(--green-bg);border-radius:6px}

/* figures */
.fig{margin:40px 0;border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--white)}
.fig .fig-title{font-size:15px!important;font-weight:500;color:var(--ink)!important;margin:0 0 18px!important;letter-spacing:-.01em}
.fig figcaption{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3);line-height:1.5}
.fig svg{display:block;width:100%;height:auto}
.fig svg .g{stroke:#EDEDEA;stroke-width:1}
.fig svg .base{stroke:#C9C9C4;stroke-width:1}
.fig svg .ax{font:12px "Geist",sans-serif;fill:#8A8A93}
.fig svg .lbl{font:500 13px "Geist",sans-serif;fill:#0A0A0A}
.fig svg .val{font:12px "Geist",sans-serif;fill:#52525B}
.fig svg .hit{fill:transparent;cursor:crosshair}
.fig svg .hit:hover{fill:rgba(10,10,10,.06)}
.fig-data{margin-top:12px;font-size:13px}
.fig-data summary{cursor:pointer;color:var(--ink-2)}
.fig-data table{margin-top:8px;font-size:13px}
.fig-bars{display:grid;gap:12px}
.bar-row{display:grid;grid-template-columns:minmax(120px,38%) 1fr auto;gap:14px;align-items:center;font-size:14.5px}
.bt{height:12px;background:#F1F1EE;border-radius:4px;overflow:hidden}
.bt i{display:block;height:100%;border-radius:4px}
.bv{font-weight:500;min-width:4ch;text-align:right}
.fig-stack .stack-head{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-2)}
.fig-stack .stack-head b{color:var(--ink);font-weight:600}
.stack-bar{display:flex;gap:2px;height:22px;margin:10px 0 16px;border-radius:6px;overflow:hidden}
.stack-bar i{min-width:3px}
.fig-stack ul{list-style:none;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 28px}
.fig-stack li{display:flex;align-items:center;gap:10px;font-size:14px;border-bottom:1px solid var(--line);padding-bottom:8px}
.fig-stack li b{margin-left:auto;font-weight:500}
.fig-stack .sw{width:10px;height:10px;border-radius:3px;flex:none}
@media (max-width:640px){.fig-stack ul{grid-template-columns:1fr}}
.fig-timeline{list-style:none;margin:0!important;position:relative;display:grid!important;gap:0!important}
.fig-timeline li{position:relative;padding:0 0 20px 28px;border-left:2px solid var(--line);margin-left:6px;font-size:15px!important}
.fig-timeline li:last-child{padding-bottom:0}
.fig-timeline li::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--white);border:2px solid var(--blue)}
.fig-timeline li.t-warn::before{border-color:var(--amber)}
.fig-timeline li.t-bad::before{border-color:#D92D3F;background:#D92D3F}
.fig-timeline .td{display:block;font-size:13px;color:var(--ink-3)}
.fig-timeline b{display:block;font-weight:500}
.fig-timeline .tn{display:block;font-size:14px;color:var(--ink-2)}
.fig-flow{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding-bottom:4px}
.fig-flow > div{flex:1 1 0;min-width:110px;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--soft);font-size:13px;line-height:1.35}
.fig-flow > div b{display:block;font-size:14px;font-weight:500;margin-bottom:4px}
.fig-flow > div span{color:var(--ink-2)}
.fig-flow .step-bad{background:#FDECEE;border-color:#F4B7BF}
.fig-flow .step-bad b{color:#B4232F}
.fig-flow .step-warn{background:var(--amber-bg);border-color:#F1D3A0}
.fig-flow .arrow{flex:0 0 22px;align-self:center;height:2px;background:var(--ink-3);position:relative}
.fig-flow .arrow::after{content:"";position:absolute;right:0;top:-4px;border:5px solid transparent;border-left-color:var(--ink-3);border-right:0}
.fig-flow .arrow.broken{background:repeating-linear-gradient(90deg,#D92D3F 0 4px,transparent 4px 7px)}
.fig-flow .arrow.broken::after{border-left-color:#D92D3F}
@media (max-width:760px){.fig-flow{flex-direction:column}.fig-flow .arrow{flex:0 0 18px;width:2px;height:18px;align-self:center}.fig-flow .arrow::after{right:-4px;top:auto;bottom:0;border:5px solid transparent;border-top-color:var(--ink-3);border-bottom:0}}
.fig-matrix{overflow-x:auto}
.fig-matrix table{font-size:14px;margin:0}
.fig-matrix th{font-size:12.5px;vertical-align:bottom}
.fig-matrix th[scope=row]{font-size:14px;color:var(--ink);font-weight:500;white-space:nowrap;padding-right:16px}
.fig-matrix td{text-align:center}
.yes{color:var(--green-d);font-weight:600}.no{color:#C9C9C4}.part{color:var(--amber)}
.mx-legend{font-size:12.5px!important;color:var(--ink-3)!important;margin-top:10px!important}
.mx-legend span{margin-left:8px}
.fig-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fig-compare > div{border-radius:12px;padding:18px;border:1px solid var(--line)}
.fig-compare b{display:block;font-weight:500;margin-bottom:10px}
.fig-compare ul{list-style:none;margin:0!important;display:grid;gap:8px!important}
.fig-compare li{font-size:14.5px!important;padding-left:22px;position:relative;line-height:1.4!important}
.cmp-bad{background:#FDF3F4}.cmp-bad li::before{content:"✕";position:absolute;left:0;color:#D92D3F}
.cmp-good{background:var(--green-bg)}.cmp-good li::before{content:"✓";position:absolute;left:0;color:var(--green-d)}
@media (max-width:640px){.fig-compare{grid-template-columns:1fr}}

/* research cards (index, home, related) */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.rcard{display:flex;flex-direction:column;gap:12px;padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--white);text-decoration:none;transition:box-shadow .25s,transform .25s,border-color .25s}
.rcard:hover{transform:translateY(-3px);border-color:#D4D4D0;box-shadow:0 18px 36px -22px rgba(10,10,10,.3)}
.rcard .stat{font-family:"Doto",monospace;font-weight:800;font-size:46px;line-height:1;letter-spacing:-.03em;margin:0;border:0;padding:0;border-radius:0;background:none}
.rcard h3{font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.25}
.rcard p{font-size:15px;color:var(--ink-2);line-height:1.5}
.rcard .src{margin-top:auto;padding-top:8px;font-size:13px;color:var(--ink-3)}
.related{background:var(--soft);border-top:1px solid var(--line);padding:96px 0}
@media (max-width:980px){.rgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.rgrid{grid-template-columns:1fr}}
.post-body section{padding:0}
.post-body #questions,.post-body .sources-sec{margin-top:8px}
.fig-matrix th{padding:8px 10px;text-align:center;line-height:1.25;font-weight:500;color:var(--ink-2)}
.fig-matrix td{padding:10px;border-bottom:1px solid var(--line)}
.fig-matrix th[scope=row]{text-align:left;border-bottom:1px solid var(--line)}
.fig-matrix tr:first-child th{border-bottom:1px solid var(--ink-3)}
.mx-yes{color:var(--green-d);font-weight:600}.mx-no{color:#C9C9C4}.mx-part{color:var(--amber)}
.post-body .tldr{padding:22px 24px}
.post-body .ourwork{padding:28px 28px 26px}

/* case studies */
.case-card{display:grid;grid-template-columns:5fr 6fr;gap:48px;align-items:center;padding:40px;border:1px solid var(--line);border-radius:20px;text-decoration:none;background:var(--white);transition:box-shadow .25s,border-color .25s}
.case-card:hover{border-color:#D4D4D0;box-shadow:0 24px 48px -28px rgba(10,10,10,.3)}
.case-card h2{font-size:clamp(26px,3vw,36px);font-weight:500;letter-spacing:-.03em;line-height:1.12}
.case-card .cc-text > p:not(.kicker){color:var(--ink-2);margin-top:14px;font-size:17px}
.cc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0 24px;border-top:1px solid var(--line);padding-top:20px}
.cc-stats b{display:block;font-family:"Doto",monospace;font-weight:800;font-size:34px;line-height:1;color:var(--green-d)}
.cc-stats span{font-size:13px;color:var(--ink-2)}
.cc-img{padding:32px 32px 0}
.cs-note{margin-top:20px;font-size:13px;color:var(--ink-3)}
@media (max-width:900px){.case-card{grid-template-columns:1fr;padding:24px}.cc-stats{grid-template-columns:1fr 1fr 1fr}}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:36px;border-top:1px solid var(--line)}
.facts div{padding:16px 20px 0 0}
.facts div + div{padding-left:20px;border-left:1px solid var(--line)}
.facts dt{font-size:13px;color:var(--ink-3)}
.facts dd{font-size:15px;font-weight:500;margin-top:4px}
@media (max-width:820px){.facts{grid-template-columns:1fr 1fr}.facts div + div{border-left:0;padding-left:0}}
.results{background:var(--ink) radial-gradient(circle,#26262A 1.1px,transparent 1.4px) 0 0/10px 10px;color:var(--white);padding:56px 0}
.results .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.results b{display:block;font-family:"Doto",monospace;font-weight:800;font-size:clamp(40px,5vw,60px);line-height:1;letter-spacing:-.03em}
.results b.real{color:var(--green)}
.results span{display:block;margin-top:12px;font-size:14px;color:#A1A1AA;max-width:24ch}
@media (max-width:820px){.results .wrap{grid-template-columns:1fr 1fr}}
.cs-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:56px}
.cs-step{position:sticky;top:96px;font-size:14px;font-weight:500;color:var(--green-d);display:flex;align-items:center;gap:8px}
.cs-step::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--green)}
.cs-main{max-width:820px}
.cs-p{font-size:18px;color:var(--ink-2);margin-top:24px;max-width:60ch}
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
.voices > div{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--white)}
.voices span{font-size:13px;color:var(--ink-3)}
.voices p{margin-top:8px;font-size:16px;line-height:1.5}
.voices b{font-family:"Doto",monospace;font-weight:800;font-size:30px;display:block;line-height:1.1}
.cs-checks{margin-top:32px}
.cs .seq{margin-top:32px}
@media (max-width:900px){.cs-grid{grid-template-columns:1fr;gap:12px}.cs-step{position:static}.voices{grid-template-columns:1fr}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.callout-example{border-left-color:var(--blue);background:var(--blue-bg)}
.callout-warning{border-left-color:#D92D3F;background:#FDF3F4}
.callout-k{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px;letter-spacing:.01em}
.history ol{list-style:none;margin:12px 0 0!important;border-left:2px solid var(--line);display:grid;gap:14px!important}
.history li{padding-left:18px;position:relative}
.history li::before{content:"";position:absolute;left:-6px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--white);border:2px solid var(--green)}
.history time{font-size:13px;color:var(--ink-3)}
.history p{font-size:16px!important;margin-top:2px}
.cmp-real{background:var(--green-bg)}.cmp-real li::before{content:"✓";position:absolute;left:0;color:var(--green-d)}

/* about */
.statement{display:grid;grid-template-columns:6fr 5fr;gap:72px;align-items:start}
.statement h2{font-size:clamp(34px,4.4vw,56px);font-weight:500;letter-spacing:-.04em;line-height:1.06;text-wrap:balance}
.statement p{font-size:18px;color:var(--ink-2);line-height:1.6}
.statement p + p{margin-top:16px}
.gap{margin-top:32px;border:1px solid var(--line);border-radius:16px;padding:22px;display:grid;gap:14px;background:var(--white);box-shadow:0 18px 40px -26px rgba(10,10,10,.25)}
.gap-row{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;font-size:14px;color:var(--ink-2)}
.gap-row i{grid-column:1/-1;grid-row:2;height:10px;border-radius:4px;background:#C9C9C4}
.gap-row.real i{background:var(--green)}
.gap-row b{font-family:"Doto",monospace;font-weight:800;font-size:26px;line-height:1;color:var(--ink-3)}
.gap-row.real b{color:var(--green-d)}
.gap small{font-size:12.5px;color:var(--ink-3)}
.gap small a{color:var(--ink-2)}
@media (max-width:900px){.statement{grid-template-columns:1fr;gap:28px}}
.trust.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.trust.four{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.trust.four{grid-template-columns:1fr}}
.seq.loop{grid-template-columns:repeat(4,1fr);position:relative;padding-bottom:40px}
.seq.loop::after{content:"↺  and back to watching";position:absolute;right:0;bottom:0;font-size:13px;color:var(--ink-3)}
.seq.loop .stage a{color:var(--ink)}
@media (max-width:1000px){.seq.loop{grid-template-columns:1fr 1fr}.seq.loop .stage:nth-child(3)::after{display:none}}
@media (max-width:640px){.seq.loop{grid-template-columns:1fr}}
.exp{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.exp > div{border-top:2px solid var(--ink);padding-top:20px}
.exp .sw{display:block;width:12px;height:12px;border-radius:3px;margin-bottom:16px}
.exp h3{font-size:20px;font-weight:500;letter-spacing:-.02em}
.exp p{margin-top:8px;color:var(--ink-2);font-size:15.5px}
@media (max-width:900px){.exp{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.exp{grid-template-columns:1fr}}

/* contact + booking */
.contact{display:grid;grid-template-columns:4fr 6fr;gap:64px;align-items:start}
.contact-side h2{font-size:24px;font-weight:500;letter-spacing:-.02em}
.next{list-style:none;counter-reset:n;margin-top:20px;display:grid;gap:18px}
.next li{counter-increment:n;padding-left:44px;position:relative}
.next li::before{content:counter(n);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--soft);border:1px solid var(--line);font-size:14px;font-weight:500}
.next b{display:block;font-weight:500}
.next span{color:var(--ink-2);font-size:15.5px}
.alt{margin-top:28px;font-size:15px;color:var(--ink-2)}
.alt a{color:var(--ink)}
.form{border:1px solid var(--line);border-radius:18px;padding:32px;background:var(--white);box-shadow:0 24px 48px -32px rgba(10,10,10,.3);display:grid;gap:18px}
.form label{display:grid;gap:7px;font-size:14px;font-weight:500}
.form input,.form select,.form textarea{font:inherit;font-weight:400;font-size:16px;padding:11px 13px;border:1px solid #D4D4D0;border-radius:10px;background:var(--white);color:var(--ink);width:100%}
.form textarea{resize:vertical;min-height:120px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--green-d);outline-offset:1px;border-color:transparent}
.form input:user-invalid,.form textarea:user-invalid{border-color:#D92D3F}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .btn{justify-self:start;border:0;cursor:pointer}
.form .btn:disabled{opacity:.6;cursor:wait}
.form-note{font-size:13px;color:var(--ink-3)}
.form-msg{font-size:14.5px;min-height:1.2em}
.form-msg[data-kind=error]{color:#B4232F}
.form-msg a{color:inherit}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-done{padding:24px 4px}
.form-done b{font-size:22px;font-weight:500;letter-spacing:-.02em}
.form-done p{color:var(--ink-2);margin-top:8px}
.cal-box{border:1px solid var(--line);border-radius:18px;background:var(--white);min-height:560px;overflow:hidden;position:relative}
.cal-inline{width:100%;min-height:560px}
.cal-fallback{display:none;place-items:center;align-content:center;gap:16px;text-align:center;min-height:560px;padding:32px;color:var(--ink-2)}
.cal-box.no-cal .cal-inline{display:none}
.cal-box.no-cal .cal-fallback{display:grid}
@media (max-width:860px){.contact{grid-template-columns:1fr;gap:32px}.row2{grid-template-columns:1fr}.form{padding:22px}}


/* ---- v4: chrome makeover (nav, buttons, links, footer) ----
   Motif: the dithered "noise resolves into signal" field. Pixels mark state (current page, arrows),
   green only where something is live or about to happen. */
:root{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5'%3E%3Cpath d='M2 0h1v1H2zM3 1h1v1H3zM0 2h1v1H0zM1 2h1v1H1zM2 2h1v1H2zM3 2h1v1H3zM4 2h1v1H4zM3 3h1v1H3zM2 4h1v1H2z'/%3E%3C/svg%3E");--ease:cubic-bezier(.2,.7,.2,1)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:8px}

/* buttons */
.btn{position:relative;gap:12px;height:48px;padding:0 22px;border-radius:10px;font:500 15px/1 "Geist",sans-serif;letter-spacing:-.005em;
  transition:transform .15s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:var(--white);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(10,10,10,.3)}
.btn-primary:hover{background:#18181B;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 var(--green),0 8px 20px -10px rgba(10,10,10,.6)}
.btn-primary::after,.arr{content:"";display:inline-block;flex:none;width:10px;height:10px;background:currentColor;
  -webkit-mask:var(--px) center/contain no-repeat;mask:var(--px) center/contain no-repeat;transition:transform .25s var(--ease),background-color .2s}
.btn-primary:hover::after{transform:translateX(3px);background:var(--green)}
.btn-ghost{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(10,10,10,.04)}
.btn-ghost:hover{background:var(--soft);box-shadow:inset 0 0 0 1px #C9C9C4,0 1px 2px rgba(10,10,10,.06)}
.btn-sm{height:38px;padding:0 15px;border-radius:9px;font-size:14px}
.btn-sm::after{content:none}
.case .btn-ghost,.dark .btn-ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px #3F3F46}
.case .btn-ghost:hover,.dark .btn-ghost:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px #71717A}

/* text links: underline draws in, pixel arrow steps forward */
.link{display:inline-flex;align-items:center;gap:9px;position:relative;font-weight:500;text-decoration:none;padding-bottom:3px}
.link::after{content:"";position:absolute;left:0;right:20px;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.link:hover::after{transform:scaleX(1)}
.link .arr{width:10px;height:10px}
.link:hover .arr{transform:translateX(3px);background:var(--green)}
.case .link:hover .arr,.dark .link:hover .arr{background:#6EE787}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s,background .25s}
.nav.scrolled{border-bottom-color:var(--line);box-shadow:0 10px 30px -24px rgba(10,10,10,.35);background:rgba(255,255,255,.92)}
.nav .wrap{height:68px;display:flex;align-items:center;gap:20px;transition:height .25s var(--ease)}
.nav.scrolled .wrap{height:60px}
.nav .logo{flex:none;display:block;padding:6px 0}
.nav .logo img{height:22px;width:auto}
.nav-main{margin-left:auto}
.nav-main ul{list-style:none;display:flex;align-items:center;gap:2px;font-size:15px}
.nav-main a{position:relative;display:flex;align-items:center;height:36px;padding:0 12px;border-radius:8px;text-decoration:none;color:var(--ink-2);transition:color .15s,background .15s}
.nav-main a:hover{color:var(--ink);background:var(--soft)}
.nav-main a[aria-current]{color:var(--ink)}
.nav-main a[aria-current]::before{content:"";position:absolute;left:50%;bottom:-2px;width:4px;height:4px;margin-left:-2px;background:var(--green);box-shadow:-6px 0 0 #9ADBA6,6px 0 0 #9ADBA6}
.nav-cta{flex:none;padding-left:8px;border-left:1px solid var(--line);margin-left:6px}
.nav-cta .btn{margin-left:8px}
.nav-mobile{display:none}

/* mobile menu: a sheet under the bar */
.menu summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);background:var(--white)}
.menu summary::-webkit-details-marker{display:none}
.burger{position:relative;width:16px;height:10px}
.burger i{position:absolute;left:0;right:0;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),top .3s var(--ease)}
.burger i:first-child{top:0}.burger i:last-child{top:8.5px}
.menu[open] .burger i:first-child{top:4.25px;transform:rotate(45deg)}
.menu[open] .burger i:last-child{top:4.25px;transform:rotate(-45deg)}
.sheet{position:absolute;left:0;right:0;top:100%;height:calc(100dvh - var(--nav-h,68px));background:var(--white);border-top:1px solid var(--line);padding:12px 24px 32px;display:flex;flex-direction:column;overflow-y:auto;animation:sheet .3s var(--ease)}
.sheet ul{list-style:none}
.sheet li a{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line);font-size:22px;font-weight:500;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.sheet li a::after{content:"";width:11px;height:11px;background:var(--ink-3);-webkit-mask:var(--px) center/contain no-repeat;mask:var(--px) center/contain no-repeat}
.sheet li a[aria-current]::after{background:var(--green)}
.sheet-cta{display:grid;gap:10px;margin-top:auto;padding-top:28px}
.sheet-cta .btn{width:100%;height:52px}
@keyframes sheet{from{opacity:0;transform:translateY(-6px)}}
@media (max-width:900px){.nav-main{display:none}.nav-mobile{display:block}.nav-cta{margin-left:auto;border-left:0;padding-left:0}}
@media (max-width:420px){.nav-cta{display:none}.nav-mobile{margin-left:auto}}

/* footer */
.foot{position:relative;margin-top:0;background:var(--soft);border-top:1px solid var(--line);padding:0 0 0;font-size:14px;color:var(--ink-2);overflow:hidden}
.foot-field{display:block;width:100%;height:44px;image-rendering:pixelated;opacity:.85;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.foot-top{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px;padding-top:36px;padding-bottom:8px}
.foot-brand img{height:22px;width:auto}
.foot-brand p{margin:16px 0 22px;line-height:1.6}
.foot h2{font-size:13px;font-weight:500;color:var(--ink);letter-spacing:0;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.foot h2::before{content:"";width:4px;height:4px;background:var(--green)}
.foot ul{list-style:none;display:grid;gap:10px}
.foot ul a{text-decoration:none;color:var(--ink-2);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:color .15s,background-size .3s var(--ease)}
.foot ul a:hover{color:var(--ink);background-size:100% 1px}
.foot .btn-sm{font-size:13.5px}
.foot .legal{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:48px;padding-top:20px;padding-bottom:36px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.foot .legal a{color:var(--ink-3);text-decoration:none}
.foot .legal a:hover{color:var(--ink)}
@media (max-width:900px){.foot-top{grid-template-columns:1fr 1fr;gap:32px 24px}.foot-brand{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}.nav .wrap{transition:none}}
.closing .actions .btn{margin-top:0}