/* =====================================================================
   PARITER · site.css · Identity v2 · Monochrome Glass edition
   Every value resolves to tokens.css. Canonical spec: pariter-brandbook-v2.html.
   Recipes (.pane .veil .flat .chip .primary .field) are lifted from the brandbook.
   ===================================================================== */

/* ── Motion tokens: one easing, four durations (see the laws atop site.js) ── */
:root{
  --ease:cubic-bezier(.16,1,.3,1);
  --d-micro:180ms;--d-el:400ms;--d-reveal:800ms;--d-orch:1200ms;
  --dur:var(--d-micro);
  --shadow-pane-focus:inset 0 1px 0 rgba(255,255,255,.9),0 36px 84px rgba(11,11,12,.13);
}

/* ── Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--paper)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{--px:clamp(20px,4.6vw,64px);--nav-h:64px;
  background:var(--paper);color:var(--ink-64);font-family:var(--font-sans);font-weight:var(--weight-sans);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}
svg{display:block}
img,video{display:block;max-width:100%}
.m{fill:var(--ink)}
ol,ul{list-style:none}
strong{font-weight:400;color:var(--ink-100)}  /* emphasis is opacity, never bold */
.wrap{position:relative;z-index:1;width:100%;max-width:1360px;margin:0 auto;padding:0 var(--px)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Type ── */
.display,.h1,.h2,.h3{color:var(--ink-100);font-weight:400}
.display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--track-display)}
.h1{font-size:var(--fs-h1);line-height:var(--lh-heading);letter-spacing:var(--track-display)}
.h2{font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:var(--track-display)}
.h3{font-size:var(--fs-h3);line-height:1.15;letter-spacing:var(--track-h3)}
.it{font-family:var(--font-serif);font-style:italic;letter-spacing:-0.01em}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-64)}
.lead.ink{color:var(--ink-100)}
.body{color:var(--ink-64);max-width:34em}
.t{color:var(--ink-100);font-size:15px;line-height:1.4}
.sec{color:var(--ink-55);font-size:var(--fs-small);line-height:1.45}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink-44);line-height:1.5}
.meta{font-family:var(--font-serif);font-style:italic;font-size:var(--fs-meta);color:var(--ink-44);line-height:1.4}
.mono{font-family:var(--font-mono);font-size:var(--fs-annotation);color:var(--ink-55);line-height:1.6}
.nm{font-size:clamp(40px,5.4vw,84px);line-height:1;letter-spacing:var(--track-display);color:var(--ink-100);font-weight:400}
.copy>*+*{margin-top:16px}

/* links: the underline draws in from the left */
.ul,.foot-links a,.back,.links a{position:relative}
.ul{color:var(--ink-100);box-shadow:inset 0 -1px 0 var(--rule)}
.ul::after,.foot-links a::after,.back::after,.links a:not(.primary)::before{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left center;transition:transform var(--d-el) var(--ease)}
.ul::after{bottom:0}
.ul:hover::after,.foot-links a:hover::after,.back:hover::after,.links a:hover::before{transform:none}

/* ── Materials (all values from tokens) ── */
.pane{position:relative;background:var(--fill-pane);-webkit-backdrop-filter:blur(var(--blur-pane)) saturate(var(--saturate-pane));backdrop-filter:blur(var(--blur-pane)) saturate(var(--saturate-pane));
  border:1px solid var(--glass-edge);border-radius:var(--radius-pane);box-shadow:var(--shadow-pane);
  transition:background-color var(--d-reveal) var(--ease),-webkit-backdrop-filter var(--d-reveal) var(--ease),backdrop-filter var(--d-reveal) var(--ease),border-color var(--d-el) var(--ease),box-shadow var(--d-el) var(--ease)}
.pane.focus{border-color:rgba(var(--ink-rgb),.12);box-shadow:var(--shadow-pane-focus)}
.veil{background:var(--fill-veil);-webkit-backdrop-filter:blur(var(--blur-veil));backdrop-filter:blur(var(--blur-veil));border-bottom:1px solid var(--hairline)}
.flat{background:var(--haze);border-radius:var(--radius-pane)}
.chip,.primary{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;
  border-radius:var(--radius-pill);font:400 15px/1 var(--font-sans);white-space:nowrap;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:transform var(--d-micro) var(--ease),box-shadow var(--d-micro) var(--ease)}
