/* ══════════════════════════════════════════
   DESIGN SYSTEM · Mike Dewey Portfolio
   Shared across all pages.
   Theme values live in theme-dark.css / theme-light.css.
══════════════════════════════════════════ */

/* ── Fonts · Pangram Pangram families ── */
@font-face { font-family: "Grotesk"; src: url('/fonts/PPRightGrotesk-CompactBlack.otf'); font-weight: 400; font-display: swap }
@font-face { font-family: "Grotesk"; src: url('/fonts/PPRightGrotesk-CompactDark.otf'); font-weight: 600; font-display: swap }
@font-face { font-family: "Montreal"; src: url('/fonts/ppneuemontreal-thin.otf'); font-weight: 200; font-display: swap }
@font-face { font-family: "Montreal"; src: url('/fonts/ppneuemontreal-book.otf'); font-weight: 400; font-display: swap }
@font-face { font-family: "Montreal"; src: url('/fonts/ppneuemontreal-medium.otf'); font-weight: 500; font-display: swap }
@font-face { font-family: "Montreal"; src: url('/fonts/ppneuemontreal-bold.otf'); font-weight: 700; font-display: swap }
@font-face { font-family: "Montreal"; src: url('/fonts/ppneuemontreal-italic.otf'); font-weight: 400; font-style: italic; font-display: swap }
@font-face { font-family: "Supply"; src: url('/fonts/PPSupplyMono-Regular.otf'); font-display: swap }

/* ══════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════ */
:root {
  /* palette */
  --color-white:      0 0% 100%;
  --color-black:      0 0% 0%;
  --color-grey:       0 0% 21%;
  --color-beige:      43 49% 90%;
  --color-coral:      3 100% 61%;

  /* font stacks */
  --display:    "Grotesk", "Impact", sans-serif;
  --sans-serif: "Montreal", "Helvetica Neue", Arial, sans-serif;
  --mono:       "Supply", "Roboto Mono", ui-monospace, monospace;

  /* motion */
  --easing:      cubic-bezier(.83, 0, .17, 1);
  --ease-in-out: cubic-bezier(.85, 0, .15, 1);
  --ease-out:    cubic-bezier(0, .55, .45, 1);
  --dur-fast:    .2s;
  --dur-normal:  .4s;
  --dur-slow:    .6s;
  --dur-reveal:  .7s;
  --t-fast:      var(--dur-fast) var(--easing);
  --t-normal:    var(--dur-normal) var(--easing);
  --t-slow:      var(--dur-slow) var(--easing);

  /* shape */
  --br:    6px;
  --br-xs: 2px;
  --br-sm: 4px;
  --br-md: 6px;
  --br-lg: 12px;
  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 48px;
  --sp-xl: 64px;
  --sp-2xl: 96px;

  /* ══ TYPE SCALE · calibrated to springsummer.dk (measured live at 20px root) ══
     Premium read = small + tight body (12–18px), near-zero tracking, big display contrast. */
  /* Display — Grotesk, uppercase, ~zero tracking */
  --ts-h1-fs: clamp(2.6rem, 10.5vw, 12.5rem); --ts-h1-lh: .76; --ts-h1-ls: 0;
  --ts-h2-fs: clamp(1.9rem, 5.6vw, 4.4rem);   --ts-h2-lh: .84; --ts-h2-ls: -.005em;
  /* Body — Montreal */
  --ts-body-xl-fs:   clamp(1.5rem, 2.5vw, 2.3rem); --ts-body-xl-lh: 1.12; --ts-body-xl-ls: .01em;
  --ts-body-menu-fs: clamp(.85rem, 1vw, .95rem);   --ts-body-menu-lh: 1.45; --ts-body-menu-ls: .01em;
  --ts-body-l-fs:    clamp(.76rem, .85vw, .84rem);  --ts-body-l-lh: 1.55; --ts-body-l-ls: .01em;
  --ts-body-m-fs:    .72rem; --ts-body-m-lh: 1.5; --ts-body-m-ls: .02em;
  --ts-body-s-fs:    .62rem; --ts-body-s-lh: 1.4; --ts-body-s-ls: .02em;
  /* Numbers (Grotesk display stat) + labels/CTA (Supply mono) */
  --ts-number-fs: clamp(2.1rem, 4.2vw, 3.6rem); --ts-number-lh: 1; --ts-number-ls: -.02em;
  --ts-label-m-fs: .56rem; --ts-label-m-lh: 1.3; --ts-label-m-ls: .02em;
  --ts-label-s-fs: .5rem;  --ts-label-s-lh: 1.25; --ts-label-s-ls: .02em;
  --ts-cta-fs:     .58rem; --ts-cta-lh: 1.3;  --ts-cta-ls: .03em;

  /* Back-compat aliases — old token names forward to the deck scale */
  --ts-bodyxl-fs: var(--ts-body-xl-fs); --ts-bodyxl-lh: var(--ts-body-xl-lh); --ts-bodyxl-ls: var(--ts-body-xl-ls);
  --ts-bodymenu-fs: var(--ts-body-menu-fs); --ts-bodymenu-lh: var(--ts-body-menu-lh); --ts-bodymenu-ls: var(--ts-body-menu-ls);
  --ts-bodyl-fs: var(--ts-body-l-fs); --ts-bodyl-lh: var(--ts-body-l-lh); --ts-bodyl-ls: var(--ts-body-l-ls);
  --ts-bodym-fs: var(--ts-body-m-fs); --ts-bodym-lh: var(--ts-body-m-lh); --ts-bodym-ls: var(--ts-body-m-ls);
  --ts-label-fs: var(--ts-label-m-fs); --ts-label-lh: var(--ts-label-m-lh); --ts-label-ls: var(--ts-label-m-ls);
  --ts-labelsm-fs: var(--ts-label-s-fs); --ts-labelsm-lh: var(--ts-label-s-lh); --ts-labelsm-ls: var(--ts-label-s-ls);
  --ts-num-fs: var(--ts-number-fs); --ts-num-lh: var(--ts-number-lh); --ts-num-ls: var(--ts-number-ls);

  /* layout */
  --pad:         clamp(16px, 2.5vw, 48px);
  --grid-cols:   12;
  --grid-gap:    clamp(16px, 2.5vw, 32px);
  --grid-margin: var(--pad);
  --grain:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* display settings */
  --disp-transform: uppercase;
  --disp-tracking:  -.005em;
  --disp-leading:   .72;
  --disp-weight:    400;

  /* font aliases */
  --font-disp:  var(--display);
  --font-body:  var(--sans-serif);
  --font-mono:  var(--mono);

}

