/* =========================================================
   shaun.design — monochrome system, orange only on selection
   ========================================================= */
:root {
  --black: #0a0a0a;
  --white: #f3f3f0;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --sec-y: clamp(88px, 12vw, 168px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --hdr-h: 72px;

  --sheet-r: clamp(22px, 3.1vw, 42px);
  --sheet-mx: clamp(8px, 1.3vw, 20px);

  --glow: 0 0 18px rgba(255,255,255,.5), 0 0 44px rgba(255,255,255,.22);
  --tglow: 0 0 16px rgba(255,255,255,.55);

}

/* Section themes — every component reads these */
.t-dark {
  --bg: var(--black); --fg: var(--white);
  --mute: #7d7d7a; --soft: #b8b8b4;
  --line: rgba(243, 243, 240, .14); --line-2: rgba(243, 243, 240, .28);
  --card: #121212; --acc: var(--fg); --glow: 0 0 18px rgba(255,255,255,.5), 0 0 44px rgba(255,255,255,.22); --tglow: 0 0 16px rgba(255,255,255,.55); --hl: #f3f3f0;
  --shine: rgba(255,255,255,.064); --shine-hi: rgba(255,255,255,.1);
  --glass: linear-gradient(112deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.028) 44%, rgba(255,255,255,.006) 50%, rgba(255,255,255,0) 58%), linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)), rgba(255,255,255,.04);
  --glass-hover: linear-gradient(112deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.044) 44%, rgba(255,255,255,.01) 52%, rgba(255,255,255,0) 62%), linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.07)), rgba(255,255,255,.08);
  --glass-rim: inset 0 1px 0 rgba(255,255,255,.2), inset 1px 0 0 rgba(255,255,255,.044), inset -1px 0 0 rgba(255,255,255,.016), inset 0 -1px 0 rgba(255,255,255,.032), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -10px 16px -10px rgba(255,255,255,.044);
  --glass-rim-hover: inset 0 1px 0 rgba(255,255,255,.32), inset 1px 0 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(255,255,255,.032), inset 0 -1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.34), inset 0 -12px 18px -10px rgba(255,255,255,.06);
  background: var(--bg); color: var(--fg);
}
.t-light {
  --bg: var(--white); --fg: var(--black);
  --mute: #6f6f6c; --soft: #3d3d3b;
  --line: rgba(10, 10, 10, .12); --line-2: rgba(10, 10, 10, .28);
  --card: #e9e9e5; --acc: var(--fg); --hl: #ff7a00; --glow: 0 0 18px rgba(255,122,0,.55), 0 0 44px rgba(255,122,0,.25); --tglow: 0 0 14px rgba(255,122,0,.5);
  --shine: rgba(255,255,255,.2); --shine-hi: rgba(255,255,255,.3);
  --glass: linear-gradient(112deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.14) 43%, rgba(255,255,255,.024) 50%, rgba(255,255,255,0) 58%), linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.42)), rgba(255,255,255,.3);
  --glass-hover: linear-gradient(112deg, rgba(255,255,255,0) 26%, rgba(255,255,255,.17) 43%, rgba(255,255,255,.04) 52%, rgba(255,255,255,0) 62%), linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6)), rgba(255,122,0,.1);
  --glass-rim: inset 0 1.5px 0 rgba(255,255,255,.3), inset 1px 0 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(10,10,10,.1), inset 0 -10px 16px -10px rgba(255,255,255,.18), 0 8px 20px -10px rgba(10,10,10,.24);
  --glass-rim-hover: inset 0 1.5px 0 rgba(255,255,255,.4), inset 1px 0 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,122,0,.75), inset 0 -12px 18px -10px rgba(255,255,255,.19), 0 10px 26px -10px rgba(255,122,0,.5);
  background: var(--bg); color: var(--fg);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--hdr-h); }
