:root {
  /* Color */
  --bg: #F0F0F0;
  --bg-tint: #E8E5DD;
  --ink: #252323;
  --ink-muted: #776a5a;
  --accent: #4d576c;
  --accent-dark: #545E70;
  --accent-2: #DAD2BC;
  --hair: rgba(37, 35, 35, 0.1);
  --hair-strong: rgba(37, 35, 35, 0.22);

  /* Typography */
  --serif: 'Satoshi', -apple-system, sans-serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --mono: 'Inter', -apple-system, sans-serif;

  /* Layout */
  --page-pad: 64px;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 120px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 100px;

  /* Motion */
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 600ms;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(37, 35, 35, 0.05);
  --shadow-md: 0 8px 24px rgba(37, 35, 35, 0.07);
  --shadow-lg: 0 20px 60px rgba(37, 35, 35, 0.12), 0 2px 8px rgba(37, 35, 35, 0.06);
  --shadow-xl: 0 32px 80px rgba(37, 35, 35, 0.14), 0 4px 12px rgba(37, 35, 35, 0.06);
}

/* ─── Motion: scroll-in fade-up ─── */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Gradient hairline utility ─── */
.gradient-rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent 0%, var(--hair-strong) 50%, transparent 100%);
  margin: 0;
}

/* ─── Sitewide section grid (label-left / content-right) ─── */
.section-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-7);
}
.section-label-col {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted);
}
.section-label-col .num { color: var(--ink-muted); margin-right: 4px; }
@media (max-width: 1000px) {
  .section-grid { grid-template-columns: 1fr; gap: var(--s-4); }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
.no-transition, .no-transition * { transition: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Italic restraint: <em> never renders italic. Emphasis via color only.
   This overrides class-level italic declarations sitewide. */
em {
  font-style: normal !important;
  font-weight: inherit;
}

/* ─── nav ─── */
nav.site-nav {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--hair);
  transition: box-shadow 0.3s ease;
}
nav.site-nav.scrolled {
  box-shadow: 0 1px 0 var(--hair);
}
.nav-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px var(--page-pad);
  background: rgba(240, 240, 240, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: background 0.3s ease, border-color 0.3s ease;
}
nav.site-nav.over-dark .nav-bar,
body.has-dark-hero nav.site-nav:not(.scrolled) .nav-bar {
  background: rgba(20, 18, 18, 0.35);
  border-bottom-color: rgba(240, 240, 240, 0.08);
}
body.has-dark-hero nav.site-nav:not(.scrolled) .logo img,
body.has-dark-hero nav.site-nav:not(.scrolled) .logo svg { filter: invert(1) brightness(1.5); }
body.has-dark-hero nav.site-nav:not(.scrolled) .nav-links a { color: rgba(240, 240, 240, 0.92); }
body.has-dark-hero nav.site-nav:not(.scrolled) .nav-links a::after { background: rgba(240, 240, 240, 0.92); }
body.has-dark-hero nav.site-nav:not(.scrolled) .nav-toggle span { background: rgba(240, 240, 240, 0.92); }
nav.site-nav.scrolled:not(.over-dark) .nav-bar {
  background: rgba(240, 240, 240, 0.7);
}
nav.site-nav.menu-open .nav-bar {
  background: rgba(240, 240, 240, 0.85);
}
.logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  opacity: 1;
  transition: opacity 0.2s ease, filter 0.3s ease;
}
.logo:hover { opacity: 0.65; }
.logo img,
.logo svg { width: 28px; height: 28px; display: block; transition: filter 0.3s ease; }

/* When nav is over the dark hero — invert logo + light text */
nav.site-nav.over-dark .logo img,
nav.site-nav.over-dark .logo svg { filter: invert(1) brightness(1.5); }
nav.site-nav.over-dark .nav-links a { color: rgba(240, 240, 240, 0.92); }
nav.site-nav.over-dark .nav-links a::after { background: rgba(240, 240, 240, 0.92); }
nav.site-nav.over-dark .nav-toggle span { background: rgba(240, 240, 240, 0.92); }

.nav-links { display: flex; gap: 32px; align-items: center; font-size: 13px; font-family: var(--mono); letter-spacing: 0.02em; }
.nav-links a { color: var(--ink); text-decoration: none; position: relative; padding: 4px 0; transition: color 0.3s ease; }
.nav-links a.active { color: var(--accent-dark); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s ease, background 0.3s ease;
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links a.active::after { background: var(--accent-dark); transform: scaleX(1); }

/* nav availability pill */
.nav-available {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-muted);
  padding: 5px 12px;
  border: 1px solid var(--hair-strong);
  border-radius: 100px;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.nav-available:hover { border-color: var(--accent-dark); color: var(--accent-dark); }
.nav-available::after { display: none !important; }
.nav-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6BAF8A;
  flex-shrink: 0;
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.75); }
}

/* hamburger */
.nav-toggle {
  display: none; flex-direction: column; justify-content: space-between;
  width: 24px; height: 16px; background: none; border: none;
  cursor: pointer; padding: 0;
}
.nav-toggle span {
  display: block; width: 100%; height: 1px;
  background: var(--ink); transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ─── hero ─── */
section.hero {
  padding: 0;
  margin-top: -68px;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #1a1818;
  color: var(--bg);
}

/* Hero gradient — bloom on dark base, palette-matched */
.hero-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-ambient::before,
.hero-ambient::after,
.hero-ambient .blob {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
/* Slate (--accent) blob — centre-right, the cool counter */
.hero-ambient::before {
  width: 80vw; height: 80vh;
  top: 0%; right: -15%;
  background: radial-gradient(circle, rgba(77, 87, 108, 0.85) 0%, rgba(77, 87, 108, 0) 65%);
  animation: blob-purple 22s ease-in-out infinite;
}
/* Khaki blob — far right warm glow */
.hero-ambient::after {
  width: 45vw; height: 55vh;
  top: 25%; right: -20%;
  background: radial-gradient(circle, rgba(169, 153, 133, 0.45) 0%, rgba(169, 153, 133, 0) 70%);
  animation: blob-peach 18s ease-in-out infinite;
}
/* Bone (--accent-2) highlight — soft cream in upper right */
.hero-ambient .blob-sun {
  width: 28vw; height: 28vh;
  top: -10%; right: 0%;
  background: radial-gradient(circle, rgba(218, 210, 188, 0.35) 0%, rgba(218, 210, 188, 0) 70%);
  animation: blob-sun 14s ease-in-out infinite;
}
/* Ink-muted lower bloom — warm earthy depth */
.hero-ambient .blob-rose {
  width: 55vw; height: 55vh;
  bottom: -20%; right: -15%;
  background: radial-gradient(circle, rgba(119, 106, 90, 0.32) 0%, rgba(119, 106, 90, 0) 70%);
  animation: blob-rose 26s ease-in-out infinite;
}

/* Fade to page bg at bottom edge so the section transitions to beige */
.hero-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
}

@keyframes blob-purple {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-6%, 8%) scale(1.12); }
  66%      { transform: translate(4%, -4%) scale(0.94); }
}
@keyframes blob-peach {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-12%, 6%) scale(1.18); }
  75%      { transform: translate(2%, -8%) scale(0.9); }
}
@keyframes blob-sun {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  50%      { transform: translate(-10%, 15%) scale(1.35); opacity: 0.7; }
}
@keyframes blob-rose {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-8%, -10%) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ambient::before,
  .hero-ambient::after,
  .hero-ambient .blob { animation: none; }
}

/* Hero noise texture — sits over gradient, under content */
.hero-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.12 0 0 0 0 0.13 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Bloom-mesh hero (index) — dark left, warm bone-earth bloom right ─── */
.hero-ambient--bloom::before {
  width: 90vw; height: 100vh;
  top: -10%; right: -30%;
  background: radial-gradient(
    ellipse at 35% 45%,
    rgba(218, 210, 188, 0.55) 0%,
    rgba(192, 168, 138, 0.38) 22%,
    rgba(140, 110, 90, 0.25) 42%,
    rgba(77, 70, 78, 0.12) 65%,
    rgba(26, 24, 24, 0) 80%
  );
  filter: blur(90px);
  animation: bloom-drift 28s ease-in-out infinite;
}
.hero-ambient--bloom::after {
  width: 55vw; height: 65vh;
  top: 20%; right: -10%;
  background: radial-gradient(
    circle,
    rgba(180, 130, 95, 0.32) 0%,
    rgba(180, 130, 95, 0) 65%
  );
  filter: blur(110px);
  animation: bloom-drift-2 22s ease-in-out infinite;
}
.hero-ambient--bloom .blob-sun {
  width: 22vw; height: 22vh;
  top: 32%; right: 12%;
  background: radial-gradient(circle, rgba(218, 210, 188, 0.32) 0%, rgba(218, 210, 188, 0) 70%);
  filter: blur(90px);
  animation: bloom-drift-3 18s ease-in-out infinite;
}
.hero-ambient--bloom .blob-rose {
  width: 75vw; height: 75vh;
  bottom: -20%; left: -20%; right: auto;
  background: radial-gradient(circle, rgba(77, 87, 108, 0.75) 0%, rgba(77, 87, 108, 0) 70%);
  filter: blur(110px);
  animation: bloom-drift 24s ease-in-out infinite reverse;
}
@keyframes bloom-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-3%, 4%) scale(1.06); }
}
@keyframes bloom-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(4%, -3%) scale(1.1); }
}
@keyframes bloom-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  50%      { transform: translate(-2%, -4%) scale(1.15); opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ambient--bloom::before,
  .hero-ambient--bloom::after,
  .hero-ambient--bloom .blob-sun { animation: none; }
}

