/* ═══════════════════════════════════════════════════════════════════════
   MOHAMMED ESSANAANI, portfolio
   Five colours: space cadet, slate, tan, coffee and caput mortuum, plus
   a cream drawn from the tan. Each section is one tone; components read
   their colours from it (--bg, --fg, --fg2, --fg3, --accent, --hair).
   Instrument Sans, Instrument Serif (italic), Geist Mono. Self-hosted.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{ font-family:"Instrument Sans"; src:url(../assets/fonts/instrument-sans.woff2) format("woff2");
  font-weight:400 700; font-stretch:75% 100%; font-style:normal; font-display:swap }
@font-face{ font-family:"Instrument Serif"; src:url(../assets/fonts/instrument-serif-italic.woff2) format("woff2");
  font-weight:400; font-style:italic; font-display:swap }
@font-face{ font-family:"Geist Mono"; src:url(../assets/fonts/geist-mono.woff2) format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap }
/* a stand-in with the same proportions, so the swap moves nothing */
@font-face{ font-family:"Instrument Sans Fallback"; src:local("Arial"), local("Arimo"), local("Liberation Sans"), local("Helvetica"), local("Roboto");
  size-adjust:101.2%; ascent-override:95.8%; descent-override:24.7%; line-gap-override:0% }

:root{
  /* the palette */
  --navy:    #25344F;   /* space cadet */
  --slate:   #617891;   /* slate gray */
  --tan:     #D5B893;
  --coffee:  #6F4D38;
  --oxblood: #632024;   /* caput mortuum */
  /* drawn from it */
  --cream:      #F2EBE0;
  --paper:      #F7F2E9;
  --cream-2:    #E9E0D2;
  --navy-2:     #2E4061;
  --navy-deep:  #1B263A;
  --slate-ink:  #4D6076;   /* slate, dark enough for small text on cream */
  --slate-mist: #A3B4C7;   /* slate, light enough for small text on navy */

  --sans:  "Instrument Sans", "Instrument Sans Fallback", "Segoe UI", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono:  "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --wrap: 1440px;
  --gut: clamp(20px, 3.6vw, 56px);
  --r: 22px;

  --out:    cubic-bezier(.16,1,.3,1);
  --soft:   cubic-bezier(.32,.72,0,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

/* ── tones: every section is one of these ──────────────────────────── */
[data-tone="cream"]{ --bg:var(--cream); --fg:var(--navy); --fg2:var(--coffee); --fg3:var(--slate-ink); --accent:var(--oxblood);
  --hair:rgba(37,52,79,.14); --hair-2:rgba(37,52,79,.08); --solid:var(--navy); --solid-fg:var(--cream); --fill:var(--oxblood); --fill-fg:var(--cream) }
[data-tone="tan"]{ --bg:var(--tan); --fg:var(--navy); --fg2:var(--navy); --fg3:var(--oxblood); --accent:var(--oxblood);
  --hair:rgba(37,52,79,.22); --hair-2:rgba(37,52,79,.12); --solid:var(--navy); --solid-fg:var(--cream); --fill:var(--oxblood); --fill-fg:var(--cream) }
[data-tone="navy"]{ --bg:var(--navy); --fg:var(--cream); --fg2:rgba(242,235,224,.76); --fg3:var(--slate-mist); --accent:var(--tan);
  --hair:rgba(242,235,224,.14); --hair-2:rgba(242,235,224,.08); --solid:var(--cream); --solid-fg:var(--navy); --fill:var(--tan); --fill-fg:var(--navy) }
[data-tone="oxblood"]{ --bg:var(--oxblood); --fg:var(--cream); --fg2:rgba(242,235,224,.78); --fg3:var(--tan); --accent:var(--tan);
  --hair:rgba(242,235,224,.16); --hair-2:rgba(242,235,224,.09); --solid:var(--cream); --solid-fg:var(--oxblood); --fill:var(--tan); --fill-fg:var(--navy) }
[data-tone="night"]{ --bg:var(--navy-deep); --fg:var(--cream); --fg2:rgba(242,235,224,.74); --fg3:var(--slate-mist); --accent:var(--tan);
  --hair:rgba(242,235,224,.13); --hair-2:rgba(242,235,224,.07); --solid:var(--cream); --solid-fg:var(--navy); --fill:var(--tan); --fill-fg:var(--navy) }

/* ── reset ─────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:auto }
html,body{ max-width:100%; overflow-x:clip }
body{
  background:var(--cream); color:var(--navy);
  font-family:var(--sans); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern","liga","ss01";
}
img,svg,canvas{ display:block; max-width:100% } img{ height:auto }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit; background:none; border:0; outline:0 }
button{ cursor:pointer }
ul,ol{ list-style:none }
dd{ margin:0 }
::selection{ background:var(--tan); color:var(--navy) }
:focus-visible{ outline:2px solid var(--accent, var(--oxblood)); outline-offset:3px; border-radius:6px }

/* no visible scrollbar: the page still scrolls, by wheel, touch and keys */
html{ scrollbar-width:none; -ms-overflow-style:none }
html::-webkit-scrollbar, body::-webkit-scrollbar{ display:none; width:0; height:0 }

.sr-only{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0 }
.skip{ position:fixed; z-index:9700; left:16px; top:16px; padding:10px 16px; border-radius:99px; background:var(--navy); color:var(--cream); font-weight:500;
  transform:translateY(-160%); transition:transform .4s var(--out) }
.skip:focus-visible{ transform:none }

/* sections far below the fold are laid out only when you get near them
   (not the about, right under the hero, nor the two with sticky frames) */
.work{ content-visibility:auto; contain-intrinsic-size:auto 5950px }
.caps{ content-visibility:auto; contain-intrinsic-size:auto 3940px }
.contact{ content-visibility:auto; contain-intrinsic-size:auto 1030px }
.foot{ content-visibility:auto; contain-intrinsic-size:auto 410px }
@media (max-width:900px){
  .work{ contain-intrinsic-size:auto 6300px } .caps{ contain-intrinsic-size:auto 4100px }
  .contact{ contain-intrinsic-size:auto 1600px } .foot{ contain-intrinsic-size:auto 300px }
}

/* ── primitives ────────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.mask{ display:block; overflow:hidden } .mask > i{ display:block; font-style:inherit }
section, .foot{ background:var(--bg); color:var(--fg) }

.label{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.label span{ display:inline-grid; place-items:center; height:24px; min-width:34px; padding:0 8px; border-radius:99px;
  box-shadow:inset 0 0 0 1px currentColor; letter-spacing:.04em }

.display{
  margin-top:22px; font-weight:600; font-size:clamp(2.9rem, 7.6vw, 8.4rem); line-height:.9; letter-spacing:-.052em;
  text-wrap:balance;
}
.display em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.02em; color:var(--accent); padding-right:.04em }
.display sup{ position:relative; top:-2.2em; margin-left:.35em; font-family:var(--mono); font-size:.15em; font-weight:500; letter-spacing:.02em; vertical-align:baseline; color:inherit; opacity:.7 }
/* titles (app.js): every letter swings up out of its line, one after the
   other; split only when it comes near, so until then it waits unseen */
/* each line hides what is below it (and lets what floats above, like the
   counter, show): a clip on its mask instead of overflow on every side */
.display .ln{ display:block }
.display .ln-mask{ overflow:visible !important; clip-path:inset(-1em -.4em -.18em -.4em) }
.display .ch, .project__name .ch, .pstep__t .ch{ display:inline-block }
[data-lines] .ln{ display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em }
.has-reveals [data-split]:not(.is-split), .has-reveals [data-lines]:not(.is-split), .has-reveals #aboutText:not(.is-split){ visibility:hidden }

.sec-head{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.62fr); gap:18px clamp(24px,5vw,80px); align-items:end;
  margin-bottom:clamp(72px, 13vh, 150px) }
.sec-head .label{ grid-column:1 / -1 }
.sec-head .display{ margin-top:0 }
.sec-head__p{ font-size:17px; line-height:1.6; color:var(--fg2); max-width:40ch; padding-bottom:.6em }

/* reveals (only once JS is on the page) */
.js [data-reveal]{ opacity:0; transform:translateY(24px) }
.js [data-reveal].is-in{ opacity:1; transform:none; transition:opacity .9s var(--out), transform 1.1s var(--out) }

/* ── buttons: the fill rises, the label rolls, the arrow slides ─────── */
.btn{
  position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; gap:10px;
  height:52px; padding:0 24px; border-radius:99px; font-weight:500; font-size:15px; white-space:nowrap;
  transition:transform .45s var(--spring), color .45s var(--out), box-shadow .45s;
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--fill);
  transform:translateY(101%); transition:transform .6s var(--out) }