.chip{color:var(--ink-100);background:var(--fill-chip);-webkit-backdrop-filter:blur(var(--blur-chip));backdrop-filter:blur(var(--blur-chip));border:1px solid var(--glass-edge);box-shadow:var(--shadow-chip)}
@media (hover:hover){.chip:hover{transform:var(--lift);box-shadow:var(--shadow-chip-hover)}}   /* a tap must not leave a button lifted */
.chip:active{transform:none;box-shadow:var(--shadow-chip-pressed)}
.chip.serif{font-family:var(--font-serif);font-style:italic;font-size:17px}
.primary{color:var(--paper);background:var(--fill-primary);border:1px solid var(--ink);box-shadow:var(--shadow-primary)}
@media (hover:hover){.primary:hover{transform:var(--lift);box-shadow:var(--shadow-primary-hover)}}
.primary:active{transform:none;box-shadow:var(--shadow-primary-pressed)}
.primary:disabled{cursor:default;transform:none}
.tag{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:var(--radius-pill);font-family:var(--font-serif);font-style:italic;font-size:14px;color:var(--ink-100);
  background:var(--fill-pane);-webkit-backdrop-filter:blur(var(--blur-chip));backdrop-filter:blur(var(--blur-chip));border:1px solid var(--glass-edge)}  /* glass tag, no emboss: not pressable */