/* ─── GC-style free hero — edge-to-edge, scattered marginalia ─── */

/* Top-left mono tag — dropped down to sit beside the headline's first line */
.hero-tag-tl {
  position: absolute;
  top: 300px; left: 140px;
  z-index: 3;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 240, 240, 0.58);
}

/* Column guideline grid — faint columns + three horizontal rules */
.hero-grid-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  pointer-events: none;
}
.hero-grid-lines span {
  border-right: 1px solid rgba(218, 210, 188, 0.05);
}
.hero-grid-lines span:last-child { border-right: none; }
.hero-grid-lines::before,
.hero-grid-lines::after,
.hero-grid-lines > span:first-child::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(218, 210, 188, 0.05);
}
.hero-grid-lines::before { top: 25%; }
.hero-grid-lines::after { top: 50%; }
.hero-grid-lines > span:first-child::before { top: 75%; left: -100vw; right: -100vw; }


/* Headline block — broken composition */
.hero-block {
  position: relative;
  z-index: 3;
  align-self: center;
  width: 100%;
  max-width: 1320px;
  padding: 0 96px;
  margin: 0 auto;
}
.hero-since {
  position: absolute;
  top: 150px; right: 140px;
  z-index: 3;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 240, 240, 0.55);
}
.hero-statement {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(56px, 8.5vw, 132px);
  line-height: 1;
  letter-spacing: -0.032em;
  color: var(--bg);
  margin: 0;
}
/* Staircase composition — each line steps in by an even increment, so the
   break reads as deliberate rhythm rather than mixed alignment. One serif
   voice throughout; the indent does the work, not type contrast. */
.hero-statement .line {
  display: block;
  text-align: left;
}
.hero-statement .line--1 { padding-left: 8%; }
.hero-statement .line--2 { padding-left: 22%; margin-top: 0.18em; }
.hero-statement .line--3 { padding-left: 0; margin-top: 0.18em; }


/* Scroll cue bottom-center */
.hero-scroll {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 240, 240, 0.6);
}
.hero-scroll-line {
  width: 1px; height: 22px;
  background: linear-gradient(180deg, rgba(218, 210, 188, 0.6) 0%, rgba(218, 210, 188, 0) 100%);
  animation: scroll-line 2s var(--ease) infinite;
  transform-origin: top;
}
@keyframes scroll-line {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; transform-origin: bottom; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-line { animation: none; opacity: 1; transform: scaleY(1); }
}

/* Bottom-right location/time */
.hero-tag-br {
  position: absolute;
  bottom: 36px; right: 64px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 240, 240, 0.6);
}
.hero-tag-br .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 10px rgba(218, 210, 188, 0.6);
  animation: hero-dot 2.4s var(--ease) infinite;
}
@keyframes hero-dot {
  0%, 100% { opacity: 0.6; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.1); }
}

/* ── hero responsive cascade ── */
@media (max-width: 1200px) {
  .hero-block { padding: 0 56px; }
  .hero-tag-br { right: 56px; }
}
@media (max-width: 1024px) {
  .hero-block { padding: 0 40px; }
  .hero-tag-br { right: 40px; }
}
@media (max-width: 820px) {
  .hero-tag-tl { top: 84px; left: 24px; font-size: 10px; }
  .hero-block { padding: 0 24px; }
  .hero-since { top: 84px; right: 24px; font-size: 10px; }
  .hero-statement { font-size: clamp(40px, 10.5vw, 72px); }
  /* gentler steps on narrow screens so the indent doesn't crowd the text */
  .hero-statement .line--1 { padding-left: 5%; }
  .hero-statement .line--2 { padding-left: 14%; }
  .hero-statement .line--3 { padding-left: 0; }
  .hero-tag-br { bottom: 28px; right: 24px; font-size: 10px; }
  .hero-grid-lines { display: none; }
  .hero-scroll { display: none; }
}
@media (max-width: 480px) {
  .hero-statement { font-size: clamp(36px, 12vw, 60px); line-height: 1; }
  .hero-tag-br {
    bottom: 24px;
    right: 24px;
    font-size: 9px;
  }
}

/* legacy hero (deck/tiles/annotations) removed — superseded by the staircase
   .hero-statement composition above. */


/* ─── manifesto — editorial spread ─── */
section.manifesto {
  padding: 180px var(--page-pad) 60px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.manifesto::before,
.manifesto::after {
  content: '';
  position: absolute; left: var(--page-pad); right: var(--page-pad);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--hair-strong) 30%, var(--hair-strong) 70%, transparent 100%);
}
.manifesto::before { top: 0; }
.manifesto::after { display: none; }

/* Floating watermark word — italic Fraunces, very low opacity */
.manifesto-watermark {
  position: absolute;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(220px, 32vw, 480px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--ink);
  opacity: 0.04;
  user-select: none;
  pointer-events: none;
  bottom: -0.18em;
  right: -0.04em;
  white-space: nowrap;
  z-index: 0;
}

/* Oversized open-quote mark — graphic element */
.manifesto-quote {
  position: absolute;
  top: 80px;
  left: var(--page-pad);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(160px, 18vw, 260px);
  line-height: 0.7;
  color: var(--accent-dark);
  opacity: 0.18;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

.manifesto-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}
.manifesto-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted);
}
.manifesto-label .num { color: var(--ink-muted); margin-right: 4px; }

.manifesto-statements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--s-7);
}
.manifesto-stmt {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: 0;
}
.manifesto-stmt-num {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.manifesto-stmt-text {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: rgba(37, 35, 35, 0.45);
  max-width: 52ch;
  margin-top: var(--s-3);
}
.manifesto-stmt-text .lead {
  color: var(--ink);
}

.manifesto-signature {
  margin-top: var(--s-6);
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted);
}
.manifesto-signature::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--hair-strong);
}
.manifesto-signature em {
  font-family: var(--serif); font-style: italic;
  font-size: 18px; letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
}

@media (max-width: 1000px) {
  .manifesto-inner { grid-template-columns: 1fr; gap: var(--s-4); }
  .manifesto-statements { grid-template-columns: 1fr; }
  .manifesto-quote { top: 40px; font-size: 140px; }
  .manifesto-watermark { font-size: 180px; }
}

/* (legacy, still used elsewhere) */
.section-num {
  font-family: var(--mono); font-size: 11px; color: var(--ink-muted);
  letter-spacing: 0.1em; flex-shrink: 0;
}
.section-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted);
}

/* ─── work list (curated gallery) ─── */
section.work {
  padding: 120px var(--page-pad);
  border-bottom: 1px solid var(--hair);
  position: relative;
  overflow: hidden;
}
.work-watermark {
  position: absolute;
  right: -2vw; top: 60px;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(180px, 22vw, 360px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(37, 35, 35, 0.04);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
section.work > *:not(.work-watermark) { position: relative; z-index: 2; }

/* ─── Work strip — hairline-separated, bone-on-bone, expandable ─── */
.work-strip {
  display: flex;
  height: 520px;
  width: 100%;
  border-top: 1px solid var(--hair-strong);
  border-bottom: 1px solid var(--hair-strong);
}
.work-card {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s-5) var(--s-4);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: flex var(--t-slow) var(--ease);
  border-right: 1px solid var(--hair-strong);
}
.work-card:last-child { border-right: none; }
.work-card.is-active { flex: 2.1; }
.work-strip:hover .work-card.is-active:not(:hover) { flex: 1; }
.work-strip:hover .work-card:hover { flex: 2.1; }

/* thumbnail — fades in only on active/hover, takes up upper portion */
.work-card-thumb {
  position: absolute;
  top: var(--s-4); left: var(--s-4); right: var(--s-4);
  bottom: 120px;
  border-radius: var(--r-sm);
  background-size: cover;
  background-position: center;
  background-color: var(--bg-tint);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.work-card.is-active .work-card-thumb,
.work-strip:hover .work-card:hover .work-card-thumb {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* meta at the bottom */
.work-card-meta {
  display: flex; flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.work-card-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.work-card.is-active .work-card-tag,
.work-strip:hover .work-card:hover .work-card-tag {
  opacity: 1;
  transform: translateY(0);
}
.work-card-name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t-base) var(--ease);
}
.work-strip:hover .work-card:hover .work-card-name {
  color: var(--accent-dark);
}

/* arrow icon top-right */
.work-card-arrow {
  position: absolute;
  top: calc(var(--s-4) + 8px); right: calc(var(--s-4) + 8px);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--bg);
  background: rgba(20, 18, 18, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease), background var(--t-base) var(--ease);
  z-index: 3;
}
.work-card-arrow svg { width: 14px; height: 14px; }
.work-card.is-active .work-card-arrow,
.work-strip:hover .work-card:hover .work-card-arrow {
  opacity: 1;
}
.work-strip:hover .work-card:hover .work-card-arrow {
  background: #1a1818;
}

/* footer link */
.work-footer {
  margin-top: var(--s-7);
}
.work-footer-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  align-self: flex-start;
  transition: color var(--t-base) var(--ease), border-bottom-color var(--t-base) var(--ease);
}
.work-footer-link .arrow {
  display: inline-block;
  transition: transform var(--t-base) var(--ease);
}
.work-footer-link:hover {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}
.work-footer-link:hover .arrow {
  transform: translate(2px, -2px);
}

