/* ==========================================================================
   Carter Banks — carterbanks.com
   Every value traces to the design system tokens (css/tokens/*).
   Animation discipline: subtle, looping, ease-in-out; no bounces.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--link); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--link-hover); }

img { max-width: 100%; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--section-y) 0; position: relative; }

.gold { color: var(--gold); font-style: normal; }

/* ---- Type primitives ------------------------------------------------- */

.display {
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin: 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--sp-5);
}

.section-title {
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin: 0 0 var(--sp-6);
}

/* ---- Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  border-radius: var(--radius-pill);
  padding: 14px 30px;
  cursor: pointer;
  border: none;
  transition: all .18s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--gold); color: var(--n-050); font-weight: var(--fw-bold); }
.btn-primary:hover { background: var(--gold-light); color: var(--n-050); }
.btn-outline { background: transparent; color: var(--white); font-weight: var(--fw-medium); border: 1px solid rgba(255,255,255,.28); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-glyph { width: 16px; height: 16px; }

/* ---- Nav --------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-6);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, padding .3s ease;
}
.nav.is-scrolled {
  background: rgba(10,10,10,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border-soft);
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}
.nav-brand { display: flex; align-items: center; }
/* Delivered lockup (744x152): face mark + wordmark, gold-dipped on the first
   and last letters, already spaced as designed — don't rebuild it from parts.
   34px tall means retina asks ~332px of a 744px source, so there's headroom. */
.nav-lockup {
  height: 34px;
  width: auto;
  display: block;
}
.nav-links { display: flex; gap: var(--sp-6); }
.nav-links a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-muted);
}
.nav-links a:hover { color: var(--gold); }
.nav-cta { padding: 11px 24px; }

/* ---- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  background: var(--bg-black);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Single column: the sculptures are the hero's imagery, so the type gets the
   full width and "media systems" lands on one line. */
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 120px var(--gutter) var(--sp-8);
}
.hero-copy { max-width: 980px; }

.display .line { display: block; }

.hero-sub {
  color: var(--text-body);
  max-width: 46ch;
  margin: var(--sp-5) 0 var(--sp-6);
}

.hero-ctas { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* Hero sculpture — edge-bleed treatment (DS: .45–.6, masked toward the copy),
   NOT ghost. The busts are near-black (median luminance 20/255), so at ghost
   opacity over a near-black hero they composite to ~18 vs the background's 10
   and simply vanish. Edge bleed gives them real presence in the empty zones
   while the mask dissolves them to nothing before they reach any text.
   Staggered durations so the busts never sync into one pulsing mass.

   MASK GOTCHA: each bust is positioned mostly off-canvas, so the part you see
   is NOT the part the mask percentages start from — they're relative to the
   whole image, off-screen included. A bust at top:-50% shows only 50–100% of
   the image, so a mask that goes transparent at 62% erases almost all of it.
   If you reposition a bust, re-derive its mask stops. */
.hero-busts {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.hbust { position: absolute; will-change: transform; }

.hbust-1 {                       /* column — bottom-left corner, fades up-right */
  left: -17%;
  bottom: -52%;
  height: 124%;
  opacity: .34;
  filter: brightness(1.6) drop-shadow(0 0 45px rgba(230, 188, 119, .30));
  -webkit-mask-image: linear-gradient(to right, #000 30%, transparent 78%);
          mask-image: linear-gradient(to right, #000 30%, transparent 78%);
  animation: bust-drift-a 19s ease-in-out infinite alternate;
}
.hbust-3 {                       /* head — kept clear of the mark: two faces
                                    side by side compete, so this one recedes */
  right: -24%;
  bottom: -26%;
  height: 150%;
  opacity: .28;
  filter: brightness(1.5) drop-shadow(0 0 45px rgba(230, 188, 119, .26));
  -webkit-mask-image: linear-gradient(to left, #000 40%, transparent 88%);
          mask-image: linear-gradient(to left, #000 40%, transparent 88%);
  animation: bust-drift-c 16s ease-in-out infinite alternate;
}
@keyframes bust-drift-a {
  from { translate: 0 0;         rotate: -1.6deg; }
  to   { translate: 28px -36px;  rotate: 1deg; }
}
@keyframes bust-drift-c {
  from { translate: 0 0;         rotate: 1.2deg; }
  to   { translate: -24px -30px; rotate: -1deg; }
}

/* Hero birds (js/birds.js) — one canvas above the busts, under the copy. */
.hero-birds {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Vertical mono edge labels */
.edge-label {
  position: absolute;
  z-index: 3;
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-faint);
  pointer-events: none;
}
.edge-right { right: 22px; top: 50%; translate: 0 -50%; }
.edge-left { left: 22px; bottom: 12%; }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  translate: -50% 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-faint);
}
.cue-line {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--gold), transparent);
  transform-origin: top;
  animation: cue-grow 2.2s ease-in-out infinite;
}
@keyframes cue-grow {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---- Section header panel (SectionHeader variant="panel") --------------- */

.section-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-black);
  border: 1px solid var(--border-soft);
  min-height: 150px;
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-7);
}
.panel-gradient {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 38%;
  background: var(--gold-gradient);
  background-size: 200% 200%;
  animation: gradient-drift 8s ease-in-out infinite alternate;
}
@keyframes gradient-drift {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}
.panel-band {
  position: absolute;
  top: -20%; right: 22%;
  width: 80px; height: 140%;
  transform: skewX(var(--skew));
  background: linear-gradient(180deg, var(--gold-light), var(--gold-deep));
  opacity: .9;
}
.panel-ghost {
  position: absolute;
  right: 2%; top: 50%;
  translate: 0 -50%;
  writing-mode: vertical-rl;
  font-weight: var(--fw-black);
  font-size: 120px;
  line-height: .8;
  text-transform: uppercase;
  color: rgba(10,10,10,.14);
  pointer-events: none;
}
.panel-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 30px 34px;
}
.panel-slashes { height: 36px; width: auto; flex-shrink: 0; }
.panel-title {
  font-weight: var(--fw-black);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}

