/* ==========================================================================
   hmirka.com — Chiaroscuro Cinema & Curtain Stagecraft Edition (v11)
   Self-hosted fonts · Dual-Luminance Stagecraft · 4-Pillar Architecture
   ========================================================================== */

/* ----- 1. Self-Hosted Font Faces ----- */

@font-face {
  font-family: 'harabararegular';
  src: url('../fonts/harabara-webfont.woff2') format('woff2'),
       url('../fonts/harabara-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'proxima_nova_altblack';
  src: url('../fonts/Mark Simonson - Proxima Nova Alt Black-webfont.woff2') format('woff2'),
       url('../fonts/Mark Simonson - Proxima Nova Alt Black-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'proxima_nova_altbold';
  src: url('../fonts/Mark Simonson - Proxima Nova Alt Bold-webfont.woff2') format('woff2'),
       url('../fonts/Mark Simonson - Proxima Nova Alt Bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.woff2') format('woff2'),
       url('../fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'proxima_nova_scosfthin';
  src: url('../fonts/Mark Simonson - Proxima Nova ScOsf Thin-webfont.woff2') format('woff2'),
       url('../fonts/Mark Simonson - Proxima Nova ScOsf Thin-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'proxima_nova_ltsemibold';
  src: url('../fonts/Mark Simonson - Proxima Nova Semibold-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ----- 2. Chiaroscuro Noir + Sunlit Atelier Design Tokens ----- */

:root {
  /* Cinema Noir Stage Surfaces */
  --noir-obsidian: #070a0f;
  --noir-hull: #0c121b;
  --noir-slate: #121a26;
  --noir-card: #16202e;
  --noir-glass: rgba(9, 13, 20, 0.80);

  /* Sunlit Atelier & Daylight Studio Surfaces */
  --atelier-sunlit: #f6f3ec;
  --atelier-limestone: #f4f1ea;
  --atelier-warm: #f6f2ea;
  --daylight-paper: #f3f2ee;
  --atelier-white: #ffffff;

  /* Dark-Stage Inks (WCAG AA/AAA on Noir) */
  --ink-primary: #f7f4ee;
  --ink-secondary: #d4dce7;
  --ink-muted: #9ba8b9;

  /* Sunlit-Stage Inks (WCAG AA/AAA on #f6f3ec / #f4f1ea) */
  --atelier-ink: #11161d;
  --atelier-body: #252f3a;
  --atelier-muted: #4a5564;
  --atelier-crimson: #94291e;
  --atelier-bronze: #6e4908;
  --atelier-amber: #a64b00;
  --atelier-line: rgba(17, 22, 29, 0.11);

  /* Champagne Brass & Pillar Accents */
  --champagne: #d4af6a;
  --champagne-bright: #ecd197;
  --champagne-soft: #f0dfba;
  --champagne-hairline: rgba(212, 175, 106, 0.28);
  --champagne-glow: rgba(212, 175, 106, 0.22);

  --coral: #ef4d3e;
  --coral-bright: #ff6959;
  --sapphire: #5ca8ff;
  --sapphire-bright: #8cc4ff;
  --atelier-sapphire: #15457a;
  --seafoam: #00ff9c;
  --seafoam-deep: #00d684;
  --amber: #ff8c1a;
  --cocoa-deep: #100d0b;
  --cocoa-mid: #191411;

  --pillar-accent: var(--champagne);

  /* Typography */
  --font-logo: 'harabararegular', Georgia, serif;
  --font-display: 'proxima_nova_altblack', system-ui, -apple-system, sans-serif;
  --font-bold: 'proxima_nova_altbold', system-ui, -apple-system, sans-serif;
  --font-semibold: 'proxima_nova_ltsemibold', system-ui, -apple-system, sans-serif;
  --font-body: 'Proxima Nova', system-ui, -apple-system, sans-serif;
  --font-thin: 'proxima_nova_scosfthin', Georgia, serif;

  /* Motion & Layout */
  --ease-cinema: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-curtain: cubic-bezier(0.19, 1, 0.22, 1);
  --container-max: 76rem;
  --header-sticky-h: 64px;
  --horizon-sticky-h: 0px;

  /* Live Scrollytelling CSS Variables */
  --scroll-progress: 0;
  --portal-p: 0;
  --lockup-open: 0;
  --lockup-fade: 0;
  --iris-open: 0;
  --bio-scale: 1;
  --bio-alpha: 1;
  --poly-tl: 56.5%;
  --poly-tr: 56.5%;
  --poly-br: 43.5%;
  --poly-bl: 43.5%;
  --triptych-p: 0;
  --timeline-p: 0;
  --voyage-p: 0;
  --voyage-pan-x: 0px;
}

body[data-pillar="manager"] { --pillar-accent: var(--coral); }
body[data-pillar="expert"]  { --pillar-accent: var(--sapphire); }
body[data-pillar="captain"] { --pillar-accent: var(--seafoam); }
body[data-pillar="mother"]  { --pillar-accent: var(--amber); }

/* ----- 3. Cross-Document View Transitions ----- */

@view-transition {
  navigation: auto;
}

@keyframes vtFadeOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.985); }
}

@keyframes vtFadeIn {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: scale(1); }
}

::view-transition-old(root) {
  animation: 340ms var(--ease-cinema) both vtFadeOut;
}

::view-transition-new(root) {
  animation: 420ms var(--ease-cinema) both vtFadeIn;
}

/* ----- 4. Reset, Accessibility & Global Hairline ----- */

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

[hidden] {
  display: none !important;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  background-color: var(--noir-obsidian);
  color: var(--ink-primary);
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink-primary);
  background-color: var(--noir-obsidian);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

strong,
b {
  font-family: var(--font-bold);
  font-weight: normal;
}

h1 strong,
h2 strong,
h3 strong,
h4 strong,
h1 b,
h2 b,
h3 b,
h4 b {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--champagne-bright);
  outline-offset: 3px;
  border-radius: 3px;
}

.atelier-surface :focus-visible,
.atelier-curtain-group :focus-visible,
.atelier-curtain-warm :focus-visible,
.daylight-curtain :focus-visible {
  outline-color: var(--atelier-crimson);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3.8vw, 2.5rem);
}

/* Top Scroll Progress Hairline */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  z-index: 260;
  pointer-events: none;
  background: linear-gradient(90deg, var(--champagne) 0%, var(--pillar-accent) 100%);
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll-progress, 0));
  will-change: transform;
}

/* ----- 5. Stagecraft Curtain Architecture & Progressive Reveals ----- */

.chapter-recede-inner {
  transform: translate3d(0, var(--recede-y, 0px), 0) scale(var(--recede-scale, 1));
  opacity: var(--recede-opacity, 1);
  transform-origin: center top;
  will-change: transform, opacity;
}

/* Dark Curtain Sliding Over Prior Stage */
.chapter-curtain-over {
  position: relative;
  z-index: 4;
  border-radius: 26px 26px 0 0;
  box-shadow:
    0 -26px 64px rgba(0, 0, 0, 0.72),
    0 -1px 0 rgba(212, 175, 106, 0.24);
}

/* Sunlit Architectural Curtain Sliding Over Noir Stage */
.chapter-curtain-light {
  position: relative;
  z-index: 5;
  border-radius: 28px 28px 0 0;
  box-shadow:
    0 -30px 72px rgba(0, 0, 0, 0.65),
    0 -1px 0 rgba(255, 255, 255, 0.85);
}

/* Progressive Reveal System */
html.js-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 680ms var(--ease-cinema),
    transform 680ms var(--ease-cinema);
}

html.js-motion [data-reveal="pillar"] {
  transform: translate3d(0, 26px, 0);
}

html.js-motion [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.is-instant-scrub [data-reveal],
html.is-instant-scrub .pillar-card,
html.is-instant-scrub .portal-preview,
html.is-instant-scrub .pillar-card img,
html.is-instant-scrub .word-token {
  transition: none !important;
}

/* Word-Scrub Tokens — Dark Noir vs Sunlit Atelier */
.word-token {
  transition: color 120ms linear, opacity 120ms linear;
  color: color-mix(in srgb, var(--ink-primary) calc(38% + var(--word-lit, 1) * 62%), transparent);
}

.atelier-surface .word-token,
.atelier-curtain-group .word-token,
.atelier-curtain-warm .word-token {
  color: var(--atelier-crimson);
  opacity: calc(0.62 + var(--word-lit, 1) * 0.38);
}

.manager-gallery .gallery-header .word-token {
  color: var(--atelier-ink);
  opacity: calc(0.62 + var(--word-lit, 1) * 0.38);
}

/* Cinema Aperture Wipe */
html.js-scrolly [data-aperture] {
  clip-path: inset(
    calc((1 - var(--aperture-open, 1)) * 6%)
    calc((1 - var(--aperture-open, 1)) * 7%)
    calc((1 - var(--aperture-open, 1)) * 6%)
    calc((1 - var(--aperture-open, 1)) * 7%)
    round calc((1 - var(--aperture-open, 1)) * 16px)
  );
  will-change: clip-path;
}

html.js-scrolly [data-parallax-y],
html.js-scrolly.js-motion [data-reveal].is-visible[data-parallax-y] {
  transform: translate3d(0, var(--parallax-offset, 0px), 0);
  will-change: transform;
}

html.js-scrolly.js-motion [data-reveal].is-visible[data-parallax-y] {
  transition: opacity 680ms var(--ease-cinema);
}

/* ----- 6. Unified Sticky Glass Navigation (Single-Row Mobile <= 58px) ----- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 160;
  background: rgba(8, 12, 18, 0.90);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  border-bottom: 1px solid rgba(212, 175, 106, 0.22);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.5rem;
  min-height: 54px;
}

.site-header .logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  font-family: var(--font-logo);
  font-size: clamp(0.88rem, 3.6vw, 1.38rem);
  letter-spacing: 0.02em;
  color: var(--ink-primary);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 220ms ease;
}

body[data-pillar="captain"] .site-header .logo {
  font-size: clamp(0.86rem, 3.5vw, 1.32rem);
}

@media (max-width: 29.99rem) {
  .site-header .logo-prefix {
    display: none;
  }
}

.site-header .logo:hover {
  color: var(--champagne-bright);
}

.site-header nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(0rem, 0.9vw, 0.75rem);
}

.site-header nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding-inline: clamp(0.18rem, 1vw, 0.72rem);
  font-family: var(--font-semibold);
  font-size: clamp(0.62rem, 2.15vw, 0.84rem);
  letter-spacing: clamp(0.03em, 0.5vw, 0.11em);
  text-transform: uppercase;
  color: var(--ink-secondary);
  white-space: nowrap;
  transition: color 220ms ease;
}

.site-header nav a::after {
  content: '';
  position: absolute;
  left: 0.28rem;
  right: 0.28rem;
  bottom: 0.48rem;
  height: 2px;
  background: var(--pillar-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 260ms var(--ease-cinema);
}

.site-header nav a:hover,
.site-header nav a[aria-current="page"] {
  color: #ffffff;
}

.site-header nav a[aria-current="page"]::after,
.site-header nav a:hover::after {
  transform: scaleX(1);
}

@media (max-width: 26rem) {
  .site-header .container {
    padding-inline: 0.45rem;
    gap: 0.2rem;
  }
  .site-header .logo {
    font-size: 0.86rem;
  }
  .site-header nav {
    gap: 0;
  }
  .site-header nav a {
    padding-inline: 0.14rem;
    font-size: 0.61rem;
    letter-spacing: 0.025em;
  }
}

@media (min-width: 48rem) {
  .site-header .container {
    min-height: 64px;
  }
}

/* ----- 7. Shared Atelier Eyebrows & Buttons ----- */

.atelier-eyebrow {
  font-family: var(--font-semibold);
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--atelier-crimson);
  margin-bottom: 0.75rem;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.75rem;
}

.btn-contact-primary,
.btn-contact-secondary,
.btn-gold,
.btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  min-width: 48px;
  padding: 0.75rem 1.45rem;
  border-radius: 999px;
  font-family: var(--font-semibold);
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  transition:
    transform 260ms var(--ease-cinema),
    box-shadow 260ms var(--ease-cinema),
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease;
}

/* High-contrast Obsidian & Studio Buttons on Daylight Stage */
.btn-contact-primary {
  background: var(--atelier-ink);
  color: #ffffff;
  border: 1px solid var(--atelier-ink);
  box-shadow: 0 12px 28px rgba(17, 22, 29, 0.18);
}

.btn-contact-primary:hover {
  background: var(--atelier-crimson);
  border-color: var(--atelier-crimson);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(148, 41, 30, 0.28);
}

.btn-contact-secondary {
  background: rgba(255, 255, 255, 0.92);
  color: var(--atelier-ink);
  border: 1.5px solid rgba(17, 22, 29, 0.22);
  box-shadow: 0 6px 18px rgba(17, 22, 29, 0.06);
}

.btn-contact-secondary:hover {
  border-color: var(--atelier-ink);
  background: #ffffff;
  transform: translateY(-2px);
}

/* Noir Gold & Glass Buttons (Mother Alpine Contact) */
.btn-gold {
  background-color: #dfba74;
  background-image: linear-gradient(135deg, #ebd096 0%, #c89d50 100%);
  color: #10141b;
  border: 1px solid rgba(255, 240, 206, 0.6);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(212, 175, 106, 0.36);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--champagne-bright);
  transform: translateY(-2px);
}

/* ==========================================================================
   8. INDEX.HTML — Diagonal Triptych Shutter -> Sunlit Atelier -> Noir Triptych
   ========================================================================== */

/* Scene 01 Layer A: Cinema Noir Triptych Hero */
.index-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: var(--noir-obsidian);
}

.index-hero .hero-picture,
.index-hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.index-hero .hero-bg {
  object-fit: cover;
  object-position: center 22%;
  transform: scale(calc(1 + var(--portal-p, 0) * 0.08));
  filter: brightness(calc(1 - var(--portal-p, 0) * 0.28));
  will-change: transform, filter;
}

.index-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 68% 52% at 50% 56%, rgba(7, 10, 15, 0.66) 0%, rgba(7, 10, 15, 0.24) 68%, transparent 100%),
    linear-gradient(
      180deg,
      rgba(7, 10, 15, 0.10) 0%,
      rgba(7, 10, 15, 0.16) 54%,
      rgba(7, 10, 15, 0.72) 100%
    );
  pointer-events: none;
}

.index-hero .container {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(2.6rem, 6vh, 4.4rem);
}

.hero-lockup {
  position: relative;
  width: 100%;
  max-width: 63rem;
  margin-inline: auto;
  text-align: center;
  padding: clamp(0.95rem, 2vw, 1.45rem) clamp(1.35rem, 3vw, 2.35rem);
}

/* Beloved v4 Architectural Champagne [ ] Viewfinder Brackets */
.hero-bracket {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22px;
  border-top: 2.5px solid rgba(218, 178, 102, 0.90);
  border-bottom: 2.5px solid rgba(218, 178, 102, 0.90);
  pointer-events: none;
  transition: border-color 240ms ease;
}

.hero-bracket--left {
  left: 0;
  border-left: 2.5px solid rgba(218, 178, 102, 0.90);
}

.hero-bracket--right {
  right: 0;
  border-right: 2.5px solid rgba(218, 178, 102, 0.90);
}

.hero-copy-zoom {
  position: relative;
}

.index-hero h1 {
  font-family: var(--font-logo);
  font-weight: normal;
  font-size: clamp(2.5rem, 6vw, 5.15rem);
  line-height: 1.03;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.72);
}

.index-hero p {
  margin-top: 0.75rem;
  margin-inline: auto;
  max-width: 39rem;
  font-size: clamp(1rem, 1.55vw, 1.25rem);
  line-height: 1.48;
  color: rgba(247, 249, 251, 0.94);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.68);
}

@media (min-width: 48rem) {
  .index-hero {
    align-items: center;
  }

  .index-hero .container {
    padding-block: 2.5rem;
  }

  .hero-lockup {
    margin-top: clamp(2.4rem, 7vh, 4.2rem);
    padding: clamp(2rem, 4.2vw, 3.2rem) clamp(2.2rem, 6.2vw, 5.25rem);
  }

  .hero-bracket {
    width: clamp(5rem, 10vw, 9.5rem);
    border-top-width: 3px;
    border-bottom-width: 3px;
  }

  .hero-bracket--left {
    border-left-width: 3px;
  }

  .hero-bracket--right {
    border-right-width: 3px;
  }
}

@media (max-width: 47.99rem) {
  .index-hero .hero-bg {
    object-position: center top;
  }

  .index-hero::after {
    background: linear-gradient(
      180deg,
      rgba(7, 10, 15, 0.02) 0%,
      rgba(7, 10, 15, 0.08) 74%,
      rgba(7, 10, 15, 0.86) 85%,
      rgba(7, 10, 15, 0.97) 100%
    );
  }

  .index-hero .container {
    padding-bottom: 1.05rem;
  }

  .hero-lockup {
    padding: 0.65rem 1.05rem;
  }

  .hero-bracket {
    width: 16px;
  }

  .index-hero h1 {
    font-size: clamp(1.85rem, 8vw, 2.3rem);
    line-height: 1.02;
  }

  .index-hero p {
    margin-top: 0.35rem;
    font-size: clamp(0.88rem, 3.8vw, 0.96rem);
    line-height: 1.38;
  }
}

.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.35rem, 3.6vh, 2.4rem);
  transform: translateX(-50%);
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: calc(1 - var(--portal-p, 0) * 5);
  pointer-events: none;
}

.cue-label {
  font-family: var(--font-semibold);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne-soft);
}

.cue-track {
  position: relative;
  width: 2px;
  height: 44px;
  background: rgba(212, 175, 106, 0.26);
  overflow: hidden;
  border-radius: 2px;
}

.cue-thumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18px;
  background: var(--champagne-bright);
  animation: cuePulse 2.2s var(--ease-cinema) infinite;
}

@keyframes cuePulse {
  0%   { transform: translateY(-18px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(44px); opacity: 0; }
}

/* Scene 01 Layer B: Sunlit Atelier Biography Stage */
.index-bio {
  position: relative;
  background-color: var(--atelier-sunlit);
  background-image:
    radial-gradient(circle at 18% 22%, #ffffff 0%, #f7f4ed 52%, #efeae0 100%);
  color: var(--atelier-ink);
  padding-block: clamp(4.2rem, 8vw, 6.8rem);
}

.index-bio .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.2rem, 5vw, 4.6rem);
  align-items: center;
}

.bio-image {
  display: flex;
  justify-content: center;
}

.portrait-polaroid-float {
  max-width: 26.5rem;
  width: 100%;
  filter: drop-shadow(0 26px 46px rgba(17, 22, 29, 0.16));
  transform: translate3d(0, calc((1 - var(--iris-open, 1)) * 24px), 0)
             rotate(calc((1 - var(--iris-open, 1)) * -1.4deg));
  will-change: transform;
}

.index-bio .bio-text h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.55rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--atelier-ink);
  margin-bottom: 1.15rem;
}

.index-bio .bio-text h2 span {
  font-family: var(--font-thin);
  font-weight: normal;
  color: var(--atelier-bronze);
}

.index-bio .bio-text > p:not(.atelier-eyebrow) {
  font-size: clamp(1.03rem, 1.35vw, 1.16rem);
  line-height: 1.72;
  color: var(--atelier-body);
  max-width: 40rem;
}

.index-bio .bio-text > p:not(.atelier-eyebrow) + p {
  margin-top: 1.15rem;
}

.index-bio .bio-text p.bio-quote {
  margin-top: 1.45rem;
  padding-left: 1.15rem;
  border-left: 3px solid var(--atelier-crimson);
  color: var(--atelier-ink);
}

.index-bio .bio-quote em {
  font-style: italic;
  font-family: var(--font-semibold);
  color: var(--atelier-crimson);
}

.portal-diagonal-rim {
  display: none;
}

@media (min-width: 56.25rem) {
  .index-bio .container {
    grid-template-columns: minmax(18rem, 26rem) minmax(0, 1fr);
  }
  .hero-scroll-cue {
    display: inline-flex;
  }
}