@media (max-width: 900px) {
  .work-strip {
    flex-direction: column;
    height: auto;
  }
  .work-card {
    flex: none;
    padding: var(--s-4);
    min-height: 100px;
    border-right: none;
    border-bottom: 1px solid var(--hair-strong);
  }
  .work-card:last-child { border-bottom: none; }
  .work-card.is-active,
  .work-strip:hover .work-card.is-active:not(:hover),
  .work-strip:hover .work-card:hover {
    flex: none;
  }
  .work-card-thumb {
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    display: none;
    aspect-ratio: 16/9;
    margin-bottom: var(--s-3);
  }
  .work-card.is-active .work-card-thumb,
  .work-strip:hover .work-card:hover .work-card-thumb {
    display: block;
  }
}
.work-header {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-7);
  margin-bottom: var(--s-7);
  align-items: start;
}
.work-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted);
}
.work-eyebrow .num { color: var(--ink-muted); margin-right: 4px; }
.work-header h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02; letter-spacing: -0.025em;
  max-width: 18ch;
}
.work-header h2 em { font-style: italic; color: var(--accent-dark); }
@media (max-width: 1000px) {
  .work-header { grid-template-columns: 1fr; gap: var(--s-3); }
  .work-eyebrow { padding-top: 0; }
}

/* Layout: left = list, right = sticky preview */
.work-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 460px;
  gap: var(--s-7);
  align-items: stretch;
}
.work-grid::before {
  content: '';
  /* spacer to align list with the headline column above */
}
@media (max-width: 1000px) {
  .work-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

.work-list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--hair);
}
.work-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 32px;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--hair);
  text-decoration: none; color: var(--ink);
  transition: padding-left var(--t-base) var(--ease);
}
.work-item:hover { padding-left: 12px; }
.work-num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.work-item:hover .work-num { color: var(--accent-dark); }
.work-content {
  display: flex; flex-direction: column; gap: 6px;
}
.work-name {
  font-family: var(--serif); font-weight: 400;
  font-size: 30px; line-height: 1.05;
  letter-spacing: -0.02em;
}
.work-name em { font-style: normal; }
.work-tags {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
}
.work-tag::before { content: '· '; }
.work-tag:first-child::before { content: ''; }
.work-desc {
  font-size: 14px; line-height: 1.55; color: var(--ink-muted);
  margin-top: 6px;
  max-width: 56ch;
}
.work-arrow {
  font-family: var(--mono); font-size: 18px;
  text-align: right;
  color: var(--ink-muted);
  transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.work-item:hover .work-arrow {
  transform: translate(4px, -4px);
  color: var(--ink);
}

/* Preview panel — sits in the right column, stretches to match list height */
.work-preview {
  width: 100%;
  max-width: 460px;
  height: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--ink);
  justify-self: end;
}
.work-preview::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
  z-index: 4;
}
.work-preview-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 500ms var(--ease), transform 1.4s var(--ease);
}
.work-preview-img.is-active { opacity: 1; transform: scale(1.02); }

.work-preview-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(37, 35, 35, 0.05) 0%, transparent 30%, rgba(37, 35, 35, 0.65) 100%);
  z-index: 1;
}
.work-preview-meta {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--s-5);
  z-index: 3;
  color: var(--bg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.work-preview-meta.is-active { opacity: 1; transform: translateY(0); }
.work-preview-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(240, 240, 240, 0.65);
  margin-bottom: 8px;
}
.work-preview-name {
  font-family: var(--serif); font-size: 36px; line-height: 1;
  letter-spacing: -0.015em;
}
.work-preview-name em { font-style: italic; }

.work-footnote-grid {
  margin-top: var(--s-5);
}
.work-footnote {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-align: left;
}
.work-footnote a {
  color: var(--ink); border-bottom: 1px solid var(--hair-strong);
  text-decoration: none;
  padding-bottom: 1px;
  transition: border-color var(--t-base) var(--ease);
}
.work-footnote a:hover { border-bottom-color: var(--ink); }

/* ─── projects page — dark hero ─── */
section.projects-hero {
  padding: 168px var(--page-pad) 120px;
  margin-top: -68px;
  position: relative;
  overflow: hidden;
  background: #1a1818;
  color: var(--bg);
}
section.projects-hero .hero-ambient::before {
  width: 80vw; height: 80vh;
  top: -10%; left: -20%; right: auto;
  background: radial-gradient(circle, rgba(77, 87, 108, 0.85) 0%, rgba(77, 87, 108, 0) 65%);
}
section.projects-hero .hero-ambient::after {
  width: 45vw; height: 50vh;
  top: 30%; right: -10%;
  background: radial-gradient(circle, rgba(169, 153, 133, 0.32) 0%, rgba(169, 153, 133, 0) 70%);
}
section.projects-hero .hero-ambient .blob-sun {
  width: 32vw; height: 32vh;
  top: 50%; left: 20%; right: auto;
  background: radial-gradient(circle, rgba(218, 210, 188, 0.14) 0%, rgba(218, 210, 188, 0) 70%);
}
section.projects-hero .hero-ambient .blob-rose {
  width: 50vw; height: 50vh;
  bottom: -15%; left: -10%; right: auto;
  background: radial-gradient(circle, rgba(119, 106, 90, 0.22) 0%, rgba(119, 106, 90, 0) 70%);
}
.projects-hero-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 1000px) {
  .projects-hero-grid { grid-template-columns: 1fr; gap: var(--s-4); }
}
.projects-hero-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(240, 240, 240, 0.5);
}
.projects-hero-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(56px, 6.2vw, 96px);
  line-height: 0.98; letter-spacing: -0.028em;
  color: var(--bg);
  margin-bottom: var(--s-6);
}
.projects-hero-title em {
  font-style: italic;
  color: #DAD2BC;
}
.projects-hero-intro {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.25; letter-spacing: -0.01em;
  color: var(--bg);
  max-width: 50ch;
}

/* ─── projects work — header in section-grid, then full-width cards ─── */
section.projects-work {
  padding: 120px var(--page-pad);
}
.projects-work-head {
  margin-bottom: 0;
  align-items: start;
}
.projects-work-headline {
  display: flex; flex-direction: column; gap: var(--s-4);
}
.projects-work-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1; letter-spacing: -0.025em;
  color: var(--ink);
  white-space: nowrap;
}
.projects-work-title em { font-style: italic; color: var(--accent-dark); }
.projects-work-text {
  font-size: 16px; line-height: 1.6;
  color: var(--ink-muted);
  max-width: 50ch;
}

.projects-cards {
  display: flex; flex-direction: column;
  margin-top: -8px;
}

/* Row layout: info-left + 2 images right */
.project-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: var(--s-7);
  align-items: stretch;
  padding: 0 0 var(--s-7);
  border-bottom: 1px solid var(--hair-strong);
  text-decoration: none;
  color: var(--ink);
}
.project-row + .project-row {
  padding-top: var(--s-7);
}

.project-row-info {
  display: flex; flex-direction: column;
  gap: var(--s-5);
}
.project-row-name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1; letter-spacing: -0.025em;
  color: var(--ink);
  transition: color var(--t-base) var(--ease);
}
.project-row:hover .project-row-name {
  color: var(--accent-dark);
}
.project-row-meta {
  display: flex; flex-direction: column; gap: var(--s-3);
}
.meta-item {
  display: flex; flex-direction: column; gap: 4px;
}
.meta-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.meta-value {
  font-family: var(--sans); font-size: 14px;
  color: var(--ink);
}
.project-row-link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  align-self: flex-start;
  transition: color var(--t-base) var(--ease), border-bottom-width var(--t-base) var(--ease);
}
.project-row-link .arrow {
  display: inline-block;
  transition: transform var(--t-base) var(--ease);
}
.project-row:hover .project-row-link {
  color: var(--accent-dark);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
}
.project-row:hover .project-row-link .arrow {
  transform: translate(2px, -2px);
}

.project-row-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.project-row-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-tint);
  background-size: cover;
  background-position: center;
}