/* ---- Section header, crossing variant -----------------------------------
   A diagonal band runs THROUGH the phrase and the type inverts inside it.
   The band and the dark copy of the text share one clip-path, so the colour
   flip always lands exactly on the band edge — no text movement, no dimming.
   37px of lean per 150px of height ≈ the brand's -14deg skew. */

/* bandAt is tuned per phrase: the edge must cut through several letters, not
   graze the last one — a single clipped glyph reads as a rendering fault. */
.crossing { --cross-clip: polygon(calc(40% + 37px) 0, 100% 0, 100% 100%, 40% 100%); }
.crossing .cross-band {
  position: absolute;
  inset: 0;
  background: var(--gold-gradient);
  background-size: 200% 200%;
  clip-path: var(--cross-clip);
  pointer-events: none;
  animation: gradient-drift 9s ease-in-out infinite alternate;
}
.crossing .cross-invert {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  clip-path: var(--cross-clip);
  pointer-events: none;
}
.crossing .cross-invert .panel-slashes { filter: brightness(0); opacity: .9; }
.crossing .cross-invert .panel-title { color: var(--n-050); }

/* ---- Selected results (metrics) ------------------------------------------ */

.section-metrics { padding-top: var(--sp-8); padding-bottom: 0; }
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: var(--sp-3);
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: border-color .18s ease;
}
.stat:hover { border-color: var(--gold-a18); }
.stat-val {
  font-weight: var(--fw-black);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--gold);
}
.stat-lab {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: .16em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Selected campaigns --------------------------------------------------- */

.campaigns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.campaign {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: var(--sp-6) var(--sp-5);
  transition: border-color .18s ease;
}
.campaign:hover { border-color: var(--gold-a35); }
.campaign-kicker { margin-bottom: var(--sp-3); font-size: 12px; }
.campaign-title {
  font-weight: var(--fw-black);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin: 0 0 var(--sp-2);
}
.campaign-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--sp-5);
}
.chart-list {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.chart-list li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.rank {
  font-weight: var(--fw-black);
  font-size: 17px;
  color: var(--gold);
  /* wide enough for a two-digit rank (#24) so every label starts on the
     same x in both cards */
  min-width: 40px;
}
.campaign-body { color: var(--text-body); font-size: 15px; margin: 0 0 var(--sp-4); }
.campaign-note {
  margin: 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-hair);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-a60);
}

