/* ============================================================
   STUDIO.CSS — Andres Evan Studio (main stylesheet, every page)
   Self-contained. No dependency on root css/ files.

   TABLE OF CONTENTS — search for the heading text to jump there
     1. Variables ............ colors, fonts, spacing, radii, shadows
                               (light = :root, dark = [data-theme="dark"])
     2. Keyframes ............ "MICRO-INTERACTIONS KEYFRAMES"
     3. Base ................. Reset, Text Selection, Focus states
     4. Site chrome .......... Scroll Progress Bar, Custom Cursor,
                               Signature FX, Navigation, Brand logo,
                               Theme Toggle, Language switch, Burger Menu
     5. JS widget styles ..... "(studio.js · initXxx)" blocks: playground
                               canvas, section dots, works stats/reel,
                               about clocks, blog random, sound, easter
                               egg, kinetic type
     6. WebGL hero ........... "WebGL hero background" (hero-webgl.js)
     7. HOME ................. Hero (status bar, CTAs, stats, marquee),
                               Reveal system, Section Header, Work Header,
                               Bento Grid, View All, Project Item cards,
                               Trusted-by, Process, Back to Top,
                               Contact / Footer
     8. Responsive (home) .... "Responsive — Tablet" / "Responsive — Mobile"
     9. INNER PAGES .......... Page Hero, Works Page, About Page,
                               Timeline, Values, Services, Blog Page,
                               Blog Post — Single Article
    10. Project Modal ........ "Project Modal (Pentagram-style)"
    11. Late overrides ....... Reduced motion, Brand voice, ASCII Portrait
                               (About), Japanese (html[lang="ja"]),
                               WORK — CURRENT vs ARCHIVE, SUSHIKAI

   Page-specific extras live in their own files: works-micro-animations
   + lab-calculations (/works/), apps-laboratory (/apps/),
   playground-gallery (/playground/). now.html, blog/index.html and
   blog/post.html also carry an inline <style> block in their <head>.
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  /* Palette: Branding Orange (see prueba-color/naranja.html). Orange = accent,
     the cream→orange→red→black gradient marks what matters, greys do the rest. */
  --grad-text: linear-gradient(100deg, #F16001 0%, #C10801 55%, #000000 100%);
  --grad-line: linear-gradient(90deg, #D9C3AB, #F16001, #C10801);
  /* Light mode (default) — LABORATORY SCIENTIFIC */
  --bg:        #F9F9F9;
  --fg:        #0B0B0B;
  --accent:    #E85002;
  --accent-text: #C44100;   /* AA on #F9F9F9 for small text (brand #E85002 is ~3.6:1) */
  --accent-light: #F16001;
  --surface:   #EFEFEF;
  --muted:     #646464;
  --border:    rgba(232, 80, 2, 0.12);

  /* Footer-specific (inverse — dark lab) */
  --footer-bg:           #000000;
  --footer-fg:           #F9F9F9;
  --footer-link:         rgba(249, 249, 249, 0.65);
  --footer-link-hover:   #F9F9F9;
  --footer-border:       rgba(232, 80, 2, 0.15);
  --footer-muted:        rgba(249, 249, 249, 0.68);

  --font-display: 'Inter', 'Noto Sans JP', sans-serif;
  --font-body:    'Inter', 'Noto Sans JP', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Noto Sans JP', monospace;

  --text-display: clamp(4.5rem, 13vw, 13rem);
  --text-xl:      clamp(1.4rem, 2.8vw, 2.2rem);
  --text-base:    1rem;
  --text-label:   0.72rem;

  --ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* Motion durations — single source of truth */
  --dur-fast:  160ms;
  --dur-base:  320ms;
  --dur-slow:  640ms;

  /* Spacing scale — 4/8 rhythm */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 999px;

  /* Elevation — soft, editorial (no neon halos) */
  --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.06);
  --shadow-md: 0 8px 24px -10px rgba(11, 11, 11, 0.16);
  --shadow-lg: 0 18px 44px -14px rgba(11, 11, 11, 0.20);
}

/* ── MICRO-INTERACTIONS KEYFRAMES ──────────────────────────── */

/* Glow Pulse — numbers shine with intensity */
@keyframes glowPulse {
  0% {
    color: #F9F9F9;
    text-shadow: 0 0 10px rgba(232, 80, 2, 0.4);
  }
  50% {
    color: #EDE9FE;
    text-shadow: 0 0 30px rgba(232, 80, 2, 0.8), 0 0 60px rgba(241, 96, 1, 0.4);
  }
  100% {
    color: #F9F9F9;
    text-shadow: 0 0 10px rgba(232, 80, 2, 0.4);
  }
}

/* Pulse Shadow — card aura expands and contracts */
@keyframes pulseShadow {
  0% {
    box-shadow: 0 0 10px rgba(232, 80, 2, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(232, 80, 2, 0.6), 0 0 80px rgba(241, 96, 1, 0.2);
  }
  100% {
    box-shadow: 0 0 10px rgba(232, 80, 2, 0.3);
  }
}

/* Ripple Animation — expanding circle on click */
@keyframes ripple {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  100% {
    opacity: 0;
    transform: scale(4);
  }
}

/* Subtle Wave — text oscillates gently */
@keyframes wave {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-2px);
  }
}

/* Border Rotate — animated border travel */
@keyframes rotateBorder {
  0% {
    border-color: rgba(232, 80, 2, 0.2);
    box-shadow: inset 0 0 10px rgba(232, 80, 2, 0.05);
  }
  50% {
    border-color: rgba(241, 96, 1, 0.5);
    box-shadow: inset 0 0 20px rgba(241, 96, 1, 0.1), 0 0 20px rgba(232, 80, 2, 0.2);
  }
  100% {
    border-color: rgba(232, 80, 2, 0.2);
    box-shadow: inset 0 0 10px rgba(232, 80, 2, 0.05);
  }
}

/* Stagger In — cascade reveal on scroll */
@keyframes staggerIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Typewriter Effect — character-by-character reveal */
@keyframes typewriter {
  from {
    width: 0;
    opacity: 1;
  }
  to {
    width: 100%;
    opacity: 1;
  }
}

.hero-status-text.typing::after {
  content: '|';
  animation: blink 0.6s infinite;
}

@keyframes blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

/* ── Dark mode (optional) ─────────────────────────────────────── */
[data-theme="dark"] {
  --grad-text: linear-gradient(100deg, #D9C3AB 0%, #F16001 38%, #C10801 78%, #F16001 100%);
  --accent-text: #F16001;
  --bg:        #000000;
  --fg:        #F9F9F9;
  --accent:    #E85002;
  --accent-light: #D9C3AB;
  --surface:   #111111;
  --muted:     #A7A7A7;
  --border:    rgba(241, 96, 1, 0.15);

  /* Footer stays dark in both themes (a touch deeper than the page) */
  --footer-bg:           #09090B;
  --footer-fg:           #F9F9F9;
  --footer-link:         rgba(249, 249, 249, 0.62);
  --footer-link-hover:   #FFFFFF;
  --footer-border:       rgba(241, 96, 1, 0.14);
  --footer-muted:        rgba(249, 249, 249, 0.66);

  /* Elevation on dark — deeper, with a faint accent lift */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -10px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 18px 44px -14px rgba(0, 0, 0, 0.6);
}

/* Smooth theme transition */
body,
.studio-nav,
.bento-main > *,
.view-all-card,
.process-step,
.contact-footer,
.hero-cta,
.theme-toggle {
  transition: background-color 320ms var(--ease-quart),
              color 320ms var(--ease-quart),
              border-color 320ms var(--ease-quart);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

/* ── Text Selection (premium feel) ──────────────────────────── */
::selection {
  background: var(--accent);
  color: var(--fg);
}
::-moz-selection {
  background: var(--accent);
  color: var(--fg);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* Native cursor is hidden only while the custom cursor is live
   (studio.js → initCursor adds html.has-custom-cursor on mouse move). */
html.has-custom-cursor body { cursor: none; }

[data-theme="dark"] body {
  background: linear-gradient(160deg, #000000 0%, #111111 55%, #1a1a1a 100%);
  min-height: 100vh;
}

@media (pointer: coarse) { body { cursor: auto; } }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Global Focus & Interactive States ─────────────────────── */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Remove focus-visible outline for pointers (mouse/touch) */
*:focus:not(:focus-visible) { outline: none; }

/* ── Scroll Progress Bar ────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  z-index: 200;
  transition: width 80ms linear;
  pointer-events: none;
}

/* ── Custom Cursor ──────────────────────────────────────────── */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* Invisible until the mouse actually moves (and whenever it leaves the
   window) — never a frozen square in a corner. */
html:not(.has-custom-cursor) .cursor-dot,
html:not(.has-custom-cursor) .cursor-ring {
  opacity: 0 !important;
}

.cursor-dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 0px;
  opacity: 0.9;
  transition: opacity 200ms ease;
}

.cursor-ring {
  width: 40px; height: 40px;
  border: 2px solid #fff;
  border-radius: 0px;
  opacity: 0.8;
  /* blend: the ring inverts whatever it sits over, so it reads on any colour */
  mix-blend-mode: difference;
  transition: width 220ms var(--ease-expo), height 220ms var(--ease-expo), opacity 200ms ease;
}

body.cursor-hover .cursor-ring {
  width: 54px; height: 54px;
  opacity: 1;
}

body.cursor-hover .cursor-dot {
  opacity: 1;
}

/* Larger cursor on swatches / images / cards */
body.cursor-view .cursor-ring {
  width: 80px; height: 80px;
  border-color: #fff;
  opacity: 1;
}
body.cursor-view .cursor-dot {
  width: 0;
  height: 0;
}

/* ── Signature FX ──────────────────────────────────────────────
   A purple light that follows the cursor across a card, blended with
   `screen` so it reads like light passing over glass. Injected by
   studio.js (initCardGlow) which feeds --gx/--gy. */
.fx-glow-host { position: relative; }
.fx-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%),
              rgba(232, 80, 2, 0.30), transparent 62%);
  mix-blend-mode: screen;
  transition: opacity 340ms var(--ease-quart);
}
.fx-glow-host:hover .fx-glow { opacity: 1; }
/* Scroll parallax targets get GPU-promoted by studio.js (will-change) */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .fx-glow { display: none; }
}

/* ── Navigation ─────────────────────────────────────────────── */
.studio-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background 300ms ease, border-color 300ms ease;
}

.studio-nav.is-scrolled {
  background: rgba(11, 11, 11, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--border);
}

/* Light mode nav — clear background */
[data-theme="light"] .studio-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(232, 80, 2, 0.15);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2rem;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  height: 28px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: opacity 180ms var(--ease-quart), filter 180ms var(--ease-quart);
  text-decoration: none;
}

.nav-logo {
  height: 24px;
  width: auto;
  display: block;
  filter: brightness(0);
  transition: opacity 180ms var(--ease-quart);
}

[data-theme="dark"] .nav-logo {
  filter: brightness(0) invert(1);
}

.nav-brand:hover .nav-logo {
  opacity: 0.6;
}

.nav-brand:active .nav-logo {
  opacity: 0.4;
}