/* Home rows — same row pattern as projects page, single thumbnail */
.home-rows {
  display: flex; flex-direction: column;
}
.home-rows .project-row-images {
  grid-template-columns: 1fr 1fr;
}
.home-rows .project-row-img {
  grid-column: 2;
}
.project-row-img::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(20, 18, 18, 0);
  transition: background var(--t-base) var(--ease);
  pointer-events: none;
}
.project-row:hover .project-row-img::after {
  background: rgba(20, 18, 18, 0.07);
}
.project-row-img[data-tone="4"] { background: linear-gradient(135deg, #cac4b6 0%, #9b9388 100%); }
.project-row-img[data-tone="5"] { background: linear-gradient(135deg, #d6cfc0 0%, #ada595 100%); }
.project-card {
  display: flex; flex-direction: column;
  gap: var(--s-4);
  text-decoration: none; color: var(--ink);
}

/* Frame — clean, no plate, no border */
.project-card-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-tint);
}
.project-card-thumb {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  display: flex; align-items: center; justify-content: center;
  transition: transform 1s var(--ease);
}
.project-card:hover .project-card-thumb { transform: scale(1.035); }
.project-card-thumb[data-tone="4"] { background: linear-gradient(135deg, #cac4b6 0%, #9b9388 100%); }
.project-card-thumb[data-tone="5"] { background: linear-gradient(135deg, #d6cfc0 0%, #ada595 100%); }
.thumb-name {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(36px, 4.5vw, 64px);
  letter-spacing: -0.02em;
  color: rgba(37, 35, 35, 0.22);
}

/* Meta below frame — three layered lines */
.project-card-meta {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-2) 0 0;
}

/* 1. Tiny mono meta line */
.project-card-meta-line {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* 2. Name + arrow row */
.project-card-name-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
}
.project-card-name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1; letter-spacing: -0.02em;
  color: var(--ink);
}
.project-card-name em {
  font-style: italic;
  color: var(--accent-dark);
  transition: color var(--t-base) var(--ease);
}
.project-card:hover .project-card-name em { color: var(--accent); }

.project-card-arrow {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bg);
  background: var(--accent);
  border-radius: 50%;
  transition: background var(--t-base) var(--ease);
}
.project-card-arrow svg {
  width: 16px; height: 16px;
  display: block;
}
.project-card:hover .project-card-arrow {
  background: #1a1818;
}

@media (max-width: 900px) {
  .project-row {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .project-row-images {
    grid-template-columns: 1fr 1fr;
  }
}

/* coda — closing line below the cards */
.projects-coda {
  margin-top: var(--s-9);
  align-items: start;
}
.projects-coda-body {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: var(--s-4);
  text-align: right;
}
.projects-coda-rule {
  width: 100%;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent 0%, var(--hair-strong) 100%);
  margin: 0 0 var(--s-4) 0;
}
.projects-coda-line {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.25; letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 32ch;
}
.projects-coda-line em {
  font-style: italic;
  color: var(--accent-dark);
}
.projects-coda-mail {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--hair-strong);
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.projects-coda-mail:hover {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}

/* ─── case study page ─── */
section.case-hero {
  padding: 80px var(--page-pad) 60px;
}
.case-hero-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 32px;
  display: flex; gap: 24px; flex-wrap: wrap;
}
.case-hero-meta span::before { content: '— '; color: var(--ink-muted); }
.case-hero-meta span:first-child::before { content: ''; }
.case-hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(48px, 7vw, 88px); line-height: 0.95;
  letter-spacing: -0.02em; max-width: 18ch;
}
.case-hero h1 em { font-style: italic; color: var(--accent-dark); }

section.case-images {
  padding: 60px var(--page-pad) 100px;
  display: flex; flex-direction: column; gap: 24px;
  max-width: 1400px; margin: 0 auto;
}
.case-images img {
  width: 100%; height: auto; display: block;
  border-radius: 4px;
}
/* larger upward drift for the big image blocks */
.case-images .reveal-img { transform: translateY(28px); }
.case-images .reveal-img.is-visible { transform: translateY(0); }
.case-nav {
  padding: 40px var(--page-pad) 100px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--hair);
  font-family: var(--mono); font-size: 12px;
}
.case-nav a {
  color: var(--ink); text-decoration: none; font-family: var(--sans);
  font-size: 15px; font-weight: 500;
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
}

/* ─── about page ─── */
section.about-hero {
  padding: 168px var(--page-pad) 120px;
  margin-top: -68px;
  position: relative;
  overflow: hidden;
  background: #1a1818;
  color: var(--bg);
}
.about-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-7);
  align-items: baseline;
}
@media (max-width: 1000px) {
  .about-hero-grid { grid-template-columns: 1fr; gap: var(--s-4); }
}
.about-name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(56px, 6.2vw, 96px);
  line-height: 0.98; letter-spacing: -0.028em;
  margin-bottom: var(--s-6);
  color: var(--bg);
}
.about-name em {
  font-style: italic;
  background: linear-gradient(
    100deg,
    #DAD2BC 0%,
    #C4B79C 30%,
    #A99985 55%,
    #C4B79C 80%,
    #DAD2BC 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sweep 6s var(--ease) infinite;
}
@keyframes sweep {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.about-role {
  font-family: var(--sans); font-size: 14px;
  color: rgba(240, 240, 240, 0.65); line-height: 1.5;
  margin-bottom: 4px;
}
.about-location {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: rgba(240, 240, 240, 0.5);
  margin-bottom: var(--s-6);
}
.about-bio-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(240, 240, 240, 0.5);
}
.about-bio {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.25; letter-spacing: -0.01em;
  color: var(--bg);
  max-width: 50ch;
}
.about-bio em { font-style: normal; font-weight: 500; color: #DAD2BC; }

/* Generic section pattern using section-grid */
section.about-section {
  padding: 100px var(--page-pad);
}
.about-section-body {
  font-size: 16px; line-height: 1.75;
  color: var(--ink);
  max-width: 760px;
}
.about-section-body p + p { margin-top: 1.2em; }
.about-section-body em { font-style: italic; color: var(--accent-dark); }
.about-section-body strong { font-weight: 500; color: var(--ink); }

.about-see-work {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1; letter-spacing: -0.022em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 18px;
  transition: color var(--t-base) var(--ease), gap var(--t-base) var(--ease);
}
.about-see-work span {
  font-size: 0.7em;
  color: var(--ink-muted);
  transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.about-see-work:hover { color: var(--accent-dark); gap: 28px; }
.about-see-work:hover span { color: var(--accent); transform: translateX(4px); }

/* Story section — 3-column with pull-quote on the right */
.about-story-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 280px;
  gap: var(--s-7);
  align-items: start;
}
/* Footnote marginalia — academic-textbook style */
.about-story-margin {
  position: sticky;
  top: 100px;
  display: flex; flex-direction: column;
  gap: var(--s-5);
  padding-top: var(--s-2);
  padding-left: var(--s-4);
  border-left: 1px solid var(--hair-strong);
}
.about-margin-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: var(--s-2);
}
.about-footnote {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 13px; line-height: 1.55;
  color: var(--ink);
}
.about-footnote-text {
  margin: 0;
}
.about-footnote-num {
  font-family: var(--serif); font-style: italic;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.2;
}
.about-footnote-text em {
  font-style: italic;
  color: var(--ink);
}

/* Inline footnote markers in the prose */
.fn-mark {
  font-family: var(--serif); font-style: italic;
  font-size: 0.95em;
  vertical-align: super;
  color: var(--accent-dark);
  margin-left: 2px;
}

/* Inline annotations — wiki-style trigger + editorial popup card */
.annotate {
  position: relative;
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(77, 87, 108, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.annotate:hover,
.annotate:focus-visible {
  outline: none;
  text-decoration-style: solid;
  text-decoration-color: var(--accent-dark);
  color: var(--accent-dark);
}

/* Connector line that grows from trigger up to the card */
.annotate::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  width: 1px;
  height: 0;
  background: var(--accent-dark);
  transform: translateX(-50%);
  transition: height var(--t-base) var(--ease);
  z-index: 19;
}
.annotate:hover::before,
.annotate:focus-visible::before {
  height: 14px;
}

.annotate-card {
  position: absolute;
  bottom: calc(100% + 18px);
  left: 50%;
  width: 320px;
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4);
  background: var(--bg-tint);
  color: var(--ink);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  box-shadow: 0 18px 40px rgba(37, 35, 35, 0.14), 0 2px 6px rgba(37, 35, 35, 0.06);
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base) var(--ease);
  z-index: 20;
  pointer-events: none;
}
.annotate:hover .annotate-card,
.annotate:focus-visible .annotate-card {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
}
.annotate-card-label {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--accent-dark);
  text-transform: none;
  padding-right: var(--s-3);
}
.annotate-card-text {
  font-family: var(--sans); font-size: 14px; line-height: 1.6;
  color: var(--ink);
  display: inline;
}
.annotate-card-text em { font-style: italic; color: var(--accent-dark); }

@media (max-width: 1100px) {
  .about-story-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .about-story-quote { grid-column: 1 / -1; position: static; max-width: 480px; }
}
@media (max-width: 1000px) {
  .about-story-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .annotate-card { width: 280px; }
}

/* About services — slate-blue section, card layout */
section.about-services {
  background: var(--bg);
  color: var(--ink);
  padding: 120px var(--page-pad);
  position: relative;
  overflow: hidden;
}
section.about-services .section-label-col,
section.about-services .section-label-col .num {
  color: var(--ink-muted);
}

/* Process timeline — 5 horizontal phases on slate */
.about-process {
  position: relative;
  padding-top: 0;
}
.about-process-line {
  position: absolute;
  top: 7px;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(37, 35, 35, 0.18) 8%, rgba(37, 35, 35, 0.18) 92%, transparent 100%);
  z-index: 1;
}
.about-process-phases {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-3);
  position: relative;
  z-index: 2;
}
.about-process-phase {
  display: flex; flex-direction: column;
  padding-right: var(--s-4);
  position: relative;
}
.about-process-phase-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  margin-bottom: var(--s-4);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.about-process-phase:hover .about-process-phase-dot {
  background: var(--accent-dark);
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(77, 87, 108, 0.15);
}
.about-process-phase-num {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--ink-muted);
  margin-bottom: var(--s-2);
}
.about-process-phase-name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.05; letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: var(--s-3);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.about-process-phase-name em { font-style: italic; color: var(--accent-dark); }
.about-process-phase-ai {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(77, 87, 108, 0.35);
  background: rgba(77, 87, 108, 0.06);
  position: relative; top: -3px;
  white-space: nowrap;
}
.about-process-phase-ai::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(77, 87, 108, 0.5);
}
.about-process-phase-desc {
  font-size: 13px; line-height: 1.55;
  color: var(--ink);
}
.about-process-phase-desc em { font-style: italic; color: var(--accent-dark); }

.about-process-footnote {
  margin-top: var(--s-7);
  font-size: 13px; line-height: 1.55;
  color: var(--ink);
  max-width: 70ch;
}
.about-process-footnote em {
  font-style: italic;
  color: var(--accent-dark);
}

