/* ══════════════════════════════════════════════════════════════════════════
   Dr Shahaji Shovakar — portfolio
   Modernist design system: flat surfaces, hairline rules, no radii, Archivo
   throughout, one grey accent carrying every emphasis.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --color-hairline: color-mix(in srgb, #201e1d 18%, transparent);

  /* Brand grey. --color-accent is the one value that sets the identity; the
     rest of the ramp is derived from it and kept in step by hand so the tints
     stay on the same hue. Accent on --color-bg is 4.75:1 — AA for body copy. */
  --color-accent: #6b7280;
  --color-accent-100: #f3f4f6;
  --color-accent-200: #e5e7eb;
  --color-accent-300: #d1d5db;
  --color-accent-400: #9ca3af;
  --color-accent-500: #6b7280;
  --color-accent-600: #4b5563;
  --color-accent-700: #374151;
  --color-accent-800: #1f2937;
  --color-accent-900: #111827;

  --font-heading: "Archivo", system-ui, -apple-system, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  --shell: 1560px;
  --gutter: clamp(20px, 4vw, 56px);
  --header-h: 62px;

  /* One easing for everything that travels; one for things that only fade.
     --ease-expo is the long, decelerating curve used for the big set pieces
     (curtain, image unveils) where the motion should feel weighted. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ── Reset & base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
p { margin: 0 0 var(--space-3); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-700); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

figcaption {
  font-size: 11px;
  margin-top: var(--space-1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.muted, .text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.grayscale img { filter: grayscale(1) contrast(1.08); }

.hr {
  height: 2px;
  border: 0;
  margin: var(--space-4) 0;
  background: var(--color-divider);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: 12px 18px;
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus-visible { left: 12px; top: 12px; color: var(--color-bg); }

/* ── Layout primitives ──────────────────────────────────────────────────── */
.shell { max-width: var(--shell); margin: 0 auto; }
.pad { padding-left: var(--gutter); padding-right: var(--gutter); }

.section {
  padding-top: clamp(64px, 11vh, 140px);
  padding-bottom: clamp(64px, 11vh, 140px);
}
.section.bordered { border-top: 2px solid var(--color-divider); }
.section.surface { background: var(--color-surface); }

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
}
/* Grid items default to min-width:auto, which lets a wide nested grid push the
   track past the viewport. Every direct child opts out. */
.split-layout > *,
.hero__grid > * { min-width: 0; }

.section-index { position: sticky; top: calc(var(--header-h) + 30px); align-self: start; }
.section-index__num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.section-index .hr { margin: 8px 0 10px; }
.section-index__label {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.12;
}
.section-index__note {
  font-size: 12px;
  margin-top: 14px;
  max-width: 26ch;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 4vh, 48px);
}
.section-head__num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 4vh, 40px);
  font-size: clamp(10px, 2.6vw, 12px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
}
.eyebrow__rule {
  width: 44px;
  height: 2px;
  flex: none;
  display: block;
  background: var(--color-accent);
  transform-origin: left center;
}
.eyebrow--invert .eyebrow__rule { background: currentColor; }
.eyebrow--invert .eyebrow__rule--accent { background: var(--color-accent); }

.block { margin-top: clamp(32px, 6vh, 72px); }

.minor {
  margin: 0 0 var(--space-4);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-heading);
  font-weight: 800;
}

.footnote {
  font-size: 11px;
  margin-top: 12px;
  max-width: 70ch;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.footnote--lede { font-size: 13px; margin: 0 0 var(--space-8); max-width: 66ch; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-2) 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text);
}
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }

/* ══════════════════════════════════════════════════════════════════════════
   MOTION — base states
   Every entrance state is scoped to .js so the page renders complete and
   readable when JavaScript is unavailable, and is neutralised wholesale
   under .reduced-motion further down.
   ══════════════════════════════════════════════════════════════════════════ */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.85s var(--ease-out),
    transform 0.95s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Split text: each line is a mask, each unit slides up out of it. */
.split-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.split-unit {
  display: inline-block;
  white-space: pre;
  will-change: transform;
}
.js .split-unit {
  transform: translate3d(0, 110%, 0);
  transition: transform 1.05s var(--ease-out);
  transition-delay: calc(var(--stagger, 0) * var(--stagger-step, 26ms) + var(--split-delay, 0ms));
}
.js [data-split].is-visible .split-unit { transform: none; }