/* Desktop Pinned Diagonal Triptych Shutter Iris (>= 900px x 680px & not zoomed-tall) */
@media (min-width: 56.25rem) and (min-height: 42.5rem) {
  html.js-scrolly:not(.is-tall) .scrolly-portal-track {
    position: relative;
    height: 255vh;
  }

  html.js-scrolly:not(.is-tall) .scrolly-portal-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }

  html.js-scrolly:not(.is-tall) .scrolly-portal-stage .index-hero {
    position: absolute;
    inset: 0;
    min-height: 100%;
    z-index: 1;
  }

  html.js-scrolly:not(.is-tall) .hero-bracket {
    opacity: calc(1 - var(--lockup-fade, 0));
    will-change: transform, opacity;
  }

  html.js-scrolly:not(.is-tall) .hero-bracket--left {
    transform: translate3d(calc(var(--lockup-open, 0) * -24vw), 0, 0) scaleY(calc(1 + var(--lockup-open, 0) * 0.22));
  }

  html.js-scrolly:not(.is-tall) .hero-bracket--right {
    transform: translate3d(calc(var(--lockup-open, 0) * 24vw), 0, 0) scaleY(calc(1 + var(--lockup-open, 0) * 0.22));
  }

  html.js-scrolly:not(.is-tall) .hero-copy-zoom {
    transform: translate3d(0, calc(var(--lockup-open, 0) * -18px), 0) scale(calc(1 + var(--lockup-open, 0) * 0.08));
    opacity: calc(1 - var(--lockup-fade, 0));
    will-change: transform, opacity;
  }

  html.js-scrolly:not(.is-tall) .scrolly-portal-stage .portal-bio-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    padding-block: 2.5rem;
    clip-path: polygon(
      var(--poly-tl, 56.5%) 0%,
      var(--poly-tr, 56.5%) 0%,
      var(--poly-br, 43.5%) 100%,
      var(--poly-bl, 43.5%) 100%
    );
    pointer-events: none;
    will-change: clip-path;
  }

  html.js-scrolly:not(.is-tall) .scrolly-portal-stage .portal-bio-layer .container {
    max-width: 68rem;
    transform: scale(var(--bio-scale, 1));
    opacity: var(--bio-alpha, 1);
    transform-origin: center center;
    will-change: transform, opacity;
  }

  html.js-scrolly:not(.is-tall) .scrolly-portal-stage .portal-bio-layer [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html.js-scrolly:not(.is-tall) .scrolly-portal-stage .portrait-polaroid-float {
    transform: none;
  }

  html.js-scrolly:not(.is-tall) .scrolly-portal-stage.is-bio-interactive .portal-bio-layer {
    pointer-events: auto;
  }

  /* Twin Parallel Champagne Razor Shutters Matching banner4-1.jpg's 15° Slant */
  html.js-scrolly:not(.is-tall) .portal-diagonal-rim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: var(--rim-opacity, 0);
    will-change: opacity;
  }

  html.js-scrolly:not(.is-tall) .portal-diagonal-rim::before,
  html.js-scrolly:not(.is-tall) .portal-diagonal-rim::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(212, 175, 106, 0.28) 0%,
      rgba(240, 214, 158, 0.98) 50%,
      rgba(212, 175, 106, 0.28) 100%
    );
  }

  html.js-scrolly:not(.is-tall) .portal-diagonal-rim::before {
    clip-path: polygon(
      calc(var(--poly-tl, 56.5%) - 0.18%) 0%,
      calc(var(--poly-tl, 56.5%) + 0.18%) 0%,
      calc(var(--poly-bl, 43.5%) + 0.18%) 100%,
      calc(var(--poly-bl, 43.5%) - 0.18%) 100%
    );
  }

  html.js-scrolly:not(.is-tall) .portal-diagonal-rim::after {
    clip-path: polygon(
      calc(var(--poly-tr, 56.5%) - 0.18%) 0%,
      calc(var(--poly-tr, 56.5%) + 0.18%) 0%,
      calc(var(--poly-br, 43.5%) + 0.18%) 100%,
      calc(var(--poly-br, 43.5%) - 0.18%) 100%
    );
  }
}

/* Scene 02: Pinned Noir Split-Curtain Identity Triptych */
.scrolly-pillars-track {
  position: relative;
  background: var(--noir-obsidian);
}

.triptych-scrub-bar {
  display: none;
}

.pillar-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.25rem clamp(1rem, 3.5vw, 2.2rem) 2.5rem;
  max-width: 96rem;
  margin-inline: auto;
}

.pillar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 24rem;
  border-radius: 18px;
  overflow: hidden;
  background: var(--noir-hull);
  border: 1px solid rgba(212, 175, 106, 0.22);
  isolation: isolate;
  transition:
    flex 620ms var(--ease-curtain),
    border-color 360ms ease,
    box-shadow 420ms var(--ease-cinema),
    transform 420ms var(--ease-cinema);
}

.pillar-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  z-index: -2;
  transition: transform 720ms var(--ease-curtain), filter 500ms ease;
}

.pillar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    circle at top right,
    rgba(7, 10, 15, 0.62) 0%,
    rgba(7, 10, 15, 0.24) 24%,
    transparent 48%
  );
  pointer-events: none;
}

.pillar-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(7, 10, 15, 0.08) 0%,
    rgba(7, 10, 15, 0.34) 45%,
    rgba(7, 10, 15, 0.92) 88%,
    rgba(7, 10, 15, 0.98) 100%
  );
}

.pillar-watermark {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.2vw, 3.8rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.38);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
  letter-spacing: -0.03em;
  pointer-events: none;
  transition: color 360ms ease, transform 420ms var(--ease-cinema), opacity 360ms ease;
}

.pillar-card .card-content {
  padding: clamp(1.35rem, 2.8vw, 2.2rem);
}

.pillar-card .card-kicker {
  font-family: var(--font-logo);
  font-weight: normal;
  font-size: clamp(1.08rem, 1.35vw, 1.3rem);
  letter-spacing: 0.03em;
  color: var(--champagne-bright);
  margin-bottom: 0.2rem;
}

.pillar-card--manager .card-kicker { color: #ff8c80; }
.pillar-card--expert .card-kicker  { color: var(--sapphire-bright); }
.pillar-card--captain .card-kicker { color: var(--seafoam); }
.pillar-card--mother .card-kicker  { color: #ffb366; }

.pillar-card--manager img {
  object-position: 38% 18%;
}

.pillar-card--expert img {
  object-position: center 34%;
}

.pillar-card--expert::after {
  background: linear-gradient(
    180deg,
    rgba(7, 10, 15, 0.06) 0%,
    rgba(7, 10, 15, 0.18) 52%,
    rgba(7, 10, 15, 0.90) 80%,
    rgba(7, 10, 15, 0.99) 100%
  );
}

.pillar-card h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.85vw, 2.65rem);
  line-height: 1.05;
  color: #ffffff;
}

.portal-preview {
  margin-top: 0.75rem;
}

.portal-excerpt {
  font-size: 0.96rem;
  line-height: 1.56;
  color: var(--ink-secondary);
  max-width: 34rem;
}

.portal-enter {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.95rem;
  padding: 0.52rem 1.05rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(236, 209, 151, 0.52);
  font-family: var(--font-semibold);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease;
}

.pillar-card--manager .portal-enter {
  background: rgba(239, 77, 62, 0.22);
  border-color: rgba(255, 140, 128, 0.65);
}

.pillar-card--expert .portal-enter {
  background: rgba(92, 168, 255, 0.20);
  border-color: rgba(140, 196, 255, 0.65);
  color: #e6f2ff;
}

.pillar-card--captain .portal-enter {
  background: rgba(0, 255, 156, 0.16);
  border-color: rgba(0, 255, 156, 0.62);
  color: var(--seafoam);
}

.pillar-card--mother .portal-enter {
  background: rgba(255, 140, 26, 0.20);
  border-color: rgba(255, 190, 107, 0.65);
}

.pillar-card:hover .portal-enter,
.pillar-card:focus-visible .portal-enter {
  transform: translateX(3px);
}

.pillar-card:hover img,
.pillar-card:focus-visible img {
  transform: scale(1.045);
}

/* Desktop Accordion Split-Curtain Triptych */
@media (min-width: 56.25rem) {
  .pillar-cards {
    display: flex;
    align-items: stretch;
    gap: 1.1rem;
    min-height: 35rem;
    padding-block: 1.25rem 2.75rem;
  }

  .pillar-card {
    flex: 1 1 0%;
    min-width: 0;
  }

  .pillar-card.is-featured {
    flex: 1.95 1 0%;
    border-color: rgba(212, 175, 106, 0.58);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.62);
  }

  .pillar-card--manager.is-featured { border-color: rgba(239, 77, 62, 0.68); }
  .pillar-card--expert.is-featured  { border-color: rgba(92, 168, 255, 0.68); }
  .pillar-card--captain.is-featured { border-color: rgba(0, 255, 156, 0.58); }
  .pillar-card--mother.is-featured  { border-color: rgba(255, 140, 26, 0.62); }

  .pillar-card.is-featured .pillar-watermark {
    color: rgba(236, 209, 151, 0.72);
    transform: translateY(-3px);
  }

  .pillar-card:not(.is-featured) img {
    filter: saturate(0.75) brightness(0.78);
  }

  .pillar-card .portal-preview {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition:
      grid-template-rows 480ms var(--ease-curtain),
      opacity 360ms ease,
      visibility 360ms ease;
  }

  .pillar-card .portal-preview-inner {
    min-height: 0;
    overflow: hidden;
  }

  .pillar-card.is-featured .portal-preview,
  .pillar-card:hover .portal-preview,
  .pillar-card:focus-visible .portal-preview {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
  }
}

@media (min-width: 56.25rem) and (min-height: 42.5rem) {
  html.js-scrolly:not(.is-tall) .scrolly-pillars-track {
    height: 270vh;
  }

  html.js-scrolly:not(.is-tall) .scrolly-pillars-stage {
    position: sticky;
    top: var(--header-sticky-h, 64px);
    min-height: calc(100vh - var(--header-sticky-h, 64px));
    min-height: calc(100svh - var(--header-sticky-h, 64px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 0.85rem 1.5rem;
  }

  html.js-scrolly:not(.is-tall) .triptych-scrub-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 96rem;
    margin-inline: auto;
    padding: 0.4rem clamp(1rem, 3.5vw, 2.2rem) 0.55rem;
  }

  .triptych-step {
    font-family: var(--font-semibold);
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    transition: color 240ms ease;
  }

  .triptych-step.is-current {
    color: var(--champagne-bright);
  }

  .triptych-progress-line {
    flex: 1;
    height: 2px;
    background: rgba(212, 175, 106, 0.18);
    border-radius: 2px;
    overflow: hidden;
  }

  .triptych-progress-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--coral), var(--sapphire), var(--seafoam), var(--amber));
    transform-origin: 0 50%;
    transform: scaleX(var(--triptych-p, 0.25));
    will-change: transform;
  }

  html.js-scrolly:not(.is-tall) .pillar-cards {
    width: 100%;
    flex: 1;
    min-height: min(33rem, calc(100svh - var(--header-sticky-h, 64px) - 5.5rem));
    padding-block: 0.4rem 0.6rem;
  }
}

/* Scene 03: Daylight Architectural Studio Contact Stage (banner3-2.jpg + foto2.png) */
.daylight-curtain {
  position: relative;
  background-color: var(--daylight-paper);
  background-image:
    linear-gradient(90deg, rgba(246, 244, 239, 0.94) 0%, rgba(246, 244, 239, 0.80) 48%, rgba(246, 244, 239, 0.36) 100%),
    url('../images/banner3-2.jpg');
  background-size: cover;
  background-position: center top;
  color: var(--atelier-ink);
  padding-top: clamp(3.8rem, 7vw, 5.6rem);
  padding-bottom: 0;
  overflow: hidden;
}

.daylight-curtain--seamless {
  border-top: 1px solid var(--atelier-line);
}

.daylight-curtain .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  align-items: center;
}

.daylight-curtain .contact-info {
  padding-bottom: clamp(1rem, 4vw, 4.5rem);
}

.daylight-curtain h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--atelier-ink);
}

.daylight-curtain .contact-lead {
  margin-top: 0.9rem;
  max-width: 32rem;
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  line-height: 1.65;
  color: var(--atelier-body);
}

.daylight-curtain .contact-image {
  display: flex;
  justify-content: center;
  align-self: end;
}

.contact-studio-figure {
  max-width: 19.5rem;
  width: 100%;
  filter: drop-shadow(0 20px 38px rgba(17, 22, 29, 0.16));
}

.contact-studio-figure img {
  max-height: 31rem;
  width: auto;
  margin-inline: auto;
}

@media (min-width: 52rem) {
  .daylight-curtain .container {
    grid-template-columns: minmax(0, 1.15fr) minmax(15rem, 0.85fr);
  }
}

@media (min-width: 64rem) and (min-height: 48rem) {
  .daylight-curtain {
    min-height: calc(100vh - var(--header-sticky-h, 64px));
    min-height: calc(100svh - var(--header-sticky-h, 64px));
    display: flex;
    align-items: flex-end;
  }

  .daylight-curtain .container {
    width: 100%;
    align-items: center;
  }
}

/* ==========================================================================
   9. MANAGER.HTML — Obsidian Ledger -> Sticky Split Journey -> Sunlit Atelier
   ========================================================================== */

.manager-bio-1 {
  position: relative;
  background:
    radial-gradient(circle at 76% 24%, rgba(239, 77, 62, 0.12), transparent 46%),
    radial-gradient(circle at 18% 12%, rgba(212, 175, 106, 0.10), transparent 44%),
    linear-gradient(180deg, #090d14 0%, #0f1622 100%);
  padding-block: clamp(2.6rem, 5vw, 4.2rem) clamp(3rem, 5.5vw, 4.5rem);
  overflow: hidden;
}

.manager-bio-1 .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.2rem, 4.5vw, 4rem);
  align-items: center;
}

.manager-bio-1 h1 {
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 4.4vw, 3.55rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.manager-bio-1 .bio-subtitle {
  margin-top: 0.9rem;
  font-family: var(--font-semibold);
  font-size: clamp(1.06rem, 1.5vw, 1.25rem);
  line-height: 1.48;
  color: var(--champagne-bright);
}

.manager-bio-1 .bio-text p + p {
  margin-top: 1rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-secondary);
}

/* Sculptural 4-Column Executive Ledger */
.executive-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.85rem;
}

.ledger-item {
  padding: 0.95rem 1.05rem;
  border-radius: 14px;
  background: rgba(19, 27, 39, 0.82);
  border: 1px solid rgba(212, 175, 106, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ledger-item dt {
  font-family: var(--font-semibold);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ledger-item dd {
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.08;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.scroll-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 48px;
  min-width: 48px;
  margin-top: 1.85rem;
  font-family: var(--font-semibold);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--champagne-bright);
}

.arrow-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(239, 77, 62, 0.65);
  background: rgba(239, 77, 62, 0.14);
  color: #ffffff;
  transition: transform 260ms var(--ease-cinema), background-color 220ms ease;
}

.scroll-cta:hover .arrow-button {
  background: var(--coral);
  transform: translateY(3px);
}

/* Full-Length Cutout Portrait (foto1.png — 2386px tall, shoes protected!) */
.manager-bio-1 .bio-aside {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 14px;
}

.manager-bio-1 .bio-aside img {
  width: auto;
  max-height: min(76vh, 42rem);
  object-fit: contain;
  filter: drop-shadow(0 26px 48px rgba(0, 0, 0, 0.6));
}

@media (min-width: 42rem) {
  .executive-ledger {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 58rem) {
  .manager-bio-1 .container {
    grid-template-columns: minmax(0, 1.32fr) minmax(15rem, 0.68fr);
  }
}

/* Scene 02: Sticky Split-Stage Portrait & Venture Chronicle */
.manager-journey {
  background:
    radial-gradient(circle at 15% 18%, rgba(212, 175, 106, 0.08), transparent 42%),
    linear-gradient(180deg, #0d141f 0%, #090e16 100%);
  padding-block: clamp(4rem, 7.5vw, 6.4rem);
}

.timeline-header {
  max-width: 52rem;
  margin-bottom: clamp(2.4rem, 4.5vw, 3.6rem);
}

.timeline-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  line-height: 1.08;
  color: #ffffff;
}

.timeline-intro {
  margin-top: 1rem;
  font-size: 1.03rem;
  line-height: 1.72;
  color: var(--ink-secondary);
}

.journey-split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.4rem);
  align-items: start;
}

.journey-portrait-card {
  border-radius: 20px;
  overflow: hidden;
  background: var(--noir-card);
  border: 1px solid rgba(212, 175, 106, 0.26);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.45);
}

.journey-portrait-media {
  background-color: #121a26;
  background-image:
    linear-gradient(180deg, rgba(16, 24, 36, 0.62) 0%, rgba(12, 18, 28, 0.86) 100%),
    url('../images/banner3-1.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  padding-top: 1rem;
}

.journey-portrait-media img {
  max-height: 18.5rem;
  width: auto;
  object-fit: contain;
}

.journey-portrait-body {
  padding: 1.4rem 1.5rem 1.6rem;
}

.journey-signature a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  min-width: 46px;
  padding-block: 4px;
  font-family: var(--font-logo);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--champagne-bright);
}

.journey-portrait-body p {
  margin-top: 0.35rem;
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--ink-secondary);
}

.journey-year-readout {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(212, 175, 106, 0.22);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.journey-year-number {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  line-height: 1;
  color: var(--champagne-bright);
  font-variant-numeric: tabular-nums;
}

.journey-year-era {
  font-family: var(--font-semibold);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Right Scroll-Drawn Luminous Spine & Milestone Cards */
.venture-timeline-wrap {
  position: relative;
  padding-left: clamp(1.8rem, 3.2vw, 2.75rem);
}

.timeline-spine-track,
.timeline-spine-laser {
  position: absolute;
  left: 0.55rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  border-radius: 2px;
}

.timeline-spine-track {
  background: rgba(212, 175, 106, 0.18);
}

.timeline-spine-laser {
  background: linear-gradient(180deg, var(--champagne-bright) 0%, var(--coral) 100%);
  transform-origin: 50% 0%;
  transform: scaleY(var(--timeline-p, 1));
  will-change: transform;
}

.timeline-spine-orb {
  position: absolute;
  left: calc(0.55rem - 5px);
  top: calc(0.6rem + (100% - 1.2rem) * var(--timeline-p, 1) - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--coral-bright);
  box-shadow: 0 0 16px rgba(239, 77, 62, 0.85);
  pointer-events: none;
}

.venture-timeline {
  display: grid;
  gap: 1.35rem;
}

.timeline-node {
  position: relative;
}

.node-marker {
  position: absolute;
  left: calc(-1 * clamp(1.8rem, 3.2vw, 2.75rem) + 0.55rem - 6px);
  top: 1.45rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--noir-obsidian);
  border: 2px solid rgba(212, 175, 106, 0.45);
  transition: border-color 260ms ease, background-color 260ms ease, transform 260ms ease;
}

.timeline-node.is-reached .node-marker,
.timeline-node.is-current .node-marker {
  border-color: var(--coral-bright);
  background: var(--coral);
  transform: scale(1.15);
}

.node-card {
  padding: clamp(1.25rem, 2.4vw, 1.65rem);
  border-radius: 16px;
  background: rgba(22, 32, 46, 0.86);
  border: 1px solid rgba(212, 175, 106, 0.20);
  transition: border-color 300ms ease, box-shadow 300ms ease;
}

.timeline-node.is-active-era .node-card,
.timeline-node.is-current .node-card {
  border-color: rgba(239, 77, 62, 0.55);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.node-era {
  display: inline-block;
  font-family: var(--font-semibold);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--champagne-bright);
  margin-bottom: 0.4rem;
}

.timeline-node.is-current .node-era {
  color: #ff8b7e;
}

.node-card h3 {
  font-family: var(--font-bold);
  font-size: clamp(1.18rem, 1.8vw, 1.42rem);
  line-height: 1.25;
  color: #ffffff;
}

.node-card p {
  margin-top: 0.55rem;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--ink-secondary);
}

@media (min-width: 60rem) and (min-height: 42rem) {
  .journey-split-grid {
    grid-template-columns: minmax(19.5rem, 24.5rem) minmax(0, 1fr);
  }

  html:not(.is-tall) .journey-sticky-aside {
    position: sticky;
    top: calc(var(--header-sticky-h, 64px) + 1.5rem);
  }
}

.delegation-frame {
  margin-top: clamp(2.8rem, 5vw, 4.2rem);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 106, 0.28);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.5);
}

.delegation-frame img {
  width: 100%;
  height: auto;
}

/* Scene 03: Sunlit Atelier Curtain — Companies & Polaroid Exhibition */
.atelier-curtain-group {
  background: var(--atelier-limestone);
  color: var(--atelier-ink);
}

.manager-companies {
  padding-block: clamp(4rem, 7vw, 5.8rem) clamp(2.8rem, 5vw, 4rem);
  border-bottom: 1px solid var(--atelier-line);
}