@media (max-width: 1100px) {
  .about-process-phases { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
  .about-process-line { display: none; }
}
@media (max-width: 600px) {
  .about-process-phases { grid-template-columns: 1fr; }
}

/* Tools — typographic story */
.about-tools-list {
  display: flex; flex-direction: column;
}
.about-tool-row {
  display: grid;
  grid-template-columns: 56px 360px minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--hair-strong);
  transition: padding-left var(--t-base) var(--ease), background var(--t-base) var(--ease);
  position: relative;
}
.about-tool-row::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width var(--t-slow) var(--ease);
}
.about-tool-row:hover::after { width: 100%; }
.about-tool-row:hover { padding-left: 12px; }
.about-tool-num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--ink-muted);
  align-self: center;
}
.about-tool-name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
}
.about-tool-name em { font-style: italic; color: var(--accent-dark); }
.about-tool-desc {
  font-size: 15px; line-height: 1.5;
  color: var(--ink);
  margin: 0;
  position: relative;
  top: -2px;
}
.about-tool-desc em { font-style: italic; color: var(--ink); }
.about-tool-meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 6px 12px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  white-space: nowrap;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.about-tool-row:hover .about-tool-meta {
  color: var(--accent-dark);
  border-color: var(--accent);
}
@media (max-width: 800px) {
  .about-tool-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--s-3);
  }
  .about-tool-desc { grid-column: 2 / 3; margin-top: 8px; top: 0; }
  .about-tool-meta { grid-column: 2 / 3; justify-self: start; margin-top: 8px; }
}


/* ─── footer ─── */
footer.site-footer {
  position: relative;
  padding: var(--s-7) var(--page-pad) var(--s-5);
  background: #1a1818;
  color: var(--bg);
  overflow: hidden;
}
/* Giant decorative B logo on the right, low opacity */
.footer-mark {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  height: 130%;
  width: auto;
  opacity: 0.06;
  filter: invert(1) brightness(2);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.footer-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  max-width: 70%;
}
.footer-lede {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.footer-lede-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(240, 240, 240, 0.5);
}
.footer-lede-email {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1; letter-spacing: -0.02em;
  color: var(--bg);
  text-decoration: none;
  -webkit-text-stroke: 0;
  text-shadow: none;
  width: fit-content;
  transition: color var(--t-base) var(--ease);
}
.footer-lede-email:hover { color: #DAD2BC; }

.footer-cols {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: var(--s-7);
}
.footer-col-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(240, 240, 240, 0.5);
  margin-bottom: var(--s-3);
}
.footer-nav { display: flex; flex-direction: column; gap: 8px; }
.footer-nav a {
  font-family: var(--mono); font-size: 12px; color: var(--bg);
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
  width: fit-content;
}
.footer-nav a:hover { color: #DAD2BC; }
.footer-contact { display: flex; flex-direction: column; gap: 8px; }
.footer-contact a {
  font-family: var(--mono); font-size: 12px; color: var(--bg);
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
  width: fit-content;
}
.footer-contact a:hover { color: #DAD2BC; }

.footer-bottom {
  font-family: var(--mono); font-size: 11px; color: rgba(240, 240, 240, 0.45);
  letter-spacing: 0.04em;
  padding-top: var(--s-4);
  margin-top: var(--s-3);
  border-top: 1px solid rgba(240, 240, 240, 0.12);
}
@media (max-width: 900px) {
  .footer-inner { max-width: 100%; gap: var(--s-6); }
  .footer-mark { opacity: 0.04; right: -10%; height: 110%; }
}

/* ─── responsive ─── */
@media (max-width: 1100px) {
  section.manifesto { padding: 100px var(--page-pad); }
}
@media (max-width: 900px) {
  :root { --page-pad: 24px; }
  section { padding: 60px var(--page-pad) !important; }
  nav.site-nav { position: sticky; }
  .nav-bar { padding: 18px var(--page-pad); position: relative; }
  nav.site-nav.menu-open { border-bottom-color: transparent; }
  .nav-toggle { display: flex; }
  .nav-available { display: none; }
  .nav-links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(240, 240, 240, 0.95);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--hair);
    padding: 16px var(--page-pad) 40px;
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }
  .nav-links.open {
    opacity: 1; pointer-events: auto; visibility: visible;
  }
  .nav-links a { padding: 12px 0; font-size: 15px; border-bottom: 1px solid var(--hair); }
  .nav-links a:hover { color: var(--accent-dark); }
  section.hero { padding: 24px var(--page-pad) 0 !important; min-height: auto; }
  .manifesto::before, .manifesto::after { left: var(--page-pad); right: var(--page-pad); }
  .work-header, .projects-header, .about-grid {
    grid-template-columns: 1fr !important; gap: 24px !important;
  }
  .work-item { grid-template-columns: 1fr; gap: 8px; }
  .work-arrow { display: none; }
  .about-footer { grid-template-columns: 1fr; }
  .work-footnote { padding-left: 0; }
  .contact-form { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   AXON CASE STUDY — live rebuild of the Figma design
   Dark-green world, scoped entirely under body.case-axon so the
   rest of the portfolio is untouched. Bone hero, then deep green.
   ══════════════════════════════════════════════════════════ */
body.case-axon {
  --ax-green-900: #07120c;   /* page base, darkest */
  --ax-green-800: #0b1d15;   /* section field */
  --ax-green-700: #0f2a1e;   /* raised card */
  --ax-green-600: #16442f;   /* solution card / hover */
  --ax-green-accent: #34c98a;/* bright signal green */
  --ax-mint: #6fe3ad;        /* emphasis text */
  --ax-text: #e9f3ee;        /* primary on dark */
  --ax-text-dim: rgba(233, 243, 238, 0.62);
  --ax-text-faint: rgba(233, 243, 238, 0.40);
  --ax-hair: rgba(233, 243, 238, 0.12);
  --ax-bone: #F0F0F0;        /* hero surface, matched to the site --bg */
  --ax-pad: clamp(20px, 5vw, 120px);
  --ax-maxw: 1320px;

  background: var(--ax-green-900);
  color: var(--ax-text);
  font-family: 'DM Sans', -apple-system, sans-serif;
}
/* the whole Axon case study is set in DM Sans, matching the design */
body.case-axon .ax-section,
body.case-axon .ax-hero,
body.case-axon .ax-casenav,
body.case-axon .ax-footer { font-family: 'DM Sans', -apple-system, sans-serif; }

/* a soft mesh glow living behind the green sections, settling into a solid
   dark base at the bottom so the page resolves into the nav/footer instead of
   the mesh hard-cutting where .ax-wrap ends. The vertical fade is listed first
   so it sits over the mesh and absorbs it as the page approaches the bottom. */
.ax-wrap {
  position: relative;
  overflow: clip;
  background:
    linear-gradient(to bottom, transparent 0%, transparent 95%, var(--ax-green-900) 100%),
    radial-gradient(60% 40% at 80% 12%, rgba(52,201,138,0.10), transparent 70%),
    radial-gradient(50% 35% at 10% 55%, rgba(52,201,138,0.08), transparent 70%),
    radial-gradient(55% 30% at 75% 88%, rgba(52,201,138,0.07), transparent 70%);
}

.ax-section {
  max-width: var(--ax-maxw);
  margin: 0 auto;
  /* bento rhythm: tighter vertical gaps so sections read as one grouped stack */
  padding: clamp(28px, 4vw, 52px) var(--ax-pad);
}
.ax-section:first-of-type { padding-top: clamp(80px, 12vw, 144px); }

/* section eyebrow label: dot + uppercase mono + hairline rule */
.ax-label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.ax-label span {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 400;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ax-text);
  white-space: nowrap;
}
.ax-label span::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ax-green-accent);
}
.ax-label::after { content: ""; height: 1px; background: var(--ax-hair); }

/* reveal: fade + small rise, honours reduced-motion globally already */
body.case-axon .reveal { transform: translateY(20px); }
body.case-axon .reveal.is-visible { transform: translateY(0); }

/* ── HERO (bone surface) ── */
.ax-hero {
  background: var(--ax-bone);
  margin-top: -68px;            /* slide under the sticky nav */
  /* sized to its content (no forced 100vh) so the bento never overflows or leaves
     a dead gap: top padding clears the nav (68) + a 56 gap, bottom padding 56 */
  padding: 134px var(--ax-pad) 66px;
  position: relative;
}
/* full-width bento: 4 orientation boxes on the left, product shot on the right.
   The boxes answer one project-specific question each (product / challenge /
   focus / year), so they orient without repeating the case study below. */
.ax-hero-bento {
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: clamp(10px, 1vw, 14px); align-items: stretch;
}
.ax-bento-left {
  display: grid; grid-template-rows: 1fr 1fr auto;
  gap: clamp(10px, 1vw, 14px);
}
.ax-bento-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1vw, 14px);
}
.ax-bento-box {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid rgba(37, 35, 35, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.35);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.ax-bento-box--tall { min-height: clamp(120px, 14vw, 168px); }
.ax-bento-box:hover { border-color: rgba(37, 35, 35, 0.24); background: rgba(255, 255, 255, 0.55); }
.ax-bento-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted);
}
.ax-bento-text {
  font-family: 'DM Sans', sans-serif; font-weight: 400;
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.3;
  letter-spacing: -0.01em; color: var(--ink);
}
/* the shot keeps its natural aspect and drives the row height; the left column
   stretches to match (align-items: stretch on the grid). object-fit: cover with
   a slight top bias keeps the laptop centred without cropping it. */
.ax-hero-shot { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; }
.ax-hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }

/* stack on narrow screens: boxes above the shot, the bottom pair stays paired */
@media (max-width: 860px) {
  .ax-hero-bento { grid-template-columns: 1fr; }
  .ax-bento-box--tall { min-height: 0; }
}

