/* ============================================================
   ANDRE MELENDRES · PORTFOLIO
   Restrained, Ive-leaning sensibility
   - SF-stack display, hairlines, monochrome
   - Generous whitespace, minimal motion, no ornament
   ============================================================ */

:root {
  /* Inter (loaded) preferred for cross-platform consistency, with SF as a fallback on Apple devices. */
  --display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --text:    'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',    system-ui, sans-serif;
  --serif:   'Newsreader', 'New York', ui-serif, Georgia, serif;
  --mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Layout */
  --gutter: 48px;

  /* Monograph palette — charcoal tonal layers, near-black depth. */
  --bg:        #08080a;          /* deepest */
  --bg-2:      #0f0f12;          /* charcoal */
  --surface:   #16161b;          /* graphite panel */
  --surface-2: #1c1c22;          /* raised graphite */
  --ink:       #f2f1ee;          /* warm white */
  --ink-2:     #b8b6b1;          /* soft warm gray */
  --ink-dim:   #7a7873;          /* secondary */
  --ink-faint: #45433f;          /* faint */
  --hairline:  rgba(255,253,247,0.06);
  --hairline-2:rgba(255,253,247,0.10);
  --accent:    #c8a877;          /* muted titanium-bronze */
  --accent-2:  #8a7654;          /* deeper bronze */
  --portrait-filter: grayscale(1) contrast(1.06);
  --grain-opacity: 0.028;

  /* Soft falloff used in hero and capability tiles */
  --falloff: radial-gradient(120% 80% at 30% 0%, rgba(255,253,247,0.04), transparent 60%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'ss01', 'cv11';
  transition: background 0.6s ease, color 0.6s ease;
}
::selection { background: var(--accent); color: var(--bg); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.root { position: relative; min-height: 100vh; }

/* Subtle grain only — no ambient color glows. */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: var(--grain-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* LAYOUT */
.wrap {
  position: relative; z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 900px) { .wrap { padding: 0 28px; } :root { --gutter: 28px; } }
@media (max-width: 540px) { .wrap { padding: 0 20px; } :root { --gutter: 20px; } }

.section { padding: 180px 0 60px; position: relative; }
@media (max-width: 720px) { .section { padding: 120px 0 40px; } }

/* ============================================================
   NAV — quiet, hairline only when scrolled
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
.nav-scrolled {
  background: color-mix(in oklch, var(--bg) 78%, transparent);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom-color: var(--hairline);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 18px 48px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 13px;
}
@media (max-width: 1100px) { .nav-inner { grid-template-columns: 1fr auto; } }
@media (max-width: 900px) { .nav-inner { padding: 16px 28px; } }
@media (max-width: 540px) { .nav-inner { padding: 14px 20px; } }

.nav-mark {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 500; font-size: 14px; letter-spacing: -0.01em;
}
.mark-name { color: var(--ink-dim); font-weight: 400; }
@media (max-width: 720px) { .mark-name { display: none; } }

.nav-links {
  display: flex; gap: 28px; justify-content: center;
}
.nav-links a {
  color: var(--ink-dim);
  font-size: 13px; font-weight: 400;
  letter-spacing: -0.005em;
  transition: color 0.3s ease;
}
.nav-links a:hover { color: var(--ink); }
@media (max-width: 1100px) { .nav-links { display: none; } }

.nav-side {
  display: flex; justify-content: flex-end; gap: 18px; align-items: center;
  font-size: 12px; color: var(--ink-dim);
  letter-spacing: -0.005em;
}
.nav-clock { font-feature-settings: 'tnum'; }
.nav-status { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 1100px) { .nav-side { display: none; } }

.pulse {
  display: inline-block; width: 6px; height: 6px;
  background: #30d158; border-radius: 50%;
  box-shadow: 0 0 0 0 #30d158;
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(48,209,88,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(48,209,88,0); }
  100% { box-shadow: 0 0 0 0 rgba(48,209,88,0); }
}

/* ============================================================
   HERO — full-bleed cinematic
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

/* Portrait anchored on the RIGHT, larger, fully visible */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-bg img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: clamp(72px, 7vw, 140px);
  width: 72%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  filter: grayscale(1) contrast(1.06) brightness(0.94);
  transform: translate(var(--px, 0), var(--py, 0));
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
@media (max-width: 1100px) {
  .hero-bg img { width: 75%; right: 4vw; }
}
@media (max-width: 900px) {
  .hero-bg img { width: 84%; right: 2vw; }
}
@media (max-width: 720px) {
  .hero-bg img { width: 100%; right: 0; object-fit: cover; opacity: 0.55; }
}

/* Cinematic shading — left column stays dark for type legibility, soft falloff into the portrait */
.hero-bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.94) 0%,
      rgba(0,0,0,0.80) 24%,
      rgba(0,0,0,0.45) 38%,
      rgba(0,0,0,0.12) 50%,
      rgba(0,0,0,0)    62%);
  pointer-events: none;
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    /* gentle bottom shade — much softer than before */
    radial-gradient(140% 60% at 50% 110%, rgba(0,0,0,0.30), transparent 55%),
    radial-gradient(80% 50% at 50% 0%,    rgba(0,0,0,0.30), transparent 60%),
    /* right-edge fade so the portrait blends back into the page */
    linear-gradient(270deg, rgba(8,8,10,0.6) 0%, rgba(8,8,10,0.25) 6%, rgba(8,8,10,0) 14%);
  pointer-events: none;
}

/* Top frame strip */
.hero-stamp {
  position: absolute;
  top: 96px;
  left: 0; right: 0;
  z-index: 3;
  padding: 0 var(--gutter);
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  font-weight: 500;
  text-transform: uppercase;
  opacity: 0.85;
}
.hero-stamp::before {
  content: ''; position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: -14px; height: 1px;
  background: rgba(255,255,255,0.10);
}
@media (max-width: 720px) { .hero-stamp { flex-direction: column; gap: 6px; top: 88px; } }

/* Composition zone — the dark left side */
.hero-typeblock {
  position: relative;
  z-index: 2;
  margin-left: 0;
  padding-left: clamp(140px, 14vw, 260px);
  padding-right: clamp(28px, 3vw, 56px);
  padding-top: clamp(184px, 25.3vh, 276px);
  padding-bottom: clamp(120px, 18vh, 200px);
  max-width: 56%;
}
@media (max-width: 1100px) { .hero-typeblock { max-width: 56%; } }
@media (max-width: 900px)  { .hero-typeblock { max-width: 64%; } }
@media (max-width: 720px)  { .hero-typeblock { max-width: 100%; padding-top: 160px; padding-bottom: 140px; } }

.hero-logo {
  display: block;
  margin-bottom: clamp(20px, 2.4vh, 32px);
  width: clamp(72px, 8vw, 112px);
  height: auto;
  line-height: 0;
}
.hero-logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
  user-select: none;
  -webkit-user-drag: none;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px;
  color: rgba(255,255,255,0.78);
  font-weight: 500;
  margin-bottom: 28px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-eyebrow .rule { background: rgba(200,168,119,0.6); width: 32px; }
.rule { width: 28px; height: 1px; background: var(--ink-faint); display: inline-block; }

.hero-name {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.94;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  margin-bottom: 24px;
  color: #fff;
  text-shadow: 0 2px 40px rgba(0,0,0,0.45);
  --mx: 0; --my: 0;
}
.hero-row { display: block; }
.hero-word {
  display: inline-block;
  transform: translate(calc(var(--mx) * 4px), calc(var(--my) * 3px));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-row-2 {
  font-family: var(--display);
  font-style: normal;
  font-weight: 200;
  color: rgba(255,255,255,0.86);
  letter-spacing: -0.05em;
}

.hero-roles {
  display: flex; flex-wrap: wrap; gap: 12px 22px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.92);
  margin-bottom: 28px;
}
.hero-roles .dim { color: rgba(255,255,255,0.55); }

.hero-tag {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  max-width: 520px;
  color: rgba(255,255,255,0.78);
  margin-bottom: 40px;
  letter-spacing: -0.005em;
}

/* Iconic meta strip — small bronze line marks + value */
.hero-meta {
  display: grid; grid-template-columns: repeat(3, max-content); gap: 44px;
  padding-top: 32px;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.14);
  max-width: none;
}
@media (max-width: 720px) { .hero-meta { grid-template-columns: 1fr 1fr; gap: 22px 28px; } }

.meta {
  display: flex; align-items: flex-start; gap: 12px;
}
.meta-icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 2px;
}
.meta-icon svg { width: 100%; height: 100%; }
.meta-body { display: flex; flex-direction: column; gap: 2px; }
.meta-label {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.meta-value {
  font-size: 13px;
  color: #fff;
  font-weight: 400;
  display: inline-flex; align-items: center; gap: 8px;
  font-feature-settings: 'tnum';
  letter-spacing: -0.005em;
}

/* Old portrait styles — no longer used (kept dormant for safety) */
.hero-portrait { display: none; }

/* Scroll cue at the bottom of the hero */
.hero-foot {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: 36px;
  z-index: 3;
  display: flex; align-items: center; gap: 16px;
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.foot-rule { flex: 1; height: 1px; background: rgba(255,255,255,0.16); }
.foot-label { animation: nudge 2.4s ease-in-out infinite; }
.foot-arrow { color: var(--accent); }
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* ============================================================
   SECTION HEAD
   ============================================================ */
.section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 48px;
  align-items: baseline;
  margin-bottom: 80px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; gap: 14px; }
}
.section-head-l { display: flex; align-items: baseline; gap: 16px; }
.section-num {
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
  font-feature-settings: 'tnum';
  letter-spacing: 0.04em;
}
.section-eyebrow {
  font-size: 12px; font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: -0.005em;
}
.section-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(36px, 5.5vw, 64px);
  letter-spacing: -0.04em;
  line-height: 1;
  text-align: left;
  color: var(--ink);
}
.section-right {
  font-size: 12px;
  color: var(--ink-faint);
  text-align: right;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ============================================================
   INDEX TABLE OF CONTENTS
   ============================================================ */
.toc {
  display: flex; flex-direction: column;
}
.toc-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto auto;
  gap: 24px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  cursor: pointer;
  transition: padding 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.4s;
}
.toc-row:hover { padding-left: 12px; }

@media (max-width: 720px) {
  .toc-row {
    grid-template-columns: 36px 1fr;
    gap: 14px;
  }
  .toc-row .toc-dots, .toc-row .toc-tag, .toc-row .toc-year { display: none; }
}