.btn:hover::before, .btn:focus-visible::before{ transform:none }
.btn:active{ transform:scale(.96); transition-duration:.12s }
.btn__label{ display:block; height:1.3em; line-height:1.3em; overflow:hidden }
.btn__label > span{ display:block; transition:transform .6s var(--out) }
.btn__label > span::after{ content:attr(data-text); display:block }
.btn:hover .btn__label > span, .btn:focus-visible .btn__label > span{ transform:translateY(-50%) }
.btn--sm{ height:42px; padding:0 18px; font-size:14px }
.btn--solid{ background:var(--solid); color:var(--solid-fg) }
.btn--solid:hover, .btn--solid:focus-visible{ color:var(--fill-fg) }
.btn--line{ box-shadow:inset 0 0 0 1px var(--hair); color:var(--fg); --fill:var(--fg) }
.btn--line:hover, .btn--line:focus-visible{ color:var(--bg) }
.btn__arrow{ position:relative; width:14px; height:14px; flex:none; overflow:hidden }
.btn__arrow::before,.btn__arrow::after{
  content:""; position:absolute; inset:0; background:currentColor; transition:transform .55s var(--out);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn__arrow::after{ transform:translateX(-160%) }
.btn:hover .btn__arrow::before{ transform:translateX(160%) }
.btn:hover .btn__arrow::after{ transform:none }
/* opens elsewhere: the arrow points up and out, and leaves that way */
.btn__arrow--out{ transform:rotate(-45deg) }

.ulink{ position:relative; font-weight:500 }
.ulink::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor; transform-origin:right; transition:transform .6s var(--out) }
.ulink:hover::after{ transform:scaleX(0) }

/* ═══════════════════════════════════════════════════════════════════════
   PRELOADER: drawn in a canvas on the cream of the page (intro.js); the
   instrument is the real 3D model, lifted above it while the intro plays
   ═══════════════════════════════════════════════════════════════════════ */
html.is-intro{ overflow:hidden }
body.is-loading{ overflow:hidden; height:100% }
.loader{ position:fixed; inset:0; z-index:9500; background:var(--cream); cursor:progress; animation:loader-failsafe .5s 12s forwards }
.loader canvas{ position:absolute; inset:0; width:100%; height:100%; display:block }
.loader__dot{ position:absolute; left:50%; top:var(--dy,50%); width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
  background:var(--navy); animation:dot-breathe 1.1s cubic-bezier(.45,0,.55,1) infinite alternate; transition:opacity .2s }
.loader__dot.is-gone{ opacity:0; animation:none }
@keyframes dot-breathe{ from{ transform:scale(.72); opacity:.55 } to{ transform:scale(1.15); opacity:1 } }
@keyframes loader-failsafe{ to{ opacity:0; visibility:hidden } }
.gl.is-up{ z-index:9600 }

/* ═══════════════════════════════════════════════════════════════════════
   LAYERS: the WebGL stage, the button on the instrument, the colour
   floods between sections, the grain
   ═══════════════════════════════════════════════════════════════════════ */
.gl{ position:fixed; inset:0; width:100%; height:100%; z-index:50; pointer-events:none }
/* the work's screenshots (gallery.js): over the work, under every flood after it */
.glw{ position:fixed; inset:0; width:100%; height:100%; z-index:5; pointer-events:none }
.gyro-hit{ position:fixed; left:0; top:0; z-index:55; width:80px; height:80px; border-radius:50%; will-change:transform; cursor:grab; touch-action:pan-y }
.gyro-hit.is-drag{ cursor:grabbing }
.gyro-hit.is-dock{ cursor:pointer }
.gyro-hit.is-off{ pointer-events:none }
/* a label that follows the pointer over the instrument: "Drag me", or "Back to top" in the corner */
.gyro-hit__tip{ position:absolute; left:0; top:0; padding:6px 11px 6px 10px; border-radius:99px; background:var(--navy); color:var(--cream);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; pointer-events:none;
  transform:translate(calc(var(--tx,0px) + 14px), calc(var(--ty,0px) + 16px)) scale(.6); transform-origin:0 0; opacity:0;
  transition:opacity .25s, transform .5s var(--out) }
.gyro-hit:hover .gyro-hit__tip{ opacity:1; transform:translate(calc(var(--tx,0px) + 14px), calc(var(--ty,0px) + 16px)) }
.gyro-hit.is-drag .gyro-hit__tip{ opacity:0 }
.gyro-hit.is-dock .gyro-hit__tip{ left:auto; right:calc(100% + 10px); top:50%; transform:translate(6px,-50%) scale(1); transform-origin:100% 50% }
.gyro-hit.is-dock:hover .gyro-hit__tip, .gyro-hit.is-dock:focus-visible .gyro-hit__tip{ opacity:1; transform:translate(0,-50%) }
@media (hover:none){ .gyro-hit__tip{ display:none } }

.flood{ position:fixed; inset:0; pointer-events:none; visibility:hidden }
.flood[data-flood="about"]{ z-index:2 }
.flood[data-flood="work"]{ z-index:4 }
.flood[data-flood="process"]{ z-index:6 }
.flood[data-flood="tools"]{ z-index:8 }
.flood[data-flood="capabilities"]{ z-index:10 }
.flood[data-flood="contact"]{ z-index:12 }

.grain{ position:fixed; inset:-120px; z-index:70; pointer-events:none; opacity:.055;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .7s steps(5) infinite }
@keyframes grain{ 0%{ transform:translate(0,0) } 25%{ transform:translate(-40px,22px) } 50%{ transform:translate(26px,-34px) } 75%{ transform:translate(-18px,-12px) } 100%{ transform:translate(34px,30px) } }

/* ═══════════════════════════════════════════════════════════════════════
   NAVIGATION: a pill that takes the tone of the section under it. It
   slides away on the way down and comes back on the way up. The mark is
   a live miniature of the instrument, ringed by the reading progress; a
   lens follows the pointer along the links.
   ═══════════════════════════════════════════════════════════════════════ */