/* ── ASCII fields: oversized 28% so the 0.9× parallax never shows an edge ── */
.field{position:absolute;display:block;pointer-events:none}
.f-cover{top:-14%;left:0;width:100%;height:128%}
.f-right{top:-14%;right:0;width:30%;height:128%;-webkit-mask-image:linear-gradient(to left,#000 25%,transparent);mask-image:linear-gradient(to left,#000 25%,transparent)}
.f-wide{top:-14%;right:0;width:52%;height:128%;-webkit-mask-image:linear-gradient(to left,#000 35%,transparent);mask-image:linear-gradient(to left,#000 35%,transparent)}
.f-base{left:0;bottom:-30px;width:100%;height:calc(clamp(120px,18vh,200px) + 60px);-webkit-mask-image:linear-gradient(to top,#000 25%,transparent);mask-image:linear-gradient(to top,#000 25%,transparent)}
.tile{position:relative;overflow:hidden;isolation:isolate;height:clamp(150px,22vh,220px);border:1px solid var(--hairline);border-radius:var(--radius-pane);background:var(--paper)}

/* ── Nav: a veil. Enters first, hides on the way down, returns on any scroll up ── */
.nav{position:sticky;top:0;z-index:50;transition:transform var(--d-el) var(--ease)}
.nav.hide{transform:translate3d(0,-100%,0)}
.motion .nav{animation:nav-in var(--d-el) var(--ease) backwards}
.motion.vt .nav{animation:none}   /* arriving through a page transition: the nav never left */
@keyframes nav-in{from{opacity:0;transform:translate3d(0,-100%,0)}}
.nav-in{display:flex;align-items:center;gap:28px;height:var(--nav-h)}
.brand{display:flex;align-items:center;flex:none}
.brand svg{width:92.5px;height:24px}
.links{display:flex;align-items:center;gap:28px;margin-left:auto;font-size:14px}
.links a{color:var(--ink-55);transition:color var(--d-micro) var(--ease)}
.links a:hover,.links a[aria-current]{color:var(--ink-100)}
.links a[aria-current]::after{content:'';position:absolute;left:50%;bottom:-11px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ink)}
.nav .primary{min-height:40px;padding:0 18px;font-size:14px}

/* ── Section scaffold. The opening holds (site.js pins it) and the page rises over it ── */
main>section:not(.hero):not(.phero),.foot{position:relative;z-index:1;background:var(--paper)}
.motion .pin{position:sticky;top:0;z-index:0}
/* the rising page's leading edge: a paper wash that dissolves the held opening from the bottom up */
.wash{position:relative;z-index:1;height:0;pointer-events:none;opacity:0}
.wash::before{content:'';position:absolute;left:0;right:0;bottom:0;height:clamp(120px,24vh,240px);background:linear-gradient(to bottom,rgba(var(--paper-rgb),0),rgba(var(--paper-rgb),.12) 30%,rgba(var(--paper-rgb),.5) 60%,rgba(var(--paper-rgb),.88) 85%,var(--paper))}
.block{position:relative;overflow:hidden;padding:clamp(72px,11vh,128px) 0}
.sh{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:clamp(36px,6vh,64px)}
.sub-h{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:clamp(56px,9vh,96px) 0 clamp(20px,3vh,28px);padding-bottom:12px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
[id]{scroll-margin-top:var(--nav-h)}

/* ── Hairlines: drawn in by scaleX from the left ── */
.block::before,.rows::before,.plus::before,.svc::before,.person::before,.foot::before,.band-sub>div::before,.case-next::before,
.sub-h::after,.row::after,.plus>li::after,.svc-row::after{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--hairline);transform-origin:left center;transition:transform var(--d-reveal) var(--ease)}
.sub-h::after,.row::after,.plus>li::after,.svc-row::after{top:auto;bottom:0}
.motion .ln:is(.block,.rows,.plus,.svc,.person,.foot,.case-next)::before,.motion .band-sub>.ln::before,
.motion .ln:is(.sub-h,.row,.svc-row)::after,.motion .plus>li.ln::after{transform:scaleX(0)}

/* ── Entrances (only when motion is allowed) ── */
.motion .rv,.motion :is(.hero-copy,.phero-copy)>*{opacity:0;transform:translate3d(0,28px,0);transition:opacity var(--d-reveal) var(--ease),transform var(--d-reveal) var(--ease)}
.motion .rv.in,.motion :is(.hero-copy,.phero-copy)>.in{opacity:1;transform:none}
.motion :is(.hero-copy,.phero-copy)>h1{opacity:1;transform:none;visibility:hidden}
.motion :is(.hero-copy,.phero-copy)>h1.cascade{visibility:visible}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .1em .14em 0;margin:0 -.1em -.14em 0}
.motion .cascade .wi{display:inline-block;transform:translate3d(0,112%,0);transition:transform var(--d-reveal) var(--ease)}
.motion .cascade.on .wi{transform:none}
.motion .emb{box-shadow:none}
/* glass condenses onto the page: fill and blur arrive together */
.motion .pane.rv-glass{background-color:rgba(255,255,255,0);-webkit-backdrop-filter:blur(0) saturate(1);backdrop-filter:blur(0) saturate(1);border-color:transparent;box-shadow:none}
.motion .pane.rv-glass.in{background-color:var(--fill-pane);-webkit-backdrop-filter:blur(var(--blur-pane)) saturate(var(--saturate-pane));backdrop-filter:blur(var(--blur-pane)) saturate(var(--saturate-pane));border-color:var(--glass-edge);box-shadow:var(--shadow-pane)}
/* images: inside a fixed frame, from 1.12, under a haze cover that wipes away */
.zi{display:block;transition:transform var(--d-reveal) var(--ease)}
.zi>img,.zi>video{transform-origin:50% 50%}
/* layers only where something moves with the scroll: a mouse or trackpad (site.js) */
@media (hover:hover) and (pointer:fine){.field,.zi>img,.zi>video{will-change:transform}}
.motion .fr .zi{transform:scale(1.12);transition:transform var(--d-orch) var(--ease)}
.motion .fr.fit .zi{transform:scale(1.05)}
.motion .fr.fr-in .zi{transform:none}
.motion .fr::after{content:'';position:absolute;inset:0;z-index:1;background:var(--haze);transform-origin:50% 0;transition:transform var(--d-reveal) var(--ease) var(--fd,0ms)}
.motion .fr.fr-in::after{transform:scaleY(0)}

/* ── Home hero ── */
.hero{position:relative;overflow:hidden;min-height:calc(100svh - var(--nav-h));display:flex;align-items:center}
.hero-field{top:-14%;left:40%;width:60%;height:128%;-webkit-mask-image:linear-gradient(to right,transparent,#000 22%);mask-image:linear-gradient(to right,transparent,#000 22%)}
.hero .wrap{padding-top:clamp(64px,11vh,120px);padding-bottom:clamp(64px,11vh,120px)}
.hero-copy{max-width:min(100%,600px)}
/* hero art: the satellite in the right column, clear of the copy; it drifts, it never travels */
.hero-art{position:absolute;z-index:2;top:0;height:calc(100svh - var(--nav-h));right:max(0px,(100% - 1360px)/2);left:calc(max(0px,(100% - 1360px)/2) + var(--px) + 600px + 3vw);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;pointer-events:none}
/* the wrist meets the bottom of the first screen; the float only ever sinks into that edge, so no gap opens under the hand */
.hero-art img{height:86%;width:auto;max-width:100%;object-fit:contain;object-position:50% 100%}
.motion .hero-art img{animation:art-in var(--d-orch) var(--ease) 600ms backwards,art-float 7s ease-in-out 1800ms infinite}
@keyframes art-in{from{opacity:0;transform:translate3d(0,24px,0)}}
@keyframes art-float{0%,100%{transform:none}50%{transform:translate3d(0,8px,0)}}
.hero .h1{margin-top:24px;max-width:none;font-size:clamp(38px,5vw,70px)}   /* two sentences, one line each, so the buttons stay on the first screen */
.hero .lead{margin-top:28px;max-width:28em}
.hero .body{margin-top:14px;max-width:30em}
.hero-line{margin-top:28px}
.hero-line .sec{margin-top:6px}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:36px}

/* ── Page hero (subpages) ── */
.phero{position:relative;overflow:hidden;padding:clamp(72px,14vh,148px) 0 clamp(56px,9vh,96px)}
.phero .h1{max-width:11em}
.phero .eyebrow+.h1,.phero .back+.eyebrow{margin-top:24px}
.phero .lead{margin-top:24px;max-width:30em}
.phero .body{margin-top:16px;max-width:36em}
.phero-copy{position:relative;z-index:1;max-width:min(100%,780px)}

/* ── Evidence: proof band ── */
.band{margin-top:clamp(44px,7vh,80px);background:var(--haze)}
.band-main{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:clamp(34px,6.5vh,72px)}
.band-sub{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:16px;margin-top:clamp(28px,5vh,48px);padding-bottom:clamp(26px,4.5vh,44px)}   /* row-gap matches the 16px under each rule, so wrapped rows sit evenly between their rules */
.band-sub>div{position:relative;display:flex;align-items:baseline;gap:10px;padding-top:16px}
.band-sub>div+div{padding-left:clamp(16px,2.4vw,32px)}
.met{display:flex;flex-direction:column;justify-content:flex-start;gap:14px;min-width:0}
.met+.met{border-left:1px solid var(--hairline);padding-left:clamp(16px,2.4vw,32px)}
.num{font-size:clamp(40px,4.8vw,84px);line-height:1;letter-spacing:-0.035em;color:var(--ink-100);font-variant-numeric:tabular-nums;white-space:nowrap}
.def{margin-top:-8px;font-size:13px;line-height:1.4;color:var(--ink-44);max-width:16em}

/* ── Strategy: pillars + process ── */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,32px)}
.pillar .tile{margin-bottom:22px}
.tile img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%)}   /* --focus keeps a low subject in the wide tablet band */
.idn{display:flex;align-items:baseline;gap:14px}
.pillar .nm{font-size:clamp(36px,3.8vw,60px)}
.pillar .body{margin-top:14px;max-width:24em}

/* ── The glass law (philosophy) ── */
.law-field{top:-14%;left:0;width:100%;height:128%;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent)}
.law-zone{position:relative}
.law-stage{position:relative;padding:clamp(12px,3vh,40px) 0}
.law .pane{max-width:660px;padding:clamp(28px,3.4vw,48px)}
.law .h2{margin:14px 0 26px}
.law .pane>.h2:first-child{margin-top:0}
.law .body{margin-top:16px;font-size:15px}

