/* Shared shell for every page after the homepage: header, footer, page hero, and the templates borrowed in shape from aaru.com
   (how it works, use case, result, research, about, careers, contact, legal). Tokens and .kk/.hh/.ll/.btn live in styles.css. */
.pg{padding-top:84px}
.site-head{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px var(--gutter);transition:background .3s cubic-bezier(.4,0,.2,1),border-color .3s;border-bottom:1px solid transparent}
.site-head.solid{background:color-mix(in srgb,var(--ink) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--line)}
.site-head .logo{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--paper);text-decoration:none}
.site-head .logo i{font-style:normal;color:var(--teal)}
.site-nav{display:flex;align-items:center;gap:22px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.site-nav a{color:var(--mute);text-decoration:none;transition:color .15s linear}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--paper)}
.site-nav .btn{color:var(--ink);padding:10px 16px}
.site-nav .btn:hover{color:var(--paper)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:999px;color:var(--paper);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;cursor:pointer}
@media (max-width:900px){
  .menu-btn{display:block}
  .site-nav{position:fixed;top:62px;left:12px;right:12px;flex-direction:column;align-items:stretch;gap:0;padding:8px 18px 18px;background:var(--ink2);border:1px solid var(--line);border-radius:16px;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .2s,transform .3s cubic-bezier(.19,1,.22,1)}
  .site-nav.open{opacity:1;pointer-events:auto;transform:none}
  .site-nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:12px}
  .site-nav .btn{margin-top:14px;justify-content:center;border-bottom:0}
}
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 18px}
.crumb a{color:var(--mute);text-decoration:none}.crumb a:hover{color:var(--paper)}
/* page hero: words on the left, the page's drawing on the right */
.ph{padding:clamp(40px,8vh,96px) var(--gutter) clamp(40px,7vh,80px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center}
.ph>*{min-width:0}
.ph h1{font-size:clamp(34px,5.4vw,64px)}
.ph .lede{font-size:clamp(16px,1.6vw,19px);line-height:1.5;color:color-mix(in srgb,var(--paper) 72%,transparent);max-width:48ch;margin:0}
.ph canvas,.fig canvas{position:static;inset:auto;width:100%;height:auto;aspect-ratio:4/3;display:block;border-radius:16px;background:var(--ink2);border:1px solid var(--line)}
.ph.solo{grid-template-columns:minmax(0,1fr);max-width:1100px}
.cap{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:10px 2px 0;line-height:1.6}
@media (max-width:860px){.ph{grid-template-columns:minmax(0,1fr)}}
/* a two-column band: the words beside one drawing */
.band{padding:clamp(56px,10vh,120px) var(--gutter);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:start}
.band>*{min-width:0}
.band.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.band.flip .fig{order:-1}
.band p.body,.prose p{font-size:16px;line-height:1.6;color:color-mix(in srgb,var(--paper) 78%,transparent);max-width:58ch;margin:0 0 16px}
.band .fig{position:sticky;top:96px}
@media (max-width:860px){.band,.band.flip{grid-template-columns:minmax(0,1fr)}.band .fig{position:static}.band.flip .fig{order:0}}
/* how it works: three chapters with a step rail */
.chap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(20px,4vw,64px);padding:clamp(56px,10vh,120px) var(--gutter);border-top:1px solid var(--line)}
.chap>*{min-width:0}
.rail{position:sticky;top:110px;align-self:start;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);display:grid;gap:12px}
.rail a{color:var(--mute);text-decoration:none}.rail a.on{color:var(--paper)}
.rail b{color:var(--teal);font-weight:400}
.chap .inner{display:grid;gap:clamp(36px,6vh,64px)}
.pair{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);align-items:start}
.pair>*{min-width:0}
.pair h3{font-weight:500;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;margin:0 0 10px}
.pair p{font-size:15px;line-height:1.6;color:color-mix(in srgb,var(--paper) 76%,transparent);margin:0 0 12px}
@media (max-width:900px){.chap{grid-template-columns:minmax(0,1fr)}.rail{position:static;grid-auto-flow:column;justify-content:start;gap:16px;overflow-x:auto}.pair{grid-template-columns:minmax(0,1fr)}}
/* products */
.prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:clamp(24px,4vw,40px)}
.prods>div{background:var(--ink);padding:22px 20px 24px;min-width:0;transition:background .3s}
.prods>div:hover{background:var(--ink2)}
.prods em{font-style:normal;display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.prods b{display:block;font-weight:500;font-size:18px;margin-bottom:6px}
.prods p{margin:0;font-size:14px;line-height:1.45;color:color-mix(in srgb,var(--paper) 70%,transparent)}
.prods .lead{grid-column:span 2}
/* the products grid: the last two widen to fill their row on a wide screen */
@media (min-width:1001px){#products .prods>div:nth-last-child(-n+2){grid-column:span 2}}
@media (max-width:1000px){.prods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.prods{grid-template-columns:minmax(0,1fr)}.prods .lead{grid-column:auto}}
/* the answer, as a town sees it */
.answer-mock{background:var(--ink2);border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:8px}
.answer-mock .q{font-weight:500;font-size:17px;margin:0 0 6px}
.answer-mock .row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--ink);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s cubic-bezier(.19,1,.22,1)}
.answer-mock.in .row{opacity:1;transform:none}
.answer-mock .row span:first-child{font-family:var(--mono);font-size:11px;color:var(--mute)}
.answer-mock .row b{font-weight:500;font-size:14px}
.answer-mock .row small{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.answer-mock .rec{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:4px 8px;color:var(--paper);white-space:nowrap}
.answer-mock .note{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:6px 2px 0}
/* figures that count */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:clamp(24px,4vw,40px) 0}
.stats>div{background:var(--ink);padding:22px 20px;min-width:0}
.stats b{display:block;font-weight:500;font-size:clamp(30px,4vw,48px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stats b.f{color:var(--terra)}.stats b.a{color:var(--mint)}
.stats span{display:block;margin-top:10px;font-size:13px;line-height:1.4;color:color-mix(in srgb,var(--paper) 70%,transparent)}
@media (max-width:700px){.stats{grid-template-columns:minmax(0,1fr)}}
.say{margin:clamp(28px,5vw,48px) 0 0}
/* a list of questions */
.qlist{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}
.qlist li{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--ink2);font-size:15px;line-height:1.4}
/* the closing band shared by every page */
.cta-band{position:relative;margin:clamp(12px,2vw,24px) var(--gutter);border-radius:clamp(16px,2vw,28px);overflow:hidden;border:1px solid var(--line);background:var(--ink2);min-height:min(56vh,460px);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,5vw,64px)}
.cta-band canvas{position:absolute;inset:0;width:100%;height:100%}
.cta-band>*:not(canvas){position:relative}
.cta-band .hh{font-size:clamp(28px,4.4vw,56px);max-width:18ch}
/* use cases, side by side */
.uc-row{padding:clamp(56px,10vh,110px) var(--gutter);border-top:1px solid var(--line)}
.uc-head{display:flex;justify-content:space-between;align-items:end;gap:20px}
.uc-arrows{display:flex;gap:8px}
.uc-arrows button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--paper);cursor:pointer;font-size:15px}
.uc-arrows button:hover{border-color:var(--paper)}
.uc-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,30%);gap:clamp(12px,1.6vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;margin-top:28px;padding-bottom:6px;scrollbar-width:none}
.uc-track::-webkit-scrollbar{display:none}
.uc-card{scroll-snap-align:start;display:block;text-decoration:none;color:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--ink2);transition:border-color .3s}
.uc-card:hover{border-color:var(--mute)}
.uc-card canvas{position:static;width:100%;height:auto;aspect-ratio:4/3;display:block}
.uc-card div{padding:16px 18px 20px}
.uc-card b{display:block;font-weight:500;font-size:18px;margin-bottom:6px}
.uc-card span{font-size:13px;color:color-mix(in srgb,var(--paper) 66%,transparent);line-height:1.45}
@media (max-width:700px){.uc-track{grid-auto-columns:82%}}
/* footer */
.site-foot{padding:clamp(40px,7vh,72px) var(--gutter) 28px;display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr));gap:28px;border-top:1px solid var(--line);margin-top:clamp(20px,3vw,40px)}
.site-foot>*{min-width:0}
.site-foot .logo{font-family:var(--display);font-weight:600;font-size:19px;color:var(--paper);text-decoration:none}
.site-foot .logo i{font-style:normal;color:var(--teal)}
.site-foot p{font-size:13px;color:var(--mute);max-width:34ch;line-height:1.5}
.site-foot h4{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 12px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.site-foot a{color:var(--paper);text-decoration:none;font-size:14px}
.site-foot a:hover{color:var(--mint)}
.site-foot .fine{grid-column:1/-1;margin-top:24px}
@media (max-width:760px){.site-foot{grid-template-columns:repeat(2,minmax(0,1fr))}.site-foot>div:first-child{grid-column:1/-1}}
/* research and legal: a running text with its contents beside it */
.doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,5vw,80px);padding:clamp(40px,8vh,80px) var(--gutter);border-top:1px solid var(--line)}
.doc>*{min-width:0}
.toc{position:sticky;top:100px;align-self:start;display:grid;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.toc a{color:var(--mute);text-decoration:none}.toc a:hover,.toc a.on{color:var(--paper)}
.prose{max-width:70ch}
.prose h2{font-weight:500;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;margin:48px 0 14px;scroll-margin-top:100px}
.prose h2:first-child{margin-top:0}
.prose h3{font-weight:500;font-size:18px;margin:28px 0 10px}
.prose ul{margin:0 0 16px;padding-left:20px;color:color-mix(in srgb,var(--paper) 78%,transparent);line-height:1.6}
.prose table{width:100%;border-collapse:collapse;margin:18px 0 22px;font-size:14px}
.prose th,.prose td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.prose figure{margin:24px 0}
.draft{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra);border:1px solid var(--terra);border-radius:999px;padding:5px 10px;margin:0 0 18px}
@media (max-width:860px){.doc{grid-template-columns:minmax(0,1fr)}.toc{position:static;grid-auto-flow:row}}
/* about */
.principles{margin-top:28px;border-top:1px solid var(--line)}
.principles details{border-bottom:1px solid var(--line)}
.principles summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 2px;font-size:clamp(17px,1.8vw,21px);font-weight:500}
.principles summary::-webkit-details-marker{display:none}
.principles summary::after{content:"+";font-family:var(--mono);color:var(--mute);transition:transform .3s}
.principles details[open] summary::after{transform:rotate(45deg)}
.principles details p{margin:0 0 18px;max-width:62ch;font-size:15px;line-height:1.6;color:color-mix(in srgb,var(--paper) 76%,transparent)}
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px);margin-top:28px}
.people.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.person{border:1px solid var(--line);border-radius:16px;background:var(--ink2);padding:20px;min-width:0}
.person canvas{position:static;width:72px;height:72px;border-radius:50%;display:block;margin-bottom:14px;background:var(--ink)}
.person b{display:block;font-weight:500;font-size:19px}
.person em{font-style:normal;display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:4px 0 12px}
.person ul{margin:0;padding-left:16px;font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--paper) 76%,transparent)}
@media (max-width:860px){.people,.people.six{grid-template-columns:minmax(0,1fr)}}
.honours{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:28px}
.honours div{background:var(--ink);padding:18px;min-width:0}
.honours b{display:block;font-weight:500;font-size:22px;letter-spacing:-.02em}
.honours span{display:block;font-size:13px;color:color-mix(in srgb,var(--paper) 70%,transparent);margin-top:6px;line-height:1.4}
.honours b span{display:inline;font-size:inherit;color:inherit;margin:0;line-height:inherit}
@media (max-width:1000px){.honours{grid-template-columns:repeat(2,minmax(0,1fr))}.honours div:last-child:nth-child(odd){grid-column:1/-1}}
/* a link to a section lands below the fixed header */
.band[id]{scroll-margin-top:84px}
@media (max-width:520px){.honours{grid-template-columns:minmax(0,1fr)}}
/* careers */
.roles{margin-top:28px;border-top:1px solid var(--line)}
.roles a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:20px;align-items:center;padding:18px 2px;border-bottom:1px solid var(--line);color:var(--paper);text-decoration:none;transition:padding .3s cubic-bezier(.19,1,.22,1),background .3s}
.roles a:hover{padding-left:12px;background:var(--ink2)}
.roles b{font-weight:500;font-size:18px}
.roles span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
@media (max-width:600px){.roles a{grid-template-columns:minmax(0,1fr)}}
/* contact */
.form{display:grid;gap:16px;background:var(--ink2);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,3vw,32px)}
.form label{display:grid;gap:8px}
.form label>span,.form legend{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.form input[type=text],.form input[type=email],.form input[type=date],.form textarea,.form select{font:400 16px/1.4 var(--display);color:var(--paper);background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:100%}
.form textarea{min-height:120px;resize:vertical}
.form input:focus-visible,.form textarea:focus-visible,.form select:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.form .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form fieldset{border:0;margin:0;padding:0;display:grid;gap:10px}
.form .checks{display:flex;flex-wrap:wrap;gap:8px}
.form .checks label{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-size:13px;cursor:pointer}
.form .checks input{accent-color:var(--mint)}
.form .sent{font-size:14px;color:var(--mint);min-height:1.4em;margin:0}
@media (max-width:600px){.form .two{grid-template-columns:minmax(0,1fr)}}
figure.fig,.fig{margin:0}
.band .stats b,.prose .stats b{font-size:clamp(24px,2.6vw,40px);overflow-wrap:anywhere}
/* the chapters share one rail that follows the reader */
.chaps{display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(20px,4vw,64px);padding:0 var(--gutter);border-top:1px solid var(--line)}
.chaps>*{min-width:0}
.chaps .rail{position:sticky;top:110px;align-self:start;padding-top:clamp(56px,10vh,120px)}
.chaps .chap{display:block;padding:clamp(56px,10vh,120px) 0;border-top:1px solid var(--line)}
.chaps .chap:first-child{border-top:0}
@media (max-width:900px){.chaps{grid-template-columns:minmax(0,1fr)}.chaps .rail{top:58px;z-index:5;padding:12px 0;background:var(--ink);grid-auto-flow:column;overflow-x:auto;white-space:nowrap}}

/* case studies, in the shape of aaru.com's: a halftone hero, a lockup, a dateline, then the story beside its contents */
.cs-hero{position:relative;min-height:min(70vh,600px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px var(--gutter) 64px;background:var(--ink) var(--img) center/cover no-repeat;border-bottom:1px solid var(--line);overflow:hidden}
.cs-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(15,18,22,.62),rgba(15,18,22,.94) 72%)}
.cs-hero>*{position:relative}
.cs-lock{display:inline-flex;align-items:center;gap:14px;font-family:var(--display);font-weight:600;font-size:18px;color:var(--paper);margin:0 0 26px}
.cs-lock i{font-style:normal;color:var(--teal)}
.cs-lock .x{color:var(--mute);font-weight:400}
.cs-lock .who{font-weight:500;font-size:15px;max-width:30ch;text-align:left;line-height:1.25}
.cs-hero h1{max-width:21ch;margin:0 auto 14px;font-size:clamp(30px,4.4vw,58px)}
.cs-date{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0}
.cs-intro{padding:clamp(40px,7vh,72px) var(--gutter) 0;max-width:1100px}
.cs-intro .lede{font-size:clamp(17px,1.7vw,21px);line-height:1.5;color:color-mix(in srgb,var(--paper) 80%,transparent);max-width:56ch;margin:0}
.cs-meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin:22px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pill{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);background:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:6px 11px;margin:44px 0 12px}
.prose .pill:first-child{margin-top:0}
.prose .pill+h2{margin-top:0}
.cmp{margin:18px 0 28px;display:grid;gap:14px}
.cmp-h{font-weight:500;font-size:17px;margin:0 0 4px}
.cmp .row{display:grid;gap:7px}
.cmp .lab{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:color-mix(in srgb,var(--paper) 80%,transparent)}
.cmp .lab b{font-weight:500;color:var(--paper);font-variant-numeric:tabular-nums}
.cmp .trk{height:10px;background:var(--ink2);border-radius:0 5px 5px 0;overflow:hidden}
.cmp .trk i{display:block;height:100%;border-radius:0 5px 5px 0;width:var(--w);transform-origin:left;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.19,1,.22,1)}
.cmp.in .trk i,.js .cmp:not([data-r]) .trk i{transform:none}
.cmp .row:nth-child(3) i{transition-delay:.15s}.cmp .row:nth-child(4) i{transition-delay:.3s}.cmp .row:nth-child(5) i{transition-delay:.45s}
.cmp .s0 i{background:color-mix(in srgb,var(--paper) 35%,transparent)}.cmp .s1 i{background:var(--paper)}.cmp .s2 i{background:var(--mute)}.cmp .s3 i{background:var(--terra)}.cmp .sa i{background:var(--mint)}
.stats.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.prose .fig{margin:20px 0 8px}
/* case study cards: the halftone, the lockup, the question */
.cs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);padding:0 var(--gutter) clamp(40px,7vh,80px)}
.cs-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:380px;border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--paper);background:var(--ink2)}
.cs-card-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.cs-card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,18,22,.2),rgba(15,18,22,.92) 75%)}
.cs-card:hover .cs-card-img{transform:scale(1.04)}
.cs-card-body{position:relative;padding:22px 22px 24px;display:grid;gap:10px}
.cs-card-lock{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.cs-card b{font-weight:500;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;line-height:1.2;max-width:24ch}
.cs-card-more{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.cs-row .uc-track{grid-auto-columns:minmax(300px,40%)}
.cs-row .cs-card{min-height:320px;scroll-snap-align:start}
@media (max-width:760px){.cs-grid{grid-template-columns:minmax(0,1fr)}.cs-card{min-height:320px}.stats.six{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-row .uc-track{grid-auto-columns:85%}}
/* photographs: aerials from the U.S. Geological Survey, public domain */
.photo-band{margin:0;padding:0 var(--gutter) clamp(20px,4vh,40px)}
.photo-band img{display:block;width:100%;height:clamp(240px,48vh,540px);object-fit:cover;border-radius:18px;border:1px solid var(--line)}
.photo-band .cap{margin-top:10px}
.cta-band.photo{background:var(--ink2) center/cover no-repeat}
.cta-band.photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,18,22,.3),rgba(15,18,22,.92))}
.uc-card.pic img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.uc-card.pic{position:relative}
.uc-card.pic:hover img{transform:scale(1.04)}
.ph figure.fig img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;border:1px solid var(--line)}
/* about: the founders, where the work is, and where the team comes from */
.avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;margin-bottom:14px;border:1px solid var(--line)}
.places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:8px}
.place{display:grid;justify-items:center;text-align:center;gap:14px;text-decoration:none;color:var(--paper);padding:10px}
.place .lens{display:block;width:min(180px,100%);aspect-ratio:1;border-radius:50%;background-size:cover;background-position:center;position:relative;
  box-shadow:inset 0 0 0 1px rgba(244,245,242,.35),inset 0 -26px 40px rgba(15,18,22,.55),inset 0 16px 28px rgba(255,255,255,.12),0 16px 40px rgba(0,0,0,.5);transition:transform .6s cubic-bezier(.19,1,.22,1)}