.companies-heading {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.2vw, 2.55rem);
  letter-spacing: 0.03em;
  color: var(--atelier-ink);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.companies-heading span {
  color: var(--atelier-crimson);
}

.manager-companies .logos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
}

.company-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 10.5rem;
  padding: 1.5rem 1.4rem 1.25rem;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(17, 22, 29, 0.10);
  box-shadow: 0 14px 34px rgba(17, 22, 29, 0.06);
  transition: transform 280ms var(--ease-cinema), box-shadow 280ms var(--ease-cinema), border-color 240ms ease;
}

.company-card--current {
  border-color: rgba(148, 41, 30, 0.34);
}

.company-card:hover {
  transform: translateY(-4px);
  border-color: var(--atelier-crimson);
  box-shadow: 0 20px 42px rgba(17, 22, 29, 0.12);
}

.logo-plaque {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.4rem;
  width: 100%;
}

.logo-plaque img {
  max-height: 3.4rem;
  width: auto;
  object-fit: contain;
}

.company-role {
  margin-top: 0.9rem;
  font-family: var(--font-semibold);
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--atelier-muted);
  text-align: center;
}

.company-card--current .company-role {
  color: var(--atelier-crimson);
}

@media (min-width: 48rem) {
  .manager-companies .logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Sunlit Museum Polaroid Gallery */
.manager-gallery {
  padding-block: clamp(3.6rem, 6.5vw, 5.6rem);
  background: var(--atelier-sunlit);
}

.manager-gallery .gallery-header {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem);
}

.manager-gallery .gallery-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.8vw, 3.1rem);
  color: var(--atelier-ink);
}

.manager-gallery .gallery-header p {
  margin-top: 0.65rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--atelier-body);
}

.gallery-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.gallery-row + .gallery-row {
  margin-top: 1.6rem;
}

.manager-gallery .gallery-item {
  background: #ffffff;
  padding: 0.75rem 0.75rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(17, 22, 29, 0.09);
  box-shadow: 0 16px 38px rgba(17, 22, 29, 0.08);
  display: flex;
  flex-direction: column;
}

.manager-gallery .lightbox-trigger {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  min-height: 44px;
  min-width: 44px;
}

.manager-gallery .lightbox-trigger img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 520ms var(--ease-cinema);
}

@media (max-width: 43.99rem) {
  .gallery-row.split-3-9 > .gallery-item:first-child,
  .gallery-row.split-9-3 > .gallery-item:last-child {
    max-width: 22rem;
    width: 100%;
    margin-inline: auto;
  }
}

.manager-gallery .lightbox-trigger:hover img {
  transform: scale(1.035);
}

.manager-gallery .caption {
  margin-top: 0.85rem;
  padding-inline: 0.35rem;
  font-size: 0.92rem;
  line-height: 1.52;
  color: var(--atelier-body);
}

.manager-gallery .caption code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.71rem;
  white-space: nowrap;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  background: rgba(17, 22, 29, 0.07);
  color: var(--atelier-crimson);
}

@media (min-width: 44rem) {
  .gallery-row {
    align-items: start;
  }
  .gallery-row.split-3-9 {
    grid-template-columns: 288fr 905fr;
  }
  .gallery-row.split-6-6 {
    grid-template-columns: 1fr 1fr;
  }
  .gallery-row.split-9-3 {
    grid-template-columns: 905fr 288fr;
  }
}

@media (min-width: 64rem) {
  .manager-companies {
    padding-block: 1.55rem 1.2rem;
  }

  .companies-heading {
    font-size: clamp(1.65rem, 2.3vw, 2rem);
    margin-bottom: 0.95rem;
  }

  .manager-companies .logos,
  .manager-gallery .gallery-row {
    max-width: 47rem;
    margin-inline: auto;
  }

  .company-card {
    min-height: 7.5rem;
    padding: 0.9rem 1.1rem 0.8rem;
  }

  .manager-gallery {
    padding-block: 1.4rem 4.8rem;
  }

  .manager-gallery .gallery-header {
    margin-bottom: 0.95rem;
  }

  .manager-gallery .gallery-header h2 {
    font-size: clamp(1.95rem, 2.8vw, 2.3rem);
  }

  .manager-gallery .gallery-header p {
    margin-top: 0.35rem;
  }

  .gallery-row + .gallery-row {
    margin-top: 3.4rem;
  }
}

/* ==========================================================================
   10. CAPTAIN.HTML — Horizon Telemetry + Full-Bleed CinemaScope + 5-Sea Pan
   ========================================================================== */

.horizon-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--seafoam);
  box-shadow: 0 0 12px rgba(0, 255, 156, 0.85);
}

/* Desktop-Only Nautical Horizon Strip (Replaces v4's 186px Side-Rail Box) */
.captain-horizon {
  display: none;
}

@media (min-width: 56rem) {
  .captain-horizon {
    display: block;
    position: sticky;
    top: var(--header-sticky-h, 64px);
    z-index: 150;
    background: rgba(7, 12, 19, 0.91);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0, 255, 156, 0.18);
  }

  .horizon-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 46px;
  }

  .horizon-telemetry {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
  }

  .horizon-coords {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: clamp(0.65rem, 0.82vw, 0.74rem);
    letter-spacing: clamp(0.03em, 0.08vw, 0.1em);
    color: var(--seafoam);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .horizon-links {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: clamp(0.05rem, 0.3vw, 0.25rem);
  }

  .horizon-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding-inline: clamp(0.32rem, 0.65vw, 0.65rem);
    font-family: var(--font-semibold);
    font-size: clamp(0.64rem, 0.78vw, 0.72rem);
    letter-spacing: clamp(0.04em, 0.08vw, 0.1em);
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
    transition: color 200ms ease;
  }

  .horizon-links a:hover,
  .horizon-links a[aria-current="location"] {
    color: var(--seafoam);
  }
}

/* Scene 01: Full-Bleed Twin Helms CinemaScope Overture */
.captain-banner-1 {
  position: relative;
  width: 100%;
  background: var(--noir-obsidian);
  overflow: hidden;
}

.helms-media {
  position: relative;
  width: 100%;
}

.captain-banner-1 img {
  width: 100%;
  height: auto;
  display: block;
  min-height: 18rem;
  max-height: 88vh;
  object-fit: cover;
  object-position: center 36%;
}

.helms-media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 44%;
  background: linear-gradient(180deg, transparent 0%, rgba(7, 10, 15, 0.90) 100%);
  pointer-events: none;
}

.helms-coords-mobile,
.helms-mobile-cta {
  display: none;
}

.helms-overture {
  position: absolute;
  left: max(clamp(1rem, 3.8vw, 2.5rem), calc((100% - var(--container-max)) / 2 + 2.5rem));
  bottom: clamp(1.1rem, 3.5vw, 2.5rem);
  z-index: 2;
  padding-left: 0.95rem;
  border-left: 2.5px solid var(--seafoam);
}

.helms-kicker {
  display: block;
  font-family: var(--font-semibold);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--seafoam);
}

.helms-sub {
  margin-top: 0.25rem;
  font-family: var(--font-semibold);
  font-size: clamp(0.84rem, 1.3vw, 1.02rem);
  color: #ffffff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.75);
}

@media (max-width: 47.99rem) {
  .captain-banner-1 {
    display: flex;
    flex-direction: column;
  }

  .captain-banner-1 img {
    min-height: 0;
    height: clamp(11.5rem, 42svh, 21rem);
    object-position: center 36%;
  }

  .helms-overture {
    position: relative;
    left: auto;
    bottom: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 1.4rem clamp(1.15rem, 5vw, 1.85rem) 1.65rem;
    border-left: 0;
    background:
      radial-gradient(circle at 82% 18%, rgba(0, 255, 156, 0.09), transparent 52%),
      linear-gradient(180deg, #070a0f 0%, #0a121c 100%);
    border-bottom: 1px solid rgba(0, 255, 156, 0.18);
  }

  .helms-coords-mobile {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
    padding: 0.34rem 0.72rem;
    border-radius: 999px;
    background: rgba(0, 255, 156, 0.08);
    border: 1px solid rgba(0, 255, 156, 0.28);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--seafoam);
  }

  .helms-kicker {
    font-family: var(--font-display);
    font-size: clamp(1.52rem, 6.4vw, 2rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-transform: none;
    color: #ffffff;
  }

  .helms-sub {
    margin-top: 0.65rem;
    max-width: 22rem;
    font-family: var(--font-body);
    font-size: 0.96rem;
    line-height: 1.54;
    color: var(--ink-secondary);
    text-shadow: none;
  }

  .helms-mobile-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 46px;
    min-width: 46px;
    margin-top: 1.15rem;
    padding: 0.62rem 1.2rem;
    border-radius: 999px;
    background: rgba(0, 255, 156, 0.12);
    border: 1px solid rgba(0, 255, 156, 0.48);
    font-family: var(--font-semibold);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--seafoam);
  }
}

@media (max-width: 47.99rem) and (max-height: 40rem) {
  .captain-banner-1 img {
    height: clamp(9.5rem, 34svh, 13.75rem);
  }

  .helms-overture {
    padding: 0.95rem 1.1rem 1.1rem;
  }

  .helms-coords-mobile {
    margin-bottom: 0.5rem;
  }

  .helms-kicker {
    font-size: clamp(1.3rem, 5.5vw, 1.62rem);
  }

  .helms-sub {
    margin-top: 0.4rem;
    font-size: 0.88rem;
    line-height: 1.44;
  }

  .helms-mobile-cta {
    margin-top: 0.75rem;
  }
}

@media (max-width: 47.99rem) and (min-height: 33rem) {
  .captain-banner-1 {
    min-height: calc(100svh - var(--header-sticky-h, 55px));
  }
}

/* Scene 02: Croatia Full-Bleed Widescreen + Native Dark-Band Typography */
.captain-banner-2 {
  position: relative;
  width: 100%;
  background: #091019;
  border-radius: 0;
  overflow: hidden;
}

.captain-banner-2-stage {
  position: relative;
  max-width: 160rem;
  margin-inline: auto;
}

@media (min-width: 160.0625rem) {
  .captain-banner-2-stage::before,
  .captain-banner-2-stage::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(3rem, 6vw, 8rem);
    pointer-events: none;
    z-index: 2;
  }

  .captain-banner-2-stage::before {
    left: 0;
    background: linear-gradient(90deg, #091019 0%, transparent 100%);
  }

  .captain-banner-2-stage::after {
    right: 0;
    background: linear-gradient(270deg, #091019 0%, transparent 100%);
  }
}

.captain-banner-2 .aperture-media {
  width: 100%;
  border-radius: 0;
}

.captain-banner-2 .banner-bg,
.captain-banner-2 .banner-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

.captain-banner-2 .banner-text {
  padding: 2rem clamp(1.1rem, 4vw, 2.5rem) 2.6rem;
  background: #091019;
}

.captain-banner-2 h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.1vw, 2.85rem);
  line-height: 1.08;
  color: #ffffff;
}

.captain-banner-2 h1 span {
  color: var(--seafoam);
}

.captain-banner-2 .banner-text p {
  margin-top: 0.75rem;
  max-width: 36rem;
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  line-height: 1.56;
  color: var(--ink-secondary);
}

@media (min-width: 48rem) {
  .captain-banner-2:not(.is-band-stacked) .banner-text {
    position: absolute;
    top: 32.2%;
    height: 35%;
    left: 43%;
    right: 4%;
    padding: 0.6rem 1.15rem;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 3;
  }

  .captain-banner-2:not(.is-band-stacked) h1 {
    font-size: clamp(1.22rem, 2.35vw, 2.55rem);
  }

  .captain-banner-2:not(.is-band-stacked) .banner-text p {
    margin-top: 0.42rem;
    font-size: clamp(0.82rem, 1.1vw, 1.06rem);
    line-height: 1.46;
  }
}

/* Scene 03: Cyclades Starlight Quote + Nautical Polaroid Collage */
.captain-quote {
  position: relative;
  background-color: #091019;
  background-image:
    linear-gradient(90deg, rgba(7, 11, 18, 0.84) 0%, rgba(7, 11, 18, 0.56) 52%, rgba(7, 11, 18, 0.68) 100%),
    url('../images/banner-3.jpg');
  background-size: cover;
  background-position: center;
  padding-block: clamp(3.8rem, 7vw, 6rem);
}

.captain-quote .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}

.captain-quote h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.06;
  color: #ffffff;
}

.captain-quote h2 span {
  color: var(--seafoam);
}

.captain-quote .quote-text p {
  margin-top: 1.1rem;
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.72;
  color: var(--ink-secondary);
  max-width: 34rem;
}

.captain-quote .quote-image {
  max-width: 32rem;
  margin-inline: auto;
  filter: drop-shadow(0 26px 48px rgba(0, 0, 0, 0.65));
}

.captain-quote .quote-image img {
  width: 100%;
  height: auto;
}

@media (min-width: 54rem) {
  .captain-quote .container {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 1fr);
  }
}

/* Scene 04: Overlapping Widescreen Sailing Film Stage */
.captain-video {
  background: linear-gradient(180deg, #0b1320 0%, #070b12 100%);
  padding-block: clamp(3.8rem, 7vw, 6rem);
}

.captain-video .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.video-thumbnail {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 156, 0.25);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.6);
}

.video-thumbnail .video-trigger {
  position: relative;
  display: block;
}

.video-thumbnail img {
  width: 100%;
  max-height: 36rem;
  object-fit: cover;
  transition: transform 600ms var(--ease-cinema);
}

.video-thumbnail .video-trigger:hover img {
  transform: scale(1.035);
}

.video-play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 12, 19, 0.82);
  border: 2px solid var(--seafoam);
  color: var(--seafoam);
  box-shadow: 0 0 0 10px rgba(0, 255, 156, 0.14), 0 16px 36px rgba(0, 0, 0, 0.65);
  transition: transform 280ms var(--ease-cinema), background-color 220ms ease, color 220ms ease;
}

.video-thumbnail .video-trigger:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--seafoam);
  color: #061018;
}

.captain-video .video-text {
  padding: clamp(1.6rem, 3.2vw, 2.6rem);
  border-radius: 20px;
  background: rgba(14, 22, 34, 0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 106, 0.26);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.52);
}

.captain-video .video-text h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  line-height: 1.12;
  color: #ffffff;
}

.captain-video .video-text h2 span {
  color: var(--seafoam);
}

.video-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 48px;
  min-width: 48px;
  margin-top: 1.5rem;
  padding: 0.72rem 1.4rem;
  border-radius: 999px;
  background: var(--seafoam);
  color: #061219;
  font-family: var(--font-bold);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 240ms var(--ease-cinema), box-shadow 240ms ease;
}

.video-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 255, 156, 0.34);
}

@media (min-width: 56rem) {
  .captain-video .container {
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
    gap: 0;
  }

  .captain-video .video-text {
    margin-left: -3.2rem;
    position: relative;
    z-index: 3;
  }
}

/* Scene 05: Full-Viewport Pinned Vertical-to-Horizontal 5-Sea & Alpine Cinema Pan */
.scrolly-voyage-track {
  position: relative;
  background: #070b12;
}

.captain-filmstrip {
  padding-block: clamp(3.2rem, 5.5vw, 4.5rem);
  overflow: hidden;
}

.filmstrip-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.filmstrip-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  line-height: 1.08;
  color: #ffffff;
}

.filmstrip-sub {
  margin-top: 0.45rem;
  font-size: 0.98rem;
  color: var(--ink-secondary);
}

.filmstrip-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.strip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 156, 0.36);
  background: rgba(14, 22, 34, 0.85);
  color: #ffffff;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.strip-btn:hover {
  background: var(--seafoam);
  color: #061219;
  transform: scale(1.05);
}

.filmstrip-viewport {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-inline: max(clamp(1rem, 3.8vw, 2.5rem), calc((100% - var(--container-max)) / 2 + 2.5rem));
  padding-bottom: 0.75rem;
}

.filmstrip-track {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  width: max-content;
}

.reel-frame {
  width: clamp(17rem, 76vw, 34rem);
  flex: 0 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: var(--noir-card);
  border: 1px solid rgba(212, 175, 106, 0.22);
  display: flex;
  flex-direction: column;
}

.reel-frame a {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  min-height: 44px;
  min-width: 44px;
}

.reel-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform 520ms var(--ease-cinema);
}

.reel-frame--film img {
  object-position: center 0%;
  transform: scale(1.12);
  transform-origin: center top;
}

.reel-frame a:hover img {
  transform: scale(1.04);
}

.reel-frame--film a:hover img {
  transform: scale(1.16);
}

.reel-film-pill {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  background: rgba(7, 12, 19, 0.86);
  border: 1px solid var(--seafoam);
  font-family: var(--font-semibold);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--seafoam);
}

.reel-frame figcaption {
  padding: 0.9rem 1.15rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.reel-coord {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--seafoam);
}

.reel-frame figcaption strong {
  font-family: var(--font-bold);
  font-size: 1rem;
  color: #ffffff;
}

.voyage-scrub-footer {
  display: none;
}

@media (min-width: 56.25rem) {
  .reel-frame {
    width: clamp(22rem, 38vw, 46rem);
  }
}

@media (min-width: 56.25rem) and (min-height: 42.5rem) {
  html.js-scrolly:not(.is-tall) .scrolly-voyage-track:not(.is-voyage-unpinned) {
    height: 275vh;
  }

  html.js-scrolly:not(.is-tall) .scrolly-voyage-track:not(.is-voyage-unpinned) .scrolly-voyage-stage {
    position: sticky;
    top: calc(var(--header-sticky-h, 64px) + var(--horizon-sticky-h, 46px));
    min-height: calc(100vh - var(--header-sticky-h, 64px) - var(--horizon-sticky-h, 46px));
    min-height: calc(100svh - var(--header-sticky-h, 64px) - var(--horizon-sticky-h, 46px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 1.2rem;
  }

  html.js-scrolly:not(.is-tall) .scrolly-voyage-track:not(.is-voyage-unpinned) .filmstrip-viewport {
    overflow: hidden;
  }

  html.js-scrolly:not(.is-tall) .scrolly-voyage-track:not(.is-voyage-unpinned) .filmstrip-track {
    transform: translate3d(var(--voyage-pan-x, 0px), 0, 0);
    will-change: transform;
  }

  html.js-scrolly:not(.is-tall) .scrolly-voyage-track:not(.is-voyage-unpinned) .voyage-scrub-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.15rem;
  }

  .voyage-rail-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
  }

  .voyage-rail-bar {
    flex: 1;
    height: 2px;
    background: rgba(0, 255, 156, 0.16);
    border-radius: 2px;
    overflow: hidden;
  }

  .voyage-rail-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--seafoam) 0%, var(--champagne-bright) 100%);
    transform-origin: 0 50%;
    transform: scaleX(var(--voyage-p, 0));
    will-change: transform;
  }
}

/* Scene 06: Alpine Summit Finale (banner-4.jpg + skipper.png) */
.captain-skipper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 17rem;
  max-height: 90vh;
  background-color: #131d28;
  background-image: url('../images/banner-4.jpg');
  background-size: cover;
  background-position: center 12%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-block: 1.25rem;
}

.skipper-image {
  margin-left: auto;
  margin-right: 0;
  width: min(86vw, 22rem);
}

@media (min-width: 48rem) {
  .captain-skipper {
    aspect-ratio: 16 / 9;
    min-height: 23rem;
    padding-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
  }

  .skipper-image {
    width: min(58vw, 39rem);
  }
}

.skipper-image img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.48));
}

/* ==========================================================================
   11. MOTHER.HTML — Face-Clear Hero + Opposing Cutouts + Sunlit Family Album
   ========================================================================== */

/* Scene 01: Face-Clear Golden-Hour Diagonal Hero (banner2-1.jpg) */
.mother-hero {
  position: relative;
  background: var(--cocoa-deep);
  overflow: hidden;
}

.mother-hero-stage {
  position: relative;
  max-width: 160rem;
  margin-inline: auto;
}

.mother-hero-media .hero-bg {
  width: 100%;
  height: auto;
  display: block;
  clip-path: polygon(0 0, 100% 0, 100% 56.5%, 31.8% 99.6%, 0 72.3%);
}

@media (min-width: 160.0625rem) {
  .mother-hero-stage::before,
  .mother-hero-stage::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(3rem, 6vw, 8rem);
    pointer-events: none;
    z-index: 2;
  }

  .mother-hero-stage::before {
    left: 0;
    background: linear-gradient(90deg, var(--cocoa-deep) 0%, transparent 100%);
  }

  .mother-hero-stage::after {
    right: 0;
    background: linear-gradient(270deg, var(--cocoa-deep) 0%, transparent 100%);
  }
}