html.is-loading, html.is-loading body { overflow: hidden; }
body {
  margin: 0; background: var(--black); color: var(--white);
  font-family: var(--font); font-size: 17px; line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
::selection { background: var(--fg, #fff); color: var(--bg, #000); }
:focus-visible { outline: 2px solid var(--hl, currentColor); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; top: 8px; left: 8px; z-index: 600; padding: 10px 16px; background: #fff; color: #000; border-radius: 999px; transform: translateY(-150%); transition: transform .2s; }
.skip:focus { transform: none; }

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 22px; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.eyebrow--sm { margin-bottom: 14px; font-size: 11px; }

.display { font-weight: 600; font-size: clamp(2.8rem, 8.6vw, 7.8rem); line-height: .92; letter-spacing: -.048em; text-wrap: balance; }
.display--md { font-size: clamp(2.7rem, 7.6vw, 6.8rem); }
.display--sm { font-size: clamp(2.4rem, 6.4vw, 5.6rem); }
.display .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.display .ln > span { display: inline-block; }
.mute { color: var(--mute); }

.lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--soft); max-width: 40ch; margin: 32px auto 0; line-height: 1.5; }
.body { color: var(--soft); max-width: 50ch; margin: 28px auto 0; font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.meta { font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: .02em; }
.num { font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: .06em; font-weight: 500; }

/* ---------- Buttons ---------- */
.btn {
  --h: 52px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: var(--h); padding: 0 26px; border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), box-shadow .45s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translateY(101%); transition: transform .5s var(--ease); background: var(--hl); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn--solid::before { display: none; }
.btn--solid { background: var(--fg); color: var(--bg); }
/* secondary buttons are glass: a translucent pane with a lit top edge that brightens on hover */
.btn--ghost { color: var(--fg); background: var(--glass); box-shadow: var(--glass-rim); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
.btn--ghost::before { display: none; }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--hl); color: #0a0a0a; box-shadow: var(--glow); transform: translateY(-1px); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--glass-hover); box-shadow: var(--glass-rim-hover), var(--glow); transform: translateY(-1px); }
.btn--sm { --h: 42px; padding: 0 20px; font-size: 14px; }
.btn--block { width: 100%; }

.arw { position: relative; display: inline-block; width: 14px; height: 10px; transition: transform .45s var(--ease); flex: none; }
.arw::before { content: ""; position: absolute; left: 0; right: 1px; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; }
.arw::after { content: ""; position: absolute; right: 1px; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.arw--up { transform: rotate(-45deg); }
.arw--l { transform: rotate(180deg); }
.btn:hover .arw, .tlink:hover .arw { transform: translateX(4px); }
.btn:hover .arw--up, .tlink:hover .arw--up { transform: rotate(-45deg) translateX(4px); }

.tlink { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; padding-bottom: 6px; border-bottom: 1px solid var(--line-2); transition: border-color .3s, color .3s; }
.tlink:hover, .tlink:focus-visible { border-color: var(--hl); box-shadow: 0 1px 0 var(--hl); }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chip { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 500; background: var(--glass); box-shadow: var(--glass-rim); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); transition: background .3s, color .3s, box-shadow .3s, transform .3s var(--ease); }
a.chip:hover, a.chip:focus-visible { background: var(--glass-hover); box-shadow: var(--glass-rim-hover), var(--glow); transform: translateY(-1px); }

/* ---------- Header ---------- */
/* a floating glass pill; once you scroll it folds down to the "S." mark, and a tap opens it again */
.hdr { position: fixed; top: 14px; left: 0; right: 0; z-index: 100; height: 56px; color: var(--white); pointer-events: none; --bg: var(--black); --fg: var(--white); --mute: #7d7d7a; --line-2: rgba(243,243,240,.28); --hl: #f3f3f0; --glow: 0 0 18px rgba(255,255,255,.5), 0 0 44px rgba(255,255,255,.22); --tglow: 0 0 16px rgba(255,255,255,.55); }
.hdr__pill {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); pointer-events: auto;
  width: min(1180px, calc(100% - 2 * var(--gutter))); height: 56px; padding: 0 8px 0 14px; gap: 18px;
  display: flex; align-items: center; justify-content: space-between; overflow: hidden; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)), rgba(16,16,16,.5);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.12), 0 14px 34px -12px rgba(0,0,0,.55);
  transition: width .6s var(--ease), left .6s var(--ease), box-shadow .4s var(--ease);
}
.hdr.is-collapsed .hdr__pill { left: calc(var(--gutter) + 28px); width: 56px; cursor: pointer; }
.hdr.is-collapsed .hdr__pill:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.28), 0 0 26px rgba(255,255,255,.18), 0 14px 34px -12px rgba(0,0,0,.55); }
.hdr__nav { display: flex; align-items: center; gap: 22px; flex: none; transition: opacity .35s var(--ease), visibility 0s; }
.hdr.is-collapsed .hdr__nav { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.hdr__link { font-size: 15px; font-weight: 500; opacity: .85; transition: opacity .2s, color .2s; }
.hdr__link:hover { opacity: 1; text-shadow: var(--tglow); }
.hdr__progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--white); box-shadow: 0 0 10px rgba(255,255,255,.7); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; transition: opacity .3s; }
.hdr.is-collapsed .hdr__progress { opacity: 0; }

.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
/* the "S." stands alone; only the footer's version sits in a filled box */
.logo__mark { width: 30px; height: 28px; flex: none; overflow: visible; }
.logo__mark rect { fill: none; }
.logo__mark text { fill: currentColor; font-family: var(--font); font-weight: 800; letter-spacing: -.05em; }
.ftr .logo__mark rect { fill: currentColor; }
.ftr .logo__mark text { fill: var(--bg); }
.logo__word { font-size: 20px; font-weight: 600; letter-spacing: -.05em; line-height: 1; padding-bottom: 2px; }
.logo__word i { font-style: normal; color: var(--mute); }
.logo:hover .logo__word i { color: var(--fg); text-shadow: var(--tglow); }
.logo--lg .logo__mark { width: 43px; height: 40px; }
.logo--lg .logo__word { font-size: 30px; }