/* ── Intro curtain ──────────────────────────────────────────────────────── */
/* Opt-in, not opt-out. Only JavaScript can lift this curtain, so it must never
   render unless JavaScript is running - otherwise a no-JS visitor gets a black
   screen over the whole site. */
.intro { display: none; }
.js .intro {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: var(--color-text);
  transition: transform 1.05s var(--ease-expo), visibility 1.05s;
}
.intro.is-done {
  transform: translate3d(0, -101%, 0);
  visibility: hidden;
}
.intro__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(13px, 2.4vw, 16px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.intro__mark {
  width: 14px;
  height: 14px;
  flex: none;
  display: block;
  background: var(--color-accent);
  animation: intro-mark 1.5s var(--ease-out) infinite;
}
/* The name rises out of a mask rather than fading, matching how every heading
   on the page arrives. */
.intro__text { display: block; overflow: hidden; padding-bottom: 0.12em; }
.intro__text > span {
  display: block;
  transform: translate3d(0, 110%, 0);
  animation: intro-rise 0.9s var(--ease-expo) 0.1s forwards;
}
/* A loading rule along the bottom edge: gives the wait a visible shape. */
.intro__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: color-mix(in srgb, var(--color-bg) 18%, transparent);
  overflow: hidden;
}
.intro__bar::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: var(--color-accent);
  /* scaleX rather than width: keeps the fill on the compositor. */
  transform: scaleX(0);
  transform-origin: left center;
  animation: intro-load 1.15s var(--ease-soft) forwards;
}
@keyframes intro-mark {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.75) rotate(90deg); }
}
@keyframes intro-rise { to { transform: none; } }
@keyframes intro-load { to { transform: scaleX(1); } }

/* Hairlines draw in from their leading edge. */
.js [data-rule] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--ease-expo);
}
.js [data-rule].is-visible { transform: none; }
.reduced-motion .intro { display: none !important; }