.toc-n {
  font-size: 12px; color: var(--ink-faint);
  font-feature-settings: 'tnum';
  font-weight: 500;
  letter-spacing: 0.02em;
}
.toc-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.03em;
  color: var(--ink);
  transition: color 0.4s;
}
.toc-row:hover .toc-title { color: var(--ink); }
.toc-dots {
  display: block;
  height: 1px;
  border-bottom: 1px dotted var(--ink-faint);
  margin: 0 4px;
  align-self: center;
}
.toc-tag {
  font-size: 12px;
  color: var(--ink-dim);
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.toc-year {
  font-size: 12px;
  color: var(--ink-faint);
  font-feature-settings: 'tnum';
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ============================================================
   CHAPTERS REEL — quieter plates
   ============================================================ */
.section-reel { padding-bottom: 0; }
#showcase { padding-top: 24px; }
.chapters-pin {
  position: relative;
  height: 250vh;
}
.chapters-pin-inner {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding-top: 40px;
  padding-bottom: 40px;
}
.chapters-pin-inner > * { width: 100%; }

.fan-stage {
  --fan-step: 5.75deg;
  position: relative;
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 24px;
  overflow: visible;
  perspective: 1200px;
  perspective-origin: 50% 45%;
}
.fan {
  position: relative;
  width: 300px;
  height: 560px;
  transform-style: preserve-3d;
}
.fan-card {
  position: absolute;
  inset: 0;
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.fan-card-inner {
  width: 100%;
  height: 100%;
  transform-origin: 50% 1500px;
  transition:
    transform 0.7s cubic-bezier(0.22, 0.7, 0.2, 1),
    filter 0.5s ease;
  will-change: transform, filter;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.fan-card.is-active { z-index: 60; }
/* Hover lifts a side card to full brightness without fighting the fan rotation */
.fan-card:not(.is-active):hover .fan-card-inner { filter: none !important; }
.fan-card:hover .chapter {
  border-color: rgba(200,168,119,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,253,247,0.08),
    0 36px 80px -30px rgba(0,0,0,0.7);
  transform: none;
}

.fan-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 28px;
  margin-top: 8px;
}
.fan-counter {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--display);
  font-weight: 200;
  letter-spacing: -0.02em;
}
.fan-counter-current { font-size: 36px; color: var(--ink); }
.fan-counter-divider, .fan-counter-total { font-size: 22px; color: var(--ink-faint); }

.reel-btn {
  width: 44px; height: 44px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
}
.reel-btn:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

@media (max-width: 900px) {
  .fan-stage { --fan-step: 4.6deg; height: 560px; padding-top: 20px; }
  .fan { width: 260px; height: 520px; }
  .fan-card-inner { transform-origin: 50% 1100px; }
}
@media (max-width: 540px) {
  .fan-stage { --fan-step: 3.45deg; height: 480px; padding-top: 16px; }
  .fan { width: 200px; height: 440px; }
  .fan-card-inner { transform-origin: 50% 700px; }
}

.deck-foot {
  max-width: 1200px;
  margin: 36px auto 0;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.deck-foot-rule {
  height: 1px;
  background: var(--hairline);
}
@media (max-width: 540px) { .deck-foot { padding: 0 20px; } }

.chapter {
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border: 1px solid rgba(255,253,247,0.09);
  overflow: hidden;
  border-radius: 22px;
  /* soft, blurred drop shadow — no stepped/printed edges */
  box-shadow:
    inset 0 1px 0 rgba(255,253,247,0.07),
    0 18px 36px -18px rgba(0,0,0,0.55),
    0 48px 96px -32px rgba(0,0,0,0.55);
  transition: border-color 0.4s, transform 0.4s, box-shadow 0.4s;
}
.chapter:hover {
  border-color: rgba(200,168,119,0.4);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,253,247,0.09),
    0 24px 44px -18px rgba(0,0,0,0.6),
    0 64px 120px -32px rgba(0,0,0,0.6);
}
.chapter-plate {
  position: relative;
  height: 240px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 28% 0%, rgba(255,253,247,0.14), transparent 62%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 60%, var(--bg-2) 100%);
  border-bottom: 1px solid rgba(255,253,247,0.05);
}
.chapter-plate-num {
  font-family: var(--display);
  font-weight: 200;
  font-size: 200px;
  line-height: 1;
  color: var(--ink-faint);
  letter-spacing: -0.06em;
  font-feature-settings: 'tnum';
  opacity: 0.5;
  transition: opacity 0.4s, color 0.4s;
}
.chapter:hover .chapter-plate-num { opacity: 0.85; color: var(--accent); }
.chapter-plate-foot {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 14px 18px;
  font-size: 11px; font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: -0.005em;
}

.chapter-plate-gallery {
  padding: 0;
  background: #0a0a0b;
}
.chapter-plate-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.chapter-plate-img.is-active {
  opacity: 1;
  animation: chapter-plate-kenburns 4.2s ease-out forwards;
}
@keyframes chapter-plate-kenburns {
  0%   { transform: scale(1.04); }
  100% { transform: scale(1.16); }
}
.chapter-plate-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.43);
  transform-origin: center center;
  background: #000;
}
/* Music video plate: vertical-ish source — fill the frame, crop instead of pillarbox */
.chapter-plate-video[src*="Music"] {
  object-fit: cover;
  transform: none;
}
.chapter-plate-gallery::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(10,10,11,0.45) 100%);
  pointer-events: none;
}

.chapter-body {
  padding: 28px 28px 32px;
  display: flex; flex-direction: column;
  flex: 1;
}
.chapter-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 500;
  color: var(--ink-faint);
  margin-bottom: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.chapter-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 8px;
}
.chapter-sub {
  font-size: 13px;
  color: var(--ink-dim);
  margin-bottom: 18px;
  letter-spacing: -0.005em;
}
.chapter-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 10px;
  text-wrap: pretty;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chapter-text.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.chapter-readmore {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}
.chapter-readmore:hover {
  color: var(--ink);
  transform: translateX(2px);
}
.chapter-foot {
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
  margin-top: auto;
}
.chapter-cta {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: -0.005em;
}
.chapter-cta .arrow { transition: transform 0.3s; }
.chapter:hover .chapter-cta .arrow { transform: translate(3px, -3px); }

.chapter-media {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chapter-media-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: rgba(200, 168, 119, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.chapter-media-btn svg { color: var(--accent); transition: transform 0.25s ease; }
.chapter-media-btn:hover {
  color: var(--ink);
  border-color: var(--accent);
  background: rgba(200, 168, 119, 0.10);
  transform: translateY(-1px);
}
.chapter-media-btn:hover svg { transform: scale(1.08); }

/* ============================================================
   APPROACH
   ============================================================ */
.approach {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 96px;
  align-items: start;
}
@media (max-width: 900px) { .approach { grid-template-columns: 1fr; gap: 48px; } }

/* Experimental — copy on top, then two panels (dots + 3D cube) side-by-side.
   Iconography palette is inherited from these scoped tokens so every chip,
   tile, panel and tool reads from the same gold language. */
.experimental {
  --bb-gold:           #d4a857;
  --bb-gold-bright:    #e6c07a;
  --bb-gold-soft:      #a37f3d;
  --bb-gold-pale:      #ead6a8;
  --bb-gold-line:      rgba(212, 168, 87, 0.22);
  --bb-gold-line-2:    rgba(212, 168, 87, 0.55);
  --bb-tile-bg: linear-gradient(160deg, rgba(50, 40, 22, 0.55) 0%, rgba(20, 16, 10, 0.85) 100%);
  margin-top: 56px;
}

/* Anchor chip — small icon-tile + label + meta, ties the whole section to
   the iconography volume. */
.bb-anchor {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--bb-gold-pale);
}
.bb-anchor-label { color: var(--bb-gold); }
.bb-anchor-rule {
  flex: 0 0 64px;
  height: 1px;
  background: linear-gradient(90deg, var(--bb-gold-line-2), transparent);
}
.bb-anchor-meta { color: rgba(234, 214, 168, 0.45); }

.bb-text {
  max-width: 720px;
  margin-bottom: 40px;
}
/* Three columns — Pattern · Form · Experiment — each owning its own
   panel + the process tile aligned underneath. The process strip is no
   longer a separate row; it lives at the foot of each column so the
   labelling sits exactly below the thing it labels. */
.bb-panels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  max-width: 1100px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .bb-panels { grid-template-columns: 1fr; }
}
.bb-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.experimental-lede {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 24px;
}
.experimental-note {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: -0.005em;
}

/* ===========================================================
   Beyond-the-brief multiplier panel — square field with one
   orange "solo" follower that tracks the cursor + ripple/trail
   field on neighbouring squares. Ported from THE CREATOR 4.
   =========================================================== */
.bb-board {
  --bb-glow:    231, 199, 138;   /* rgba components for the gold glow */
  --bb-square:  255, 248, 232;   /* rgba components for the warm-white squares */
  flex: 1;
  position: relative;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--bb-gold-line);
  background: var(--bb-tile-bg);
  box-shadow:
    inset 0 0 22px rgba(212, 168, 87, 0.05),
    inset 0 1px 0 rgba(255, 248, 220, 0.06),
    0 22px 60px -22px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.bb-grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  perspective: 360px;
  perspective-origin: 50% 50%;
  gap: 4px;
}
.bb-grid .bb-dot {
  aspect-ratio: 1;
  border-radius: 2px;
  background: #f4dca0;
  box-shadow: 0 0 6px -1px rgba(var(--bb-glow), 0.30);
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.22, 0.7, 0.2, 1),
    background 0.18s ease,
    box-shadow 0.18s ease,
    border-radius 0.18s ease;
  will-change: transform, opacity;
}
.bb-grid .bb-dot.is-rippling {
  transition:
    opacity 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    border-radius 0.18s ease;
}
.bb-grid .bb-dot.in {
  opacity: 0.85;
  transform: scale(1);
}

/* Solo orange follower — same architecture as the source:
   .solo-ghost  — green-square fallback at home cell (shown when cursor enters)
   .solo-pop    — translating wrapper (rAF-driven inline transform)
   .solo-core   — orange filled circle with breath + ping anims */
.bb-grid .bb-dot.solo {
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1;
  transform: none;
  position: relative;
  overflow: visible;
  cursor: pointer;
  z-index: 6;
  transition: opacity 0.5s ease;
}
/* Ghost is now the home square's permanent appearance — identical to every
   other square. The lit follower only appears while the cursor is on the
   panel. */
.bb-grid .bb-dot.solo .solo-ghost {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: #f4dca0;
  box-shadow: 0 0 6px -1px rgba(var(--bb-glow), 0.30);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 1;
}
.bb-grid .bb-dot.solo.in .solo-ghost { opacity: 0.85; }
.bb-grid .bb-dot.solo .solo-pop {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.30s ease;
  z-index: 2;
}
.bb-grid .bb-dot.solo.is-cursor-active .solo-pop { opacity: 1; }
.bb-grid .bb-dot.solo .solo-core {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: #faecbe;
  box-shadow:
    0 0 6px rgba(var(--bb-glow), 0.70),
    0 0 14px rgba(var(--bb-glow), 0.35);
  transform-origin: 50% 50%;
  animation:
    bb-solo-breathe 2.6s ease-in-out infinite,
    bb-solo-tease 8s ease-in-out infinite;
}
.bb-grid .bb-dot.solo .solo-core::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 2px;
  border: 1px solid rgba(var(--bb-glow), 0.75);
  animation: bb-solo-ping 3.4s cubic-bezier(0.22, 0.7, 0.2, 1) infinite;
  pointer-events: none;
}

