/* ============================================================
   MICHAEL SELCK — Strategic Gravity / Digital Operating System
   Version B · 2026. LIGHT CD variant: warm porcelain canvas, navy ink,
   terracotta accent. Deliberate navy "ink" bands build hierarchy.
   Typography follows the CD wordmark: Raleway display + Sora body.
   ============================================================ */

@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

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

:root {
  /* Corporate identity — navy + terracotta + sand (from the CD logo) */
  --navy:        #1A2B4A;   /* CD deep navy — bildmarke + dark bands */
  --navy-2:      #16223A;   /* deeper navy for gradients */
  --navy-light:  #2A4070;
  --accent:      #BD5A38;   /* terracotta, deepened for light surfaces */
  --accent-deep: #9C4A2E;
  --accent-soft: #A8502F;   /* readable terra accent on light (Terra-Kursiv) */
  --sand:        #C9AE85;

  /* Light CD surfaces — warm porcelain */
  --bg:          #F4F1EA;   /* warm porcelain canvas */
  --bg-2:        #FFFFFF;   /* cards / raised surfaces */
  --panel:       rgba(26,43,74,.045);   /* navy-tint glass */
  --panel-2:     rgba(26,43,74,.075);
  --line:        rgba(26,43,74,.14);
  --line-soft:   rgba(26,43,74,.08);

  /* Type colors — navy ink on light */
  --text:        #182338;   /* near-navy ink (matches wordmark) */
  --muted:       #46546E;   /* ~6.5:1 on porcelain — readable secondary copy */
  --faint:       #5F6B82;   /* ~4.6:1 — decorative labels stay legible */

  /* Typefaces follow the CD: Raleway is the logo wordmark (display),
     Sora carries body/UI. Real Raleway italic = the terracotta accent. */
  --f-display: 'Raleway', 'Sora', system-ui, sans-serif;
  --f-body: 'Sora', system-ui, sans-serif;
  --f-accent: 'Raleway', Georgia, serif;
  --w-display: 700;   /* Raleway headlines want more weight on light */

  /* Theme-divergent surfaces/effects (light values; flipped under [data-theme="dark"]) */
  --mesh:
    radial-gradient(48% 42% at 78% 8%, rgba(189,90,56,.10), transparent 62%),
    radial-gradient(46% 46% at 14% 26%, rgba(201,174,133,.10), transparent 64%),
    radial-gradient(60% 50% at 90% 88%, rgba(201,174,133,.12), transparent 60%),
    radial-gradient(70% 60% at 30% 96%, rgba(189,90,56,.06), transparent 66%),
    linear-gradient(180deg, #F7F4EE, var(--bg) 55%, #EFEBE1);
  --mesh-saturate: 104%;
  --spot: radial-gradient(circle, rgba(189,90,56,.08), rgba(189,90,56,.03) 36%, transparent 64%);
  --spot-op: .8;
  --grain-op: .22;
  --grain-blend: soft-light;
  --fade-rgb: 239,235,225;
  --header-bg: rgba(244,241,234,.6);
  --header-bg-scroll: rgba(247,244,238,.86);
  --header-bg-menu: rgba(247,244,238,.94);
  --header-shadow: 0 12px 30px -24px rgba(24,35,56,.5);
  --portrait-shadow: 0 40px 90px -48px rgba(24,35,56,.45), 0 0 0 1px rgba(255,255,255,.6) inset;
  --portrait-filter: contrast(1.02) saturate(.98) brightness(1.01);
  --portrait-overlay:
    linear-gradient(180deg, transparent 64%, rgba(24,35,56,.22)),
    radial-gradient(70% 50% at 82% 100%, rgba(189,90,56,.16), transparent 62%);
  --beam: linear-gradient(150deg, rgba(189,90,56,.20), rgba(201,174,133,.16) 55%, transparent);
  --beam-op: .9;
  --eyebrow-bg: rgba(255,255,255,.82);
  --cursor-blend: normal;
  --cursor-hot: rgba(189,90,56,.18);
  --scene-no-stroke: rgba(26,43,74,.18);
  --scene-no-stroke-inline: rgba(26,43,74,.16);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --shell: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --header-h: 78px;
}

/* ============================================================
   DARK THEME — restores the Version-A control-room canvas.
   Fraunces is the deliberate (non-CD) display face in dark mode.
   ============================================================ */
[data-theme="dark"] {
  --accent:      #C16A4F;
  --accent-deep: #9E4F3D;
  --accent-soft: #E89F86;

  --bg:          #0B1220;
  --bg-2:        #0E1626;
  --panel:       rgba(255,255,255,.038);
  --panel-2:     rgba(255,255,255,.055);
  --line:        rgba(255,255,255,.10);
  --line-soft:   rgba(255,255,255,.065);

  --text:        #EEF1F6;
  --muted:       #A4AFC2;
  --faint:       #6B7689;

  --f-display: 'Fraunces', Georgia, serif;
  --f-accent:  'Fraunces', Georgia, serif;
  --w-display: 500;

  --mesh:
    radial-gradient(48% 42% at 78% 8%, rgba(193,106,79,.30), transparent 62%),
    radial-gradient(46% 46% at 14% 26%, rgba(42,64,112,.55), transparent 64%),
    radial-gradient(60% 50% at 90% 88%, rgba(201,174,133,.16), transparent 60%),
    radial-gradient(70% 60% at 30% 96%, rgba(158,79,61,.22), transparent 66%),
    linear-gradient(180deg, var(--bg), var(--bg-2) 60%, var(--bg));
  --mesh-saturate: 108%;
  --spot: radial-gradient(circle, rgba(232,159,134,.14), rgba(232,159,134,.05) 36%, transparent 64%);
  --spot-op: .9;
  --grain-op: .5;
  --grain-blend: overlay;
  --fade-rgb: 11,18,32;
  --header-bg: rgba(11,18,32,.55);
  --header-bg-scroll: rgba(11,18,32,.82);
  --header-bg-menu: rgba(7,12,22,.9);
  --header-shadow: none;
  --portrait-shadow: 0 50px 120px -50px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.05) inset;
  --portrait-filter: contrast(1.04) saturate(.92) brightness(.96);
  --portrait-overlay:
    linear-gradient(180deg, transparent 50%, rgba(11,18,32,.55)),
    radial-gradient(70% 50% at 80% 100%, rgba(193,106,79,.28), transparent 62%);
  --beam: linear-gradient(150deg, rgba(232,159,134,.32), rgba(42,64,112,.22) 60%, transparent);
  --beam-op: .8;
  --eyebrow-bg: rgba(255,255,255,.04);
  --cursor-blend: screen;
  --cursor-hot: rgba(232,159,134,.22);
  --scene-no-stroke: rgba(255,255,255,.10);
  --scene-no-stroke-inline: rgba(255,255,255,.12);
}

/* Deliberate dark "ink" bands (System/Orbit, Signal/Network, Footer):
   re-declare the surface + type tokens to white-on-navy so every
   var()-driven rule flips automatically inside these sections. */
.band--ink {
  --bg:          #0F1A30;
  --bg-2:        rgba(255,255,255,.035);
  --panel:       rgba(255,255,255,.05);
  --panel-2:     rgba(255,255,255,.08);
  --line:        rgba(255,255,255,.12);
  --line-soft:   rgba(255,255,255,.07);
  --text:        #EEF1F6;
  --muted:       #AEB9CC;
  --faint:       #7C879B;
  --accent-soft: #E89F86;   /* lighter terra reads better on navy */
  color: var(--text);
}
/* outline editorial numerals: light ghost stroke inside dark bands */
.band--ink .scene-no,
.band--ink .scene-no--inline { -webkit-text-stroke-color: rgba(255,255,255,.20); }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: var(--w-display); letter-spacing: -.015em; }
p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 300;
  transform: translateY(-160%);
  padding: 10px 16px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 600;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- SITEWIDE AMBIENT DEPTH (mesh + grain + spotlight) ---------- */