/* ── Brand logo: compact Æ monogram → full wordmark reveal on hover ── */
.nav-brand.has-logo {
  overflow: visible;          /* let the full wordmark extend past the mark */
  opacity: 1;                 /* base rule fades brand on hover; we don't want that here */
  filter: none;
}
.logo-stage {
  position: relative;
  display: inline-block;
  height: 22px;
  width: 30px;            /* reserve only the compact Æ so the nav never shifts */
  color: var(--fg);
  overflow: visible;
}
.logo-word {
  position: absolute;
  left: 0;
  top: 0;
  height: 22px;
  width: auto;            /* full wordmark intrinsic width; overflows to the right */
  fill: currentColor;
  overflow: visible;
}
/* Each letter animates independently. Default = collapsed monogram: the A
   holds, the monogram E is pulled left to fuse with it (forming the Æ), and
   every other letter waits hidden just left of home, ready to cascade in. */
.ltr {
  transform-box: fill-box;
  opacity: 0;
  transform: translateX(-16px);
  pointer-events: none;
  transition: transform 720ms var(--ease-expo),
              opacity 440ms var(--ease-quart);
  will-change: transform, opacity;
}
.ltr--mono { opacity: 1; transform: none; pointer-events: auto; }
.ltr--e    { transform: translateX(-72px); }   /* monogram E fused onto the A */
/* Hover / focus → unpack into the full wordmark, letters cascading left→right */
.nav-brand:hover .ltr,
.nav-brand:focus-visible .ltr {
  opacity: 1;
  transform: none;
  pointer-events: auto;            /* stays revealed while the cursor is on any letter */
  transition-delay: calc(var(--i, 0) * 34ms);
}
/* The wordmark is wide, so the centered nav links recede a touch on reveal */
.nav-links { transition: opacity 480ms var(--ease-quart); }
.nav-brand:hover ~ .nav-links,
.nav-brand:focus-within ~ .nav-links { opacity: 0.22; }
@media (prefers-reduced-motion: reduce) {
  .ltr { transition-duration: 1ms !important; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 180ms var(--ease-quart), border-color 200ms var(--ease-quart);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.nav-link:hover {
  color: var(--fg);
  border-bottom-color: rgba(232, 80, 2, 0.4);
}
.nav-link:active {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
}
.nav-link.is-active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}

.nav-year {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Theme Toggle (Dark / Light) ────────────────────────────── */
.theme-toggle {
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;

  width: 38px;
  height: 38px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms var(--ease-quart),
              border-color 200ms var(--ease-quart),
              color 200ms var(--ease-quart),
              transform 250ms var(--ease-expo);
  position: relative;
  overflow: hidden;
}

.theme-toggle:hover {
  background: rgba(232, 80, 2, 0.06);
  border-color: rgba(232, 80, 2, 0.4);
  color: var(--accent-text);
}

.theme-toggle:active {
  transform: scale(0.92) rotate(15deg);
}

/* Language switch — segmented EN · ES · JA with a sliding liquid-glass pill.
   Injected into the nav (grouped with the theme toggle) by studio.js. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* NAV BREAKPOINT = 1100px: the 9-item menu needs ~1100px to fit on one
   line; below that it collapses into the burger menu. Keep in sync with
   studio.js → initNavToggle. */
@media (min-width: 1101px) { .nav-actions { order: 4; } }
/* Just above the breakpoint, tighten the spacing so 9 links still breathe */
@media (min-width: 1101px) and (max-width: 1280px) { .nav-links { gap: 1.25rem !important; } }

.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lang-opt {
  position: relative;
  z-index: 1;                 /* above the pill */
  height: 30px;
  min-width: 38px;
  padding: 0 11px;
  border: none;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: color 300ms var(--ease-quart);
}
.lang-opt:hover:not(.is-active) { color: var(--fg); }
.lang-opt.is-active { color: #fff; }
.lang-pill {
  position: absolute;
  top: 4px;
  left: 0;
  height: 30px;
  width: 0;
  border-radius: 999px;
  z-index: 0;                 /* behind the labels */
  pointer-events: none;
  background: linear-gradient(155deg, #F16001 0%, var(--accent) 52%, #C10801 100%);
  box-shadow:
    0 6px 16px rgba(232, 80, 2, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.40),     /* glass top highlight */
    inset 0 -2px 4px rgba(90, 10, 0, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .lang-pill { transition: none; }
}

/* Desktop: Theme toggle visible as separate button in nav */
@media (min-width: 1101px) {
  .theme-toggle--mobile {
    display: none !important;
  }

  .theme-toggle--desktop {
    display: inline-flex;
    order: 3;
  }

  .nav-inner {
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  .nav-links {
    order: 2;
    flex-direction: row;
    position: static !important;
    background: transparent !important;
    border: none !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: auto !important;
    gap: 2rem;
  }

  .nav-link {
    display: inline-block;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
  }
}

.theme-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity 250ms var(--ease-quart),
              transform 400ms var(--ease-expo);
}

/* In DARK mode: show moon (current state); hovering offers light */
[data-theme="dark"] .theme-icon--moon,
:root:not([data-theme="light"]) .theme-icon--moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}
[data-theme="dark"] .theme-icon--sun,
:root:not([data-theme="light"]) .theme-icon--sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.7);
}

/* In LIGHT mode: show sun */
[data-theme="light"] .theme-icon--moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.7);
}
[data-theme="light"] .theme-icon--sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* ── Burger Menu (Mobile Navigation) ────────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}

.burger-line {
  width: 24px;
  height: 2px;
  background: var(--fg);
  transition: all 250ms var(--ease-quart);

}

.nav-toggle:hover .burger-line {
  background: var(--accent);
}

.nav-toggle.is-open .burger-line--top {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open .burger-line--mid {
  opacity: 0;
}

.nav-toggle.is-open .burger-line--bot {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile / tablet Navigation Menu (burger) — below the 1100px nav breakpoint */
@media (max-width: 1100px) {
  .nav-toggle {
    display: flex;
    order: 2;
  }

  .nav-links {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 320ms var(--ease-quart);
    z-index: 99;
  }

  .nav-links.is-open {
    max-height: calc(100svh - 70px);   /* 9 links + theme toggle; scrolls on short screens */
    overflow-y: auto;
  }

  .nav-link {
    display: block;
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--border);
    border-bottom-color: var(--border);
    text-align: center;
  }

  /* Theme toggle inside the burger menu — hidden: the header toggle (next to
     EN/ES/JA, moved there by studio.js → initLangToggle) is always visible,
     so this one was a duplicate. */
  .theme-toggle--mobile {
    display: none !important;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: auto;
    margin-right: auto;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--fg);
    border-radius: 6px;
  }

  .nav-inner {
    padding: 1rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .nav-inner {
    padding: 0.875rem 1rem;
  }

  .theme-toggle {
    width: 36px;
    height: 36px;
  }

  .nav-toggle {
    width: 36px;
    height: 36px;
  }

  .nav-link {
    padding: 0.875rem 1rem;
    font-size: 0.65rem;
  }
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;              /* the whole hero (title → marquee) fits one screen */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6.5rem 2.5rem 0;
  overflow: hidden;
  isolation: isolate;
}

/* hero-grid-bg and hero-glow removed — decorative AI-slop */

/* ── Playground light canvas (studio.js · initPlaygroundCanvas) ── */
.pg-play {
  position: relative;
  height: 340px;
  margin: -1rem auto 2.5rem;
  max-width: 1100px;
  border: 1px solid rgba(232, 80, 2, 0.2);
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(232, 80, 2, 0.07), transparent 60%),
    rgba(0, 0, 0, 0.5);
  cursor: crosshair;
}
.pg-canvas { display: block; width: 100%; height: 100%; }
.pg-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--muted); pointer-events: none; opacity: 0.7;
}

/* ── Magnetic return easing (studio.js · initMagneticButtons) ── */
.nav-link { transition: color 180ms var(--ease-quart), border-color 200ms var(--ease-quart), transform 280ms var(--ease-expo); }
.contact-link { transition: color 200ms var(--ease-quart), transform 280ms var(--ease-expo); }

/* ── Theme switch: circular reveal (View Transitions API · theme.js) ── */
::view-transition-old(root) { animation: none; z-index: 0; }
::view-transition-new(root) { animation: vtReveal 620ms var(--ease-expo); z-index: 1; }
@keyframes vtReveal {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); }
  to   { clip-path: circle(var(--vt-r, 150%) at var(--vt-x, 50%) var(--vt-y, 50%)); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root), ::view-transition-old(root) { animation: none; }
}

/* ── Mid-page section dots (studio.js · initSectionDots) ── */
.section-dots {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 80; display: flex; flex-direction: column; gap: 14px;
}
.section-dot {
  position: relative; width: 10px; height: 10px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1.5px solid var(--muted); background: transparent;
  transition: border-color 220ms var(--ease-quart), background 220ms, transform 220ms var(--ease-expo);
}
.section-dot:hover { border-color: var(--accent); }
.section-dot.active { border-color: var(--accent); background: var(--accent); transform: scale(1.25); }
.section-dot-label {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%) translateX(6px);
  opacity: 0; pointer-events: none; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg);
  background: rgba(0, 0, 0, 0.85); padding: 3px 8px; border-radius: 5px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity 200ms var(--ease-quart), transform 220ms var(--ease-expo);
}
.section-dot:hover .section-dot-label { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 760px) { .section-dots { display: none; } }

/* email copy feedback */
a[href^="mailto:"].copied { color: var(--accent-text); }

/* ── Works reel (studio.js · initWorksReel) ── */
.works-reel {
  overflow: hidden; max-width: 100%;
  margin: -0.25rem 0 1.75rem;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 0.85rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.works-reel-track { display: inline-flex; align-items: center; gap: 2rem; white-space: nowrap; will-change: transform; animation: reelScroll 36s linear infinite; }
.works-reel:hover .works-reel-track { animation-play-state: paused; }
.works-reel-item {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em;
  color: var(--muted); background: none; border: none; padding: 0; cursor: pointer; transition: color 200ms var(--ease-quart);
}
.works-reel-item:hover { color: var(--accent-text); }
.works-reel-sep { color: var(--accent-text); opacity: 0.45; font-size: 0.7rem; }
@keyframes reelScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .works-reel-track { animation: none; } }

/* ── About world clocks (studio.js · initAboutCities) ── */
/* Breathing room above (was glued to the hero line) and a tighter gap below */
.about-cities { display: flex; gap: 3rem; justify-content: center; flex-wrap: wrap; margin: clamp(2.5rem, 5vh, 3.5rem) auto 0; }
.about-city { text-align: center; font-family: var(--font-mono); }
.about-city-name { font-size: 0.58rem; letter-spacing: 0.24em; color: var(--muted); }
.about-city-time { font-size: 1.5rem; font-weight: 700; color: var(--fg); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; margin: 2px 0; }
.about-city-off { font-size: 0.52rem; letter-spacing: 0.12em; color: var(--accent-text); }