@keyframes bb-solo-breathe {
  0%, 100% {
    box-shadow:
      0 0 6px rgba(var(--bb-glow), 0.55),
      0 0 14px rgba(var(--bb-glow), 0.25),
      inset 0 0.5px 0 rgba(255,255,255,0.35);
  }
  50% {
    box-shadow:
      0 0 12px rgba(var(--bb-glow), 1.00),
      0 0 28px rgba(var(--bb-glow), 0.55),
      inset 0 0.5px 0 rgba(255,255,255,0.50);
  }
}
@keyframes bb-solo-tease {
  0%, 86%, 100% { transform: scale(1)    rotate(0deg); }
  89%           { transform: scale(1.18) rotate(-10deg); }
  92%           { transform: scale(1.10) rotate(10deg); }
  95%           { transform: scale(1.04) rotate(-4deg); }
}
@keyframes bb-solo-ping {
  0%   { transform: scale(0.85); opacity: 0.85; }
  60%  { opacity: 0.30; }
  100% { transform: scale(4.5);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-grid .bb-dot,
  .bb-grid .bb-dot.solo .solo-core,
  .bb-grid .bb-dot.solo .solo-core::before,
  .bb-grid .bb-dot.solo .solo-pop,
  .bb-grid .bb-dot.solo .solo-ghost {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- Shape variants (square is default; data-shape lives on .bb-panels
       so both the dots board and the cube tiles inherit the choice) ---- */
.bb-panels[data-shape="circle"] .bb-grid .bb-dot,
.bb-panels[data-shape="circle"] .bb-grid .bb-dot.solo .solo-ghost,
.bb-panels[data-shape="circle"] .bb-grid .bb-dot.solo .solo-core,
.bb-panels[data-shape="circle"] .bb-grid .bb-dot.solo .solo-core::before,
.bb-panels[data-shape="circle"] .bb-cube-tile {
  border-radius: 50%;
}
/* Triangle mode: alternate ▲ and ▼ (1st normal, 2nd rotated, 3rd normal, …)
   so adjacent cells tile and only the diagonal hairlines between them
   show — instead of every cell being an upward triangle with big empty
   gaps. The 16-column grid keeps the alternation in phase from row to row. */
.bb-panels[data-shape="triangle"] .bb-grid .bb-dot,
.bb-panels[data-shape="triangle"] .bb-cube-tile {
  border-radius: 0;
}
/* Clean ▲ / ▼ shapes — apex at the cell's top/bottom centre, base spans
   the cell's full width. The triangles read as triangles (no clipping at
   their bottom corners), and they sit in the same grid as the square /
   circle modes so the inter-shape spacing matches what you see there. */
.bb-panels[data-shape="triangle"] .bb-grid .bb-dot:nth-child(odd),
.bb-panels[data-shape="triangle"] .bb-cube-tile:nth-child(odd) {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);   /* ▲ */
}
.bb-panels[data-shape="triangle"] .bb-grid .bb-dot:nth-child(even),
.bb-panels[data-shape="triangle"] .bb-cube-tile:nth-child(even) {
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);     /* ▼ */
}
/* Solo dot is always nth-child(1) → ▲; mirror that on its inner layers. */
.bb-panels[data-shape="triangle"] .bb-grid .bb-dot.solo .solo-ghost,
.bb-panels[data-shape="triangle"] .bb-grid .bb-dot.solo .solo-core {
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
/* Ping ring would clip to a triangle and read as broken — hide it. */
.bb-panels[data-shape="triangle"] .bb-grid .bb-dot.solo .solo-core::before {
  display: none;
}

/* ===========================================================
   3D cube panel — texture + spin mirror the dots' shape +
   activity. .bb-panels.is-hot toggles the speed-up + glow.
   =========================================================== */
.bb-cube-panel {
  flex: 1;
  position: relative;
  padding: 18px 18px 56px;
  border-radius: 18px;
  border: 1px solid var(--bb-gold-line);
  background: var(--bb-tile-bg);
  box-shadow:
    inset 0 0 22px rgba(212, 168, 87, 0.05),
    inset 0 1px 0 rgba(255, 248, 220, 0.06),
    0 22px 60px -22px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 360px;
}
.bb-form-toolbar {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.bb-cube-stage {
  width: 200px;
  height: 200px;
  /* Soft perspective — large enough that parallel cube edges read as nearly
     parallel (more isometric), but not flat: there's still a faint depth
     gradient across the three faces. */
  perspective: 1600px;
}
.bb-cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* Locked isometric view — three faces visible (front, top, right). The
     cube no longer spins; the only motion is the per-tile ripple inherited
     from the dots panel. */
  transform: rotateX(-30deg) rotateY(-45deg);
  transition: filter 0.8s ease;
}
/* When the dots panel is "hot" (cursor on it), the cube glows softly so
   the pattern's activity still reads through visually. */
.bb-panels.is-hot .bb-cube {
  filter: drop-shadow(0 0 14px rgba(var(--bb-glow), 0.45));
}
.bb-cube-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1px;
  padding: 2px;
  transform-style: preserve-3d;
  background:
    linear-gradient(135deg, rgba(244, 220, 160, 0.045), rgba(244, 220, 160, 0.015));
  border: 1px solid rgba(244, 220, 160, 0.14);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
  backface-visibility: hidden;
}
.bb-cube-face-front  { transform: translateZ(100px); }
.bb-cube-face-back   { transform: rotateY(180deg) translateZ(100px); }
.bb-cube-face-right  { transform: rotateY(90deg)  translateZ(100px); }
.bb-cube-face-left   { transform: rotateY(-90deg) translateZ(100px); }
.bb-cube-face-top    { transform: rotateX(90deg)  translateZ(100px); }
.bb-cube-face-bottom { transform: rotateX(-90deg) translateZ(100px); }

.bb-cube-tile {
  aspect-ratio: 1;
  border-radius: 2px;
  background: #f4dca0;
  border: 1px solid rgba(120, 90, 40, 0.85);
  opacity: 1;
  box-shadow: 0 0 4px -1px rgba(var(--bb-glow), 0.25);
  transform-origin: 50% 50%;
  /* Slower spring bounce-back once the ripple passes — calmer rhythm now
     that the cube itself isn't rotating. While mid-ripple the .is-rippling
     class kills the transition so per-frame rAF updates aren't damped.
     Opacity stays at 1 throughout (solid). */
  transition: transform 0.85s cubic-bezier(0.22, 0.7, 0.2, 1);
  will-change: transform;
}
.bb-cube-tile.is-rippling {
  transition: none;
}

/* ---- Pyramid form: square-based pyramid with 4 triangular lateral
       faces meeting at an apex above. Each face holds a real triangular
       tessellation (N=7 rows of small triangles, 49 tiles per face,
       4 × 49 = 196 in DOM, last 4 unpaired & culled). Tiles are
       absolutely positioned per row inside the face with their own
       triangle clip-path — no grid layout, so the apex is a clean point.
       The faces tilt 26° inward about their bottom edges to converge at
       the apex; backface-visibility culls the back/left pair under the
       isometric camera. ---- */
/* The pyramid face is a TRIANGLE, not a square — base 200, slant height
   sqrt(100² + 200²) ≈ 223.6 px. The face element is sized to that slant
   height (not 200) and positioned 23.6 px above the cube top so its
   bottom edge sits exactly on the cube's bottom edge. Clip-path turns the
   rectangle into a true triangle silhouette with apex at top-center.
   With the right rotation (positive 26.565° about the bottom edge), the
   apex of every face converges at the same world point — the pyramid's
   apex — so the four faces meet cleanly. backface-visibility culls the
   back + left pair under the iso camera so only two sides show. */
.bb-cube-panel[data-form="pyramid"] .bb-cube-face {
  position: absolute;
  inset: auto;
  width: 200px;
  height: 223.607px;
  top: -23.607px;
  left: 0;
  display: block;
  padding: 0;
  gap: 0;
  background: none;
  border: none;
  box-shadow: none;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  backface-visibility: hidden;
}
.bb-cube-panel[data-form="pyramid"] .bb-pyramid-tile {
  position: absolute;
  border: none;
}
.bb-cube-panel[data-form="pyramid"] .bb-cube-face-front {
  transform-origin: 50% 100%;
  transform: translateZ(100px) rotateX(26.565deg);
}
.bb-cube-panel[data-form="pyramid"] .bb-cube-face-right {
  transform-origin: 50% 100%;
  transform: rotateY(90deg) translateZ(100px) rotateX(26.565deg);
}
.bb-cube-panel[data-form="pyramid"] .bb-cube-face-back {
  transform-origin: 50% 100%;
  transform: rotateY(180deg) translateZ(100px) rotateX(26.565deg);
}
.bb-cube-panel[data-form="pyramid"] .bb-cube-face-left {
  transform-origin: 50% 100%;
  transform: rotateY(-90deg) translateZ(100px) rotateX(26.565deg);
}

/* ---- Tower panel — parametric twisted, tapering tower (Zaha-Hadid-feel
       fluid building form). 12 levels × 16 cols = 192 tiles. The same
       cursor ripple that moves the pattern + form panels also fans this
       structure's tiles, paired 1:1 by panelRow * 16 + panelCol. ---- */
.bb-tower-panel {
  flex: 1;
  position: relative;
  padding: 18px 18px 56px;
  border-radius: 18px;
  border: 1px solid var(--bb-gold-line);
  background: var(--bb-tile-bg);
  box-shadow:
    inset 0 0 22px rgba(212, 168, 87, 0.05),
    inset 0 1px 0 rgba(255, 248, 220, 0.06),
    0 22px 60px -22px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 360px;
}
.bb-tower-stage {
  width: 230px;        /* 200 → 230 (+15%) */
  height: 368px;       /* 320 → 368 (+15%) */
  perspective: 1100px;
}
.bb-tower {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-12deg) rotateY(-18deg);
  animation: bb-tower-drift 24s ease-in-out infinite;
}
@keyframes bb-tower-drift {
  0%, 100% { transform: rotateX(-12deg) rotateY(-18deg); }
  50%      { transform: rotateX(-10deg) rotateY( 18deg); }
}
.bb-tower-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  will-change: transform;
}
.bb-tower-slot .bb-tower-tile {
  position: absolute;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  margin-top: -11px;
  background: #f4dca0;
  border: 1px solid rgba(120, 90, 40, 0.85);
  box-shadow: 0 0 4px -1px rgba(var(--bb-glow), 0.25);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  transition: transform 0.85s cubic-bezier(0.22, 0.7, 0.2, 1);
  will-change: transform;
}
.bb-tower-tile.is-rippling {
  transition: none;
}
/* Shape variants follow the data-shape attribute on .bb-panels — same
   selector pattern as the cube tiles, so the toolbar's square/circle/
   triangle picker reshapes the tower's tiles in lockstep. */
.bb-panels[data-shape="circle"]   .bb-tower-tile { border-radius: 50%; }
.bb-panels[data-shape="triangle"] .bb-tower-tile {
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  border: none;
}

/* ---- Sphere form: each tile sits in a positioning slot rotated to its
       (longitude, latitude) on the sphere. The slot owns the 3D placement,
       the inner .bb-cube-tile is free to take rAF deformation. Tile size
       (~26px) is sized so 16×12 = 192 tiles cover the sphere surface
       (R=115) without overlapping or leaving big gaps — each tile reads as
       a real spherical panel. backface-visibility hides tiles on the far
       side. The shape selector (square/circle/triangle) still applies, so
       sphere-of-squares is a valid combo just like cube-of-circles. ---- */
.bb-sphere-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.bb-sphere-slot .bb-cube-tile {
  position: absolute;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  margin-top: -13px;
  aspect-ratio: auto;
  backface-visibility: hidden;
}

/* ---- Shared icon-tile (matches the iconography system's .tile chrome) ---- */
.bb-icon-tile {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--bb-tile-bg);
  border: 1px solid var(--bb-gold-line);
  box-shadow:
    inset 0 0 18px rgba(212, 168, 87, 0.06),
    0 0 18px rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bb-gold);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.bb-icon-tile.sm {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}
.bb-icon-tile.sm .bb-ic { width: 18px; height: 18px; }
.bb-ic {
  width: 26px;
  height: 26px;
  display: block;
}

/* ---- Shape-picker toolbar — restyled as iconography tiles ---- */
.bb-toolbar {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.bb-tool {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--bb-gold-line);
  background: var(--bb-tile-bg);
  box-shadow:
    inset 0 0 18px rgba(212, 168, 87, 0.04),
    0 0 14px rgba(0, 0, 0, 0.30);
  color: var(--bb-gold-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}
.bb-tool .bb-ic { width: 20px; height: 20px; }
.bb-tool:hover {
  border-color: var(--bb-gold-line-2);
  color: var(--bb-gold);
}
.bb-tool.is-active {
  border-color: var(--bb-gold-line-2);
  color: var(--bb-gold-bright);
  box-shadow:
    inset 0 0 18px rgba(212, 168, 87, 0.10),
    0 0 16px rgba(212, 168, 87, 0.18),
    0 0 14px rgba(0, 0, 0, 0.30);
}
.bb-tool:focus-visible {
  outline: none;
  border-color: var(--bb-gold-bright);
  box-shadow: 0 0 0 2px rgba(212, 168, 87, 0.35);
}

/* ---- Process tile sits under each column's panel — same gold rule as a
       header break, icon + labels centered under their panel. ---- */
.bb-process-cell {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--bb-gold-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.bb-process-label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bb-gold-pale);
}
.bb-process-sub {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(234, 214, 168, 0.45);
}

.approach-aside > div { margin-bottom: 32px; }
.approach-aside .meta-label { margin-bottom: 10px; }
.approach-aside p {
  font-size: 14px;
  color: var(--ink-2);
  max-width: 280px;
  line-height: 1.55;
  letter-spacing: -0.005em;
}

.approach-body p {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 32px;
  max-width: 720px;
  text-wrap: pretty;
}
.approach-body p em {
  font-style: normal;
  color: var(--ink-dim);
  font-weight: 300;
}