/* ---- Cards (What I Do) --------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: var(--sp-6) var(--sp-5);
  transition: border-color .18s ease;
}
.card:hover { border-color: var(--gold-a35); }
.card-num {
  position: absolute;
  top: var(--sp-4); right: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--track-mono);
  color: var(--text-faint);
}
.card h3 {
  font-weight: var(--fw-bold);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: var(--sp-5) 0 var(--sp-3);
}
.card p { color: var(--text-body); font-size: 15px; margin: 0; }

/* Utility glyphs — 2px stroke, gold, gentle loops */
.glyph { display: inline-flex; color: var(--gold); width: 44px; height: 30px; }
.glyph svg { width: 100%; height: 100%; overflow: visible; }
.card:hover .glyph { color: var(--gold-light); }

.pulse-path {
  stroke-dasharray: 70;
  stroke-dashoffset: 140;
  animation: pulse-draw 3.6s ease-in-out infinite;
}
@keyframes pulse-draw { to { stroke-dashoffset: 0; } }

.play-ring {
  stroke-dasharray: 48 15;
  transform-origin: center;
  animation: ring-spin 14s linear infinite;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }

.node-link {
  stroke-dasharray: 4 5;
  animation: node-flow 2.6s linear infinite;
}
@keyframes node-flow { to { stroke-dashoffset: -18; } }

.chart-path {
  stroke-dasharray: 34;
  stroke-dashoffset: 68;
  animation: chart-draw 3.8s ease-in-out infinite;
}
@keyframes chart-draw { to { stroke-dashoffset: 0; } }

.glyph-wave line { transform-origin: center; animation: wave-bob 2.4s ease-in-out infinite alternate; }
.glyph-wave line:nth-child(1) { animation-delay: 0s; }
.glyph-wave line:nth-child(2) { animation-delay: .3s; }
.glyph-wave line:nth-child(3) { animation-delay: .6s; }
.glyph-wave line:nth-child(4) { animation-delay: .9s; }
@keyframes wave-bob { from { transform: scaleY(.55); } to { transform: scaleY(1.15); } }

/* ---- Marquee (track record) ---------------------------------------------- */

.marquee {
  border-top: 1px solid var(--border-hair);
  border-bottom: 1px solid var(--border-hair);
  background: var(--surface-deep);
  overflow: hidden;
  padding: var(--sp-5) 0;
}
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-set { display: flex; align-items: center; }
.marquee-set span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.marquee-set i {
  font-family: var(--font-mono);
  font-style: normal;
  color: var(--gold);
  margin: 0 var(--sp-6);
}
@keyframes marquee { to { translate: -50% 0; } }

/* ---- Philosophy ----------------------------------------------------------- */

.section-philosophy { background: var(--bg-black); padding: 120px 0; overflow: hidden; }

/* Sculpture — the brand's only imagery. Edge-bleed treatment: oversized,
   cropped by the section, and masked away toward the copy so type stays clean. */