.ambient {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.ambient__mesh {
  position: absolute; inset: -10%;
  background: var(--mesh);
  filter: saturate(var(--mesh-saturate));
}
/* Soft scroll/cursor-driven spotlight — purposeful, never a grid */
.ambient__spot {
  position: absolute;
  left: var(--spot-x, 50%); top: var(--spot-y, 30%);
  width: 60vmax; height: 60vmax;
  transform: translate3d(-50%, -50%, 0);
  background: var(--spot);
  opacity: var(--spot-op);
  transition: left .6s var(--ease-out), top .6s var(--ease-out);
  will-change: left, top;
}
.ambient__grain {
  position: absolute; inset: 0;
  background-image: url('assets/images/grain.png');
  background-size: 220px 220px;
  opacity: var(--grain-op);
  mix-blend-mode: var(--grain-blend);
}
/* clipped light beam, used sparingly */
.ambient::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(118deg, transparent 0 46%, rgba(255,255,255,.04) 49% 50%, transparent 53% 100%);
}

/* bottom depth blur that fades — never hides footer */
.depth-fade {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: clamp(90px, 14vh, 170px);
  pointer-events: none;
  opacity: var(--depth-opacity, 1);
  background: linear-gradient(180deg, rgba(var(--fade-rgb),0), rgba(var(--fade-rgb),.55) 64%, rgba(var(--fade-rgb),.92));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
  mask-image: linear-gradient(180deg, transparent, #000 70%);
  transition: opacity .3s var(--ease-out);
}
.is-at-footer .depth-fade { opacity: 0; }
/* hero closes on its own crisp edge on mobile — no soft fade band over it */
.is-over-hero .depth-fade { opacity: 0; }

/* custom cursor dot (desktop pointer only) */
.cursor-dot {
  position: fixed; left: 0; top: 0; z-index: 250;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent-soft);
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none; opacity: 0;
  mix-blend-mode: var(--cursor-blend);
  transition: opacity .3s ease, width .25s var(--ease-out), height .25s var(--ease-out), background .25s ease;
}
.cursor-dot.is-on { opacity: .85; }
.cursor-dot.is-hot { width: 46px; height: 46px; background: var(--cursor-hot); }

/* On a precise-pointer desktop the dot replaces the native pointer entirely.
   Gated to no-preference so reduced-motion users (dot JS is skipped) keep a
   real cursor. Text fields keep the I-beam so typing/selection stays usable. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html, body, a, button, summary, label, select, .magnetic, [role="button"],
  input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"] { cursor: none; }
  input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
  input[type="url"], input[type="number"], input:not([type]), textarea, [contenteditable="true"] { cursor: text; }
}

/* ---------- PROGRESS ---------- */
.site-progress {
  position: fixed; inset: 0 0 auto; z-index: 220; height: 2px; pointer-events: none;
}
.site-progress span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--sand), var(--accent), var(--accent-soft));
  transform: scaleX(0); transform-origin: left; will-change: transform;
}

/* ---------- HEADER ---------- */
.site-header {
  position: sticky; top: 0; z-index: 230;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px var(--gut);
  background: var(--header-bg);
  backdrop-filter: blur(20px) saturate(130%);
  border-bottom: 1px solid transparent;
  transition: padding .32s var(--ease-out), background .32s var(--ease-out), border-color .32s var(--ease-out);
}
.site-header.is-scrolled {
  padding-block: 11px;
  background: var(--header-bg-scroll);
  border-color: var(--line-soft);
  box-shadow: var(--header-shadow);
}
body.menu-open .site-header {
  position: fixed;
  left: 0;
  right: 0;
  padding-block: 12px;
  background: var(--header-bg-menu);
  border-color: rgba(189,90,56,.22);
}
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand-lockup { width: clamp(150px, 13vw, 190px); height: auto; }
/* Header wordmark swaps per theme so it stays legible: navy on light, negative on dark. */
.brand-lockup--dark { display: none; }
[data-theme="dark"] .brand-lockup--light { display: none; }
[data-theme="dark"] .brand-lockup--dark { display: block; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  position: relative; font-size: 14px; color: var(--muted);
  transition: color .2s ease;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -7px; height: 1px; width: 0;
  background: var(--accent); transition: width .28s var(--ease-out);
}
.nav a:hover, .nav a.is-active { color: var(--text); }
.nav a:hover::after, .nav a.is-active::after { width: 100%; }