.pillars {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
}
@media (max-width: 720px) { .pillars { grid-template-columns: 1fr 1fr; } }
.pillar {
  padding: 24px 18px 24px 0;
  border-right: 1px solid var(--hairline);
}
.pillar:last-child { border-right: 0; }
.pillar-k {
  font-size: 11px; font-weight: 500;
  color: var(--accent); margin-bottom: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pillar-v {
  font-family: var(--display);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* (legacy .tools-grid removed — replaced by .tools-vitrines above) */

.tools-foot {
  margin-top: 32px;
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: -0.005em;
}
.tools-foot span { color: var(--ink-faint); }

/* ============================================================
   CONTACT
   ============================================================ */
.section-contact {
  padding: 200px 0 140px;
}
.contact-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 12px; font-weight: 500;
  color: var(--ink-dim); margin-bottom: 36px;
  letter-spacing: -0.005em;
}
.contact-title {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(56px, 10vw, 144px);
  line-height: 0.96;
  letter-spacing: -0.05em;
  margin-bottom: 80px;
  color: var(--ink);
}
.contact-title .quiet { color: var(--ink-dim); }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 56px;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
  padding: 28px 24px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 12px;
}
.contact-card-icon {
  color: var(--ink-faint);
  margin-bottom: 4px;
  transition: color 0.3s ease;
}
.contact-card:hover .contact-card-icon { color: var(--accent); }
.contact-card-label {
  font-size: 11px; font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.contact-card-value {
  font-family: var(--display);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: -0.025em;
  color: var(--ink);
  transition: color 0.3s;
  text-wrap: balance;
}
a.contact-card-value:hover { color: var(--accent); }

.contact-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}

/* Premium pill — soft glass depth */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--hairline-2);
  border-radius: 980px;
  color: var(--ink);
  font-size: 14px; font-weight: 500;
  letter-spacing: -0.01em;
  background:
    linear-gradient(180deg, rgba(255,253,247,0.04), rgba(255,253,247,0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.4s ease, background 0.4s ease, color 0.4s ease, transform 0.4s ease;
}
.btn:hover {
  border-color: rgba(200,168,119,0.5);
  background:
    linear-gradient(180deg, rgba(255,253,247,0.06), rgba(255,253,247,0.01));
  color: var(--accent);
  transform: translateY(-1px);
}
.btn-primary {
  border-color: var(--accent);
  background:
    linear-gradient(180deg, rgba(200,168,119,0.18), rgba(138,118,84,0.08));
  color: var(--accent);
}
.btn-primary:hover {
  background:
    linear-gradient(180deg, rgba(200,168,119,0.28), rgba(138,118,84,0.14));
  color: var(--ink);
  border-color: var(--accent);
}
.btn .arrow { display: inline-block; transition: transform 0.3s ease; font-size: 12px; }
.btn:hover .arrow { transform: translate(3px, -3px); }
.btn-brand-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.btn:hover .btn-brand-icon { opacity: 1; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--hairline);
  padding: 32px 0 40px;
  position: relative; z-index: 1;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 32px;
  align-items: center;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: -0.005em;
}
@media (max-width: 900px) { .footer-inner { padding: 0 28px; } }
@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr; gap: 12px; }
}
.footer-mark {
  font-weight: 500; letter-spacing: -0.01em;
  font-size: 13px; color: var(--ink);
}

/* ============================================================
   CAPABILITIES — five sculpted pillars w/ premium icons
   ============================================================ */
.caps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
@media (max-width: 1100px) { .caps-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .caps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .caps-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CAPABILITIES — 5 click-rotate 3D puzzle cubes
   ============================================================ */
.puzzle-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  padding: 48px 0;
  justify-items: center;
}
@media (max-width: 1100px) { .puzzle-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
@media (max-width: 720px)  { .puzzle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .puzzle-grid { grid-template-columns: 1fr; } }

.puzzle-cell {
  display: block;
  perspective: 1500px;
  perspective-origin: 50% 45%;
}

.puzzle-cube {
  position: relative;
  width: 220px;
  height: 220px;
  cursor: pointer;
  outline: none;
}
@media (max-width: 720px) { .puzzle-cube { width: 200px; height: 200px; } }

.puzzle-cube-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-12deg) rotateY(-18deg);
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.puzzle-cube:hover .puzzle-cube-inner { transform: rotateX(-8deg) rotateY(-12deg); }
.puzzle-cube.is-flipped .puzzle-cube-inner {
  transform: rotateX(-12deg) rotateY(-108deg);
}
.puzzle-cube.is-flipped:hover .puzzle-cube-inner {
  transform: rotateX(-8deg) rotateY(-100deg);
}

.puzzle-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 18px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(225,180,107,0.07), transparent 60%),
    linear-gradient(140deg, #161412 0%, #0a0908 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,253,247,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.5);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: border-color 0.4s ease;
}
.puzzle-cube:hover .puzzle-face { border-color: rgba(225,180,107,0.30); }

/* The 6 cube faces — 220 / 2 = 110 translateZ */
.puzzle-face-front  { transform: translateZ(110px); }
.puzzle-face-back   { transform: rotateY(180deg) translateZ(110px); }
.puzzle-face-right  { transform: rotateY(90deg)  translateZ(110px); }
.puzzle-face-left   { transform: rotateY(-90deg) translateZ(110px); }
.puzzle-face-top    { transform: rotateX(90deg)  translateZ(110px); }
.puzzle-face-bottom { transform: rotateX(-90deg) translateZ(110px); }
@media (max-width: 720px) {
  .puzzle-face-front  { transform: translateZ(100px); }
  .puzzle-face-back   { transform: rotateY(180deg) translateZ(100px); }
  .puzzle-face-right  { transform: rotateY(90deg)  translateZ(100px); }
  .puzzle-face-left   { transform: rotateY(-90deg) translateZ(100px); }
  .puzzle-face-top    { transform: rotateX(90deg)  translateZ(100px); }
  .puzzle-face-bottom { transform: rotateX(-90deg) translateZ(100px); }
}

.puzzle-face-icon {
  width: 84px;
  height: 84px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
  transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.puzzle-face-icon svg { width: 100%; height: 100%; }
.puzzle-cube:hover .puzzle-face-icon { transform: translateY(-2px) scale(1.04); }

.puzzle-face-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ink);
  text-align: center;
  margin: 0;
  max-width: 18ch;
}
.puzzle-face-title-mini {
  font-family: var(--display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
  text-align: left;
  align-self: flex-start;
}
.puzzle-face-body {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  text-align: left;
  text-wrap: pretty;
}
.puzzle-face-right {
  align-items: stretch;
  justify-content: flex-start;
  padding: 22px 18px;
}

/* Decorative faces — random-feeling creative covers */
.puzzle-decor {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.puzzle-decor-dots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 12px;
  padding: 24px;
  width: 100%; height: 100%;
}
.puzzle-decor-dot {
  background: rgba(225,180,107,0.4);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(225,180,107,0.25);
}
.puzzle-decor-dot:nth-child(2n)  { background: rgba(225,180,107,0.18); }
.puzzle-decor-dot:nth-child(3n)  { background: rgba(255,220,160,0.6); }
.puzzle-decor-dot:nth-child(7n)  { background: rgba(60, 50, 40, 0.7); box-shadow: none; }

.puzzle-decor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
  padding: 18px;
  width: 100%; height: 100%;
}
.puzzle-decor-cell {
  background: linear-gradient(135deg, rgba(225,180,107,0.55), rgba(180,140,80,0.32));
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,240,200,0.25);
}
.puzzle-decor-cell:nth-child(2)  { background: linear-gradient(135deg, rgba(35,28,22,0.85), rgba(15,12,10,0.7)); }
.puzzle-decor-cell:nth-child(5)  { background: linear-gradient(135deg, rgba(255,215,150,0.85), rgba(220,170,90,0.55)); }
.puzzle-decor-cell:nth-child(7)  { background: linear-gradient(135deg, rgba(155,110,60,0.7), rgba(110,78,42,0.5)); }
.puzzle-decor-cell:nth-child(9)  { background: linear-gradient(135deg, rgba(35,28,22,0.85), rgba(15,12,10,0.7)); }

.puzzle-decor-cross {
  position: relative;
  width: 100%; height: 100%;
}
.puzzle-decor-bar {
  position: absolute;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(225,180,107,0.4);
  opacity: 0.65;
}
.puzzle-decor-bar-h {
  top: 50%; left: 14%; right: 14%; height: 1.5px;
  transform: translateY(-50%);
}
.puzzle-decor-bar-v {
  left: 50%; top: 14%; bottom: 14%; width: 1.5px;
  transform: translateX(-50%);
}
.puzzle-decor-pip {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 16px rgba(225,180,107,0.7);
}

.puzzle-decor-mark {
  position: relative;
}
.puzzle-decor-glyph {
  font-family: var(--display);
  font-weight: 200;
  font-size: 110px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.42;
  text-shadow: 0 0 24px rgba(225,180,107,0.35);
}

/* ============================================================
   CAPABILITIES — sci-fi neural grid (loaded from scifi_neural_grid.html)
   ============================================================ */
/* Pin the "What I can do" section while scrolling so the build-in cascade
   has time to play before the user moves past it. ~3 scroll lengths. */
.caps-pin-wrap {
  position: relative;
  height: 280vh;
}
.section.caps-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 80px 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.caps-pin .caps-grid {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}
.caps-pin .caps-grid svg {
  width: auto;
  height: min(62vh, 700px);
  max-width: 100%;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .caps-pin-wrap { height: 220vh; }
  .section.caps-pin { padding: 60px 0 20px; }
  .caps-pin .caps-grid svg { height: min(55vh, 500px); }
}
@media (prefers-reduced-motion: reduce) {
  /* Don't pin scroll for users who prefer reduced motion. */
  .caps-pin-wrap { height: auto; }
  .section.caps-pin { position: static; height: auto; padding: 180px 0 60px; }
}

.caps-grid {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-top: 48px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 32px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
.caps-grid svg {
  width: 100%;
  max-width: 1200px;
  height: auto;
  display: block;
  border-radius: 12px;
  background: #0a0a0b;
}
@media (max-width: 720px) {
  .caps-grid { padding: 0 16px; }
}

/* legacy hero/cube styles retained but unused */
.caps-hero {
  display: flex;
  justify-content: center;
  margin: 32px 0 64px;
}
.caps-hero-cube {
  width: 440px;
  height: 440px;
  perspective: 1600px;
  perspective-origin: 50% 45%;
}
.cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
/* Idle "trying to solve" animation — paused once the user starts clicking */
.big-cube {
  animation: cubeSolve 42s ease-in-out infinite;
  cursor: grab;
}
.big-cube:active { cursor: grabbing; }
.big-cube-manual {
  animation: none;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes cubeSolve {
  0%,   8%   { transform: rotateX(0)      rotateY(0); }
  13%,  21%  { transform: rotateX(0)      rotateY(90deg); }
  26%,  34%  { transform: rotateX(90deg)  rotateY(90deg); }
  39%,  47%  { transform: rotateX(90deg)  rotateY(180deg); }
  52%,  60%  { transform: rotateX(180deg) rotateY(180deg); }
  65%,  73%  { transform: rotateX(180deg) rotateY(270deg); }
  78%,  86%  { transform: rotateX(270deg) rotateY(270deg); }
  91%,  100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* The 6 cube faces use translateZ(220px) for the bigger 440px cube */
.big-cube .cube-face-front  { transform: translateZ(220px); }
.big-cube .cube-face-back   { transform: rotateY(180deg) translateZ(220px); }
.big-cube .cube-face-right  { transform: rotateY(90deg)  translateZ(220px); }
.big-cube .cube-face-left   { transform: rotateY(-90deg) translateZ(220px); }
.big-cube .cube-face-top    { transform: rotateX(90deg)  translateZ(220px); }
.big-cube .cube-face-bottom { transform: rotateX(-90deg) translateZ(220px); }

/* Discipline icon centered on each cube face, overlaid on the sticker grid */
.cube-face-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.cube-face-icon svg {
  width: 56%;
  height: 56%;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}

/* Discipline-icon grid (icons revealed/animated on hover) */
.caps-icons-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
@media (max-width: 1100px) { .caps-icons-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .caps-icons-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .caps-icons-grid { grid-template-columns: 1fr; } }

.caps-icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 32px 18px 28px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: radial-gradient(120% 70% at 50% 0%, rgba(200,168,119,0.03), transparent 60%);
  transition: background 0.4s ease;
  min-height: 220px;
}
.caps-icon-tile:hover {
  background: radial-gradient(120% 70% at 50% 0%, rgba(200,168,119,0.10), transparent 60%);
}

.caps-icon-wrap {
  width: 64px;
  height: 64px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45)) saturate(0.85);
  opacity: 0.55;
  transform: scale(0.92);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2,0.8,0.2,1), filter 0.4s ease;
}
.caps-icon-wrap svg { width: 100%; height: 100%; }
.caps-icon-tile:hover .caps-icon-wrap {
  opacity: 1;
  transform: scale(1.08);
  filter: drop-shadow(0 8px 18px rgba(225,180,107,0.4)) saturate(1.05);
}