/* ── Blog random (studio.js) ── */
.surprise-btn { cursor: pointer; }
.blog-random {
  position: relative; z-index: 3;                 /* sit clearly above the hero edge + 3D canvas */
  display: block; margin: -0.5rem auto 2.5rem;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg); background: var(--surface);   /* solid so the hero divider doesn't cut through it */
  border: 1px solid rgba(232, 80, 2, 0.4); border-radius: 999px; padding: 0.7rem 1.3rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  transition: background 200ms var(--ease-quart), transform 220ms var(--ease-expo), border-color 200ms, box-shadow 200ms;
}
.blog-random:hover { background: rgba(232, 80, 2, 0.14); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 38px rgba(232, 80, 2, 0.3); }
.blog-random:active { transform: scale(0.96); }
.blog-random-label { display: inline-block; }
/* slot-machine roll: lock width, truncate long titles, tint accent */
.blog-random.is-rolling {
  pointer-events: none;
  border-color: var(--accent);
  background: rgba(232, 80, 2, 0.14);
  max-width: min(82vw, 440px);
  animation: blogRandJit 0.42s linear infinite;
}
.blog-random.is-rolling .blog-random-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: min(74vw, 392px); vertical-align: bottom;
}
.blog-random.is-landed {
  animation: none;
  transform: scale(1.05);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(232, 80, 2, 0.55), 0 12px 32px rgba(232, 80, 2, 0.35);
}
@keyframes blogRandJit { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }

/* ── Floating "back to blog" button on a post (blog/post.html) ──── */
.post-back-fab {
  position: fixed; top: 84px; left: 24px; z-index: 60;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.05rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg); text-decoration: none; white-space: nowrap;
  background: var(--surface);
  border: 1px solid rgba(232, 80, 2, 0.3); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform 200ms var(--ease-quart), border-color 200ms, color 200ms, background 200ms;
}
.post-back-fab .pbf-arrow { transition: transform 200ms var(--ease-quart); }
.post-back-fab:hover { border-color: var(--accent); color: var(--accent-text); background: rgba(232, 80, 2, 0.1); }
.post-back-fab:hover .pbf-arrow { transform: translateX(-3px); }
@media (max-width: 768px) {
  .post-back-fab { top: 70px; left: 12px; padding: 0.5rem 0.85rem; font-size: 0.62rem; }
}

/* ── Sound toggle (studio.js · initSound) ── */
.sound-toggle {
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 38px;
  height: 38px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms var(--ease-quart),
              border-color 200ms var(--ease-quart),
              color 200ms var(--ease-quart),
              transform 250ms var(--ease-expo);
}
.sound-toggle:hover { border-color: rgba(232, 80, 2, 0.45); color: var(--accent-text); }
.sound-toggle:active { transform: scale(0.94); }
.sound-toggle.is-on { color: var(--accent-text); border-color: rgba(232, 80, 2, 0.45); }

/* ── Easter egg: lab-mode burst + toast (studio.js) ── */
.ae-burst { position: fixed; inset: 0; z-index: 99998; pointer-events: none; }
.ae-toast {
  position: fixed; left: 50%; bottom: 34px; z-index: 99999;
  transform: translate(-50%, 14px);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: #fff; padding: 0.62rem 1.05rem; border-radius: 999px;
  background: linear-gradient(155deg, #F16001, var(--accent) 60%, #C10801);
  box-shadow: 0 10px 28px rgba(232, 80, 2, 0.5), inset 0 1px 0 rgba(255,255,255,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 380ms var(--ease-quart), transform 420ms var(--ease-expo);
}
.ae-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Kinetic type: per-letter cursor-reactive headlines (studio.js) ── */
.kt-word { display: inline-block; white-space: nowrap; }  /* never break a word mid-letter */
.kt-ch {
  display: inline-block;
  transition: color 180ms var(--ease-quart);
}
.kt-ch.kt-scram { color: var(--accent); }   /* purple flash while a letter decodes */

/* ── WebGL hero background (home) — js/hero-webgl.js ──────────────
   Full-bleed canvas behind the hero content. A radial scrim keeps the
   centre clean so the headline never loses contrast over the 3D field. */
.hero-webgl-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;          /* above the canvas (z:0, painted earlier), below all hero content (z:1+) */
  pointer-events: none;
  background:
    radial-gradient(120% 75% at 50% 42%, var(--bg) 0%, transparent 55%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 18% 82%, var(--bg) 100%);
  opacity: 0.86;
}
/* Lift the real hero content above the canvas + scrim */
.hero-content,
.hero-stats,
.hero-marquee,
.hero-scroll { position: relative; z-index: 2; }

/* ── Same engine on the section heroes (.page-hero) ──────────────
   .page-hero already sets `> * { z-index:1 }`, so the canvas needs a
   more specific rule to sit BEHIND the label/title/sub. */
.page-hero > .hero-webgl-canvas {
  position: absolute;   /* beats `.page-hero > * { position: relative }` */
  inset: 0;
  z-index: 0;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;            /* above canvas (painted earlier), below content (z:1) */
  pointer-events: none;
  /* keep the centred title clean, and fade the field smoothly into the
     background at the top and bottom edges so it never reads as harsh noise */
  background:
    radial-gradient(95% 78% at 50% 44%, var(--bg) 0%, transparent 60%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 24% 76%, var(--bg) 100%);
  opacity: 0.78;
}


/* Top status bar */
.hero-status {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-status-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.hero-status-item--right { gap: 0.5rem; }

.hero-status-dot {
  width: 7px;
  height: 7px;
  background: #19c37d;

  box-shadow: 0 0 0 0 rgba(25, 195, 125, 0.6);
  animation: pulse-dot 2s ease-out infinite;
}

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(25, 195, 125, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(25, 195, 125, 0); }
  100% { box-shadow: 0 0 0 0 rgba(25, 195, 125, 0); }
}

.hero-status-text { color: var(--fg); }
.hero-status-label { color: var(--muted); }
.hero-status-sep { color: var(--border); }
.hero-status-time { color: var(--fg); font-variant-numeric: tabular-nums; }
/* Airport split-flap board (hero city clock) — accent the flipping glyphs */
.hero-status-label.is-flapping,
.hero-status-time.is-flapping { color: var(--accent, #E85002); }

/* Hero content */
.hero-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2.5rem 0 1.5rem;
}

.hero-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2rem;
  overflow: hidden;
  text-align: center;
}

.hero-display {
  line-height: 0.88;
  margin-bottom: 1.75rem;
  display: block;
  text-align: center;
}

/* Headline size scales with BOTH width and height (min of vw / svh), so it
   never outgrows the screen on wide-but-short laptops. No overflow:hidden —
   with a tight line-height it chopped off descenders (g, j, p, y). The
   reveal mask is done with clip-path instead (see below + motion.js). */
.hero-line {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, min(6.4vw, 11svh), 7rem);
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--fg);
  text-align: center;
  text-wrap: balance;
}

.hero-line--accent { color: var(--accent); }

.hero-line--italic {
  font-style: italic;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, min(5.4vw, 9.5svh), 6rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-transform: lowercase;
  max-width: 17ch;                 /* breaks into 2 balanced lines */
  margin-inline: auto;
  padding-inline: 0.06em;          /* room for the italic overhang */
}

/* ── Reveal system — block-level, not char-by-char ───────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 600ms var(--ease-quart),
              transform 750ms var(--ease-expo);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Hero display lines: stronger mask reveal */
.hero-line[data-reveal] {
  display: block;
  transform: translateY(40%);
  clip-path: inset(0 0 100% 0);
  transition: opacity 700ms var(--ease-quart),
              transform 850ms var(--ease-expo),
              clip-path 850ms var(--ease-expo);
}

.hero-line[data-reveal].is-revealed {
  transform: translateY(0);
  /* negative inset = open mask that never clips descenders / italic overhang */
  clip-path: inset(-20% -6% -30% -6%);
}

/* When motion.js owns the hero entrance (html.hero-motion), disable the
   CSS data-reveal transition so the JS (Motion) animation is the only one
   running — they never double-animate. Falls back to the CSS reveal when
   motion.js is absent or reduced-motion is on. */
html.hero-motion .hero [data-reveal] {
  transition: none !important;
}

.hero-sub {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1.2vw, 1.05rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted);
  max-width: 48ch;
  margin: 0 auto 2rem;
  overflow: hidden;
  text-align: center;
}

/* Hero CTAs */
.hero-cta-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  transition: background 200ms var(--ease-quart),
              border-color 200ms var(--ease-quart),
              color 200ms var(--ease-quart),
              transform 400ms var(--ease-expo);
  cursor: pointer;
  min-height: 42px;
  position: relative;
  overflow: hidden;
}

/* Sweep light on hover for primary CTA */
.hero-cta--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: left 700ms var(--ease-expo);
  pointer-events: none;
}
.hero-cta--primary:hover::before { left: 100%; }

.hero-cta--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #000000;            /* black on brand orange: 5:1 (white would be ~3.7:1) */
}
.hero-cta--primary:hover {
  background: #F16001;
  border-color: #F16001;
  transform: translateY(-1px);
}
.hero-cta--primary:active { transform: translateY(0) scale(0.98); }

.hero-cta--ghost { background: transparent; }
.hero-cta--ghost:hover {
  background: rgba(232, 80, 2, 0.08);
  border-color: rgba(232, 80, 2, 0.3);
}
.hero-cta--ghost:active { transform: scale(0.98); }

/* arrow is included in the content.js button text — hide the extra span */
.hero-cta-arrow { display: none; }

/* Stats — horizontal spec strip */
.hero-stats {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.hero-stat {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.hero-stat:first-child { padding-left: 0; }
.hero-stat:last-child  { border-right: none; }

.hero-stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg);
}

.hero-stat-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Marquee — disciplines tape */
.hero-marquee {
  position: relative;
  z-index: 1;
  width: calc(100% + 5rem);
  margin: 0 -2.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}

.hero-marquee-track {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: max-content;
  animation: marquee 38s linear infinite;
  will-change: transform;
}

.hero-marquee:hover .hero-marquee-track {
  animation-play-state: paused;
}

.hero-marquee-item {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.5vw, 1.35rem);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}

.hero-marquee-dot {
  color: var(--accent-text);
  font-size: 0.65rem;
  line-height: 1;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Hero scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 1.25rem;
  right: 2.5rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  animation: nudge 2.4s ease-in-out infinite;
}

.hero-scroll-line {
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, var(--muted), transparent);
}

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

/* ── Reveal System ──────────────────────────────────────────── */
.reveal-section {
  opacity: 0;
  transform: translateY(48px) scale(0.99);
  transition: opacity 800ms var(--ease-quart), transform 900ms var(--ease-expo);
}

.reveal-section.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Section Header (elegant, large, used across home sections) ── */
.section-head {
  padding: 7rem 2.5rem 3rem;
  border-top: 1px solid var(--border);
}

.section-head-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

.section-head-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);

}

.section-head-kicker {
  color: var(--accent-text);
}

/* Insert a subtle dot separator between meta items */
.section-head-meta > * + *::before {
  content: '·';
  color: var(--muted);
  margin-right: 0.6rem;
  display: inline-block;
}

.section-head-count {
  color: var(--muted);
  padding-left: 0;
  border-left: none;
}

.section-head-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 11vw, 10rem);
  line-height: 0.85;
  letter-spacing: -0.035em;
  color: var(--fg);
  text-align: center;
}

.section-head-sub {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 54ch;
  margin: 0.25rem auto 0;
  text-align: center;
}

/* ── Work Header — left-aligned strip ───────────────────────── */
.work-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem 2.5rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 5rem;
}

.work-header-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.work-header-count {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* ── Bento Grid — 4 featured projects, 2×2, edge to edge ───────
   Which 4: content.js → home.featured. 1 column on phones. */
.bento-main {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border);
  margin: 0 clamp(1.25rem, 4vw, 2.5rem) 2rem;
}

/* every direct child gets full border + rounded corners */
.bento-main > * { min-width: 0; }