/* ══════════════════════════════════════════
   RESET + BASE
══════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
html {
  scroll-behavior: smooth;
  /* Fluid root — the whole rem-based scale keys off this (~20px → 24px) */
  font-size: max(20px, 8px + 0.833vw);
  text-rendering: geometricPrecision;
}

body {
  /* bridge vars, resolved after theme class is applied */
  --bg:     hsl(var(--background-color));
  --cream:  hsl(var(--text-color));
  --dim:    hsla(var(--text-color) / .9);
  --mute:   hsla(var(--text-color) / .55);
  --line:   hsla(0 0% 21% / .18);
  --line2:  hsla(0 0% 21% / .28);
  --accent: hsl(var(--accent-hsl));
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 400;
  font-synthesis: none;
  font-size: var(--ts-body-m-fs);
  line-height: var(--ts-body-m-lh);
  letter-spacing: var(--ts-body-m-ls);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color 0.28s ease, color 0.28s ease;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background: var(--grain);
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
}

a { color: inherit; text-decoration: none }
.wrap { padding-inline: var(--pad) }

/* display class */
.gro {
  font-family: var(--font-disp);
  font-weight: var(--disp-weight);
  font-synthesis: none;
  line-height: var(--disp-leading);
  letter-spacing: var(--disp-tracking);
  text-transform: var(--disp-transform);
}

/* mono class */
.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--ts-label-fs);
  line-height: var(--ts-label-lh);
  letter-spacing: var(--ts-label-ls);
  text-transform: none;
}

/* ── Skip link ── */
.skip {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-200%);
  z-index: 9999;
  background: hsl(var(--text-color));
  color: hsl(var(--background-color));
  font-family: var(--mono);
  font-size: var(--ts-label-fs);
  letter-spacing: .06em;
  padding: 8px 16px;
  border-radius: var(--br);
  text-decoration: none;
  transition: transform var(--dur-fast);
  white-space: nowrap;
}
.skip:focus { transform: translateX(-50%) translateY(0) }

