/* Swiss Motion: 12-column grid, Archivo, one red, 3D motion from site.js. Design rules: DESIGN.md. */
:root{
  --b:17px;
  --fs-fine:calc(var(--b) * .75);
  --fs-body:var(--b);
  --fs-sub:calc(var(--b) * 1.5);
  --fs-head:calc(var(--b) * 3);
  --fs-title:calc(var(--b) * 6);
  --u:8px;
  --sans:'Archivo',system-ui,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,.84,.24,1);

  /* Palette: Signal. Paper page, black stage, one red. */
  --paper:#ffffff; --paper-2:#f3f3f1; --ink:#0a0a0a; --muted:#595959; --rule:#d2d2d0;
  --accent:#e3131b;
  --stage:#0a0a0a; --stage-ink:#f5f5f2; --stage-muted:#a3a3a0; --stage-rule:rgba(255,255,255,.12); --stage-accent:#ff3030;
}
@media (max-width:640px){:root{--b:16px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;font-variant-numeric:tabular-nums}
p,h1,h2,h3,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:24px;top:-96px;background:var(--ink);color:var(--paper);padding:16px 24px;z-index:50;text-decoration:none}
.skip-link:focus{top:8px}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}

.wrap{max-width:1168px;margin:0 auto;padding:0 24px}
@media (max-width:640px){.wrap{padding:0 16px}}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}

/* ---------- header: transparent over the stage, paper after it ---------- */
.top{position:sticky;top:0;z-index:40;color:var(--stage-ink);transition:background-color .3s,color .3s,box-shadow .3s}
.scrolled .top{background:var(--stage);box-shadow:inset 0 -1px 0 var(--stage-rule)}
.past .top{background:var(--paper);color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
.bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;column-gap:24px;min-height:64px}
.brand{display:inline-flex;align-items:center;min-height:48px;font-weight:800;font-stretch:112%;letter-spacing:-.01em;text-decoration:none}
.nav{display:flex;flex-wrap:wrap;column-gap:24px}
.nav a{display:inline-flex;align-items:center;min-height:48px;font-size:var(--fs-body);font-weight:500;text-decoration:none}
.nav a:hover,.nav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:currentColor;transform-origin:0 50%;transform:scaleX(var(--page-p,0))}
@media (max-width:900px){.nav{column-gap:16px}.nav a{font-size:var(--fs-fine)}}
@media (max-width:640px){.top{position:absolute;left:0;right:0}.scrolled .top,.past .top{background:transparent;color:var(--stage-ink);box-shadow:none}.stage{margin-top:0}.stage .stage-inner{padding-top:128px}.progress{display:none}}

/* ---------- stage: full-bleed hero ---------- */
.stage{position:relative;background:var(--stage);color:var(--stage-ink);margin-top:-64px;padding-top:64px;overflow:clip}
.stage-home{min-height:100svh;display:flex;flex-direction:column}
.stage-inner{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-top:64px;padding-bottom:48px}
.stage-home-inner{justify-content:space-between;row-gap:64px}
.poster{font-family:var(--mono);font-size:var(--fs-fine);line-height:1.5;color:var(--stage-ink);row-gap:16px}
.poster li{grid-column:span 3;max-width:240px}
.poster li:first-child{grid-column:1 / 4}
.poster li:nth-child(2){grid-column:7 / 9}
.poster li:last-child{grid-column:10 / 13}
.poster span{display:block;color:var(--stage-muted)}
@media (max-width:860px){.poster li,.poster li:first-child,.poster li:nth-child(2),.poster li:last-child{grid-column:span 6}}
.kicker{font-family:var(--mono);font-size:var(--fs-fine);line-height:1.5;color:var(--stage-muted)}