.mother-hero .hero-overlay {
  padding: 1.85rem clamp(1.1rem, 4vw, 2.5rem) 2.2rem;
  background: var(--cocoa-deep);
}

.mother-hero .subtitle {
  display: block;
  font-family: var(--font-semibold);
  font-size: clamp(0.84rem, 1.3vw, 1.05rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
}

.mother-hero h1 {
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.1vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #ffffff;
}

@media (min-width: 48rem) {
  .mother-hero:not(.is-band-stacked) .hero-overlay {
    position: absolute;
    left: 44.5%;
    right: 4%;
    top: 19.2%;
    height: 29.5%;
    padding: 0.55rem 1.1rem;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 3;
  }

  .mother-hero:not(.is-band-stacked) .subtitle {
    font-size: clamp(0.72rem, 1.15vw, 1.02rem);
  }

  .mother-hero:not(.is-band-stacked) h1 {
    font-size: clamp(1.65rem, 3.55vw, 3.45rem);
  }
}

/* Scene 02 & 04: Opposing Edge-Bleed Polaroid Cutouts (Teo, Amalka, Lui) */
.child-profiles {
  background: linear-gradient(180deg, var(--cocoa-deep) 0%, var(--cocoa-mid) 100%);
  padding-block: clamp(3.2rem, 6.5vw, 5.6rem);
  overflow: hidden;
  container-type: inline-size;
}

.child-profiles--lui {
  padding-top: clamp(4.5rem, 10vh, 6.4rem);
}

.child-profile {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
  width: 100%;
}

.child-profile + .child-profile {
  margin-top: clamp(3.6rem, 12vh, 8.2rem);
}

.child-profile .child-text {
  padding-inline: clamp(1.15rem, 4.5vw, 3rem);
  max-width: 40rem;
}

.child-profile .child-text h2,
.child-profile .child-text p {
  max-width: 32rem;
  text-align: left;
}

.child-profile h2 {
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 4.4vw, 3.6rem);
  line-height: 1.04;
  color: #ffffff;
}

.child-profile--teo h2    { color: #7be396; }
.child-profile--amalka h2 { color: #7ec8ff; }
.child-profile--lui h2    { color: #ffbe6b; }

.child-profile .child-text p {
  margin-top: 0.95rem;
  font-family: var(--font-semibold);
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  line-height: 1.68;
  color: var(--ink-secondary);
}

.child-profile .child-text em {
  font-style: italic;
  color: var(--ink-primary);
}

.child-profile .child-image {
  transform: translate3d(var(--child-glide-x, 0px), 0, 0);
  will-change: transform;
}

.child-profile .child-image img {
  width: 100%;
  height: auto;
}

.child-profile--right-bleed .child-image img {
  margin-left: auto;
  margin-right: 0;
}

.child-profile--left-bleed .child-image img {
  margin-right: auto;
  margin-left: 0;
}

@media (max-width: 53.99rem) {
  .child-profile .child-image {
    order: -1;
    width: min(92%, 34rem);
  }

  .child-profile--right-bleed .child-image {
    margin-left: auto;
    margin-right: 0;
  }

  .child-profile--left-bleed .child-image {
    margin-right: auto;
    margin-left: 0;
  }
}

@media (min-width: 54rem) {
  .child-profile--right-bleed {
    grid-template-columns: minmax(22rem, 1fr) minmax(0, 1fr);
  }

  .child-profile--right-bleed .child-text {
    max-width: none;
    justify-self: stretch;
    padding-left: max(clamp(1rem, 3.8vw, 2.5rem), calc((100cqw - var(--container-max)) / 2 + 2.5rem));
    padding-right: clamp(1.5rem, 3vw, 2.75rem);
  }

  .child-profile--right-bleed .child-image {
    justify-self: end;
    width: min(100%, clamp(38rem, 48vw, 68rem));
    margin-left: auto;
    margin-right: 0;
  }

  .child-profile--left-bleed {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 1fr);
  }

  .child-profile--left-bleed .child-image {
    order: -1;
    justify-self: start;
    width: min(100%, clamp(38rem, 48vw, 68rem));
    margin-right: auto;
    margin-left: 0;
  }

  .child-profile--left-bleed .child-text {
    max-width: none;
    justify-self: stretch;
    padding-left: clamp(1.5rem, 3vw, 2.75rem);
    padding-right: max(clamp(1rem, 3.8vw, 2.5rem), calc((100cqw - var(--container-max)) / 2 + 2.5rem));
  }
}

@media (min-width: 64rem) {
  .child-profiles {
    padding-block: 5.2rem 5.8rem;
  }

  .child-profile + .child-profile {
    margin-top: clamp(6.5rem, 11vh, 10rem);
  }

  .child-profile--tuck-top {
    margin-top: -1rem;
    position: relative;
    z-index: 2;
  }
}

/* Scene 03: Diagonal Illuminated Family Steps (banner2-2.jpg) */
.mother-banner {
  position: relative;
  background: var(--cocoa-deep);
  overflow: hidden;
}

.mother-banner-media {
  position: relative;
  max-width: 160rem;
  margin-inline: auto;
}

.mother-banner .banner-img {
  width: 100%;
  height: auto;
  display: block;
  clip-path: polygon(0 0, 100% 0, 100% 72.2%, 68.2% 99.6%, 0 56.5%);
}

@media (min-width: 160.0625rem) {
  .mother-banner-media::before,
  .mother-banner-media::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(3rem, 6vw, 8rem);
    pointer-events: none;
    z-index: 2;
  }

  .mother-banner-media::before {
    left: 0;
    background: linear-gradient(90deg, var(--cocoa-deep) 0%, transparent 100%);
  }

  .mother-banner-media::after {
    right: 0;
    background: linear-gradient(270deg, var(--cocoa-deep) 0%, transparent 100%);
  }
}

@media (min-width: 48rem) {
  .mother-banner .banner-img {
    filter: brightness(1.48) contrast(1.06) saturate(1.14);
  }
}

.mother-banner .banner-quote {
  padding: 1.65rem clamp(1.2rem, 4vw, 2.5rem);
  background: rgba(18, 14, 11, 0.92);
  border-top: 1px solid rgba(255, 140, 26, 0.28);
}

.mother-banner .banner-quote p {
  font-family: var(--font-semibold);
  font-size: clamp(1.1rem, 1.65vw, 1.38rem);
  line-height: 1.48;
  font-style: italic;
  color: #ffffff;
}

@media (min-width: 56rem) {
  .mother-banner .banner-quote {
    position: absolute;
    left: max(clamp(1.5rem, 5vw, 4.5rem), calc((100% - var(--container-max)) / 2 + 2.5rem));
    top: 14%;
    width: min(28.5rem, calc(100% - 3rem));
    max-width: 28.5rem;
    padding: 1.55rem 1.85rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 190, 107, 0.36);
    background: rgba(16, 12, 10, 0.80);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55);
  }
}

/* Scene 05: Stacked Warm Sunlit Family Album Curtain (#f6f2ea) */
.mother-gallery {
  background: var(--atelier-warm);
  color: var(--atelier-ink);
  padding-block: clamp(4rem, 7.5vw, 6.4rem);
}

.mother-gallery .gallery-header {
  text-align: center;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem);
}

.mother-gallery .gallery-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.2vw, 3.35rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.mother-gallery .gallery-header .orange {
  color: var(--atelier-amber);
}

.mother-gallery .gallery-header .dark {
  color: var(--atelier-ink);
}

.mother-gallery .gallery-frame {
  display: block;
  padding: 0.55rem;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(24, 18, 12, 0.08);
  box-shadow: 0 14px 34px rgba(24, 18, 12, 0.08);
  overflow: hidden;
  min-height: 44px;
  min-width: 44px;
  transition: transform 320ms var(--ease-cinema), box-shadow 320ms var(--ease-cinema);
}

.mother-gallery .gallery-frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(24, 18, 12, 0.14);
}

.mother-gallery .gallery-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
}

.gallery-panorama {
  margin-bottom: 1.5rem;
}

.gallery-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.bento-stack {
  display: grid;
  gap: 1.25rem;
}

.gallery-portraits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.85rem, 2vw, 1.35rem);
}

.gallery-portraits .gallery-frame {
  aspect-ratio: 3 / 4;
}

@media (min-width: 48rem) {
  .gallery-bento {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: stretch;
  }

  .gallery-portraits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .mother-gallery {
    padding-block: 1.65rem 5.4rem;
  }

  .mother-gallery .gallery-header {
    margin-bottom: 0.95rem;
  }

  .mother-gallery .gallery-header h2 {
    font-size: clamp(1.95rem, 2.7vw, 2.3rem);
  }

  .mother-gallery .gallery-panorama,
  .mother-gallery .gallery-bento,
  .mother-gallery .gallery-portraits {
    max-width: 57rem;
    margin-inline: auto;
  }

  .mother-gallery .gallery-panorama {
    margin-bottom: 1.45rem;
  }

  .mother-gallery .gallery-panorama .gallery-frame img {
    aspect-ratio: 16 / 4.85;
    object-position: center 62%;
  }

  .mother-gallery .gallery-bento {
    gap: 0.9rem;
    margin-bottom: 3.6rem;
  }

  .mother-gallery .bento-stack {
    gap: 0.9rem;
  }

  .mother-gallery .bento-stack .gallery-frame img {
    aspect-ratio: 16 / 9.2;
  }

  .mother-gallery .bento-tall img {
    object-position: center 20%;
  }

  .gallery-portraits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Scene 06: Panoramic Alpine Overlook Contact Finale (banner2-3.jpg) */
.mother-contact {
  position: relative;
  background-color: var(--cocoa-deep);
  background-image:
    linear-gradient(90deg, rgba(14, 11, 9, 0.72) 0%, rgba(14, 11, 9, 0.34) 55%, rgba(14, 11, 9, 0.18) 100%),
    url('../images/banner2-3.jpg');
  background-size: cover;
  background-position: center 38%;
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
}

@media (min-width: 48rem) {
  .mother-contact {
    min-height: clamp(31rem, 72vh, 42rem);
    display: flex;
    align-items: center;
  }
}

.mother-contact-card {
  max-width: 34rem;
  padding: clamp(1.8rem, 3.8vw, 2.8rem);
  border-radius: 22px;
  background: rgba(14, 12, 10, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 190, 107, 0.32);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.58);
}

.mother-contact-card h2 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.06;
  color: #ffffff;
}

.mother-contact-card .contact-lead {
  margin-top: 0.85rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-secondary);
}

/* ==========================================================================
   12. FOOTERS, UPGRADED LIGHTBOX & VIDEO MODAL, AND REDUCED MOTION
   ========================================================================== */

.footer-middle {
  background: #06090e;
  border-top: 1px solid rgba(212, 175, 106, 0.20);
  padding-block: clamp(3rem, 5.5vw, 4.4rem);
  color: var(--ink-secondary);
}

.footer-middle .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.85rem;
}

.footer-logo a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  min-width: 46px;
  padding-block: 4px;
  font-family: var(--font-logo);
  font-size: 1.48rem;
  line-height: 1.2;
  color: #ffffff;
}

.footer-menu h3 {
  font-family: var(--font-semibold);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--champagne-bright);
  margin-bottom: 0.55rem;
}

.footer-menu p {
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--ink-secondary);
}

.footer-menu ul {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.footer-menu ul li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  font-size: 0.94rem;
  color: var(--ink-secondary);
  transition: color 200ms ease;
}

.footer-menu ul li a:hover {
  color: var(--champagne-bright);
}

@media (min-width: 44rem) {
  .footer-middle .container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 66rem) {
  .footer-middle .container {
    grid-template-columns: 1.15fr 1.35fr 1.15fr 0.95fr 1.15fr;
  }
}

.site-footer {
  background: #04060a;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-block: 1.25rem;
  text-align: center;
  font-size: 0.86rem;
  color: var(--ink-muted);
}

.site-footer strong {
  color: var(--ink-primary);
}

/* Native <dialog> Lightbox & Video Modal */
dialog.lightbox,
dialog.video-modal {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  background: rgba(5, 8, 13, 0.94);
  color: #ffffff;
}

dialog.lightbox::backdrop,
dialog.video-modal::backdrop {
  background: rgba(3, 5, 9, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

dialog.lightbox[open] {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(0.85rem, 2.5vw, 1.5rem);
}

.lightbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lightbox-counter {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  color: var(--champagne-bright);
}

.lightbox-close,
.lightbox-nav,
.video-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(15, 22, 33, 0.86);
  color: #ffffff;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.lightbox-close:hover,
.lightbox-nav:hover,
.video-modal-close:hover {
  background: var(--champagne);
  border-color: var(--champagne);
  color: #0b0f16;
}

.lightbox-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  min-height: 0;
}

.lightbox-stage img {
  max-height: 76vh;
  max-width: 100%;
  width: auto;
  margin-inline: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}

.lightbox-caption {
  text-align: center;
  padding-top: 0.75rem;
  font-size: 0.95rem;
  color: var(--ink-secondary);
}

dialog.video-modal[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: clamp(0.85rem, 3vw, 2.2rem);
}

.video-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 4;
}

.video-modal-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: min(68rem, 100%);
  max-height: calc(100vh - 2.2rem);
}

.video-modal-shell.is-portrait {
  width: min(26rem, 92vw);
}

.video-modal-inner {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 106, 0.36);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.8);
  background: #000000;
}

.video-modal-shell.is-portrait .video-modal-inner {
  aspect-ratio: 9 / 16;
  max-height: min(63vh, 36rem);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

.video-modal-inner iframe,
.video-modal-inner video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000000;
}

.video-modal-inner iframe[hidden],
.video-modal-inner video[hidden] {
  display: none !important;
}

.video-modal-meta {
  width: 100%;
  max-width: 44rem;
  text-align: center;
  padding-inline: 0.5rem;
}

.video-modal-meta[hidden] {
  display: none !important;
}

.video-modal-title {
  font-family: var(--font-bold);
  font-size: 1.02rem;
  color: #ffffff;
}

.video-modal-summary {
  margin-top: 0.3rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-secondary);
}

.video-modal-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 44px;
  min-width: 44px;
  margin-top: 0.2rem;
  padding-inline: 0.65rem;
  font-family: var(--font-semibold);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--champagne-bright);
}

.video-modal-source:hover {
  color: #ffffff;
}

/* ==========================================================================
   13. V8 EXTENSIONS — MANAGER MEDIA STAGE & EXPERT PILLAR (expert.html)
   ========================================================================== */

/* --- 13A. Manager Credentials Line, Noir Media Stage & Executive Gallery --- */

.ledger-credentials-note {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(212, 175, 106, 0.18);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.ledger-credentials-note strong {
  color: var(--champagne-soft);
  font-family: var(--font-semibold);
}

.manager-media-stage {
  background:
    radial-gradient(circle at 82% 16%, rgba(239, 77, 62, 0.10), transparent 44%),
    radial-gradient(circle at 14% 78%, rgba(212, 175, 106, 0.08), transparent 46%),
    linear-gradient(180deg, #0b111b 0%, #070a10 100%);
  padding-block: clamp(4rem, 7.5vw, 6.2rem);
}

.media-stage-header {
  max-width: 48rem;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.2rem);
}

.noir-eyebrow {
  font-family: var(--font-semibold);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagne-bright);
  margin-bottom: 0.65rem;
}

body[data-pillar="manager"] .noir-eyebrow {
  color: #ff8c80;
}

body[data-pillar="expert"] .noir-eyebrow {
  color: var(--sapphire-bright);
}

.media-stage-header h2,
.noir-section-heading h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.media-stage-header p,
.noir-section-heading p {
  margin-top: 0.9rem;
  font-size: 1.03rem;
  line-height: 1.7;
  color: var(--ink-secondary);
}

/* Widescreen Feature Podcast + Executive Principles Split */
.ceo-talks-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: center;
  margin-bottom: clamp(3rem, 5.5vw, 4.5rem);
}

@media (min-width: 58rem) {
  .ceo-talks-feature {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  }
}

.podcast-cinema-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--noir-card);
  border: 1px solid rgba(212, 175, 106, 0.28);
  box-shadow: 0 26px 58px rgba(0, 0, 0, 0.55);
}

.podcast-cinema-card .video-trigger {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  min-height: 44px;
  min-width: 44px;
}

.podcast-cinema-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 560ms var(--ease-cinema);
}

.podcast-cinema-card .video-trigger:hover img {
  transform: scale(1.035);
}

.podcast-play-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 10, 16, 0.84);
  border: 2px solid var(--coral-bright);
  color: #ffffff;
  box-shadow: 0 0 0 10px rgba(239, 77, 62, 0.16), 0 16px 36px rgba(0, 0, 0, 0.65);
  transition: transform 260ms var(--ease-cinema), background-color 220ms ease;
}

.podcast-cinema-card .video-trigger:hover .podcast-play-badge {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--coral);
}

.podcast-cinema-body {
  padding: 1.35rem 1.5rem 1.5rem;
}

.podcast-tag {
  display: inline-block;
  font-family: var(--font-semibold);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--champagne-bright);
  margin-bottom: 0.4rem;
}

.podcast-cinema-body h3 {
  font-family: var(--font-bold);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.22;
  color: #ffffff;
}

.podcast-cinema-body p {
  margin-top: 0.55rem;
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--ink-secondary);
}

.principles-list {
  display: grid;
  gap: 1rem;
}

.principle-row {
  padding: 1.1rem 1.25rem;
  border-left: 2.5px solid var(--coral);
  background: rgba(18, 26, 38, 0.68);
  border-radius: 0 14px 14px 0;
}

.principle-row h3 {
  font-family: var(--font-bold);
  font-size: 1.05rem;
  color: #ffffff;
}

.principle-row p {
  margin-top: 0.35rem;
  font-size: 0.93rem;
  line-height: 1.58;
  color: var(--ink-secondary);
}

/* Shared Vertical 9:16 Video Briefing Reel Grid (Manager & Expert) */
.reel-subhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.4rem;
}

.reel-subhead h3 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  color: #ffffff;
}

.reel-subhead p {
  font-size: 0.92rem;
  color: var(--ink-muted);
}

.vertical-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.85rem, 2vw, 1.35rem);
}

@media (max-width: 22rem) {
  .vertical-video-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 52rem) {
  .vertical-video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 70rem) {
  .vertical-video-grid--4col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .vertical-video-grid--5col {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.vertical-video-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--noir-card);
  border: 1px solid rgba(212, 175, 106, 0.20);
  display: flex;
  flex-direction: column;
  transition: transform 300ms var(--ease-cinema), border-color 260ms ease, box-shadow 300ms ease;
}

.vertical-video-card:hover {
  transform: translateY(-4px);
  border-color: var(--pillar-accent);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
}

.vertical-video-card .video-trigger {
  position: relative;
  display: block;
  aspect-ratio: 9 / 14;
  overflow: hidden;
  min-height: 44px;
  min-width: 44px;
  background: #070a10;
}

.vertical-video-card .video-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transition: transform 520ms var(--ease-cinema);
}

.vertical-video-card .video-trigger:hover img {
  transform: scale(1.045);
}

.vertical-video-card .video-trigger::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 10, 15, 0.05) 0%,
    rgba(7, 10, 15, 0.14) 52%,
    rgba(7, 10, 15, 0.88) 100%
  );
  pointer-events: none;
}

.vv-duration {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 2;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: rgba(7, 10, 16, 0.82);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: #ffffff;
}

.vv-play {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 19, 0.86);
  border: 1.5px solid var(--pillar-accent);
  color: #ffffff;
  transition: background-color 220ms ease, color 220ms ease, transform 220ms ease;
}

.vertical-video-card .video-trigger:hover .vv-play {
  background: var(--pillar-accent);
  color: #070a10;
  transform: scale(1.06);
}

.vv-body {
  padding: 0.95rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  flex: 1;
}

.vv-kicker {
  font-family: var(--font-semibold);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--champagne-bright);
}

.vv-body h4 {
  margin: 0;
  font-family: var(--font-bold);
  font-size: 0.98rem;
  line-height: 1.28;
  color: #ffffff;
}

.vv-body p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-secondary);
}

/* Sunlit Recognition Showcase (Deloitte Fast 50 + Visa On the List) */
.recognition-showcase {
  margin-top: clamp(1.8rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  max-width: 47rem;
  margin-inline: auto;
}

@media (min-width: 44rem) {
  .recognition-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.recognition-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(17, 22, 29, 0.09);
  box-shadow: 0 10px 26px rgba(17, 22, 29, 0.05);
}

.recognition-badge-media {
  flex: 0 0 6.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recognition-badge-media img {
  max-height: 3.3rem;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
}

.recognition-copy strong {
  display: block;
  font-family: var(--font-bold);
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--atelier-ink);
}

.recognition-copy span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--atelier-muted);
}