.burger { width: 42px; height: 42px; display: grid; place-content: center; gap: 6px; border-radius: 50%; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.14); transition: box-shadow .3s, background .3s; }
.burger:hover { background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.34), var(--glow); }
.burger span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .45s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* ---------- Menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 90; background: var(--black); color: var(--white);
  --mute: #7d7d7a; --line: rgba(243,243,240,.14); --line-2: rgba(243,243,240,.28); --fg: var(--white); --bg: var(--black);
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-in-out); overflow-y: auto;
}
.menu[hidden] { display: block; visibility: hidden; }
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.menu__in { min-height: 100%; padding-top: calc(var(--hdr-h) + 5vh + 14px); padding-bottom: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.menu__cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; }
.menu__big a { display: inline-block; font-size: clamp(2.3rem, 6.2vw, 5rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.06; transition: color .3s, transform .5s var(--ease); }
.menu__big a:hover { text-shadow: var(--tglow); transform: translateX(10px); }
.menu__big li, .menu__sm li, .menu__col .eyebrow, .menu__foot { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.menu.is-open .menu__big li, .menu.is-open .menu__sm li, .menu.is-open .menu__col .eyebrow, .menu.is-open .menu__foot { opacity: 1; transform: none; }
.menu.is-open li:nth-child(1) { transition-delay: .25s; } .menu.is-open li:nth-child(2) { transition-delay: .3s; }
.menu.is-open li:nth-child(3) { transition-delay: .35s; } .menu.is-open li:nth-child(4) { transition-delay: .4s; }
.menu.is-open li:nth-child(5) { transition-delay: .45s; } .menu.is-open li:nth-child(6) { transition-delay: .5s; }
.menu.is-open .menu__foot { transition-delay: .55s; }
.menu__col .eyebrow { justify-content: flex-start; }
.menu__sm { margin-bottom: 40px; }
.menu__sm a { display: inline-block; font-size: 20px; padding: 5px 0; color: #b8b8b4; transition: color .2s; }
.menu__sm a:hover { color: var(--white); text-shadow: var(--tglow); }
.menu__foot { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid var(--line); }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 500; background: #0a0a0a; color: var(--white);
  display: grid; place-items: center; overflow: hidden;
  border-radius: 0 0 var(--sheet-r) var(--sheet-r);
  transition: transform 1.15s cubic-bezier(.76, 0, .18, 1); will-change: transform;
}
.loader.is-done { transform: translateY(-101%); pointer-events: none; }
.loader__mid { display: flex; flex-direction: column; align-items: center; gap: 28px; transition: opacity .5s var(--ease), transform .9s var(--ease); }
.loader.is-done .loader__mid, .loader.is-done .loader__word, .loader.is-done .loader__num { opacity: 0; transform: translateY(-14px); }
.loader__sd {
  font-size: clamp(2.6rem, 11.5vw, 10rem); font-weight: 800; letter-spacing: -.06em; line-height: .95; padding-right: .04em;
  background: linear-gradient(to top, var(--white) calc(var(--lp, 0) * 100%), rgba(243,243,240,.14) calc(var(--lp, 0) * 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.loader__tag { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #8a8a87; }
.loader__word { position: absolute; left: var(--gutter); bottom: clamp(26px, 5vh, 48px); font-size: 20px; font-weight: 600; letter-spacing: -.05em; transition: opacity .5s, transform .9s var(--ease); }
.loader__num { position: absolute; right: var(--gutter); bottom: clamp(18px, 4vh, 40px); font-size: clamp(3.4rem, 10vw, 8rem); font-weight: 500; letter-spacing: -.06em; line-height: 1; font-variant-numeric: tabular-nums; transition: opacity .5s, transform .9s var(--ease); }
.loader__num i { font-style: normal; font-size: .38em; letter-spacing: 0; margin-left: .12em; color: #8a8a87; vertical-align: top; position: relative; top: .3em; }
.loader__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(243,243,240,.12); }
.loader__bar b { display: block; height: 100%; background: var(--white); box-shadow: 0 0 12px rgba(255,255,255,.8); transform-origin: 0 50%; transform: scaleX(0); }

/* =========================================================
   SHEETS — every section is a card that rises over the last one;
   the covered section stays pinned underneath and recedes
   ========================================================= */
main { display: contents; }
.stack { position: sticky; top: 0; overflow: hidden; }
.stack:not(.hero) { margin-inline: var(--sheet-mx); border-radius: var(--sheet-r) var(--sheet-r) 0 0; box-shadow: 0 -24px 60px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(243,243,240,.1); }
.stack.t-light:not(.hero) { box-shadow: 0 -24px 60px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(10,10,10,.06); }
.stack::after { content: ""; position: absolute; inset: 0; z-index: 20; background: #000; opacity: var(--cv, 0); pointer-events: none; }
html.measuring .stack { position: relative !important; top: auto !important; transform: none !important; }
/* a pause between sheets: the section stays pinned and readable before the next one rises */
.dwell { height: clamp(140px, 30svh, 340px); pointer-events: none; }
.sec { padding-block: var(--sec-y); text-align: center; }
.sec > .wrap { position: relative; z-index: 1; }
/* scenes fill the screen, content centred */
.stack:not(.hero):not(.ftr) { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.stack:not(.hero):not(.ftr) > .wrap { width: 100%; }
.ftr.stack { border-radius: var(--sheet-r); margin-bottom: var(--sheet-mx); }

/* Fixed particle stage — `difference` makes it white on black sections, black on light ones */
.stage-cv { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 50; pointer-events: none; mix-blend-mode: difference; }
.stage-cv--fx { mix-blend-mode: normal; z-index: 51; }

/* One-after-another sequences (hero tagline on load, hero copy on arrival) */
.js [data-seq] { opacity: 0; transform: translateY(22px); }
.js [data-seq].is-in { opacity: 1; transform: none; transition: opacity 1.1s var(--ease), transform 1.3s var(--ease); transition-delay: var(--sd, 0s); }
.js .ln[data-seq] { opacity: 1; transform: none; }
.js .ln[data-seq] > span { transform: translateY(108%); }
.js .ln[data-seq].is-in > span { transform: none; transition: transform 1.3s var(--ease); transition-delay: var(--sd, 0s); }
/* Scroll-scrubbed reveals: JS drives opacity/transform from the real scroll position */
.js [data-reveal]:not([data-reveal="lines"]) { opacity: 0; }
.js [data-reveal].rv-done { opacity: 1; }
.js [data-reveal="lines"] .ln > span { transform: translateY(108%); }

/* ---------- Hero: screen one is the wave video and a quiet tag, screen two is the copy ---------- */
.hero { padding: 0; text-align: center; }
.hero__stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
/* the looping wave sits behind screen one and melts into black at the foot, so screen two begins cleanly */
.hero__noise { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: .95; background: radial-gradient(60% 50% at 50% 46%, rgba(160,110,255,.16), rgba(0,0,0,0) 70%), #000; }
.hero__scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to top, #0a0a0a 0%, rgba(10,10,10,.55) 22%, rgba(10,10,10,0) 52%); }
/* the welcome message sits in the middle of the first screen, with the scroll cue right under it */
.hero__msg { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--hdr-h) var(--gutter) 0; text-align: center; pointer-events: none; }
.hero .display.hero__title { font-size: clamp(2.7rem, min(9.5vw, 14vh), 8.5rem); line-height: .94; letter-spacing: -.055em; color: #fff; text-shadow: 0 0 60px rgba(0,0,0,.35); }
.hero__sub { margin-top: clamp(18px, 3.2vh, 32px); font-family: var(--mono); font-style: normal; font-weight: 500; font-size: clamp(12px, 1.35vw, 15px); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.hero__msg .scrollcue { position: relative; left: auto; bottom: auto; transform: none; margin-top: clamp(20px, 4.2vh, 40px); pointer-events: auto; }
.scrollcue { position: absolute; left: 50%; bottom: 28px; width: 26px; height: 42px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line-2); transform: translateX(-50%); z-index: 1; }
.scrollcue span { position: absolute; left: 50%; top: 9px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
.hero__copy { padding-block: var(--sec-y) clamp(48px, 6vw, 80px); display: flex; flex-direction: column; align-items: center; }
.hero .display { font-size: clamp(2.6rem, 7.4vw, 6.4rem); }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 40px; }

/* Ticker of recent work, at the foot of the hero */
.ticker { padding: 8px 0 clamp(72px, 9vw, 128px); }
.ticker__label { margin-bottom: 32px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 50s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__list { display: flex; align-items: center; }
.marquee__list li { display: flex; align-items: center; white-space: nowrap; }
.marquee__list a { font-size: clamp(1.9rem, 4.6vw, 3.6rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; color: var(--soft); padding: 0 clamp(18px, 3vw, 40px); transition: color .3s; }
.marquee__list a:hover { color: var(--fg); text-shadow: var(--tglow); }
.marquee__list li::after { content: "/"; color: var(--mute); font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 300; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- About ---------- */
.about .body { margin-bottom: 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 3vw, 48px); max-width: 1100px; margin: clamp(48px, 7vw, 96px) auto; }
.stat { position: relative; display: flex; flex-direction: column-reverse; padding: clamp(18px, 3vw, 34px) 0 0; cursor: default; }
/* the markup lists each label (dt) before its figure (dd), as HTML requires; the figure is shown above its label */
.stat dd { font-size: clamp(3rem, 12vw, 10.5rem); font-weight: 600; letter-spacing: -.07em; line-height: .86; font-variant-numeric: tabular-nums; }
/* no rules or outlines here: hovering a figure fills its + with orange */
.stat dd i { font-style: normal; color: var(--mute); transition: color .35s var(--ease), text-shadow .35s var(--ease); }
.stat:hover dd i { color: var(--hl); text-shadow: 0 0 22px rgba(255,122,0,.45); }
.stat dt { margin-top: 14px; font-family: var(--mono); font-size: clamp(10px, 1.1vw, 12px); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }

/* ---------- Projects ---------- */
.acc { max-width: 1200px; margin-inline: auto; border-top: 1px solid var(--line); text-align: center; }
.acc + .eyebrow { margin-top: clamp(48px, 7vw, 96px); }
.acc__item { border-bottom: 1px solid var(--line); position: relative; }
.acc__item::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--hl); box-shadow: 0 0 12px var(--hl); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.acc__item.is-open::before { transform: scaleX(1); }
.acc__item h3 { font: inherit; }
.acc__btn { width: 100%; display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; position: relative; padding: clamp(14px, 2vw, 26px) clamp(34px, 5vw, 70px); }
.acc__btn .num { position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: color .3s; }
.acc__title { font-size: clamp(2rem, 6.2vw, 5.4rem); font-weight: 600; letter-spacing: -.055em; line-height: .98; color: var(--mute); transition: color .4s var(--ease); text-wrap: balance; }
.acc__btn:hover .acc__title, .acc__item.is-open .acc__title { color: var(--fg); }
.acc__ic { position: absolute; right: 0; top: 50%; margin-top: -9px; width: 18px; height: 18px; transition: color .3s; }
.acc__ic::before, .acc__ic::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .5s var(--ease); }
.acc__ic::after { transform: rotate(90deg); }
.acc__item.is-open .acc__ic::after { transform: rotate(0deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.acc__panel > div { overflow: hidden; }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel p { color: var(--soft); max-width: 52ch; margin-inline: auto; padding-bottom: 22px; font-size: clamp(1.02rem, 1.5vw, 1.25rem); }
.acc__panel .tlink { margin-bottom: 34px; }
.acc--faq .acc__title { font-size: clamp(1.5rem, 3.8vw, 3rem); letter-spacing: -.045em; color: var(--fg); }
.acc--faq .acc__btn:not(:hover) .acc__title { color: var(--soft); }
.acc--faq .acc__item.is-open .acc__title, .acc--faq .acc__btn:hover .acc__title { color: var(--fg); }
/* FAQ: the orange rule runs along the bottom of the row, like the experience list */
.acc--faq .acc__item::before { display: none; }
.acc--faq .acc__item::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--hl); box-shadow: 0 0 12px var(--hl); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); pointer-events: none; }
.acc--faq .acc__item:hover::after, .acc--faq .acc__item.is-open::after { transform: scaleX(1); }

/* ---------- Experience ---------- */
.gantt { height: clamp(150px, 20vw, 250px); max-width: 1100px; margin: clamp(36px, 5vw, 64px) auto 0; }
.gantt__axis { position: relative; max-width: 1100px; height: 22px; margin: 6px auto clamp(40px, 6vw, 80px); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--mute); }
.gantt__axis span { position: absolute; top: 0; transform: translateX(-50%); }
.gantt__axis span:first-child { transform: none; }
.gantt__axis span:last-child { transform: translateX(-100%); }
.jobs { max-width: 1100px; margin-inline: auto; border-top: 1px solid var(--line); }
.job { position: relative; padding: clamp(26px, 3.4vw, 44px) 0; border-bottom: 1px solid var(--line); }
.job::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--hl); box-shadow: 0 0 12px var(--hl); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.job:hover::after { transform: scaleX(1); }
.job__dates { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px; transition: color .3s; }
.job__name { font-size: clamp(2rem, 6vw, 5rem); font-weight: 600; letter-spacing: -.055em; line-height: .98; }
.job__name a { display: inline-flex; align-items: center; gap: .25em; }
.job__name a .arw { width: .34em; height: .24em; opacity: 0; transition: opacity .3s, transform .45s var(--ease); }
.job:hover .job__name a .arw { opacity: 1; }
.job__desc { color: var(--soft); max-width: 62ch; margin: 18px auto 0; font-size: clamp(1rem, 1.4vw, 1.15rem); }

/* ---------- Tools ---------- */
.tools { max-width: 1100px; margin: clamp(36px, 5vw, 72px) auto 0; border-top: 1px solid var(--line); }
.tool { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: clamp(18px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--line); }
.tool::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--hl); box-shadow: 0 0 12px var(--hl); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.tool:hover::after, .tool:focus-visible::after { transform: scaleX(1); }
.tool__name { font-size: clamp(2.4rem, 8.4vw, 7.4rem); font-weight: 600; letter-spacing: -.06em; line-height: .95; color: var(--soft); transition: color .3s; }
.tool:hover .tool__name, .tool:focus-visible .tool__name { color: var(--fg); text-shadow: var(--tglow); }
.tool__role { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }

/* ---------- Contact ---------- */
.contact__art { width: clamp(200px, 30vw, 330px); aspect-ratio: 1; margin: 0 auto clamp(16px, 3vw, 40px); }
.contact .chips { margin-top: 32px; }
.form { max-width: 720px; margin: clamp(36px, 5vw, 64px) auto 0; text-align: left; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fld { display: flex; flex-direction: column; gap: 8px; }
.fld--full { grid-column: 1 / -1; }
.fld > span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.fld input, .fld select, .fld textarea {
  width: 100%; height: 54px; padding: 0 20px; border-radius: 16px; border: 0; background: var(--glass); box-shadow: var(--glass-rim);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  color: var(--fg); font: inherit; font-size: 16px; transition: background .25s, box-shadow .25s; color-scheme: dark;
}
.fld textarea { height: auto; min-height: 140px; padding: 16px 20px; resize: vertical; line-height: 1.5; }
.fld select { appearance: none; -webkit-appearance: none; padding-right: 48px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 24px) 50%, calc(100% - 18px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.fld select option { background: #141414; color: #f3f3f0; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--mute); }
.fld input:hover, .fld select:hover, .fld textarea:hover { background: var(--glass-hover); box-shadow: var(--glass-rim-hover); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; background: var(--glass-hover); box-shadow: var(--glass-rim-hover), var(--glow); }
.fld [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--fg); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__send { grid-column: 1 / -1; margin-top: 6px; }
.form__msg { grid-column: 1 / -1; min-height: 1.5em; font-family: var(--mono); font-size: 13px; text-align: center; color: var(--soft); }
.form.is-done .fld, .form.is-done .form__send { display: none; }
.form.is-done .form__msg { font-family: var(--font); font-size: 20px; font-weight: 500; letter-spacing: -.02em; padding: 22px 24px; border-radius: 16px; background: var(--hl); color: #0a0a0a; box-shadow: var(--glow); }

/* ---------- Footer ---------- */
.ftr { position: relative; padding: clamp(64px, 8vw, 104px) 0 36px; }
.ftr > .wrap { position: relative; z-index: 1; }
.ftr__top { display: grid; grid-template-columns: 1.2fr 2fr; gap: 48px; padding-bottom: 56px; }
.ftr__brand p { color: var(--soft); max-width: 30ch; margin-top: 20px; }
.ftr__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.ftr__cols .eyebrow { justify-content: flex-start; margin-bottom: 16px; }
.ftr__cols a { display: inline-block; padding: 5px 0 6px; font-size: 15px; color: var(--soft); transition: color .2s; background: linear-gradient(var(--hl), var(--hl)) 0 100% / 0 2px no-repeat; transition: color .2s, background-size .45s var(--ease); }
.ftr__cols a:hover, .ftr__cols a:focus-visible { color: var(--fg); background-size: 100% 2px; }
.ftr__base { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 14px; color: var(--mute); flex-wrap: wrap; }
.ftr__big { font-size: clamp(2.6rem, 12.4vw, 12rem); font-weight: 800; letter-spacing: -.07em; line-height: .8; padding-top: clamp(32px, 6vw, 80px); text-align: left; color: var(--fg); user-select: none; }
/* the wordmark is sized in JS so it spans the full width of the footer, edge to edge */
.ftr__fit { display: inline-block; white-space: nowrap; letter-spacing: -.07em; }
.ftr__big i { font-style: normal; color: #ff7a00; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  :root { --hdr-h: 64px; }
  body { font-size: 16px; }
  .menu__cols { grid-template-columns: 1fr; gap: 24px; }
  .ftr__top { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hide-sm, .scrollcue { display: none; }
  .hdr__nav { gap: 10px; }
  .hdr__pill { gap: 10px; }
  .ctas .btn { flex: 1 1 100%; }
  .form { grid-template-columns: 1fr; }
  .acc__btn { padding-inline: 0; }
  .acc__btn .num, .acc__ic { display: none; }
  .gantt__axis span:nth-child(2), .gantt__axis span:nth-child(4), .gantt__axis span:nth-child(6) { display: none; }
  .ftr__base { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .marquee__track { animation: none; }
}

/* ---------- Projects: a wheel you turn ----------
   At rest the work sits in a ring around a title. The first notch of scroll opens it into a vertical
   drum; the card at the front lies flat, the ones above and below rotate away into perspective. */
.projects { text-align: left; }
.works { position: relative; width: 100%; height: 100svh; min-height: 560px; overflow: hidden; -webkit-user-select: none; user-select: none; }
.works__stage { position: absolute; inset: 0; cursor: grab; outline: none; touch-action: pan-y; }
.works__stage:active { cursor: grabbing; }
.works__stage:focus-visible { outline: 2px solid var(--fg); outline-offset: -8px; border-radius: var(--sheet-r); }
.works__wheel { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; }
.works__card { position: absolute; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.works__face { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 10px; background: var(--card); box-shadow: 0 22px 44px -20px rgba(0,0,0,.75), inset 0 0 0 1px rgba(243,243,240,.08); }
.works__face img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.works__act {
  position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
  border-radius: 999px; font-size: 13.2px; font-weight: 500; color: #0a0a0a; background: #fff; box-shadow: 0 0 18px rgba(255,255,255,.55);
  opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .4s var(--ease); pointer-events: none;
}
.works__act svg { width: 12px; height: 12px; }
.works__card:hover .works__act, .works__card:focus-visible .works__act { opacity: 1; transform: none; }
.works__label, .works__title { position: absolute; margin: 0; pointer-events: none; font-weight: 600; letter-spacing: -.05em; color: var(--fg); }
.works__label { inset: 0; display: grid; place-items: center; text-align: center; line-height: 1; }
.works__title { top: 50%; left: 8%; transform: translateY(-50%); opacity: 0; }
.works__t { display: block; line-height: 1; text-wrap: balance; }
.works__d { display: block; margin-top: 18px; max-width: 30ch; font-size: clamp(13px, 1.1vw, 16px); font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--soft); }
.works__index { position: absolute; top: 7.5%; right: 2.5%; text-align: right; line-height: 1.75; color: var(--mute); }
.works__index button { cursor: pointer; transition: color .25s; }
.works__index button:hover { color: var(--hl); text-shadow: var(--tglow); }
.works__index button.is-on { color: var(--fg); font-weight: 500; }
.works__hint { position: absolute; left: 0; right: 0; bottom: 6.5%; text-align: center; pointer-events: none; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.works__nav { position: absolute; left: 50%; bottom: 3.5%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--mute); }
.works__nav button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--glass); box-shadow: var(--glass-rim); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); transition: background .3s, color .3s, box-shadow .3s; }
.works__nav button:hover, .works__nav button:focus-visible { background: var(--glass-hover); color: var(--fg); box-shadow: var(--glass-rim-hover), var(--glow); }
.works__nav [aria-live] { min-width: 6ch; text-align: center; }
/* compact: the title moves below the drum, the index gives way to the nav */
.works.is-compact .works__title { top: auto; bottom: 12%; left: 6%; right: 6%; transform: none; text-align: center; }
.works.is-compact .works__d { margin: 10px auto 0; font-size: 12.5px; max-width: 34ch; }
.works.is-compact .works__index { display: none; }
@media (max-width: 640px) { .works__hint { bottom: 12%; } }

.map-stage { height: clamp(240px, 35vw, 440px); max-width: 1100px; margin: clamp(32px, 5vw, 64px) auto clamp(36px, 5.5vw, 80px); }
.map-cap { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin: 8px 0 clamp(28px, 4vw, 56px); }
.acc--faq { margin-top: 0; }
.contact__art { width: clamp(280px, 62vw, 720px); aspect-ratio: 3.4 / 1; }

.hcard { position: fixed; left: 0; top: 0; width: 300px; z-index: 450; pointer-events: none; opacity: 0; transform: translateY(10px) scale(.95); transition: opacity .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1); will-change: transform, opacity; }
.hcard.is-on { opacity: 1; transform: none; }
.hcard__in { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)), rgba(22,22,22,.58); color: #fff; border-radius: 16px; padding: 8px; overflow: hidden; -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); box-shadow: 0 25px 50px -12px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.14), 0 0 60px rgba(255,255,255,.08); }
.hcard__media { border-radius: 10px; overflow: hidden; background: #0f0f0f; aspect-ratio: 16 / 10; }
.hcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hcard--icon .hcard__media { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #262626, #0f0f0f 70%); }
.hcard--icon .hcard__media img { width: 84px; height: 84px; object-fit: contain; }
.hcard__title { padding: 12px 8px 4px; font-size: .9rem; font-weight: 600; letter-spacing: -.02em; }
.hcard__sub { padding: 0 8px 8px; font-size: .75rem; line-height: 1.4; color: #8a8a87; }

@media (max-width: 640px) {
  .map-stage { height: 240px; margin-bottom: 36px; }
}

:root { --spring: cubic-bezier(.34, 1.4, .5, 1); }
.fld { position: relative; }
.fld select[data-fluid] { display: none; }
.fluid { position: relative; }
.fluid.is-open { z-index: 40; }
.fluid__btn { display: flex; align-items: center; gap: 12px; width: 100%; height: 54px; padding: 0 18px; border-radius: 16px; border: 0; background: var(--glass); box-shadow: var(--glass-rim); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); color: var(--fg); font-size: 16px; text-align: left; transition: background .25s, box-shadow .35s var(--ease); }
.fluid__btn:hover { background: var(--glass-hover); box-shadow: var(--glass-rim-hover); }
.fluid__btn:focus-visible, .fluid.is-open .fluid__btn { outline: none; background: var(--glass-hover); box-shadow: var(--glass-rim-hover), var(--glow); }
.fluid__ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.fluid__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fluid__label.is-ph { color: var(--mute); }
.fluid__chev { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--spring); }
.fluid.is-open .fluid__chev { transform: rotate(180deg); }
.fluid__panel { position: absolute; left: 0; right: 0; top: calc(100% + 8px); padding: 6px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)), rgba(20,20,20,.62); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); box-shadow: 0 24px 60px -12px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.14); transform-origin: top center; transform: translateY(-8px) scale(.96); opacity: 0; visibility: hidden; transition: transform .5s var(--spring), opacity .22s, visibility 0s .5s; }
.fluid.is-open .fluid__panel { transform: none; opacity: 1; visibility: visible; transition: transform .5s var(--spring), opacity .22s, visibility 0s; }
.fluid__list { position: relative; display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; outline: none; }
.fluid__hl { position: absolute; left: 0; right: 0; top: 0; height: 40px; border-radius: 10px; background: rgba(243,243,240,.1); pointer-events: none; opacity: 0; transition: transform .4s var(--spring), height .4s var(--spring), opacity .2s; }
.fluid__opt { position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 10px; cursor: pointer; color: var(--soft); font-size: 15px; opacity: 0; transform: translateY(-6px); transition: color .2s; }
.fluid.is-open .fluid__opt { opacity: 1; transform: none; transition: color .2s, opacity .4s var(--ease) calc(var(--i) * 40ms + 40ms), transform .5s var(--spring) calc(var(--i) * 40ms + 40ms); }
.fluid__opt.is-hover, .fluid__opt.is-sel { color: var(--fg); }
.fluid__opt.is-sel { background: rgba(243,243,240,.06); }
.fluid__sep { height: 1px; margin: 4px 8px; background: var(--line); }

.hcard--text .hcard__media { display: none; }
.hcard--text .hcard__title { padding-top: 10px; }
.hcard__media img { transition: opacity .16s; }
.hcard__media img.swap { opacity: 0; }
.hcard--icon .hcard__media img { filter: drop-shadow(0 0 22px rgba(255,255,255,.3)); border-radius: 16px; }
.hcard--icon .hcard__media img.inv { filter: brightness(0) invert(1) drop-shadow(0 0 22px rgba(255,255,255,.35)); border-radius: 0; }

/* ---------- Grain: fine film noise over the whole page ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  5 0 0 0 -2.6' result='w'/%3E%3CfeColorMatrix in='t' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 5 0 0 -2.6' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='w'/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* ---------- About: a quiet stage at the top where the particles gather into the main tools on hover ---------- */
.about__art { height: clamp(144px, 29vh, 336px); max-width: 912px; margin: 0 auto clamp(6px, 1.6vw, 18px); cursor: default; }
.tools-sec .display { font-size: clamp(2.3rem, 7.6vw, 6.8rem); white-space: nowrap; }
@media (max-width: 640px) { .about__art { height: 116px; margin-bottom: 4px; } }
/* the portrait card for the contact lettering */
.hcard--portrait .hcard__media { aspect-ratio: 4 / 5; }
.hcard--portrait .hcard__media img { object-position: 50% 30%; }
/* the project wheel turns with the page's own scroll: this runway holds the sheet pinned for one unit of scroll per project, in both directions */
.dwell--runway { height: calc(var(--runway-n, 12) * var(--unit, 560px) + clamp(140px, 30svh, 340px)); }
/* ---------- Glass reflections: a specular highlight that follows the pointer, a diagonal sheen band and lit edges ---------- */
.btn--ghost, .chip, .works__nav button, .fluid__btn, .fld input, .fld textarea {
  background: radial-gradient(120% 170% at var(--gx, 16%) var(--gy, -35%), var(--shine), rgba(255,255,255,0) 55%), var(--glass);
}
.btn--ghost:hover, .btn--ghost:focus-visible, a.chip:hover, a.chip:focus-visible, .works__nav button:hover, .works__nav button:focus-visible,
.fluid__btn:hover, .fluid__btn:focus-visible, .fluid.is-open .fluid__btn, .fld input:hover, .fld textarea:hover, .fld input:focus, .fld textarea:focus {
  background: radial-gradient(120% 170% at var(--gx, 16%) var(--gy, -35%), var(--shine-hi), rgba(255,255,255,0) 60%), var(--glass-hover);
}
.hdr__pill {
  background: radial-gradient(55% 230% at var(--gx, 12%) var(--gy, -45%), rgba(255,255,255,.072), rgba(255,255,255,0) 56%),
    linear-gradient(112deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.026) 40%, rgba(255,255,255,.006) 47%, rgba(255,255,255,0) 56%),
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04)), rgba(16,16,16,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), inset 1px 0 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(255,255,255,.028), inset 0 0 0 1px rgba(255,255,255,.1), inset 0 -12px 18px -12px rgba(255,255,255,.04), 0 14px 34px -12px rgba(0,0,0,.55);
}
.burger { background: radial-gradient(130% 170% at var(--gx, 20%) var(--gy, -35%), rgba(255,255,255,.068), rgba(255,255,255,0) 55%), rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -8px 12px -8px rgba(255,255,255,.04), inset 0 0 0 1px rgba(255,255,255,.14); }
.burger:hover { background: radial-gradient(130% 170% at var(--gx, 20%) var(--gy, -35%), rgba(255,255,255,.11), rgba(255,255,255,0) 60%), rgba(255,255,255,.14); }
.hcard__in { box-shadow: 0 25px 50px -12px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.11), inset 1px 0 0 rgba(255,255,255,.036), inset 0 -10px 16px -10px rgba(255,255,255,.036), inset 0 0 0 1px rgba(255,255,255,.14), 0 0 60px rgba(255,255,255,.08); }
.fluid__panel { box-shadow: 0 24px 60px -12px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.1), inset 1px 0 0 rgba(255,255,255,.032), inset 0 -10px 16px -10px rgba(255,255,255,.028), inset 0 0 0 1px rgba(255,255,255,.14); }
/* ---------- Experience: the original layout, with the roles stacking flat (no cards) beneath the fixed timeline ----------
   The sheet stays pinned while a runway of scroll brings each role up over the last; every role rests a few pixels lower
   than the one before, so the earlier ones show as a thin index of dates above it. Scrolling up unstacks them. */