/* ── Contact ── */
.contact{padding-bottom:clamp(170px,26vh,280px)}
.contact-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,6vw,96px);align-items:start}
.contact .h1{max-width:8.6em}
.contact .body{margin-top:24px}
.rows{position:relative}
.row{position:relative;display:grid;grid-template-columns:minmax(96px,.34fr) minmax(0,1fr);gap:24px;padding:18px 0}
.row dt{color:var(--ink-100);font-size:15px}
.row dd{color:var(--ink-55);font-size:15px;min-width:0;overflow-wrap:anywhere}
.contact .rows{margin-top:clamp(32px,5vh,48px)}
.form{padding:clamp(24px,3vw,40px)}
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px}
.form label{display:block;margin-bottom:22px}
.form label>.eyebrow{display:block}
.form input,.form textarea{display:block;width:100%;margin-top:4px;padding:10px 0 12px;background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;color:var(--ink-100);font-size:var(--fs-body);
  transition:border-color var(--d-micro) var(--ease),box-shadow var(--d-micro) var(--ease);-webkit-appearance:none;appearance:none}
.form input:focus,.form textarea:focus{outline:none;border-bottom-color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
.form ::placeholder{color:var(--ink-30)}
.form textarea{resize:vertical;min-height:120px}
.form .primary{margin-top:8px}
.fstatus{display:none;margin-top:16px}
.fstatus.on{display:block}
.fstatus.err{color:var(--ink-100)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Footer: the giant wordmark tracks open from +0.06em to +0.16em as it arrives ── */
.foot{padding:clamp(40px,7vh,64px) 0 clamp(28px,5vh,48px);overflow:hidden}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:20px 48px;flex-wrap:wrap}
.foot-mark svg{width:28px;height:28px}
.foot-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 48px}   /* page links, then the social marks */
.foot-links{display:flex;gap:24px;font-size:14px;color:var(--ink-55)}
.foot-links a{transition:color var(--d-micro) var(--ease)}
.foot-links a:hover{color:var(--ink-100)}
.foot-soc{display:flex;gap:10px;margin:-7px;color:var(--ink-55)}
.foot-soc a{display:block;padding:7px;transition:color var(--d-micro) var(--ease)}   /* 32px targets around 18px marks */
.foot-soc a:hover{color:var(--ink-100)}
.foot-soc svg{width:18px;height:18px}
.foot-wm{margin-top:clamp(40px,8vh,88px)}
.foot-wm svg{width:100%;height:auto;overflow:visible}