/* ── Underline draw ── */
.ul {
  --line-size: 0;
  background: linear-gradient(hsl(var(--text-color)), hsl(var(--text-color))) 0 100% no-repeat;
  background-size: var(--line-size) .75px;
  transition: background-size var(--dur-slow) var(--easing);
  padding-bottom: 1px;
}
.ul:hover { --line-size: 100% }

/* ── CTA button ── */
.cta {
  font-family: var(--mono);
  font-size: var(--ts-cta-fs);
  letter-spacing: var(--ts-cta-ls);
  line-height: var(--ts-cta-lh);
  text-transform: none;
  border: 1px solid hsla(var(--text-color) / .2);
  border-radius: var(--br-sm);
  padding: 6px 10px;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast);
}
.cta:hover { border-color: hsla(var(--text-color) / .5) }

/* ── Icon button ── */
.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  width: fit-content;
  font-family: var(--mono);
  font-size: var(--ts-cta-fs);
  letter-spacing: var(--ts-cta-ls);
  line-height: var(--ts-cta-lh);
  text-transform: none;
  background: none;
  color: var(--dim);
  border: 1px solid hsla(var(--text-color) / .2);
  border-radius: var(--br-sm);
  padding: 12px 18px;
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.icon-btn:hover { border-color: hsla(var(--text-color) / .5); color: var(--cream); transform: translateX(2px) }
.icon-btn.primary { background: var(--accent); color: hsl(var(--background-color)); border-color: var(--accent) }
.icon-btn.primary:hover { background: hsl(var(--accent-hsl) / .9); border-color: hsl(var(--accent-hsl) / .9) }

/* ── Highlight ── */
.hl {
  background: var(--accent);
  color: var(--bg);
  padding: 0 .07em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ── Focus ring ── */
:where(a, button):focus-visible {
  outline: 2px solid dodgerblue;
  outline-offset: .25rem;
  border-radius: .05rem;
}

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
#nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px var(--pad);
  transition: background var(--dur-normal), padding var(--dur-normal), border-color var(--dur-normal);
  border-bottom: 1px solid transparent;
}
#nav.solid {
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(12px);
  border-color: var(--line);
  padding-block: 11px;
}