.caps-icon-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: 17px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink-2);
  text-align: center;
  transition: color 0.4s ease;
}
.caps-icon-tile:hover .caps-icon-title { color: var(--ink); }

@media (max-width: 1100px) {
  .caps-hero-cube { width: 320px; height: 320px; }
  .big-cube .cube-face-front  { transform: translateZ(160px); }
  .big-cube .cube-face-back   { transform: rotateY(180deg) translateZ(160px); }
  .big-cube .cube-face-right  { transform: rotateY(90deg)  translateZ(160px); }
  .big-cube .cube-face-left   { transform: rotateY(-90deg) translateZ(160px); }
  .big-cube .cube-face-top    { transform: rotateX(90deg)  translateZ(160px); }
  .big-cube .cube-face-bottom { transform: rotateX(-90deg) translateZ(160px); }
}
@media (max-width: 720px) {
  .caps-hero-cube { width: 240px; height: 240px; }
  .big-cube .cube-face-front  { transform: translateZ(120px); }
  .big-cube .cube-face-back   { transform: rotateY(180deg) translateZ(120px); }
  .big-cube .cube-face-right  { transform: rotateY(90deg)  translateZ(120px); }
  .big-cube .cube-face-left   { transform: rotateY(-90deg) translateZ(120px); }
  .big-cube .cube-face-top    { transform: rotateX(90deg)  translateZ(120px); }
  .big-cube .cube-face-bottom { transform: rotateX(-90deg) translateZ(120px); }
  .caps-icon-tile { min-height: 180px; padding: 24px 14px; }
  .caps-icon-wrap { width: 52px; height: 52px; }
}

.cube-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  padding: 5px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,253,247,0.04), transparent 60%),
    linear-gradient(140deg, #131110 0%, #07060a 100%);
  border: 1px solid rgba(255,253,247,0.05);
  border-radius: 8px;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,253,247,0.04);
}
.cube-face-front  { transform: translateZ(65px); }
.cube-face-back   { transform: rotateY(180deg) translateZ(65px); }
.cube-face-right  { transform: rotateY(90deg)  translateZ(65px); }
.cube-face-left   { transform: rotateY(-90deg) translateZ(65px); }
.cube-face-top    { transform: rotateX(90deg)  translateZ(65px); }
.cube-face-bottom { transform: rotateX(-90deg) translateZ(65px); }

.cube-sticker {
  border-radius: 4px;
  background: linear-gradient(135deg,
    rgba(225, 180, 107, 0.78),
    rgba(180, 140, 80, 0.55));
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 0 6px rgba(200, 154, 82, 0.18);
  transition: background 0.3s, box-shadow 0.3s;
}
/* quasi-random sticker tone variation per cube via different nth selectors */
.cube-sticker:nth-child(3n+1) {
  background: linear-gradient(135deg, rgba(255, 215, 145, 0.92), rgba(220, 168, 92, 0.7));
}
.cube-sticker:nth-child(7n+2) {
  background: linear-gradient(135deg, rgba(155, 110, 60, 0.78), rgba(110, 78, 42, 0.55));
}
.cube-sticker:nth-child(11n+3) {
  background: linear-gradient(135deg, rgba(35, 28, 22, 0.95), rgba(15, 12, 10, 0.85));
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.06), 0 0 4px rgba(0,0,0,0.6);
}
.cube-sticker:nth-child(13n+5) {
  background: linear-gradient(135deg, rgba(255, 245, 220, 0.85), rgba(225, 200, 160, 0.6));
}

/* Per-cube subtle palette tweaks so the five tiles read distinct */
.cube-style-1 .cube-sticker { filter: hue-rotate(-6deg) saturate(0.96); }
.cube-style-2 .cube-sticker { filter: hue-rotate(6deg)  saturate(1.04); }
.cube-style-3 .cube-sticker { filter: hue-rotate(-3deg) saturate(0.92); }
.cube-style-4 .cube-sticker { filter: hue-rotate(4deg)  saturate(1.08); }

.cube-tile:hover .cube-sticker {
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 0 12px rgba(225, 180, 107, 0.45);
}

.cube-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ink);
  text-align: center;
  max-width: 18ch;
}

@media (max-width: 720px) {
  .cube-stage { width: 110px; height: 110px; }
  .cube-face { gap: 3px; padding: 4px; }
  .cube-face-front  { transform: translateZ(55px); }
  .cube-face-back   { transform: rotateY(180deg) translateZ(55px); }
  .cube-face-right  { transform: rotateY(90deg)  translateZ(55px); }
  .cube-face-left   { transform: rotateY(-90deg) translateZ(55px); }
  .cube-face-top    { transform: rotateX(90deg)  translateZ(55px); }
  .cube-face-bottom { transform: rotateX(-90deg) translateZ(55px); }
}

.cap-cell {
  position: relative;
  padding: 40px 28px 36px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 28px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(200,168,119,0.04), transparent 60%);
  transition: background 0.5s ease;
  min-height: 320px;
}
.cap-cell:hover {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(200,168,119,0.10), transparent 60%);
}

.cap-icon {
  width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
@media (max-width: 1100px) { .cap-icon { width: 88px; height: 88px; } }
@media (max-width: 720px)  { .cap-icon { width: 80px; height: 80px; } }
.cap-icon svg {
  width: 100%; height: 100%;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cap-cell:hover .cap-icon svg { transform: translateY(-2px); }

.cap-num {
  font-size: 11px; font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  font-feature-settings: 'tnum';
}
.cap-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin-top: -4px;
}
.cap-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  margin-top: auto;
}

/* ============================================================
   SHOWCASE — draggable carousel + lightbox
   ============================================================ */
.showcase-car {
  position: relative;
  /* break out of the .wrap (max 1200px) to span the full viewport,
     so side images have room to extend beyond the section bounds */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Bottom padding gives the active slide's floor-reflection room to
     paint without bleeding into the next section. */
  padding: 32px 0 96px;
  /* very gentle fade only at the absolute edges — side images stay visible */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, #000 2%, #000 98%, transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0%, #000 2%, #000 98%, transparent 100%);
}

.showcase-stage {
  position: relative;
  width: 100%;
  height: 64vh;
  max-height: 640px;
  margin: 0 auto;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

.showcase-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56%;
  max-width: 920px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform-style: preserve-3d;
  transition: transform 850ms cubic-bezier(0.22, 0.7, 0.2, 1),
              opacity 850ms ease,
              filter 850ms ease,
              left 850ms cubic-bezier(0.22, 0.7, 0.2, 1);
  will-change: transform, opacity, filter, left;
}
@media (max-width: 1100px) { .showcase-slide { width: 70%; } }
@media (max-width: 720px) {
  .showcase-slide { width: 84%; }
  .showcase-stage { height: 50vh; }
}

.showcase-slide-frame {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(28,28,34,0.55), rgba(15,15,18,0.45));
  border: 1px solid rgba(225,180,107,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,253,247,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 28px 60px -28px rgba(0,0,0,0.65);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.showcase-slide.is-active .showcase-slide-frame {
  border-color: rgba(225,180,107,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,253,247,0.14),
    0 40px 90px -30px rgba(0,0,0,0.75);
  /* Subtle floor reflection — only on the centered/active slide. The mask
     gradient applied to the mirrored copy is faint at the top (closest to
     the original) and fades entirely by ~30% of the reflection's height,
     so only a small slice shows just under the slide instead of a full
     mirror. Webkit-only; other browsers simply don't render it (no layout
     change). */
  -webkit-box-reflect: below 8px linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.06) 14%,
    rgba(255, 255, 255, 0) 30%
  );
}
.showcase-slide-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  filter: contrast(1.04) saturate(1.02);
}
.showcase-slide-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(160deg, rgba(255,253,247,0.10) 0%, rgba(255,253,247,0) 35%),
    linear-gradient(0deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0) 35%);
  z-index: 2;
}
.showcase-slide-frame video.showcase-slide-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: contrast(1.04) saturate(1.02);
  background: #000;
}

/* Crossfade pair (two stacked images that alternate) */
.showcase-slide-pair {
  position: relative;
  width: 100%;
  line-height: 0;
}
.showcase-slide-pair-base,
.showcase-slide-pair-overlay {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  filter: contrast(1.04) saturate(1.02);
}
.showcase-slide-pair-overlay {
  position: absolute;
  inset: 0;
  height: 100%;
  transition: opacity 800ms ease;
}
.lightbox-pair { width: 100%; }
.lightbox-pair .showcase-slide-pair-base,
.lightbox-pair .showcase-slide-pair-overlay {
  max-height: 86vh;
}

.showcase-slide-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
  text-align: left;
}