/* ── Services ── */
.svcs,.people{padding-bottom:clamp(72px,11vh,128px)}
.svc{position:relative}
.svc-row{position:relative;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,5vw,88px);padding:clamp(44px,8vh,88px) 0}
.svc-main .h2{margin-bottom:clamp(20px,3vh,28px);max-width:12em}
.svc-main .copy{max-width:36em}
.plus{position:relative;margin-top:28px;max-width:36em}
.plus li{position:relative;padding:10px 0 10px 26px;color:var(--ink-64);font-size:15px}
.plus li::before{content:'+';position:absolute;left:2px;font-family:var(--font-mono);font-size:13px;color:var(--ink-44)}
.outcome{margin-top:24px;max-width:36em;padding:20px 24px}
.outcome .t{margin-top:6px;font-size:16px;line-height:1.5}
.cta-card{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px 40px;margin-top:clamp(48px,8vh,80px);padding:clamp(28px,4vw,48px)}
.cta-card .body{margin-top:10px}

/* ── Team ── */
.person{position:relative;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,5vw,88px);align-items:start;padding:clamp(44px,8vh,88px) 0}
.person .eyebrow{margin-top:18px}
.person .nm{font-size:clamp(40px,4.6vw,72px)}
.person .copy{max-width:34em}

/* ── Work index ── */
.work{padding-bottom:clamp(72px,11vh,128px)}
.wgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.case-card{display:block}
.case-art{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:4/3;border:1px solid var(--hairline);border-radius:var(--radius-pane);background:var(--haze)}
.case-art .zi,.case-art img{width:100%;height:100%}
.case-art img{object-fit:cover}
/* on hover a card floods with ink and names itself */
.flood{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 16px;padding:24px;background:rgba(var(--ink-rgb),.9);color:var(--paper);font-size:clamp(16px,1.5vw,20px);line-height:1.3;text-align:center;opacity:0;transition:opacity var(--d-el) var(--ease)}
.flood i{flex:none;width:32px;height:1px;background:currentColor;opacity:.5}
@media (hover:hover) and (pointer:fine){
  .case-card:hover .flood{opacity:1;transition-duration:var(--d-reveal);transition-delay:90ms}
}
.case-card:focus-visible .flood{opacity:1}
.case-cap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:6px 14px;padding:18px 4px 0}
.case-cap .sec{grid-column:2}
.case-cap .arr{grid-row:1;grid-column:3;font-family:var(--font-mono);font-size:16px;color:var(--ink-30);transition:transform var(--d-micro) var(--ease),color var(--d-micro) var(--ease)}
.case-card:hover .arr{transform:translateX(4px);color:var(--ink-100)}
.work-cta{grid-column:1/-1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:clamp(260px,34vh,340px);margin-top:clamp(12px,2vh,20px);border:1px solid var(--hairline);border-radius:var(--radius-pane)}
.wgrid>.work-cta:nth-child(even){grid-column:auto;margin-top:0;min-height:0;aspect-ratio:4/3;align-self:start}   /* an odd number of cases: the invitation takes the open cell */
.work-cta .pane{display:flex;flex-direction:column;align-items:center;gap:18px;margin:0 20px;padding:clamp(24px,3vw,36px) clamp(28px,4vw,48px);text-align:center}