.place .lens::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.35),rgba(255,255,255,0) 38%)}
.place:hover .lens{transform:scale(1.05)}
.place b{font-weight:500;font-size:18px}
.place em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.place{align-content:start}
.place b{max-width:24ch}
.place small{display:block;margin-top:-8px;font-size:13px;line-height:1.4;color:color-mix(in srgb,var(--paper) 66%,transparent);max-width:28ch}
.person p{margin:0;font-size:14px;line-height:1.6;color:color-mix(in srgb,var(--paper) 76%,transparent)}
.honours.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.prods.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1000px){.honours.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.places{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.prods.two,.honours.three{grid-template-columns:minmax(0,1fr)}}
/* the homepage's case study */
.feat{padding:clamp(56px,10vh,110px) var(--gutter);border-top:1px solid var(--line)}
.feat-card{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--ink2);margin-top:22px}
.feat-card>*{min-width:0}
.feat-img{position:relative;min-height:420px;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:22px}
.feat-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,18,22,0),rgba(15,18,22,.85))}
.feat-img .cs-lock{position:relative;z-index:1;margin:0;font-size:16px}
.feat-body{padding:clamp(22px,3vw,36px);display:grid;align-content:start;gap:12px}
.feat-body h3{font-weight:500;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;line-height:1.15;margin:0}
.feat-body p{margin:0;font-size:15px;line-height:1.55;color:color-mix(in srgb,var(--paper) 74%,transparent)}
@media (max-width:860px){.feat-card{grid-template-columns:minmax(0,1fr)}.feat-img{min-height:260px}}