/* ── ABOUT ── */
.ax-about-image { display: block; width: 100%; height: auto; }
.ax-about-cards {
  /* match the space below the paragraph to the space above it inside the PNG.
     In the export that gap is 224px of a 1680px-wide image = 13.33%, so a
     percentage margin scales in lockstep with the image at every width. */
  margin-top: 13.33%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.ax-card {
  border-radius: 20px; overflow: hidden; aspect-ratio: 920 / 690;
  display: flex; align-items: center; justify-content: center;
}
.ax-card--photo { background: transparent; }
.ax-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* neutral product-screen mockups (clean isolated screens not available as assets) */
.ax-mock--screen {
  border-radius: 16px; overflow: hidden; border: 1px solid var(--ax-hair);
  background: var(--ax-green-700);
}
.ax-screen-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; background: rgba(7,18,12,0.4); border-bottom: 1px solid var(--ax-hair);
  font-family: var(--mono); font-size: 12px; color: var(--ax-text-dim);
}
.ax-screen-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(233,243,238,0.18); }
.ax-screen-bar span { margin: 0 auto; }
.ax-screen-body {
  aspect-ratio: 16 / 10; display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ax-text-faint);
}

/* ── PROBLEM & SOLUTION (exported image, matched to section width) ── */
.ax-ps-image {
  display: block; width: 100%; height: auto;
  border-radius: 24px;
}
/* user-research export has its label dot in the top-left corner — a corner
   radius would clip it, so this one stays square. */
.ax-ps-image--flush { border-radius: 0; }

/* Problem & Solution is split into two exports: the divider/label (-1) and the
   content grid (-2). The divider is a thin strip, so it stays square. */
.ax-ps-divider { display: block; width: 100%; height: auto; }
/* match the divider → content gap to the other label → content rhythm
   (same value as .ax-label margin-bottom) so the section reads like the rest. */
.ax-ps-image--split { margin-top: clamp(28px, 4vw, 44px); border-radius: 0; }

/* ── intro paragraph that precedes research/homepage/pricing ── */
.ax-section-intro {
  font-weight: 300;
  font-size: clamp(18px, 2vw, 22px); line-height: 1.55;
  color: var(--ax-text); max-width: 1100px;
}
.ax-section-intro em { font-style: normal; color: var(--ax-green-accent); }

/* ── annotated mockup sections ── */
.ax-mock {
  position: relative; max-width: var(--ax-maxw); margin: 24px auto 0;
}
.ax-mock img { width: 100%; height: auto; display: block; border-radius: 16px; }
.ax-annotations { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 28px; }
.ax-annotation { font-size: 14px; line-height: 1.5; color: var(--ax-text-dim); padding-top: 18px; border-top: 1px solid var(--ax-hair); }

/* ── stat / meta stickers ── */
.ax-stickers { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; margin-top: clamp(28px,3vw,40px); }
.ax-sticker {
  border-radius: 50%; aspect-ratio: 1; width: clamp(180px, 22vw, 280px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px; padding: 24px;
}
.ax-sticker--ring { border: 1px dashed var(--ax-hair); }
.ax-sticker--solid { background: var(--ax-green-700); border: 1px solid var(--ax-hair); }
.ax-sticker b { font-family: var(--mono); font-size: 22px; font-weight: 500; letter-spacing: 0.02em; }
.ax-sticker span { font-size: 14px; color: var(--ax-text-dim); }

/* ── TESTIMONIAL ── */
.ax-quote {
  background: var(--ax-green-800); border: 1px solid var(--ax-hair);
  border-radius: 24px; padding: clamp(48px, 8vw, 120px) var(--ax-pad);
  max-width: var(--ax-maxw); margin: 0 auto; text-align: left;
}
.ax-quote p {
  font-family: 'DM Sans', sans-serif; font-weight: 700; color: var(--ax-green-accent);
  font-size: clamp(36px, 6vw, 72px); line-height: 1.05; letter-spacing: -0.02em;
  max-width: 14ch;
}

/* ── NAV theming: dark over bone hero, light over green ── */
body.case-axon nav.site-nav.over-light .logo img { filter: none; }
body.case-axon nav.site-nav.over-light .nav-links a { color: var(--ink); }
body.case-axon nav.site-nav.over-light .nav-links a::after { background: var(--ink); }
body.case-axon nav.site-nav.over-light .nav-toggle span { background: var(--ink); }
body.case-axon nav.site-nav:not(.over-light) .logo img { filter: invert(1) brightness(1.6); }
body.case-axon nav.site-nav:not(.over-light) .nav-links a { color: rgba(233,243,238,0.92); }
body.case-axon nav.site-nav:not(.over-light) .nav-links a::after { background: rgba(233,243,238,0.92); }
body.case-axon nav.site-nav:not(.over-light) .nav-links a.active { color: var(--ax-green-accent); }
body.case-axon nav.site-nav:not(.over-light) .nav-toggle span { background: rgba(233,243,238,0.92); }
body.case-axon nav.site-nav.scrolled:not(.over-light) .nav-bar {
  background: rgba(7,18,12,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(233,243,238,0.08);
}
/* Over the bone hero (top of page), the nav-bar must use light glass to match
   the bone surface. Without this it falls through to the generic has-dark-hero
   rule (dark glass), which reads too dark over the light hero. */
body.case-axon nav.site-nav.over-light .nav-bar {
  background: rgba(224,227,226,0.55);
  border-bottom-color: rgba(37,35,35,0.08);
}

/* ── case prev/next + footer ── */
/* Axon's case-nav: transparent (sits on the green page), white links that go
   signal-green on hover. The resting underline is hidden and reveals on hover —
   one coherent gesture, and far higher contrast than the default --ink links
   (which vanished on the dark green). */
body.case-axon .case-nav {
  background: transparent;
  border-top-color: var(--ax-hair);
}
body.case-axon .case-nav a {
  color: var(--ax-text);
  border-bottom-color: transparent;
  transition: color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
body.case-axon .case-nav a:hover,
body.case-axon .case-nav a:focus-visible {
  color: var(--ax-green-accent);
  border-bottom-color: var(--ax-green-accent);
}
body.case-axon .case-nav a:focus-visible {
  outline: 2px solid var(--ax-green-accent);
  outline-offset: 4px;
  border-radius: 2px;
}
/* Axon uses the same footer as the homepage, tinted into the project's green
   world instead of the site's #1a1818 band. Only colours change; structure is
   identical to .site-footer everywhere else. */
body.case-axon .site-footer { background: var(--ax-green-800); }
body.case-axon .footer-mark { filter: invert(1) brightness(2) sepia(1) hue-rotate(90deg); }
body.case-axon .footer-lede-email { color: var(--ax-text); }
body.case-axon .footer-lede-email:hover,
body.case-axon .footer-nav a:hover,
body.case-axon .footer-contact a:hover { color: var(--ax-green-accent); }
body.case-axon .footer-nav a,
body.case-axon .footer-contact a { color: var(--ax-text); }
body.case-axon .footer-bottom { border-top-color: var(--ax-hair); }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .ax-about-cards { grid-template-columns: 1fr; }
  .ax-quote p { max-width: none; }
}

/* ══════════════════════════════════════════════════════════
   NIMBUS CASE STUDY — weather app, self-initiated.
   Navy/grey world (Yankees Blue base), set in Lato to rhyme with
   the app itself. Scoped under body.case-nimbus. Mirrors the Axon
   architecture: bento hero, themed wrap with bottom fade, themed
   nav / case-nav / footer.
   ══════════════════════════════════════════════════════════ */
body.case-nimbus {
  --nm-navy-900: #0E283C;    /* page base (Yankees Blue) */
  --nm-navy-800: #143247;    /* section field / raised */
  --nm-navy-700: #1d4259;    /* card / hover */
  --nm-accent: #7fb2d9;      /* sky-blue signal */
  --nm-text: #F9F9F9;        /* ghost white, primary on dark */
  --nm-text-dim: rgba(249, 249, 249, 0.64);
  --nm-text-faint: rgba(249, 249, 249, 0.40);
  --nm-hair: rgba(249, 249, 249, 0.14);
  --nm-bone: #F0F0F0;        /* hero surface, matched to the site --bg (like Axon) */
  --nm-pad: clamp(20px, 5vw, 120px);
  --nm-maxw: 1320px;

  /* vertical gradient, light at top to dark at bottom (Figma stops, flipped so
     the light stone tone sits up top and resolves into the deep navy below).
     Sized to the full document so the fade spans the whole page, not per-screen. */
  background:
    linear-gradient(to bottom,
      #9BA8AB 0%,
      #4A5C6A 25%,
      #253745 49%,
      #11212D 73%,
      var(--nm-navy-900) 100%) no-repeat;
  background-size: 100% 100%;
  color: var(--nm-text);
  font-family: 'Lato', -apple-system, sans-serif;
}
body.case-nimbus .nm-hero,
body.case-nimbus .nm-images,
body.case-nimbus .case-nav,
body.case-nimbus .site-footer { font-family: 'Lato', -apple-system, sans-serif; }

body.case-nimbus .reveal { transform: translateY(20px); }
body.case-nimbus .reveal.is-visible { transform: translateY(0); }

/* ── HERO (light bone surface, like Axon) ── */
.nm-hero {
  background: var(--nm-bone);
  margin-top: -68px;            /* slide under the sticky nav */
  padding: 134px var(--nm-pad) 66px;  /* content-sized, balanced gaps (see .ax-hero) */
  position: relative;
}
.nm-hero-bento {
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: clamp(10px, 1vw, 14px); align-items: stretch;
}
.nm-bento-left {
  display: grid; grid-template-rows: 1fr 1fr auto;
  gap: clamp(10px, 1vw, 14px);
}
.nm-bento-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1vw, 14px);
}
.nm-bento-box {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid rgba(37, 35, 35, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.35);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.nm-bento-box--tall { min-height: clamp(120px, 14vw, 168px); }
.nm-bento-box:hover { border-color: rgba(37, 35, 35, 0.24); background: rgba(255, 255, 255, 0.55); }
.nm-bento-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted);
}
.nm-bento-text {
  font-family: 'Lato', sans-serif; font-weight: 400;
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.3;
  letter-spacing: -0.01em; color: var(--ink);
}
/* hero shot: the clean phone-on-stone mockup, filling the right column */
.nm-hero-shot { border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; }
.nm-hero-shot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%; display: block;
}