/* (Legacy bento-header removed — header is now .section-head outside the grid) */
.bento-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}

.bento-header-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.bento-header-count {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Auto-flow: every project card is the same size, filling
   left→right, top→bottom (p1 p2 p3 / p4 p5 p6 / …). */


/* ── View All Projects (CTA after bento) ────────────────────── */
.view-all {
  padding: 0;
  border-bottom: 1px solid var(--border);
}

.view-all-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 2.5rem;
  color: var(--fg);
  text-decoration: none;
  border-top: 1px solid var(--border);
  transition: background 250ms var(--ease-quart);
}

.view-all-card:hover { background: rgba(232, 80, 2, 0.03); }

.view-all-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 1;
}

.view-all-label {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.view-all-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--fg);
}

.view-all-sub { display: none; }

.view-all-arrow {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--muted);
  transition: transform 300ms var(--ease-expo), color 200ms ease;
}
.view-all-card:hover .view-all-arrow {
  transform: translateX(6px);
  color: var(--accent-text);
}

@media (max-width: 768px) {
  .view-all { padding: 0 1.25rem 3rem; }
  .view-all-card { padding: 1.75rem 1.5rem; gap: 1rem; }
  .view-all-arrow { font-size: 2.5rem; }
}

/* ── Home projects: an INDEX on desktop, EDITORIAL cards on touch / small ──
   Desktop (hover + wide): a big typographic list — name, field, year — and the
   image floats beside the cursor (studio.js → initProjectIndex). Touch and
   narrow screens have no hover, so the same markup becomes editorial cards:
   clean image, name + year, field, and the case's one-line thesis if it has one.
   No text sits on top of the work. Markup: content-loader.js → projectCardHTML(). */
.project-item {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 17rem) 4rem;
  column-gap: 1.5rem;
  align-items: baseline;
  padding: clamp(1.1rem, 2vw, 1.7rem) 0;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  cursor: pointer;
  transition: padding 500ms var(--ease-expo);
}
.project-item::after {                       /* gradient underline that draws on hover */
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--grad-line, var(--accent));
  transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-expo);
}
.project-item:hover, .project-item:focus-visible { padding-left: 1rem; }
.project-item:hover::after, .project-item:focus-visible::after { transform: scaleX(1); }
.project-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.project-img { display: none; }               /* the index shows no image until hover */
.project-meta { display: contents; }

.project-num {
  grid-column: 1;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.2em; color: var(--muted); transition: color 300ms var(--ease-quart);
}
.project-name {
  grid-column: 2;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 4.6vw, 4.2rem);
  letter-spacing: -0.04em; line-height: 1;
  text-transform: none; color: var(--fg);
  transition: color 300ms var(--ease-quart);
}
.project-item:hover .project-name, .project-item:focus-visible .project-name { color: var(--accent-text); }
.project-item:hover .project-num,  .project-item:focus-visible .project-num  { color: var(--accent-text); }
.project-category, .project-year {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.project-category { grid-column: 3; }
.project-year { grid-column: 4; text-align: right; }
.project-thesis { display: none; }

/* cursor-following preview (desktop only; created by studio.js) */
.proj-float {
  position: fixed; left: 0; top: 0; z-index: 60; width: min(24vw, 340px); aspect-ratio: 4 / 3;
  pointer-events: none; overflow: hidden; border-radius: 6px; background: var(--surface);
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translate3d(-9999px, 0, 0);
  transition: opacity 250ms var(--ease-quart);
}
.proj-float.is-on { opacity: 1; }
.proj-float img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 220ms var(--ease-quart); }
.proj-float img.is-on { opacity: 1; }

/* Editorial mode — touch devices and anything narrower than a desktop */
@media (max-width: 900px), (hover: none) {
  .bento-main { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.25rem; border-top: 0; padding: 0 1.5rem 2rem; }
  .project-item { display: block; padding: 0; border-bottom: 0; }
  .project-item::after { display: none; }
  .project-item:hover, .project-item:focus-visible { padding-left: 0; }
  .project-img {
    display: block; position: relative; inset: auto; aspect-ratio: 4 / 3;
    overflow: hidden; border-radius: 6px; background: var(--surface);
  }
  .project-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms var(--ease-expo); }
  .project-item:hover .project-img img { transform: scale(1.04); }
  .project-overlay { display: none; }
  .project-meta {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.25rem;
    padding: 0.9rem 0 0.9rem; border-bottom: 1px solid var(--border);
  }
  .project-num { display: none; }
  .project-name { grid-column: 1; font-size: clamp(1.2rem, 4.6vw, 1.6rem); letter-spacing: -0.025em; }
  .project-year { grid-column: 2; grid-row: 1; }
  .project-category { grid-column: 1 / -1; }
  .project-thesis {
    display: block; grid-column: 1 / -1; margin: 0.35rem 0 0;
    font-size: 0.92rem; line-height: 1.45; color: var(--muted); max-width: 52ch;
  }
  .proj-float { display: none; }
}
@media (max-width: 640px) {
  .bento-main { grid-template-columns: 1fr; padding: 0 1.25rem 1.5rem; gap: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .project-item, .project-item::after, .project-img img { transition: none; }
  .project-item:hover .project-img img { transform: none; }
}

/* ── About ──────────────────────────────────────────────────── */
.about-section {
  border: 1px solid var(--border);

  overflow: hidden;
}

.about-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--border);
}

.about-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
}

.about-left {
  padding: 3rem 2rem;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 340px;
}

.about-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 6.5vw, 6.5rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
}

.about-role-block {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.about-role {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
}

.about-sep {
  color: var(--muted);
}

.about-right {
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
}

.about-bio {
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.7;
  max-width: 52ch;
  color: var(--muted);
}

.about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.about-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.3rem 0.65rem;
}

.about-link {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  transition: color 180ms ease;
}
.about-link:hover { color: var(--accent-text); }

/* pointer for brand cards */
.brand-card { cursor: pointer; }

/* ── Blog Post — Single Article ─────────────────────────────── */
.article-header {
  padding: 8rem 2rem 2rem;
  max-width: 920px;
  margin: 0 auto;
}

.article-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2rem;
}

.article-breadcrumb-link {
  color: var(--muted);
  transition: color 200ms var(--ease-quart);
}
.article-breadcrumb-link:hover { color: var(--accent-text); }
.article-breadcrumb-sep { color: var(--border); }
.article-breadcrumb-current { color: var(--accent-text); }

.article-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5.5vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin-bottom: 2rem;
  max-width: 22ch;
}

.article-deck {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 60ch;
  margin-bottom: 3rem;
}

.article-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.article-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.article-meta-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.article-meta-value {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--fg);
}

/* Cover */
.article-cover {
  max-width: 1280px;
  margin: 3rem auto 4rem;
  padding: 0 2rem;
}

.article-cover img {
  width: 100%;

  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-cover-caption {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-top: 1rem;
}

/* Body */
.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
}

.article-tldr {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 3rem;
  border-left: 2px solid var(--accent);
  background: rgba(232, 80, 2, 0.04);

}

.article-tldr-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--accent-text);
}

.article-tldr p {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--fg);
}

.article-lead {
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--fg);
  margin-bottom: 2rem;
}
.article-lead::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 0.85;
  float: left;
  margin: 0.15rem 0.65rem 0 0;
  color: var(--accent-text);
}

.article-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--fg);
  margin: 3rem 0 1.25rem;
}

.article-body p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--fg);
  margin-bottom: 1.5rem;
}

.article-body p em { color: var(--accent-text); font-style: italic; }

.article-quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--fg);
  padding: 1.5rem 0 1.5rem 1.5rem;
  border-left: 3px solid var(--accent);
  margin: 2.5rem 0;
}

.article-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.article-list li {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg);
  padding-left: 1.5rem;
  position: relative;
}

.article-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

.article-list strong { color: var(--fg); font-weight: 600; }

.article-signoff {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--accent-text);
  margin-top: 3rem;
  margin-bottom: 0;
}

/* Article footer (tags + share) */
.article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 3rem;
  margin-top: 3rem;
  border-top: 1px solid var(--border);
}

.article-tags {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.article-tag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);

}

.article-share {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.article-share-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.25rem;
}

.article-share-link {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);

  color: var(--fg);
  font-family: var(--font-body);
  font-size: 0.85rem;
  transition: background 200ms var(--ease-quart),
              border-color 200ms var(--ease-quart),
              color 200ms var(--ease-quart);
}
.article-share-link:hover {
  background: rgba(232, 80, 2, 0.08);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* Next CTA */
.article-next {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0;
}

.article-next-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 4rem 2rem;
  text-align: center;
  transition: background 250ms var(--ease-quart);
}
.article-next-card:hover { background: rgba(232, 80, 2, 0.04); }

.article-next-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.article-next-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* Responsive */
@media (max-width: 768px) {
  .article-header { padding: 6rem 1.25rem 1.5rem; }
  .article-cover { padding: 0 1.25rem; margin: 2rem auto 2.5rem; }
  .article-body { padding: 0 1.25rem 3rem; }
  .article-meta { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .article-lead::first-letter { font-size: 3rem; }
  .article-footer { flex-direction: column; align-items: flex-start; }
  .article-next-card { padding: 3rem 1.25rem; }
}

/* ── Trusted-by Strip ───────────────────────────────────────── */
.trusted-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}

/* label removed per design — no rigid "Trusted by" column */
.trusted-label { display: none; }

.trusted-marquee {
  overflow: hidden;
  padding: 1.75rem 0;
  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
}

.trusted-marquee-track {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: max-content;
  animation: marquee 44s linear infinite;
  will-change: transform;
}

.trusted-marquee:hover .trusted-marquee-track {
  animation-play-state: paused;
}

.trusted-item {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(0.65rem, 1vw, 0.8rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
  transition: color 200ms var(--ease-quart);
}
.trusted-item:hover { color: var(--accent-text); }

.trusted-dot {
  color: var(--accent-text);
  opacity: 0.5;
  font-size: 0.4rem;
}

/* ── Process — scroll timeline + 3D stage (js/process-3d.js) ──────
   Two columns: a pinned 3D stage (left) and the timeline (right).
   Each step is ~a screen tall so the 3D morph has room to breathe.
   .process-step.is-active is set by process-3d.js from the scroll. */
.process-section {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}

.process-3d {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);   /* the text leads, the 3D supports */
}

/* Pinned stage */
.process-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.process-canvas { display: block; width: 100%; height: 100%; }

.process-stage-num {
  position: absolute;
  left: 2.5rem;
  bottom: 2rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 9vw, 9rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--fg);
  opacity: 0.06;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* No WebGL → keep the timeline, hide the empty stage */
.process-no3d { grid-template-columns: 1fr; }
.process-no3d .process-stage { display: none; }

/* Timeline column */
.process-timeline {
  position: relative;
  padding: 18vh clamp(1.5rem, 4vw, 4rem) 30vh clamp(2.5rem, 5vw, 5rem);
}

.process-intro { margin-bottom: 14vh; max-width: 30rem; }

.process-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--accent-text);
  margin-bottom: 1rem;
}

.process-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4.2vw, 4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--fg);
  margin-bottom: 1.25rem;
}

.process-lede { font-size: 1rem; line-height: 1.65; color: var(--muted); max-width: 40ch; }