.mark { display: flex; align-items: center; gap: 11px }
.mark svg { width: 20px; height: 20px; display: block; animation: spin 14s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.mark .wm { font-size: .6rem; letter-spacing: .02em }

.navmid { display: flex; align-items: center; gap: 10px; color: var(--mute) }
.navmid .clock { color: var(--cream); font-variant-numeric: tabular-nums }

.navr { display: flex; align-items: center; gap: 26px }

.navr a.lk {
  position: relative;
  color: var(--dim);
  font-family: var(--sans-serif);
  font-size: .6rem;
  letter-spacing: .02em;
  --line-size: 0;
  background: linear-gradient(hsl(var(--text-color)), hsl(var(--text-color))) 0 100% no-repeat;
  background-size: var(--line-size) .75px;
  transition: color var(--dur-fast), background-size var(--dur-slow) var(--easing);
  padding-bottom: 2px;
}
.navr a.lk:hover { color: var(--cream); --line-size: 100%; transform: scale(1.02) }
.navr a.lk[aria-current] { color: var(--cream); --line-size: 100% }

.navr a.ig-lk {
  color: var(--dim);
  display: flex;
  align-items: center;
  transition: color var(--dur-fast), transform .25s;
}
.navr a.ig-lk:hover { color: var(--cream) }
.navr a.ig-lk svg { transition: transform var(--dur-fast) var(--easing) }
.navr a.ig-lk:hover svg { transform: scale(1.2) }

.nav-email {
  position: relative;
  background: none;
  border: 1px solid hsla(var(--text-color) / .2);
  border-radius: var(--br-sm);
  color: var(--dim);
  font-family: var(--mono);
  font-size: var(--ts-cta-fs);
  letter-spacing: var(--ts-cta-ls);
  text-transform: none;
  cursor: pointer;
  padding: 6px 10px;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.nav-email:hover { border-color: hsla(var(--text-color) / .5); color: var(--cream) }
.nav-email .ne-txt { transition: opacity var(--dur-fast) }
.nav-email .ne-copied {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  color: var(--accent);
  transition: opacity var(--dur-fast);
  pointer-events: none;
}
.nav-email.copied .ne-txt { opacity: 0 }
.nav-email.copied .ne-copied { opacity: 1 }

/* ── Case-studies trigger + dropdown (shared, theme-adaptive) ── */
.work-dropdown { position: relative }

.work-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 210px;
  background: var(--bg);
  border: .5px solid var(--line2);
  border-radius: var(--br-md);
  padding: 6px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), visibility .2s, transform var(--t-fast);
  pointer-events: none;
  box-shadow: 0 14px 40px -10px rgba(0,0,0,.4);
}
.work-panel.open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto }
.wp-close { display: none }
.work-panel-inner { padding: 0; max-width: none }
.wp-col-label {
  font-family: var(--mono);
  font-size: var(--ts-label-s-fs);
  letter-spacing: var(--ts-label-s-ls);
  text-transform: uppercase;
  color: var(--mute);
  padding: 7px 11px 5px;
}
.wp-links { display: flex; flex-direction: column }
.wp-links a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--sans-serif);
  font-size: var(--ts-body-m-fs);
  letter-spacing: .01em;
  color: var(--dim);
  padding: 7px 11px;
  border-radius: var(--br-sm);
  transition: background var(--dur-fast), color var(--dur-fast);
  white-space: nowrap;
}
.wp-links a:hover { background: var(--bg2); color: var(--cream) }
.wp-links a[aria-current] { color: var(--accent) }
.wp-num { font-family: var(--mono); font-size: var(--ts-label-s-fs); letter-spacing: .04em; color: var(--mute) }
.work-trigger {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-family: var(--sans-serif);
  font-size: .6rem;
  letter-spacing: .02em;
  padding: 0 0 2px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  --line-size: 0;
  background: linear-gradient(hsl(var(--text-color)), hsl(var(--text-color))) 0 100% no-repeat;
  background-size: var(--line-size) .75px;
  transition: color var(--dur-fast), background-size var(--dur-slow) var(--easing);
}
.work-trigger:hover,
.work-trigger[aria-expanded="true"] { color: var(--cream); --line-size: 100% }
.work-trigger .wd-arrow {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform var(--dur-normal) var(--easing);
}
.work-trigger[aria-expanded="true"] .wd-arrow { transform: rotate(180deg) }

/* pulse dot */
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.8s ease-in-out infinite;
}
@keyframes pulse {
  0%  { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent) }
  70% { box-shadow: 0 0 0 8px transparent }
}