/* ── BODY (themed image flow) ── */
/* transparent so the body's top-to-bottom gradient shows through unbroken */
.nm-wrap {
  position: relative; overflow: clip;
  background: transparent;
}
.nm-images {
  max-width: var(--nm-maxw); margin: 0 auto;
  padding: clamp(96px, 14vw, 192px) var(--nm-pad) clamp(48px, 7vw, 100px);
  display: flex; flex-direction: column; gap: clamp(48px, 6vw, 88px);
}
.nm-images img {
  width: 100%; height: auto; display: block; border-radius: 12px;
}

/* ── NAV: dark over the bone hero, light over the navy below (like Axon) ── */
/* over the bone hero: dark text + light glass bar */
body.case-nimbus nav.site-nav.over-light .nav-bar {
  background: rgba(240,240,240,0.55);
  border-bottom-color: rgba(37,35,35,0.08);
}
body.case-nimbus nav.site-nav.over-light .logo img { filter: none; }
body.case-nimbus nav.site-nav.over-light .nav-links a { color: var(--ink); }
body.case-nimbus nav.site-nav.over-light .nav-links a::after { background: var(--ink); }
body.case-nimbus nav.site-nav.over-light .nav-toggle span { background: var(--ink); }
/* into the navy: light text + navy glass bar */
body.case-nimbus nav.site-nav:not(.over-light) .logo img { filter: invert(1) brightness(2); }
body.case-nimbus nav.site-nav:not(.over-light) .nav-links a { color: rgba(249,249,249,0.92); }
body.case-nimbus nav.site-nav:not(.over-light) .nav-links a::after { background: rgba(249,249,249,0.92); }
body.case-nimbus nav.site-nav:not(.over-light) .nav-links a.active { color: var(--nm-accent); }
body.case-nimbus nav.site-nav:not(.over-light) .nav-toggle span { background: rgba(249,249,249,0.92); }
body.case-nimbus nav.site-nav.scrolled:not(.over-light) .nav-bar {
  background: rgba(14,40,60,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--nm-hair);
}

/* ── CASE-NAV: transparent, white links, sky-blue on hover ── */
body.case-nimbus .case-nav { background: transparent; border-top-color: var(--nm-hair); }
body.case-nimbus .case-nav a {
  color: var(--nm-text); border-bottom-color: transparent;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
body.case-nimbus .case-nav a:hover,
body.case-nimbus .case-nav a:focus-visible {
  color: var(--nm-accent); border-bottom-color: var(--nm-accent);
}
body.case-nimbus .case-nav a:focus-visible {
  outline: 2px solid var(--nm-accent); outline-offset: 4px; border-radius: 2px;
}

/* ── FOOTER: homepage footer tinted into the navy world ── */
body.case-nimbus .site-footer { background: var(--nm-navy-800); }
body.case-nimbus .footer-mark { filter: invert(1) brightness(2) sepia(1) hue-rotate(170deg) saturate(0.6); }
body.case-nimbus .footer-lede-email { color: var(--nm-text); }
body.case-nimbus .footer-lede-email:hover,
body.case-nimbus .footer-nav a:hover,
body.case-nimbus .footer-contact a:hover { color: var(--nm-accent); }
body.case-nimbus .footer-nav a,
body.case-nimbus .footer-contact a { color: var(--nm-text); }
body.case-nimbus .footer-bottom { border-top-color: var(--nm-hair); }

@media (max-width: 860px) {
  .nm-hero-bento { grid-template-columns: 1fr; }
  .nm-bento-box--tall { min-height: 0; }
  .nm-hero-placeholder { min-height: 220px; }
}

/* ══════════════════════════════════════════════════════════
   FITSYNC CASE STUDY — fitness platform marketing site.
   Raisin-Black world with blue + gold accents, set in Raleway /
   Open Sans (the site's own type). Scoped under body.case-fitsync.
   Same architecture as Axon/Nimbus: light bone hero with the 4-box
   bento, then the dark world below with a bottom fade.
   ══════════════════════════════════════════════════════════ */
body.case-fitsync {
  --fs-page: #F3F9FF;        /* light body base (airy blue-white) */
  --fs-blue: #3880F5;        /* Bleu De France, primary accent */
  --fs-indigo: #1D1F51;      /* deep indigo, blob gradient end */
  --fs-gold: #FAB528;        /* Lightning Yellow, secondary accent */
  --fs-text: #222222;        /* Raisin Black, primary on light */
  --fs-text-dim: rgba(34, 34, 34, 0.64);
  --fs-text-faint: rgba(34, 34, 34, 0.40);
  --fs-hair: rgba(34, 34, 34, 0.12);
  --fs-bone: #F0F0F0;        /* hero surface, matched to the site --bg */
  --fs-pad: clamp(20px, 5vw, 120px);
  --fs-maxw: 1320px;

  background: var(--fs-page);
  color: var(--fs-text);
  font-family: 'Open Sans', -apple-system, sans-serif;
}
body.case-fitsync .fs-hero,
body.case-fitsync .fs-images,
body.case-fitsync .case-nav,
body.case-fitsync .site-footer { font-family: 'Open Sans', -apple-system, sans-serif; }

body.case-fitsync .reveal { transform: translateY(20px); }
body.case-fitsync .reveal.is-visible { transform: translateY(0); }

/* ── HERO (light bone surface, like Axon/Nimbus) ── */
.fs-hero {
  background: var(--fs-bone);
  margin-top: -68px;
  padding: 134px var(--fs-pad) 66px;  /* content-sized, balanced gaps (see .ax-hero) */
  position: relative;
}
.fs-hero-bento {
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: clamp(10px, 1vw, 14px); align-items: stretch;
}
.fs-bento-left {
  display: grid; grid-template-rows: 1fr 1fr auto;
  gap: clamp(10px, 1vw, 14px);
}
.fs-bento-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1vw, 14px);
}
.fs-bento-box {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid rgba(37, 35, 35, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.35);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.fs-bento-box--tall { min-height: clamp(120px, 14vw, 168px); }
.fs-bento-box:hover { border-color: rgba(37, 35, 35, 0.24); background: rgba(255, 255, 255, 0.55); }
.fs-bento-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted);
}
.fs-bento-text {
  font-family: 'Raleway', sans-serif; font-weight: 600;
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.3;
  letter-spacing: -0.01em; color: var(--ink);
}
.fs-hero-shot { border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; }
.fs-hero-shot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%; display: block;
}

/* ── BODY (dark world, themed image flow with bottom fade) ── */
/* light body with soft, layer-blurred blue blobs floating behind the content */
.fs-wrap {
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.fs-wrap::before,
.fs-wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.28;
  background: linear-gradient(135deg, var(--fs-blue), var(--fs-indigo));
}
.fs-wrap::before {
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  top: 4%; right: -8%;
  opacity: 0.10;   /* sits behind the design-process block at the top; kept fainter */
}
.fs-wrap::after {
  width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
  top: 52%; left: -10%;
  opacity: 0.05;
}
.fs-images {
  max-width: var(--fs-maxw); margin: 0 auto;
  padding: clamp(96px, 14vw, 192px) var(--fs-pad) clamp(48px, 7vw, 100px);
  display: flex; flex-direction: column; gap: clamp(72px, 9vw, 128px);
}
/* The content mixes light- and dark-background exports, so no single page colour
   separates them all. A hairline edge keeps the light-bg ones from bleeding into
   #F3F9FF; images that already read cleanly flush carry .fs-flush to drop it. */
.fs-images img {
  width: 100%; height: auto; display: block;
  border-radius: 16px;
  border: 1px solid rgba(34, 34, 34, 0.08);
}
/* flush images carry no border AND no radius: the rounded-corner clip on a
   downscaled image leaves a faint white anti-alias fringe, so square corners
   keep these (already self-contained) exports clean. */
.fs-images img.fs-flush { border: none; border-radius: 0; }
/* a framed wrapper for the transparent typography PNG: the hairline + radius live
   on the frame; it stays transparent so the light page shows through the image's
   transparency. 120px top/bottom padding gives breathing room inside the outline.
   The image's baked-in empty top band is cropped with a negative margin clipped
   by the frame's overflow. */
.fs-pad-frame {
  border-radius: 16px;
  border: 1px solid rgba(34, 34, 34, 0.08);
  padding: 70px 0;
  overflow: hidden;
}
.fs-pad-frame img {
  width: 100%; height: auto; display: block;
  border: none; border-radius: 0;
  margin-top: -27%;    /* crop the transparent top band */
}

/* ── NAV: dark text throughout (both hero and body are light). The
   has-dark-hero global forces white text while :not(.scrolled), so we scope
   these :not(.scrolled) to win on specificity and keep the text dark. ── */
body.case-fitsync nav.site-nav:not(.scrolled) .logo img { filter: none; }
body.case-fitsync nav.site-nav:not(.scrolled) .nav-links a { color: var(--ink); }
body.case-fitsync nav.site-nav:not(.scrolled) .nav-links a::after { background: var(--ink); }
body.case-fitsync nav.site-nav:not(.scrolled) .nav-links a.active { color: var(--fs-blue); }
body.case-fitsync nav.site-nav:not(.scrolled) .nav-toggle span { background: var(--ink); }
body.case-fitsync nav.site-nav .logo img { filter: none; }
body.case-fitsync nav.site-nav .nav-links a { color: var(--ink); }
body.case-fitsync nav.site-nav .nav-links a::after { background: var(--ink); }
body.case-fitsync nav.site-nav .nav-links a.active { color: var(--fs-blue); }
body.case-fitsync nav.site-nav .nav-toggle span { background: var(--ink); }
body.case-fitsync nav.site-nav.over-light .nav-bar {
  background: rgba(240,240,240,0.55);
  border-bottom-color: rgba(37,35,35,0.08);
}
body.case-fitsync nav.site-nav.scrolled:not(.over-light) .nav-bar {
  background: rgba(243,249,255,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fs-hair);
}