/* ── Referral partners (Services) ── */
.referral .ctas{margin-top:28px}

/* ── Not found: the opening, with the mark's field on the open side ── */
.nf{min-height:calc(100svh - var(--nav-h));display:flex;align-items:center}
.nf-field{top:-14%;left:42%;width:58%;height:128%;-webkit-mask-image:linear-gradient(to right,transparent,#000 24%);mask-image:linear-gradient(to right,transparent,#000 24%)}

/* ── Case study ── */
.back{display:inline-flex;align-items:center;gap:8px;transition:color var(--d-micro) var(--ease)}
.back:hover{color:var(--ink-100)}
.case-meta{margin-top:clamp(32px,5vh,48px);max-width:720px}
.case-meta a{color:var(--ink-100)}
/* ── Case showcase: one opening piece, then chapters (a .sub-h each) of rows drawn from five patterns —
   .r-full, .r-pair, .r-trio, .r-wl (7|5) and .r-wr (5|7). Crops are cut so a row's pieces share a height,
   and no two neighbouring rows repeat a pattern. Web pages sit in a bare .win, mockups and art in a .shot. ── */
.shot{position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--hairline);border-radius:var(--radius-pane);background:var(--haze)}   /* isolation, here and on every rounded frame: Safari keeps the corners while the image inside moves */
.shot img,.shot video{width:100%;height:auto}
.win{position:relative;overflow:hidden;isolation:isolate;border-radius:14px;background:var(--paper);box-shadow:0 0 0 1px var(--hairline),0 18px 48px rgba(11,11,12,.08)}
.win img{display:block;width:100%;height:auto}
.opener figcaption,.rw figcaption{padding:12px 4px 0}
.opener.sq{max-width:760px;margin:0 auto}   /* a square piece, not a full-bleed slab */
.rw{display:grid;gap:clamp(12px,1.6vw,20px);align-items:start}
.rw+.rw{margin-top:clamp(24px,4vh,44px)}
.r-full{grid-template-columns:minmax(0,1fr)}
.r-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.r-trio{grid-template-columns:repeat(3,minmax(0,1fr))}
.r-wl{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}   /* 7:5 widths: the narrow crop is 5/7 the wide one's ratio */
.r-wr{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
/* the opener's stage: the client's ground holding a page window, which drifts (data-drift, site.js) */
.stage{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:16/10;border-radius:var(--radius-pane);background:var(--ground,var(--haze))}
.stage>.win{position:absolute;left:12%;top:10%;width:76%;box-shadow:0 40px 90px rgba(11,11,12,.3)}   /* runs off the foot */
.case-body{max-width:min(100%,74%)}
.case-body .copy>.eyebrow:not(:first-child),.case-body .outcome{margin-top:36px}   /* challenge, approach, outcome: each part opens with room above */
.case-next{position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px 40px;margin-top:clamp(48px,8vh,80px);padding-top:24px}
.case-next a .h3{transition:opacity var(--d-micro) var(--ease)}
.case-next a:hover .h3{opacity:.64}

/* ── Between pages: the next page rises over the last like a sheet; the nav holds.
   Mouse and trackpad only: on a phone it would play on top of the browser's own swipe back ── */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  @view-transition{navigation:auto}
  .nav{view-transition-name:nav}
  ::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
  ::view-transition-old(root){animation:vt-dim var(--d-reveal) var(--ease) both}
  ::view-transition-new(root){animation:vt-rise var(--d-reveal) var(--ease) both}
  /* going back, the sheet drops away and the page beneath brightens */
  html:active-view-transition-type(back)::view-transition-old(root){z-index:1;animation-name:vt-drop}
  html:active-view-transition-type(back)::view-transition-new(root){animation-name:vt-lift}
}
@keyframes vt-dim{to{opacity:.35}}
@keyframes vt-rise{from{transform:translate3d(0,100vh,0)}}
@keyframes vt-drop{to{transform:translate3d(0,100vh,0)}}
@keyframes vt-lift{from{opacity:.35}}

/* ── Touch: nothing follows the scroll (site.js); entrances run shorter and travel less, so a fast flick never lands on blank space ── */
@media not all and (hover:hover) and (pointer:fine){
  :root{--d-reveal:600ms;--d-orch:900ms}
  .motion .rv,.motion :is(.hero-copy,.phero-copy)>*{transform:translate3d(0,18px,0)}
  .motion .fr .zi{transform:scale(1.06)}
}

/* ── Responsive ── */
@media (max-width:1100px){
  .hero-copy{max-width:min(100%,520px)}
  .hero-art{left:calc(var(--px) + 520px + 3vw)}
  .band-main,.band-sub{grid-template-columns:repeat(2,minmax(0,1fr))}
  .met:nth-child(3){border-left:0;padding-left:0}
  .met:nth-child(n+3){margin-top:32px}
  .band-sub>div:nth-child(3){padding-left:0}
}
@media (max-width:900px){
  .f-right,.f-wide{display:none}
  .split,.contact-g,.svc-row,.person,.pillars{grid-template-columns:minmax(0,1fr)}
  .hero{display:block;min-height:0}
  .hero .wrap{padding-top:56px;padding-bottom:calc(min(88vw,420px) + 48px)}   /* 40px clear between the buttons and the phone */
  .hero-field{top:auto;bottom:-30px;left:0;width:100%;height:calc(min(88vw,420px) + 60px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 26%);mask-image:linear-gradient(to bottom,transparent,#000 26%)}
  .hero-art{top:auto;bottom:0;left:0;right:0;height:calc(min(88vw,420px) + 8px)}
  .hero-art img{height:100%;max-width:92%}
  .nf{display:block;min-height:0;padding-bottom:calc(min(88vw,420px) + 24px)}
  .nf-field{top:auto;bottom:-30px;left:0;width:100%;height:calc(min(88vw,420px) + 60px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 26%);mask-image:linear-gradient(to bottom,transparent,#000 26%)}
  .pillars{gap:40px}
  .law-stage{padding:0 0 clamp(150px,44vw,260px)}
  .wgrid{grid-template-columns:minmax(0,1fr)}
  .r-pair,.r-trio,.r-wl,.r-wr{grid-template-columns:minmax(0,1fr)}
  .stage{aspect-ratio:1}
  .stage>.win{left:6%;top:12%;width:88%}
  .case-body{max-width:100%}
  .svc-main .h2{max-width:none}
}
@media (max-width:640px){
  body{--nav-h:110px}
  .nav-in{flex-wrap:wrap;height:auto;padding-top:12px;gap:0}
  .nav .primary{margin-left:auto}
  .links{order:3;flex-basis:100%;margin:12px 0 0;height:42px;gap:24px;border-top:1px solid var(--hairline)}
  .links a[aria-current]::after{bottom:-7px}
  .phero{padding-top:48px}
  .band-main,.band-sub{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .num{font-size:clamp(34px,10vw,44px)}
  .frow{grid-template-columns:minmax(0,1fr)}
  .form .primary{width:100%}
  .row{grid-template-columns:minmax(0,1fr);gap:2px;padding:14px 0}
  .foot-top{flex-direction:column;align-items:flex-start}
  .cta-card .primary,.case-next .primary{width:100%}
  .nm{font-size:clamp(36px,11vw,48px)}
  .pillar .nm,.person .nm{font-size:clamp(36px,11vw,48px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .chip:hover,.primary:hover{transform:none}
}