/* ══════════════════════════════════════════
   IMAGE PLACEHOLDER SYSTEM
══════════════════════════════════════════ */
.imgph { position: relative; overflow: hidden; background: var(--bg2); isolation: isolate }
.imgph .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: transform var(--dur-reveal) cubic-bezier(.2, .7, .2, 1), opacity var(--dur-slow);
}
.imgph .grn { position: absolute; inset: 0; z-index: 1; background: var(--grain); opacity: .42; mix-blend-mode: overlay; pointer-events: none }
.imgph .vig {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 30%, transparent 40%, rgba(0,0,0,.5) 100%);
}
.imgph .ghost {
  position: absolute;
  left: 18px;
  bottom: 8px;
  z-index: 3;
  font-family: var(--display);
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: .8;
  color: hsla(var(--text-color) / .07);
  letter-spacing: -.01em;
  pointer-events: none;
}
.v1 .bg { background: radial-gradient(130% 100% at 28% 8%, #3c2c1f 0%, #1a120c 48%, #0a0605 100%) }
.v2 .bg { background: radial-gradient(130% 100% at 72% 6%, #27322f 0%, #13140f 50%, #0a0605 100%) }
.v3 .bg { background: linear-gradient(135deg, #33241a 0%, #0e0a07 70%) }
.v4 .bg { background: radial-gradient(120% 110% at 40% 84%, #2c2a22 0%, #14110b 52%, #0a0605 100%) }
.v5 .bg { background: linear-gradient(120deg, #36231a 0%, #1c130d 46%, #0a0605 100%) }

/* ══════════════════════════════════════════
   HERO VIDEO
══════════════════════════════════════════ */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-reveal);
  pointer-events: none;
}
.hero-vscrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-reveal);
}
html.js header.vid-on .hero-video { opacity: 1 }
html.js header.vid-on .hero-vscrim { opacity: 1 }
html.js header.vid-on .heroimg { opacity: 0; pointer-events: none }

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
header {
  position: relative;
  overflow: hidden;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(100px, 13vh, 150px);
  padding-bottom: clamp(48px, 9vh, 96px);
}

.intro {
  position: relative;
  z-index: 2;
  max-width: 28ch;
  font-family: var(--sans-serif);
  font-weight: 500;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.2;
  letter-spacing: .02em;
  color: hsla(var(--text-color) / .82);
  margin-bottom: clamp(10px, 1.4vh, 16px);
}
h1.hero {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 6.6vw, 4.6rem);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
  max-width: 17ch;
  position: relative;
  z-index: 3;
  margin-bottom: clamp(26px, 3.8vh, 44px);
}
.hero-cta {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 26px);
  flex-wrap: wrap;
}
.heroimg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  transition: opacity var(--dur-slow);
}
.heroimg .scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(var(--bg) 0%, transparent 26%, transparent 70%, rgba(0,0,0,.45) 100%);
}
.heroimg .bg { animation: zoom calc(1 * var(--dur-reveal)) cubic-bezier(.2, .7, .2, 1) both }
@keyframes zoom { from { transform: scale(1.09) } to { transform: scale(1) } }

button.scrollcue { background: none; border: none; cursor: pointer; font-family: var(--mono); font-size: var(--ts-cta-fs); letter-spacing: .06em }
.scrollcue {
  position: absolute;
  right: clamp(16px, 3vw, 30px);
  bottom: clamp(14px, 2.4vw, 26px);
  z-index: 4;
  color: var(--dim);
  display: inline-flex;
  gap: 8px;
  align-items: center;
  transition: color var(--dur-fast);
}
.scrollcue:hover { color: var(--cream) }
.scrollcue .a {
  animation: bob 1.8s ease-in-out infinite;
  display: inline-block;
  transition: transform var(--dur-fast) var(--easing);
}
.scrollcue:hover .a { transform: scale(1.2) }
@keyframes bob { 50% { transform: translateY(4px) } }

/* hero headline word entrance */
html.js #heroH1 { visibility: hidden }
#heroH1 .w { display: inline-block }
html.js #heroH1 .w { animation: heroWordIn .85s cubic-bezier(.16,1,.3,1) backwards }
@keyframes heroWordIn { from { opacity: 0; transform: translateY(.5em) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  html.js #heroH1 { visibility: visible }
  #heroH1 .w { animation: none }
}

/* ══════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════ */
section { padding-block: clamp(54px, 8.5vh, 118px) }

.lab {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: clamp(28px, 4.5vh, 54px);
  color: var(--mute);
}
.lab::before { content: ""; width: 30px; height: 1px; background: var(--mute) }

.pull { font-size: clamp(1.8rem, 6vw, 4.5rem); line-height: .85; letter-spacing: normal; max-width: 16ch }

/* ── About ── */
.about-lead {
  font-size: clamp(19px, 1.7vw, 27px);
  line-height: 1.36;
  letter-spacing: .01em;
  color: var(--cream);
  max-width: 30ch;
  margin-top: clamp(26px, 4vh, 46px);
}
.about-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: clamp(16px, 3vw, 56px);
  align-items: start;
  margin-top: clamp(40px, 6.5vh, 84px);
  padding-top: clamp(26px, 4vh, 44px);
  border-top: 1px solid var(--line);
}
.about-label {
  font-size: var(--ts-label-fs);
  line-height: var(--ts-label-lh);
  letter-spacing: var(--ts-label-ls);
  color: var(--mute);
  padding-top: .35em;
}
.proof-list {
  list-style: none;
  counter-reset: proof;
  display: grid;
  gap: clamp(20px, 3vh, 36px);
  margin: 0;
  padding: 0;
  max-width: 64ch;
}
.proof-list li {
  counter-increment: proof;
  position: relative;
  padding-left: 2.8em;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.5;
  color: var(--cream);
}
.proof-list li::before {
  content: counter(proof, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .15em;
  font-family: var(--mono);
  font-size: .82em;
  color: var(--accent);
  letter-spacing: .02em;
}
.about-earlier {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55;
  color: var(--mute);
  max-width: 64ch;
}
.about-statement {
  font-size: clamp(19px, 1.9vw, 28px);
  line-height: 1.28;
  letter-spacing: -.005em;
  color: var(--cream);
  max-width: 26ch;
}

/* ══════════════════════════════════════════
   WORK GRID (home page)
══════════════════════════════════════════ */
.workhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(26px, 4vh, 46px);
}
.workhead .ttl {
  font-size: clamp(1.2rem, 2.8vw, 2.2rem);
  color: var(--mute);
}
.workhead-cta {
  font-family: var(--mono);
  font-size: var(--ts-label-fs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  padding-bottom: 1px;
  border-bottom: 1px solid var(--line2);
  transition: color var(--dur-fast), border-color .2s;
  white-space: nowrap;
}
.workhead-cta:hover { color: var(--cream); border-color: var(--cream) }

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 26px);
}
@media (max-width: 700px) { .work-grid { grid-template-columns: 1fr } }

.card { display: block; text-decoration: none }
.card .imgph { aspect-ratio: 4/5; border-radius: var(--br-md); overflow: hidden }
.card .view {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  color: var(--cream);
  opacity: 0;
  transform: translateY(-4px);
  transition: .4s;
}
.card:hover .imgph .bg { transform: scale(1.06) }
.card .imgph .ph-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-reveal) cubic-bezier(.2, .7, .2, 1);
}
.card:hover .imgph .ph-img { transform: scale(1.06) }
.card:hover .view { opacity: 1; transform: none }
.card .cm { padding-top: 16px }
.card .cm h3 { font-size: clamp(1.4rem, 2.8vw, 2.1rem) }
.card .cm .role { font-size: .78rem; color: var(--mute); margin-top: 6px }
.card .view { opacity: .7 }
@media (hover: hover) { .card .view { opacity: 0 } .card:hover .view { opacity: 1; transform: none } }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 5vh, 56px);
  padding: clamp(44px, 7vh, 84px) var(--pad) 30px;
  border-top: 1px solid var(--line);
  color: var(--cream);
  font-family: var(--sans-serif);
}
.foot-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 72px);
}
.foot-kicker { color: var(--mute); margin-bottom: clamp(14px, 2vh, 22px); letter-spacing: .08em; font-size: var(--ts-labelsm-fs) }
.foot-tag {
  max-width: 22ch;
  font-family: var(--sans-serif);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--cream);
}
.foot-links { display: flex; flex-direction: column; gap: clamp(11px, 1.5vh, 18px); align-items: flex-start }
.foot-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans-serif);
  font-size: clamp(16px, 1.7vw, 21px);
  letter-spacing: .005em;
  color: var(--dim);
  transition: color .25s;
}
.foot-link:hover { color: var(--cream) }
.foot-link .arr { font-size: .78em; transition: transform .28s var(--easing) }
.foot-link:hover .arr { transform: translate(3px, -3px) }
.foot-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .023em;
  color: var(--mute);
}