.nav{
  --bg:var(--cream); --fg:var(--navy); --fg2:var(--coffee); --accent:var(--oxblood); --hair:rgba(37,52,79,.14);
  --solid:var(--navy); --solid-fg:var(--cream); --fill:var(--oxblood); --fill-fg:var(--cream);
  position:fixed; z-index:60; top:14px; left:0; right:0; margin-inline:auto;
  width:min(calc(100% - 2*var(--gut)), 1320px);
  display:flex; align-items:center; gap:10px; padding:6px 6px 6px 7px; border-radius:99px; color:var(--fg);
  background:rgba(242,235,224,.74); backdrop-filter:blur(18px) saturate(1.35); -webkit-backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:inset 0 0 0 1px var(--hair), 0 14px 34px -22px rgba(27,38,58,.5);
  transition:transform .85s var(--soft), background-color .5s var(--soft), box-shadow .5s var(--soft), color .5s;
}
.nav.is-hidden{ transform:translateY(calc(-100% - 30px)) }
body[data-theme="dark"] .nav{
  --bg:var(--navy-deep); --fg:var(--cream); --fg2:rgba(242,235,224,.76); --accent:var(--tan); --hair:rgba(242,235,224,.15);
  --solid:var(--cream); --solid-fg:var(--navy); --fill:var(--tan); --fill-fg:var(--navy);
  background:rgba(27,38,58,.62); box-shadow:inset 0 0 0 1px var(--hair), 0 14px 34px -22px rgba(0,0,0,.6) }
.nav__brand{ display:flex; align-items:center; gap:10px; padding-right:8px; font-weight:600; font-size:15px; letter-spacing:-.012em; white-space:nowrap }
.nav__mark{ position:relative; width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:50% }
.nav__prog{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible }
.nav__prog circle{ fill:none; stroke:var(--hair); stroke-width:1.5 }
.nav__prog .nav__prog-on{ stroke:var(--accent); stroke-linecap:round; stroke-dasharray:128.81; stroke-dashoffset:calc(128.81 * (1 - var(--sp, 0))) }
/* the gimbal: three nested rings in CSS 3D, turned by the real instrument's angles */
.nav__gimbal{ position:relative; width:24px; height:24px; perspective:70px; transform-style:preserve-3d }
.nav__gimbal i{ position:absolute; display:block; border-radius:50%; border:1.5px solid currentColor; transform-style:preserve-3d }
.nav__g1{ inset:0 }
.nav__g2{ inset:2px; opacity:.85 }
.nav__g3{ inset:2px; opacity:.7 }
.nav__pearl{ position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px; border-radius:50%; background:var(--accent) }
.nav__name{ display:flex; gap:.28em; overflow:hidden }
.nav__name > span{ display:block; transition:transform .7s var(--out), opacity .5s }
.nav__links{ position:relative; display:flex; margin-left:auto; padding:3px; border-radius:99px }
.nav__lens{ position:absolute; left:0; top:3px; bottom:3px; width:var(--w, 0px); transform:translateX(var(--x, 0px)); border-radius:99px; pointer-events:none;
  background:color-mix(in srgb, var(--fg) 8%, transparent); opacity:0; transition:opacity .35s, background-color .35s }
.nav__lens.is-on{ opacity:1 }
.nav__lens.is-hot{ background:var(--fg) }
.nav__links a{ position:relative; z-index:1; display:flex; align-items:flex-start; gap:4px; padding:9px 15px; border-radius:99px;
  font-size:14px; font-weight:500; color:var(--fg2); transition:color .3s }
.nav__links a.is-current{ color:var(--fg) }
.nav__links a.is-lit{ color:var(--bg) }
.nav__t{ position:relative; display:flex; height:1.3em; line-height:1.3em; overflow:hidden; transition:transform .5s var(--out) }
.nav__t .c{ display:block; white-space:pre; transition:transform .55s var(--out); transition-delay:calc(var(--i) * 22ms) }
.nav__t .c::after{ content:attr(data-c); display:block }
.nav__links a.is-lit .nav__t .c{ transform:translateY(-100%) }
.nav__cta{ margin-left:4px }
.burger{ display:none; width:42px; height:42px; border-radius:99px; position:relative; flex:none; box-shadow:inset 0 0 0 1px var(--hair) }
.burger span{ position:absolute; left:13px; width:16px; height:1.6px; background:currentColor; border-radius:2px; transition:transform .55s var(--soft) }
.burger span:first-child{ top:17px } .burger span:last-child{ top:23px }
.burger.is-open span:first-child{ transform:translateY(3px) rotate(45deg) }
.burger.is-open span:last-child{ transform:translateY(-3px) rotate(-45deg) }

.menu{ position:fixed; inset:0; z-index:58 }
.menu[hidden]{ display:none }
.menu__panel{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--gut) + 70px) var(--gut) var(--gut); transform:translateY(-100%); border-radius:0 0 32px 32px; background:var(--bg); color:var(--fg) }
.menu__nav{ display:flex; flex-direction:column; gap:2px }
.menu__nav a{ display:flex; align-items:flex-start; gap:12px; font-size:clamp(2.4rem, 11vw, 4.8rem); font-weight:600; letter-spacing:-.045em; line-height:1.04; transition:color .3s }
.menu__nav sup{ margin-top:.5em; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--accent) }
.menu__nav a .mask > i{ transform:translateY(110%) }
.menu__nav a:hover{ color:var(--accent) }
.menu__foot{ display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:40px; padding-top:24px; border-top:1px solid var(--hair); font-size:15px; color:var(--fg2) }

/* ═══════════════════════════════════════════════════════════════════════
   HERO: the name answers the pointer, the pointer carries a light, the
   instrument can be grabbed. Nothing else competes with them.
   ═══════════════════════════════════════════════════════════════════════ */
.hero{ position:relative; z-index:1; min-height:100svh; display:flex; flex-direction:column; padding-top:clamp(100px, 14vh, 140px); overflow:clip }
.hero::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:var(--la,0); transition:opacity 1.6s var(--out);
  background:
    radial-gradient(640px circle at var(--lx,72%) var(--ly,40%), rgba(255,253,248,.9), rgba(255,253,248,0) 70%),
    radial-gradient(1600px circle at var(--lx,72%) var(--ly,40%), rgba(37,52,79,0) 34%, rgba(37,52,79,.07) 100%) }
.hero__eyebrow{ position:relative; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--fg2) }
.hero__eyebrow span{ display:inline-block }
.hero__name{ position:relative; margin-top:clamp(16px, 4vh, 44px); padding-inline:var(--gut); width:100%; max-width:var(--wrap); margin-inline:auto;
  font-size:clamp(4rem, calc(11.8vw - 6px), 9.6rem); font-weight:600; line-height:.84; letter-spacing:-.058em; color:var(--fg); cursor:default;
  -webkit-user-select:none; user-select:none }
.hero__line{ display:block; overflow:hidden; white-space:nowrap; padding:.07em .1em .12em 0; margin:-.07em -.1em -.12em 0 }
.hero__line--2{ padding-left:min(10vw, 150px) }
.hero__name .l{ display:inline-block; transform-origin:50% 100%; font-variation-settings:"wght" var(--wg,600), "wdth" var(--wd,100) }
/* sized with the name above so the two never touch, at any width */
.hero__stage{ position:absolute; right:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); top:clamp(140px, 22vh, 230px); width:min(31.5vw, 490px); height:min(62vh, 600px); pointer-events:none }
.hero__stage::before{ content:""; position:absolute; left:50%; top:44%; width:122%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%) scale(var(--glow,1)); opacity:var(--glowA,1);
  background:radial-gradient(closest-side, rgba(213,184,147,.42), rgba(213,184,147,.12) 55%, rgba(213,184,147,0)) }