.sec.experience.stack { justify-content: center; padding-block: clamp(84px, 11vh, 128px) clamp(20px, 3.5vh, 44px); }
.experience > .wrap { display: flex; flex-direction: column; flex: 0 0 auto; }
.experience .display--md { font-size: clamp(2.2rem, min(7.6vw, 8.6vh), 6.8rem); }
.experience .eyebrow { margin-bottom: 14px; }
.experience .gantt, .experience .gantt__axis { width: 100%; }
.experience .gantt { height: clamp(130px, min(20vw, 21vh), 250px); margin-top: clamp(14px, 2.6vh, 40px); }
.experience .gantt__axis { margin: 6px auto clamp(16px, 3vh, 40px); }
.experience .jobs { position: relative; flex: 0 0 auto; width: 100%; height: clamp(300px, 34vh, 400px); border-top: 0; --peek: 24px; }
.experience .job {
  position: absolute; inset: 0 0 auto 0; z-index: 1; height: calc(100% - 3 * var(--peek)); display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden;
  padding: 6px 0 0; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: var(--bg); box-shadow: none; will-change: transform;
  transform: translateY(calc((1 - var(--q, 1)) * (100% + 3 * var(--peek) + 40px) + var(--i, 0) * var(--peek)));
}
.experience .job:nth-child(2) { --i: 1; } .experience .job:nth-child(3) { --i: 2; } .experience .job:nth-child(4) { --i: 3; }
.experience .job:not(:first-child) { --q: 0; }
.experience .job::after { left: 0; right: 0; width: auto; bottom: 0; }
.experience .job__dates { margin-bottom: 8px; }
.experience .job__name { font-size: clamp(2rem, min(6vw, 8.4vh), 5rem); }
.experience .job__desc { max-width: 62ch; margin: 14px auto 0; font-size: clamp(.95rem, 1.35vw, 1.1rem); line-height: 1.5; }
.dwell--exp { height: calc((var(--jobs-n, 4) - 1) * var(--unit-e, 420px) + clamp(140px, 30svh, 340px)); }
@media (max-width: 640px) {
  .sec.experience.stack { padding-block: 78px 18px; }
  .experience .display--md { font-size: 1.9rem; }
  .experience .gantt { height: 108px; margin-top: 10px; }
  .experience .gantt__axis { margin-bottom: 12px; }
  .experience .jobs { height: clamp(430px, 56vh, 480px); --peek: 20px; }
  .experience .job__name { font-size: 1.8rem; }
  .experience .job__desc { font-size: .86rem; line-height: 1.45; margin-top: 8px; }
}
/* ---------- Liquid-glass lens (the cursor everywhere except inside the particle containers) ----------
   Three layers: the wrapper moves, resizes and clips to the disc; the glass refracts the page behind it; the rim, edge light and highlight sit on top.
   The glass is drawn 16px larger than the disc on every side and the wrapper crops it back, so the thin coloured seam the colour-split filter leaves
   along the glass's own edge falls outside what you can see. */
html.lens-on, html.lens-on * { cursor: none !important; }
.lens {
  position: fixed; left: 0; top: 0; z-index: 420; width: 150px; height: 150px; border-radius: 999px; overflow: hidden; pointer-events: none; opacity: 0; will-change: transform;
  transition: width .16s ease-out, height .16s ease-out; box-shadow: 8px 12px 30px -10px rgba(0,0,0,.5);
}
.lens__glass, .lens__rim { position: absolute; display: block; border-radius: inherit; }
.lens__glass {
  inset: -16px;
  -webkit-backdrop-filter: blur(.4px) saturate(1.25) brightness(1.04); backdrop-filter: blur(.4px) saturate(1.25) brightness(1.04);
  backdrop-filter: url(#lensFilter) saturate(1.2) brightness(1.04);
}
.lens__rim { inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 2px 4px 10px rgba(255,255,255,.2), inset -3px -5px 14px rgba(0,0,0,.35); }
.lens__rim::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 45% 30% at 32% 24%, rgba(255,255,255,.34), rgba(255,255,255,0) 70%); }