/* ══════════════════════════════════════════
   REVEALS
══════════════════════════════════════════ */
.reveal { opacity: 1 }
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1);
}
html.js .reveal.in { opacity: 1; transform: none }

/* ══════════════════════════════════════════
   BURGER + MOBILE MENU
══════════════════════════════════════════ */
.burger {
  display: none;
  background: none;
  border: none;
  color: var(--cream);
  cursor: pointer;
  width: 36px;
  height: 28px;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 0;
  flex-shrink: 0;
}
.burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: currentColor;
  transition: transform .28s, opacity .28s;
  transform-origin: center;
}
.burger.open span:first-child { transform: translateY(4.25px) rotate(45deg) }
.burger.open span:last-child { transform: translateY(-4.25px) rotate(-45deg) }

.mob-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--pad);
  padding-bottom: clamp(48px, 9vh, 88px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.mob-menu.open { opacity: 1; pointer-events: auto }

.mob-links { display: flex; flex-direction: column; gap: 2px }
.mob-links a {
  font-family: var(--font-disp);
  font-weight: var(--disp-weight);
  font-size: clamp(1rem, 5vw, 1.4rem);
  line-height: 1.08;
  text-transform: var(--disp-transform);
  letter-spacing: var(--disp-tracking);
  color: var(--cream);
  display: block;
  width: fit-content;
  transition: transform var(--dur-fast) var(--easing);
}
.mob-links a:hover { opacity: .7 }
.mob-ig {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(28px, 5vh, 48px);
  font-family: var(--mono);
  font-size: var(--ts-label-fs);
  letter-spacing: var(--ts-label-ls);
  text-transform: none;
  color: var(--mute);
  transition: color var(--dur-fast);
}
.mob-ig:hover { color: var(--cream) }
.mob-email {
  background: none;
  border: none;
  color: var(--mute);
  font-family: var(--mono);
  font-size: var(--ts-label-fs);
  letter-spacing: var(--ts-label-ls);
  text-transform: none;
  cursor: pointer;
  padding: 0;
  margin-top: clamp(28px, 5vh, 48px);
  display: block;
  transition: color var(--dur-fast);
}
.mob-email:hover { color: var(--cream) }

/* ══════════════════════════════════════════
   APPROACH · cols layout
══════════════════════════════════════════ */
#approach .pull { margin-bottom: clamp(32px, 5vh, 56px) }
.cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.cols > div {
  padding: clamp(28px, 4vh, 48px) clamp(24px, 2.4vw, 44px);
  border-right: 1px solid var(--line);
}
.cols > div:first-child { padding-left: 0 }
.cols > div:last-child { border-right: none; padding-right: 0 }
.cols h4 {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--ts-label-m-fs);
  letter-spacing: var(--ts-label-m-ls);
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: clamp(14px, 2vh, 22px);
}
.cols .lead {
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.48;
  color: var(--cream);
}
.cols p {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.6;
  color: var(--dim);
}
@media (max-width: 880px) {
  .cols {
    grid-template-columns: 1fr;
  }
  .cols > div {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-inline: 0;
  }
  .cols > div:last-child { border-bottom: none }
}