/* Rail — a thin line that fills as you scroll */
.process-rail {
  position: absolute;
  left: clamp(1.25rem, 2.5vw, 2.5rem);
  top: 18vh;
  bottom: 30vh;
  width: 1px;
  background: var(--border);
}

.process-rail i {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #6B7280, var(--accent) 45%, #F5F3FF);
  transform-origin: top;
  transform: scaleY(0);
}

/* Steps */
.process-steps { list-style: none; padding: 0; margin: 0; }

.process-step {
  position: relative;
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  max-width: 36rem;
  opacity: 0.28;
  transition: opacity 500ms var(--ease-quart);
}

.process-step.is-active { opacity: 1; }

/* dot on the rail */
.process-step::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(2.5rem, 5vw, 5rem) + clamp(1.25rem, 2.5vw, 2.5rem) - 5px);
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--muted);
  transform: translateY(-50%);
  transition: background 400ms var(--ease-quart), border-color 400ms var(--ease-quart), box-shadow 400ms var(--ease-quart);
}

.process-step.is-active::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 6px rgba(232, 80, 2, 0.15);
}

.process-step-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--accent-text);
}

.process-step-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.8vw, 3.6rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fg);
}

.process-step-desc {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.2vw, 1.15rem);
  line-height: 1.7;
  color: var(--muted);
  max-width: 44ch;
}

.process-step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin-top: 0.25rem;
}

.process-step-tags li {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--fg);
}

/* Tablet / phone: the 3D stage stays pinned at the top (above the text);
   the steps scroll up from below and slide under it, fading out. */
@media (max-width: 900px) {
  .process-3d { grid-template-columns: 1fr; }
  .process-stage {
    top: 60px;
    height: 40vh;
    height: 40svh;
    z-index: 2;
    background: var(--bg);
    overflow: visible;
  }
  .process-stage::after {               /* soft edge where the text slides under */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -48px;
    height: 48px;
    background: linear-gradient(var(--bg), transparent);
    pointer-events: none;
  }
  .process-stage-num { left: 1.25rem; bottom: 0.5rem; font-size: 3.5rem; }
  .process-timeline { padding: 6vh 1.25rem 24vh 3rem; position: relative; z-index: 1; }
  .process-intro { margin-bottom: 8vh; }
  .process-rail { left: 1.25rem; top: 6vh; bottom: 24vh; }
  .process-step { min-height: 52vh; }
  .process-step::before { left: calc(-3rem + 1.25rem - 5px); }
}

@media (prefers-reduced-motion: reduce) {
  .process-step { transition: none; }
}

/* ── Back to Top Button ─────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 56px;
  height: 56px;

  background: var(--accent);
  color: #0B0B0E;
  border: 1px solid var(--accent);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px) scale(0.85);
  pointer-events: none;
  transition: opacity 400ms var(--ease-quart),
              transform 400ms var(--ease-expo),
              background 250ms var(--ease-quart),
              box-shadow 250ms var(--ease-quart);
  box-shadow: 0 6px 24px rgba(232, 80, 2, 0.22);
  justify-content: center;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.back-to-top:hover {
  background: #E85002;
  box-shadow: 0 8px 32px rgba(232, 80, 2, 0.35);
  transform: translateY(-2px) scale(1.04);
}

.back-to-top:active {
  transform: translateY(0) scale(0.96);
}

.back-to-top-arrow {
  font-size: 0.95rem;
  line-height: 1;
}

.back-to-top-label {
  font-size: 0.5rem;
  line-height: 1;
  margin-top: 0.05rem;
}

/* ── Modal Sticky CTA ───────────────────────────────────────── */
.modal-sticky-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 2.5rem;
  margin: 0;
  background: var(--accent);
  color: #0B0B0E;
  border-bottom: 1px solid var(--border);
  transition: background 200ms var(--ease-quart);
  position: relative;
  overflow: hidden;
}

.modal-sticky-cta:hover { background: #E85002; }

.modal-sticky-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: left 700ms var(--ease-expo);
  pointer-events: none;
}
.modal-sticky-cta:hover::before { left: 100%; }

.modal-sticky-cta-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.modal-sticky-cta-action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  letter-spacing: -0.01em;
  color: var(--fg);
}

.modal-sticky-cta-arrow {
  transition: transform 300ms var(--ease-expo);
  display: inline-block;
}
.modal-sticky-cta:hover .modal-sticky-cta-arrow {
  transform: translateX(6px);
}

/* ── Nav Active Page Dot ────────────────────────────────────── */
.nav-link.is-active {
  position: relative;
}

.nav-link.is-active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -0.85rem;
  width: 5px;
  height: 5px;

  background: var(--accent);
  transform: translateY(-50%);
  animation: pulse-dot-nav 2s ease-out infinite;
}

@keyframes pulse-dot-nav {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 80, 2, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(232, 80, 2, 0); }
}

/* ── Site Footer (every page) ───────────────────────────────────
   Inverse colours (--footer-* tokens: light footer in dark mode and
   vice versa). Markup is identical on every page; behaviour lives in
   studio.js → initSiteFooter().
     1. .footer-ask   — rotating question, links to /contact/
     2. .footer-map   — 3 columns: to hire me / to know me / right now
     3. .footer-base  — city clocks · e-mail + socials · © */
.contact-footer {
  background: var(--footer-bg);
  color: var(--footer-fg);
  overflow: hidden;
}

/* 1. Ask — centred, uppercase, the call to action */
.footer-ask {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: clamp(4rem, 9vw, 6.5rem) 1.5rem clamp(3rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--footer-border);
  color: var(--footer-fg);
  text-align: center;
}

.footer-ask-q {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, min(3.6vw, 7svh), 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 22ch;
  transition: opacity 280ms var(--ease-quart), transform 280ms var(--ease-quart), color 200ms var(--ease-quart);
}

.footer-ask-q.is-out { opacity: 0; transform: translateY(8px); }

.footer-ask-cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 1.1rem;
  border: 1px solid rgba(232, 80, 2, 0.45);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F16001;
  transition: background 200ms var(--ease-quart), border-color 200ms var(--ease-quart);
}

.footer-ask:hover .footer-ask-cta { background: rgba(232, 80, 2, 0.16); border-color: #E85002; }
.footer-ask:hover .footer-ask-q { color: #F16001; }

/* 2. Map — two centred columns + "right now" line under them */
.footer-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 15rem));
  justify-content: center;
  column-gap: clamp(3rem, 10vw, 9rem);
  row-gap: 2.5rem;
  padding: 3.5rem 1.5rem;
  border-bottom: 1px solid var(--footer-border);
  text-align: center;
}

.footer-col { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }

.footer-col-title {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--footer-muted);
  margin-bottom: 0.4rem;
}

.footer-col a {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--footer-link);
  transition: color 200ms var(--ease-quart);
}

.footer-col a:hover { color: var(--footer-link-hover); }

/* the third column becomes a centred "right now" row */
.footer-map .footer-col:last-child {
  grid-column: 1 / -1;
  padding-top: 2.5rem;
  border-top: 1px solid var(--footer-border);
}

.footer-now { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.footer-now strong { color: var(--footer-fg); font-weight: 700; }
.footer-now span { text-transform: none; letter-spacing: 0.02em; color: var(--footer-muted); }
.footer-now strong::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: #22C55E;
  vertical-align: middle;
}

/* 3. Base — centred: clocks · links · © */
.footer-base {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 2.25rem 1.5rem 2.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--footer-muted);
  text-align: center;
}

.footer-cities { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2rem; }
.footer-cities b { font-weight: 700; color: var(--footer-fg); font-variant-numeric: tabular-nums; margin-left: 0.35rem; }

.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem; }

.contact-copy {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--footer-muted);
}

.contact-link {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--footer-link);
  transition: color 200ms var(--ease-quart);
  display: block;
}
.contact-link:hover { color: var(--footer-link-hover); }
.footer-links .contact-link:first-child { text-transform: none; letter-spacing: 0.04em; }

@media (max-width: 600px) {
  .footer-map { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  .footer-col a, .contact-link { min-height: 40px; display: flex; align-items: center; }
}

/* ── Responsive — Tablet ────────────────────────────────────── */
@media (max-width: 900px) {
  .section-head { padding: 4rem 1.5rem 1.5rem; }




  /* Contact footer — stack on tablet */
}

/* ── Responsive — Mobile ────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-inner { padding: 1rem 1.25rem; }
  .nav-links { gap: 1.5rem; }

  /* Touch-friendly tap targets */
  .nav-link {
    padding: 0.5rem 0.75rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .hero { padding: 5rem 1.25rem 0; }
  .hero-scroll { display: none; }
  .hero-status { font-size: 0.6rem; gap: 0.5rem; }
  .hero-status-item--right .hero-status-sep,
  .hero-status-item--right .hero-status-time { display: none; }
  .hero-content { padding: 1.5rem 0; }
  .hero-eyebrow { font-size: 0.6rem; margin-bottom: 1.25rem; }
  .hero-line { font-size: clamp(2.4rem, 12vw, 4.5rem); }
  .hero-line--italic { font-size: clamp(2rem, 9.5vw, 3.8rem); }
  .hero-sub { font-size: 0.95rem; margin-bottom: 1.75rem; }
  .hero-cta-row { gap: 0.5rem; width: 100%; }
  .hero-cta { padding: 0.85rem 1.1rem; font-size: 0.65rem; flex: 1; justify-content: center; }
  .hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); }
  .hero-stat { padding: 1rem 0.75rem; justify-content: center; }
  .hero-stat:first-child { padding-left: 0.75rem; }
  .hero-stat:nth-child(2) { border-right: none; }
  .hero-stat:nth-child(3), .hero-stat:nth-child(4) { border-top: 1px solid var(--border); }
  .hero-marquee { margin: 0 -1.25rem; width: calc(100% + 2.5rem); padding: 1rem 0; }
  .hero-marquee-item { font-size: 1.1rem; }
  .hero-marquee-track { gap: 1.5rem; }

  .section-head { padding: 3rem 1.25rem 1.25rem; }

  .bento-card--p1,
  .bento-card--p2,
  .bento-card--p3,
  .bento-card--p4,
  .bento-card--p5,
  .bento-card--p6 {
    grid-column: 1;
    grid-row: auto;
  }



  .work-statement {
    padding: 3rem 1.25rem;
    min-height: auto;
    text-align: center;
  }

  .about-label { padding: 0.875rem 1.25rem; }
  .about-grid { grid-template-columns: 1fr; }
  .about-left {
    border-right: none;
    border-bottom: 1px solid var(--border);
    min-height: auto;
    padding: 2rem 1.25rem;
    gap: 1.5rem;
  }
  .about-right { padding: 2rem 1.25rem; }

  .trusted-marquee { padding: 1.25rem 0; }
  .trusted-marquee-track { gap: 2.5rem; }


  /* Contact footer — mobile */

  .back-to-top { bottom: 1rem; right: 1rem; width: 50px; height: 50px; }

  .modal-sticky-cta { padding: 1.5rem 1.25rem; gap: 1rem; flex-direction: column; align-items: flex-start; }
  .modal-sticky-cta-action { font-size: 1.25rem; }

  .nav-link.is-active::before { left: -0.7rem; width: 4px; height: 4px; }
}