.hero__foot{ position:relative; margin-top:auto; padding-block:40px clamp(32px, 6vh, 56px); display:flex; flex-direction:column; align-items:flex-start; gap:24px }
.hero__lede{ font-size:clamp(1.05rem, 1.34vw, 1.28rem); line-height:1.5; max-width:36ch; color:var(--fg2) }
.hero__cta{ display:flex; flex-wrap:wrap; gap:10px }

/* ═══════════════════════════════════════════════════════════════════════
   ABOUT: the paragraph rises line by line; four living pills
   ═══════════════════════════════════════════════════════════════════════ */
.about{ position:relative; z-index:3; padding-block:clamp(110px, 20vh, 230px) clamp(100px, 17vh, 200px) }
.about__text{ margin-top:34px; max-width:21.5em; font-size:clamp(1.85rem, 3.85vw, 3.95rem); font-weight:500; line-height:1.13; letter-spacing:-.036em; text-wrap:pretty }
.about__text .ln{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em }
.path{ margin-top:clamp(70px, 12vh, 130px); display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(22px, 3vw, 48px) }
.path__step{ position:relative; padding-top:24px }
.path__step::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--fg); opacity:.5; transform-origin:0 50% }
.js .path__step::before{ transform:scaleX(0); transition:transform 1.3s var(--out) .15s }
.js .path__step.is-in::before{ transform:none }
.path__n{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--accent) }
.path__t{ display:block; margin-top:12px; font-size:clamp(1.5rem, 2.2vw, 2.1rem); font-weight:600; letter-spacing:-.035em; line-height:1 }
.path__p{ margin-top:12px; max-width:34ch; font-size:15.5px; line-height:1.55; color:var(--fg2) }
.pill{ position:relative; display:inline-block; width:1.9em; height:.94em; margin-inline:.05em; border-radius:99px; background:var(--navy);
  vertical-align:-.14em; overflow:hidden; box-shadow:inset 0 0 0 .025em rgba(242,235,224,.18); transition:transform .5s var(--spring) }
.pill:hover{ transform:scale(1.12) rotate(-3deg) }
.pill i, .pill b{ position:absolute; display:block }
.is-paused .pill *{ animation-play-state:paused !important }
/* rings: a tiny gimbal in CSS 3D */
.pill--rings{ perspective:4em }
.pill--rings i{ left:50%; top:50%; border-radius:50%; border:.07em solid; transform-style:preserve-3d; animation:gimbal 3.4s linear infinite }
.pill--rings i:nth-child(1){ width:.68em; height:.68em; margin:-.34em; border-color:var(--tan) }
.pill--rings i:nth-child(2){ width:.46em; height:.46em; margin:-.23em; border-color:var(--slate-mist); animation-duration:2.3s; animation-direction:reverse }
.pill--rings i:nth-child(3){ width:.2em; height:.2em; margin:-.1em; border:0; background:var(--cream); animation:none }
@keyframes gimbal{ from{ transform:rotateX(62deg) rotateY(0) } to{ transform:rotateX(62deg) rotateY(360deg) } }
/* site: a window that builds itself */
.pill--site{ background:var(--cream) }
.pill--site i:nth-child(1){ left:.2em; top:.16em; width:.54em; height:.1em; border-radius:99px; background:var(--navy); animation:site1 3s var(--out) infinite }
.pill--site i:nth-child(2){ left:.2em; top:.36em; width:1.5em; height:.34em; border-radius:.08em; background:var(--oxblood); transform-origin:left; animation:site2 3s var(--out) infinite }
.pill--site i:nth-child(3){ left:1.26em; top:.14em; width:.44em; height:.14em; border-radius:99px; background:var(--slate); animation:site3 3s var(--spring) infinite }
@keyframes site1{ 0%,8%{ transform:scaleX(0) } 30%,100%{ transform:scaleX(1) } }
@keyframes site2{ 0%,25%{ transform:scaleX(0) } 55%,100%{ transform:scaleX(1) } }
@keyframes site3{ 0%,50%{ transform:scale(0) } 70%,100%{ transform:scale(1) } }
/* ball: bounce with squash and stretch */
.pill--ball{ background:var(--tan) }
.pill--ball i{ left:calc(50% - .15em); bottom:.1em; width:.3em; height:.3em; border-radius:50%; background:var(--navy); transform-origin:50% 100%; animation:bounce 1.05s infinite }
@keyframes bounce{
  0%{ transform:translateY(0) scale(1.35,.65); animation-timing-function:cubic-bezier(.2,.7,.4,1) }
  10%{ transform:translateY(-.08em) scale(.8,1.25) }
  50%{ transform:translateY(-.5em) scale(1,1); animation-timing-function:cubic-bezier(.6,0,.8,.3) }
  92%{ transform:translateY(-.04em) scale(.85,1.2) }
  100%{ transform:translateY(0) scale(1.35,.65) }
}
/* zoom: a lens sweeping a pixel grid */
.pill--zoom{ background:radial-gradient(circle, rgba(242,235,224,.4) .045em, transparent .05em) 0 0 / .16em .16em, var(--navy) }
.pill--zoom i{ left:.14em; top:.1em; width:.72em; height:.72em; border-radius:50%; border:.07em solid var(--tan);
  background:radial-gradient(circle, var(--tan) .08em, transparent .09em) 0 0 / .3em .3em, rgba(27,38,58,.92); animation:lens 3.2s var(--soft) infinite alternate }
@keyframes lens{ to{ transform:translateX(.9em) } }

.facts{ margin-top:clamp(56px, 9vh, 100px); display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:26px clamp(20px,3vw,44px);
  padding-top:26px; border-top:1px solid var(--hair) }
.facts dt, .contact__info dt{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg3) }
.facts dd{ margin-top:8px; font-size:16px; font-weight:500; line-height:1.45 }
.facts__sub{ display:block; margin-top:4px; font-size:14px; font-weight:400; color:var(--fg2) }

/* ═══════════════════════════════════════════════════════════════════════
   WORK: the screenshots live in WebGL; the DOM keeps their places
   ═══════════════════════════════════════════════════════════════════════ */