.bust {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.bust-bleed {
  right: -8%;
  bottom: -16%;
  height: 138%;
  opacity: .5;
  /* dissolve well before the copy zone — the type always wins */
  -webkit-mask-image: linear-gradient(to left, #000 10%, transparent 58%);
          mask-image: linear-gradient(to left, #000 10%, transparent 58%);
}

/* capped so the lines never run into the sculpture's zone */
.philo { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 860px; }
.philo-line {
  font-weight: var(--fw-black);
  font-size: clamp(34px, 5vw, 72px);
  line-height: .98;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin: 0;
  color: rgba(255,255,255,.14);
  transition: color .6s ease;
}
.philo-line em { font-style: normal; color: inherit; transition: color .6s ease; }
.philo-line.is-active { color: var(--white); }
.philo-line.is-active em { color: var(--gold); }
/* Without JS-driven activation every line reads at full strength */
html:not(.js) .philo-line, html.reduce-motion .philo-line { color: var(--white); }
html:not(.js) .philo-line em, html.reduce-motion .philo-line em { color: var(--gold); }

/* Hanging lanterns (js/lanterns.js) — Carter's reference art, cut into chain + body + glass
   glow. Chains pin to the section's top edge; the section's overflow clips them. They hang in
   the dark gap between the copy and the bust. Only transform (sway) and the glow's opacity
   (candle) ever change. Geometry below the placement rules is generated — see
   ~/carterbanks-site-reference/bird-rig/lamp.swift. */
.section-philosophy .container { position: relative; z-index: 1; } /* copy always above the lamps */
.lanterns { position: absolute; inset: 0; pointer-events: none; user-select: none; }
.lantern { position: absolute; top: 0; will-change: transform; }
/* Placement keys off the front lamp; the back lamp keeps the reference's offset (0.612) and
   size (0.812) relative to it. Width is capped so the front lamp never outgrows the section. */
.lanterns { --lamp-x: 64%; --lamp-w: min(15.1%, 232px); }
.lantern-front { left: var(--lamp-x); width: var(--lamp-w); }
.lantern-back  { left: calc(var(--lamp-x) + 0.612 * var(--lamp-w)); width: calc(0.812 * var(--lamp-w)); }
/* Philosophy's copy re-wraps by width; measured right edge: ≤61% at ≥1440, ≤72% from 1200
   to 1439, 77–88% at 1181 and below. Tuck the pair right where the copy runs long, hide
   where it can't fit (1181 still overlapped by 38px, so the cut is 1199). */
@media (max-width: 1439px) { .lanterns { --lamp-x: 74%; --lamp-w: 12%; } }
.lantern-chain, .lantern-body { position: absolute; display: block; }
.lantern-body { isolation: isolate; will-change: transform; }
.lantern-base, .lantern-glow, .lantern-light { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the glass light is added back on top of the dimmed base — additive, so opacity 1 = the art */
.lantern-glow { mix-blend-mode: screen; mix-blend-mode: plus-lighter; will-change: opacity; }
/* the wandering hot spot, clipped to the glass by the glow layer's own alpha */
.lantern-light { mix-blend-mode: screen; mix-blend-mode: plus-lighter; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.lantern-flame {
  position: absolute; border-radius: 50%; will-change: transform, opacity;
  background: radial-gradient(circle, rgba(255, 222, 160, .5) 0%, rgba(255, 176, 72, .26) 38%, rgba(255, 150, 50, 0) 70%);
}
@media (max-width: 1199px) { .lanterns { display: none; } }
/* generated geometry — lamp.swift */
.lantern-front { aspect-ratio: 335 / 1468; transform-origin: 48.060% 0; }
.lantern-front .lantern-chain { left: 43.582%; top: 0.000%; width: 9.851%; height: 47.684%; }
.lantern-front .lantern-body { left: 0.000%; top: 47.684%; width: 100.000%; height: 52.316%; transform-origin: 49.254% 0.130%; }
.lantern-front .lantern-light { -webkit-mask-image: url(../assets/lanterns/front-glow.png); mask-image: url(../assets/lanterns/front-glow.png); }
.lantern-front .lantern-flame { left: 33.134%; top: 51.432%; width: 34.627%; height: 15.104%; }
.lantern-back { aspect-ratio: 272 / 886; transform-origin: 48.400% 0; }
.lantern-back .lantern-chain { left: 44.485%; top: 0.000%; width: 8.824%; height: 29.345%; }
.lantern-back .lantern-body { left: 0.000%; top: 29.345%; width: 100.000%; height: 70.655%; transform-origin: 49.265% 0.160%; }
.lantern-back .lantern-light { -webkit-mask-image: url(../assets/lanterns/back-glow.png); mask-image: url(../assets/lanterns/back-glow.png); }
.lantern-back .lantern-flame { left: 33.088%; top: 49.840%; width: 33.824%; height: 14.696%; }

/* ---- Now ------------------------------------------------------------------- */

.now-list { list-style: none; margin: 0; padding: 0; }
.now-list li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-6);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border-hair);
}
.now-list li:first-child { border-top: 1px solid var(--border-hair); }
.now-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-mono);
  color: var(--gold);
}
.now-item {
  font-weight: var(--fw-bold);
  font-size: clamp(18px, 2.4vw, 26px);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--text-body);
  transition: color .18s ease, translate .18s ease;
}
.now-list li:hover .now-item { color: var(--white); translate: 6px 0; }