/* ---------- BUTTONS ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; border-radius: 999px;
  font-family: var(--f-body); font-size: 15px; font-weight: 500; letter-spacing: .01em;
  line-height: 1; white-space: nowrap;
  transition: transform .18s var(--ease-out), box-shadow .22s var(--ease-out), background .22s var(--ease-out), border-color .22s var(--ease-out), color .22s var(--ease-out);
}
.btn span { transition: transform .22s var(--ease-out); }
.btn:hover span { transform: translateX(3px); }
.btn::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(110deg, transparent 0 30%, rgba(255,255,255,.22) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform .7s var(--ease-out), opacity .2s ease;
}
.btn:hover::after { opacity: 1; transform: translateX(120%); }

.btn--primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
  box-shadow: 0 18px 44px -22px rgba(193,106,79,.8), 0 0 0 1px rgba(232,159,134,.2) inset;
}
.btn--primary:hover { box-shadow: 0 24px 56px -22px rgba(193,106,79,.95), 0 0 0 1px rgba(232,159,134,.3) inset; }
.btn--ghost {
  color: var(--text); border: 1px solid var(--line);
  background: var(--panel);
}
.btn--ghost:hover { border-color: var(--accent); background: rgba(189,90,56,.10); }
.btn--invert {
  background: #fff; color: var(--accent-deep);
  box-shadow: 0 22px 50px -24px rgba(0,0,0,.7);
}
.btn--text {
  padding-inline: 4px; border-radius: 0; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.btn--text:hover { color: var(--text); border-color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }

/* ---------- MENU TOGGLE / MOBILE MENU ---------- */
.menu-toggle {
  display: none; position: relative; z-index: 240;
  width: 46px; height: 46px; flex: 0 0 auto;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--text); cursor: pointer;
  transition: transform .24s var(--ease-out), border-color .24s var(--ease-out);
}
.menu-toggle span {
  position: absolute; width: 17px; height: 1.6px; border-radius: 99px;
  background: currentColor; transition: transform .36s var(--ease-out), opacity .2s ease;
}
.menu-toggle span:nth-child(1) { transform: translateY(-4px); }
.menu-toggle span:nth-child(2) { transform: translateY(4px); }
body.menu-open .menu-toggle { border-color: var(--accent); background: rgba(193,106,79,.14); }
body.menu-open .menu-toggle span:nth-child(1) { transform: rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { transform: rotate(-45deg); }

/* ---------- THEME TOGGLE (light/dark) ---------- */
.theme-toggle {
  position: relative; z-index: 240; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--text); cursor: pointer;
  transition: transform .24s var(--ease-out), border-color .24s var(--ease-out), background .24s var(--ease-out), color .24s var(--ease-out);
}
.theme-toggle:hover { border-color: var(--accent); background: rgba(189,90,56,.10); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }
.theme-toggle svg { width: 20px; height: 20px; display: block; }
/* show sun in dark mode (to switch to light), moon in light mode (to switch to dark) */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 205;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .4s;
}
.mobile-menu__backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 84% 10%, rgba(193,106,79,.3), transparent 66%),
    radial-gradient(60% 50% at 10% 90%, rgba(42,64,112,.5), transparent 66%),
    rgba(7,12,22,.78);
  opacity: 0; backdrop-filter: blur(0);
  transition: opacity .32s ease, backdrop-filter .42s ease;
}
.mobile-menu__panel {
  position: absolute; top: clamp(60px, 9svh, 76px); left: 14px; right: 14px;
  /* Bounded to the viewport so it never spills off-screen; sizing below aims to avoid scroll entirely. */
  max-height: calc(100svh - clamp(60px, 9svh, 76px) - 12px);
  display: grid; gap: clamp(5px, 1.1svh, 8px); padding: clamp(12px, 2svh, 18px);
  border: 1px solid var(--line); border-radius: clamp(18px, 3svh, 26px);
  background: linear-gradient(155deg, rgba(20,30,50,.96), rgba(13,21,38,.94));
  box-shadow: 0 40px 90px -44px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.05) inset;
  transform: translateY(-14px) scale(.97); opacity: 0; filter: blur(8px);
  transition: transform .42s var(--ease-out), opacity .3s ease, filter .42s ease;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mobile-menu__eyebrow {
  margin: 0 2px clamp(2px, .6svh, 6px); color: var(--accent-soft);
  font-size: clamp(10px, 2.8vw, 12px); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
/* Consistent 3-column layout: label fills, then a fixed arrow column, then a fixed number column.
   Arrow + number align in the same x-position on every row regardless of label length;
   align-self:center keeps both glyphs centered on the row axis. */
.mobile-menu a {
  display: grid; grid-template-columns: 1fr 20px 26px; align-items: center; column-gap: 10px;
  min-height: clamp(40px, 6.6svh, 54px); padding: clamp(8px, 1.4svh, 13px) clamp(13px, 4vw, 18px);
  border: 1px solid var(--line-soft); border-radius: clamp(12px, 2svh, 16px);
  background: rgba(255,255,255,.04); color: var(--text);
  font-family: var(--f-display); font-size: clamp(16px, 4.6vw, 23px); font-weight: 500; line-height: 1.1;
  opacity: 0; transform: translateY(12px);
  transition: transform .4s var(--ease-out), opacity .3s ease, background .2s ease, border-color .2s ease;
  transition-delay: calc(var(--i) * 40ms);
}
.mobile-menu a span {
  grid-column: 3; grid-row: 1; justify-self: end; align-self: center; text-align: right; line-height: 1;
  color: var(--accent-soft); font-family: var(--f-body); font-size: clamp(10px, 2.6vw, 11px); font-weight: 600; letter-spacing: .08em;
}
.mobile-menu a::after {
  content: "→"; grid-column: 2; grid-row: 1; justify-self: center; align-self: center; line-height: 1;
  color: var(--muted); transition: transform .22s ease, color .22s ease;
}
.mobile-menu a:hover, .mobile-menu a.is-active { background: rgba(193,106,79,.12); border-color: rgba(193,106,79,.4); }
.mobile-menu a:hover::after, .mobile-menu a.is-active::after { color: var(--accent-soft); transform: translateX(3px); }
.mobile-menu__cta { margin-top: 6px; background: linear-gradient(135deg, var(--accent), var(--accent-deep)) !important; border-color: rgba(232,159,134,.4) !important; }
.mobile-menu__cta span, .mobile-menu__cta::after { color: rgba(255,255,255,.85) !important; }

body.menu-open { overflow: hidden; }
body.menu-open .mobile-menu { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
body.menu-open .mobile-menu__backdrop { opacity: 1; backdrop-filter: blur(16px) saturate(120%); }
body.menu-open .mobile-menu__panel { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
body.menu-open .mobile-menu a { opacity: 1; transform: translateY(0); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; z-index: 1;
  min-height: calc(92svh - var(--header-h));
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: center; gap: clamp(34px, 5vw, 76px);
  padding: clamp(40px, 6vw, 76px) var(--gut) clamp(56px, 6vw, 84px);
  max-width: var(--shell); margin-inline: auto;
  isolation: isolate;
}
/* Both themes: reading-first arrangement — copy left, portrait right (better eye-flow) */
.hero__content { order: 1; }
.hero__media { order: 2; position: relative; justify-self: end; width: min(100%, 500px); }
.hero__portrait {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: 26px;
  border: 1px solid var(--line);
  box-shadow: var(--portrait-shadow);
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.hero__portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  filter: var(--portrait-filter);
  transform: scale(var(--ps, 1.04)); will-change: transform;
}
.hero__portrait::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--portrait-overlay);
}
/* soft warm halo behind portrait — light, calm, not a tile */
.hero__beam {
  position: absolute; right: -10%; top: -6%; bottom: -6%; width: 58%;
  z-index: -1; border-radius: 999px;
  background: var(--beam);
  filter: blur(52px); opacity: var(--beam-op);
}

.hero__content { position: relative; max-width: 600px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: clamp(20px, 3vw, 30px);
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--eyebrow-bg);
  color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
}
.hero__eyebrow i { color: var(--faint); font-style: normal; }
.signal-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(189,90,56,.16); animation: pulse 2.6s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.82)} }

.hero__name {
  margin: 0 0 clamp(20px, 3vw, 28px);
  font-size: clamp(56px, 10.6vw, 128px); line-height: .92;
  letter-spacing: -.045em; font-weight: var(--w-display); color: var(--text);
}
.hero__name .kinetic {
  display: block; overflow: hidden;
}
.hero__name .kinetic > i,
.hero__name .kinetic { white-space: nowrap; }
.hero__name .kinetic { position: relative; }
.hero__name em { font-family: var(--f-accent); font-style: italic; font-weight: 600; color: var(--accent); }

.hero__lede {
  max-width: 480px; color: var(--muted);
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.62;
}
.hero__lede strong { color: var(--text); font-weight: 600; }

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: clamp(26px, 3vw, 36px); }

.hero__meta {
  display: grid; grid-template-columns: repeat(3, auto); gap: clamp(22px, 4vw, 44px);
  margin: clamp(32px, 4vw, 46px) 0 0; padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.hero__meta dt {
  font-family: var(--f-display); font-size: clamp(26px, 3vw, 36px);
  font-weight: 700; line-height: 1; color: var(--text); letter-spacing: -.03em;
}
.hero__meta dd { margin: 8px 0 0; color: var(--muted); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }

.hero__cue {
  position: absolute; left: var(--gut); bottom: 22px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.hero__cue span { width: 1px; height: 30px; overflow: hidden; background: var(--line); }
.hero__cue span::after { content: ""; display: block; width: 100%; height: 40%; background: var(--accent); animation: cue 1.7s var(--ease-in-out) infinite; }
@keyframes cue { 0%{transform:translateY(-120%)} 100%{transform:translateY(260%)} }

/* H1 wordmark sits stable — no entrance animation (avoids overlapping the lede below) */

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  position: relative; z-index: 1; overflow: hidden;
  padding: 20px 0; border-block: 1px solid var(--line-soft);
  background: rgba(255,255,255,.02);
}
.marquee__track {
  display: flex; align-items: center; gap: 26px; width: max-content; white-space: nowrap;
  color: var(--muted); font-size: 14px; font-weight: 500;
  animation: scroll-x 40s linear infinite;
}
.marquee__track i { color: var(--accent); font-style: normal; }
.marquee__track span:nth-child(4n+1) { color: var(--text); }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ============================================================
   SCENE SCAFFOLD — cinematic sections, editorial numbers
   ============================================================ */
.scene { position: relative; z-index: 1; padding: clamp(80px, 11vw, 150px) 0; scroll-margin-top: 100px; }

.scene-head { max-width: 840px; margin-bottom: clamp(48px, 6vw, 76px); }
.scene-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; max-width: none; }
.scene-no {
  display: block; font-family: var(--f-display);
  font-size: clamp(120px, 20vw, 260px); line-height: .8; font-weight: 300;
  letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px var(--scene-no-stroke);
  margin-bottom: -.16em; margin-left: -.04em;
  pointer-events: none; user-select: none;
}
.scene-no--inline {
  font-size: clamp(72px, 9vw, 120px); margin-bottom: -.1em;
}
.scene-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  margin: clamp(14px, 2vw, 24px) 0 18px;
  color: var(--accent-soft); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.scene-kicker::before { content: ""; width: 26px; height: 1px; background: var(--accent); }