/* the 3D slab: headline + extruded copies, tilted by pointer (--tx/--ty) and scroll (--p) */
.slab-wrap{perspective:1400px;perspective-origin:30% 50%}
.slab{position:relative;transform-style:preserve-3d;transform:rotateX(calc(var(--ty,0) * 1deg + var(--p,0) * 38deg)) rotateY(calc(var(--tx,0) * 1deg)) translateZ(calc(var(--p,0) * -160px));transform-origin:50% 100%;will-change:transform}
h1,.slab .layer{font-size:var(--fs-head);font-weight:800;font-stretch:112%;line-height:.98;letter-spacing:-.035em;max-width:1080px;overflow-wrap:break-word;text-wrap:balance}
@media (min-width:1024px){h1,.slab .layer{font-size:var(--fs-title);line-height:.92}}
.slab .layer{position:absolute;inset:0;margin:0;pointer-events:none;color:color-mix(in srgb,var(--stage-ink) 26%,var(--stage));transform:translateZ(calc(var(--k) * -1px * (var(--p,0) * 3.2 + var(--tm,0) * 3)))}
.slab .layer:first-child{color:color-mix(in srgb,var(--stage-ink) 12%,var(--stage))}
.w{display:inline-block;perspective:800px;padding-bottom:.08em;margin-bottom:-.08em}
.wi{display:inline-block;transform-origin:50% 100%}
.js-motion .stage .wi{animation:hinge 1.1s var(--ease) both;animation-delay:calc(200ms + var(--i) * 70ms)}
@keyframes hinge{from{transform:rotateX(-100deg) translateY(.3em);opacity:0}to{transform:none;opacity:1}}

.hero-row{margin-top:48px;border-top:1px solid var(--stage-rule);padding-top:24px;row-gap:32px;align-items:start}
.proof{grid-column:1 / 5}
.hero-sub{grid-column:5 / 13}
.proof-v{font-size:var(--fs-head);font-weight:800;font-stretch:112%;line-height:1;letter-spacing:-.03em;color:var(--stage-accent)}
.proof-l{margin-top:16px;font-family:var(--mono);font-size:var(--fs-fine);line-height:1.5;color:var(--stage-muted);max-width:320px}
.hero-sub p{font-size:var(--fs-sub);font-weight:500;line-height:1.3;letter-spacing:-.01em;max-width:680px}
.hero-sub .cta-row{margin-top:32px}
.js-motion .stage .fade{animation:rise .9s var(--ease) both;animation-delay:var(--d,900ms)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (max-width:1023px){.proof,.hero-sub{grid-column:1 / 13}}

/* subpage stage */
.stage-sub .stage-inner{padding-top:96px;padding-bottom:48px}
.crumb{display:flex;flex-wrap:wrap;align-items:center;column-gap:24px;font-family:var(--mono);font-size:var(--fs-fine);color:var(--stage-muted);margin-bottom:32px}
.crumb a,.crumb span{display:inline-flex;align-items:center;min-height:44px}.crumb a{color:var(--stage-ink)}
.lede{margin-top:32px;font-size:var(--fs-sub);font-weight:500;line-height:1.3;letter-spacing:-.01em;max-width:760px}
.meta{margin-top:48px;border-top:1px solid var(--stage-rule);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px}
.meta div{padding-top:16px}
.meta dt{font-family:var(--mono);font-size:var(--fs-fine);color:var(--stage-muted)}
.meta dd{margin-top:8px;font-size:var(--fs-body);line-height:1.4}
@media (max-width:860px){.meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:24px}}
@media (max-width:480px){.meta{grid-template-columns:minmax(0,1fr)}}

/* ---------- sections ---------- */
.sec{padding:96px 0;position:relative}
.sec-alt{background:var(--paper-2)}
.sec-dark{background:var(--stage);color:var(--stage-ink);--ink:var(--stage-ink);--muted:var(--stage-muted);--rule:var(--stage-rule)}
.sec-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:32px}
.rail{grid-column:1 / 4;position:relative}
.sec-body{grid-column:4 / 13;min-width:0}
.sec-head{position:relative;padding-top:24px}
.sec-head::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform-origin:0 50%}
.sec-no{font-family:var(--mono);font-size:var(--fs-fine);line-height:1.5;color:var(--muted);margin-bottom:8px}
h2{font-size:var(--fs-sub);font-weight:800;font-stretch:112%;line-height:1.1;letter-spacing:-.02em}
.rail-note{margin-top:16px;color:var(--muted);max-width:260px}
.sticky{position:sticky;top:96px}
@media (max-width:1023px){.rail,.sec-body{grid-column:1 / 13}.sticky{position:static}}
@media (max-width:640px){.sec{padding:64px 0}}