/* ---- Pull quote -------------------------------------------------------------- */

.quote-panel {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-sm);
  background: var(--gold-gradient);
  background-size: 160% 160%;
  animation: gradient-drift 14s ease-in-out infinite alternate;
  padding: var(--sp-8) var(--sp-7);
}
.quote-ghost {
  position: absolute;
  right: -1%;
  top: 50%;
  translate: 0 -50%;
  writing-mode: vertical-rl;
  font-weight: var(--fw-black);
  font-size: 130px;
  line-height: .75;
  text-transform: uppercase;
  color: rgba(10,10,10,.10);
  pointer-events: none;
}
.quote-panel blockquote {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 56ch;
  color: var(--ink);
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: var(--fw-regular);
  line-height: 1.5;
}
.quote-panel figcaption {
  position: relative;
  z-index: 2;
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: rgba(10,10,10,.7);
}

/* ---- Contact ------------------------------------------------------------------ */

.section-contact {
  background: var(--bg-black);
  padding: 140px 0 120px;
  text-align: center;
  overflow: hidden;
}
.contact-inner { display: flex; flex-direction: column; align-items: center; }
.contact-display { font-size: clamp(44px, 6.4vw, 96px); }
.contact-sub {
  color: var(--text-body);
  max-width: 52ch;
  margin: var(--sp-5) 0 var(--sp-6);
}
.contact-ctas { display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; }
.socials { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: var(--sp-7); }
.socials a { color: var(--gold); display: flex; }
.socials a:hover { color: var(--gold-light); }

/* ---- Footer -------------------------------------------------------------------- */

.footer { border-top: 1px solid var(--border-hair); padding: var(--sp-5) 0; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-faint);
}
.footer-mark { height: 22px; width: auto; }
.footer-roles {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---- Reveal states (JS-gated so no-JS stays fully visible) --------------------- */

html.js.motion [data-reveal],
html.js.motion [data-reveal-group] > *,
html.js.motion [data-hero] {
  opacity: 0;
}

/* ---- Responsive ------------------------------------------------------------------ */

@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .nav { padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .nav-links { display: none; }
  .hero-inner { padding-top: 130px; }
  .edge-label { display: none; }
  .panel-ghost { font-size: 80px; }
  .quote-panel { padding: var(--sp-7) var(--sp-5); }
  /* the bust must never compete with the philosophy lines on a narrow screen */
  .bust-bleed { opacity: .22; height: 100%; right: -22%; }
  /* the hero is single-column and tight here — drop the middle bust and
     lighten the rest so they stay texture, not clutter */
  .hbust-1 { display: none; }
  .hbust-3 { opacity: .2; height: 92%; right: -34%; }
  /* narrow screens wrap the phrase, so there's no clean place to cut it —
     pull the band fully clear and let it read as a plain edge accent. */
  .crossing { --cross-clip: polygon(calc(80% + 37px) 0, 100% 0, 100% 100%, 80% 100%); }
  .campaign { padding: var(--sp-5) var(--sp-4); }
}

/* ---- Reduced motion: kill every loop, keep everything visible ------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cue-line, .hbust,
  .panel-gradient, .cross-band, .quote-panel, .marquee-track,
  .pulse-path, .play-ring, .node-link, .chart-path, .glyph-wave line {
    animation: none !important;
  }
}
html.reduce-motion { scroll-behavior: auto; }
html.reduce-motion .cue-line, html.reduce-motion .panel-gradient, html.reduce-motion .quote-panel,
html.reduce-motion .marquee-track, html.reduce-motion .pulse-path, html.reduce-motion .play-ring,
html.reduce-motion .node-link, html.reduce-motion .chart-path, html.reduce-motion .glyph-wave line,
html.reduce-motion .cross-band, html.reduce-motion .hbust {
  animation: none !important;
}