.tbl-scroll{max-width:100%;overflow-x:auto}
.tbl-scroll table{min-width:640px}

/* the office pages: the lines to carry upstairs, the openers, figures in words, and the hub's cards */
.carry{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.carry>div{background:var(--ink2);padding:22px 22px 24px;display:grid;gap:10px;min-width:0}
.carry b{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.carry span{font-size:clamp(15px,1.4vw,17px);line-height:1.6;color:color-mix(in srgb,var(--paper) 84%,transparent)}
.carry>div:first-child span{font-size:clamp(18px,1.8vw,23px);line-height:1.4;font-weight:500;letter-spacing:-.01em;color:var(--paper)}
.band .src{max-width:72ch}
.ph .opener{margin:22px 0;padding:0 0 0 18px;border-left:2px solid var(--teal)}
.ph .opener p{margin:0;font-size:clamp(19px,2vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.ph .opener cite{display:block;margin-top:10px;font-style:normal;font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--paper) 66%,transparent)}
.ph .record{margin:0 0 22px;padding:14px 16px;border:1px solid var(--line);border-left:2px solid var(--terra);border-radius:10px;background:var(--ink2);font-size:15px;line-height:1.55;color:color-mix(in srgb,var(--paper) 82%,transparent);max-width:58ch}
.ph .fig-first .crumb{margin-bottom:14px}
.stats.words b{font-size:clamp(19px,1.9vw,26px);letter-spacing:-.02em;line-height:1.15}
.stats.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.stats.two{grid-template-columns:minmax(0,1fr)}}
.hub{padding:0 var(--gutter) clamp(56px,10vh,110px)}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(14px,1.8vw,22px)}
.hub-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--ink2);display:flex;flex-direction:column;min-width:0;transition:border-color .3s}
.hub-card:hover{border-color:var(--mute)}
.hub-card .hub-img{display:block;overflow:hidden}
.hub-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.hub-card:hover img{transform:scale(1.04)}
.hub-card .cap{margin:10px 18px 0}
.hub-card>div{padding:10px 18px 20px;display:grid;gap:12px;align-content:start}
.hub-card h3{margin:0;font-weight:500;font-size:20px;line-height:1.2}
.hub-card h3 a{color:var(--paper);text-decoration:none}
.hub-card h3 a:hover{color:var(--mint)}
.hub-card h3 small{display:block;margin-top:8px;font-size:14px;line-height:1.45;font-weight:400;color:color-mix(in srgb,var(--paper) 70%,transparent)}
.hub-card ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hub-card li{font-size:14px;line-height:1.45;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--ink)}
.hub-card .src{margin:2px 0 0}