.work{ position:relative; z-index:5; padding-block:clamp(120px, 20vh, 230px) clamp(100px, 15vh, 180px); overflow:clip }
.work__glow{ position:absolute; left:0; top:0; width:1200px; height:1200px; margin:-600px 0 0 -600px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(213,184,147,.09), rgba(213,184,147,0)); transform:translate3d(-2000px,-2000px,0); will-change:transform }
.projects{ display:flex; flex-direction:column; gap:clamp(120px, 24vh, 260px) }
.project{ position:relative; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:clamp(16px, 2vw, 32px); align-items:center }
.project__media{ grid-column:1 / span 8; position:relative; display:block; aspect-ratio:16 / 10; border-radius:14px; background:var(--navy-2); cursor:pointer }
.project__media > img{ width:100%; height:100%; object-fit:cover; object-position:top; border-radius:inherit }
.project__phone{ position:absolute; right:-5%; bottom:-13%; width:21%; aspect-ratio:26 / 54; border-radius:26px; background:#121A28; padding:7px }
.project__phone img{ width:100%; height:100%; object-fit:cover; object-position:top; border-radius:19px }
.project__phone::before{ content:""; position:absolute; z-index:1; top:9px; left:37%; width:26%; height:10px; border-radius:5px; background:#121A28 }
.project__info{ grid-column:10 / span 3 }
.project:nth-child(even) .project__media{ grid-column:5 / span 8; order:2 }
.project:nth-child(even) .project__phone{ right:auto; left:-5% }
.project:nth-child(even) .project__info{ grid-column:1 / span 3 }
.gl-gallery .project__media > img, .gl-gallery .project__phone{ opacity:0 }
.gl-gallery .project__media{ background:none }
/* plain images (page opened as a file, or WebGL refused them): a clip reveal instead */
.dom-gallery .project__media{ background:none }
.dom-gallery .project__media > img{ clip-path:inset(100% 0 0 0 round 14px); transform:scale(1.12); transform-origin:50% 100%;
  transition:clip-path 1.4s var(--out), transform 1.9s var(--out) }
.dom-gallery .project__phone{ opacity:0; transform:translate3d(0,80px,0) rotate(4deg); transition:opacity .8s .3s, transform 1.5s .3s var(--out) }
.dom-gallery .project:nth-child(even) .project__phone{ transform:translate3d(0,80px,0) rotate(-4deg) }
.dom-gallery .project.is-in .project__media > img{ clip-path:inset(0 0 0 0 round 14px); transform:none }
.dom-gallery .project.is-in .project__phone{ opacity:1; transform:none }
/* the details of a project follow its name in, one after the other */
.has-reveals .project__info > *{ transition:opacity .9s var(--out), transform 1.1s var(--out) }
.has-reveals .project:not(.is-in) .project__info > :not(.project__name){ opacity:0; transform:translateY(26px) }
.has-reveals .project.is-in .project__info > :nth-child(3){ transition-delay:.12s }
.has-reveals .project.is-in .project__info > :nth-child(4){ transition-delay:.18s }
.has-reveals .project.is-in .project__info > :nth-child(5){ transition-delay:.24s }
.has-reveals .project.is-in .project__info > :nth-child(6){ transition-delay:.3s }
.has-reveals .project:not(.is-in) .project__name{ visibility:hidden }
.project__n{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--accent) }
.project__badge{ padding:4px 10px 3px; border-radius:99px; background:var(--accent); color:var(--bg); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase }
.project__name{ margin-top:14px; font-size:clamp(2rem, 3.4vw, 3.5rem); font-weight:600; letter-spacing:-.045em; line-height:.96 }
.project__name .ln{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em }
.project__kind{ margin-top:14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg3) }
.project__desc{ margin-top:18px; font-size:15.5px; line-height:1.62; color:var(--fg2) }
.project__tags{ margin-top:18px; display:flex; flex-wrap:wrap; gap:6px }
.project__tags li{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; padding:6px 10px; border-radius:99px; box-shadow:inset 0 0 0 1px var(--hair); color:var(--fg2) }
.project__link{ margin-top:26px; display:inline-flex; align-items:center; gap:10px; font-weight:500; font-size:15px }
.project__link span{ position:relative }
.project__link span::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .55s var(--out) }
.project:hover .project__link span::after, .project__link:focus-visible span::after{ transform:scaleX(1); transform-origin:left }
.project__link i{ width:26px; height:26px; border-radius:99px; background:var(--accent); position:relative; transition:transform .55s var(--spring) }
.project__link i::after{ content:""; position:absolute; inset:7px; background:var(--bg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12L12 4M12 4H6M12 4v6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12L12 4M12 4H6M12 4v6'/%3E%3C/svg%3E") center/contain no-repeat }
.project:hover .project__link i{ transform:rotate(45deg) scale(1.12) }
.work__more{ margin-top:clamp(90px, 16vh, 170px); font-size:clamp(1.3rem, 2vw, 1.8rem); font-weight:500; letter-spacing:-.02em; color:var(--fg2) }
.work__more .ulink{ color:var(--fg) }

/* ═══════════════════════════════════════════════════════════════════════
   PROCESS: a pinned "machine". On the right, the instrument goes back to
   an idea on a sheet of drafting paper, is drawn, built and launched
   (stage.js and process3d.js); on the left, the step you are on.
   ═══════════════════════════════════════════════════════════════════════ */
.process{ position:relative; z-index:7; padding-top:clamp(120px, 20vh, 230px); padding-bottom:clamp(40px, 8vh, 90px) }
.process .sec-head{ margin-bottom:clamp(24px, 6vh, 70px) }
.machine{ position:relative; height:460vh }
.machine__frame{ position:sticky; top:0; height:100vh; height:100svh }
.machine__in{ height:100%; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px, 4vw, 72px); align-items:stretch }
.machine__copy{ order:-1; display:flex; flex-direction:column; justify-content:center; gap:clamp(36px, 8vh, 90px); padding-block:clamp(90px, 13vh, 130px) clamp(36px, 7vh, 70px) }
.machine__stage{ position:relative; align-self:center; height:min(80vh, 780px); width:100% }
.psteps{ display:grid }
.pstep{ grid-area:1 / 1; align-self:start }
.js .pstep:not(.is-on){ visibility:hidden }
.pstep__n{ display:flex; align-items:baseline; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--accent) }
.pstep__n i{ font-style:normal; color:var(--fg3) }
.pstep__t{ margin-top:16px; font-size:clamp(2.8rem, 5.6vw, 6rem); font-weight:600; letter-spacing:-.055em; line-height:.9 }
.pstep__t .ln{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em }
.pstep__p{ margin-top:22px; max-width:42ch; font-size:17px; line-height:1.62; color:var(--fg2) }
.pstep__get{ margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; font-weight:500; font-size:16px }
.pstep__get span{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  padding:5px 10px 4px; border-radius:99px; box-shadow:inset 0 0 0 1px currentColor }
.ptrack{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; max-width:560px }
.ptrack__b{ position:relative; display:flex; flex-direction:column; gap:4px; padding-top:14px; text-align:left; font-size:13.5px; font-weight:500;
  color:var(--fg3); transition:color .4s }
.ptrack__b::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; border-radius:2px; background:var(--hair) }
.ptrack__fill{ position:absolute; left:0; right:0; top:0; height:2px; border-radius:2px; background:var(--fg); transform:scaleX(var(--p, 0)); transform-origin:0 50% }
.ptrack__n{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--accent) }
.ptrack__b.is-on, .ptrack__b:hover{ color:var(--fg) }

/* ═══════════════════════════════════════════════════════════════════════
   TOOLS: a transit map. Seven lines, thirty-three stops; it draws itself
   as you scroll (pinned), then every stop opens its card.
   ═══════════════════════════════════════════════════════════════════════ */
.tools{ position:relative; z-index:9; padding-top:clamp(120px, 20vh, 230px); padding-bottom:clamp(60px, 10vh, 120px) }
.tools .sec-head{ margin-bottom:clamp(24px, 6vh, 64px) }
.metro{ position:relative }
.metro__in{ position:relative; max-width:1680px; margin-inline:auto }
.metro.is-wide{ height:360vh }
.metro.is-wide .metro__in{ position:sticky; top:0; height:100vh; height:100svh }
.metro.is-wide .metro__view{ position:absolute; inset:clamp(70px, 10vh, 100px) var(--gut) clamp(70px, 11vh, 104px) }
.metro.is-tall .metro__in{ padding-inline:max(6px, calc(var(--gut) - 14px)) }
.metro.is-tall .metro__view{ aspect-ratio:430 / 1100; max-height:none }
.metro__view > svg{ display:block; width:100%; height:100%; overflow:hidden; -webkit-user-select:none; user-select:none }
.metro__view svg svg{ overflow:hidden; max-width:none }
.metro__legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 8px }
.metro.is-wide .metro__legend{ position:absolute; left:var(--gut); right:var(--gut); bottom:clamp(18px, 3vh, 30px) }
.metro.is-tall .metro__legend{ margin-top:22px; padding-inline:var(--gut); justify-content:flex-start }
.metro__legend button{ display:flex; align-items:center; gap:9px; height:36px; padding:0 14px 0 11px; border-radius:99px; font-size:13.5px; font-weight:500;
  color:var(--fg2); box-shadow:inset 0 0 0 1px var(--hair); transition:color .3s, background-color .3s, box-shadow .3s }
