@font-face{font-family:Inter;src:url('./assets/fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --bg:#f5f5f7;--ink:#1d1d1f;--muted:#5f6068;--faint:#86868b;--line:rgb(29 29 31/.12);
  --accent:#2f62e0;--gutter:clamp(22px,5.2vw,84px);--max:1180px;--ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-feature-settings:'cv11','ss01';
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);overflow-x:clip}
h1,h2,h3,p,ol,ul{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
::selection{background:#cfdcff}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px}.skip:focus{top:12px}

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;background:rgb(245 245 247/.62);backdrop-filter:saturate(170%) blur(14px);-webkit-backdrop-filter:saturate(170%) blur(14px);box-shadow:0 1px 0 rgb(0 0 0/.05)}
.nav-inner{max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;height:56px;padding:0 var(--gutter);display:flex;align-items:center;gap:34px}
.brand{display:inline-flex;align-items:center;white-space:nowrap}
.brand span{font-size:15px;font-weight:700;letter-spacing:.14em;line-height:1}
.nav-links{display:flex;gap:28px;margin-left:auto;font-size:13px;color:#424245}
.nav-links a{transition:color .15s}.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current=page]{color:var(--ink);font-weight:500}.menu-panel a[aria-current=page]{color:var(--accent)}
.nav-cta{font-size:13px;font-weight:500;background:var(--ink);color:#fff;padding:8px 16px;border-radius:980px;transition:background .15s,transform .15s}
.nav-cta:hover{background:#000;transform:scale(1.02)}
.menu{display:none;background:none;border:0;padding:12px 0 12px 12px;margin-left:auto;cursor:pointer}
.menu span{display:block;width:18px;height:1.5px;background:var(--ink);margin:4px 0;transition:transform .2s}
.menu[aria-expanded=true] span:first-child{transform:translateY(2.75px) rotate(45deg)}.menu[aria-expanded=true] span:last-child{transform:translateY(-2.75px) rotate(-45deg)}
.menu-panel{padding:8px var(--gutter) 26px;border-top:1px solid var(--line)}
.menu-panel a{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em;padding:9px 0}

/* ---------- Type and controls ---------- */
.eyebrow{font-size:14px;font-weight:600;color:var(--accent);margin-bottom:16px}
h1{font-size:clamp(44px,5.6vw,88px);font-weight:650;letter-spacing:-.045em;line-height:1.02;
   background:linear-gradient(180deg,#1d1d1f 40%,#5c6068);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
h2{font-size:clamp(32px,3.5vw,54px);font-weight:650;letter-spacing:-.038em;line-height:1.06}
h3{font-size:clamp(19px,1.5vw,22px);font-weight:620;letter-spacing:-.02em;line-height:1.25}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--muted);margin-top:24px;max-width:520px}
.actions{display:flex;align-items:center;gap:26px;margin-top:32px;flex-wrap:wrap}
.button{display:inline-block;background:var(--ink);color:#fff;font-size:16px;font-weight:500;padding:14px 24px;border-radius:980px;transition:background .15s,transform .15s var(--ease)}
.button:hover{background:#000;transform:scale(1.02)}.button:active{transform:scale(.98)}
.link{color:var(--accent);font-size:16px;font-weight:500}.link:hover{text-decoration:underline;text-underline-offset:3px}
.kicker{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--accent);margin-bottom:18px}
.kicker span{font-variant-numeric:tabular-nums;color:var(--faint);font-weight:500}
.beat > p:not(.kicker):not(.meta):not(.eyebrow):not(.lede){font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--muted);margin-top:18px}
.meta{display:flex;gap:10px;align-items:baseline;margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--faint)}
.meta span{color:var(--ink);font-weight:600}
.beat .link{display:inline-block;margin-top:22px}

.services{list-style:none;padding:0;margin-top:22px;display:grid;gap:4px}
.services li{display:grid;grid-template-columns:14px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.services li:first-child{border-top:0}
.services i{width:7px;height:7px;border-radius:50%;background:#c7c8cc;margin-top:8px;transition:background .4s,box-shadow .4s}
.services li.is-lit i{background:var(--accent);box-shadow:0 0 0 4px rgb(47 98 224/.12),0 0 14px rgb(47 98 224/.55)}
.services p{font-size:15px;line-height:1.5;color:var(--muted);margin-top:4px}

/* ---------- The persistent scene ---------- */
.scene{position:fixed;inset:0;z-index:0;background:var(--bg);overflow:hidden}
.scene-poster,.scene-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene-canvas{opacity:0;transition:opacity .5s}
.scene-ready .scene-canvas{opacity:1}
.shade,.scene-veil{position:absolute;inset:0;pointer-events:none;opacity:0}
.shade-left{background:linear-gradient(90deg,rgb(245 245 247/.94) 0%,rgb(245 245 247/.78) 30%,rgb(245 245 247/0) 56%);opacity:var(--sl,0)}
.shade-right{background:linear-gradient(270deg,rgb(245 245 247/.94) 0%,rgb(245 245 247/.78) 32%,rgb(245 245 247/0) 58%);opacity:var(--sr,0)}
.shade-bottom{background:linear-gradient(0deg,rgb(245 245 247/.96) 0%,rgb(245 245 247/.84) 30%,rgb(245 245 247/0) 60%);opacity:var(--sb,0)}
.shade-top{background:linear-gradient(180deg,rgb(245 245 247/.96) 0%,rgb(245 245 247/.84) 34%,rgb(245 245 247/0) 62%);opacity:var(--st,0)}
.scene-veil{background:var(--bg);opacity:var(--veil,0)}
.rail{display:none}

main{position:relative;z-index:1}

/* ---------- Static layout (no JavaScript, or reduced motion) ---------- */
html:not(.js) .scene-veil,.static .scene-veil{opacity:.8}
.static .scene-poster{filter:blur(6px);transform:scale(1.03)}
.journey{padding-top:96px}
.beat{max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:64px var(--gutter)}
.beat-hero{padding-top:72px;padding-bottom:96px}
.reading{max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:clamp(80px,11vh,140px) var(--gutter)}
.finale{padding:clamp(90px,14vh,170px) var(--gutter);text-align:center}
.finale .actions{justify-content:center}
.finale-copy p{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--muted);max-width:560px;margin:22px auto 0}
.finale h2{font-size:clamp(38px,4.6vw,68px);text-wrap:balance}

/* ---------- Immersive layout ---------- */
.js:not(.static) .journey{padding:0;height:870vh}
.js:not(.static) .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.js:not(.static) .beat{position:absolute;top:0;bottom:0;margin:0;padding:0;max-width:none;display:flex;flex-direction:column;justify-content:center;visibility:hidden}
.js:not(.static) .beat [data-r],.js:not(.static) .services li{opacity:0;will-change:opacity,transform}
.js:not(.static) .beat-hero,.js:not(.static) .beat-left{left:var(--gutter);width:min(42vw,560px)}
.js:not(.static) .beat-hero{padding-top:40px}
.js:not(.static) .beat-right{right:calc(var(--gutter) + 64px);width:min(36vw,500px)}
.js:not(.static) .beat-caption{left:0;right:0;top:auto;bottom:clamp(36px,8vh,96px);align-items:center;text-align:center;padding:0 var(--gutter)}
.js:not(.static) .beat-caption>*{max-width:760px}
.js:not(.static) .beat-caption .kicker{justify-content:center}

/* Chapter trace: a board trace down the right edge with a solder pad per chapter. It fills with the film's blue as
   the reader moves through the journey (reaching each pad as its chapter begins), a faint signal runs along the lit
   part, and the current chapter is named beside its pad. Hovering or focusing the trace names all four. */
.js:not(.static) .rail{display:block;position:fixed;z-index:40;right:clamp(16px,2vw,30px);top:calc(56px + 9vh);bottom:9vh;width:12px;pointer-events:none;--trace:0}
.rail .trace{position:absolute;left:5px;top:0;bottom:0;width:2px;border-radius:2px;background:rgb(29 29 31/.14)}
.rail .trace::before,.rail .trace::after{content:'';position:absolute;left:-3px;width:8px;height:8px;border-radius:50%;border:1.5px solid #aeb2ba;background:var(--bg);box-sizing:border-box;transition:border-color .3s,background-color .3s,box-shadow .3s}
.rail .trace::before{top:-8px}.rail .trace::after{bottom:-8px}
.rail .trace::before{border-color:var(--accent);background:var(--accent)}
.rail.is-done .trace::after{background:var(--accent);box-shadow:0 0 10px rgb(47 98 224/.55)}
.rail .trace-lit{position:absolute;left:0;right:0;top:0;height:calc(var(--trace) * 100%);border-radius:2px;background:var(--accent);box-shadow:0 0 8px rgb(47 98 224/.45);overflow:hidden}
.rail .trace-lit::after{content:'';position:absolute;left:0;right:0;top:-100%;height:200%;background:linear-gradient(transparent 42%,rgb(150 190 255/.95) 50%,transparent 58%);animation:signal 3.2s linear infinite}
.rail .trace-head{position:absolute;left:-2px;top:calc(var(--trace) * 100%);width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgb(47 98 224/.18),0 0 12px 2px rgb(47 98 224/.6);transition:opacity .3s}
.rail.is-done .trace-head,.rail.is-start .trace-head{opacity:0}
.rail button{position:absolute;right:-6px;top:calc(var(--at) * 100%);transform:translateY(-50%);display:flex;align-items:center;gap:8px;height:34px;padding:0 6px 0 12px;background:none;border:0;cursor:pointer;font:inherit;white-space:nowrap;pointer-events:auto}
.rail-pad{position:relative;flex:none;width:12px;height:12px;border-radius:3px;border:1.5px solid #aeb2ba;background:var(--bg);box-sizing:border-box;transition:background-color .35s,border-color .35s,box-shadow .35s,transform .35s var(--ease)}
.rail button.is-lit .rail-pad{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px rgb(47 98 224/.14),0 0 12px rgb(47 98 224/.55)}
.rail button.is-active .rail-pad{transform:scale(1.2)}
.rail button.is-active .rail-pad::after,.rail button.is-next .rail-pad::after{content:'';position:absolute;inset:-6px;border-radius:6px;border:1.5px solid var(--accent);opacity:0;animation:pad-ping 2.4s var(--ease) infinite}
.rail button:hover .rail-pad{border-color:var(--accent);transform:scale(1.2)}
.rail-num,.rail-name{opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s var(--ease),color .2s;text-shadow:0 0 12px rgb(245 245 247/.95),0 0 4px rgb(245 245 247/.95)}
.rail-num{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;color:#6e6e73}
.rail-name{font-size:13px;font-weight:500;color:var(--muted)}
.rail button.is-active .rail-num{color:var(--accent)}.rail button.is-active .rail-name,.rail button:hover .rail-name{color:var(--ink)}
.rail button.is-active :is(.rail-num,.rail-name),.rail button.is-next :is(.rail-num,.rail-name),.rail:hover :is(.rail-num,.rail-name),.rail:focus-within :is(.rail-num,.rail-name){opacity:1;transform:none}
@keyframes signal{to{transform:translateY(50%)}}
@keyframes pad-ping{0%{opacity:.55;transform:scale(.75)}100%{opacity:0;transform:scale(1.45)}}

.js:not(.static) .reading{position:relative}
.js:not(.static) .finale{height:170vh;padding:0}
.js:not(.static) .finale-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 var(--gutter) clamp(24px,4.5vh,48px)}
.js:not(.static) .finale-copy{transform-origin:50% 0}
.js:not(.static) .finale h2{font-size:clamp(32px,min(4.6vw,8.4vh),68px)}
.js:not(.static) .finale-copy p{margin-top:clamp(12px,2.4vh,22px)}
.js:not(.static) .finale .actions{margin-top:clamp(18px,3.6vh,32px)}
.js:not(.static) .finale [data-f]{opacity:0}

/* Reading sections reveal gently over the softened board. */
.js [data-reveal]{opacity:0;transform:translateY(12px);filter:blur(8px);transition:opacity .5s var(--ease),transform .5s var(--ease),filter .5s var(--ease);transition-delay:calc(var(--i,0) * 50ms)}
.js [data-reveal].in{opacity:1;transform:none;filter:none}

.reading-head{margin-bottom:52px}
.section-intro{max-width:730px;margin-top:20px;font-size:18px;line-height:1.65;color:var(--muted)}
.service-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.service-card{display:flex;flex-direction:column;height:100%;padding:22px 24px 20px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line);transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.service-card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgb(47 98 224/.35),0 18px 40px rgb(0 0 0/.07)}
.service-card h2{font-size:clamp(21px,1.7vw,25px);letter-spacing:-.03em;line-height:1.15;margin-top:10px}
.service-card p{font-size:15.5px;line-height:1.5;color:#3a3a3f;margin-top:8px}
.service-more{margin-top:auto;padding-top:16px;font-size:14px;font-weight:500;color:var(--accent)}
.service-card:hover .service-more{text-decoration:underline;text-underline-offset:3px}
.offer-number{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--accent)}
.offer-more{font-size:16px;line-height:1.6;color:var(--muted);margin-top:22px}
.service-details{display:grid;gap:56px;margin-top:72px}
.js .service-details{display:none}
.service-detail h2,.work-detail h2{font-size:clamp(28px,3vw,40px);letter-spacing:-.035em;margin-top:10px}
.work-detail h2{margin-top:0}
.service-detail .offer-lead,.work-detail .offer-lead{font-size:18px;line-height:1.6;color:#3a3a3f;margin-top:14px}
.service-detail .offer-label,.work-detail .offer-label{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--faint);margin-top:28px}
.service-included{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.service-included li{position:relative;padding-left:26px;font-size:16px;line-height:1.5;color:#3a3a3f}
.service-included li::before{content:'';position:absolute;left:2px;top:.36em;width:14px;height:14px;border-radius:50%;background:rgb(47 98 224/.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%232f62e0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.service-uses{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.service-uses li{font-size:14px;line-height:1.3;color:var(--muted);padding:7px 12px;border-radius:980px;background:rgb(0 0 0/.045)}
.service-dialog{padding:0;border:0;background:none;color:var(--ink);width:min(720px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);overflow:visible}
.service-dialog::backdrop{background:rgb(29 29 31/.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.service-dialog[open]{animation:sd-in .35s var(--ease)}
@keyframes sd-in{from{opacity:0;transform:translateY(16px) scale(.985)}}
html:has(.service-dialog[open]){overflow:hidden}
.sd-panel{position:relative;display:flex;flex-direction:column;max-height:calc(100dvh - 48px);border-radius:22px;background:#fbfbfd;box-shadow:0 0 0 1px rgb(0 0 0/.06),0 30px 80px rgb(0 0 0/.2)}
.sd-body{overflow:auto;padding:38px 44px 30px}
.sd-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:18px 44px 24px;border-top:1px solid var(--line)}
.sd-foot .button{font-size:15px;padding:12px 20px}
.sd-nav{display:flex;gap:8px}
.sd-nav[hidden]{display:none}
.sd-nav button,.sd-close{font:inherit;cursor:pointer;border:0;transition:background-color .15s,color .15s}
.sd-nav button{font-size:14px;color:var(--muted);background:rgb(0 0 0/.045);border-radius:980px;padding:9px 14px}
.sd-nav button:hover{color:var(--ink);background:rgb(0 0 0/.08)}
.sd-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:rgb(0 0 0/.05);font-size:22px;line-height:1;color:var(--muted)}
.sd-close:hover{background:rgb(0 0 0/.09);color:var(--ink)}
.work-section{min-height:340px}
/* My work: projects grouped by category. Each card opens its write-up in a dialog (site.js), growing out of the card;
   without JavaScript the cards link down to the same write-ups below the categories. */
.work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 40px;flex-wrap:wrap;margin-bottom:clamp(22px,3.4vh,32px)}
body.page .work-head .reading-head{margin-bottom:0}
.work-filter{position:relative;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:0 14px;border-radius:980px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:14px;transition:box-shadow .15s}
.work-filter:hover,.work-filter:focus-within{box-shadow:0 0 0 1px rgb(47 98 224/.45)}
.work-filter label{color:var(--faint);font-weight:500;cursor:pointer}
.work-filter select{appearance:none;-webkit-appearance:none;border:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%231d1d1f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center/12px no-repeat;padding:10px 20px 10px 0;font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
.work-filter select:focus-visible{outline:none}
.work-filter:has(select:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
html:not(.js) .work-filter{display:none}
.work-empty{display:flex;align-items:center;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;padding:clamp(24px,3.4vw,36px);border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.work-empty[hidden]{display:none}
.work-empty p{max-width:620px;font-size:16px;line-height:1.6;color:var(--muted)}
.work-empty strong{display:block;font-size:19px;font-weight:620;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px}
.work-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.work-card{display:flex;flex-direction:column;height:100%;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line);transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.work-card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgb(47 98 224/.35),0 18px 40px rgb(0 0 0/.07)}
.work-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#e9e9ec}
.work-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.work-card:hover .work-thumb img{transform:scale(1.03)}
.work-play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgb(255 255 255/.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 20px rgb(0 0 0/.14);transition:transform .25s var(--ease)}
.work-play svg{width:22px;height:22px;margin-left:3px;fill:var(--ink)}
.work-card:hover .work-play{transform:scale(1.08)}
.work-time{position:absolute;right:10px;bottom:10px;padding:4px 8px;border-radius:980px;background:rgb(29 29 31/.72);font-size:12px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.work-card-body{display:block;padding:16px 22px 18px}
.work-card h2{font-size:clamp(18px,1.4vw,21px);letter-spacing:-.025em;line-height:1.2}
.work-details{display:grid;gap:56px;margin-top:72px}
.js .work-details{display:none}
.work-media{margin:0;border-radius:18px;overflow:hidden;background:#e9e9ec}
.work-media video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#e9e9ec}
.work-detail-text{max-width:720px;padding-top:26px}
.work-dialog{width:min(880px,calc(100vw - 32px))}
.work-dialog[open]{animation:none}
.work-dialog[open]::backdrop{animation:wd-fade .35s var(--ease)}
.work-dialog.is-closing::backdrop{animation:wd-fade .36s var(--ease) reverse forwards}
@keyframes wd-fade{from{opacity:0}}
.work-dialog .sd-body{padding:0 0 30px;border-radius:22px 22px 0 0}
.work-dialog .work-media{border-radius:0}
.work-dialog .work-detail-text{max-width:none;padding:26px 44px 0}
.work-dialog .sd-close{z-index:1;background:rgb(255 255 255/.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ink)}
.engagements{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);list-style:none;margin:0;padding:0}
.engagements>li{padding:30px 28px 8px 0}
.engagements>li+li{padding-left:28px;border-left:1px solid var(--line)}
.step-num{display:block;font-size:13px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;margin-bottom:10px}
.engagements .step-meta{font-size:13.5px;color:var(--faint);margin-top:6px}
.engagements p{font-size:16px;line-height:1.6;color:var(--muted);margin-top:14px}
.fine{font-size:13px;color:var(--faint);margin-top:34px}

.about{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,96px);align-items:center}
.founder{display:flex;align-items:center;gap:24px}
.founder img{width:112px;height:112px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgb(0 0 0/.06)}
.founder .eyebrow{margin-bottom:8px}.founder h2{font-size:clamp(34px,3.6vw,48px)}
.role{font-size:15px;color:var(--faint);margin-top:6px}
.about-copy p{font-size:19px;line-height:1.6;color:#3a3a3f}.about-copy p+p{margin-top:18px}

.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-size:clamp(18px,1.6vw,22px);font-weight:600;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-weight:300;font-size:28px;color:var(--faint);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{font-size:17px;line-height:1.6;color:var(--muted);max-width:760px;padding:0 0 26px}

.footer{position:relative;z-index:1;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:26px var(--gutter) 36px;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--faint);background:var(--bg)}
.footer::before{content:'';position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--line)}
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer a:hover{color:var(--ink)}
.contact-note{font-size:12px!important;color:var(--faint)!important;margin-top:18px!important}
.contact-note span{white-space:nowrap}

/* ---------- Privacy page ---------- */
.legal-body{min-height:100vh;background:var(--bg)}
.legal-nav{height:64px;max-width:calc(var(--max) + 2*var(--gutter));margin:auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}
.legal-back{font-size:14px;color:var(--accent);font-weight:600}
.legal-back:hover{text-decoration:underline;text-underline-offset:3px}
.legal-wrap{max-width:800px;margin:auto;padding:clamp(70px,10vw,130px) var(--gutter) 100px}
.legal-wrap h1{font-size:clamp(48px,7vw,76px)}
.legal-updated{font-size:13px;color:var(--faint);margin-top:18px}
.legal-lede{font-size:clamp(18px,2vw,22px);line-height:1.6;color:var(--muted);margin-top:38px}
.legal-wrap section{border-top:1px solid var(--line);margin-top:48px;padding-top:28px}
.legal-wrap h2{font-size:clamp(24px,3vw,32px)}
.legal-wrap section p{font-size:17px;line-height:1.7;color:var(--muted);margin-top:16px}
.legal-wrap section a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal-footer{max-width:calc(var(--max) + 2*var(--gutter));margin:auto;padding:24px var(--gutter) 36px;border-top:1px solid var(--line);font-size:12px;color:var(--faint)}
.legal-footer a{color:var(--accent)}

/* ---------- Pages (services, work, about, FAQ): the reading sections on their own, no film behind them ---------- */
.page main{padding-top:56px}
body.page .reading{padding-top:clamp(40px,7vh,72px);padding-bottom:clamp(48px,8vh,88px)}
body.page .reading + .reading{padding-top:clamp(24px,4vh,40px)}
body.page .reading-head{margin-bottom:clamp(22px,3.6vh,34px)}
body.page .reading-head h1{font-size:clamp(34px,3.8vw,56px);letter-spacing:-.04em;line-height:1.05}
body.page .reading-head h2{font-size:clamp(28px,2.8vw,42px)}
body.page .section-intro{font-size:17px;margin-top:12px}
.page-contact{max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter) clamp(56px,9vh,96px)}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;padding:clamp(26px,3.4vw,40px) clamp(24px,3.6vw,44px);border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--line),0 20px 50px rgb(0 0 0/.04)}
.cta-band h2{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.03em;text-wrap:balance}
.cta-band p{font-size:16px;line-height:1.55;color:var(--muted);margin-top:8px;max-width:500px}
.cta-band .actions{margin-top:0;gap:20px}
.about-layout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start;max-width:960px}
.about-photo{width:168px;height:168px;border-radius:50%;object-fit:cover;box-shadow:0 14px 36px rgb(0 0 0/.12)}
body.page .about-main h1{font-size:clamp(34px,3.8vw,56px);letter-spacing:-.04em;line-height:1.05}
.about-main .about-copy{margin-top:28px;max-width:620px}
.faq-layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-side{position:sticky;top:96px}
body.page .faq-side{margin-bottom:0}
.faq-side .section-intro .link{font-size:inherit}
body.page .faq summary{padding:20px 0;font-size:clamp(17px,1.4vw,20px)}

/* ---------- Tablet ---------- */
@media(max-width:1060px){
  .service-grid,.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .engagements{grid-template-columns:1fr 1fr}.engagements>li,.engagements>li+li{padding:26px 24px 8px 0;border-left:0;border-top:1px solid var(--line)}.engagements>li:nth-child(-n+2){border-top:0}
  .about{grid-template-columns:1fr}
}
@media(max-width:760px){
  .service-grid,.work-grid{grid-template-columns:1fr;gap:10px}
  .sd-body{padding:30px 22px 22px}.sd-foot{padding:16px 22px 20px}
  .work-dialog .work-detail-text{padding:22px 22px 0}
  .about-layout{grid-template-columns:1fr}.about-photo{width:120px;height:120px}
  .faq-layout{grid-template-columns:1fr;gap:8px}.faq-side{position:static}
  .nav-links,.nav-cta{display:none}.menu{display:block}
  .footer{flex-wrap:wrap;gap:8px 16px}
}

/* ---------- Portrait screens: text sits below the chip (hero above it) ---------- */
.js.portrait:not(.static) .beat,.js.portrait:not(.static) .beat-right,.js.portrait:not(.static) .beat-left{left:0;right:0;width:auto;top:auto;bottom:0;justify-content:flex-end;padding:0 22px calc(26px + env(safe-area-inset-bottom))}
.js.portrait:not(.static) .beat-hero{top:0;bottom:auto;justify-content:flex-start;padding:86px 22px 0}
.js.portrait:not(.static) .beat-caption{text-align:left;align-items:stretch}.js.portrait:not(.static) .beat-caption .kicker{justify-content:flex-start}
.js.portrait:not(.static) .rail{right:8px;top:calc(56px + 4vh);bottom:4vh}.js.portrait:not(.static) .rail :is(.rail-num,.rail-name){display:none}
.portrait h1{font-size:clamp(40px,11vw,60px)}
.portrait h2{font-size:clamp(28px,7.6vw,40px)}
.portrait .lede{font-size:16px;margin-top:16px}
.portrait .actions{margin-top:22px;gap:20px}
.portrait .beat > p:not(.kicker):not(.meta):not(.eyebrow):not(.lede){font-size:15.5px;margin-top:12px}
.portrait .services{margin-top:12px}.portrait .services li{padding:8px 0}.portrait .services p{font-size:14px}
.portrait .meta{margin-top:14px;padding-top:12px}
.portrait .kicker{margin-bottom:12px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none;filter:none;transition:none}
  .work-dialog[open]::backdrop,.work-dialog.is-closing::backdrop{animation:none}
}
.static .services i,html:not(.js) .services i{background:var(--accent)}
.js.portrait:not(.static) .services{gap:0;margin-top:14px}.js.portrait:not(.static) .services li{padding:6px 0;border-top:0}.js.portrait:not(.static) .services p{font-size:13.5px;line-height:1.35;margin-top:1px}.js.portrait:not(.static) .services h3{font-size:17px}.js.portrait:not(.static) .services i{margin-top:8px}

/* ---------- Chapter text system ----------
   Every chapter uses the same structure (number, headline, one sentence, detail line), centred in the space
   below the navigation, and sized to the window's width and height so it fits short laptop screens too. */
.js:not(.static) .beat{top:56px;padding:4vh 0}
.js:not(.static) .beat-left{width:min(38vw,500px)}
.js:not(.static) .beat-hero{width:min(44vw,600px);padding-top:3vh}
.js:not(.static) .beat-right{right:calc(var(--gutter) + 96px);width:min(33vw,440px)}
.js:not(.static) h1{font-size:clamp(40px,min(5.6vw,11.5vh),88px)}
.js:not(.static) .beat h2{font-size:clamp(28px,min(3.3vw,6.4vh),52px);text-wrap:balance}
.js:not(.static) .beat > p:not(.kicker):not(.meta):not(.eyebrow):not(.lede){font-size:clamp(15px,min(1.2vw,2.5vh),18px);margin-top:clamp(10px,2vh,18px);max-width:30em}
.js:not(.static) .lede{font-size:clamp(15px,min(1.35vw,2.7vh),20px);margin-top:clamp(12px,2.6vh,24px)}
.js:not(.static) .beat .actions{margin-top:clamp(18px,3.6vh,32px)}
.js:not(.static) .kicker{margin-bottom:clamp(10px,1.8vh,18px)}
.js:not(.static) .meta{margin-top:clamp(14px,2.6vh,24px);padding-top:clamp(10px,1.6vh,16px)}
.js:not(.static) .beat .link{margin-top:clamp(12px,2.2vh,22px)}
.js:not(.static) .services{margin-top:clamp(12px,2.4vh,24px)}
.js:not(.static) .services li{padding:clamp(7px,1.3vh,12px) 0}
.services h3{font-size:clamp(16px,min(1.3vw,2.6vh),20px)}
.services p{font-size:clamp(13.5px,min(1vw,2.1vh),15px);line-height:1.45;margin-top:2px}
.services i{margin-top:.5em}
/* Stronger, wider shading behind text so it never competes with the render. */
.shade-left{background:linear-gradient(90deg,rgb(245 245 247/.96) 0%,rgb(245 245 247/.9) 34%,rgb(245 245 247/0) 62%)}
.shade-right{background:linear-gradient(270deg,rgb(245 245 247/.96) 0%,rgb(245 245 247/.9) 36%,rgb(245 245 247/0) 64%)}
.shade-bottom{background:linear-gradient(0deg,rgb(245 245 247/.97) 0%,rgb(245 245 247/.9) 32%,rgb(245 245 247/0) 62%)}
/* Portrait keeps its own, width-led sizes. */
.js.portrait:not(.static) h1{font-size:clamp(38px,10.5vw,58px)}
.js.portrait:not(.static) .beat h2{font-size:clamp(26px,7.2vw,38px)}
.js.portrait:not(.static) .beat > p:not(.kicker):not(.meta):not(.eyebrow):not(.lede){font-size:15.5px;margin-top:10px}
.js.portrait:not(.static) .lede{font-size:16px;margin-top:14px}
.js:not(.static) .beat.beat-caption{top:auto;padding:0 var(--gutter)}

/* Hero: the person behind the "I", next to the first button. */
.founder-line{display:flex;align-items:center;gap:10px;margin-top:clamp(18px,3.4vh,30px);font-size:14.5px;color:var(--muted)}
.founder-line img{width:32px;height:32px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgb(0 0 0/.08)}
.js.portrait:not(.static) .beat-hero .actions .link{display:none}
.js.portrait:not(.static) .founder-line{margin-top:18px;font-size:14px}
.js.portrait:not(.static) .finale h2{font-size:clamp(30px,8.6vw,40px)}
/* No single-word last lines in chapter text. */
.js:not(.static) .beat > p{text-wrap:pretty}
.js:not(.static) .beat-caption > p:not(.kicker){text-wrap:balance}
/* Short phones: tighter hero so the words stay clear of the chip. */
@media (max-height:700px){
  .js.portrait:not(.static) .beat-hero{padding-top:70px}
  .js.portrait:not(.static) h1{font-size:clamp(34px,9.6vw,52px)}
  .js.portrait:not(.static) .lede{font-size:15px;margin-top:10px}
  .js.portrait:not(.static) .beat-hero .actions{margin-top:16px}
  .js.portrait:not(.static) .founder-line{margin-top:12px;font-size:13.5px}
}
@media (max-height:580px){.js.portrait:not(.static) .founder-line{display:none}}
/* Static layout: comfortable line length for chapter text. */
.static .beat > p:not(.kicker),html:not(.js) .beat > p:not(.kicker){max-width:40em}
.finale-copy p{text-wrap:balance}
@media(max-width:640px){.engagements{grid-template-columns:1fr}.engagements>li,.engagements>li+li{padding:24px 0 8px}.engagements>li:nth-child(2){border-top:1px solid var(--line)}}