/* Active-slide meta — centered below the stage, undistorted */
.showcase-active-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  margin-top: 18px;
  padding: 0 16px;
  transition: opacity 300ms ease;
}
.showcase-active-meta .showcase-slide-name {
  text-align: center;
}
.showcase-slide-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
}
.showcase-slide-name {
  font-family: var(--display);
  font-weight: 300;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

/* Dots */
.showcase-dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 28px;
}
.showcase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(232,200,140,0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease, width 200ms ease;
}
.showcase-dot.is-active {
  background: rgba(232,200,140,0.95);
  width: 24px;
  border-radius: 4px;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 4, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: grid;
  place-items: center;
  animation: lightbox-in 280ms ease;
  padding: 24px;
  box-sizing: border-box;
}
@keyframes lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 16, 12, 0.7);
  border: 1px solid rgba(225,180,107,0.28);
  color: rgba(232,200,140,0.95);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  transition: background 200ms ease, border-color 200ms ease;
}
.lightbox-close:hover {
  background: rgba(40, 32, 22, 0.9);
  border-color: rgba(225,180,107,0.55);
}
.lightbox-content {
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  animation: lightbox-content-in 360ms cubic-bezier(0.22, 0.7, 0.2, 1);
}
@keyframes lightbox-content-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.lightbox-content img,
.lightbox-content video {
  max-width: 92vw;
  max-height: 76vh;
  object-fit: contain;
  border: 1px solid rgba(225,180,107,0.25);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  background: #000;
}
.lightbox-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.lightbox-tag {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.lightbox-name {
  font-family: var(--display);
  font-weight: 300;
  font-size: 22px;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.lightbox-counter {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(232,200,140,0.55);
  margin-top: 4px;
}

/* ============================================================
   TOOLS — premium compression infographic
   ============================================================ */
.comp-stage {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
}
.comp-stage::before { content: none; }
.comp-noise { display: none; }

.comp-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 38% 62%;
}

/* LEFT */
.comp-left {
  position: relative;
  padding: 0 56px 0 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-right: 0;
}
.comp-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--accent);
  text-transform: uppercase;
}
.comp-headline {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: #F2EEE8;
  margin: 0;
}
.comp-headline em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.025em;
  font-size: 1.04em;
}
.comp-body {
  font-size: 14px;
  line-height: 1.7;
  color: #A8A29A;
  max-width: 38ch;
  margin: 0;
  letter-spacing: -0.005em;
}
.comp-cells {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-left: 1px solid rgba(255,255,255,0.08);
  margin-top: 4px;
}
.comp-cell {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.comp-cell-icon {
  width: 22px; height: 22px;
  color: var(--accent);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.comp-cell-icon svg { width: 100%; height: 100%; }
.comp-cell-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.comp-cell-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
}
.comp-cell-value {
  font-size: 13px;
  color: #F2EEE8;
  letter-spacing: -0.005em;
}
.comp-closing {
  font-size: 13px;
  line-height: 1.65;
  color: #A8A29A;
  margin: 6px 0 0;
  max-width: 42ch;
}
.comp-closing em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

/* RIGHT — radial diagram in 3D */
.comp-right {
  position: relative;
  padding: 56px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
  perspective-origin: 50% 48%;
}
.comp-circle {
  --size: min(560px, 84vw);
  --outer-r: calc(var(--size) * 0.45);
  --inner-r: calc(var(--size) * 0.283);
  --core-r:  calc(var(--size) * 0.133);
  position: relative;
  width: var(--size);
  height: var(--size);
  transform-style: preserve-3d;
  /* Idle 3D tilt is replaced by cursor-tracking — see <Tools /> useEffect.
     The diagram orients toward the mouse like an eye watching it; perspective
     + rotateY/rotateX are written inline per-frame from a rAF lerp. */
  will-change: transform;
  /* Lock down browser selection inside the diagram — without this, a
     double-click near the chip core triggers the text/element-selection
     gesture, which paints square highlights over every icon and visually
     fights the explode/spin effects. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.comp-circle img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .comp-circle { transform: rotateX(0) rotateY(0) !important; }
}
/* Hidden defs SVG — provides shared gradients/paths to every tier SVG. */
.comp-defs-svg {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Each tier is its own HTML <div> at a specific Z. Inside is a small SVG
   carrying just that tier's ring(s). Because the depth lives on a real
   HTML element, the cursor-driven scale3d on .comp-circle multiplies
   each tier's translateZ reliably — and during cursor follow you can
   visibly see the layers fan out and collapse. */
.comp-tier {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  /* Pre-promote each tier to its own GPU layer so the cursor-driven
     transforms on .comp-circle don't keep re-laying-out the whole
     stack on the main thread. */
  will-change: transform;
}
.comp-tier-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Tier Z assignments — chip/core anchored at z = 0 ("stuck in the middle"),
   every ring layered BEHIND it (negative Z). Icon-rings stay where they
   are at +55 / +45 in their own keyframes. Each tier's transform also
   composes a small scale that grows with --active, so the whole stack
   subtly "wakes up" larger when the cursor enters and curls back to its
   resting size when the cursor leaves. The chip itself is multiplied by
   a stronger factor so it visibly breathes bigger. */
.comp-tier-core     { transform: translateZ(   0px) scale(calc(1 + var(--active, 0) * 0.085)); }
.comp-tier-glyph    { transform: translateZ(  -8px) scale(calc(1 + var(--active, 0) * 0.05)); }
.comp-tier-dashed   { transform: translateZ( -22px) scale(calc(1 + var(--active, 0) * 0.045)); }
.comp-tier-faint    { transform: translateZ( -42px) scale(calc(1 + var(--active, 0) * 0.04)); }
.comp-tier-extra-ccw { transform: translateZ( -62px) scale(calc(1 + var(--active, 0) * 0.04)); }
.comp-tier-extra-cw  { transform: translateZ( -85px) scale(calc(1 + var(--active, 0) * 0.04)); }
.comp-tier-thin-s   { transform: translateZ(-105px) scale(calc(1 + var(--active, 0) * 0.035)); }
.comp-tier-pulse    { transform: translateZ(-128px) scale(calc(1 + var(--active, 0) * 0.035)); }
.comp-tier-mid      { transform: translateZ(-150px) scale(calc(1 + var(--active, 0) * 0.03)); }
.comp-tier-orbit    { transform: translateZ(-170px) scale(calc(1 + var(--active, 0) * 0.03)); }
.comp-tier-edge-2   { transform: translateZ(-190px) scale(calc(1 + var(--active, 0) * 0.03)); }
.comp-tier-edge-1   { transform: translateZ(-208px) scale(calc(1 + var(--active, 0) * 0.03)); }
.comp-tier-bloom    { transform: translateZ(-220px) scale(calc(1 + var(--active, 0) * 0.05)); }

/* Legacy .comp-svg rules referenced an old single-SVG architecture.
   Tiers now own translateZ; the .comp-svg ruleset is no longer rendered
   but is kept here as a no-op for any stale class hooks elsewhere. */
.comp-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-style: preserve-3d;
}
.comp-bloom {
  filter: blur(28px);
  opacity: 0.55;
  animation: compPulse calc(5.5s / var(--spin-mult, 1)) ease-in-out infinite;
  transform-origin: 300px 300px;
}
@keyframes compPulse {
  0%, 100% { opacity: 0.4;  transform: scale(1); }
  50%      { opacity: 0.75; transform: scale(1.04); }
}
/* Stroke widths grow with --active so the rings visibly thicken as the
   cursor wakes the diagram, then ease back to their idle thickness. */
.comp-ring { fill: none; stroke-width: calc(1px + var(--active, 0) * 0.7px); }
.comp-ring-thin   { stroke: rgba(255,255,255,0.08); }
.comp-ring-faint  { stroke: rgba(255,255,255,0.04); }
.comp-ring-dashed {
  stroke: rgba(225,180,107,0.22);
  stroke-dasharray: 2 5;
  
  transform-origin: 300px 300px;
}
/* Static ring depths — each concentric ring sits at a different Z so the
   cursor tilt parallaxes them like real layered hoops. */
.comp-ring { transform-origin: 300px 300px; }
.comp-svg .comp-ring-thin   {  }
.comp-svg .comp-ring-faint  {  }
.comp-svg .comp-tick        {  transform-origin: 300px 300px; }
.comp-svg .comp-spoke-outer { transform-origin: 300px 300px; }
.comp-svg .comp-pulse-edge  {  transform-origin: 300px 300px; }

/* Decorative gradient outlines beyond the outer ring */
.comp-outer-edge {
  transform-origin: 300px 300px;
  filter: drop-shadow(0 0 8px rgba(225,180,107,0.25));
}
.comp-outer-edge-1 { animation: compOuterEdgeSpin1 calc(80s / var(--spin-mult, 1)) linear infinite;
                     stroke-width: calc(0.6px + var(--active, 0) * 0.5px); }
.comp-outer-edge-2 { animation: compOuterEdgeSpin2 calc(110s / var(--spin-mult, 1)) linear infinite;
                     stroke-width: calc(0.45px + var(--active, 0) * 0.5px); }
@keyframes compOuterEdgeSpin1 {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
@keyframes compOuterEdgeSpin2 {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(-360deg); }
}
.comp-ring-extra {
  fill: none;
  stroke-width: calc(0.8px + var(--active, 0) * 0.6px);
  transform-origin: 300px 300px;
}
.comp-ring-extra-cw {
  stroke: rgba(225,180,107,0.22);
  stroke-dasharray: 4 8;
  animation: compExtraSpinCw calc(32s / var(--spin-mult, 1)) linear infinite;
}
.comp-ring-extra-ccw {
  stroke: rgba(225,180,107,0.16);
  stroke-dasharray: 1 5;
  stroke-width: 0.6;
  animation: compExtraSpinCcw calc(44s / var(--spin-mult, 1)) linear infinite;
}
@keyframes compExtraSpinCw {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
@keyframes compExtraSpinCcw {
  from { transform: rotate(0deg);    }
  to   { transform: rotate(-360deg); }
}
.comp-tick {
  stroke: rgba(255,255,255,0.18);
  stroke-width: 1;
  stroke-linecap: round;
}
.comp-spoke { stroke-width: 0.8; }
.comp-spoke-outer {
  stroke: rgba(255,255,255,0.10);
  stroke-dasharray: 2 4;
  animation: compSpokeFlowOut calc(6s / var(--spin-mult, 1)) linear infinite;
}
.comp-spoke-inner {
  stroke: rgba(225,180,107,0.5);
  stroke-dasharray: 4 4;
  filter: drop-shadow(0 0 4px rgba(200,154,82,0.55));
  animation: compSpokeFlowIn calc(1.6s / var(--spin-mult, 1)) linear infinite;
}
@keyframes compSpokeFlowIn {
  0%   { stroke-dashoffset: 0;  opacity: 0.55; }
  50%  { opacity: 1; }
  100% { stroke-dashoffset: -16; opacity: 0.55; }
}
@keyframes compSpokeFlowOut {
  0%   { stroke-dashoffset: 0;   opacity: 0.4; }
  50%  { opacity: 0.85; }
  100% { stroke-dashoffset: -18;  opacity: 0.4; }
}

/* Orbiting ambient dots — gentle "movement" around the rings */
.comp-orbit-cw {
  transform-origin: 300px 300px;
  animation: compOrbitCw calc(28s / var(--spin-mult, 1)) linear infinite;
}
.comp-orbit-ccw {
  transform-origin: 300px 300px;
  animation: compOrbitCcw calc(38s / var(--spin-mult, 1)) linear infinite;
}
@keyframes compOrbitCw {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
@keyframes compOrbitCcw {
  from { transform: rotate(0deg);    }
  to   { transform: rotate(-360deg); }
}
.comp-orbit-dot {
  fill: rgba(225,180,107,0.85);
  filter: drop-shadow(0 0 6px rgba(225,180,107,0.7));
  animation: compDotPulse calc(2.2s / var(--spin-mult, 1)) ease-in-out infinite;
}
.comp-orbit-dot-faint {
  fill: rgba(225,180,107,0.5);
  filter: drop-shadow(0 0 4px rgba(200,154,82,0.45));
  animation: compDotPulse calc(2.6s / var(--spin-mult, 1)) ease-in-out infinite;
}
@keyframes compDotPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
.comp-core-stroke {
  fill: none;
  stroke: rgba(225,180,107,0.55);
  stroke-width: calc(1px + var(--active, 0) * 0.8px);
  filter: drop-shadow(0 0 16px rgba(200,154,82,0.5));
  transform-origin: 300px 300px;
}
.comp-core-halo {
  fill: none;
  stroke: rgba(225,180,107,0.14);
  stroke-width: calc(1px + var(--active, 0) * 0.6px);
  transform-origin: 300px 300px;
}
.comp-core-inner-ring {
  fill: none;
  stroke: rgba(225,180,107,0.18);
  stroke-width: calc(0.6px + var(--active, 0) * 0.5px);
  stroke-dasharray: 1 3;
  
  transform-origin: 300px 300px;
}
/* Tiny geometric glyphs orbiting around the core */
.comp-glyph-ring {
  transform-origin: 300px 300px;
  animation: compGlyphRingSpin calc(36s / var(--spin-mult, 1)) linear infinite;
}
@keyframes compGlyphRingSpin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(-360deg); }
}
.comp-glyph {
  fill: none;
  stroke: rgba(225,180,107,0.78);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(225,180,107,0.45));
  animation: compGlyphPulse calc(4s / var(--spin-mult, 1)) ease-in-out infinite;
  transform-origin: center;
}
.comp-glyph:nth-child(2) { animation-delay: -0.6s; }
.comp-glyph:nth-child(3) { animation-delay: -1.2s; }
.comp-glyph:nth-child(4) { animation-delay: -1.8s; }
.comp-glyph:nth-child(5) { animation-delay: -2.4s; }
.comp-glyph:nth-child(6) { animation-delay: -3.0s; }
@keyframes compGlyphPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Ring labels */
.comp-ring-label {
  position: absolute;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent);
  pointer-events: none;
  z-index: 5;
}
.comp-ring-label-outer {
  top: calc(50% - var(--outer-r) - 24px);
  left: 50%;
  transform: translateX(-50%);
}
.comp-ring-label-mid {
  top: calc(50% - var(--inner-r) - 18px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: rgba(225,180,107,0.7);
}

/* Outer tool nodes */
/* Floating tool name tags — appear at random tool positions, fade in/out */
.comp-tool-floating-tag {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Sit at the icon's own position on the ring, then drop just below the
     icon's edge — kept tight so the label reads as belonging to that
     icon, not floating off in the gold field. */
  transform:
    rotate(var(--angle))
    translate(var(--outer-r), 0)
    rotate(calc(-1 * var(--angle)))
    translateY(30px);
  pointer-events: none;
  z-index: 6;
}
.comp-ai-floating-tag {
  position: absolute;
  top: 50%;
  left: 50%;
  /* AI icons are smaller (38 px), so the tag hugs them more tightly. */
  transform:
    rotate(var(--angle))
    translate(var(--inner-r), 0)
    rotate(calc(-1 * var(--angle)))
    translateY(20px);
  pointer-events: none;
  z-index: 6;
}
.comp-ai-floating-tag span {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(0,0,0,0.85), 0 0 8px rgba(225,180,107,0.35);
  animation: compTagFade calc(2.8s / var(--spin-mult, 1)) ease-out forwards;
}
.comp-tool-floating-tag span {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(0,0,0,0.85), 0 0 8px rgba(225,180,107,0.35);
  animation: compTagFade calc(2.8s / var(--spin-mult, 1)) ease-out forwards;
  transform-origin: center;
}
@keyframes compTagFade {
  0%   { opacity: 0; transform: scale(0.7);  letter-spacing: 0.32em; }
  18%  { opacity: 1; transform: scale(1);    letter-spacing: 0.22em; }
  72%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); letter-spacing: 0.16em; }
}