.metro__legend button::before{ content:""; width:20px; height:5px; border-radius:5px; background:var(--c) }
.metro__legend button[data-line="motion"]::before{ background:none; box-shadow:inset 0 0 0 1.6px var(--c) }
.metro__legend button[data-line="ai"]::before{ background:radial-gradient(circle, var(--c) 1.6px, transparent 2px) 0 50% / 6px 5px repeat-x }
.metro__legend button:hover, .metro__legend button:focus-visible, .metro__legend button.is-on{ color:var(--fg); background:rgba(242,235,224,.07); box-shadow:inset 0 0 0 1px rgba(242,235,224,.34) }
/* the map itself (SVG built by tools.js) */
.m-grid path{ stroke:rgba(242,235,224,.11); stroke-width:2.2; stroke-linecap:round }
.m-line{ transition:opacity .45s var(--out) }
.m-line path{ fill:none; stroke-linecap:round; stroke-linejoin:round }
.m-train{ filter:drop-shadow(0 0 6px rgba(27,38,58,.9)) }
.m-st{ cursor:pointer; outline:none; transition:opacity .45s var(--out) }
.m-st__halo{ fill:rgba(242,235,224,0); transition:fill .35s }
.m-st__disc{ fill:var(--navy-deep); transition:fill .35s }
.m-st__mono, .m-st__color{ transition:opacity .35s }
.m-st__color{ opacity:0 }
.m-st__label{ fill:rgba(242,235,224,.86); font-family:var(--sans); font-weight:600; letter-spacing:-.01em; paint-order:stroke; stroke:var(--navy-deep); stroke-width:5px; stroke-linejoin:round; transition:fill .3s }
.m-st.is-hot .m-st__disc, .m-st:focus-visible .m-st__disc{ fill:var(--cream) }
.m-st.is-hot .m-st__halo, .m-st:focus-visible .m-st__halo{ fill:rgba(242,235,224,.14) }
.m-st.is-hot .m-st__mono, .m-st:focus-visible .m-st__mono{ opacity:0 }
.m-st.is-hot .m-st__color, .m-st:focus-visible .m-st__color{ opacity:1 }
.m-st__color.is-dark{ filter:brightness(.2) }
.m-st.is-hot .m-st__label, .m-st:focus-visible .m-st__label{ fill:var(--tan) }
.m-line.is-dim, .m-st.is-dim{ opacity:.16 }
/* the card of the stop you point at */
.metro__card{ position:absolute; left:0; top:0; z-index:3; width:260px; padding:16px 18px 17px; border-radius:16px; pointer-events:none;
  background:rgba(247,242,233,.98); color:var(--navy); box-shadow:0 30px 60px -28px rgba(0,0,0,.7);
  transform:translate(var(--cx, 0px), var(--cy, 0px)); transition:opacity .25s, visibility 0s }
.metro__card[hidden]{ display:block; opacity:0; visibility:hidden; transition:opacity .2s, visibility 0s .2s }
.metro.is-tall .metro__card{ position:fixed; z-index:62; left:12px; right:12px; top:auto; bottom:12px; width:auto; transform:none;
  display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:start }
.metro.is-tall .metro__card[hidden]{ transform:translateY(30px) }
.metro.is-tall .metro__card .metro__logo{ grid-row:1 / span 4 }
.metro__logo{ display:block; width:44px; height:44px; background:0 0 / 600% 600% no-repeat }
.metro.is-ready .metro__logo{ background-image:url(../assets/img/tools/logos.webp) }
.metro__logo.is-dark{ filter:brightness(.2) }
.metro__line{ margin-top:12px; display:flex; flex-wrap:wrap; gap:4px 12px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-ink) }
.metro.is-tall .metro__line{ margin-top:0 }
.metro__line b{ display:inline-flex; align-items:center; gap:6px; font-weight:500 }
.metro__line b::before{ content:""; width:14px; height:4px; border-radius:4px; background:var(--c) }
.metro__name{ margin-top:6px; font-size:22px; font-weight:600; letter-spacing:-.035em; line-height:1.05 }
.metro__use{ margin-top:6px; font-size:14px; line-height:1.45; color:var(--coffee) }
/* the plain list: what search engines read (and everyone, without JavaScript) */
.js .stack{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.stack{ padding-inline:var(--gut); display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:24px }
.stack__line::before{ content:attr(data-name); display:block; margin-bottom:8px; font-family:var(--mono); font-size:12px; text-transform:uppercase; color:var(--accent) }

/* ═══════════════════════════════════════════════════════════════════════
   CAPABILITIES: four disciplines, four live panels
   ═══════════════════════════════════════════════════════════════════════ */
.caps{ position:relative; z-index:11; padding-block:clamp(120px, 20vh, 230px) clamp(90px, 14vh, 160px) }
.caps__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:0 clamp(32px, 5vw, 96px); align-items:start }
.cap{ min-height:86vh; padding:12vh 0 10vh; border-top:1px solid var(--hair) }
.cap:first-child{ padding-top:4vh; border-top:0 }
.cap__n{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--accent) }
.cap__name{ margin-top:10px; font-size:clamp(3rem, 5.8vw, 6.4rem); font-weight:600; line-height:.9; letter-spacing:-.056em;
  -webkit-text-stroke:1.5px transparent; transition:color .6s var(--out), -webkit-text-stroke-color .6s var(--out) }
.cap__text{ margin-top:24px; font-size:17px; line-height:1.62; color:var(--fg2); max-width:38ch }
.caps__stage{ position:sticky; top:13vh; height:74vh }
.caps__foot{ margin-top:clamp(60px, 10vh, 110px); font-size:clamp(1.25rem, 1.9vw, 1.7rem); font-weight:500; letter-spacing:-.02em; max-width:36em }

/* the panels: navy windows on the cream page */
.demo{ --bg:var(--navy); --fg:var(--cream); --fg2:rgba(242,235,224,.76); --fg3:var(--slate-mist); --accent:var(--tan); --hair:rgba(242,235,224,.14); --hair-2:rgba(242,235,224,.08);
  position:relative; height:clamp(380px, 62vh, 560px); margin-top:36px; border-radius:var(--r); background:var(--bg); color:var(--fg);
  overflow:hidden; box-shadow:0 40px 80px -50px rgba(27,38,58,.7) }
.demo--type, .demo--spring, .demo--lab{ -webkit-user-select:none; user-select:none }
.demo__bar{ position:absolute; left:0; right:0; top:0; z-index:3; display:flex; justify-content:space-between; align-items:center; gap:12px;
  height:46px; padding:0 18px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--fg3); border-bottom:1px solid var(--hair-2) }