@media (max-width: 480px) {
  .hero { padding: 4.5rem 1rem 0; }
  .hero-cta { padding: 0.75rem 0.85rem; font-size: 0.6rem; }
  .hero-stat-num { font-size: 2.4rem; }
  .hero-eyebrow { margin-bottom: 1rem; }
  .nav-inner { padding: 0.875rem 1rem; }
  .nav-links { gap: 1rem; }
  .about-left, .about-right { padding: 1.75rem 1rem; }
  .bento-header { padding: 0.75rem 1rem; }

  .cursor-dot, .cursor-ring { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   INNER PAGES — shared page-level styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Page Hero (non-home pages) ─────────────────────────────── */
.page-hero {
  padding: 9rem 2.5rem 3rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;       /* full-bleed hero, content centred (matches home) */
  text-align: center;
  gap: 2rem;
  position: relative;
  overflow: hidden;
}

.page-hero > * { position: relative; z-index: 1; }
.page-hero-inner { max-width: 1080px; margin: 0 auto; }
.page-hero-meta { width: 100%; max-width: 1080px; margin: 0 auto; justify-content: center; }

.page-hero-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.page-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
}

.page-hero-sub {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  color: var(--muted);
  line-height: 1.6;
}

.page-hero-meta {
  display: flex;
  gap: 1.75rem;
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.78;            /* quieter so the title/sub lead the hierarchy */
}
/* subtle dot between meta items instead of the old full-width rule */
.page-hero-meta > span + span::before {
  content: '·';
  margin-right: 1.75rem;
  margin-left: -0.95rem;
  color: var(--accent-text);
  opacity: 0.6;
}

/* ── Brand voice ────────────────────────────────────────────────
   The two-typeface system (Inter display/body + IBM Plex Mono) only
   reads as branding if the mono is visible. Promote the identity
   eyebrows/labels from muted grey to the accent purple, with a touch
   more weight, so the mono + accent become the studio's signature.
   Lives in shared studio.css → applies across every page. */
.hero-eyebrow,
.work-header-label,
.view-all-label,
.about-experience-label,
.about-values-label,
.about-services-label,
.section-head-label,
.bento-header-label,
.page-hero-label {
  color: var(--accent-text);
  font-weight: 500;
}

/* ── Works Page ─────────────────────────────────────────────────
   Client work as an editorial grid: clean image, name + year, field, the
   case's one-line thesis when it has one. Same language as the home cards,
   no overlays and no decoration. Filter = quiet pills. */
.filter-bar {
  display: flex; align-items: center; gap: 0.5rem;
  max-width: 1500px; margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) 1.75rem;
  overflow-x: auto; scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-btn {
  flex-shrink: 0; min-height: 40px; display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); background: none; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; padding: 0.5rem 1.1rem;
  transition: color 200ms var(--ease-quart), border-color 200ms var(--ease-quart), background 200ms var(--ease-quart);
}
.filter-btn:hover { color: var(--fg); border-color: var(--muted); }
.filter-btn.is-active { color: var(--bg); background: var(--fg); border-color: var(--fg); }

.works-list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 3.4vw, 3.25rem) clamp(1.1rem, 2vw, 1.75rem);
  max-width: 1500px; margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 7vw, 6rem);
}
.works-card { display: block; cursor: pointer; min-width: 0; }
.works-card.is-hidden { display: none; }

.works-card-img {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 6px; background: var(--surface);
}
.works-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 900ms var(--ease-expo);
}
.works-card:hover .works-card-img img, .works-card:focus-visible .works-card-img img { transform: scale(1.04); }
.works-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }

.works-card-info {
  position: relative; display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.95rem 0 1.1rem; border-bottom: 1px solid var(--border);
}
.works-card-info::after {                 /* brand gradient draws in on hover */
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--grad-line, var(--accent)); transform: scaleX(0); transform-origin: left;
  transition: transform 700ms var(--ease-expo);
}
.works-card:hover .works-card-info::after, .works-card:focus-visible .works-card-info::after { transform: scaleX(1); }

.works-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.works-card-title {
  font-family: var(--font-display); font-weight: 700; margin: 0;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem); letter-spacing: -0.025em; line-height: 1.12;
  transition: color 250ms var(--ease-quart);
}
.works-card:hover .works-card-title { color: var(--accent-text); }
.works-card-year, .works-card-category {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.works-card-year { flex-shrink: 0; }
.works-card-thesis {
  margin: 0.4rem 0 0; font-size: 0.92rem; line-height: 1.45; max-width: 46ch;
  color: color-mix(in srgb, var(--fg) 72%, transparent);
}
.works-card-case {
  margin-top: 0.55rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-text);
}

@media (max-width: 1100px) { .works-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .works-list { grid-template-columns: 1fr; } .filter-bar { padding-bottom: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .works-card-img img, .works-card-info::after { transition: none; } .works-card:hover .works-card-img img { transform: none; } }

/* ── About Page ─────────────────────────────────────────────── */
.about-intro {
  border-bottom: 1px solid var(--border);
  padding: clamp(3.5rem, 8vh, 5rem) 2.5rem 6rem;
}

.about-statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.8vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--fg);
  max-width: 26ch;
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
}

.about-split {
  display: grid;
  grid-template-columns: 5fr 6fr;
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  max-width: 1280px;
  margin: 0 auto;
}

.about-split-img {
  overflow: hidden;
  min-height: 520px;
  max-height: none;
}
.about-split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-expo);
}


.about-split-content {
  padding: 5rem 4.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
  border-left: 1px solid var(--border);
}


.about-bio-large {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--fg);
  max-width: 42ch;
}

.about-bio-body {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.8;
  color: var(--muted);
  max-width: 52ch;
}

/* ── Timeline ─────────────────────────────────────────────── */

.about-experience {
  border-bottom: 1px solid var(--border);
  max-width: none;
}

.experience-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.about-experience-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 1.25rem 0;
  margin: 0 2.5rem;
  border-bottom: 1px solid var(--border);
}

.timeline {
  display: flex;
  flex-direction: column;
  padding: 0 2.5rem 0;
  width: 100%;
}

.timeline-entry {
  display: grid;
  grid-template-columns: 13rem 28px 1fr;
  gap: 0;
  position: relative;
  min-height: 4rem;
  border-bottom: 1px solid var(--border);
  transition: background 200ms ease;
}

.timeline-entry:last-child { border-bottom: none; }

.timeline-entry:hover {
  background: rgba(232, 80, 2, 0.02);
}

.timeline-entry.is-current {
  background: rgba(25, 195, 125, 0.03);
}

.timeline-left {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.3rem;
  padding: 2.25rem 2rem 2.25rem 0;
}

.timeline-year {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fg);
  text-align: right;
  white-space: nowrap;
  line-height: 1;
}

.timeline-entry.is-current .timeline-year {
  color: #19c37d;
}

.timeline-location {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: right;
  text-transform: uppercase;
}

.timeline-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-top: 2.6rem;
}

.timeline-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  flex-shrink: 0;
  z-index: 1;
  transition: border-color 220ms ease;
}

.timeline-entry:hover .timeline-dot { border-color: var(--accent); }

.timeline-dot--live {
  background: #19c37d;
  border-color: #19c37d;
  animation: pulse-dot 2s ease-out infinite;
}

.timeline-line {
  width: 1px;
  flex: 1;
  background: var(--border);
  margin-top: 4px;
}

.timeline-entry:last-child .timeline-line { display: none; }

.timeline-right {
  padding: 2.25rem 0 2.25rem 2rem;
}

.timeline-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  margin-bottom: 0.6rem;
}

.timeline-tag--career {
  color: #19c37d;
  border: 1px solid rgba(25, 195, 125, 0.35);
  background: rgba(25, 195, 125, 0.06);
}

.timeline-tag--work {
  color: var(--fg);
  border: 1px solid var(--border);
}

.timeline-tag--education {
  color: var(--muted);
  border: 1px solid var(--border);
}

.timeline-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.timeline-entry.is-current .timeline-title { color: var(--fg); }

.timeline-desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 54ch;
}

/* ── Values ───────────────────────────────────────────────── */

.about-values {
  border-bottom: 1px solid var(--border);
  max-width: none;
}

.values-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.about-values-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 1.25rem 0;
  margin: 0 2.5rem;
  border-bottom: 1px solid var(--border);
}

.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.value-item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 5rem 3.5rem;
  border-bottom: 1px solid var(--border);
  min-height: 380px;
}

.value-item:nth-child(odd)  { border-right: 1px solid var(--border); }
.value-item:nth-child(3),
.value-item:nth-child(4)    { border-bottom: none; }

.value-num {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  color: var(--accent-text);
  opacity: 0.7;
}

.value-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 2.8vw, 3rem);
  letter-spacing: -0.03em;
  color: var(--fg);
  line-height: 1.0;
  max-width: 18ch;
}

.value-desc {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.8;
  color: var(--muted);
  max-width: 42ch;
  margin-top: auto;
}

/* ── Services ─────────────────────────────────────────────── */

.about-services {
  border-bottom: 1px solid var(--border);
  max-width: none;
}

.services-inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 2.5rem);
}

.about-services-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding: 0;
  border: 0;
}

/* Four services as rows: number · name · what it is + what it includes.
   Same editorial language as the home (no columns, no bullet stacks). */
.services-cols { display: block; border-top: 1px solid var(--border); }

.service-col {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.4fr);
  column-gap: clamp(1.25rem, 3vw, 3rem);
  align-items: baseline;
  padding: clamp(1.5rem, 2.6vw, 2.25rem) 0;
  border-bottom: 1px solid var(--border);
  transition: padding 500ms var(--ease-expo);
}
.service-col:hover { padding-left: 0.75rem; }

.service-num {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--accent-text);
}

.service-name {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  letter-spacing: -0.035em;
  color: var(--fg);
  line-height: 1.05;
  transition: color 220ms ease;
}
.service-col:hover .service-name { color: var(--accent-text); }

.service-tagline {
  grid-column: 3;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--fg);
  margin: 0;
  max-width: 52ch;
}

.service-outputs {
  grid-column: 3;
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.service-outputs li {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  transition: color 200ms ease, border-color 200ms ease;
}
.service-col:hover .service-outputs li { color: var(--fg); border-color: var(--muted); }

/* ── Responsive: about page ───────────────────────────────── */

@media (max-width: 900px) {
  .timeline-entry { grid-template-columns: 24px 1fr; }
  .timeline-center { grid-column: 1; grid-row: 1 / span 2; }
  .timeline-left { grid-column: 2; grid-row: 1; align-items: flex-start; flex-direction: row; gap: 0.75rem; padding: 1.5rem 0 0 1.5rem; }
  .timeline-left .timeline-year { height: auto; background: none; opacity: 1; }
  .timeline-right { grid-column: 2; grid-row: 2; padding: 0.5rem 0 1.75rem 1.5rem; }
  .values-grid { grid-template-columns: 1fr; }
  .value-item:nth-child(odd) { border-right: none; }
  .value-item:nth-child(3),
  .value-item:nth-child(4) { border-bottom: 1px solid var(--border); }
  .value-item:last-child { border-bottom: none; }
  .about-split { grid-template-columns: 1fr; }
  .about-split-img { min-height: 45vw; }
  .about-split-content { border-left: none; border-top: 1px solid var(--border); padding: 2.5rem 2rem; }
}

/* ── Blog Page ──────────────────────────────────────────────── */
.blog-featured {
  border-bottom: 1px solid var(--border);
}

.blog-featured-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 55vh;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: background 200ms ease;
}
.blog-featured-card:hover { background: var(--surface); }