.scene-kicker--light { color: var(--accent-soft); }
.scene-title {
  font-size: clamp(34px, 5vw, 62px); line-height: 1.05; letter-spacing: -.03em;
  font-weight: 600; color: var(--text);
}
.scene-title em { font-family: var(--f-accent); font-style: italic; font-weight: 600; color: var(--accent); }
.scene-intro { max-width: 560px; margin-top: 22px; color: var(--muted); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.66; }
.scene-note { color: var(--faint); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(24px); filter: blur(6px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* ============================================================
   PROFIL — roles
   ============================================================ */
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: 22px; overflow: hidden; }
.role {
  position: relative; padding: clamp(30px, 3.4vw, 46px) clamp(26px, 2.4vw, 38px);
  background: var(--bg-2);
  transition: background .3s var(--ease-out);
}
.role:hover { background: var(--panel); }
.role__no { display: block; margin-bottom: 28px; color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.role h3 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 14px; color: var(--text); }
.role p { color: var(--muted); font-size: 15px; line-height: 1.62; }
.role::before {
  content: ""; position: absolute; left: 0; top: 0; width: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  transition: width .5s var(--ease-out);
}
.role:hover::before { width: 100%; }

/* ============================================================
   EDITORIAL — masked image
   ============================================================ */
.editorial__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center; gap: clamp(36px, 6vw, 84px);
}
.editorial__frame {
  position: relative; margin: 0; overflow: hidden; border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: 0 46px 110px -56px rgba(0,0,0,.9);
  transform: perspective(1000px) rotateY(var(--rimg, 0deg));
  transform-origin: 50% 50%; will-change: transform;
}
.editorial__frame img { width: 100%; aspect-ratio: 1 / 1.02; object-fit: cover; object-position: 50% 26%; filter: contrast(1.05) saturate(.9) brightness(.95); }
.editorial__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(11,18,32,.42) 72%, rgba(11,18,32,.78)); }
.editorial__frame figcaption {
  position: absolute; left: 18px; right: 18px; bottom: 16px; width: max-content; max-width: calc(100% - 36px);
  padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3);
  background: rgba(11,18,32,.88); backdrop-filter: blur(16px);
  color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.55); box-shadow: 0 12px 32px -14px rgba(0,0,0,.7);
}
/* Desktop only (>900px):
   1. The photo's HTML height attribute is a presentational hint that otherwise
      wins over aspect-ratio and makes the frame tower over the text column.
      height:auto lets aspect-ratio take effect for a ~30% shorter landscape crop.
   2. Sticky scroll: the image rides up with the section, then pins vertically
      centred in the viewport while the copy keeps scrolling past it, releasing
      again at the end of the section. The grid area (as tall as the copy column)
      is the sticky track. translateY(-50%) centres it and is composed with the
      JS-driven rotateY(var(--rimg)) so the 3D tilt is preserved.
   Mobile (<=900px) keeps its own crop and normal (non-sticky) flow. */
@media (min-width: 901px) {
  .editorial__frame img { height: auto; aspect-ratio: 1 / 0.71; object-position: 50% 30%; }
  .editorial__grid { align-items: start; }
  /* The grid row is as tall as the copy column (the taller one); that row is the
     sticky track. The wrapper rides up with the section, then pins so the image
     sits vertically centred in the viewport while the copy scrolls past, and
     releases only when the wrapper's bottom reaches the bottom of the track
     (≈ the bottom of the text). top = 50vh − half the image height centres it
     without a translate, so the painted image never sits above its own box. */
  .editorial__sticky {
    position: sticky;
    top: calc(50vh - 176px);
  }
  .editorial__frame {
    transform: perspective(1000px) rotateY(var(--rimg, 0deg));
  }
}
.editorial__sticky { margin: 0; }
.editorial__copy .scene-no--inline { -webkit-text-stroke: 1px var(--scene-no-stroke-inline); }
.editorial__note {
  margin: 24px 0; padding: 20px 24px;
  border-left: 3px solid var(--accent); border-radius: 0 16px 16px 0;
  background: rgba(193,106,79,.08);
  font-family: var(--f-accent); font-style: italic; font-weight: 600; font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.42; letter-spacing: -.005em; color: var(--text);
}
.editorial__copy > p { color: var(--muted); font-size: 16px; line-height: 1.7; }
.principles { margin-top: 26px; display: grid; gap: 13px; }
.principles li { position: relative; padding-left: 26px; color: var(--text); font-size: 15.5px; }
.principles li::before { content: ""; position: absolute; left: 0; top: 11px; width: 13px; height: 2px; background: var(--accent); border-radius: 2px; }

/* ============================================================
   SYSTEM — gravity well operating system
   ============================================================ */
.system {
  overflow: hidden;
  background: linear-gradient(180deg, var(--navy-2), #142544 60%, var(--navy));
  border-block: 1px solid rgba(255,255,255,.08);
}
.system__grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center; gap: clamp(36px, 6vw, 86px);
}
.system__intro { max-width: 520px; margin-top: 22px; color: var(--muted); font-size: clamp(16px,1.4vw,18px); line-height: 1.66; }
.system__legend { margin-top: 34px; display: grid; gap: 4px; }
.system__legend li {
  display: grid; grid-template-columns: 110px 1fr; align-items: baseline; gap: 14px;
  padding: 13px 0; border-top: 1px solid var(--line-soft);
  transition: color .25s ease;
}
.system__legend li:last-child { border-bottom: 1px solid var(--line-soft); }
.system__legend b { font-family: var(--f-display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--text); transition: color .25s ease; }
.system__legend span { color: var(--muted); font-size: 14px; }
.system__legend li.is-lit b { color: var(--accent-soft); }

.system__stage {
  position: relative; min-height: clamp(440px, 46vw, 600px);
  display: grid; place-items: center;
  border-radius: 28px; border: 1px solid var(--line);
  background:
    radial-gradient(60% 60% at 50% 46%, rgba(42,64,112,.32), transparent 70%),
    rgba(255,255,255,.025);
  box-shadow: 0 50px 120px -70px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04) inset;
  overflow: hidden; perspective: 1100px;
}