/* Outer tool ring rotates counter-clockwise; inner counter-rotates to stay upright */
.comp-tool-ring {
  position: absolute;
  inset: 0;
  animation: compRingCcw calc(70s / var(--spin-mult, 1)) linear infinite;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}
/* Inner AI ring rotates clockwise; inner counter-rotates */
.comp-ai-ring {
  position: absolute;
  inset: 0;
  animation: compRingCw calc(50s / var(--spin-mult, 1)) linear infinite;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}
/* Tool-ring + AI-ring rotation keyframes — these keep their ORIGINAL
   translateZ depth (55 / 45). The icon frames are explicitly excluded
   from the dramatic ring explode: they tilt with the diagram and
   inherit a tiny scale-up during peak explode (~7–8%), but they don't
   fan out. Only the SVG ring linework explodes. */
@keyframes compRingCcw {
  from { transform: rotate(0deg);    }
  to   { transform: rotate(-360deg); }
}
@keyframes compRingCw  {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

.comp-tool-node {
  position: absolute;
  top: 50%; left: 50%;
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 4px 14px -6px rgba(0,0,0,0.7);
  transform: rotate(var(--angle)) translate(var(--outer-r), 0) translateZ(-18px) rotate(calc(-1 * var(--angle))) scale(calc(0.92 + var(--inst-zoom, 0) * 0.18));
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s, transform 0.18s ease-out;
}
.comp-tool-node-counter {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* counter-rotate at the same speed/duration as the ring but in the opposite direction */
  animation: compRingCw calc(70s / var(--spin-mult, 1)) linear infinite;
  transform-origin: 50% 50%;
}
@keyframes compToolShimmer {
  0%, 100% {
    border-color: rgba(255,255,255,0.08);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 4px 14px -6px rgba(0,0,0,0.7);
  }
  50% {
    border-color: rgba(225,180,107,0.28);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 0 14px rgba(200,154,82,0.25);
  }
}
.comp-tool-node img {
  width: 60%; height: 60%;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.3s;
  animation: compIconBreathe calc(4s / var(--spin-mult, 1)) ease-in-out infinite;
  animation-duration: calc(3.2s + var(--idx, 0) * 0.43s);
  animation-delay: calc(var(--idx, 0) * -0.61s);
  transform-origin: 50% 50%;
}
@keyframes compIconBreathe {
  0%, 100% { transform: scale(0.92); opacity: 0.78; }
  50%      { transform: scale(1.08); opacity: 1; }
}
.comp-tool-node:hover {
  border-color: rgba(225,180,107,0.5);
  background: rgba(225,180,107,0.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 22px rgba(200,154,82,0.4);
}
.comp-tool-node:hover img { opacity: 1; }

/* Inner AI copilot nodes */
.comp-ai-node {
  position: absolute;
  top: 50%; left: 50%;
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225,180,107,0.30), rgba(225,180,107,0.04) 70%);
  border: 1px solid rgba(225,180,107,0.55);
  box-shadow:
    0 0 14px rgba(200,154,82,0.55),
    inset 0 0 8px rgba(225,180,107,0.18);
  transform: rotate(var(--angle)) translate(var(--inner-r), 0) translateZ(28px) rotate(calc(-1 * var(--angle))) scale(calc(0.92 + var(--inst-zoom, 0) * 0.18));
  transition: box-shadow 0.3s, transform 0.18s ease-out;
  animation: compAiPulse calc(3.5s / var(--spin-mult, 1)) ease-in-out infinite;
  animation-delay: calc(var(--angle) * -0.01s);
}
.comp-ai-node-counter {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* counter-rotate at same speed/duration as the AI ring but opposite direction */
  animation: compRingCcw calc(50s / var(--spin-mult, 1)) linear infinite;
  transform-origin: 50% 50%;
}
@keyframes compAiPulse {
  0%, 100% {
    box-shadow:
      0 0 12px rgba(200,154,82,0.5),
      inset 0 0 8px rgba(225,180,107,0.18);
  }
  50% {
    box-shadow:
      0 0 22px rgba(225,180,107,0.7),
      inset 0 0 12px rgba(225,180,107,0.32);
  }
}
.comp-ai-node:hover {
  box-shadow:
    0 0 26px rgba(225,180,107,0.8),
    inset 0 0 14px rgba(225,180,107,0.4);
}
.comp-ai-node svg {
  width: 60%; height: 60%;
  color: var(--accent);
  animation: compIconBreatheGold calc(3s / var(--spin-mult, 1)) ease-in-out infinite;
  animation-duration: calc(2.6s + var(--idx, 0) * 0.37s);
  animation-delay: calc(var(--idx, 0) * -0.53s);
  transform-origin: 50% 50%;
}
@keyframes compIconBreatheGold {
  0%, 100% { transform: scale(0.92); filter: drop-shadow(0 0 0 transparent); }
  50%      { transform: scale(1.10); filter: drop-shadow(0 0 6px rgba(225,180,107,0.85)); }
}

/* Random ad-hoc connections between a tool and a copilot — fade in/out */
.comp-pulse-edge {
  animation: compPulseFade calc(2.4s / var(--spin-mult, 1)) ease-in-out forwards;
}
.comp-pulse-line {
  fill: none;
  stroke: #E1B46B;
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  filter: drop-shadow(0 0 3px rgba(225,180,107,0.55));
  animation: compPulseDraw calc(0.95s / var(--spin-mult, 1)) ease-out forwards;
}
.comp-pulse-dot {
  fill: #E1B46B;
  r: 1.6;
  filter: drop-shadow(0 0 3px rgba(225,180,107,0.6));
  animation: compPulseDotPulse calc(1s / var(--spin-mult, 1)) ease-in-out infinite;
}
@keyframes compPulseDraw { to { stroke-dashoffset: 0; } }
@keyframes compPulseFade {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  72%  { opacity: 0.8; }
  100% { opacity: 0; }
}
@keyframes compPulseDotPulse {
  0%, 100% { opacity: 0.5; transform-origin: center; }
  50%      { opacity: 1; }
}

/* Center hub — CPU chip is fixed and static, sits above the wobbling diagram */
.comp-hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}
.comp-hub svg {
  width: 100%;
  height: 100%;
  color: var(--accent);
  filter: drop-shadow(0 0 12px rgba(225,180,107,0.5));
}
.comp-hub-mark {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--accent);
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 0 18px rgba(225,180,107,0.6);
}
.comp-hub-sub {
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  margin-top: 8px;
  line-height: 1.45;
}
.comp-hub-meta {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--accent);
  text-transform: uppercase;
  margin-top: 5px;
}
.comp-output {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(var(--core-r) + 6px));
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: rgba(255,255,255,0.42);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  z-index: 5;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 1100px) {
  .comp-grid { grid-template-columns: 1fr; gap: 32px; }
  .comp-left {
    border-right: 0;
    border-bottom: 0;
    padding: 0 0 24px 0;
  }
  .comp-right { padding: 24px 0 32px; }
}
@media (max-width: 600px) {
  .comp-left { padding: 0 0 20px 0; gap: 22px; }
  .comp-right { padding: 16px 0 28px; }
  .comp-cells { grid-template-columns: 1fr; }
  .comp-cell { padding: 16px 14px; }
  .comp-tool-node { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .comp-ai-node { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
}

/* ============================================================
   TOOLS — legacy constellation styles (no longer rendered)
   ============================================================ */
.tools-stage {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 2fr);
  gap: 48px;
  align-items: stretch;
  border: 1px solid var(--hairline);
  background:
    radial-gradient(70% 80% at 0% 0%, rgba(200,168,119,0.06), transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  padding: 40px;
}
@media (max-width: 980px) {
  .tools-stage { grid-template-columns: 1fr; padding: 28px; gap: 36px; }
}

/* Left — AI compression as a quiet column */
.tools-claim {
  display: flex; flex-direction: column;
  gap: 18px;
  border-right: 1px solid var(--hairline);
  padding-right: 48px;
}
@media (max-width: 980px) {
  .tools-claim { border-right: 0; padding-right: 0; padding-bottom: 28px; border-bottom: 1px solid var(--hairline); }
}

.tools-claim-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tools-claim-eyebrow::before {
  content: ''; width: 24px; height: 1px; background: var(--accent);
}

.tools-claim-title {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0;
}
.tools-claim-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}

.tools-claim-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  max-width: 38ch;
}
.tools-claim-body em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--ink);
}

.tools-claim-stats {
  margin-top: 8px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.tools-stat-k {
  font-size: 10px; font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tools-stat-v {
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-top: 2px;
}

/* Right — circular infographic with live neural-net animation */
.tools-circle {
  --outer-r: 250px;
  --inner-r: 116px;
  position: relative;
  width: calc(2 * var(--outer-r) + 64px);
  height: calc(2 * var(--outer-r) + 64px);
  margin: 0 auto;
  align-self: center;
}
@media (max-width: 1100px) { .tools-circle { --outer-r: 220px; --inner-r: 102px; } }
@media (max-width: 900px)  { .tools-circle { --outer-r: 196px; --inner-r: 90px; } }
@media (max-width: 600px)  { .tools-circle { --outer-r: 152px; --inner-r: 70px; } }

.tools-circle-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255,253,247,0.05);
  pointer-events: none;
}
.tools-circle-ring-outer {
  width: calc(2 * var(--outer-r));
  height: calc(2 * var(--outer-r));
}
.tools-circle-ring-inner {
  width: calc(2 * var(--inner-r));
  height: calc(2 * var(--inner-r));
}
.tools-circle-ring-core {
  width: 56px; height: 56px;
  border: 1px dashed rgba(200,168,119,0.25);
  box-shadow: 0 0 24px -4px rgba(200,168,119,0.18);
}

/* Animated neural network layer */
.tools-circle-network {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.tools-net-edge {
  animation: tools-net-fade 2.2s ease-out forwards;
}
.tools-net-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  filter: drop-shadow(0 0 4px rgba(200,168,119,0.55));
  animation: tools-net-draw 0.7s ease-out forwards;
}
.tools-net-dot {
  fill: var(--accent);
  filter: drop-shadow(0 0 5px rgba(200,168,119,0.8));
  animation: tools-net-pulse 1s ease-in-out infinite;
}
@keyframes tools-net-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes tools-net-fade {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  62%  { opacity: 0.85; }
  100% { opacity: 0; }
}
@keyframes tools-net-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.85); transform-origin: center; }
  50%      { opacity: 1;    transform: scale(1.25); transform-origin: center; }
}