.blog-featured-img {
  overflow: hidden;
}
.blog-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-expo);
}
.blog-featured-card:hover .blog-featured-img img { transform: scale(1.04); }

.blog-featured-content {
  padding: 3.5rem 3rem;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.25rem;
}

.blog-featured-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.blog-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  border: 1px solid var(--accent);
  padding: 0.2rem 0.5rem;
}

.blog-date {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.blog-featured-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.blog-featured-excerpt {
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.7;
  color: rgba(242, 240, 236, 0.65);
  max-width: 46ch;
}

.blog-read-more {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 250ms ease, transform 250ms ease;
}
.blog-featured-card:hover .blog-read-more {
  opacity: 1;
  transform: none;
}

.blog-list {
  display: flex;
  flex-direction: column;
}

.blog-post-row {
  display: grid;
  grid-template-columns: 3rem 14rem 1fr auto;
  align-items: center;
  gap: 0 2rem;
  padding: 1.75rem 2rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 200ms ease;
}
.blog-post-row:hover { background: var(--surface); }

.blog-post-num {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  color: var(--muted);
  align-self: center;
}

.blog-post-img {
  width: 14rem;
  height: 9rem;
  overflow: hidden;
  flex-shrink: 0;
}
.blog-post-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease-expo);
}
.blog-post-row:hover .blog-post-img img { transform: scale(1.06); }

.blog-post-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.blog-post-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.blog-post-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.blog-post-excerpt {
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(242, 240, 236, 0.55);
  max-width: 56ch;
  margin-top: 0.25rem;
}

.blog-post-arrow {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 200ms ease, transform 200ms ease, color 200ms ease;
}
.blog-post-row:hover .blog-post-arrow {
  opacity: 1;
  transform: none;
  color: var(--accent-text);
}

/* ── Inner Pages Responsive ─────────────────────────────────── */
@media (max-width: 1024px) {
  .about-exp-row { grid-template-columns: 12rem 14rem 1fr; }

  .blog-post-row {
    grid-template-columns: 2.5rem 12rem 1fr auto;
  }
  .blog-post-img { width: 12rem; height: 8rem; }
}

@media (max-width: 768px) {
  .page-hero { padding: 7rem 1.25rem 2.5rem; }
  .page-hero-meta { gap: 1.5rem; }

  .about-intro-inner { grid-template-columns: 1fr; gap: 0.75rem; }
  .about-split { grid-template-columns: 1fr; }
  .about-split-img { max-height: 55vw; }
  .about-split-content { padding: 2.5rem 1.25rem; border-left: none; border-top: 1px solid var(--border); }

  .about-exp-row { grid-template-columns: 1fr 1fr; gap: 1rem 2rem; padding: 1.5rem 1.25rem; }
  .about-exp-desc { grid-column: 1 / 3; grid-row: auto; }

  .service-col { grid-template-columns: 2.25rem minmax(0, 1fr); row-gap: 0.6rem; }
  .service-tagline, .service-outputs { grid-column: 2; }

  .blog-featured-card { grid-template-columns: 1fr; }
  .blog-featured-img { height: 55vw; }
  .blog-featured-content { padding: 2.5rem 1.25rem; border-left: none; border-top: 1px solid var(--border); }
  .blog-read-more { opacity: 1; transform: none; }

  .blog-post-row { grid-template-columns: 1fr; gap: 1rem; padding: 1.25rem; }
  .blog-post-num { display: none; }
  .blog-post-img { width: 100%; height: 48vw; }
  .blog-post-arrow { display: none; }
}

@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; }
  .about-exp-row { grid-template-columns: 1fr; }
  .about-exp-desc { grid-column: 1; }
  .page-hero { padding: 6rem 1rem 2rem; }
}

/* ── Project Modal (Pentagram-style) ────────────────────────── */
.project-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform 560ms var(--ease-expo);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.project-modal.is-open {
  transform: translateX(0);
}

/* Fixed header */
.modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 56px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  z-index: 10;
}

.modal-header-left {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
}

.modal-counter { color: var(--muted); }
.modal-counter-sep { color: var(--border); }

.modal-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.modal-nav-btn {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color 180ms var(--ease-quart);
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-nav-btn:hover { color: var(--fg); }
.modal-nav-btn:active { color: var(--accent-text); }
.modal-nav-btn.is-disabled { opacity: 0.2; pointer-events: none; }

.modal-close {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  transition: background 200ms var(--ease-quart), color 200ms var(--ease-quart), border-color 200ms var(--ease-quart);
  min-height: 44px;
}
.modal-close span:last-child { color: var(--accent-text); transition: color 200ms var(--ease-quart); }
.modal-close:hover {
  background: rgba(255, 0, 0, 0.08);
  border-color: rgba(255, 0, 0, 0.4);
  color: var(--fg);
}
.modal-close:hover span:last-child { color: var(--accent-text); }
.modal-close:active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  transform: scale(0.98);
}
.modal-close:active span:last-child { color: var(--bg); }

/* Scroll container */
.modal-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Hero image */
.modal-hero-img {
  width: 100%;
  height: 72vh;
  overflow: hidden;
}
.modal-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Title block */
.modal-title-block {
  padding: 2.5rem 2rem 2rem;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 10vw, 10rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 1.5rem;
}

.modal-title-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.modal-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--fg);
  padding: 0.3rem 0.75rem;
  color: var(--fg);
}

.modal-year {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* About — Always expanded */
.modal-about {
  border-bottom: 1px solid var(--border);
}

.modal-about-header {
  display: flex;
  align-items: center;
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--border);
}

.modal-about-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.modal-about-body { display: block; }

/* About split: 2-column layout */
.modal-about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.modal-about-left {
  padding: 2.5rem 2rem 3rem;
  border-right: 1px solid var(--border);
}

.modal-about-right {
  padding: 2.5rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.modal-about-focus {
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: clamp(0.92rem, 1.2vw, 1rem) !important;
  color: rgba(242, 240, 236, 0.72) !important;
  font-style: italic;
}

.modal-about-focus::before {
  content: 'FOCUS — ';
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--accent-text);
  margin-right: 0.4rem;
}

.modal-pull-quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg);
  position: relative;
}
.modal-pull-quote::before {
  content: '\201C';
  color: var(--accent-text);
  font-size: 1.15em;
  line-height: 0;
  vertical-align: -0.15em;
  margin-right: 0.04em;
}
.modal-pull-quote::after {
  content: '\201D';
  color: var(--accent-text);
  font-size: 1.15em;
  line-height: 0;
  vertical-align: -0.15em;
  margin-left: 0.04em;
}

.modal-about-right p {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.78;
  color: var(--fg);
  max-width: 55ch;
}

.modal-about-lorem {
  margin-top: 1.25rem;
  color: var(--muted) !important;
  font-size: clamp(0.875rem, 1.1vw, 0.95rem) !important;
}

/* Text section between images */
.modal-text-section {
  border-bottom: 1px solid var(--border);
}

.modal-text-section-inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  padding: 2.5rem 2rem;
}

.modal-text-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  padding-top: 0.3rem;
}

.modal-text-body p {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.78;
  color: var(--fg);
  max-width: 60ch;
}
.modal-text-body p + p { margin-top: 1rem; }

/* Asymmetric image pair */
.modal-gallery-pair {
  display: grid;
  grid-template-columns: 3fr 2fr;
  border-bottom: 1px solid var(--border);
}

.modal-gallery-pair-large {
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.modal-gallery-pair-small {
  overflow: hidden;
}

.modal-gallery-pair-large img,
.modal-gallery-pair-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 400px;
  transition: transform 700ms var(--ease-expo);
}
.modal-gallery-pair-large:hover img,
.modal-gallery-pair-small:hover img { transform: scale(1.04); }

/* ── Project Details (bullet sections) ──────────────────────── */
.modal-details {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, rgba(255,255,255,0.015), transparent);
}

.modal-details-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 4.5rem 2rem 4rem;
}

.modal-details-header {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.modal-details-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--accent-text);
}

.modal-details-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
}

/* 4-column grid for bullet blocks */
.modal-details-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 2rem;
  margin-bottom: 4rem;
}

.modal-detail-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-detail-title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.modal-detail-marker {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--accent-text);
}

.modal-detail-text {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(242, 240, 236, 0.72);
}

.modal-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.modal-detail-item {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(242, 240, 236, 0.78);
  padding-left: 1.1rem;
  position: relative;
}

.modal-detail-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 1px;
  background: var(--accent);
}

/* Project specs row */
.modal-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 3rem;
}

.modal-spec {
  padding: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-right: 1px solid var(--border);
  padding-left: 1.5rem;
}
.modal-spec:first-child { padding-left: 0; }
.modal-spec:last-child { border-right: none; }

.modal-spec-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.modal-spec-value {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--fg);
  letter-spacing: -0.005em;
}

/* Brand System: palette + typography */
.modal-system {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.modal-system-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-system-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.modal-palette {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

.modal-swatch {
  aspect-ratio: 1 / 1;

  border: 1px solid var(--border);
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0.6rem;
  transition: transform 250ms var(--ease-expo), box-shadow 250ms var(--ease-quart);
  cursor: pointer;
  overflow: hidden;
}
.modal-swatch:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.modal-swatch:active {
  transform: translateY(-1px) scale(1.0);
}

/* "Copied!" feedback */
.modal-swatch::after {
  content: 'CLICK TO COPY';
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.4);
  padding: 0.2rem 0.4rem;

  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms var(--ease-expo);
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.modal-swatch:hover::after {
  opacity: 1;
  transform: translateY(0);
}
.modal-swatch.is-copied::after {
  content: '✓ COPIED';
  color: #19c37d;
  background: rgba(0, 0, 0, 0.6);
  opacity: 1;
  transform: translateY(0);
}

.modal-swatch-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.45);
  padding: 0.25rem 0.4rem;

  backdrop-filter: blur(4px);
}

.modal-typography {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.modal-typo-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--fg);
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border);

  display: inline-block;
  width: fit-content;
  transition: border-color 200ms var(--ease-quart), color 200ms var(--ease-quart);
}
.modal-typo-tag:hover {
  border-color: rgba(255, 0, 0, 0.4);
  color: var(--accent-text);
}