/* ---------- reveals (only when JS + motion are on) ---------- */
[data-r]{transition:transform 1s var(--ease),opacity .7s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js-motion [data-r="flip"]:not(.in){opacity:0;transform:perspective(1200px) rotateX(-70deg) translateY(32px);transform-origin:50% 0}
.js-motion [data-r="rise"]:not(.in){opacity:0;transform:translateY(48px)}
.js-motion [data-r="coin"]:not(.in){opacity:0;transform:perspective(800px) rotateY(-180deg)}
.js-motion .sec-head::before{transition:transform 1.2s var(--ease)}
.js-motion .sec-head:not(.in)::before{transform:scaleX(0)}
.js-motion .sec-head:not(.in) .sec-no,.js-motion .sec-head:not(.in) h2{opacity:0;transform:translateY(24px)}
.sec-head .sec-no,.sec-head h2{transition:transform .9s var(--ease) .2s,opacity .7s var(--ease) .2s}

/* odometer digits */
.odo-d{display:inline-block;height:1em;line-height:1;overflow:hidden;vertical-align:top;perspective:400px}
.odo-s{display:flex;flex-direction:column;transform:translateY(calc(var(--n) * -1em)) rotateX(0);transition:transform 1.6s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.odo-s span{display:block;height:1em;line-height:1}
.odo:not(.in) .odo-s{transform:translateY(0) rotateX(-40deg)}
.odo .odo-c{display:inline-block;line-height:1}

/* ---------- stats ---------- */
.stat{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:24px;row-gap:8px;padding:32px 0;border-top:1px solid var(--rule);align-items:end}
.stat:first-child{border-top:0;padding-top:0}
.stat-v{grid-column:1 / 6;font-size:var(--fs-head);font-weight:800;font-stretch:112%;line-height:1;letter-spacing:-.03em}
.stat-d{grid-column:6 / 10}
.stat-l{font-weight:700}
.stat-b{margin-top:8px;font-family:var(--mono);font-size:var(--fs-fine);line-height:1.5;color:var(--muted)}
@media (max-width:1023px){.stat-v,.stat-d{grid-column:1 / 10}}

/* ---------- case sheets: stack and recede in 3D ---------- */
.sheets{display:grid;row-gap:24px;perspective:1600px}
.sheet{background:var(--paper);border:1px solid var(--ink);padding:32px;transform-origin:50% 0;transform:translateZ(calc(var(--p,0) * -120px)) rotateX(calc(var(--p,0) * 8deg));filter:brightness(calc(1 - var(--p,0) * .12))}
@media (max-width:1023px),(max-height:719px){
  .sheet{transform-origin:50% 100%;transform:perspective(1200px) rotateX(calc((1 - var(--e,1)) * 26deg)) scale(calc(.92 + var(--e,1) * .08));filter:none}
  .js-motion .sheet{transform:perspective(1200px) rotateX(calc((1 - var(--e,0)) * 26deg)) scale(calc(.92 + var(--e,0) * .08))}
}
@media (min-width:1024px) and (min-height:720px){
  .sheet{position:sticky;top:calc(96px + var(--k) * 24px);min-height:440px}
  .sheets{row-gap:48px}
}
.sheet-top{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:24px;row-gap:8px;font-family:var(--mono);font-size:var(--fs-fine);color:var(--muted);border-bottom:1px solid var(--rule);padding-bottom:16px}
.sheet-cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:48px;row-gap:32px;margin-top:32px}
.sheet h3{font-size:var(--fs-head);font-weight:800;font-stretch:112%;line-height:1;letter-spacing:-.03em}
.tension{margin-top:24px;font-size:var(--fs-sub);font-weight:500;line-height:1.3;letter-spacing:-.01em;max-width:560px}
.metrics{border-top:1px solid var(--ink)}
.metrics li{padding:16px 0;border-bottom:1px solid var(--rule)}
.metrics li:last-child{border-bottom:0}
.m-v{display:block;font-size:var(--fs-sub);font-weight:800;font-stretch:112%;line-height:1.1;letter-spacing:-.02em}
.m-l{display:block;margin-top:8px;font-family:var(--mono);font-size:var(--fs-fine);line-height:1.5;color:var(--muted)}
.note{margin-top:16px;font-family:var(--mono);font-size:var(--fs-fine);line-height:1.5;color:var(--muted)}
@media (max-width:860px){.sheet{padding:24px 16px}.sheet-cols{grid-template-columns:minmax(0,1fr)}}

/* text link with static arrow */
.more{display:inline-flex;align-items:center;min-height:44px;gap:8px;text-decoration:none;font-weight:600}
.more span:first-child{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.more:hover span:first-child{text-decoration-thickness:2px}
.more-wrap{margin-top:24px}

/* ---------- builder ---------- */
.bld{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;row-gap:16px;padding:32px 0;border-top:1px solid var(--rule)}
.bld:first-child{border-top:0;padding-top:0}
.idx{font-family:var(--mono);font-size:var(--fs-fine);line-height:1.5;color:var(--muted)}
.bld h3{margin-top:8px;font-size:var(--fs-sub);font-weight:800;font-stretch:112%;line-height:1.1;letter-spacing:-.02em}
.bld img{margin-top:24px;width:120px;height:120px}
.bld-r p + p{margin-top:8px}
.ctx{margin-top:8px;font-family:var(--mono);font-size:var(--fs-fine);line-height:1.5;color:var(--muted)}
.bld-r .more-wrap{margin-top:8px}
@media (max-width:1023px){.bld{grid-template-columns:minmax(0,1fr)}}

/* ---------- timeline with a rule that draws as you scroll ---------- */
.tl{position:relative;padding-left:32px}
.tl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--rule)}
.tl::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ink);transform-origin:50% 0;transform:scaleY(var(--p,1))}
.js-motion .tl::after{transform:scaleY(var(--p,0))}
.tl-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);column-gap:24px;row-gap:8px;padding:24px 0;border-bottom:1px solid var(--rule);align-items:baseline;position:relative}
.tl-row::before{content:"";position:absolute;left:-36px;top:32px;width:9px;height:9px;background:var(--ink)}
.tl-dt{font-family:var(--mono);font-size:var(--fs-fine);line-height:1.5;color:var(--muted)}
.tl-role{font-weight:700;line-height:1.3}
.tl-org{color:var(--muted)}
@media (max-width:860px){.tl-row{grid-template-columns:minmax(0,1fr)}}