.demo__bar span:first-child{ display:flex; align-items:center; gap:9px; color:var(--fg2) }
.demo__bar span:first-child::before{ content:""; width:28px; height:8px; background:
  radial-gradient(circle 4px at 4px 4px, rgba(242,235,224,.55) 97%, transparent) 0 0 / 10px 8px no-repeat,
  radial-gradient(circle 4px at 4px 4px, rgba(242,235,224,.3) 97%, transparent) 10px 0 / 10px 8px no-repeat,
  radial-gradient(circle 4px at 4px 4px, rgba(242,235,224,.16) 97%, transparent) 20px 0 / 10px 8px no-repeat }
.demo__hint{ color:var(--accent) }
@media (min-width:901px){
  .caps__stage .demo{ position:absolute; inset:0; height:auto; margin:0; opacity:0; visibility:hidden; transform:translateY(24px) scale(.97);
    transition:opacity .45s var(--out), transform .8s var(--out), visibility 0s linear .45s }
  .caps__stage .demo.is-on{ opacity:1; visibility:visible; transform:none; transition-delay:0s }
  /* the disciplines you are not reading are drawn in outline */
  .cap:not(.is-on) .cap__name{ color:transparent; -webkit-text-stroke-color:rgba(37,52,79,.42) }
}

/* 01 type */
.demo--type{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); grid-template-rows:1fr auto; padding:66px 26px 24px; gap:14px 22px;
  --a:#F2EBE0; --b:#25344F; background:var(--b); color:var(--a); transition:background-color .6s var(--out), color .6s var(--out) }
.type__spec{ grid-row:1 / span 2; align-self:center; font-size:clamp(7rem, 14vw, 13rem); line-height:.82; letter-spacing:-.04em;
  font-variation-settings:"wdth" var(--wd,100), "wght" var(--wg,600); user-select:none }
.type__pad{ position:relative; align-self:center; aspect-ratio:1; border-radius:16px; box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
  cursor:crosshair; touch-action:none }
.type__grid{ position:absolute; inset:0; border-radius:inherit; opacity:.35;
  background:linear-gradient(currentColor 0 0) 50% 0 / 1px 100% no-repeat, linear-gradient(currentColor 0 0) 0 50% / 100% 1px no-repeat,
  radial-gradient(circle, currentColor 1px, transparent 1.4px) 0 0 / 12.5% 12.5% }
.type__knob{ position:absolute; left:var(--kx,100%); top:var(--ky,33%); width:22px; height:22px; margin:-11px; border-radius:50%; background:currentColor;
  box-shadow:0 0 0 4px color-mix(in srgb, currentColor 24%, transparent) }
.type__ax{ position:absolute; font-family:var(--mono); font-size:12px; opacity:.75 }
.type__ax--x{ left:10px; bottom:8px } .type__ax--y{ right:10px; top:8px }
.type__read{ align-self:end; font-family:var(--mono); font-size:12px; opacity:.85 } .type__read b{ font-weight:500 }
.type__sw{ position:absolute; left:26px; bottom:22px; display:flex; gap:8px }
.type__sw button{ width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow:inset 0 0 0 1px rgba(128,128,128,.45);
  transition:transform .4s var(--spring) }
.type__sw button:hover{ transform:scale(1.12) } .type__sw button.is-on{ box-shadow:0 0 0 2px currentColor }

/* 02 code */
.demo--code{ display:flex; flex-direction:column; padding-top:46px; background:var(--navy-deep) }
.code__stage{ position:relative; flex:1; min-height:150px; display:flex; align-items:flex-end; justify-content:center; gap:clamp(12px, 2.2vw, 26px); padding-bottom:26px;
  background:radial-gradient(90% 100% at 50% 100%, rgba(213,184,147,.08), transparent); border-bottom:1px solid var(--hair-2) }
.code__stage i{ width:clamp(22px, 2.6vw, 34px); height:clamp(22px, 2.6vw, 34px); border-radius:9px; background:var(--tan) }
.code__stage i:nth-child(2){ background:var(--cream) } .code__stage i:nth-child(3){ background:var(--slate-mist) } .code__stage i:nth-child(4){ background:#B4605B } .code__stage i:nth-child(5){ background:var(--tan) }
.code__src{ padding:20px 24px 24px; font-family:var(--mono); font-size:clamp(12px, 1.02vw, 14px); line-height:1.75; color:var(--fg2); white-space:pre; overflow-x:auto }
.c-fn{ color:var(--slate-mist) } .c-str{ color:var(--tan) }
.num{ color:var(--cream); font-weight:500; cursor:ew-resize; border-bottom:1px dashed rgba(213,184,147,.65); padding:0 1px; user-select:none; touch-action:none }
.num:hover, .num.is-drag{ background:rgba(213,184,147,.16); border-radius:4px }
.ease{ color:var(--tan); font-family:inherit; font-size:inherit; border-bottom:1px dashed rgba(213,184,147,.65); padding:0 1px; cursor:pointer }
.ease:hover{ background:rgba(213,184,147,.16); border-radius:4px }

/* 03 spring */
.demo--spring{ background:var(--navy-deep) }
.spring__cv{ position:absolute; inset:46px 0 0; width:100%; height:calc(100% - 46px); touch-action:none }
@media (hover:none){ .spring__cv{ touch-action:pan-y } }
.spring__cv.is-drag{ cursor:grabbing }
.spring__ctl{ position:absolute; left:20px; right:20px; bottom:18px; display:flex; gap:22px; font-family:var(--mono); font-size:12px; color:var(--fg3) }
.spring__ctl label{ flex:1; display:flex; flex-direction:column; gap:8px }
.spring__ctl input{ -webkit-appearance:none; appearance:none; height:24px; background:none; cursor:pointer }
.spring__ctl input::-webkit-slider-runnable-track{ height:2px; background:var(--hair); border-radius:2px }
.spring__ctl input::-moz-range-track{ height:2px; background:var(--hair); border-radius:2px }
.spring__ctl input::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; margin-top:-8px; border-radius:50%; background:var(--tan); border:0 }
.spring__ctl input::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--tan); border:0 }

/* 04 lab: the instrument is drawn by the WebGL layer, above this panel */
.demo--lab{ background:radial-gradient(70% 70% at 50% 45%, #34486B, var(--navy-deep)); cursor:grab; touch-action:pan-y }
.demo--lab.is-drag{ cursor:grabbing }
/* the labels live above the WebGL layer, pinned to the panel by stage.js */
.lab-ol{ position:fixed; left:0; top:0; z-index:56; width:10px; height:10px; pointer-events:none; opacity:0; color:var(--cream); will-change:transform }
.lab-ol__lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.lab-ol__lines line{ stroke:rgba(242,235,224,.55); stroke-width:1; stroke-dasharray:3 3 }
.lab-ol__label{ position:absolute; left:0; top:0; display:flex; flex-direction:column; font-size:13px; font-weight:500; line-height:1.3;
  padding:7px 11px; border-radius:9px; background:rgba(27,38,58,.86); box-shadow:inset 0 0 0 1px rgba(242,235,224,.14); white-space:nowrap }
.lab-ol__label::before{ content:""; position:absolute; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--tan) }
.lab-ol__label[data-side="l"]::before{ right:-3.5px } .lab-ol__label[data-side="r"]::before{ left:-3.5px }
.lab-ol__label small{ font-family:var(--mono); font-size:10.5px; color:var(--slate-mist); font-weight:400 }
.lab__stats{ position:absolute; left:20px; right:20px; bottom:18px; font-family:var(--mono); font-size:12px; color:var(--fg3) }
.lab__stats b{ color:var(--accent); font-weight:500 } .lab__stats span{ margin-inline:6px }

/* ═══════════════════════════════════════════════════════════════════════
   CONTACT: tan, and the instrument back at full size
   ═══════════════════════════════════════════════════════════════════════ */
.contact{ position:relative; z-index:13; padding-block:clamp(120px, 20vh, 220px) clamp(56px, 9vh, 100px); overflow:clip }
.contact__grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:24px clamp(24px, 4vw, 72px); align-items:center }
.contact__title{ font-size:clamp(3rem, 7vw, 7.6rem) }
.contact__p{ margin-top:30px; font-size:17px; line-height:1.6; color:var(--fg2); max-width:42ch }
.mail{ margin-top:40px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px }
.mail__link{ position:relative; font-size:clamp(1.25rem, 2.4vw, 2.3rem); font-weight:500; letter-spacing:-.03em; padding-bottom:6px; overflow-wrap:anywhere }
.mail__link::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--hair) }
.mail__link::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .8s var(--out); z-index:1 }
.mail__link:hover::before{ transform:none }
.mail__copy{ position:relative; display:grid; height:40px; padding:0 16px; border-radius:99px; box-shadow:inset 0 0 0 1px var(--hair); font-family:var(--mono); font-size:12px;
  color:var(--fg2); overflow:hidden; transition:background-color .3s, color .3s }