.gravity {
  --tx: 0deg; --ty: 0deg;
  position: relative; width: min(100%, 600px); aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: rotateX(var(--tx)) rotateY(var(--ty));
  transition: transform .4s var(--ease-out);
}
.gravity__halo {
  position: absolute; left: 50%; top: 50%; width: 64%; height: 64%;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: conic-gradient(from var(--spin), rgba(193,106,79,.3), rgba(201,174,133,.16), rgba(42,64,112,.2), rgba(193,106,79,.32));
  filter: blur(26px); opacity: .7;
  animation: spinHalo 26s linear infinite;
}
@keyframes spinHalo { to { --spin: 360deg; } }
.gravity__ring {
  position: absolute; left: 50%; top: 50%; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.09);
  transform: translate(-50%,-50%) rotateX(70deg) rotateZ(var(--ringz, 0deg));
  box-shadow: 0 0 40px -20px rgba(193,106,79,.4) inset;
}
.gravity__ring--a { width: 84%; height: 84%; --ringz: 0deg; }
.gravity__ring--b { width: 56%; height: 56%; border-color: rgba(193,106,79,.18); }

.gravity__core, .gravity__node {
  position: absolute; left: 50%; top: 50%;
  display: grid; place-items: center; text-align: center;
  border-radius: 999px; user-select: none;
  will-change: transform, opacity, filter;
}
.gravity__core {
  width: clamp(118px, 14vw, 158px); aspect-ratio: 1; z-index: 20;
  color: #fff;
  background: radial-gradient(circle at 32% 26%, var(--accent-soft), var(--accent) 50%, var(--accent-deep));
  border: 1px solid rgba(232,159,134,.4);
  box-shadow: 0 30px 70px -30px rgba(193,106,79,.9), 0 0 0 10px rgba(255,255,255,.03), 0 0 0 1px rgba(255,255,255,.2) inset;
  font-family: var(--f-display); font-size: clamp(16px, 1.6vw, 21px); font-weight: 600; line-height: 1.16; letter-spacing: -.01em;
  transform: translate(-50%,-50%) scale(var(--core-s, 1));
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.gravity__node {
  width: clamp(82px, 9.6vw, 116px); aspect-ratio: 1; padding: 8px;
  color: var(--text);
  background: linear-gradient(155deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  box-shadow: 0 24px 50px -28px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06) inset;
  font-family: var(--f-body); font-size: clamp(12px, 1.05vw, 14px); font-weight: 600;
  opacity: var(--node-o, 1);
  filter: blur(var(--node-b, 0px));
  transform:
    translate(-50%,-50%)
    translate3d(var(--nx, 0px), var(--ny, 0px), var(--nz, 0px))
    scale(var(--ns, 1));
  transition: box-shadow .25s var(--ease-out);
}
.gravity__node.is-front { box-shadow: 0 34px 64px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(232,159,134,.3) inset; }
.gravity__node.is-lit {
  border-color: var(--accent);
  background: linear-gradient(155deg, rgba(193,106,79,.32), rgba(193,106,79,.12));
  color: #fff;
}
.gravity__node::after {
  content: ""; position: absolute; inset: 16%; z-index: -1; border-radius: inherit;
  background: rgba(193,106,79,.16); filter: blur(14px); opacity: .6;
}

/* ============================================================
   THEMEN — premium modules
   ============================================================ */
.modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.module {
  position: relative; overflow: hidden; min-height: 230px;
  padding: clamp(26px, 2.4vw, 34px);
  border: 1px solid var(--line-soft); border-radius: 18px;
  background: linear-gradient(165deg, var(--bg-2), rgba(26,43,74,.025));
  box-shadow: 0 24px 60px -44px rgba(24,35,56,.5);
  display: flex; flex-direction: column;
  transform: perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateZ(var(--tz,0px));
  transform-style: preserve-3d;
  transition: transform .2s var(--ease-out), border-color .24s var(--ease-out), background .24s var(--ease-out);
  will-change: transform;
}
.module::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,20%), rgba(189,90,56,.10), transparent 38%);
  transition: opacity .24s var(--ease-out);
}
.module:hover { border-color: rgba(193,106,79,.4); background: linear-gradient(165deg, rgba(193,106,79,.10), var(--bg-2)); box-shadow: 0 30px 70px -40px rgba(193,106,79,.55); }
.module:hover::after { opacity: 1; }
.module__no { color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.module__icon {
  width: 40px; height: 40px; margin: 18px 0 auto; color: var(--text);
  transform: translateZ(20px);
  transition: color .24s var(--ease-out), transform .24s var(--ease-out);
}
.module:hover .module__icon { color: var(--accent); }
.module h3 { margin: 22px 0 10px; font-size: clamp(19px, 1.8vw, 22px); color: var(--text); }
.module p { color: var(--muted); font-size: 14.5px; line-height: 1.58; }
.module--wide { grid-column: span 4; min-height: auto; }
.module--wide .module__icon { margin-top: clamp(20px, 2.4vw, 32px); }

/* ============================================================
   SIGNAL — network/quote
   ============================================================ */
.signal {
  position: relative; z-index: 1; overflow: hidden;
  padding: clamp(70px, 9vw, 130px) 0;
  background:
    radial-gradient(60% 60% at 12% 100%, rgba(158,79,61,.4), transparent 64%),
    radial-gradient(54% 60% at 88% 0%, rgba(42,64,112,.5), transparent 62%),
    linear-gradient(135deg, #101A2C, #16223A 50%, #2A1F22);
  border-block: 1px solid var(--line);
}
.signal__canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.signal__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 3vw, 36px); pointer-events: none; }
.signal__inner > * { pointer-events: auto; }
.signal__quote {
  margin: 0; max-width: 900px;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(28px, 4.4vw, 56px); line-height: 1.12; letter-spacing: -.03em;
  color: var(--text);
}
.signal__quote em { font-family: var(--f-accent); font-style: italic; font-weight: 600; color: var(--accent-soft); }

/* ============================================================
   STATIONEN — editorial timeline
   ============================================================ */