/* résumé role detail */
.xp-row{grid-template-columns:minmax(0,3fr) minmax(0,9fr);padding:32px 0}
.xp-t{font-size:var(--fs-sub);font-weight:800;font-stretch:112%;line-height:1.15;letter-spacing:-.02em}
.xp-i{margin-top:16px;max-width:680px}
.dash{margin-top:16px;max-width:680px}
.dash li{position:relative;padding:8px 0 8px 24px;border-top:1px solid var(--rule)}
.dash li::before{content:"";position:absolute;left:0;top:20px;width:8px;height:1px;background:var(--ink)}
@media (max-width:860px){.xp-row{grid-template-columns:minmax(0,1fr)}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-family:var(--mono);font-size:var(--fs-fine);border:1px solid var(--ink);padding:8px 16px;border-radius:999px}

/* ---------- case-study body ---------- */
.toc{margin-top:24px;border-top:1px solid var(--rule)}
.toc a{display:flex;align-items:center;gap:16px;min-height:44px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--muted);transition:color .2s}
.toc a span{font-family:var(--mono);font-size:var(--fs-fine)}
.toc a[aria-current="true"]{color:var(--ink);font-weight:700}
.toc-count{font-family:var(--mono);font-size:var(--fs-fine);color:var(--muted)}
.chapter + .chapter{margin-top:96px}
.chapter h2{font-size:var(--fs-head);line-height:1;letter-spacing:-.03em}
.prose{margin-top:32px;max-width:680px}
.prose p + p{margin-top:16px}
.prose p{font-size:var(--fs-body);line-height:1.65}
.prose .big{font-size:var(--fs-sub);font-weight:500;line-height:1.35;letter-spacing:-.01em}
.steps{margin-top:32px;border-top:1px solid var(--ink);max-width:760px}
.steps li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:16px;padding:24px 0;border-bottom:1px solid var(--rule)}
.steps li span{color:var(--muted)}
.pull{margin-top:48px;padding:32px 0 0;border-top:2px solid var(--ink);font-size:var(--fs-sub);font-weight:700;font-stretch:112%;line-height:1.25;letter-spacing:-.015em;max-width:760px}
details{margin-top:32px;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);max-width:760px}
summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;cursor:pointer;font-weight:700;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);font-size:var(--fs-sub);font-weight:400;transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details .prose{margin-top:8px;padding-bottom:24px}
details h3{font-size:var(--fs-body);font-weight:700;margin-top:24px}