.mail__copy:hover{ background:color-mix(in srgb, var(--fg) 8%, transparent); color:var(--fg) }
.mail__s{ grid-area:1/1; align-self:center; transition:transform .5s var(--out), opacity .3s }
.mail__s--b{ transform:translateY(120%); opacity:0; color:var(--accent) }
.mail__copy.is-done .mail__s--a{ transform:translateY(-120%); opacity:0 }
.mail__copy.is-done .mail__s--b{ transform:none; opacity:1 }
.socials{ margin-top:28px; display:flex; flex-wrap:wrap; gap:10px }
.contact__stage{ position:relative; height:min(66vh, 620px); min-height:380px }
.contact__stage::before{ content:""; position:absolute; left:50%; top:46%; width:120%; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(242,235,224,.5), rgba(242,235,224,0)) }
.contact__info{ margin-top:clamp(64px, 11vh, 120px); display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px clamp(20px, 3vw, 44px);
  padding-top:24px; border-top:1px solid var(--hair) }
.contact__info dd{ margin-top:8px; font-size:15.5px; font-weight:500; line-height:1.45 }
.contact__info b{ font-family:var(--mono); font-weight:500; color:var(--accent) }

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER: the name, too big to fit, letters that jump
   ═══════════════════════════════════════════════════════════════════════ */
.foot{ position:relative; z-index:14; overflow:hidden; padding-top:clamp(40px, 8vh, 90px) }
.foot__giant{ font-size:23.4vw; font-weight:600; letter-spacing:-.066em; line-height:.8; text-align:center; white-space:nowrap; user-select:none;
  margin-bottom:-.02em; color:var(--tan) }
.foot__giant .l{ display:inline-block; transform-origin:50% 100%; cursor:default }
.foot__row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 24px; padding-block:22px 28px;
  border-top:1px solid var(--hair); font-size:14px; color:var(--fg2) }
.foot__row .ulink{ color:var(--fg) }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .nav__links{ display:none } .nav__cta{ display:none } .burger{ display:block; margin-left:auto }
  .facts, .contact__info{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .project__info, .project:nth-child(even) .project__info{ grid-column:span 4 }
  .project__media{ grid-column:1 / span 8 } .project:nth-child(even) .project__media{ grid-column:5 / span 8 }
  .project__phone{ right:3% } .project:nth-child(even) .project__phone{ left:3% }
  .machine__in{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  .pstep__t{ font-size:clamp(2.6rem, 6vw, 4.4rem) }
}
@media (max-width:900px){
  .hero{ padding-top:96px }
  .hero__line--2{ padding-left:0 }
  .hero__stage{ position:relative; right:auto; top:auto; width:100%; height:min(46vh, 420px); margin-top:8px }
  .hero__foot{ padding-top:16px }
  .path{ grid-template-columns:1fr }
  .sec-head{ grid-template-columns:1fr }
  .project{ display:flex; flex-direction:column; align-items:stretch }
  .project__media, .project:nth-child(even) .project__media{ order:0; width:100%; margin-bottom:22vw }
  .project__phone, .project:nth-child(even) .project__phone{ right:4%; left:auto; bottom:-24vw; width:28% }
  .project__info, .project:nth-child(even) .project__info{ grid-column:auto }
  /* the machine stacks: the drawing on top, the step under it */
  .machine{ height:400vh }
  .machine__in{ display:flex; flex-direction:column; justify-content:flex-start; gap:0; padding-top:max(64px, 9svh) }
  .machine__stage{ flex:none; height:44svh; align-self:stretch }
  .machine__copy{ order:0; flex:1; justify-content:space-between; gap:18px; padding-block:12px max(22px, 3svh) }
  .pstep__t{ margin-top:10px; font-size:clamp(2.2rem, 10vw, 3.4rem) }
  .pstep__p{ margin-top:12px; font-size:15.5px; line-height:1.55 }
  .pstep__get{ margin-top:14px; font-size:15px }
  .ptrack{ gap:6px }
  .ptrack__b{ font-size:12px; padding-top:10px }
  .metro__legend button{ height:34px; padding:0 12px 0 10px; font-size:13px }
  .caps__grid{ grid-template-columns:1fr }
  .caps__stage{ display:none }
  .cap{ min-height:0; padding:9vh 0 6vh }
  .contact__grid{ grid-template-columns:1fr }
  .contact__stage{ height:min(52vh, 440px); min-height:320px; order:-1 }
}
@media (max-width:640px){
  body{ font-size:16px }
  .nav{ top:10px; padding:5px 5px 5px 6px }
  .nav__name{ font-size:14.5px }
  .hero__name{ font-size:17vw; letter-spacing:-.055em }
  .hero__cta .btn{ height:48px; padding:0 20px }
  .facts, .contact__info{ grid-template-columns:1fr }
  .about__text{ font-size:clamp(1.6rem, 7.4vw, 2.2rem) }
  .demo{ height:440px }
  .demo--type{ grid-template-columns:auto 1fr; grid-template-rows:1fr auto; align-items:center; padding:60px 18px 18px; gap:14px }
  .type__spec{ grid-row:1; font-size:5.4rem }
  .type__pad{ width:100%; max-width:190px; justify-self:end }
  .type__read{ grid-column:2; justify-self:end; align-self:center }
  .type__sw{ position:static; grid-column:1; grid-row:2 }
  .code__src{ font-size:12px; padding:16px }
  .spring__ctl{ flex-direction:column; gap:6px }
  .foot__row{ flex-direction:column; align-items:flex-start }
  .menu__foot{ flex-direction:column }
}
@media (max-width:380px){
  .nav__last{ display:none }
}
@media (max-height:620px) and (min-width:901px){
  .pstep__p{ font-size:15.5px }
  .machine__copy{ gap:28px; padding-block:90px 30px }
}

/* ── reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  .js [data-reveal]{ opacity:1; transform:none }
  .menu__nav a .mask > i{ transform:none !important }
  .grain{ animation:none }
  .hero::before{ display:none }
  .js .pstep:not(.is-on){ visibility:visible }
  .psteps{ gap:40px }
  .pstep{ grid-area:auto }
  .machine{ height:auto }
  .machine__frame{ position:relative; height:auto }
  .metro.is-wide{ height:100vh; height:100svh }
  .metro.is-wide .metro__in{ position:relative }
}