/* How it works and the proof pages (final draft, October 2026) */
.ph .eyb{font-size:clamp(15px,1.4vw,17px);line-height:1.5;color:var(--mint);max-width:52ch;margin:0 0 16px}
.ph .lede+.lede{margin-top:14px}
.source{font-family:var(--mono);font-size:10px;letter-spacing:.08em;line-height:1.7;color:var(--mute);margin:14px 0 0;max-width:70ch}
.stats.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.stats.two{grid-template-columns:minmax(0,1fr)}}
.prodlines{display:grid;margin:clamp(20px,3vw,32px) 0 0;border-top:1px solid var(--line)}
.prodlines p{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:8px 28px;margin:0;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.55}
.prodlines b{font-weight:500;color:var(--paper)}
.prodlines span{color:color-mix(in srgb,var(--paper) 74%,transparent)}
@media (max-width:700px){.prodlines p{grid-template-columns:minmax(0,1fr)}}
.chap .btn{margin-top:6px}
.doc.solo{grid-template-columns:minmax(0,1fr)}
.doc.solo .prose{max-width:760px}

/* alignment pass, October 2026: captions and sources keep their small size inside running text, and every card in a row
   shares its neighbours' rows (CSS subgrid), so headings, question boxes and source lines start at the same height */
.pair p.cap,.prose p.cap,.band p.cap{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);line-height:1.6;margin:10px 2px 0;max-width:none}
.pair p.src,.prose p.src,.band p.src{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);line-height:1.7;margin:16px 0 0}
/* the use-case hub: image, credit, office and caption, three questions, source */
.hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.hub-card{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0}
.hub-card>div,.hub-card ul{display:contents}
.hub-card h3{margin:12px 18px 12px}
.hub-card li{margin:0 18px 6px}
.hub-card .src{margin:8px 18px 20px;align-self:start}
.hub-card .cap{align-self:start}
@media (min-width:1001px){.hub-card:last-child:nth-child(3n+1){grid-column:2}}
@media (max-width:1000px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-card:last-child:nth-child(2n+1){grid-column:1/-1;justify-self:center;width:calc(50% - clamp(7px,.9vw,11px))}}
@media (max-width:640px){.hub-grid{grid-template-columns:minmax(0,1fr)}.hub-card:last-child:nth-child(2n+1){grid-column:auto;width:auto}}
/* partner cards: label, kind, what was done */
.prods.two>div{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
/* About's three places: lens, level, client, contract form */
.places{grid-auto-rows:auto}
.place{grid-row:span 4;grid-template-rows:subgrid;row-gap:12px}
.place small{margin-top:-6px}
/* The case-study hub: one row per case, the words on the left and the drawing with its caption on the right,
   the same split as the research band under it */
.cs-dgrid{display:grid;gap:clamp(14px,1.6vw,20px);padding:0 var(--gutter)}
.cs-dcard{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(20px,2.6vw,36px);border:1px solid var(--line);border-radius:20px;background:var(--ink2);color:var(--paper);text-decoration:none;min-width:0;transition:border-color .3s}
.cs-dcard:hover{border-color:color-mix(in srgb,var(--paper) 30%,transparent)}
.cs-dcard>*{min-width:0}
.cs-dcard .cs-card-body{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:0}
.cs-dcard .cs-card-lock{margin:0 0 18px;line-height:1.6}
.cs-dcard b{display:block;font-weight:500;font-size:clamp(22px,2.3vw,30px);letter-spacing:-.02em;line-height:1.18;max-width:22ch;margin:0 0 14px}
.cs-dcard .cs-form{font-size:15px;line-height:1.5;color:color-mix(in srgb,var(--paper) 70%,transparent)}
.cs-dcard .cs-card-more{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(24px,3vw,40px)}
.cs-dcard .cs-card-more::after{content:"\2192";letter-spacing:0;transition:transform .3s}
.cs-dcard:hover .cs-card-more::after{transform:translateX(4px)}
.cs-dcard .fig{display:block;margin:0}
.cs-dcard canvas{aspect-ratio:16/9;background:var(--ink)}
.cs-dcard .cap{display:block;margin:12px 2px 0}
.cs-hub-research{margin-top:clamp(40px,6vh,72px);align-items:center}
.cs-hub-research canvas{aspect-ratio:16/9}
.cs-hub-research .fig{position:static}
@media (max-width:860px){.cs-dcard{grid-template-columns:minmax(0,1fr);gap:20px}.cs-dcard .fig{order:-1}}

/* Case study pages: a shorter header, then one column holding the summary and the chapters, with the chapter
   links beside it from the summary down */
.cs-hero{min-height:min(56vh,500px);padding:112px var(--gutter) 56px}
.doc.cs-doc{grid-template-columns:200px minmax(0,660px) 200px;justify-content:center;column-gap:clamp(32px,4vw,64px);row-gap:0;padding:clamp(48px,8vh,88px) var(--gutter) clamp(64px,10vh,112px);border-top:0}
.cs-doc .cs-intro{grid-column:2;grid-row:1;padding:0 0 clamp(36px,5vh,48px);margin:0 0 clamp(48px,7vh,72px);border-bottom:1px solid var(--line);max-width:none}
.cs-doc .cs-intro .lede{max-width:none}
.cs-doc .cs-meta{margin-top:24px}
.doc.cs-doc .toc{grid-column:1;grid-row:1/span 2;gap:2px;margin-left:-10px}
.cs-doc .toc a{display:block;padding:8px 10px;border-radius:8px;line-height:1.5;transition:background .2s,color .2s}
.cs-doc .toc a.on{background:var(--ink2);color:var(--paper)}
.doc.cs-doc .prose{grid-column:2;grid-row:2;max-width:none}
.cs-doc .prose p{max-width:none}
.cs-doc .prose p.pill{font-size:10px;line-height:1.2;margin:64px 0 16px}
.cs-doc .prose p.pill:first-child{margin-top:0}
.cs-doc .prose h2{margin-bottom:16px}
.cs-doc .prose .fig{margin:32px 0 0}
.cs-doc .prose .fig:first-child{margin:0}
.cs-doc .prose .fig canvas{aspect-ratio:16/10}
.cs-doc .prose .stats{margin:32px 0 0}
.cs-doc .prose .stats b{font-size:clamp(24px,2.4vw,34px)}
.cs-doc .prose p.src{margin-top:40px;max-width:none}
@media (max-width:1180px){.doc.cs-doc{grid-template-columns:180px minmax(0,660px)}}
@media (max-width:860px){
  .cs-hero{min-height:0;padding:104px var(--gutter) 48px}
  .doc.cs-doc{grid-template-columns:minmax(0,660px)}
  .doc.cs-doc .toc{display:none}
  .cs-doc .cs-intro,.doc.cs-doc .prose{grid-column:1}
  .cs-doc .prose p.pill{margin-top:56px}
}