/* screenshots on a plane that straightens as it scrolls in */
.plane-wrap{perspective:1600px;margin-top:48px}
.plane{transform-origin:50% 100%;transform:rotateX(calc((1 - var(--p,1)) * 28deg)) scale(calc(.9 + var(--p,1) * .1));border:1px solid var(--ink);background:var(--paper)}
.js-motion .plane{transform:rotateX(calc((1 - var(--p,0)) * 28deg)) scale(calc(.9 + var(--p,0) * .1))}
.plane img{width:100%}
figcaption{margin-top:16px;font-family:var(--mono);font-size:var(--fs-fine);color:var(--muted)}
.shots{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);column-gap:24px;row-gap:24px;align-items:end}
@media (max-width:860px){.shots{grid-template-columns:minmax(0,1fr)}.shots .phone{max-width:280px}}

/* next case: the whole panel tilts toward the pointer */
.next{display:block;perspective:1200px;text-decoration:none}
.next-in{border:1px solid var(--ink);padding:48px 32px;transform:rotateX(calc(var(--ty,0) * 1deg)) rotateY(calc(var(--tx,0) * 1deg));transition:background-color .3s,color .3s}
.next:hover .next-in{background:var(--ink);color:var(--paper)}
.next .k{font-family:var(--mono);font-size:var(--fs-fine);color:inherit;opacity:.75}
.next .t{margin-top:16px;font-size:var(--fs-head);font-weight:800;font-stretch:112%;line-height:1;letter-spacing:-.03em}
.next .s{margin-top:16px;max-width:560px}

/* ---------- contact: bright ending ---------- */
.contact-h{font-size:var(--fs-head);font-weight:800;font-stretch:112%;line-height:1;letter-spacing:-.03em;max-width:760px}
.contact-p{margin-top:24px;font-size:var(--fs-sub);font-weight:500;line-height:1.3;letter-spacing:-.01em;max-width:560px}
.contact .cta-row{margin-top:32px}
.contact .more-wrap{margin-top:16px}

/* ---------- CTA: 48px pill, the only filled control ---------- */
.cta{--bg:var(--ink);--fg:var(--paper);display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:1px solid var(--bg);border-radius:999px;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:var(--fs-body);font-weight:600;line-height:1;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,transform .15s}
.stage .cta,.sec-dark .cta{--bg:var(--stage-ink);--fg:var(--stage)}
.cta:hover{background:transparent;color:var(--bg)}
.cta:active{transform:scale(.97)}
.cta[data-state="done"]{background:transparent;color:var(--bg);border-style:dashed}