.timeline { display: grid; }
.station {
  display: grid; grid-template-columns: 160px 1fr; gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 3vw, 44px) 0; border-top: 1px solid var(--line-soft);
}
.station:last-child { border-bottom: 1px solid var(--line-soft); }
.station__year { display: flex; align-items: baseline; gap: 14px; padding-top: 6px; }
.station__year b {
  font-family: var(--f-display); font-size: clamp(28px, 3vw, 40px); font-weight: 600;
  color: var(--text); letter-spacing: -.03em;
}
.station__year i { flex: 1; height: 1px; background: var(--line); }
.station--now .station__year b { color: var(--accent-soft); }
.station__org { display: inline-block; margin-bottom: 12px; color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.station__body h3 { font-size: clamp(21px, 2.2vw, 28px); margin-bottom: 12px; color: var(--text); line-height: 1.2; }
.station__body p { max-width: 720px; color: var(--muted); font-size: 16px; line-height: 1.66; }
.station--muted { opacity: .68; }
.station__badge {
  display: inline-grid; gap: 6px; max-width: 660px; margin-top: 20px;
  padding: 16px 20px; border: 1px solid rgba(193,106,79,.3); border-left: 3px solid var(--accent);
  border-radius: 0 16px 16px 0; background: rgba(193,106,79,.1);
}
.station__badge strong { color: var(--accent-soft); font-family: var(--f-body); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.station__badge span { color: var(--text); font-size: 14px; line-height: 1.55; }

/* ============================================================
   GEDANKEN — thoughts
   ============================================================ */
.scene-link {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  color: var(--accent-soft); font-size: 14px; font-weight: 600;
  letter-spacing: .02em; text-decoration: none;
  transition: gap .24s var(--ease-out), color .24s var(--ease-out);
}
.scene-link span { transition: transform .24s var(--ease-out); }
.scene-link:hover { color: var(--accent); gap: 12px; }
.scene-link:hover span { transform: translateX(3px); }
.scene-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
/* duplicate blog CTA shown only on mobile, below the stacked posts (desktop has
   the top-right link and the three posts sit side by side, so it's not needed there) */
.scene-link--mobile { display: none; }

.thoughts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.thought {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  overflow: hidden; border: 1px solid var(--line-soft); border-radius: 18px;
  background: var(--bg-2);
  transform: perspective(1000px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateZ(var(--tz,0px));
  transform-style: preserve-3d;
  transition: transform .2s var(--ease-out), border-color .24s var(--ease-out);
  will-change: transform;
}
.thought:hover { border-color: var(--line); }
.thought:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.thought__media { aspect-ratio: 4/3; overflow: hidden; }
.thought__media img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(.88) brightness(.92); transition: transform .5s var(--ease-out); }
.thought:hover .thought__media img { transform: scale(1.05); }
.thought__body { padding: 22px 24px 26px; }
.thought__body span { color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.thought__body h3 { margin: 12px 0 10px; font-size: 19px; line-height: 1.28; color: var(--text); }
.thought__body p { color: var(--muted); font-size: 14.5px; line-height: 1.58; }
.thought__body { display: flex; flex-direction: column; flex: 1; }
.thought__more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 16px;
  align-self: flex-start;
  color: var(--accent-soft) !important; font-size: 13px; font-weight: 600;
  letter-spacing: .03em;
  transition: gap .24s var(--ease-out), color .24s var(--ease-out);
}
.thought__more span { transition: transform .24s var(--ease-out); }
.thought:hover .thought__more { color: var(--accent) !important; gap: 11px; }
.thought:hover .thought__more span { transform: translateX(3px); }

/* Blog-card readability fallback for mobile/partial-load preview states. */
.thought,
.thought__body,
.thought__body * {
  opacity: 1;
  visibility: visible;
}
.thought__body {
  position: relative;
  z-index: 2;
  color: var(--text);
}
.thought__body h3 { color: var(--text); }
.thought__body p { color: var(--muted); }
.thought__body span,
.thought__more { color: var(--accent-soft); }

/* ============================================================
   MEDIATHEK — consent-safe YouTube cards
   ============================================================ */
.media__group-label {
  font-family: var(--f-body); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
  margin: 0;
}
.media__block[hidden] { display: none; }
.media__block:not(:last-child) { margin-bottom: clamp(48px, 6vw, 72px); }

/* Group header: label + "load external media" button */
.media__group-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 18px;
}
.media__group-load {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--f-body); font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: 0 14px 30px -16px rgba(193,106,79,.9);
  transition: transform .2s var(--ease-out), filter .2s var(--ease-out);
}
.media__group-load[hidden] { display: none; }
.media__group-load:hover { transform: translateY(-1px); filter: brightness(1.05); }
.media__group-load:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }
.media__group-load-play { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.18); }
.media__group-load-play svg { width: 13px; height: 13px; margin-left: 1px; }

/* Loading / empty / error status line for the dynamic feed */
.media__status {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-body); font-size: 15px; color: var(--faint);
  margin: 8px 0 0;
}
.media__status--error { color: var(--muted, #c9d2e2); }
.media__status a { color: var(--accent); font-weight: 600; text-decoration: none; }
.media__status a:hover { text-decoration: underline; }
.media__spinner {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid var(--line-soft); border-top-color: var(--accent);
  animation: media-spin .8s linear infinite;
}
@keyframes media-spin { to { transform: rotate(360deg); } }

.media__videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.media__cta { margin-top: clamp(28px, 4vw, 44px); display: flex; justify-content: center; }

.media-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden;
  background: var(--bg-2);
  transition: border-color .24s var(--ease-out), transform .3s var(--ease-out);
}
.media-card:hover { border-color: var(--line); }
.media-card__frame, .media-short__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background:
    radial-gradient(120% 120% at 18% 12%, rgba(193,106,79,.30), transparent 55%),
    radial-gradient(120% 120% at 88% 90%, rgba(42,64,112,.55), transparent 60%),
    linear-gradient(150deg, #142138, #0c1424);
}
.media-short__frame { aspect-ratio: 9 / 16; border-radius: 16px; }
.media-card__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(11,18,32,.55); border: 1px solid rgba(255,255,255,.16);
  color: #EEF1F6; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.media-activate {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 100%; padding: 16px;
  border: 0; background: transparent; cursor: pointer; color: #EEF1F6;
  font-family: var(--f-body); text-align: center;
  transition: background .24s var(--ease-out);
}
.media-activate:hover { background: rgba(11,18,32,.28); }
.media-activate:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 16px; }
.media-activate__play {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff;
  box-shadow: 0 18px 40px -20px rgba(193,106,79,.9), 0 0 0 1px rgba(232,159,134,.25) inset;
  transition: transform .22s var(--ease-out);
}
.media-activate:hover .media-activate__play { transform: scale(1.06); }
.media-activate__play svg { width: 24px; height: 24px; margin-left: 2px; }
.media-activate__text { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.media-activate__hint { font-size: 11px; color: rgba(238,241,246,.72); letter-spacing: .03em; }
.media-activate--compact { gap: 8px; padding: 10px; }
.media-activate--compact .media-activate__play { width: 44px; height: 44px; }
.media-activate--compact .media-activate__play svg { width: 18px; height: 18px; }
.media-activate--compact .media-activate__text { font-size: 11px; }

/* Placeholder motion before consent — pure CSS (shimmer + scanline + play pulse),
   no external media. Hidden once the iframe is loaded. */
.media-card__frame[data-embed]::before,
.media-short__frame[data-embed]::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(232,159,134,.10) 47%, rgba(255,255,255,.16) 50%, rgba(232,159,134,.10) 53%, transparent 68%);
  background-size: 240% 100%;
  animation: media-shimmer 3.8s var(--ease-out) infinite;
}
.media-card__frame[data-embed]::after,
.media-short__frame[data-embed]::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: -4px; height: 2px;
  z-index: 0; pointer-events: none; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(232,159,134,.6), transparent);
  animation: media-scan 4.4s linear infinite;
}
@keyframes media-shimmer { 0% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
@keyframes media-scan { 0% { top: -4px; opacity: 0; } 12% { opacity: .8; } 88% { opacity: .8; } 100% { top: 100%; opacity: 0; } }
.media-activate__play { animation: media-pulse 2.6s var(--ease-out) infinite; }
@keyframes media-pulse {
  0%, 100% { box-shadow: 0 18px 40px -20px rgba(193,106,79,.9), 0 0 0 1px rgba(232,159,134,.25) inset, 0 0 0 0 rgba(193,106,79,.5); }
  55% { box-shadow: 0 18px 40px -20px rgba(193,106,79,.9), 0 0 0 1px rgba(232,159,134,.25) inset, 0 0 0 13px rgba(193,106,79,0); }
}
/* Stop placeholder motion after activation */
.media-card[data-activated="1"] .media-card__frame::before,
.media-card[data-activated="1"] .media-card__frame::after,
.media-short[data-activated="1"] .media-short__frame::before,
.media-short[data-activated="1"] .media-short__frame::after { content: none; }

.media-card__frame iframe, .media-short__frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3;
}
.media-card__body { padding: 18px 20px 22px; }
.media-card__tag { color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .07em; }
.media-card__title { margin: 10px 0 0; font-size: 18px; line-height: 1.3; color: var(--text); }

.media__shorts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.media-short { display: flex; flex-direction: column; gap: 12px; }
.media-short__title { font-size: 13px; line-height: 1.4; color: var(--muted); }

/* ============================================================
   CONSENT — externe Medien dialog
   ============================================================ */