/* ── Cursor ─────────────────────────────────────────────────────────────── */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 250;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.3s var(--ease-soft);
}
.cursor.is-active { opacity: 1; }
.cursor__dot,
.cursor__ring {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 50%;
  will-change: transform;
}
.cursor__dot {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: #fff;
}
.cursor__ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid #fff;
  transition: width 0.28s var(--ease-out), height 0.28s var(--ease-out),
              margin 0.28s var(--ease-out), opacity 0.28s var(--ease-out);
}
.cursor.is-hovering .cursor__ring {
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  opacity: 0.75;
}
.cursor.is-pressed .cursor__ring {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
}
/* Contextual label: the ring opens up and names the action under the pointer. */
.cursor__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s var(--ease-soft);
}
.cursor.has-label .cursor__label { opacity: 1; }
.cursor.has-label .cursor__ring {
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
}
.cursor.has-label .cursor__dot { opacity: 0; }
.cursor__dot { transition: opacity 0.25s var(--ease-soft); }
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* ── Film grain ─────────────────────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: -120%;
  z-index: 120;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 6s steps(6) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate3d(0, 0, 0); }
  16%  { transform: translate3d(-4%, 3%, 0); }
  33%  { transform: translate3d(3%, -4%, 0); }
  50%  { transform: translate3d(-3%, -3%, 0); }
  66%  { transform: translate3d(4%, 2%, 0); }
  83%  { transform: translate3d(-2%, 4%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ── Scroll progress ────────────────────────────────────────────────────── */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
  height: 3px;
  width: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 140;
  background: color-mix(in srgb, var(--color-bg) 62%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 2px solid var(--color-divider);
  transition: transform 0.5s var(--ease-out), background 0.4s var(--ease-soft);
}
/* Retreats when scrolling down past the fold, returns on any upward scroll. */
.site-header.is-hidden { transform: translate3d(0, -102%, 0); }
.site-header.is-scrolled { background: color-mix(in srgb, var(--color-bg) 88%, transparent); }

.site-header__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-text);
  /* Comfortable thumb target; the text alone is only ~22px tall. */
  min-height: 44px;
}
.brand:hover { color: var(--color-text); }
.brand__mark {
  width: 14px;
  height: 14px;
  flex: none;
  display: block;
  background: var(--color-accent);
  transition: transform 0.5s var(--ease-out);
}
.brand:hover .brand__mark { transform: rotate(90deg) scale(1.15); }
.brand__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
  flex-wrap: wrap;
}
.nav-desktop a[data-navlink] {
  position: relative;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text);
  opacity: 0.55;
  padding-bottom: 2px;
  transition: opacity 0.3s var(--ease-soft), color 0.3s var(--ease-soft);
}
.nav-desktop a[data-navlink]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s var(--ease-out);
}
.nav-desktop a[data-navlink]:hover,
.nav-desktop a[data-navlink].is-active {
  opacity: 1;
  color: var(--color-accent);
}
.nav-desktop a[data-navlink]:hover::after,
.nav-desktop a[data-navlink].is-active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.menu-toggle, .menu-close {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--color-accent);
  color: var(--color-bg);
  border: 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Mobile menu ────────────────────────────────────────────────────────── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 145;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 24px;
  background: color-mix(in srgb, var(--color-text) 92%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-soft), visibility 0.35s;
}
.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.menu-close {
  position: absolute;
  top: 14px;
  right: 20px;
  min-width: 44px;
  justify-content: center;
}
.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-menu__nav a {
  color: var(--color-bg);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(28px, 9vw, 44px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  overflow: hidden;
}
.mobile-menu__nav a.is-accent { color: var(--color-accent-300); }
.mobile-menu__nav a span {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 0.6s var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__nav a span { transform: none; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(1) span { transition-delay: 60ms; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(2) span { transition-delay: 100ms; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(3) span { transition-delay: 140ms; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(4) span { transition-delay: 180ms; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(5) span { transition-delay: 220ms; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(6) span { transition-delay: 260ms; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(7) span { transition-delay: 300ms; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(8) span { transition-delay: 340ms; }

/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  padding-top: clamp(104px, 13vh, 170px);
  /* Reserves the strip the scroll cue sits in, so it never lands on the copy. */
  padding-bottom: clamp(44px, 7vh, 76px);
  /* Faint eight-column measure, the modernist grid made visible. */
  background-image: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-text) 7%, transparent) 0 1px,
    transparent 1px 12.5%
  );
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.95fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}

.hero__title {
  margin: 0;
  /* Three lines of name rather than two, so the type is stepped down to keep
     the hero inside one screen without the surname wrapping on its own. */
  font-size: clamp(30px, 6.2vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.045em;
}
.hero__title .line { display: block; }
.hero__title .accent { color: var(--color-accent); }
.hero__title-row {
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 2vw, 28px);
  flex-wrap: wrap;
}
.hero__badge {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(11px, 2.4vw, 17px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 2px solid var(--color-divider);
  padding: 6px 12px;
  margin-bottom: clamp(6px, 1.4vw, 22px);
  transition: border-color 0.4s var(--ease-soft), background 0.4s var(--ease-soft);
}
.hero__badge:hover { border-color: var(--color-accent); background: var(--color-accent-100); }

.hero__rule { margin: clamp(22px, 4vh, 44px) 0 var(--space-6); }

.hero__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  max-width: 1000px;
}
.hero__blurb {
  font-size: clamp(15px, 1.35vw, 20px);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0;
  text-wrap: pretty;
}
.hero__facts { display: grid; gap: 10px; align-content: start; margin: 0; }
.fact { display: grid; grid-template-columns: 88px 1fr; gap: 10px; font-size: 13px; }
.fact dt {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  padding-top: 2px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.fact dd { margin: 0; font-weight: 600; }

.hero__figure { position: relative; align-self: end; margin: 0; will-change: transform; }
.hero__frame { overflow: hidden; }
.hero__img {
  width: 100%;
  height: clamp(360px, 52vw, 620px);
  object-fit: cover;
  object-position: top center;
}
/* Unveiled by a clip edge travelling up the frame while the picture settles
   back from an overscale - reads as a camera move rather than a fade. The
   scale lives on the <img> and the parallax translate on the <figure>, so the
   two never fight over `transform`. */
.js .hero__frame {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.35s var(--ease-expo) 0.12s;
}
.js.intro-done .hero__frame { clip-path: inset(0 0 0 0); }
.js .hero__img {
  transform: scale(1.16);
  transition: transform 1.9s var(--ease-expo) 0.12s;
}
.js.intro-done .hero__img { transform: none; }

/* Generic unveil for every other photograph on the page.
   The clip goes on the CHILD, never on the observed element itself: Chromium
   computes intersection through the clip chain, so an element clipped to zero
   height reports ratio 0 forever and can never receive the class that would
   un-clip it. */
.js [data-img-reveal] > picture,
.js [data-img-reveal] > img {
  display: block;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.25s var(--ease-expo);
}
.js [data-img-reveal].is-visible > picture,
.js [data-img-reveal].is-visible > img { clip-path: inset(0 0 0 0); }
.js [data-img-reveal] img {
  transform: scale(1.14);
  transition: transform 1.7s var(--ease-expo);
}
.js [data-img-reveal].is-visible img { transform: none; }

.scroll-cue {
  position: absolute;
  left: var(--gutter);
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  transition: opacity 0.4s var(--ease-soft);
}
.scroll-cue__line {
  display: block;
  width: 46px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  animation: cue-slide 2.2s var(--ease-soft) infinite;
}
@keyframes cue-slide {
  0%, 100% { transform: scaleX(0.35); opacity: 0.4; }
  50% { transform: scaleX(1); opacity: 1; }
}
.is-scrolled-past .scroll-cue { opacity: 0; }

/* ── Marquee ────────────────────────────────────────────────────────────── */
.marquee {
  margin-top: clamp(36px, 7vh, 80px);
  border-top: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
  overflow: hidden;
  padding: 12px 0;
}
.marquee__track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
}
.marquee__item {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(16px, 2.2vw, 30px);
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════
   DISPLAY TYPE
   ══════════════════════════════════════════════════════════════════════════ */
.display {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(28px, 4.2vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 20ch;
  margin: 0 0 var(--space-8);
}
.display--wide {
  font-size: clamp(28px, 5vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: none;
  margin: 0;
}
.display--huge {
  font-size: clamp(38px, 8.4vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  max-width: 15ch;
  margin: 0;
}

.lede { font-size: 16px; line-height: 1.65; max-width: 58ch; }

.prose-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(20px, 3vw, 48px);
}
.prose-cols p { font-size: 16px; line-height: 1.65; text-wrap: pretty; margin: 0; }

/* ── Stats ──────────────────────────────────────────────────────────────── */
/* These grids show their container's divider colour through the 2px gaps, so
   any slot the items do not fill renders as a dark empty box. Column counts are
   therefore fixed to exact divisors of the item count rather than left to
   auto-fit, which resolved differently on every screen width. 5 items here. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  background: var(--color-divider);
  margin-top: clamp(32px, 6vh, 72px);
}
.stat {
  background: var(--color-bg);
  padding: var(--space-6) var(--space-4);
  transition: background 0.35s var(--ease-soft);
  /* Lets the number size itself against this cell instead of the viewport. */
  container-type: inline-size;
}
.stat:hover { background: var(--color-accent-100); }
.stat--accent { background: var(--color-accent); color: var(--color-bg); }
.stat--accent:hover { background: var(--color-accent-600); }
.stat__num {
  font-family: var(--font-heading);
  font-weight: 800;
  /* 28cqi keeps the widest value ("7,000+", ~3.2x its font size) inside the
     cell at every column width. A vw-based size did not, and the overflowing
     "+" was painted over by the next cell's opaque background. */
  font-size: clamp(24px, 28cqi, 60px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 8px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.stat--accent .stat__label { color: inherit; opacity: 0.85; }

/* ── Career timeline ────────────────────────────────────────────────────── */
.track {
  margin-top: 20px;
  height: 180px;
  width: 2px;
  background: var(--color-divider);
  position: relative;
}
.track__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0%;
  background: var(--color-accent);
}

.timeline { border-top: 2px solid var(--color-divider); }
.row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(92px, 0.5fr) minmax(0, 1.5fr) minmax(0, 1.2fr);
  gap: var(--space-4);
  padding: var(--space-6) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  transition: background 0.4s var(--ease-soft), padding-left 0.4s var(--ease-out);
}
/* Accent wipes in from the left rather than the whole row flashing colour. */
.row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.45s var(--ease-out);
}
.row:hover { background: var(--color-accent-100); padding-left: var(--space-6); }
.row:hover::before { transform: scaleY(1); }
.row__year { font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.row__role {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1.15;
}
.row__org {
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.row--current {
  background: var(--color-accent);
  color: var(--color-bg);
  border-bottom: 2px solid var(--color-divider);
}
.row--current:hover { background: var(--color-accent-600); }
.row--current::before { background: var(--color-bg); }
.row--current .row__org { color: inherit; opacity: 0.9; }

/* ── Services ───────────────────────────────────────────────────────────── */
/* 10 items -> 5 or 2 columns. */
.services {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  background: var(--color-divider);
  border: 2px solid var(--color-divider);
  margin-top: clamp(28px, 5vh, 60px);
}
.svc {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  padding: var(--space-6);
  min-height: 156px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: color 0.4s var(--ease-soft);
}
/* Accent floods up from the bottom edge on hover. */
.svc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: translate3d(0, 101%, 0);
  transition: transform 0.5s var(--ease-out);
  z-index: 0;
}
.svc:hover { color: var(--color-bg); }
.svc:hover::before { transform: none; }
.svc > * { position: relative; z-index: 1; }
.svc__num {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}
.svc h3 { margin: 0 0 6px; font-size: 20px; }
.svc p { font-size: 13px; line-height: 1.5; margin: 0; opacity: 0.75; }

/* ── Expansion / brands / chips ─────────────────────────────────────────── */
/* 5 items -> 5 or 1 column. */
.expansion {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  background: var(--color-divider);
  border-top: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
}
.exp {
  background: var(--color-surface);
  padding: var(--space-4);
  transition: background 0.35s var(--ease-soft);
}
.exp:hover { background: var(--color-bg); }
.exp__year { font-family: var(--font-heading); font-weight: 800; font-size: 26px; color: var(--color-accent); }
.exp__text { font-size: 13px; margin-top: 4px; }

/* 8 items -> 4 or 2 columns. Keep in step with the cell count in the template. */
.brands {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  background: var(--color-divider);
  border: 2px solid var(--color-divider);
}
/* White, not --color-bg: every logo.dev image is an opaque rectangle rather
   than a transparent mark, so a white cell lets the white-backed ones sit
   seamlessly while the four with coloured panels read as deliberate tiles. */
.brand-cell {
  background: #fff;
  padding: var(--space-6) var(--space-4);
  min-height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 800;
  /* Lets the logo and the name size themselves against this cell. */
  container-type: inline-size;
  line-height: 1.15;
  letter-spacing: -0.01em;
  box-shadow: inset 0 0 0 0 var(--color-accent);
  transition: box-shadow 0.4s var(--ease-out);
}
/* An accent underline rather than the flood used elsewhere: a green wash
   behind an opaque white logo panel would just frame it in a visible box. */
.brand-cell:hover { box-shadow: inset 0 -4px 0 0 var(--color-accent); }

.brand-logo {
  /* Wide cells already sit at the 68px cap, so the factor only lifts the
     narrow two-column phone layout. */
  height: clamp(34px, 34cqi, 68px);
  width: 100%;
  object-fit: contain;
  transition: transform 0.45s var(--ease-out);
}
.brand-cell:hover .brand-logo { transform: scale(1.06); }

.brand-cell > span {
  /* Sized against the cell (see the note in index.html). Floor is set by the
     longest unbreakable word, "International", in the narrowest cell at 320px;
     break-word is the backstop for any future name. */
  font-size: clamp(11px, 9cqi, 20px);
  text-wrap: balance;
  overflow-wrap: break-word;
  transition: color 0.35s var(--ease-soft);
}
.brand-cell:hover > span { color: var(--color-accent); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  padding: 8px 14px;
  border: 2px solid var(--color-divider);
  transition: background 0.3s var(--ease-soft), color 0.3s var(--ease-soft),
              border-color 0.3s var(--ease-soft), transform 0.3s var(--ease-out);
}
.chip:hover {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
  transform: translate3d(0, -3px, 0);
}

/* ── Method ─────────────────────────────────────────────────────────────── */
.method {
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--color-accent) 22%, transparent) 0%, transparent 62%),
    var(--color-bg);
}
.method-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  perspective: 1200px;
}
.method-card {
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  border-top: 2px solid var(--color-accent);
  padding: clamp(20px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
  transform-style: preserve-3d;
  transition: box-shadow 0.4s var(--ease-soft), background 0.4s var(--ease-soft);
}
.method-card:hover {
  box-shadow: var(--shadow-lg);
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
}
.method-card__num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  color: var(--color-accent);
}
.method-card h3 { margin: 0; font-size: 20px; }
.method-card p {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.method-card__out {
  margin-top: auto;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ── Pasha ──────────────────────────────────────────────────────────────── */
.pasha {
  background: var(--color-accent);
  color: var(--color-bg);
  padding-top: clamp(64px, 12vh, 150px);
  padding-bottom: clamp(64px, 12vh, 150px);
}
.pasha .display { margin-bottom: 0; }
.pasha__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(28px, 6vh, 72px);
  border-top: 2px solid color-mix(in srgb, var(--color-bg) 45%, transparent);
  padding-top: var(--space-8);
}
.pasha__text {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}
.glass {
  background: color-mix(in srgb, #ffffff 16%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, #ffffff 35%, transparent);
  padding: var(--space-6);
  transition: background 0.4s var(--ease-soft), transform 0.5s var(--ease-out);
}
.glass:hover {
  background: color-mix(in srgb, #ffffff 24%, transparent);
  transform: translate3d(0, -4px, 0);
}
.glass h3 { margin: 0 0 6px; font-size: clamp(19px, 2.2vw, 30px); }
.glass > p { font-size: 14px; line-height: 1.6; opacity: 0.92; margin: 0 0 14px; }
.glass__stats {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  border-top: 1px solid color-mix(in srgb, #ffffff 40%, transparent);
  padding-top: 14px;
}
.glass__num { font-family: var(--font-heading); font-weight: 800; font-size: 28px; line-height: 1; }
.glass__cap { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }

.pasha__list { display: grid; gap: 10px; align-content: start; }
.pasha__item {
  border-bottom: 1px solid color-mix(in srgb, var(--color-bg) 45%, transparent);
  padding-bottom: 10px;
}
.pasha__item:last-child { border-bottom: 0; }
.pasha__cap { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.pasha__val { font-family: var(--font-heading); font-weight: 800; font-size: 17px; }

/* ── Ventures ───────────────────────────────────────────────────────────── */
.ventures {
  display: grid;
  gap: 2px;
  background: var(--color-divider);
  border: 2px solid var(--color-divider);
}
.ventures--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 2px;
}
.ventures--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: clamp(36px, 6vh, 72px);
}
.venture {
  position: relative;
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  padding: clamp(20px, 2.4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 260px;
  transition: background 0.4s var(--ease-soft);
}
a.venture:hover { background: var(--color-accent-100); color: var(--color-text); }
.venture--sm { padding: clamp(20px, 2.2vw, 32px); gap: 14px; min-height: 230px; }
.venture__kicker {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
}
.venture__logo {
  height: 84px;
  width: auto;
  object-fit: contain;
  object-position: left;
  transition: transform 0.5s var(--ease-out);
}
.venture__logo--sm { height: 70px; }
a.venture:hover .venture__logo { transform: translate3d(0, -4px, 0) scale(1.03); }
.venture h3 { margin: 0 0 6px; font-size: clamp(21px, 2.2vw, 30px); }
.venture--sm h3 { font-size: 20px; }
.venture p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.venture--sm p { font-size: 13px; line-height: 1.55; }
.venture__link {
  margin-top: auto;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  transition: transform 0.4s var(--ease-out);
}
.venture--sm .venture__link { font-size: 12px; }
a.venture:hover .venture__link { transform: translate3d(6px, 0, 0); }

.venture--soon {
  background: var(--color-accent);
  color: var(--color-bg);
}
.venture--soon .venture__kicker { color: inherit; opacity: 0.85; }
.venture--soon p { color: inherit; opacity: 0.92; }
.venture__ef {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1;
}
.venture__link--muted {
  color: inherit;
  opacity: 0.85;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* ── Case studies ───────────────────────────────────────────────────────── */
.cases { border-top: 2px solid var(--color-divider); }
.case { border-bottom: 1px solid var(--color-divider); }
.case--last { border-bottom: 2px solid var(--color-divider); }
.case h4 { margin: 0; }
.case__btn {
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--space-6) var(--space-2);
  min-height: 64px;
  font-family: var(--font-heading);
  color: var(--color-text);
  transition: padding-left 0.4s var(--ease-out), background 0.35s var(--ease-soft);
}
.case__btn:hover { background: var(--color-accent-100); padding-left: var(--space-4); }
.case__head { display: flex; flex-direction: column; gap: 4px; }
.case__kicker {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
}
.case__title {
  font-weight: 800;
  font-size: clamp(20px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
/* Plus that rotates into a minus. */
.case__plus {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  transition: transform 0.45s var(--ease-out);
}
.case__plus::before,
.case__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.case__plus::before { width: 22px; height: 2.5px; }
.case__plus::after {
  width: 2.5px;
  height: 22px;
  transition: transform 0.45s var(--ease-out), opacity 0.3s var(--ease-soft);
}
.case__btn[aria-expanded="true"] .case__plus { transform: rotate(180deg); }
.case__btn[aria-expanded="true"] .case__plus::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

/* grid-template-rows 0fr → 1fr animates to the content's natural height. */
.case__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.55s var(--ease-out), opacity 0.4s var(--ease-soft);
}
.case__body.is-open { grid-template-rows: 1fr; opacity: 1; }
.case__inner {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 3vw, 44px);
  padding: 0 var(--space-2);
}
.case__body.is-open .case__inner { padding-bottom: var(--space-8); }
.case__inner h5 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.case__inner p { font-size: 14px; line-height: 1.65; margin: 0; }

/* ── Writing / education / recognition ──────────────────────────────────── */
.book {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(20px, 3vw, 48px);
  border-top: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
  padding: var(--space-8) 0;
  align-items: center;
}
.book__title {
  font-size: clamp(22px, 3vw, 42px);
  line-height: 1.05;
  margin: 0 0 10px;
  max-width: 16ch;
}
.book__blurb { font-size: 14px; line-height: 1.6; max-width: 46ch; margin: 0; }
.papers { display: grid; gap: var(--space-4); }
.paper {
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-4);
  transition: padding-left 0.4s var(--ease-out), border-color 0.3s var(--ease-soft);
}
.paper:hover { padding-left: var(--space-6); border-color: var(--color-accent-700); }
.paper h4 {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.paper p { font-size: 14px; margin: 0; line-height: 1.5; }

.edu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 5vh, 64px);
}
.edu {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--color-divider);
  transition: padding-left 0.35s var(--ease-out);
}
.edu:hover { padding-left: var(--space-2); }
.edu--last { border-bottom: 1px solid var(--color-divider); }
.edu__year { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.edu__body { font-size: 14px; }

.recog-figure { margin: 0 0 2px; overflow: hidden; }
.recog-figure img {
  width: 100%;
  height: clamp(200px, 26vw, 300px);
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.8s var(--ease-out);
}
.recog-figure:hover img { transform: scale(1.04); }
.recog {
  background: var(--color-bg);
  padding: var(--space-6);
  margin-bottom: 2px;
  transition: background 0.35s var(--ease-soft);
}
.recog:last-child { margin-bottom: 0; }
.recog:hover { background: var(--color-accent-100); }
.recog h4 { margin: 0 0 6px; font-size: 18px; }
.recog p {
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* ── Contact ────────────────────────────────────────────────────────────── */
.contact {
  background: var(--color-text);
  color: var(--color-bg);
  padding-top: clamp(64px, 12vh, 150px);
  padding-bottom: clamp(64px, 12vh, 150px);
}
.contact .display { margin-bottom: clamp(24px, 5vh, 64px); }
/* 5 items -> 3, 2 or 1 column. The odd count would leave a hole in the last
   row, so the final card stretches to close it at every multi-column width. */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  background: color-mix(in srgb, var(--color-bg) 30%, transparent);
  border: 2px solid color-mix(in srgb, var(--color-bg) 30%, transparent);
}
.contact-card {
  background: var(--color-text);
  color: var(--color-bg);
  text-decoration: none;
  padding: var(--space-6);
  min-height: 100px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 0.35s var(--ease-soft), color 0.35s var(--ease-soft);
}
.contact-card:hover { background: var(--color-accent); color: var(--color-bg); }
.contact-card--accent { background: var(--color-accent); }
.contact-card--accent:hover { background: var(--color-accent-600); }
.contact-card__cap {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.contact-card--accent .contact-card__cap { opacity: 0.85; }
.contact-card__val {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(16px, 1.6vw, 23px);
  word-break: break-word;
}
.contact-card--accent .contact-card__val { font-size: clamp(15px, 1.5vw, 21px); }
.contact-grid > :last-child { grid-column: span 2; }
@media (max-width: 560px) { .contact-grid > :last-child { grid-column: auto; } }

/* ── FAQ ──────────────────────────────────────────────────────────────────
   Answers are never collapsed: this block is the page's answer surface for
   search and for the assistants that quote it, so the text has to be in the
   first paint and readable without an interaction. Same hairline rhythm as
   the timeline rows, so it reads as part of the system rather than an SEO
   appendix bolted on the end.
   ───────────────────────────────────────────────────────────────────────── */
.faq { border-top: 2px solid var(--color-divider); }
.faq__item {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(10px, 3vw, 48px);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-divider);
  transition: background 0.35s var(--ease-soft), padding-left 0.35s var(--ease-soft);
}
.faq__item:last-child { border-bottom: 2px solid var(--color-divider); }
.faq__item:hover { background: var(--color-accent-100); padding-left: var(--space-4); }
.faq__q {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(16px, 1.7vw, 23px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
.faq__a { font-size: 14px; line-height: 1.7; margin: 0; max-width: 64ch; }
.faq__a + .faq__a { margin-top: var(--space-2); }

.colophon {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(36px, 7vh, 90px);
  padding-top: var(--space-6);
  border-top: 2px solid color-mix(in srgb, var(--color-bg) 30%, transparent);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Magnetic pull and card tilt are eased frame-by-frame in main.js, using the
   independent `translate`/`transform` properties so neither clobbers the
   background and colour transitions each component declares for itself. */
.magnetic { will-change: translate; }
[data-tilt] { will-change: transform; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
/* Every column count below is an exact divisor of that grid's item count:
   stats 5, services 8, expansion 5, brands 8, contact 6, method 4.
   Changing the number of cells in index.html means revisiting these. */

@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); }
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --header-h: 58px; }

  .split-layout,
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .section-index { position: static; }
  .track { display: none; }

  .hero { background-image: none; padding-bottom: clamp(24px, 4vh, 40px); }
  .hero__img { height: 78vw; max-height: 520px; }
  .hero__cols { grid-template-columns: 1fr; }
  .scroll-cue { display: none; }

  .brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ventures--two,
  .ventures--three { grid-template-columns: 1fr; }

  .row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding-left: var(--space-3) !important;
  }
  .row:hover::before { transform: scaleY(1); }

  .nav-desktop { display: none; }
  .menu-toggle { display: inline-flex; }
  .menu-close { display: inline-flex; }

  .book { align-items: start; }
  .colophon { flex-direction: column; gap: 8px; }
}

@media (max-width: 700px) {
  .stat-grid,
  .expansion { grid-template-columns: 1fr; }
  /* Stacked, the number and its label read better side by side. */
  .stat {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-4);
  }
  .stat__num { font-size: clamp(30px, 13cqi, 46px); }
  .stat__label { margin-top: 0; }
  .exp { display: flex; align-items: baseline; gap: var(--space-4); }
  .exp__text { margin-top: 0; }
  .faq__item { grid-template-columns: 1fr; gap: var(--space-2); }
}

@media (max-width: 560px) {
  .services { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .method-grid { grid-template-columns: 1fr; }

  .svc { min-height: 0; gap: var(--space-4); }
  .method-card { min-height: 0; }
  .case__btn { padding-left: 0; padding-right: 0; }
  .case__btn:hover { padding-left: var(--space-2); }
  .glass__stats { gap: 16px; }
  .marquee__item { font-size: 15px; }
  /* Long values such as the email address must never widen the page. */
  .contact-card__val,
  .contact-card--accent .contact-card__val { font-size: 17px; }
}

@media (max-width: 380px) {
  .brand-cell { padding: var(--space-4) var(--space-3); min-height: 96px; }
  .venture,
  .venture--sm { padding: var(--space-4); }
}

/* Phones in landscape: the fixed header plus a tall hero leaves no room. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-top: clamp(84px, 18vh, 120px); }
  .hero__img { height: 60vh; }
  .mobile-menu__nav a { font-size: clamp(20px, 5vh, 30px); }
  .mobile-menu { padding: 56px 24px 24px; overflow-y: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   Everything still arrives, it just arrives already in place.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.reduced-motion .grain,
.reduced-motion .cursor,
.reduced-motion .scroll-cue__line { animation: none; }

.reduced-motion [data-reveal],
.reduced-motion [data-rule],
.reduced-motion .split-unit {
  opacity: 1 !important;
  transform: none !important;
}
.reduced-motion .hero__img,
.reduced-motion [data-img-reveal] img { transform: none !important; opacity: 1 !important; }
.reduced-motion .hero__frame,
.reduced-motion [data-img-reveal] > picture,
.reduced-motion [data-img-reveal] > img { clip-path: none !important; }
.reduced-motion .site-header.is-hidden { transform: none; }