/* ── CASE-NAV: transparent, white links, blue on hover ── */
body.case-fitsync .case-nav { background: transparent; border-top-color: var(--fs-hair); }
body.case-fitsync .case-nav a {
  color: var(--fs-text); border-bottom-color: transparent;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
body.case-fitsync .case-nav a:hover,
body.case-fitsync .case-nav a:focus-visible {
  color: var(--fs-blue); border-bottom-color: var(--fs-blue);
}
body.case-fitsync .case-nav a:focus-visible {
  outline: 2px solid var(--fs-blue); outline-offset: 4px; border-radius: 2px;
}

/* ── FOOTER: light band on the light world, dark text, blue hovers ── */
body.case-fitsync .site-footer { background: #E8EFFA; color: var(--fs-text); }
body.case-fitsync .footer-mark { filter: none; opacity: 0.06; }
body.case-fitsync .footer-lede-label,
body.case-fitsync .footer-col-label { color: var(--fs-text-dim); }
body.case-fitsync .footer-lede-email { color: var(--fs-text); }
body.case-fitsync .footer-lede-email:hover,
body.case-fitsync .footer-nav a:hover,
body.case-fitsync .footer-contact a:hover { color: var(--fs-blue); }
body.case-fitsync .footer-nav a,
body.case-fitsync .footer-contact a { color: var(--fs-text); }
body.case-fitsync .footer-bottom { color: var(--fs-text-dim); border-top-color: var(--fs-hair); }

@media (max-width: 860px) {
  .fs-hero-bento { grid-template-columns: 1fr; }
  .fs-bento-box--tall { min-height: 0; }
}

/* ══════════════════════════════════════════════════════════
   EVERGREEN CASE STUDY — personal finance companion.
   Smoky-black world with an acid-green signal, set in PT Root UI
   (the product's own type). Scoped under body.case-evergreen.
   Same architecture as Nimbus/Axon: light bone hero with the 4-box
   bento, then the dark world below, with a flipping nav.
   ══════════════════════════════════════════════════════════ */
body.case-evergreen {
  --eg-smoky: #0D0D0D;       /* page base (Smoky Black) */
  --eg-charcoal: #161616;    /* section field / raised */
  --eg-jungle: #1C2911;      /* dark jungle green, deep accent */
  --eg-acid: #B2C714;        /* Acid Green, primary signal */
  --eg-mindaro: #E7F47E;     /* pale lime, active pop on dark */
  --eg-olive: #738206;       /* olive, blob gradient end */
  --eg-text: #F0F0F0;        /* anti-flash white, primary on dark */
  --eg-text-dim: rgba(240, 240, 240, 0.64);
  --eg-text-faint: rgba(240, 240, 240, 0.40);
  --eg-hair: rgba(240, 240, 240, 0.14);
  --eg-bone: #F0F0F0;        /* hero surface, matched to the site --bg */
  --eg-pad: clamp(20px, 5vw, 120px);
  --eg-maxw: 1320px;

  /* solid dark-jungle body; the hero sits on its own bone surface above, and
     the .eg-wrap blobs add the only atmosphere (like FitSync) */
  background: #191F15;
  color: var(--eg-text);
  font-family: 'PT Root UI', -apple-system, sans-serif;
}
body.case-evergreen .eg-hero,
body.case-evergreen .eg-images,
body.case-evergreen .case-nav,
body.case-evergreen .site-footer { font-family: 'PT Root UI', -apple-system, sans-serif; }

body.case-evergreen .reveal { transform: translateY(20px); }
body.case-evergreen .reveal.is-visible { transform: translateY(0); }

/* ── HERO (light bone surface, like Nimbus/Axon) ── */
.eg-hero {
  background: var(--eg-bone);
  margin-top: -68px;            /* slide under the sticky nav */
  padding: 134px var(--eg-pad) 66px;  /* content-sized, balanced gaps (see .ax-hero) */
  position: relative;
}
.eg-hero-bento {
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: clamp(10px, 1vw, 14px); align-items: stretch;
}
.eg-bento-left {
  display: grid; grid-template-rows: 1fr 1fr auto;
  gap: clamp(10px, 1vw, 14px);
}
.eg-bento-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1vw, 14px);
}
.eg-bento-box {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid rgba(37, 35, 35, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.35);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.eg-bento-box--tall { min-height: clamp(120px, 14vw, 168px); }
.eg-bento-box:hover { border-color: rgba(37, 35, 35, 0.24); background: rgba(255, 255, 255, 0.55); }
.eg-bento-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted);
}
.eg-bento-text {
  font-family: 'PT Root UI', sans-serif; font-weight: 500;
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.3;
  letter-spacing: -0.01em; color: var(--ink);
}
/* hero shot: the marketing-site mockup, filling the right column */
.eg-hero-shot { border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; }
.eg-hero-shot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%; display: block;
}

/* ── BODY (dark world, themed image flow) ── */
/* transparent so the body's top-to-bottom gradient shows through unbroken;
   acid-green blobs float behind the content for atmosphere */
.eg-wrap {
  position: relative; overflow: clip; isolation: isolate;
  background: transparent;
}
.eg-wrap::before,
.eg-wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  background: linear-gradient(135deg, var(--eg-acid), var(--eg-olive));
}
.eg-wrap::before {
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  top: 6%; right: -8%; opacity: 0.16;   /* lifted: acid-green on a dark base reads faint */
}
.eg-wrap::after {
  width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
  top: 54%; left: -10%; opacity: 0.12;
}
.eg-images {
  max-width: var(--eg-maxw); margin: 0 auto;
  padding: clamp(96px, 14vw, 192px) var(--eg-pad) clamp(48px, 7vw, 100px);
  display: flex; flex-direction: column; gap: clamp(48px, 6vw, 88px);
}
.eg-images img {
  width: 100%; height: auto; display: block; border-radius: 12px;
}
/* the onboarding-flow export has a dark-jungle background that nearly matches
   the body, so its edge disappears; a faint hairline gives it a contained frame */
.eg-images img.eg-stroke {
  border: 1px solid rgba(240, 240, 240, 0.10);
}

/* ── NAV: dark over the bone hero, light over the smoky body (like Nimbus) ── */
/* over the bone hero: dark text + light glass bar */
body.case-evergreen nav.site-nav.over-light .nav-bar {
  background: rgba(240,240,240,0.55);
  border-bottom-color: rgba(37,35,35,0.08);
}
body.case-evergreen nav.site-nav.over-light .logo img { filter: none; }
body.case-evergreen nav.site-nav.over-light .nav-links a { color: var(--ink); }
body.case-evergreen nav.site-nav.over-light .nav-links a::after { background: var(--ink); }
body.case-evergreen nav.site-nav.over-light .nav-links a.active { color: var(--eg-olive); }
body.case-evergreen nav.site-nav.over-light .nav-toggle span { background: var(--ink); }
/* into the smoky body: light text + smoky glass bar */
body.case-evergreen nav.site-nav:not(.over-light) .logo img { filter: invert(1) brightness(2); }
body.case-evergreen nav.site-nav:not(.over-light) .nav-links a { color: rgba(240,240,240,0.92); }
body.case-evergreen nav.site-nav:not(.over-light) .nav-links a::after { background: rgba(240,240,240,0.92); }
body.case-evergreen nav.site-nav:not(.over-light) .nav-links a.active { color: var(--eg-acid); }
body.case-evergreen nav.site-nav:not(.over-light) .nav-toggle span { background: rgba(240,240,240,0.92); }
body.case-evergreen nav.site-nav.scrolled:not(.over-light) .nav-bar {
  background: rgba(13,13,13,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--eg-hair);
}

/* ── CASE-NAV: transparent, white links, acid-green on hover ── */
body.case-evergreen .case-nav { background: transparent; border-top-color: var(--eg-hair); }
body.case-evergreen .case-nav a {
  color: var(--eg-text); border-bottom-color: transparent;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
body.case-evergreen .case-nav a:hover,
body.case-evergreen .case-nav a:focus-visible {
  color: var(--eg-acid); border-bottom-color: var(--eg-acid);
}
body.case-evergreen .case-nav a:focus-visible {
  outline: 2px solid var(--eg-acid); outline-offset: 4px; border-radius: 2px;
}

/* ── FOOTER: homepage footer tinted into the smoky world ── */
body.case-evergreen .site-footer { background: var(--eg-charcoal); }
body.case-evergreen .footer-mark { filter: invert(1) brightness(2); opacity: 0.06; }
body.case-evergreen .footer-lede-label,
body.case-evergreen .footer-col-label { color: var(--eg-text-dim); }
body.case-evergreen .footer-lede-email { color: var(--eg-text); }
body.case-evergreen .footer-lede-email:hover,
body.case-evergreen .footer-nav a:hover,
body.case-evergreen .footer-contact a:hover { color: var(--eg-acid); }
body.case-evergreen .footer-nav a,
body.case-evergreen .footer-contact a { color: var(--eg-text); }
body.case-evergreen .footer-bottom { color: var(--eg-text-dim); border-top-color: var(--eg-hair); }

@media (max-width: 860px) {
  .eg-hero-bento { grid-template-columns: 1fr; }
  .eg-bento-box--tall { min-height: 0; }
}