.footer__link {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--muted); text-align: left;
}
.footer__link:hover { color: var(--text); }
.footer__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.consent-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.consent-modal[hidden] { display: none; }
.consent__backdrop { position: absolute; inset: 0; background: rgba(6,10,18,.62); backdrop-filter: blur(3px); }
.consent__panel {
  position: relative; z-index: 1; width: min(560px, calc(100% - 28px));
  margin: 14px; padding: clamp(24px, 3vw, 34px);
  max-height: calc(100dvh - 28px); overflow-y: auto;
  border: 1px solid var(--line); border-radius: 22px;
  background: linear-gradient(160deg, var(--bg-2), var(--bg));
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04) inset;
  animation: consent-rise .4s var(--ease-out);
}
@keyframes consent-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.consent__eyebrow { color: var(--accent-soft); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px; }
.consent__title { font-size: clamp(22px, 3vw, 28px); line-height: 1.1; color: var(--text); }
.consent__text { margin: 14px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.consent__text a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 2px; }
.consent__option {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 20px 0; padding: 16px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--panel);
  cursor: pointer;
}
.consent__option input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.consent__option-text { font-size: 14px; color: var(--text); line-height: 1.5; }
.consent__option-text strong { display: block; margin-bottom: 2px; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.consent__actions .btn { flex: 1 1 auto; }
.consent__btn { color: var(--text); border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.consent__btn:hover { border-color: var(--accent); background: rgba(193,106,79,.10); }

/* ============================================================
   FAQ — accordion (mobile-safe, no overlap)
   ============================================================ */
.faq__grid {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(34px, 6vw, 84px); align-items: start;
}
.faq__head { position: sticky; top: 110px; }
.faq__head .scene-no--inline { -webkit-text-stroke: 1px var(--scene-no-stroke-inline); }
.faq__list { display: grid; gap: 12px; }
.faq-item {
  border: 1px solid var(--line-soft); border-radius: 16px;
  background: var(--bg-2); overflow: hidden;
  transition: border-color .24s var(--ease-out), background .24s var(--ease-out);
}
.faq-item[open] { border-color: rgba(193,106,79,.35); background: var(--panel); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 24px; cursor: pointer; list-style: none;
  font-family: var(--f-display); font-size: clamp(17px, 1.8vw, 21px); font-weight: 600; letter-spacing: -.01em; color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i {
  position: relative; flex: 0 0 auto; width: 20px; height: 20px;
}
.faq-item summary i::before, .faq-item summary i::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--accent-soft);
  transform: translate(-50%,-50%); transition: transform .3s var(--ease-out), opacity .3s ease;
}
.faq-item summary i::before { width: 14px; height: 1.6px; }
.faq-item summary i::after { width: 1.6px; height: 14px; }
.faq-item[open] summary i::after { transform: translate(-50%,-50%) scaleY(0); opacity: 0; }
.faq-item__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.faq-item[open] .faq-item__answer { grid-template-rows: 1fr; }
.faq-item__answer > p { overflow: hidden; margin: 0; padding: 0 24px; color: var(--muted); font-size: 15px; line-height: 1.66; }
.faq-item[open] .faq-item__answer > p { padding-bottom: 24px; }

/* ============================================================
   KONTAKT — final scene
   ============================================================ */
.contact { padding-bottom: clamp(90px, 11vw, 150px); }
.contact__grid {
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(36px, 6vw, 72px); align-items: start;
}
.contact__copy .scene-no--inline { -webkit-text-stroke: 1px var(--scene-no-stroke-inline); }
.contact__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.contact__points { margin-top: 30px; display: grid; gap: 13px; }
.contact__points li { display: flex; gap: 11px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.contact__points li span { color: var(--accent); flex: 0 0 auto; }
.contact__points a { color: var(--accent-soft); }
.contact__points a:hover { color: var(--accent); }

/* ----- Contact form ----- */
.contact__form-wrap {
  padding: clamp(26px, 3vw, 38px); border: 1px solid var(--line);
  border-radius: 24px; background: var(--bg-2);
  box-shadow: 0 50px 120px -64px rgba(0,0,0,.9);
}
.contact-form { display: grid; gap: 18px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; }
.field label, .consent span { color: var(--text); font-size: 13.5px; font-weight: 500; letter-spacing: .01em; }
.field label .req, .form-note .req, .consent .req { color: var(--accent); }
.field label .opt { color: var(--faint); font-weight: 400; }
.field input, .field textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line-soft);
  border-radius: 12px; background: var(--bg); color: var(--text);
  font-family: var(--f-body); font-size: 15px; line-height: 1.5;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(193,106,79,.18); background: var(--panel);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--accent-deep); }
.consent {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  cursor: pointer; padding-top: 2px;
}
.consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; }
.consent span { color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.55; }
.form-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.form-note { color: var(--faint); font-size: 12.5px; }
.contact-form button[disabled] { opacity: .6; pointer-events: none; }
.form-status {
  padding: 14px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5;
  border: 1px solid var(--line-soft);
}
.form-status.is-success { border-color: rgba(120,170,120,.4); background: rgba(70,120,70,.14); color: #cfe6cf; }
.form-status.is-error { border-color: var(--accent-deep); background: rgba(158,79,61,.14); color: var(--accent-soft); }
.form-status a { color: inherit; text-decoration: underline; }
.contact__photo {
  position: relative; margin: 0; overflow: hidden; border-radius: 24px;
  min-height: clamp(360px, 40vw, 540px);
  border: 1px solid var(--line);
  box-shadow: 0 50px 120px -56px rgba(0,0,0,.9);
  transform: perspective(1000px) rotateY(var(--rimg, 0deg)); transform-origin: 50% 50%; will-change: transform;
}
.contact__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 50%; filter: contrast(1.02) saturate(.92) brightness(.94); }
.contact__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 44%, rgba(11,18,32,.78)), radial-gradient(80% 60% at 16% 100%, rgba(193,106,79,.34), transparent 66%); }
.contact__photo figcaption {
  position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 1;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px;
  background: rgba(11,18,32,.45); backdrop-filter: blur(16px);
}
.contact__photo figcaption span { display: block; margin-bottom: 7px; color: #E89F86; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.contact__photo figcaption strong { display: block; font-family: var(--f-display); font-size: clamp(21px, 2.4vw, 30px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: #EEF1F6; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { position: relative; z-index: 80; padding: 64px 0 44px; border-top: 1px solid var(--line); background: var(--bg); }
.footer__grid { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 32px; }
.footer h4 { margin: 0 0 16px; color: var(--accent); font-family: var(--f-body); font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.footer li { padding: 4px 0; color: var(--muted); font-size: 14px; }
.footer li a:hover { color: var(--text); }
.footer p { grid-column: 1 / -1; margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--line-soft); color: var(--faint); font-size: 12px; }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }

/* ---------- Social icon links ---------- */
.social { list-style: none; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out), background .25s var(--ease-out), transform .25s var(--ease-out);
}
.social a:hover { color: var(--text); border-color: var(--accent); background: rgba(193,106,79,.12); transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; display: block; }

.contact__social { margin-top: 30px; display: flex; flex-direction: column; gap: 13px; }
.contact__social-label { color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }

/* mobile sticky CTA — hidden on desktop */
.mobile-cta { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .modules { grid-template-columns: repeat(2, 1fr); }
  .module--wide { grid-column: span 2; }
}