/* ══════════════════════════════════════════
   TRUSTED BY
══════════════════════════════════════════ */
.trusted-wrap {
  padding-block: clamp(32px, 4.8vh, 60px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trusted-label {
  color: var(--mute);
  margin-bottom: clamp(22px, 3.2vh, 34px);
  font-size: var(--ts-labelsm-fs);
  letter-spacing: .08em;
  text-align: center;
}
.trusted-wall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(15px, 1.8vh, 22px) clamp(20px, 2.3vw, 40px);
}
.trusted-wall span {
  font-family: var(--font-disp);
  font-weight: var(--disp-weight);
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1;
  font-size: clamp(.95rem, 1.35vw, 1.18rem);
  white-space: nowrap;
  color: var(--cream);
  transition: color .3s var(--easing);
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 880px) {
  .navmid, .navr .lk, .navr a.ig-lk, .nav-email, .work-dropdown { display: none }
  .burger { display: flex }
  /* Stack the about label/content grids */
  .about-section { grid-template-columns: 1fr; gap: 12px }
  .about-label { padding-top: 0 }

  /* ── Mobile hero ── */
  header {
    padding-top: clamp(96px, 24vw, 150px);
    padding-bottom: clamp(48px, 10vh, 88px);
  }

  /* Ghost CTA on mobile — refined vs aggressive solid fill */
  .hero-cta .icon-btn.primary {
    background: none;
    color: var(--cream);
    border-color: hsla(var(--text-color) / .4);
    padding: 10px 16px;
  }
  .hero-cta .icon-btn.primary:hover {
    background: hsla(var(--text-color) / .08);
    border-color: hsla(var(--text-color) / .7);
  }

  /* Scroll cue hidden on mobile — the CTA handles navigation */
  .scrollcue { display: none }
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none }
  .dot, .mark svg, .heroimg .bg { animation: none }
}

/* ══════════════════════════════════════════
   PAGE TRANSITION · curtain wipe
   Masks the dark↔light theme swap between pages so it never flashes.
══════════════════════════════════════════ */
.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #141414;
  transform: translateY(100%);
  pointer-events: none;
  display: grid;
  place-items: center;
  will-change: transform;
}
.page-curtain .pc-mark {
  width: 34px;
  height: 34px;
  color: hsl(43 30% 88%);
  opacity: 0;
  transform: scale(.7) rotate(0deg);
  transition: opacity .28s ease, transform .5s var(--ease-in-out);
}
.page-curtain.show-mark .pc-mark {
  opacity: .85;
  transform: scale(1) rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
  .page-curtain { display: none }
}