/* ---------- footer ---------- */
.foot{border-top:2px solid var(--ink);padding:16px 0 32px}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:24px}
.foot p{font-family:var(--mono);font-size:var(--fs-fine);color:var(--muted)}
.foot ul{display:flex;flex-wrap:wrap;column-gap:24px}
.foot a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:var(--fs-fine);text-underline-offset:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
  .slab,.sheet,.plane,.next-in{transform:none !important;filter:none !important}
}
@media (max-width:640px){
  
}

/* ---------- site pages: title tail, media, storyboard, forms, about ---------- */
.h1-name{display:block}
.slab .layer .h1-tail{visibility:hidden}
.h1-tail{display:block;margin-top:16px;font-size:var(--fs-sub);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--stage-muted)}
.stage-links{margin-top:24px}
.cta-row{margin-top:32px}
.prose a,.contact-p a,.meta a{text-underline-offset:4px}
.meta dd a{display:inline-flex;align-items:center;min-height:44px}
.media-list{margin-top:48px;display:grid;row-gap:48px}
.media{aspect-ratio:var(--ar);overflow:hidden;background:var(--paper-2)}
.media img,.media video{display:block;width:100%;height:100%;object-fit:cover}
.media-fig[data-shape="portrait"]{max-width:360px}
.beats{margin-top:48px;border-top:1px solid var(--ink)}
.beats li{padding:24px 0;border-bottom:1px solid var(--rule)}
.beats h3{font-size:var(--fs-sub);font-weight:800;font-stretch:112%;line-height:1.15;letter-spacing:-.02em}
.beats p{margin-top:8px;max-width:640px}
.media-grid{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.media-grid .plane-wrap{margin-top:0}
@media (max-width:640px){.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.case-foot{margin-top:48px;display:flex;flex-wrap:wrap;column-gap:32px;border-top:1px solid var(--rule);padding-top:16px}
.chapter + details,.chapter + .build-notes{margin-top:96px}
.about-photo{max-width:320px;margin-bottom:48px}
.about .chapter + .chapter{margin-top:48px}
.contact-form{margin-top:32px;display:grid;row-gap:16px;max-width:560px}
.contact-form[hidden]{display:none}
.contact-form label{display:grid;row-gap:8px;font-weight:600}
.contact-form input,.contact-form textarea{font:inherit;font-weight:400;color:var(--ink);background:var(--paper);border:1px solid var(--ink);border-radius:0;padding:8px 16px;min-height:48px}
.contact-form .check{display:flex;column-gap:8px;align-items:flex-start;font-weight:400}
.contact-form .check input{min-height:24px;width:24px;margin:0}
.contact-form .hp{position:absolute;left:-9999px}
.form-status{color:var(--muted)}
button.cta{font-family:var(--sans)}

/* ---------- print (résumé PDF) ---------- */
@media print{
  .top,  .stage,.sec-dark{background:#fff !important;color:#000 !important;--stage-ink:#000;--stage-muted:#444;--stage-rule:#ccc;--ink:#000;--muted:#444;--rule:#ccc}
  .stage{margin-top:0;padding-top:0;min-height:0}
  .stage-inner{padding:0 0 16px}
  .sec{padding:16px 0}
  .slab .layer{display:none}
  .slab{transform:none !important}
  h1,.slab .layer{font-size:var(--fs-head)}
  .sticky{position:static}
  *,*::before,*::after{animation:none !important;transition:none !important}
  [data-r],.fade,.wi,.sec-head .sec-no,.sec-head h2{opacity:1 !important;transform:none !important}
  .sec-head::before{transform:none !important}
  .odo .odo-s{transform:translateY(calc(var(--n) * -1em)) !important}
  .tl::after{display:none}
  .xp-row{padding:16px 0}
  .dash li{break-inside:avoid}
  .sec-grid{display:block}
  .rail{margin-bottom:16px}
  .meta{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lede{font-size:var(--fs-body)}
  .tl{padding-left:0}
  .tl-row::before,.tl::before{display:none}
}