@media (max-width: 900px) {
  :root { --header-h: 70px; }
  .nav { display: none; }
  .site-header > .btn--ghost { display: none; }
  .menu-toggle { display: flex; }
  body { padding-bottom: 76px; }

  /* HERO mobile — clean, strong, readable. Portrait as backdrop. */
  .hero {
    grid-template-columns: 1fr; gap: 0;
    padding: 0; max-width: none;
    /* taller background area so the CTA / "Wie ich denke" block has room to breathe */
    min-height: calc(100svh - var(--header-h) + 40px);
    position: relative;
  }
  .hero__media {
    position: absolute; inset: 0; width: 100%; justify-self: stretch; z-index: 0;
  }
  .hero__portrait {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto;
    transform: none;
  }
  .hero__portrait img { object-position: 56% 18%; filter: contrast(1.05) saturate(.9) brightness(.84); }
  /* End on fully opaque navy so the hero closes with a crisp, deliberate edge
     against the light section below instead of a murky semi-transparent blue band. */
  .hero__portrait::after {
    background:
      linear-gradient(180deg, rgba(11,18,32,.25) 0%, rgba(11,18,32,.05) 30%, rgba(11,18,32,.45) 58%, #0B1220 100%),
      radial-gradient(70% 40% at 58% 24%, transparent 0%, rgba(11,18,32,.2) 70%);
  }
  .hero__beam { display: none; }
  .hero__content {
    position: relative; z-index: 2; max-width: none;
    min-height: calc(100svh - var(--header-h) + 40px);
    display: flex; flex-direction: column; justify-content: flex-end;
    /* lift the text cluster well clear of the sticky mobile CTA so the first view
       keeps a generous safe-area below the buttons instead of crowding the edge */
    padding: clamp(32px, 9svh, 76px) var(--gut) clamp(104px, 17svh, 156px);
  }
  /* Eyebrow: keep "Unternehmer / Digitalstratege / KI-Berater" on a single line at ~390px.
     Smaller font, tighter gap/padding, no wrapping; font scales down gracefully on narrow screens. */
  /* The mobile hero text sits on a darkened full-bleed portrait in BOTH themes,
     so the wordmark/eyebrow must be light regardless of --text (which is navy in light mode). */
  .hero__eyebrow {
    align-self: flex-start; margin-bottom: auto;
    flex-wrap: nowrap; white-space: nowrap; max-width: 100%;
    gap: 6px; padding: 7px 12px;
    font-size: clamp(9.5px, 2.7vw, 12px); letter-spacing: .04em;
    background: rgba(11,18,32,.6); backdrop-filter: blur(10px);
    border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.94);
  }
  .hero__eyebrow i { margin: 0 1px; color: rgba(255,255,255,.6); }
  .hero__eyebrow .signal-dot { box-shadow: 0 0 0 4px rgba(189,90,56,.3); }
  .hero__name { font-size: clamp(54px, 17vw, 86px); margin-bottom: 18px; color: #fff; text-shadow: 0 12px 40px rgba(0,0,0,.6); }
  .hero__name em { color: var(--accent-soft); }
  .hero__lede { max-width: 30ch; color: rgba(238,241,246,.86); font-size: 16px; line-height: 1.5; text-shadow: 0 8px 28px rgba(0,0,0,.6); }
  .hero__lede strong { color: #fff; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; }
  .hero__actions .btn--primary { width: 100%; }
  /* The secondary link sits on the dark portrait, so its default navy --muted
     colour disappears; lift it to a light tone with a clear underline. */
  .hero__actions .btn--text {
    width: auto; align-self: center; margin-top: 2px;
    color: rgba(238,241,246,.92); border-bottom-color: rgba(255,255,255,.4);
  }
  .hero__actions .btn--text:hover { color: #fff; border-bottom-color: var(--accent-soft); }
  .hero__meta { display: none; }
  .hero__cue { display: none; }

  .editorial__grid, .system__grid, .contact__grid, .faq__grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 16px; }
  .editorial__grid { gap: 32px; }
  .editorial__frame img {
    aspect-ratio: 16 / 10;
    max-height: 360px;
    object-position: 50% 24%;
  }
  /* Bereich 2 caption: deepen the bottom scrim and turn the pill into a wider,
     more opaque bar so "Strategie, KI und Prozesse" stays legible over the bright photo. */
  .editorial__frame::after { background: linear-gradient(180deg, transparent 26%, rgba(11,18,32,.62) 60%, rgba(11,18,32,.95)); }
  .editorial__frame figcaption {
    left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none;
    padding: 14px 18px; border-radius: 14px;
    background: rgba(11,18,32,.97); border-color: rgba(255,255,255,.32);
    backdrop-filter: blur(8px);
    color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .01em; line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0,0,0,.55); box-shadow: 0 14px 34px -16px rgba(0,0,0,.8);
  }
  .scene-link--mobile {
    display: inline-flex; justify-content: center; width: 100%;
    margin-top: clamp(22px, 6vw, 32px);
  }
  .contact__photo {
    min-height: 0;
    height: clamp(280px, 64vw, 360px);
  }
  .contact__photo figcaption {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 14px 16px;
  }
  .thought__media { aspect-ratio: 16 / 10; }
  .roles, .modules, .thoughts { grid-template-columns: 1fr; }
  .module--wide { grid-column: span 1; }

  .media__videos { grid-template-columns: 1fr; }
  .media__shorts {
    grid-auto-flow: column; grid-auto-columns: minmax(150px, 62%);
    grid-template-columns: none; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    /* Start flush with the layout gutter; only bleed past the right edge so the
       track can scroll off-screen on swipe without the first card hugging the rim. */
    margin-inline: 0 calc(var(--gut) * -1); padding-inline: 0 var(--gut);
    scroll-padding-inline-start: 0;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .media__shorts::-webkit-scrollbar { display: none; }
  .media-short { scroll-snap-align: start; }

  .scene-title { line-height: 1.08; }
  .scene-intro,
  .editorial__copy > p,
  .system__intro,
  .station__body p { line-height: 1.56; }
  .role p,
  .module p,
  .thought__body p,
  .faq-item__answer > p { line-height: 1.52; }
  .editorial__note { line-height: 1.34; }
  .signal__quote { line-height: 1.06; }

  .system__stage { min-height: clamp(380px, 96vw, 480px); border-radius: 20px; }
  .gravity { width: min(100%, 440px); }
  .gravity__core { width: clamp(106px, 32vw, 134px); font-size: clamp(15px, 4.4vw, 19px); }
  .gravity__node { width: clamp(74px, 23vw, 100px); font-size: clamp(11px, 3.2vw, 13px); }
  .system__legend li { grid-template-columns: 92px 1fr; }

  /* FAQ mobile — plain stacked accordion, sticky off, no overlap */
  .faq__head { position: static; margin-bottom: 36px; }
  .faq__grid { gap: 8px; }

  .station { grid-template-columns: 1fr; gap: 12px; }
  .station__year { padding-top: 0; }
  .station__year i { display: none; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer .brand { grid-column: 1 / -1; }

  .mobile-cta {
    position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 100;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 54px; padding: 14px 18px; border-radius: 999px;
    border: 1px solid rgba(232,159,134,.4);
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: #fff; font-family: var(--f-body); font-size: 14px; font-weight: 600;
    box-shadow: 0 22px 54px -26px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08) inset;
    transform: translateY(var(--cta-hide, 0)); transition: transform .3s var(--ease-out);
  }
  .scene-no { font-size: clamp(96px, 28vw, 150px); }
  .scene-no--inline { font-size: clamp(64px, 18vw, 100px); }
}

@media (max-width: 560px) {
  :root { --gut: 18px; }
  .scene { padding-block: 64px; }
  .scene-head { margin-bottom: 36px; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero__name .kinetic { transform: none !important; }
  .ambient__spot, .gravity__halo, .marquee__track, .hero__cue span::after, .signal-dot { animation: none !important; }
}

@media (hover: none) {
  .cursor-dot { display: none; }
}