/* Manager Executive & Milestone Photo Grid (Above Original Polaroids) */
.executive-moments-block {
  margin-bottom: clamp(3rem, 5.5vw, 4.4rem);
}

.executive-moments-subhead {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: 1.65rem;
}

.executive-moments-subhead h3 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  color: var(--atelier-ink);
}

.executive-moments-subhead p {
  margin-top: 0.45rem;
  font-size: 0.98rem;
  color: var(--atelier-body);
}

.executive-gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 36rem) {
  .executive-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .executive-gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 68rem;
    margin-inline: auto;
  }
}

.exec-photo-card {
  background: #ffffff;
  padding: 0.65rem 0.65rem 0.95rem;
  border-radius: 14px;
  border: 1px solid rgba(17, 22, 29, 0.09);
  box-shadow: 0 14px 34px rgba(17, 22, 29, 0.07);
  display: flex;
  flex-direction: column;
}

.exec-photo-card .lightbox-trigger {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 9px;
  min-height: 44px;
  min-width: 44px;
}

.exec-photo-card .lightbox-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transition: transform 500ms var(--ease-cinema);
}

.exec-photo-card .lightbox-trigger:hover img {
  transform: scale(1.04);
}

.exec-photo-card figcaption {
  margin-top: 0.72rem;
  padding-inline: 0.25rem;
  font-size: 0.86rem;
  line-height: 1.48;
  color: var(--atelier-body);
}

.polaroid-archive-divider {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 1.65rem;
  padding-top: 2rem;
  border-top: 1px solid var(--atelier-line);
}

.polaroid-archive-divider h3 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  color: var(--atelier-ink);
}

.polaroid-archive-divider p {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  color: var(--atelier-muted);
}

/* --- 13B. EXPERT.HTML — SAF, EACT & European Fintech Stagecraft --- */

.expert-horizon {
  display: none;
}

.horizon-dot--expert {
  background: var(--sapphire);
  box-shadow: 0 0 12px rgba(92, 168, 255, 0.85);
}

@media (min-width: 56rem) {
  .expert-horizon {
    display: block;
    position: sticky;
    top: var(--header-sticky-h, 64px);
    z-index: 150;
    background: rgba(7, 12, 20, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(92, 168, 255, 0.22);
  }

  .expert-horizon .horizon-coords {
    color: var(--sapphire-bright);
  }

  .expert-horizon .horizon-links a:hover,
  .expert-horizon .horizon-links a[aria-current="location"] {
    color: var(--sapphire-bright);
  }
}

.expert-hero {
  position: relative;
  background:
    radial-gradient(circle at 78% 22%, rgba(92, 168, 255, 0.14), transparent 46%),
    radial-gradient(circle at 16% 18%, rgba(212, 175, 106, 0.11), transparent 44%),
    linear-gradient(180deg, #080d16 0%, #0d1624 100%);
  padding-block: clamp(2.8rem, 5.5vw, 4.6rem) clamp(3.4rem, 6vw, 5rem);
  overflow: hidden;
}

.expert-hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.2rem, 4.5vw, 4rem);
  align-items: center;
}

@media (min-width: 58rem) {
  .expert-hero .container {
    grid-template-columns: minmax(0, 1.24fr) minmax(17rem, 0.76fr);
  }
}

.expert-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 4.3vw, 3.55rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.expert-hero .bio-subtitle {
  margin-top: 0.9rem;
  font-family: var(--font-semibold);
  font-size: clamp(1.05rem, 1.48vw, 1.24rem);
  line-height: 1.5;
  color: var(--champagne-bright);
}

.expert-hero .hero-body-copy {
  margin-top: 1rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-secondary);
}

.expert-mandate-quote {
  margin-top: 1.35rem;
  padding: 0.95rem 1.2rem;
  border-left: 3px solid var(--sapphire);
  background: rgba(16, 25, 39, 0.72);
  border-radius: 0 12px 12px 0;
}

.expert-mandate-quote p {
  font-family: var(--font-semibold);
  font-size: 1rem;
  line-height: 1.55;
  color: #ffffff;
}

.expert-mandate-quote span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.84rem;
  color: var(--ink-muted);
}

.expert-film-quote {
  margin-top: 1.1rem;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--champagne-soft);
}

.expert-hero-portrait {
  border-radius: 22px;
  overflow: hidden;
  background: var(--noir-card);
  border: 1px solid rgba(92, 168, 255, 0.32);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.58);
}

.expert-hero-portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 20%;
}

.expert-hero-portrait figcaption {
  padding: 0.9rem 1.15rem 1rem;
  font-size: 0.84rem;
  line-height: 1.48;
  color: var(--ink-secondary);
  background: rgba(11, 17, 27, 0.95);
  border-top: 1px solid rgba(212, 175, 106, 0.18);
}

.expert-hero-portrait figcaption strong {
  color: var(--champagne-bright);
  font-family: var(--font-semibold);
}

body[data-pillar="expert"] .arrow-button {
  border-color: rgba(92, 168, 255, 0.65);
  background: rgba(92, 168, 255, 0.16);
}

body[data-pillar="expert"] .scroll-cta:hover .arrow-button {
  background: var(--sapphire);
  color: #06101d;
}

/* Scene 02: SAF Board & EACT European Mandate */
.saf-mandate-section {
  background:
    radial-gradient(circle at 18% 24%, rgba(92, 168, 255, 0.09), transparent 44%),
    linear-gradient(180deg, #0c1422 0%, #090f19 100%);
  padding-block: clamp(4rem, 7.5vw, 6.2rem);
}

.saf-split-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4.5vw, 3.6rem);
  align-items: start;
}

@media (min-width: 60rem) {
  .saf-split-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.saf-narrative p + p {
  margin-top: 1rem;
}

.saf-narrative p {
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--ink-secondary);
}

.saf-role-cards {
  display: grid;
  gap: 1rem;
  margin-top: 1.65rem;
}

.saf-role-card {
  padding: 1.15rem 1.3rem;
  border-radius: 16px;
  background: rgba(20, 30, 45, 0.84);
  border: 1px solid rgba(92, 168, 255, 0.24);
}

.saf-role-card .role-org {
  font-family: var(--font-semibold);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sapphire-bright);
}

.saf-role-card h3 {
  margin-top: 0.3rem;
  font-family: var(--font-bold);
  font-size: 1.14rem;
  color: #ffffff;
}

.saf-role-card p {
  margin-top: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-secondary);
}

.saf-role-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 46px;
  padding-block: 0.5rem;
  margin-top: 0.45rem;
  font-family: var(--font-semibold);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sapphire-bright);
  transition: color 220ms ease;
}

.saf-role-link:hover {
  color: var(--champagne-bright);
}

.saf-visual-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
}

@media (min-width: 36rem) {
  .saf-visual-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .saf-visual-stack .saf-photo--wide {
    grid-column: 1 / -1;
  }
}

.saf-photo {
  border-radius: 18px;
  overflow: hidden;
  background: var(--noir-card);
  border: 1px solid rgba(212, 175, 106, 0.24);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.48);
}

.saf-photo .lightbox-trigger {
  display: block;
  overflow: hidden;
  min-height: 44px;
  min-width: 44px;
}

.saf-photo img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 500ms var(--ease-cinema);
}

.saf-photo .lightbox-trigger:hover img {
  transform: scale(1.035);
}

.saf-photo figcaption {
  padding: 0.8rem 1rem 0.9rem;
  font-size: 0.84rem;
  line-height: 1.48;
  color: var(--ink-secondary);
}

/* Scene 03: Six Field & Policy Pillars Matrix */
.expert-pillars-section {
  background: linear-gradient(180deg, #090f19 0%, #070b12 100%);
  padding-block: clamp(4rem, 7.5vw, 6.2rem);
  border-top: 1px solid rgba(92, 168, 255, 0.14);
}

.domain-pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 46rem) {
  .domain-pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 68rem) {
  .domain-pillars-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.domain-pillar-card {
  padding: clamp(1.35rem, 2.5vw, 1.8rem);
  border-radius: 18px;
  background: rgba(18, 27, 40, 0.86);
  border: 1px solid rgba(212, 175, 106, 0.20);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  transition: border-color 260ms ease, transform 280ms var(--ease-cinema);
}

.domain-pillar-card:hover {
  border-color: rgba(92, 168, 255, 0.55);
  transform: translateY(-3px);
}

.domain-index {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sapphire-bright);
}

.domain-pillar-card h3 {
  margin-top: 0.45rem;
  font-family: var(--font-bold);
  font-size: 1.22rem;
  line-height: 1.24;
  color: #ffffff;
}

.domain-pillar-card p {
  margin-top: 0.6rem;
  font-size: 0.94rem;
  line-height: 1.64;
  color: var(--ink-secondary);
}

.domain-metric-line {
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-semibold);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--champagne-bright);
}

/* Scene 04: Sunlit Atelier Publications, Journal & Field Dispatches */
.expert-publications {
  background: var(--atelier-sunlit);
  color: var(--atelier-ink);
  padding-block: clamp(4rem, 7.5vw, 6.2rem);
}

body[data-pillar="expert"] .atelier-eyebrow {
  color: var(--atelier-sapphire);
}

body[data-pillar="expert"] .atelier-surface :focus-visible,
body[data-pillar="expert"] .atelier-curtain-group :focus-visible,
body[data-pillar="expert"] .daylight-curtain :focus-visible {
  outline-color: var(--atelier-sapphire);
}

.atelier-section-header {
  max-width: 50rem;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem);
}

.atelier-section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 3.8vw, 3.15rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--atelier-ink);
}

.atelier-section-header p {
  margin-top: 0.85rem;
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--atelier-body);
}

.featured-publications-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: clamp(2.8rem, 5vw, 4rem);
}

@media (min-width: 56rem) {
  .featured-publications-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.featured-pub-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(17, 22, 29, 0.10);
  box-shadow: 0 18px 42px rgba(17, 22, 29, 0.07);
  display: flex;
  flex-direction: column;
}

.featured-pub-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e9e4da;
}

.featured-pub-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.featured-pub-body {
  padding: clamp(1.35rem, 2.6vw, 1.85rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pub-badge {
  font-family: var(--font-semibold);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--atelier-sapphire);
}

.featured-pub-body h3 {
  margin-top: 0.45rem;
  font-family: var(--font-display);
  font-size: clamp(1.32rem, 2vw, 1.65rem);
  line-height: 1.2;
  color: var(--atelier-ink);
}

.featured-pub-body p {
  margin-top: 0.65rem;
  font-size: 0.96rem;
  line-height: 1.66;
  color: var(--atelier-body);
}

.pub-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  min-width: 44px;
  margin-top: auto;
  padding-top: 0.95rem;
  font-family: var(--font-semibold);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--atelier-sapphire);
}

.pub-link:hover {
  color: var(--atelier-crimson);
}

/* Curated 9-Dispatch Editorial Grid */
.dispatches-subhead {
  margin-bottom: 1.5rem;
}

.dispatches-subhead h3 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  color: var(--atelier-ink);
}

.dispatches-subhead p {
  margin-top: 0.35rem;
  font-size: 0.96rem;
  color: var(--atelier-muted);
}

.dispatches-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
}

@media (min-width: 46rem) {
  .dispatches-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 68rem) {
  .dispatches-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dispatch-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(17, 22, 29, 0.09);
  box-shadow: 0 14px 34px rgba(17, 22, 29, 0.06);
  display: flex;
  flex-direction: column;
  transition: transform 280ms var(--ease-cinema), box-shadow 280ms ease;
}

.dispatch-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(17, 22, 29, 0.11);
}

.dispatch-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #ebe6dc;
}

.dispatch-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.dispatch-body {
  padding: 1.2rem 1.3rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dispatch-meta {
  font-family: var(--font-semibold);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--atelier-bronze);
}

.dispatch-body h4 {
  margin: 0.4rem 0 0;
  font-family: var(--font-bold);
  font-size: 1.08rem;
  line-height: 1.28;
  color: var(--atelier-ink);
}

.dispatch-body p {
  margin-top: 0.55rem;
  font-size: 0.91rem;
  line-height: 1.6;
  color: var(--atelier-body);
}

.dispatch-quote-sk {
  margin-top: 0.75rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--atelier-sapphire);
  font-size: 0.84rem;
  font-style: italic;
  line-height: 1.48;
  color: var(--atelier-muted);
}

/* Scene 05: Noir Video Briefing Room */
.expert-videos-section {
  background:
    radial-gradient(circle at 80% 18%, rgba(92, 168, 255, 0.11), transparent 45%),
    linear-gradient(180deg, #0a111d 0%, #070b12 100%);
  padding-block: clamp(4rem, 7.5vw, 6.2rem);
}

.expert-videos-section .noir-section-heading {
  max-width: 48rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Scene 06: Sunlit International Stage & Jury Ledger + Gallery */
.expert-stages-section {
  background: var(--atelier-limestone);
  color: var(--atelier-ink);
  padding-block: clamp(4rem, 7.5vw, 5.8rem);
}

.stage-roster-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-bottom: clamp(2.8rem, 5vw, 4rem);
}

@media (min-width: 52rem) {
  .stage-roster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.stage-roster-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(17, 22, 29, 0.08);
}

.stage-roster-main strong {
  display: block;
  font-family: var(--font-bold);
  font-size: 0.98rem;
  color: var(--atelier-ink);
}

.stage-roster-main span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.86rem;
  line-height: 1.48;
  color: var(--atelier-body);
}

.stage-roster-year {
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--atelier-sapphire);
}

/* ==========================================================================
   14. V9 EXPERT REVIEW UPGRADES — SCROLL-SCRUBBED EXPERT LEDGER, MONOGRAPH
       READER, PLAYLIST VIDEO THEATER, DOMAIN FILTERS & ASPECT-TRUE BENTO
   ========================================================================== */

/* 14A. Balanced CEO Feature Stack & Capital Transparency Plaque (manager.html) */
.ceo-talks-feature {
  align-items: stretch;
}

.ceo-feature-stack {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.transparency-plaque {
  padding: 1.25rem 1.45rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(22, 31, 45, 0.92), rgba(14, 20, 30, 0.95));
  border: 1px solid rgba(212, 175, 106, 0.32);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.7rem;
  flex: 1;
}

.transparency-plaque .tp-eyebrow {
  font-family: var(--font-semibold);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--champagne-bright);
}

.transparency-plaque h3 {
  font-family: var(--font-bold);
  font-size: 1.12rem;
  line-height: 1.28;
  color: #ffffff;
}

.transparency-plaque p {
  font-size: 0.9rem;
  line-height: 1.58;
  color: var(--ink-secondary);
}

.tp-action-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 46px;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  background: rgba(239, 77, 62, 0.18);
  border: 1px solid rgba(255, 140, 128, 0.58);
  font-family: var(--font-semibold);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.tp-action-btn:hover {
  background: var(--coral);
  border-color: var(--coral);
  transform: translateX(2px);
}

/* Video language pill on vertical reel cards */
.vv-lang {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
  padding: 0.2rem 0.52rem;
  border-radius: 999px;
  background: rgba(8, 13, 22, 0.84);
  border: 1px solid rgba(236, 209, 151, 0.35);
  font-family: var(--font-semibold);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--champagne-bright);
}

.vv-lang--en {
  background: rgba(14, 46, 84, 0.9);
  border-color: rgba(140, 196, 255, 0.72);
  color: #ffffff;
}

.vv-lang--reel {
  background: rgba(34, 26, 12, 0.9);
  border-color: rgba(236, 209, 151, 0.72);
  color: var(--champagne-bright);
}

/* 14B. Sunlit Founder Case Briefs Row (manager.html) */
.founder-briefs-wrap {
  margin-top: clamp(2rem, 3.8vw, 2.8rem);
}

.founder-briefs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
}

@media (min-width: 54rem) {
  .founder-briefs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.founder-brief-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 1.25rem 1.35rem;
  border: 1px solid rgba(17, 22, 29, 0.09);
  box-shadow: 0 12px 30px rgba(17, 22, 29, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
  text-align: left;
}

.founder-brief-card .fb-kicker {
  font-family: var(--font-semibold);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--atelier-crimson);
}

.founder-brief-card h3 {
  margin-top: 0.35rem;
  font-family: var(--font-bold);
  font-size: 1.06rem;
  line-height: 1.28;
  color: var(--atelier-ink);
}

.founder-brief-card p {
  margin-top: 0.45rem;
  font-size: 0.89rem;
  line-height: 1.58;
  color: var(--atelier-body);
}

/* 14C. Aspect-True Curated Museum Bento Grid (manager.html & expert.html) */
.museum-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  max-width: 72rem;
  margin-inline: auto;
}

@media (min-width: 22.5rem) {
  .museum-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .museum-bento .bento-wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .museum-bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .museum-bento .bento-portrait {
    grid-column: span 3;
  }

  .museum-bento .bento-wide {
    grid-column: span 6;
  }
}

.museum-bento .exec-photo-card .lightbox-trigger {
  aspect-ratio: 3 / 4;
}

.museum-bento .bento-wide .lightbox-trigger {
  aspect-ratio: 3 / 2;
}

.museum-bento .bento-square .lightbox-trigger {
  aspect-ratio: 1 / 1;
}

.museum-bento .bento-wide .lightbox-trigger img {
  object-position: center 24%;
}

/* Matched top-row height in SAF Governance visual stack (expert.html Beat 02) */
@media (min-width: 36rem) {
  .saf-visual-stack .saf-photo:not(.saf-photo--wide) {
    display: flex;
    flex-direction: column;
  }

  .saf-visual-stack .saf-photo:not(.saf-photo--wide) .lightbox-trigger {
    aspect-ratio: 4 / 4.5;
    background: #0b1422;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .saf-visual-stack .saf-photo:not(.saf-photo--wide) .lightbox-trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 16%;
  }

  .saf-visual-stack .saf-photo--contain .lightbox-trigger img {
    object-fit: contain !important;
    padding: 0.45rem;
  }
}

/* 14D. Scroll-Scrubbed Sticky Split-Stage Policy & Architecture Ledger (expert.html Scene 03) */
.expert-scrub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 60rem) {
  .expert-scrub-grid {
    grid-template-columns: minmax(19.5rem, 0.82fr) minmax(0, 1.18fr);
  }
}

@media (min-width: 60rem) and (min-height: 40rem) {
  html:not(.is-tall) .expert-sticky-console {
    position: sticky;
    top: calc(var(--header-sticky-h, 65px) + var(--horizon-sticky-h, 47px) + 1.4rem);
  }
}

.expert-console-card {
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  border-radius: 20px;
  background:
    radial-gradient(circle at 86% 14%, rgba(92, 168, 255, 0.16), transparent 52%),
    rgba(14, 22, 34, 0.94);
  border: 1px solid rgba(92, 168, 255, 0.34);
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.54);
}

.expert-console-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sapphire-bright);
}

.expert-console-index {
  margin-top: 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.35rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.expert-console-title {
  margin-top: 0.55rem;
  font-family: var(--font-bold);
  font-size: 1.18rem;
  line-height: 1.28;
  color: var(--champagne-bright);
}

.expert-console-meta {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: grid;
  gap: 0.45rem;
}

.expert-console-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.83rem;
}

.expert-console-row span {
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
}

.expert-console-row strong {
  color: #ffffff;
  font-family: var(--font-semibold);
  text-align: right;
}

.expert-console-jumps {
  margin-top: 1.1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.expert-jump-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.7rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-family: var(--font-semibold);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-secondary);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.expert-jump-pill:hover,
.expert-jump-pill.is-active {
  background: rgba(92, 168, 255, 0.18);
  border-color: rgba(140, 196, 255, 0.68);
  color: #ffffff;
}

.expert-pillars-spine-wrap {
  position: relative;
  padding-left: clamp(1.4rem, 3vw, 2.3rem);
}

.expert-spine-track,
.expert-spine-laser {
  position: absolute;
  left: 0.35rem;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 2px;
  border-radius: 2px;
}

.expert-spine-track {
  background: rgba(92, 168, 255, 0.18);
}

.expert-spine-laser {
  background: linear-gradient(180deg, var(--sapphire-bright), var(--champagne-bright));
  transform-origin: top center;
  transform: scaleY(var(--expert-p, 1));
  box-shadow: 0 0 14px rgba(92, 168, 255, 0.7);
}

.expert-spine-orb {
  position: absolute;
  left: calc(0.35rem - 5px);
  top: calc(0.75rem + (100% - 1.5rem) * var(--expert-p, 0));
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sapphire-bright);
  box-shadow: 0 0 16px rgba(92, 168, 255, 0.95);
  pointer-events: none;
}

.domain-pillars-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
}

.domain-pillars-stack .domain-pillar-card {
  position: relative;
  scroll-margin-top: 8.5rem;
}

.domain-pillars-stack .domain-pillar-card.is-active-domain {
  border-color: rgba(140, 196, 255, 0.72);
  background: rgba(22, 34, 52, 0.96);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(92, 168, 255, 0.24);
}

/* 14E. Interactive Domain Filter Bar & Zero-Clip Dispatch Cards (expert.html Scene 04) */
.dispatches-header-bar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dispatch-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 46px;
  min-width: 46px;
  padding: 0.52rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(17, 22, 29, 0.16);
  background: #ffffff;
  font-family: var(--font-semibold);
  font-size: 0.79rem;
  letter-spacing: 0.06em;
  color: var(--atelier-ink);
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.filter-pill:hover {
  border-color: var(--atelier-sapphire);
  color: var(--atelier-sapphire);
}

.filter-pill[aria-pressed="true"] {
  background: var(--atelier-sapphire);
  border-color: var(--atelier-sapphire);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(24, 88, 168, 0.24);
}

.dispatch-filter-status {
  font-size: 0.85rem;
  color: var(--atelier-muted);
}

.dispatch-card[hidden] {
  display: none !important;
}

.dispatch-media--contain {
  background: #ffffff;
  padding: 0.55rem;
}

.dispatch-media--contain img {
  object-fit: contain !important;
  object-position: center !important;
}

.dispatch-media--top img {
  object-position: center 10% !important;
}

.pub-actions-row {
  margin-top: auto;
  padding-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pub-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 46px;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(24, 88, 168, 0.28);
  background: rgba(24, 88, 168, 0.08);
  font-family: var(--font-semibold);
  font-size: 0.77rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--atelier-sapphire);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

body[data-pillar="manager"] .pub-read-btn {
  border-color: rgba(182, 43, 33, 0.28);
  background: rgba(182, 43, 33, 0.08);
  color: var(--atelier-crimson);
}

.pub-read-btn:hover {
  background: var(--atelier-sapphire);
  border-color: var(--atelier-sapphire);
  color: #ffffff;
}

body[data-pillar="manager"] .pub-read-btn:hover {
  background: var(--atelier-crimson);
  border-color: var(--atelier-crimson);
  color: #ffffff;
}

.pub-ext-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 46px;
  min-width: 46px;
  padding: 0.45rem 0.6rem;
  font-family: var(--font-semibold);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--atelier-muted);
}

.pub-ext-link:hover {
  color: var(--atelier-ink);
}

/* 14F. Press & Media Commentary Strip + Cross-Pillar Bridge */
.press-voices-strip {
  margin-bottom: clamp(2.4rem, 4.5vw, 3.4rem);
  padding: 1.25rem 1.5rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(17, 22, 29, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.press-voices-label {
  font-family: var(--font-semibold);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--atelier-sapphire);
}

.press-voices-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.35rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-bold);
  font-size: 0.94rem;
  color: var(--atelier-ink);
}

.press-voices-list li {
  position: relative;
}

.cross-pillar-bridge {
  background:
    radial-gradient(circle at 82% 24%, rgba(92, 168, 255, 0.16), transparent 48%),
    radial-gradient(circle at 16% 75%, rgba(239, 77, 62, 0.12), transparent 48%),
    linear-gradient(135deg, #09101c 0%, #0d1626 100%);
  color: #ffffff;
  padding-block: clamp(2.8rem, 5vw, 3.8rem);
  border-block: 1px solid rgba(212, 175, 106, 0.24);
}

.cross-pillar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.cross-pillar-copy {
  max-width: 44rem;
}

.cross-pillar-copy .noir-eyebrow {
  margin-bottom: 0.4rem;
}

.cross-pillar-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.8vw, 2.3rem);
  line-height: 1.12;
  color: #ffffff;
}

.cross-pillar-copy p {
  margin-top: 0.5rem;
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--ink-secondary);
}

.cross-pillar-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.78rem 1.45rem;
  border-radius: 999px;
  background: rgba(236, 209, 151, 0.14);
  border: 1.5px solid var(--champagne-bright);
  font-family: var(--font-semibold);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  transition: background-color 220ms ease, color 220ms ease, transform 220ms ease;
}

.cross-pillar-cta:hover {
  background: var(--champagne-bright);
  color: #080d15;
  transform: translateX(3px);
}

/* 14G. Upgraded Playlist-Aware Cinema Reel Theater (<dialog id="video-modal">) */
.video-modal-topbar {
  width: 100%;
  max-width: 44rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}

.video-modal-shell.is-portrait .video-modal-topbar {
  max-width: 24rem;
}

.video-modal-status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.video-modal-counter {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--champagne-bright);
}

.video-modal-lang {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  font-family: var(--font-semibold);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
}

.video-modal-controls {
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

.video-modal-controls[hidden] {
  display: none !important;
}

.video-modal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(236, 209, 151, 0.42);
  background: rgba(15, 22, 34, 0.88);
  font-family: var(--font-semibold);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.video-modal-nav:hover {
  background: var(--champagne-bright);
  border-color: var(--champagne-bright);
  color: #080c12;
}

/* 14H. On-Page Bilingual Monograph Dossier Reader (<dialog id="article-modal">) */
.article-modal {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--atelier-ink);
  max-width: min(94vw, 52rem);
  max-height: 90vh;
  max-height: 90dvh;
  width: 100%;
  margin: auto;
  overflow: visible;
}

.article-modal::backdrop {
  background: rgba(5, 9, 16, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.article-modal-sheet {
  background: #faf8f3;
  color: var(--atelier-ink);
  border-radius: 22px;
  border: 1px solid rgba(212, 175, 106, 0.42);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65);
  max-height: 88vh;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.article-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.35rem;
  background: #f2efe7;
  border-bottom: 1px solid rgba(17, 22, 29, 0.09);
}

.am-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.am-kicker {
  font-family: var(--font-semibold);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--atelier-sapphire);
}

.am-counter {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--atelier-muted);
}

.article-modal-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(17, 22, 29, 0.16);
  background: #ffffff;
  color: var(--atelier-ink);
  font-size: 1.45rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.article-modal-close:hover {
  background: var(--atelier-ink);
  color: #ffffff;
}

.article-modal-scroll {
  padding: clamp(1.35rem, 3vw, 2.2rem);
  overflow-y: auto;
}

.am-figure {
  margin: 0 0 1.45rem;
  border-radius: 14px;
  overflow: hidden;
  background: #efeae0;
  border: 1px solid rgba(17, 22, 29, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.am-figure[hidden] {
  display: none !important;
}

.am-figure img {
  max-height: 22rem;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.am-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.7vw, 2.15rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--atelier-ink);
}

.am-metrics-strip {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.am-metrics-strip[hidden] {
  display: none !important;
}

.am-metric-chip {
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: #ece7dc;
  font-family: var(--font-semibold);
  font-size: 0.78rem;
  color: var(--atelier-ink);
}

.am-body {
  margin-top: 1.15rem;
  display: grid;
  gap: 0.9rem;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--atelier-body);
}

.am-quote-sk {
  margin-top: 1.35rem;
  padding: 0.95rem 1.15rem;
  border-left: 3px solid var(--atelier-sapphire);
  background: #f1ede3;
  border-radius: 0 12px 12px 0;
  font-size: 0.94rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--atelier-ink);
}

.am-quote-sk[hidden] {
  display: none !important;
}

.article-modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.35rem;
  background: #f2efe7;
  border-top: 1px solid rgba(17, 22, 29, 0.09);
}

.am-nav-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.am-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(17, 22, 29, 0.18);
  background: #ffffff;
  font-family: var(--font-semibold);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--atelier-ink);
  cursor: pointer;
}

.am-nav-btn:hover {
  background: var(--atelier-ink);
  color: #ffffff;
}

.am-source-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.45rem 0.85rem;
  font-family: var(--font-semibold);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--atelier-sapphire);
}

.am-source-link:hover {
  color: var(--atelier-crimson);
}

/* 14I. Ultra-Narrow Handset Typography & Card Measure Ergonomics (320px–416px) */
@media (max-width: 26rem) {
  .vv-body {
    padding: 0.72rem 0.72rem 0.85rem;
  }

  .vv-body p {
    font-size: 0.78rem;
    line-height: 1.44;
  }

  .venture-timeline-wrap {
    padding-left: 1.3rem;
  }

  .timeline-spine-track,
  .timeline-spine-laser {
    left: 0.32rem;
  }

  .timeline-spine-orb {
    left: calc(0.32rem - 5px);
  }

  .node-marker {
    left: calc(-1.3rem + 0.32rem - 6px);
  }

  .node-card {
    padding: 0.95rem 1rem;
  }

  .node-card p {
    font-size: 0.88rem;
    line-height: 1.58;
  }

  .journey-portrait-body {
    padding: 1.1rem 1.05rem 1.25rem;
  }

  .journey-portrait-body p {
    font-size: 0.88rem;
  }

  .expert-pillars-spine-wrap {
    padding-left: 0.9rem;
  }

  .expert-spine-track,
  .expert-spine-laser {
    left: 0.18rem;
  }

  .expert-spine-orb {
    left: calc(0.18rem - 5px);
  }

  .domain-pillar-card {
    padding: 0.8rem 0.78rem;
  }

  .domain-pillar-card p {
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .saf-role-card {
    padding: 0.95rem 1rem;
  }

  .saf-role-card p {
    font-size: 0.86rem;
  }

  .dispatch-body {
    padding: 1rem 1.05rem 1.1rem;
  }

  .dispatch-quote-sk {
    font-size: 0.81rem;
  }

  .mother-contact-card {
    padding: 1.4rem 1.15rem;
  }

  .mother-contact-card .contact-lead,
  .daylight-curtain .contact-lead {
    font-size: 0.92rem;
  }
}

/* Complete Reduced-Motion Accessibility Reset */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .scrolly-portal-track,
  .scrolly-pillars-track,
  .scrolly-voyage-track {
    height: auto !important;
  }

  .scrolly-portal-stage,
  .scrolly-pillars-stage,
  .scrolly-voyage-stage {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .scrolly-portal-stage .index-hero,
  .scrolly-portal-stage .portal-bio-layer {
    position: relative !important;
    inset: auto !important;
    clip-path: none !important;
    pointer-events: auto !important;
  }

  .portal-diagonal-rim,
  .triptych-scrub-bar,
  .voyage-scrub-footer,
  .hero-scroll-cue {
    display: none !important;
  }

  [data-reveal],
  .word-token {
    opacity: 1 !important;
    transform: none !important;
  }

  [data-aperture] {
    clip-path: none !important;
  }

  [data-parallax-y],
  .chapter-recede-inner,
  .child-profile .child-image,
  .filmstrip-track,
  .portrait-polaroid-float,
  .scrolly-portal-stage .portal-bio-layer .container,
  .hero-copy-zoom,
  .hero-bracket {
    transform: none !important;
    opacity: 1 !important;
  }

  .filmstrip-viewport {
    overflow-x: auto !important;
  }

  .pillar-card .portal-preview {
    grid-template-rows: 1fr !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ==========================================================================
   15. V13 PORTRAIT-MOBILE ARCHITECTURE — SCOPED STRICTLY TO PORTRAIT HANDSETS
       Zero regression on Desktop (>= 54rem) & Mobile Landscape (orientation: landscape)
   ========================================================================== */

/* Inert Global Defaults for Additive Portrait Helpers & Progressive Modal Hygiene */
html.is-modal-open,
html.is-modal-open body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.article-modal-scroll {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.article-modal-close {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
}

.v13-bio-more {
  display: inline;
}

.dispatch-expand-wrap,
.video-modal-dismiss,
.mobile-live-microbar,
.mobile-rail-bar,
.v13-story-btn,
.v13-acc-btn,
.v13-acc-chevron,
.v13-brief-thumb,
.v13-mgr-eyebrow {
  display: none;
}

.v13-brief-thumb[hidden] {
  display: none !important;
}

.polaroid-archive-rail {
  display: block;
}

@media (max-width: 53.99rem) and (orientation: portrait) {
  :root {
    --mobile-bleed: clamp(1rem, 3.8vw, 2.5rem);
    --header-sticky-h: 58px;
  }

  /* 15A. Compositor & GPU VRAM Hygiene + Sticky-Safe Ancestor Reset */
  .chapter-recede-inner {
    transform: none !important;
    opacity: 1 !important;
    will-change: auto !important;
  }

  html.js-scrolly [data-aperture] {
    clip-path: none !important;
    will-change: auto !important;
  }

  html.js-scrolly [data-parallax-y],
  html.js-scrolly.js-motion [data-reveal].is-visible[data-parallax-y],
  .portrait-polaroid-float,
  .index-hero .hero-bg,
  .scroll-progress-bar,
  .timeline-spine-laser,
  .expert-spine-laser,
  .child-profile .child-image {
    will-change: auto !important;
  }

  /* Restrict live backdrop-filter on portrait strictly to .site-header and .mobile-live-microbar */
  .captain-video .video-text,
  .mother-contact-card,
  .btn-glass,
  dialog.lightbox::backdrop,
  dialog.video-modal::backdrop,
  .article-modal::backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .captain-video .video-text {
    background: rgba(12, 19, 30, 0.96);
  }

  .mother-contact-card {
    background: rgba(14, 11, 9, 0.92);
  }

  .btn-glass {
    background: rgba(18, 22, 30, 0.78);
  }

  /* V13 Progressive Story Disclosures & Tactile First-Person Pills */
  html.is-v13-ready [data-v13-collapse]:not(.is-v13-open) {
    display: none !important;
  }

  html.is-v13-ready span.v13-bio-more.is-v13-open {
    display: inline !important;
  }

  .v13-story-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-height: 48px;
    min-width: 48px;
    padding: 0.58rem 1.08rem;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 106, 0.50);
    background: rgba(212, 175, 106, 0.12);
    color: var(--champagne-bright);
    font-family: var(--font-semibold);
    font-size: min(clamp(0.72rem, 3.2vw, 0.8rem), 14px);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.15;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  }

  .v13-story-btn[aria-expanded="true"] {
    background: rgba(212, 175, 106, 0.22);
    border-color: rgba(236, 209, 151, 0.76);
  }

  body[data-pillar="expert"] .expert-hero .v13-story-btn,
  body[data-pillar="expert"] .saf-narrative .v13-story-btn {
    border-color: rgba(92, 168, 255, 0.54);
    background: rgba(92, 168, 255, 0.14);
    color: #edf5ff;
  }

  body[data-pillar="expert"] .expert-hero .v13-story-btn[aria-expanded="true"],
  body[data-pillar="expert"] .saf-narrative .v13-story-btn[aria-expanded="true"] {
    background: rgba(92, 168, 255, 0.24);
    border-color: rgba(132, 192, 255, 0.78);
  }

  /* V13 Single-Open Accordion Header Buttons (48x48 Tactile Targets) */
  .v13-acc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 106, 0.36);
    background: rgba(255, 255, 255, 0.05);
    color: var(--champagne-bright);
    font-family: var(--font-semibold);
    font-size: 1.22rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  }

  body[data-pillar="expert"] .v13-acc-btn {
    border-color: rgba(92, 168, 255, 0.40);
    color: var(--sapphire-bright);
  }

  .v13-acc-btn[aria-expanded="true"] {
    background: rgba(212, 175, 106, 0.18);
    border-color: rgba(236, 209, 151, 0.68);
    color: #ffffff;
  }

  body[data-pillar="expert"] .v13-acc-btn[aria-expanded="true"] {
    background: rgba(92, 168, 255, 0.22);
    border-color: rgba(132, 192, 255, 0.75);
    color: #ffffff;
  }

  /* 15B. Unified Condensing 2-Deck Segmented Glass Masthead */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 160;
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(8, 12, 18, 0.92);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    border-bottom: 1px solid rgba(212, 175, 106, 0.24);
    transition:
      transform 260ms var(--ease-cinema),
      background-color 240ms ease,
      border-color 240ms ease;
  }

  body:not([data-pillar="home"]) {
    padding-top: calc(env(safe-area-inset-top, 0px) + 102px);
  }

  .site-header .container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding-inline: 16px;
    padding-top: 0;
    padding-bottom: 5px;
    min-height: 0;
  }

  .site-header .logo,
  body[data-pillar="captain"] .site-header .logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    height: 45px;
    min-height: 45px;
    min-width: 48px;
    padding-inline: 8px;
    font-size: min(max(15.5px, 0.98rem), 4.8vw);
    letter-spacing: 0.02em;
    transition: opacity 180ms ease, color 220ms ease;
  }

  .site-header nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 2px;
    min-height: 52px;
    border-radius: 14px;
    background: rgba(10, 15, 23, 0.78);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 106, 0.24);
  }

  .site-header nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 0;
    width: 100%;
    padding-inline: 2px;
    border-radius: 11px;
    font-family: var(--font-semibold);
    font-size: clamp(11.4px, 0.71rem, 13px);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(235, 240, 248, 0.88);
    overflow: hidden;
    text-overflow: clip;
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
  }

  .site-header nav a::after {
    display: none;
  }

  .site-header nav a[aria-current="page"] {
    background: rgba(255, 255, 255, 0.11);
    color: #ffffff;
    box-shadow:
      inset 0 0 0 1.25px var(--pillar-accent),
      0 4px 12px rgba(0, 0, 0, 0.30);
  }

  /* index.html Fold 1 (scrollY < 80px): Sheer Pill Bar Floating in Top Blurred Canopy */
  .site-header--home.is-home-top {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
    transform: none;
  }

  .site-header--home.is-home-top .container {
    padding-top: 6px;
    padding-bottom: 4px;
  }

  .site-header--home.is-home-top .logo {
    height: 0;
    min-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
  }

  .site-header--home.is-home-top nav {
    background: rgba(8, 12, 19, 0.66);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow:
      inset 0 0 0 1px rgba(236, 209, 151, 0.30),
      0 10px 26px rgba(0, 0, 0, 0.38);
  }

  .index-hero .hero-picture {
    top: env(safe-area-inset-top, 0px);
    height: calc(100% - env(safe-area-inset-top, 0px));
  }

  /* Condensed Scroll State: Tucks 45px Deck 1 Off-Screen, Keeps 58px Deck 2 Pinned */
  .site-header.is-condensed:not(.is-home-top) {
    transform: translateY(-45px);
  }

  .site-header.is-condensed:not(.is-home-top) .logo {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* Compact Short-Portrait Handset Guard (iPhone SE 375x560 / <= 41rem) */
  @media (max-height: 41rem) {
    :root {
      --header-sticky-h: 55px;
    }

    body:not([data-pillar="home"]) {
      padding-top: calc(env(safe-area-inset-top, 0px) + 99px);
    }

    .site-header nav {
      min-height: 49px;
      gap: 6px;
    }

    .site-header nav a {
      min-height: 45px;
    }

    .site-header--home.is-home-top .container {
      padding-top: 4px;
      padding-bottom: 4px;
    }

    .index-hero .hero-bg {
      object-position: center 12%;
    }

    .index-hero .container {
      padding-bottom: 0.7rem;
    }

    .hero-lockup {
      padding: 0.48rem 0.85rem;
    }

    .index-hero h1 {
      font-size: clamp(1.65rem, 7.2vw, 2rem);
    }

    .index-hero p {
      margin-top: 0.25rem;
      font-size: 0.84rem;
      line-height: 1.34;
    }
  }

  /* 15C. index.html Magazine Profile Lead, Two-Zone Chiaroscuro Chapter Cards & Asymmetric Contact */
  .index-bio {
    padding-block: 2rem 2.25rem;
  }

  .index-bio .container {
    gap: 1.1rem;
  }

  .portrait-polaroid-float {
    max-width: min(46vw, 11.25rem);
    border-radius: 1.35rem;
    overflow: hidden;
    transform: none !important;
  }

  .index-bio .bio-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .index-bio .bio-text h2 {
    font-size: clamp(1.78rem, 6.8vw, 2.2rem);
    margin-bottom: 0.5rem;
  }

  .index-bio .bio-text > p:not(.atelier-eyebrow) {
    width: 100%;
    font-size: 0.95rem;
    line-height: 1.58;
  }

  .index-bio .bio-text > p:not(.atelier-eyebrow) + p {
    margin-top: 0.7rem;
  }

  .index-bio .bio-text .bio-quote {
    padding: 0.65rem 0.88rem;
    border-left: 3px solid #b68434;
    background: rgba(182, 132, 52, 0.08);
    border-radius: 0 10px 10px 0;
    font-size: 0.9rem;
    line-height: 1.48;
  }

  .index-bio .v13-story-btn {
    margin-top: 0.8rem;
    border-color: rgba(154, 110, 42, 0.46);
    background: rgba(180, 134, 58, 0.11);
    color: #5b3d12;
  }

  .index-bio .v13-story-btn[aria-expanded="true"] {
    background: rgba(180, 134, 58, 0.20);
    border-color: rgba(154, 110, 42, 0.72);
  }

  .triptych-scrub-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + var(--header-sticky-h, 58px));
    z-index: 140;
    min-height: 36px;
    padding: 0.35rem 16px;
    background: rgba(7, 10, 15, 0.95);
    border-bottom: 1px solid rgba(212, 175, 106, 0.22);
    transition: top 260ms var(--ease-cinema);
  }

  .triptych-step {
    display: none;
    font-family: var(--font-semibold);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--champagne-bright);
    white-space: nowrap;
  }

  .triptych-step.is-current {
    display: inline-flex;
    align-items: center;
  }

  .triptych-progress-line {
    flex: 1;
    height: 3px;
    background: rgba(212, 175, 106, 0.20);
    border-radius: 999px;
    overflow: hidden;
  }

  .triptych-progress-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--coral), var(--sapphire), var(--seafoam), var(--amber));
    transform-origin: 0 50%;
    transform: scaleX(var(--triptych-p, 0.25));
  }

  .pillar-cards {
    gap: 0.9rem;
    padding: 0.9rem var(--mobile-bleed) 2rem;
  }

  .pillar-card {
    min-height: 22.8rem;
    background: #070a0f;
    border-color: rgba(212, 175, 106, 0.22);
  }

  .pillar-card.is-featured {
    border-color: rgba(236, 209, 151, 0.62);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.58);
  }

  .pillar-card--manager.is-featured { border-color: rgba(239, 77, 62, 0.74); }
  .pillar-card--expert.is-featured  { border-color: rgba(92, 168, 255, 0.74); }
  .pillar-card--captain.is-featured { border-color: rgba(0, 255, 156, 0.64); }
  .pillar-card--mother.is-featured  { border-color: rgba(255, 140, 26, 0.68); }

  .pillar-card img {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 60%;
    object-fit: cover;
  }

  .pillar-card--manager img { object-position: 36% 14%; }
  .pillar-card--expert img  { object-position: 50% 16%; }
  .pillar-card--captain img { object-position: 50% 20%; }
  .pillar-card--mother img  { object-position: 50% 26%; }

  .pillar-card::before {
    background: radial-gradient(
      circle at 92% 10%,
      rgba(7, 10, 15, 0.76) 0%,
      rgba(7, 10, 15, 0.36) 22%,
      transparent 46%
    );
  }

  .pillar-card::after,
  .pillar-card--expert::after {
    background: linear-gradient(
      180deg,
      rgba(7, 10, 15, 0.01) 0%,
      rgba(7, 10, 15, 0.06) 38%,
      rgba(7, 10, 15, 0.88) 54%,
      #070a0f 60%,
      #070a0f 100%
    );
  }

  .pillar-watermark {
    top: 0.75rem;
    right: 0.95rem;
    font-size: 2.1rem;
    color: rgba(255, 255, 255, 0.56);
  }

  .pillar-card.is-featured .pillar-watermark {
    color: var(--champagne-bright);
  }

  .pillar-card .card-content {
    position: relative;
    z-index: 1;
    padding: 11.4rem 1.15rem 1.15rem;
  }

  .pillar-card h2 {
    font-size: clamp(1.6rem, 6.2vw, 1.95rem);
  }

  .portal-preview {
    margin-top: 0.38rem;
  }

  .portal-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.88rem;
    line-height: 1.46;
  }

  .portal-enter {
    min-height: 48px;
    margin-top: 0.65rem;
    padding: 0.55rem 1.08rem;
  }

  /* Asymmetric Full-Posture foto2.png Contact Curtain (Subgrid keeps .contact-info[data-reveal] intact!) */
  .daylight-curtain {
    padding-top: 2.1rem;
    padding-bottom: 0;
  }

  .daylight-curtain .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(108px, 34vw, 148px);
    grid-template-rows: auto auto auto minmax(224px, auto);
    column-gap: 0.65rem;
    row-gap: 0.38rem;
    align-items: stretch;
  }

  .daylight-curtain .contact-info {
    grid-column: 1 / -1;
    grid-row: 1 / 5;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    padding-bottom: 0;
    margin: 0;
  }

  .daylight-curtain .contact-info .atelier-eyebrow {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
  }

  .daylight-curtain .contact-info h2 {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    font-size: clamp(1.75rem, 6.8vw, 2.2rem);
  }

  .daylight-curtain .contact-info .contact-lead {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: none;
    margin-top: 0.2rem;
    margin-bottom: 0.35rem;
    font-size: clamp(0.84rem, 3.85vw, 0.93rem);
    line-height: 1.5;
  }

  .daylight-curtain .contact-info .contact-actions {
    grid-column: 1;
    grid-row: 4;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 0;
    padding-bottom: 1.15rem;
    min-width: 0;
  }

  .daylight-curtain .contact-actions a {
    width: 100%;
    min-height: 48px;
    min-width: 48px;
    justify-content: center;
    padding: 0.62rem 0.6rem;
    gap: 0.4rem;
    font-size: min(clamp(0.74rem, 3.35vw, 0.88rem), 14.5px);
    white-space: nowrap;
  }

  .daylight-curtain .contact-image {
    grid-column: 2;
    grid-row: 4;
    align-self: end;
    justify-self: center;
    width: 100%;
    z-index: 2;
    pointer-events: none;
  }

  .daylight-curtain .contact-studio-figure {
    width: 100%;
    max-width: none;
    height: clamp(224px, 36svh, 288px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
    transform: none !important;
    filter: none;
  }

  .daylight-curtain .contact-studio-figure img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 12px 20px rgba(24, 18, 12, 0.14));
  }

  /* 15D. manager.html & expert.html V13 Fold-1 Personal-Brand Stages */

  /* Featherlight Sheer 2x2 Proof Pills (Shared across Manager & Expert) */
  .executive-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
  }

  .ledger-item {
    padding: 0.44rem 0.56rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(212, 175, 106, 0.22);
    box-shadow: none;
  }

  body[data-pillar="expert"] .ledger-item {
    border-color: rgba(92, 168, 255, 0.26);
    background: rgba(92, 168, 255, 0.06);
  }

  .ledger-item dt {
    font-size: min(clamp(0.54rem, 2.15vw, 0.64rem), 10.6px);
    letter-spacing: 0.05em;
    line-height: 1.2;
    color: rgba(226, 233, 244, 0.84);
  }

  .ledger-item dd {
    margin-top: 0.14rem;
    font-size: min(clamp(1.04rem, 4.5vw, 1.32rem), 21px);
    line-height: 1.05;
  }

  /* manager.html Fold 1: Asymmetric Full-Posture Uncropped foto1.png Stage */
  .manager-bio-1 {
    padding-block: 0.7rem 1.45rem;
  }

  .manager-bio-1 .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(96px, 28.5vw, 124px);
    column-gap: 0.65rem;
    row-gap: 0.46rem;
    align-items: start;
  }

  .manager-bio-1 .bio-text {
    display: contents;
  }

  .manager-bio-1 .v13-mgr-eyebrow {
    display: block;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: min(0.64rem, 11.2px);
    letter-spacing: 0.11em;
  }

  .manager-bio-1 .bio-text h1 {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    min-width: 0;
    font-size: min(clamp(1.15rem, 5.1vw, 1.46rem), calc((100vw - 150px) / 9.35));
    line-height: 1.08;
    letter-spacing: -0.02em;
  }

  .manager-bio-1 .bio-text .executive-ledger {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    margin: 0.12rem 0 0;
    gap: 0.36rem;
  }

  .manager-bio-1 .bio-text .v13-story-btn {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
    align-self: end;
    margin-top: 0.12rem;
    border-color: rgba(212, 175, 106, 0.52);
    background: linear-gradient(135deg, rgba(212, 175, 106, 0.15), rgba(16, 185, 129, 0.10));
  }

  .manager-bio-1 .bio-text .scroll-cta,
  .expert-hero .bio-text .scroll-cta {
    display: none;
  }

  .manager-bio-1 .bio-aside {
    position: relative;
    grid-column: 2;
    grid-row: 1 / 5;
    align-self: end;
    width: 100%;
    height: clamp(304px, 46svh, 392px);
    padding-bottom: 4px;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
    z-index: 1;
  }

  .manager-bio-1 .bio-aside::before {
    content: '';
    position: absolute;
    inset: 5% -16% 8% -16%;
    background: radial-gradient(
      ellipse at 50% 42%,
      rgba(212, 175, 106, 0.22) 0%,
      rgba(26, 148, 138, 0.14) 44%,
      transparent 72%
    );
    pointer-events: none;
    z-index: -1;
  }

  .manager-bio-1 .bio-aside::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.68) 0%, transparent 74%);
    pointer-events: none;
    z-index: -1;
  }

  .manager-bio-1 .bio-aside img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.56));
  }

  .manager-bio-1 .bio-text .bio-subtitle {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: 0.3rem;
    font-size: 0.91rem;
    line-height: 1.42;
  }

  .manager-bio-1 .bio-text [data-v13-collapse="mgr-lead"] {
    grid-column: 1 / -1;
    margin-top: 0.52rem;
    font-size: 0.92rem;
    line-height: 1.58;
  }

  .manager-bio-1 .bio-text .ledger-credentials-note {
    width: 100%;
    padding-top: 0.65rem;
    font-size: 0.82rem;
  }

  /* expert.html Fold 1: Photo-First Luxembourg EACT Portrait Stage */
  .expert-hero {
    padding-block: 0.65rem 1.45rem;
  }

  .expert-hero .container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.48rem;
  }

  .expert-hero .bio-text {
    display: contents;
  }

  .expert-hero .bio-text .noir-eyebrow {
    order: 1;
    margin: 0;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
  }

  .expert-hero-portrait {
    order: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: clamp(10.5rem, 24.2svh, 12.6rem);
    margin: 0;
    border-radius: 16px;
    border: 1px solid rgba(198, 168, 106, 0.24);
    overflow: hidden;
    background: #080d16;
    transform: none !important;
  }

  .expert-hero-portrait img {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 60%;
  }

  .expert-hero-portrait figcaption {
    position: static;
    flex: 0 0 auto;
    padding: 0.34rem 0.72rem;
    font-size: 0.67rem;
    line-height: 1.22;
    color: rgba(241, 245, 251, 0.94);
    border-top: 1px solid rgba(198, 168, 106, 0.16);
    background: rgba(7, 11, 19, 0.96);
  }

  .expert-hero .bio-text h1 {
    order: 3;
    margin: 0;
    font-size: clamp(1.38rem, 5.9vw, 1.76rem);
    line-height: 1.07;
  }

  .expert-hero .bio-text .bio-subtitle {
    order: 4;
    margin: 0;
    font-size: 0.89rem;
    line-height: 1.38;
  }

  .expert-hero .bio-text .executive-ledger {
    order: 5;
    width: 100%;
    margin: 0.08rem 0 0;
  }

  .expert-hero .bio-text .expert-mandate-quote {
    order: 6;
    width: 100%;
    margin: 0.14rem 0 0;
    padding: 0.6rem 0.82rem;
  }

  .expert-hero .bio-text .expert-mandate-quote p {
    font-size: 0.86rem;
    line-height: 1.42;
  }

  .expert-hero .bio-text .expert-mandate-quote span {
    margin-top: 0.22rem;
    font-size: 0.74rem;
  }

  .expert-hero .bio-text .v13-story-btn {
    order: 7;
    align-self: flex-start;
    margin-top: 0.14rem;
  }

  .expert-hero .bio-text .hero-body-copy {
    order: 8;
    margin: 0.35rem 0 0;
    font-size: 0.92rem;
    line-height: 1.58;
  }

  .expert-hero .bio-text .expert-film-quote {
    order: 9;
    margin: 0.25rem 0 0;
    font-size: 0.86rem;
  }

  @media (max-height: 41rem) {
    .manager-bio-1,
    .expert-hero {
      padding-top: 0.5rem;
    }

    .manager-bio-1 .bio-aside {
      height: 272px;
    }

    .expert-hero-portrait {
      height: 8.6rem;
    }

    .expert-hero .bio-text h1 {
      font-size: clamp(1.26rem, 5.4vw, 1.52rem);
    }

    .manager-bio-1 .bio-text .bio-subtitle,
    .expert-hero .bio-text .bio-subtitle {
      font-size: 0.84rem;
      line-height: 1.32;
    }

    .ledger-item {
      padding: 0.36rem 0.48rem;
    }
  }

  /* Compact Vertical Sections, Accordions & Sticky Live Microbars (manager.html & expert.html) */
  .manager-media-stage,
  .manager-journey,
  .manager-companies,
  .manager-gallery,
  .saf-mandate-section,
  .expert-pillars-section,
  .expert-publications,
  .expert-videos-section,
  .expert-stages-section,
  .cross-pillar-bridge {
    padding-block: 1.95rem;
  }

  .media-stage-header,
  .timeline-header,
  .atelier-section-header,
  .expert-videos-section .noir-section-heading {
    margin-bottom: 1.1rem;
  }

  .timeline-header .v13-story-btn {
    margin-top: 0.65rem;
  }

  .timeline-header .timeline-intro {
    margin-top: 0.65rem;
    font-size: 0.92rem;
    line-height: 1.58;
  }

  .ceo-talks-feature {
    gap: 1rem;
    margin-bottom: 1.55rem;
  }

  .podcast-cinema-body {
    padding: 0.92rem 1rem 1.05rem;
  }

  .podcast-cinema-body p,
  .transparency-plaque p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .journey-split-grid,
  .expert-scrub-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  /* Compact Magazine Header Card for portrait1.png in #journey */
  .journey-portrait-card {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    column-gap: 0.8rem;
    row-gap: 0.55rem;
    align-items: center;
    padding: 0.85rem 0.95rem;
  }

  .journey-portrait-media {
    grid-column: 1;
    grid-row: 1;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(212, 175, 106, 0.45);
  }

  .journey-portrait-media img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center 14%;
  }

  .journey-portrait-body {
    display: contents;
  }

  .journey-signature {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  .journey-portrait-card p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.86rem;
    line-height: 1.48;
  }

  .journey-year-readout {
    display: none;
  }

  /* Sticky Live Microbar inside Venture Timeline & Expert Six Pillars */
  .mobile-live-microbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + var(--header-sticky-h, 58px) - 1px);
    z-index: 35;
    margin-inline: -2px;
    margin-bottom: 0.75rem;
    padding: 0.46rem 0.8rem;
    border-radius: 0 0 14px 14px;
    background: rgba(9, 14, 22, 0.96);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(212, 175, 106, 0.34);
    border-top-color: rgba(212, 175, 106, 0.14);
    box-shadow:
      0 -8px 0 6px #080c12,
      -26px -8px 0 6px #080c12,
      0 10px 24px rgba(0, 0, 0, 0.44);
    transition: top 260ms var(--ease-cinema);
  }

  body[data-pillar="expert"] .mobile-live-microbar {
    border-color: rgba(92, 168, 255, 0.42);
    border-top-color: rgba(92, 168, 255, 0.16);
    box-shadow:
      0 -8px 0 6px #070c14,
      -26px -8px 0 6px #070c14,
      0 10px 24px rgba(0, 0, 0, 0.44);
  }

  .mobile-live-microbar .mlm-index {
    flex-shrink: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--champagne-bright);
    font-variant-numeric: tabular-nums;
  }

  body[data-pillar="expert"] .mobile-live-microbar .mlm-index {
    color: var(--sapphire-bright);
  }

  .mobile-live-microbar .mlm-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-semibold);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: #ffffff;
  }

  /* Single-Open 6-Era Interactive Accordion (.venture-timeline) */
  .venture-timeline {
    gap: 0.6rem;
  }

  .node-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    column-gap: 0.55rem;
    row-gap: 0.16rem;
    align-items: center;
    padding: 0.75rem 0.88rem;
    cursor: pointer;
  }

  .node-card .node-era {
    grid-column: 1;
    grid-row: 1;
  }

  .node-card h3 {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
    font-size: 0.98rem;
    line-height: 1.26;
  }

  .node-card .v13-acc-btn {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }

  .node-card p {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0.45rem;
    font-size: 0.89rem;
    line-height: 1.54;
  }

  html.is-v13-ready .timeline-node:not(.is-v13-acc-open) .node-card p {
    display: none;
  }

  .delegation-frame {
    margin-top: 1.25rem;
    border-radius: 16px;
    overflow: hidden;
  }

  /* Single-Open 4-Principle Accordion (.principles-list) */
  .principles-list {
    gap: 0.58rem;
  }

  .principle-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    column-gap: 0.55rem;
    align-items: center;
    padding: 0.72rem 0.9rem;
    cursor: pointer;
  }

  .principle-row h3 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.28;
  }

  .principle-row .v13-acc-btn {
    grid-column: 2;
    grid-row: 1;
  }

  .principle-row p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0.42rem;
    font-size: 0.89rem;
    line-height: 1.54;
  }

  html.is-v13-ready .principle-row:not(.is-v13-acc-open) p {
    display: none;
  }

  /* 3-Column Compact Company Plaques & Photo-Merged Founder Case Briefs */
  .companies-heading {
    margin-bottom: 1.05rem;
    font-size: clamp(1.36rem, 5.4vw, 1.78rem);
  }

  .manager-companies .logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .company-card {
    min-height: 5.4rem;
    min-width: 0;
    padding: 0.6rem 0.42rem 0.56rem;
    border-radius: 12px;
    justify-content: space-between;
  }

  .company-card .logo-plaque {
    height: 2.1rem;
  }

  .company-card .logo-plaque img {
    max-height: 1.65rem;
    max-width: 100%;
  }

  .company-card .company-role {
    margin-top: 0.32rem;
    font-size: clamp(0.55rem, 2.2vw, 0.66rem);
    letter-spacing: 0.03em;
    line-height: 1.25;
    text-align: center;
  }

  .recognition-showcase {
    margin-top: 1.05rem;
    gap: 0.7rem;
  }

  .recognition-card {
    padding: 0.74rem 0.9rem;
  }

  .founder-briefs-wrap {
    margin-top: 1.15rem;
  }

  .founder-briefs-grid {
    gap: 0.75rem;
  }

  .founder-brief-card {
    padding: 0.9rem 0.98rem;
    gap: 0.58rem;
  }

  .founder-brief-card > div:first-child {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.2rem;
    align-items: center;
  }

  .v13-brief-thumb {
    display: block;
    grid-column: 1;
    grid-row: 1 / 3;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(17, 22, 29, 0.14);
    background: #e9e4da;
    box-shadow: 0 6px 14px rgba(17, 22, 29, 0.08);
  }

  .v13-brief-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
  }

  .founder-brief-card .fb-kicker {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  .founder-brief-card h3 {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 0;
    font-size: 1.02rem;
    line-height: 1.24;
  }

  .founder-brief-card p {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0.45rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.89rem;
    line-height: 1.5;
  }

  /* expert.html #exp-saf Visuals-First Rail + Single-Open 3-Role Accordion */
  .saf-split-layout {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }

  .saf-split-layout > .saf-visual-stack {
    order: -2;
  }

  .saf-split-layout > .mobile-rail-bar {
    order: -1;
    margin-bottom: 0.3rem;
  }

  .saf-narrative > .v13-story-btn {
    margin-top: 0.65rem;
  }

  .saf-role-cards {
    gap: 0.6rem;
    margin-top: 1rem;
  }

  .saf-role-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    column-gap: 0.55rem;
    row-gap: 0.16rem;
    align-items: center;
    padding: 0.78rem 0.9rem;
    cursor: pointer;
  }

  .saf-role-card .role-org {
    grid-column: 1;
    grid-row: 1;
  }

  .saf-role-card h3 {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.26;
  }

  .saf-role-card .v13-acc-btn {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }

  .saf-role-card p {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0.42rem;
    font-size: 0.89rem;
    line-height: 1.54;
  }

  .saf-role-card .saf-role-link {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: start;
    margin-top: 0.45rem;
  }

  html.is-v13-ready .saf-role-card:not(.is-v13-acc-open) p,
  html.is-v13-ready .saf-role-card:not(.is-v13-acc-open) .saf-role-link {
    display: none;
  }

  /* expert.html Compact Console Jump Rail + Chip-Synced 6-Domain Accordion */
  .expert-sticky-console {
    min-width: 0;
  }

  .expert-console-card {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .expert-console-card > :not(.expert-console-jumps) {
    display: none;
  }

  .expert-console-jumps,
  .dispatch-filter-bar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    width: calc(100% + 2 * var(--mobile-bleed));
    max-width: none;
    min-width: 0;
    margin-top: 0;
    margin-inline: calc(-1 * var(--mobile-bleed));
    padding: 2px var(--mobile-bleed) 6px;
    scroll-padding-inline: var(--mobile-bleed);
    scrollbar-width: none;
  }

  .expert-console-jumps::-webkit-scrollbar,
  .dispatch-filter-bar::-webkit-scrollbar {
    display: none;
  }

  .expert-jump-pill,
  .filter-pill {
    flex: 0 0 auto;
    min-height: 48px;
    min-width: 48px;
    white-space: nowrap;
    padding-inline: 0.95rem;
  }

  .domain-pillars-stack {
    gap: 0.6rem;
  }

  .domain-pillar-card {
    padding: 0.78rem 0.9rem;
    gap: 0.45rem;
    cursor: pointer;
  }

  .domain-pillar-card > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    column-gap: 0.55rem;
    row-gap: 0.14rem;
    align-items: center;
  }

  .domain-pillar-card .domain-index {
    grid-column: 1;
    grid-row: 1;
  }

  .domain-pillar-card h3 {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.26;
  }

  .domain-pillar-card .v13-acc-btn {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }

  .domain-pillar-card p {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0.42rem;
    font-size: 0.88rem;
    line-height: 1.54;
  }

  html.is-v13-ready .domain-pillar-card:not(.is-v13-acc-open) p,
  html.is-v13-ready .domain-pillar-card:not(.is-v13-acc-open) .domain-metric-line {
    display: none;
  }

  @media (max-width: 24rem) {
    .domain-pillar-card {
      padding: 0.72rem 0.76rem;
    }

    .domain-pillar-card p {
      font-size: 0.8rem;
      line-height: 1.5;
    }
  }

  /* Flagship Essays, Top-3 Dispatches & Photo-First European Stages */
  .featured-publications-grid {
    gap: 0.9rem;
    margin-bottom: 1.45rem;
  }

  .featured-pub-media {
    aspect-ratio: 16 / 9.4;
  }

  .featured-pub-body {
    padding: 0.92rem 1rem 1.02rem;
  }

  .featured-pub-body h3 {
    font-size: 1.12rem;
  }

  .featured-pub-body p {
    margin-top: 0.4rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.89rem;
    line-height: 1.5;
  }

  .dispatches-header-bar {
    gap: 0.6rem;
    margin-bottom: 0.9rem;
  }

  .dispatches-subhead {
    margin-bottom: 0;
  }

  .dispatches-grid {
    gap: 0.85rem;
  }

  .dispatch-card.is-collapsed-dispatch {
    display: none;
  }

  .dispatch-body {
    padding: 0.88rem 0.98rem 0.98rem;
  }

  .dispatch-body p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .dispatch-body .dispatch-quote-sk {
    display: none;
  }

  .dispatch-expand-wrap {
    display: block;
    margin-top: 0.95rem;
  }

  .dispatch-expand-wrap[hidden] {
    display: none !important;
  }

  .dispatch-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 48px;
    padding: 0.72rem 1.15rem;
    border-radius: 999px;
    border: 1.5px solid var(--atelier-sapphire);
    background: rgba(24, 88, 168, 0.09);
    font-family: var(--font-semibold);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--atelier-sapphire);
    cursor: pointer;
  }

  .expert-stages-section .container {
    display: flex;
    flex-direction: column;
  }

  .expert-stages-section .atelier-section-header {
    order: 1;
  }

  .expert-stages-section .executive-moments-subhead {
    order: 2;
    margin-bottom: 0.75rem;
  }

  .expert-stages-section .museum-bento {
    order: 3;
  }

  .expert-stages-section .mobile-rail-bar {
    order: 4;
    margin-bottom: 1.25rem;
  }

  .expert-stages-section .press-voices-strip {
    order: 5;
    margin-bottom: 1.1rem;
    padding: 0.82rem 0.95rem;
  }

  .expert-stages-section .stage-roster-grid {
    order: 6;
    gap: 0.48rem;
    margin-bottom: 0.4rem;
  }

  .stage-roster-item {
    padding: 0.64rem 0.86rem;
  }

  .executive-moments-block {
    margin-bottom: 1.65rem;
  }

  .executive-moments-subhead,
  .polaroid-archive-divider {
    margin-bottom: 0.85rem;
  }

  .polaroid-archive-divider {
    padding-top: 1.2rem;
  }

  /* 15E. Horizontal Cinema & Archival Photo Rails ([data-mobile-rail]) */
  .vertical-video-grid,
  .museum-bento,
  .polaroid-archive-rail,
  .saf-visual-stack,
  .mother-gallery .gallery-bento,
  .mother-gallery .gallery-portraits {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    width: calc(100% + 2 * var(--mobile-bleed));
    max-width: none;
    min-width: 0;
    margin-inline: calc(-1 * var(--mobile-bleed));
    padding: 4px var(--mobile-bleed) 10px;
    scroll-padding-inline: var(--mobile-bleed);
    scrollbar-width: none;
  }

  .vertical-video-grid::-webkit-scrollbar,
  .museum-bento::-webkit-scrollbar,
  .polaroid-archive-rail::-webkit-scrollbar,
  .saf-visual-stack::-webkit-scrollbar,
  .mother-gallery .gallery-bento::-webkit-scrollbar,
  .mother-gallery .gallery-portraits::-webkit-scrollbar {
    display: none;
  }

  .vertical-video-card {
    flex: 0 0 clamp(256px, 78vw, 312px);
    max-width: clamp(256px, 78vw, 312px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .vertical-video-card .video-trigger {
    aspect-ratio: 9 / 12.5;
  }

  .vv-play {
    width: 48px;
    height: 48px;
  }

  /* Flatten multi-row wrappers inside archival rails on portrait ONLY */
  .polaroid-archive-rail > .gallery-row,
  .mother-gallery .gallery-bento > .bento-stack {
    display: contents;
  }

  .museum-bento > .exec-photo-card,
  .polaroid-archive-rail .gallery-item,
  .saf-visual-stack > .saf-photo,
  .mother-gallery .gallery-bento .gallery-frame,
  .mother-gallery .gallery-portraits > .gallery-frame {
    flex: 0 0 min(calc(100% - 28px), 23.5rem);
    width: min(calc(100% - 28px), 23.5rem) !important;
    max-width: min(calc(100% - 28px), 23.5rem) !important;
    margin: 0 !important;
    transform: none !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Harmonized 14.5rem Media Height Across Archival Photo Rails */
  .museum-bento .exec-photo-card .lightbox-trigger,
  .polaroid-archive-rail .gallery-item .lightbox-trigger,
  .saf-visual-stack .saf-photo .lightbox-trigger {
    aspect-ratio: auto !important;
    height: 14.5rem;
    background: #0c131f;
  }

  .museum-bento .exec-photo-card .lightbox-trigger,
  .polaroid-archive-rail .gallery-item .lightbox-trigger {
    background: #ebe6dc;
  }

  .museum-bento .exec-photo-card .lightbox-trigger img,
  .polaroid-archive-rail .gallery-item .lightbox-trigger img,
  .saf-visual-stack .saf-photo .lightbox-trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
  }

  .saf-visual-stack .saf-photo--contain .lightbox-trigger img {
    object-fit: contain !important;
    object-position: center !important;
    padding: 0.45rem;
  }

  .mother-gallery .gallery-bento,
  .mother-gallery .gallery-portraits {
    margin-bottom: 0;
  }

  .mother-gallery .gallery-bento .gallery-frame,
  .mother-gallery .gallery-portraits > .gallery-frame {
    aspect-ratio: auto;
    height: 15.6rem;
  }

  .mother-gallery .gallery-bento .gallery-frame img,
  .mother-gallery .gallery-portraits > .gallery-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
  }

  /* Universal Dual-Luminance [data-mobile-rail] Telemetry & Thumb Stepper Bar */
  .mobile-rail-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 0.45rem;
    margin-bottom: 1.15rem;
  }

  .mobile-rail-bar .mrb-status {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
  }

  .mobile-rail-bar .mrb-counter {
    flex-shrink: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: var(--champagne-bright);
  }

  .mobile-rail-bar .mrb-progress {
    flex: 1;
    height: 3px;
    min-width: 2.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
  }

  .mobile-rail-bar .mrb-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--pillar-accent);
    transform-origin: 0 50%;
    transform: scaleX(var(--rail-p, 0.1));
    transition: transform 180ms ease;
  }

  .mobile-rail-bar .mrb-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .mobile-rail-bar .mrb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(236, 209, 151, 0.38);
    background: rgba(14, 21, 33, 0.88);
    color: #ffffff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
  }

  .mobile-rail-bar .mrb-btn:disabled {
    opacity: 0.42;
    cursor: default;
  }

  /* Sunlit Atelier Luminance Variant for .mobile-rail-bar */
  .atelier-curtain-group .mobile-rail-bar .mrb-counter,
  .manager-gallery .mobile-rail-bar .mrb-counter,
  .expert-stages-section .mobile-rail-bar .mrb-counter,
  .mother-gallery .mobile-rail-bar .mrb-counter {
    color: var(--atelier-ink);
  }

  .atelier-curtain-group .mobile-rail-bar .mrb-progress,
  .manager-gallery .mobile-rail-bar .mrb-progress,
  .expert-stages-section .mobile-rail-bar .mrb-progress,
  .mother-gallery .mobile-rail-bar .mrb-progress {
    background: rgba(17, 22, 29, 0.14);
  }

  .atelier-curtain-group .mobile-rail-bar .mrb-btn,
  .manager-gallery .mobile-rail-bar .mrb-btn,
  .expert-stages-section .mobile-rail-bar .mrb-btn,
  .mother-gallery .mobile-rail-bar .mrb-btn {
    background: #ffffff;
    border-color: rgba(17, 22, 29, 0.18);
    color: var(--atelier-ink);
    box-shadow: 0 6px 16px rgba(17, 22, 29, 0.08);
  }

  /* 15F. captain.html & mother.html V13 Portrait Stagecraft Masterpiece */
  .captain-banner-1 {
    min-height: 0 !important;
  }

  .captain-banner-1 img {
    height: clamp(13.5rem, 48svh, 19rem);
    object-fit: cover;
    object-position: center 22%;
  }

  .captain-banner-1 .helms-overture {
    padding: 0.95rem var(--mobile-bleed) 1.15rem;
  }

  .captain-banner-1 .helms-sub {
    margin-top: 0.42rem;
    font-size: 0.9rem;
    line-height: 1.44;
  }

  .helms-mobile-cta {
    min-height: 48px;
    min-width: 48px;
    margin-top: 0.8rem;
  }

  .captain-banner-2 .banner-text {
    padding: 1.45rem var(--mobile-bleed) 1.75rem;
  }

  .captain-quote,
  .captain-video,
  .captain-filmstrip {
    padding-block: 2rem;
  }

  /* Photo-First Starlight / Sea Collage Above Quote Card */
  .captain-quote .container {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }

  .captain-quote .quote-image {
    order: -1;
    width: 100%;
    max-width: 24rem;
    margin-inline: auto;
  }

  /* Unified Cinema Poster Card for Storms of Adventure Sailing Film */
  .captain-video .container {
    gap: 0;
  }

  .captain-video .video-thumbnail {
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    box-shadow: none;
  }

  .video-thumbnail img {
    max-height: min(42svh, 19rem);
    object-position: center 50%;
  }

  .captain-video .video-play-btn {
    top: 54%;
    left: 51.5%;
    width: 64px;
    height: 64px;
    background: rgba(6, 18, 14, 0.94);
  }

  .captain-video .video-text {
    border-radius: 0 0 20px 20px;
    border-color: rgba(0, 255, 156, 0.25);
    padding: 1.1rem 1.15rem 1.2rem;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
  }

  .filmstrip-controls {
    gap: 8px;
  }

  .strip-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }

  .captain-filmstrip .filmstrip-viewport {
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: var(--mobile-bleed);
    scrollbar-width: none;
  }

  .captain-filmstrip .filmstrip-viewport::-webkit-scrollbar {
    display: none;
  }

  #voyage-track .reel-frame {
    width: min(calc(100vw - 2 * var(--mobile-bleed) - 20px), 24rem);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .voyage-scrub-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
  }

  .voyage-rail-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    white-space: nowrap;
  }

  .voyage-rail-bar {
    flex: 1;
    height: 3px;
    background: rgba(0, 255, 156, 0.18);
    border-radius: 999px;
    overflow: hidden;
  }

  .voyage-rail-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--seafoam) 0%, var(--champagne-bright) 100%);
    transform-origin: 0 50%;
    transform: scaleX(var(--voyage-p, 0));
  }

  /* Two-Zone Alpine Finale: Ski Slope in Upper 76%, skipper.png Docked Cleanly Below */
  .captain-skipper {
    aspect-ratio: auto;
    min-height: 21.5rem;
    max-height: none;
    background-color: #070b12;
    background-image:
      linear-gradient(
        180deg,
        rgba(7, 11, 18, 0.02) 0%,
        rgba(7, 11, 18, 0.08) 54%,
        rgba(7, 11, 18, 0.88) 70%,
        #070b12 76%,
        #070b12 100%
      ),
      url('../images/banner-4.jpg');
    background-size: 100% 100%, 100% 76%;
    background-position: center top, center 18%;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 13.8rem 1rem 1.15rem;
  }

  .captain-skipper .skipper-image {
    margin-inline: auto;
    width: min(84vw, 20.5rem);
    transform: none !important;
  }

  /* mother.html Unified Warm Cocoa-Espresso Child Story Cards (Portrait -> Coloured Name -> Quote) */
  .mother-hero .hero-overlay {
    padding: 1.05rem var(--mobile-bleed) 1.25rem;
  }

  .mother-hero h1 {
    font-size: clamp(1.78rem, 7vw, 2.35rem);
  }

  .child-profiles {
    padding-block: 1.65rem 1.85rem;
  }

  .child-profiles--lui {
    padding-top: 1.75rem;
  }

  .child-profile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.78rem;
    width: calc(100% - 2 * var(--mobile-bleed));
    max-width: 32rem;
    margin-inline: auto;
    padding: 1.08rem;
    border-radius: 1.25rem;
    background: rgba(28, 20, 15, 0.94);
    border: 1px solid rgba(255, 190, 107, 0.28);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
  }

  .child-profile + .child-profile {
    margin-top: 1.15rem;
    padding-top: 1.08rem;
    border-top: 1px solid rgba(255, 190, 107, 0.28);
  }

  .child-profile .child-image {
    order: -1;
    width: 100%;
    max-width: none;
    height: clamp(175px, 28svh, 225px);
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.95rem;
    background: radial-gradient(
      circle at 50% 54%,
      rgba(255, 190, 107, 0.14) 0%,
      rgba(255, 190, 107, 0.03) 52%,
      transparent 74%
    );
    transform: none !important;
  }

  .child-profile .child-image img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center bottom;
    margin: 0 !important;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.36));
  }

  .child-profile .child-text {
    padding-inline: 0;
    max-width: none;
    width: 100%;
  }

  .child-profile .child-text h2 {
    display: block !important;
    font-size: clamp(1.85rem, 6.8vw, 2.3rem);
    line-height: 1.06;
  }

  .child-profile .child-text p {
    margin-top: 0.45rem;
    max-width: none;
    font-size: 0.95rem;
    line-height: 1.56;
  }

  .mother-gallery {
    padding-block: 2.1rem 2.35rem;
  }

  .mother-gallery .gallery-header {
    margin-bottom: 1.15rem;
  }

  .mother-gallery .gallery-panorama {
    margin-bottom: 0.95rem;
  }

  .mother-contact {
    padding-block: 2.4rem;
  }

  /* 15G. Touch Target Upgrade (>= 48px + >= 8px Gap) & Unified 3-Dialog Safe Areas */
  .arrow-button {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }

  .pub-actions-row {
    gap: 8px;
  }

  .pub-read-btn,
  .pub-ext-link,
  .tp-action-btn,
  .saf-role-link,
  .pub-link {
    min-height: 48px;
    min-width: 48px;
  }

  .contact-actions {
    gap: 10px;
  }

  .footer-middle {
    padding-block: 2.15rem;
  }

  .footer-middle .container {
    gap: 1.25rem;
  }

  .footer-logo a,
  .journey-signature a {
    min-height: 48px;
    min-width: 48px;
  }

  .footer-menu ul {
    gap: 8px;
  }

  .footer-menu ul li a {
    min-height: 48px;
    min-width: 48px;
  }

  /* Dialog 1: #video-modal — 100dvh, Safe-Area Top (>= 61.6px > Dynamic Island), Bottom [x Close] */
  dialog.video-modal {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
  }

  dialog.video-modal[open] {
    justify-content: center;
    gap: 0.55rem;
    padding:
      max(calc(env(safe-area-inset-top, 0px) + 4.1rem), 4.8rem)
      14px
      max(calc(env(safe-area-inset-bottom, 0px) + 0.85rem), 0.95rem);
  }

  .video-modal-close {
    top: max(calc(env(safe-area-inset-top, 0px) + 0.65rem), 3.85rem);
    right: 14px;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }

  .video-modal-shell {
    width: 100%;
    max-height: 100%;
    gap: 0.5rem;
  }

  .video-modal-shell.is-portrait {
    width: min(24rem, 100%);
  }

  .video-modal-shell.is-portrait .video-modal-inner {
    max-height: min(45dvh, 25rem);
  }

  @media (min-height: 42rem) {
    .video-modal-shell.is-portrait .video-modal-inner {
      max-height: min(50dvh, 27.5rem);
    }
  }

  .video-modal-controls {
    margin-top: 0.2rem;
    width: 100%;
    gap: 8px;
  }

  .video-modal-nav {
    min-height: 48px;
    min-width: 48px;
    padding: 0.5rem 0.9rem;
  }

  .video-modal-dismiss {
    display: inline-flex;
    min-height: 48px;
    min-width: 48px;
    padding: 0.5rem 0.95rem;
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.11);
  }

  .video-modal-meta {
    max-height: 9.2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-inline: 0.35rem;
  }

  .video-modal-source {
    min-height: 48px;
    min-width: 48px;
    margin-top: 0.25rem;
  }

  /* Dialog 2: #lightbox — 100dvh, Full-Width Photo Stage + Bottom Thumb-Zone 48x48 Buttons */
  dialog.lightbox {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
  }

  dialog.lightbox[open] {
    padding:
      max(calc(env(safe-area-inset-top, 0px) + 0.65rem), 3.85rem)
      14px
      max(calc(env(safe-area-inset-bottom, 0px) + 0.85rem), 1rem);
    gap: 0.65rem;
  }

  .lightbox-close,
  .lightbox-nav {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }

  .lightbox-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: center;
    gap: 0.75rem 16px;
  }

  .lightbox-stage img {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    max-height: 62dvh;
    object-fit: contain;
  }

  .lightbox-prev {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
  }

  .lightbox-next {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  .lightbox-caption {
    padding-top: 0.25rem;
    font-size: 0.88rem;
  }

  /* Dialog 3: #article-modal — 92dvh Bottom Sheet + Grabber Pill + Safe-Area Footer */
  .article-modal {
    margin: auto 0 0 0;
    width: 100%;
    max-width: 100vw;
    max-height: 92vh;
    max-height: 92dvh;
  }

  .article-modal-sheet {
    position: relative;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
    padding-top: 10px;
  }

  .article-modal-sheet::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(17, 22, 29, 0.22);
    margin: 0 auto 6px;
    flex-shrink: 0;
  }

  .article-modal-header {
    padding: 0.65rem 1rem 0.75rem;
    gap: 0.65rem;
  }

  .article-modal-close {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    flex-shrink: 0;
  }

  .article-modal-scroll {
    padding: 1.05rem 1.1rem 1.35rem;
  }

  .article-modal-footer {
    padding:
      0.75rem
      1rem
      max(calc(env(safe-area-inset-bottom, 0px) + 0.75rem), 0.9rem);
    gap: 8px;
  }

  .am-nav-group {
    gap: 8px;
  }

  .am-nav-btn,
  .am-source-link {
    min-height: 48px;
    min-width: 48px;
  }
}