/* Responsive — Project Details */
@media (max-width: 1100px) {
  .modal-details-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .modal-specs { grid-template-columns: repeat(2, 1fr); }
  .modal-spec:nth-child(2) { border-right: none; }
  .modal-spec:nth-child(3), .modal-spec:nth-child(4) {
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 768px) {
  .modal-details-inner { padding: 3rem 1.25rem 2.5rem; }
  .modal-details-header { margin-bottom: 2rem; }
  .modal-details-grid { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2.5rem; }
  .modal-specs { grid-template-columns: 1fr; }
  .modal-spec {
    padding: 1.25rem 0 1.25rem 0 !important;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .modal-spec:last-child { border-bottom: none; }
  .modal-system { grid-template-columns: 1fr; gap: 2rem; }
  .modal-palette { grid-template-columns: repeat(4, 1fr); }
}

/* Full-width callout quote */
.modal-callout {
  padding: 5rem 2rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: center;
}

.modal-callout-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-align: center;
  max-width: 22ch;
  position: relative;
}
.modal-callout-text::before { content: '\201C'; color: var(--accent-text); margin-right: 0.05em; }
.modal-callout-text::after  { content: '\201D'; color: var(--accent-text); margin-left: 0.05em; }

/* Gallery images */
.modal-gallery-full {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.modal-gallery-full img {
  width: 100%;
  height: 60vh;
  object-fit: cover;
  display: block;
  transition: transform 800ms var(--ease-expo);
}
.modal-gallery-full:hover img { transform: scale(1.03); }

/* Metadata grid */
.modal-metadata {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
}

.modal-meta-item {
  padding: 2rem;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.modal-meta-item:last-child { border-right: none; }

.modal-meta-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.modal-meta-value {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  font-weight: 400;
  color: var(--fg);
  line-height: 1.4;
}

/* Next project */
.modal-next-section {
  background: var(--fg);
  padding: 2.5rem 2rem 3rem;
}

.modal-next-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(11, 11, 11, 0.4);
  margin-bottom: 1.5rem;
}

.modal-next-card {
  display: flex;
  align-items: center;
  gap: 2rem;
  cursor: pointer;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(11, 11, 11, 0.12);
  transition: opacity 200ms ease;
}
.modal-next-card:hover { opacity: 0.7; }

.modal-next-img {
  width: 110px;
  height: 74px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(240, 237, 232, 0.15);
}
.modal-next-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal-next-info { flex: 1; }

.modal-next-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--bg);
  margin-bottom: 0.75rem;
}

.modal-next-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.modal-next-tag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(11, 11, 11, 0.25);
  padding: 0.25rem 0.6rem;
  color: rgba(11, 11, 11, 0.55);
}

.modal-next-arrow {
  font-size: 1.75rem;
  color: var(--bg);
  opacity: 0.35;
  flex-shrink: 0;
}

/* Modal responsive */
@media (max-width: 900px) {
  .modal-header { padding: 0 1.5rem; }
  .modal-nav-btn { display: none; }
}

@media (max-width: 768px) {
  .modal-header { padding: 0 1.25rem; height: 52px; }
  .modal-hero-img { height: 45vh; }
  .modal-title-block { padding: 1.75rem 1.25rem 1.5rem; }
  .modal-about-toggle { padding: 1rem 1.25rem; }
  .modal-about-split { grid-template-columns: 1fr; }
  .modal-about-left { border-right: none; border-bottom: 1px solid var(--border); }
  .modal-about-left,
  .modal-about-right { padding: 1.75rem 1.25rem; }
  .modal-text-section-inner { grid-template-columns: 1fr; gap: 1rem; padding: 1.75rem 1.25rem; }
  .modal-gallery-full img { height: 40vh; }
  .modal-gallery-pair { grid-template-columns: 1fr; }
  .modal-gallery-pair-large { border-right: none; border-bottom: 1px solid var(--border); }
  .modal-gallery-pair-large img,
  .modal-gallery-pair-small img { min-height: 260px; }
  .modal-callout { padding: 3rem 1.25rem; }
  .modal-callout-text { font-size: clamp(1.75rem, 8vw, 3rem); }
  .modal-metadata { grid-template-columns: repeat(2, 1fr); }
  .modal-meta-item { padding: 1.25rem; border-bottom: 1px solid var(--border); }
  .modal-meta-item:nth-child(2n) { border-right: none; }
  .modal-next-section { padding: 2rem 1.25rem 2.5rem; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal-section,
  [data-reveal],
  .hero-line[data-reveal] {
    transition: opacity 200ms ease !important;
    transform: none !important;
    clip-path: none !important;
  }
  .hero-scroll { animation: none; }
  .work-card:hover .card-img img { transform: none; }
  .modal-panel { transition: none; }
  .hero-marquee-track,
  .trusted-marquee-track { animation-duration: 0s !important; }
}

/* ── Brand voice (cascade-safe override) ────────────────────────
   Placed at end-of-file so it wins over per-section label rules.
   Identity eyebrows/labels in accent mono = the studio signature. */
.hero-eyebrow,
.work-header-label,
.view-all-label,
.about-experience-label,
.about-values-label,
.about-services-label,
.page-hero-label {
  color: var(--accent-text);
  font-weight: 500;
}

/* About portrait: one photo, no effects. Swap img/portrait3.jpg to change it. */
.about-split-img--photo img { object-position: 50% 30%; }
@media (max-width: 768px) {
  .about-split-img--photo { min-height: 0; max-height: none; aspect-ratio: 1 / 1; }
}

/* ══════════════════════════════════════════════════════════════
   WORK — CURRENT vs ARCHIVE
   Current work leads the page; the client archive sits below it,
   deliberately quieter so it never competes with what's live now.
   ══════════════════════════════════════════════════════════════ */
.work-current {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6, 24px) var(--space-9, 64px);
}

.work-current-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4, 16px) var(--space-6, 24px);
  padding-bottom: var(--space-5, 20px);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-7, 32px);
}

.work-current-label,
.work-archive-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-weight: 500;
  margin: 0;
}

.work-current-sub,
.work-archive-sub {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 56ch;
}

.work-current-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-6, 24px);
}

.work-current-card {
  position: relative;
  display: block;
  padding: var(--space-7, 32px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 4px);
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  transition: border-color var(--dur-base, 240ms) var(--ease-quart),
              transform var(--dur-base, 240ms) var(--ease-quart);
}

.work-current-card:hover,
.work-current-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.work-current-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.work-current-name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: var(--space-3, 12px) 0 var(--space-2, 8px);
}

.work-current-jp {
  font-size: 0.42em;
  letter-spacing: 0.08em;
  color: var(--accent-text);
  vertical-align: middle;
}

.work-current-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-weight: 500;
}

.work-current-desc {
  margin: var(--space-4, 16px) 0 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 48ch;
}

.work-current-arrow {
  position: absolute;
  top: var(--space-7, 32px);
  right: var(--space-7, 32px);
  font-size: 1.1rem;
  color: var(--muted);
  transition: transform var(--dur-base, 240ms) var(--ease-quart), color var(--dur-base, 240ms) var(--ease-quart);
}

.work-current-card:hover .work-current-arrow {
  color: var(--accent-text);
  transform: translateX(4px);
}

.work-archive-head {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6, 24px) var(--space-5, 20px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4, 16px) var(--space-6, 24px);
}

@media (max-width: 768px) {
  .work-current { padding-bottom: var(--space-8, 48px); }
  .work-current-card { padding: var(--space-6, 24px); }
  .work-current-arrow { top: var(--space-6, 24px); right: var(--space-6, 24px); }
}

/* ══════════════════════════════════════════════════════════════
   SUSHIKAI — project page
   Editorial blocks, mono labels, thin rules. No imagery yet:
   the empty state is deliberate, not a missing-asset slot.
   ══════════════════════════════════════════════════════════════ */
.sushikai-jp {
  font-family: var(--font-mono);
  font-size: clamp(0.9rem, 1.6vw, 1.15rem);
  letter-spacing: 0.1em;
  color: var(--accent-text);
  margin: var(--space-3, 12px) 0 0;
}

.sushikai-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-8, 48px) var(--space-6, 24px) var(--space-10, 80px);
}

.sk-block {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr);
  gap: var(--space-5, 20px) var(--space-8, 48px);
  padding: var(--space-8, 48px) 0;
  border-top: 1px solid var(--border);
}

.sk-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-weight: 500;
  margin: 0;
}

.sk-body {
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  max-width: 62ch;
  color: var(--fg);
}

.sk-grid {
  grid-column: 2;
  list-style: none;
  margin: var(--space-6, 24px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.sk-grid li {
  background: var(--bg);
  padding: var(--space-5, 20px) var(--space-4, 16px);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
}

.sk-chain {
  grid-column: 2;
  list-style: none;
  margin: var(--space-6, 24px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px) 0;
  align-items: center;
}

.sk-chain li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
}

.sk-chain li + li::before {
  content: '→';
  margin: 0 var(--space-3, 12px);
  color: var(--accent-text);
}

.sk-empty {
  border-bottom: 1px solid var(--border);
}

.sk-empty-title {
  grid-column: 1;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.sk-empty-body {
  grid-column: 2;
  margin: 0;
  max-width: 62ch;
  line-height: 1.7;
  color: var(--muted);
}

@media (max-width: 860px) {
  .sk-block { grid-template-columns: 1fr; gap: var(--space-4, 16px); padding: var(--space-7, 32px) 0; }
  .sk-grid, .sk-chain, .sk-empty-body, .sk-empty-title { grid-column: 1; }
}

/* About: framing notes (timeline + principles) */
.timeline-note, .values-note {
  font-size: 0.9rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--fg) 68%, transparent);
  max-width: 60ch;
  margin: 1rem 2.5rem 0;
}
.timeline-note { margin: 1.25rem 0 2rem; }

/* Surfaces that stay dark in light theme keep the light purple for text */
footer { --accent-text: #F16001; }

/* Light theme: green "current/active" text that passes AA on white */
:root:not([data-theme="dark"]) .timeline-tag--career,
:root:not([data-theme="dark"]) .timeline-entry.is-current .timeline-year { color: #0B7A4B; }

/* Light theme: value numbers at full opacity so the AA purple stays AA */
:root:not([data-theme="dark"]) .value-num { opacity: 1; }

/* ── Agency sections (home): services + how we'd work together ── */
.agency-section { padding: clamp(4rem, 9vw, 8rem) 2.5rem; border-top: 1px solid var(--border); }
.agency-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 46rem; }
.agency-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--border); }
.agency-grid--3 { grid-template-columns: repeat(3, 1fr); }
.agency-card { padding: 1.75rem 1.5rem 2rem 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.75rem; }
.agency-card + .agency-card { padding-left: 1.5rem; border-left: 1px solid var(--border); }
.agency-num { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; color: var(--accent-text); }
.agency-card h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--fg); margin: 0; }
.agency-card p { font-size: 0.95rem; line-height: 1.6; color: var(--muted); margin: 0; max-width: 34ch; }
.agency-cta { display: inline-block; margin-top: 2.5rem; padding: 1rem 1.75rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg); text-decoration: none; border: 1px solid var(--fg); transition: background 250ms var(--ease-quart), color 250ms var(--ease-quart); }
.agency-cta:hover, .agency-cta:focus-visible { background: var(--fg); color: var(--bg); }
@media (max-width: 960px) {
  .agency-grid, .agency-grid--3 { grid-template-columns: 1fr 1fr; }
  .agency-card:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 768px) {
  .agency-section { padding: 3.5rem 1.25rem; }
  .agency-grid, .agency-grid--3 { grid-template-columns: 1fr; }
  .agency-card, .agency-card + .agency-card { padding: 1.5rem 0; border-left: 0; }
}


/* ── Branding gradient: used only where something needs to stand out ── */
.hero-line--accent {
  background: var(--grad-text);
  background-size: 150% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: gradSheen 9s ease-in-out infinite alternate;
}
@keyframes gradSheen { to { background-position: 100% 0; } }
.scroll-progress { background: var(--grad-line); }
.trusted-strip { border-top: 0; border-bottom: 0; position: relative; }
.trusted-strip::before, .trusted-strip::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--grad-line); opacity: .55; }
.trusted-strip::before { top: 0; } .trusted-strip::after { bottom: 0; }
@media (prefers-reduced-motion: reduce) { .hero-line--accent { animation: none; } }

@media (max-width: 900px) {
  .service-col { grid-template-columns: 2.25rem minmax(0, 1fr); row-gap: 0.6rem; }
  .service-tagline, .service-outputs { grid-column: 2; }
}