/* 3D rotating "Years of craft, compressed" text — wrapped around a tilted cylinder */
.tools-craft-stage {
  --craft-r: calc(var(--inner-r) * 0.72);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  perspective: 720px;
  pointer-events: none;
  z-index: 2;
}
.tools-craft-ring {
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  animation: tools-craft-spin 26s linear infinite;
  will-change: transform;
}
@keyframes tools-craft-spin {
  0%   { transform: rotateX(20deg) rotateY(0deg); }
  100% { transform: rotateX(20deg) rotateY(-360deg); }
}
.tools-craft-char {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(var(--ang)) translateZ(var(--craft-r));
  transform-origin: 0 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tools-craft-char > span {
  display: inline-block;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: pre;
  text-shadow: 0 0 6px rgba(200,168,119,0.4);
}
@media (max-width: 900px) {
  .tools-craft-char > span { font-size: 10px; letter-spacing: 0.14em; }
}
@media (max-width: 600px) {
  .tools-craft-char > span { font-size: 9px; letter-spacing: 0.10em; }
}

.tools-circle-ai {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - var(--inner-r) - 26px));
  text-align: center;
  pointer-events: none;
  z-index: 3;
}
.tools-circle-ai-mark {
  display: block;
  font-family: var(--display);
  font-weight: 200;
  font-size: 32px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-shadow: 0 0 18px rgba(200,168,119,0.4);
}
.tools-circle-ai-sub {
  display: block;
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* Glass tiles */
.tools-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(255,253,247,0.10), rgba(255,253,247,0.02));
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,253,247,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,253,247,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 10px 28px -10px rgba(0,0,0,0.55);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  cursor: default;
  z-index: 2;
}
.tools-orbit-outer {
  transform: rotate(var(--angle)) translate(var(--outer-r), 0) rotate(calc(-1 * var(--angle)));
}
.tools-orbit-inner {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  transform: rotate(var(--angle)) translate(var(--inner-r), 0) rotate(calc(-1 * var(--angle)));
  border-color: rgba(200,168,119,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,253,247,0.16),
    0 8px 22px -8px rgba(200,168,119,0.4);
}
.tools-orbit:hover {
  border-color: var(--accent);
  background: linear-gradient(140deg, rgba(200,168,119,0.18), rgba(200,168,119,0.04));
  box-shadow:
    inset 0 1px 0 rgba(255,253,247,0.2),
    0 14px 36px -10px rgba(200,168,119,0.5);
  z-index: 4;
}
.tools-orbit img {
  width: 64%;
  height: 64%;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.tools-orbit:hover img { opacity: 1; transform: scale(1.06); }
.tools-orbit svg {
  width: 60%;
  height: 60%;
  color: var(--accent);
  transition: transform 0.3s ease;
}
.tools-orbit:hover svg { transform: scale(1.08); }

@media (max-width: 900px) {
  .tools-orbit { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .tools-orbit-inner { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
}
@media (max-width: 600px) {
  .tools-orbit { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .tools-orbit-inner { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
}

/* Legacy constellation rules retained below for any cached references. */
.tools-constellation {
  position: relative;
  display: flex; flex-direction: column;
  gap: 32px;
}

.cluster {
  position: relative;
  padding: 14px 0 0;
  border-top: 1px solid var(--hairline);
}
.cluster-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 18px;
}
.cluster-num {
  font-family: var(--display); font-weight: 200;
  font-size: 11px; color: var(--accent);
  letter-spacing: 0.04em;
  font-feature-settings: 'tnum';
}
.cluster-cat {
  font-size: 11px; font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cluster-count {
  font-size: 10px; font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  font-feature-settings: 'tnum';
}

/* Tool tiles — larger, icon-forward */
.cluster-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
@media (max-width: 1100px) { .cluster-tiles { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 540px)  { .cluster-tiles { grid-template-columns: repeat(3, 1fr); } }

.tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  padding: 18px 12px 14px;
  transition: background 0.5s ease;
  cursor: default;
}
.tile:hover {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
}
.tile::before {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: 70%; height: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at top, rgba(200,168,119,0.10), transparent 65%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.tile:hover::before { opacity: 1; }

.tile-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 1;
}
.tile-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.5s ease, transform 0.5s ease;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.4));
}
.tile:hover .tile-icon img {
  opacity: 1;
  transform: translateY(-2px) scale(1.06);
}
.tile-icon svg {
  width: 100%; height: 100%;
  color: var(--accent);
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: drop-shadow(0 6px 12px rgba(200,168,119,0.25));
}
.tile:hover .tile-icon svg {
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 8px 16px rgba(200,168,119,0.45));
}

.tile-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  text-align: center;
  line-height: 1.2;
  transition: color 0.5s ease;
}
.tile:hover .tile-name { color: var(--ink); }

/* AI cluster — featured visually with bronze rule */
.cluster-ai {
  border-top: 1px solid rgba(200,168,119,0.4);
  padding-top: 16px;
  position: relative;
  margin-top: 8px;
}
.cluster-ai::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; width: 100px; height: 1px;
  background: var(--accent);
}
.cluster-ai .cluster-num,
.cluster-ai .cluster-cat { color: var(--accent); }
.cluster-ai .tile {
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(200,168,119,0.06), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
.cluster-ai .tile:hover {
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(200,168,119,0.14), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
}
.tools-section { margin-bottom: 72px; }
.tools-section:last-child { margin-bottom: 0; }

.tools-section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 18px 0 22px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 32px;
}
.tools-section-num {
  font-family: var(--display);
  font-weight: 200;
  font-size: 32px;
  color: var(--accent);
  letter-spacing: -0.04em;
  font-feature-settings: 'tnum';
  line-height: 1;
}
.tools-section-cat {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
.tools-section-count {
  font-size: 11px; font-weight: 500;
  color: var(--ink-faint);
  font-feature-settings: 'tnum';
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Vitrine grid */
.tools-vitrines {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
@media (max-width: 1100px) { .tools-vitrines { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .tools-vitrines { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .tools-vitrines { grid-template-columns: repeat(2, 1fr); } }

.vitrine {
  position: relative;
  aspect-ratio: 3 / 4;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(200,168,119,0.08), transparent 55%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 65%, var(--surface) 100%);
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  cursor: default;
  transition: background 0.6s ease;
}
.vitrine:hover {
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(200,168,119,0.18), transparent 55%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 65%, var(--surface-2) 100%);
}

/* Spotlight cone — only visible on hover */
.vitrine::before {
  content: '';
  position: absolute;
  left: 50%; top: -10%;
  width: 80%; height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at top, rgba(255,236,200,0.10), transparent 65%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.vitrine:hover::before { opacity: 1; }

/* Plinth — the floor the object sits on */
.vitrine-plinth {
  position: absolute;
  left: 12%; right: 12%;
  bottom: 28%;
  height: 14%;
  background:
    linear-gradient(180deg,
      rgba(200,168,119,0.10) 0%,
      rgba(200,168,119,0.04) 40%,
      transparent 100%);
  border-top: 1px solid rgba(200,168,119,0.18);
  pointer-events: none;
  transform-origin: top center;
  transition: opacity 0.6s ease;
  opacity: 0.7;
}
.vitrine:hover .vitrine-plinth { opacity: 1; }

/* Object stage — holds logo + reflection */
.vitrine-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 22% 22% 32%;
}

.vitrine-object {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.vitrine-logo {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0.78;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,0.5)) drop-shadow(0 2px 4px rgba(200,168,119,0.15));
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
  transform-origin: bottom center;
}
.vitrine:hover .vitrine-logo {
  opacity: 1;
  transform: translateY(-6px) scale(1.04);
  filter: drop-shadow(0 22px 30px rgba(0,0,0,0.6)) drop-shadow(0 4px 10px rgba(200,168,119,0.35));
}

/* Reflection underneath */
.vitrine-reflection {
  position: absolute;
  left: 0; right: 0; bottom: 28%;
  height: 30%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 22%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.35), transparent 75%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.35), transparent 75%);
  transform: scaleY(-1);
  opacity: 0.18;
  transition: opacity 0.6s ease;
}
.vitrine:hover .vitrine-reflection { opacity: 0.28; }
.vitrine-reflection img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: blur(0.4px);
}

/* Engraved nameplate */
.vitrine-plate {
  position: relative;
  z-index: 2;
  padding: 16px 14px 18px;
  border-top: 1px solid var(--hairline);
  background:
    linear-gradient(180deg,
      rgba(255,253,247,0.02) 0%,
      transparent 100%);
  text-align: center;
  display: flex; flex-direction: column; gap: 4px;
}
.vitrine-name {
  font-family: var(--display);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.15;
}
.vitrine-role {
  font-size: 10px; font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-feature-settings: 'tnum';
}

/* Specimen index in the corner — gives each tool an inventory feel */
.vitrine-idx {
  position: absolute;
  top: 12px; left: 12px;
  font-size: 10px; font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  font-feature-settings: 'tnum';
  z-index: 3;
}
.vitrine:hover .vitrine-idx { color: var(--accent); }

/* ============================================================
   AI PANEL — opening tile of the Tools section
   ============================================================ */
.ai-panel {
  position: relative;
  margin-bottom: 72px;
  padding: 48px 48px 48px;
  border: 1px solid var(--hairline);
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(200,168,119,0.08), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  overflow: hidden;
  align-items: center;
}
@media (max-width: 900px) {
  .ai-panel {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 28px 28px;
  }
}

.ai-panel-text { position: relative; z-index: 2; }
.ai-panel-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ai-panel-eyebrow::before {
  content: ''; width: 24px; height: 1px;
  background: var(--accent);
}
.ai-panel-title {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: 18px;
  max-width: 540px;
}
.ai-panel-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}
.ai-panel-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 480px;
  margin-bottom: 24px;
  letter-spacing: -0.005em;
}
.ai-panel-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  margin-top: 8px;
}
.ai-panel-item {
  display: flex; flex-direction: column; gap: 4px;
}
.ai-panel-item-k {
  font-size: 11px; font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ai-panel-item-v {
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* AI animated visual */
.ai-stage {
  position: relative;
  aspect-ratio: 5 / 4;
  border: 1px solid var(--hairline);
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(200,168,119,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--surface));
  overflow: hidden;
}
.ai-stage svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.ai-stage-tag {
  position: absolute;
  bottom: 14px; left: 16px; right: 16px;
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Animated stroke — sketch resolving into architecture */
.ai-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(200,168,119,0.4));
}
.ai-line-faint { stroke-width: 0.5; opacity: 0.4; }
.ai-line-bright { stroke-width: 1.3; opacity: 0.95; }

@keyframes ai-draw {
  0%   { stroke-dashoffset: var(--len); opacity: 0; }
  10%  { opacity: 1; }
  60%  { stroke-dashoffset: 0; }
  90%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0.4; }
}
@keyframes ai-rise {
  0%   { transform: translateY(8px); opacity: 0; }
  60%  { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0);   opacity: 1; }
}
@keyframes ai-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
.ai-node {
  fill: var(--accent);
  animation: ai-pulse 3s ease-in-out infinite;
}

/* ============================================================
   HERO — positioning line + CTAs (full-bleed override)
   ============================================================ */
.hero-cta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 0;
  margin-bottom: 72px;
}
.hero-cta .btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-cta .btn:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(200,168,119,0.5);
  color: #fff;
}
.hero-cta .btn-primary {
  background: linear-gradient(180deg, rgba(200,168,119,0.22), rgba(200,168,119,0.08));
  border-color: rgba(200,168,119,0.45);
  color: #fff;
}
.hero-cta .btn-primary:hover {
  background: linear-gradient(180deg, rgba(200,168,119,0.34), rgba(200,168,119,0.15));
  border-color: rgba(200,168,119,0.7);
}

/* Identity tagline — small, refined dot-separated positioning line */
.hero-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 28px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(14px, 1.05vw, 17px);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
}
.hero-identity-dot {
  color: rgba(200, 168, 119, 0.55);
  font-size: 0.95em;
  line-height: 1;
}

.hero-positioning {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.55;
  max-width: 540px;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 36px;
  letter-spacing: -0.005em;
}

/* Three-pillar row — refined monoline gold icons, equal weight */
.hero-pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  margin-bottom: 44px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.hero-pillar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hero-pillar-icon {
  width: 22px;
  height: 22px;
  color: rgba(200, 168, 119, 0.78);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero-pillar-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }