:root{
  --black:#02080b;
  --ink:#06141a;
  --steel:#b9c5c7;
  --salt:#e8efe8;
  --yellow:#f4b928;
  --cyan:#0e8aa0;
  --panel:rgba(2,8,11,.56);
  --line:rgba(232,239,232,.18);
  --shadow:0 32px 80px rgba(0,0,0,.48);
  --max:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--black)}
body{margin:0;background:var(--black);color:var(--salt);font-family:Arial, Helvetica, sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit} code{font-size:.94em;color:var(--yellow)}
p{margin:0 0 1rem;font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.58;color:rgba(232,239,232,.86)}
h1,h2,h3{margin:0 0 1rem;line-height:.96;font-weight:800;letter-spacing:-.03em}
h1{font-size:clamp(4.5rem,14vw,11rem);color:var(--yellow);font-family:Georgia,serif;letter-spacing:-.06em;text-shadow:0 12px 44px rgba(0,0,0,.6)}
h2{font-size:clamp(2.1rem,5vw,5.1rem)}
h3{font-size:clamp(1.35rem,2vw,2rem);color:var(--yellow)}
.eyebrow{margin-bottom:14px;font-size:.76rem;line-height:1.15;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,185,40,.9);font-weight:800}
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:18px max(18px,calc((100vw - var(--max))/2));background:linear-gradient(180deg,rgba(2,8,11,.86),rgba(2,8,11,.10));backdrop-filter:blur(4px)}
.brand{text-decoration:none;font-family:Georgia,serif;font-weight:900;font-size:1.4rem;letter-spacing:.06em;color:var(--yellow)}
.nav-toggle{display:none} nav{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end} nav a{text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font-weight:800;font-size:.72rem;color:rgba(232,239,232,.78)} nav a:hover{color:var(--yellow)}
.media-section,.tab-panel{position:relative;isolation:isolate;display:grid;min-height:100vh;min-height:100svh;min-height:100dvh;padding:94px clamp(18px,5vw,72px) 42px;overflow:hidden;align-items:center;background:var(--black)}
.media-section::before,.tab-panel::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--bg);background-size:cover;background-position:center center;transform:scale(1.02)}
.parallax-ready::before{background-attachment:fixed}
.section-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:.78;background:transparent}.ghost-video{opacity:.35}
.veil{position:absolute;inset:0;z-index:2}.hero-veil{background:radial-gradient(circle at 66% 38%,rgba(14,138,160,.18),transparent 30%),linear-gradient(90deg,rgba(2,8,11,.75),rgba(2,8,11,.28) 58%,rgba(2,8,11,.64)),linear-gradient(180deg,rgba(2,8,11,.24),rgba(2,8,11,.88))}.left-veil{background:linear-gradient(90deg,rgba(2,8,11,.86),rgba(2,8,11,.62) 38%,rgba(2,8,11,.18) 70%,rgba(2,8,11,.46))}.right-veil{background:linear-gradient(90deg,rgba(2,8,11,.44),rgba(2,8,11,.16) 38%,rgba(2,8,11,.72) 70%,rgba(2,8,11,.88))}.full-veil{background:linear-gradient(180deg,rgba(2,8,11,.46),rgba(2,8,11,.78))}
.hero-copy,.copy-block,.split-copy,.world-copy,.overlay-copy,.tabs,.section-heading,.video-shell{position:relative;z-index:3}.hero-copy{width:min(var(--max),100%);max-width:920px}.tagline{font-size:clamp(1.25rem,2.5vw,2.2rem);color:rgba(232,239,232,.92);font-weight:300}.button-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}.button{appearance:none;border:1px solid rgba(244,185,40,.72);background:rgba(2,8,11,.34);color:var(--salt);text-decoration:none;text-transform:uppercase;font-weight:900;letter-spacing:.1em;font-size:.8rem;padding:14px 18px;cursor:pointer}.button.primary{background:var(--yellow);color:#06141a}.button:hover{transform:translateY(-1px)}
.copy-section{justify-items:stretch}.copy-block{width:min(760px,100%);padding:0;text-shadow:0 6px 32px rgba(0,0,0,.55)}.left-copy{justify-self:start;text-align:left}.right-copy{justify-self:end;text-align:left}.center-copy{justify-self:center;text-align:center}.copy-block h2,.overlay-copy h2{color:var(--yellow)}.copy-block strong{color:var(--yellow)}
.panel{padding:clamp(70px,9vw,120px) max(18px,calc((100vw - var(--max))/2));background:linear-gradient(180deg,#02080b,#06141a);color:var(--salt)}.section-heading{max-width:920px;margin-bottom:32px}.section-heading.centered{text-align:center;margin-left:auto;margin-right:auto}.teaser-panel{background:radial-gradient(circle at 70% 20%,rgba(14,138,160,.16),transparent 38%),#02080b}.video-shell{position:relative;max-width:1100px;margin:0 auto;border:1px solid var(--line);box-shadow:var(--shadow);background:#000;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}.teaser-video,.modal-card video{width:100%;height:100%;object-fit:cover}.overlay-play{position:absolute;bottom:22px;right:22px}
.split-copy{display:grid;grid-template-columns:minmax(220px,36%) 1fr;gap:clamp(28px,5vw,70px);width:min(var(--max),100%);align-items:start}.synopsis-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.synopsis-grid article{padding:22px;border:1px solid var(--line);background:rgba(2,8,11,.38);backdrop-filter:blur(3px)}
.laurel-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.laurel-grid article{min-height:150px;border:1px solid rgba(244,185,40,.28);background:linear-gradient(180deg,rgba(244,185,40,.12),rgba(244,185,40,.02));padding:18px;display:flex;flex-direction:column;justify-content:flex-end;text-align:center}.laurel-grid span{color:var(--yellow);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:900}.laurel-grid strong{font-size:.95rem;margin-top:8px}
.world-copy{width:min(960px,100%);margin:0 auto;text-align:center}.world-copy h2{color:var(--yellow)}.world-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}.world-grid span{display:block;padding:16px;border:1px solid var(--line);background:rgba(2,8,11,.35)}
.tabbed-section{min-height:100vh;min-height:100svh;background:var(--black)}.tabs{position:relative;min-height:100vh;min-height:100svh}.tab-list{position:absolute;z-index:20;top:78px;left:50%;transform:translateX(-50%);display:flex;gap:0;border:1px solid rgba(244,185,40,.34);background:rgba(2,8,11,.76);backdrop-filter:blur(5px);box-shadow:0 18px 50px rgba(0,0,0,.42);max-width:calc(100% - 36px);overflow-x:auto}.story-tabs{min-width:min(820px,calc(100vw - 36px))}.tab-button{appearance:none;border:0;border-right:1px solid rgba(244,185,40,.24);background:rgba(232,239,232,.04);color:var(--salt);padding:14px 18px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;font-size:.76rem;cursor:pointer;white-space:nowrap}.tab-button:last-child{border-right:0}.tab-button.active{background:var(--yellow);color:#06141a}.tab-panel{padding-top:150px;align-items:end}.tab-panel[hidden],.tabs [role="tabpanel"]{display:none!important}.tabs [role="tabpanel"].active{display:grid!important}.overlay-copy{width:min(660px,100%);padding:24px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(4px)}.overlay-copy.center-copy{justify-self:center;text-align:center}
.theme-list{display:grid;gap:10px;margin-top:22px}.theme-list span{font-size:clamp(1.1rem,1.8vw,1.6rem);color:rgba(232,239,232,.9)}
.production-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.production-grid article{min-height:220px;padding:22px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(232,239,232,.08),rgba(232,239,232,.02));display:flex;flex-direction:column;justify-content:space-between}.production-grid p{font-size:1rem}.contact-copy{max-width:850px}.contact-copy h2{font-family:Georgia,serif;color:var(--yellow);font-size:clamp(4rem,10vw,9rem)}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px}.modal[hidden]{display:none}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.84)}.modal-card{position:relative;z-index:2;width:min(1100px,100%);aspect-ratio:16/9;background:#000;box-shadow:0 30px 90px rgba(0,0,0,.7)}.modal-close{position:absolute;right:0;top:-46px;border:1px solid var(--line);background:#02080b;color:var(--salt);padding:10px 14px;text-transform:uppercase;font-weight:900;letter-spacing:.08em;cursor:pointer}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .72s ease,transform .72s ease}.reveal.is-visible{opacity:1;transform:translateY(0)}footer{padding:24px 18px;text-align:center;color:rgba(232,239,232,.64);background:#02080b}footer p{margin:0;font-size:.85rem}
@media (max-width:960px){.split-copy{grid-template-columns:1fr}.synopsis-grid,.world-grid,.production-grid{grid-template-columns:1fr}.laurel-grid{grid-template-columns:repeat(2,1fr)}.parallax-ready::before{background-attachment:scroll}.site-header{padding:14px 16px}.nav-toggle{display:block;border:1px solid rgba(244,185,40,.46);background:rgba(2,8,11,.45);color:var(--salt);padding:9px 11px;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;font-weight:900}nav{position:absolute;display:none;right:16px;top:58px;width:min(280px,calc(100vw - 32px));padding:12px;background:rgba(2,8,11,.96);border:1px solid rgba(244,185,40,.3)}nav.open{display:grid;gap:6px}nav a{padding:9px}.media-section,.tab-panel{min-height:86vh;min-height:86svh;padding:82px 16px 28px}.hero-copy{max-width:100%}h1{font-size:clamp(4rem,20vw,7rem)}h2{font-size:clamp(2rem,10vw,3.8rem)}.copy-block,.overlay-copy{width:100%}.right-copy,.left-copy,.center-copy{justify-self:stretch;text-align:left}.tab-list{top:62px}.tab-panel{padding-top:142px}.story-section .tab-panel{padding-top:170px}.overlay-play{position:static;margin:18px}.video-shell{aspect-ratio:16/10}.laurel-grid{gap:10px}.laurel-grid article{min-height:125px}.contact-copy h2{font-size:clamp(3.6rem,18vw,7rem)}}
@media (max-width:540px){.laurel-grid{grid-template-columns:1fr}.button-row{display:grid}.button{width:100%;text-align:center}.tab-button{font-size:.68rem;padding:12px 14px}.site-header .brand{font-size:1.1rem}.overlay-copy{padding:18px}p{font-size:1rem;line-height:1.48}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{transition:none;opacity:1;transform:none}.parallax-ready::before{background-attachment:scroll}}


/* V3 compact / scalable / parallax pass */
:root {
  --section-min: clamp(620px, 82svh, 860px);
  --section-pad-top: clamp(72px, 9vh, 108px);
  --section-pad-bottom: clamp(36px, 7vh, 76px);
}

/* Keep hero cinematic, but reduce most follow-up sections so scrolling feels tighter. */
.media-section {
  min-height: var(--section-min);
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-bottom);
}

.hero.media-section {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

.copy-section {
  align-items: center;
}

.panel {
  padding-top: clamp(56px, 8vw, 90px);
  padding-bottom: clamp(56px, 8vw, 90px);
}

/* Teaser should feel like a section, not a blank vertical hold. */
.teaser-panel .section-heading {
  margin-bottom: 22px;
}

.video-shell {
  max-width: min(1040px, calc(100vw - 36px));
}

/* Tabs: reduce forced height so People / Story sections do not feel overlong. */
.tabbed-section,
.tabs,
.tab-panel {
  min-height: clamp(620px, 84svh, 880px);
}

.tab-panel {
  padding-top: clamp(118px, 16vh, 154px);
  padding-bottom: clamp(28px, 7vh, 68px);
}

/* Text blocks should not create visual dead zones. */
.copy-block,
.overlay-copy {
  max-width: min(760px, calc(100vw - 40px));
}

.split-copy {
  gap: clamp(20px, 4vw, 52px);
}

/* JS-driven parallax: more reliable than background-attachment: fixed. */
.parallax-ready::before {
  background-attachment: scroll !important;
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.10);
  will-change: transform;
}

.parallax-ready {
  overflow: hidden;
}

/* Prevent accidental black seams between sections during responsive scaling. */
main,
body {
  background: #02080b;
}

.media-section::before,
.tab-panel::before {
  inset: -2px;
}

/* Large desktop: still cinematic, but less empty. */
@media (min-width: 1180px) {
  .copy-block h2,
  .overlay-copy h2 {
    max-width: 820px;
  }

  .world-copy {
    max-width: 980px;
  }
}

/* Tablet / phone: no parallax; tighter heights; avoid dead air. */
@media (max-width: 960px) {
  :root {
    --section-min: auto;
    --section-pad-top: 76px;
    --section-pad-bottom: 34px;
  }

  .media-section {
    min-height: auto;
    padding-top: var(--section-pad-top);
    padding-bottom: var(--section-pad-bottom);
  }

  .hero.media-section {
    min-height: 92svh;
  }

  .tabbed-section,
  .tabs,
  .tab-panel {
    min-height: auto;
  }

  .tab-panel {
    min-height: 82svh;
    padding-top: 136px;
    padding-bottom: 28px;
  }

  .story-section .tab-panel {
    padding-top: 158px;
  }

  .parallax-ready::before {
    transform: scale(1.02) !important;
  }

  .panel {
    padding-top: 54px;
    padding-bottom: 54px;
  }

  .synopsis-grid article {
    padding: 17px;
  }

  .section-heading {
    margin-bottom: 22px;
  }
}

@media (max-width: 540px) {
  .hero.media-section {
    min-height: 88svh;
  }

  .tab-panel {
    min-height: 78svh;
  }

  .copy-block,
  .overlay-copy {
    max-width: 100%;
  }
}


/* V4 restructuring pass */
.video-first-hero .section-video,
.animated-bg-ready .section-video {
  display: block;
}

.video-first-hero::before,
.animated-bg-ready::before {
  z-index: 0;
}

.teaser-cinematic {
  min-height: clamp(640px, 86svh, 920px);
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(360px, 1.18fr);
  gap: clamp(24px, 5vw, 68px);
  align-items: center;
  padding-left: max(20px, calc((100vw - var(--max)) / 2));
  padding-right: max(20px, calc((100vw - var(--max)) / 2));
}

.teaser-lockup,
.teaser-frame {
  position: relative;
  z-index: 3;
}

.teaser-lockup h2 {
  color: var(--yellow);
}

.teaser-lockup p {
  max-width: 620px;
}

.teaser-frame {
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 1px solid var(--line);
  background: #000;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.teaser-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teaser-note {
  align-self: center;
  color: rgba(232,239,232,.72);
  font-size: .88rem;
}

.synopsis-redesign {
  background:
    radial-gradient(circle at 12% 20%, rgba(244,185,40,.12), transparent 34%),
    radial-gradient(circle at 90% 82%, rgba(14,138,160,.15), transparent 32%),
    linear-gradient(180deg,#02080b,#06141a);
}

.synopsis-timeline {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
  max-width: var(--max);
  margin: 0 auto;
}

.synopsis-timeline article {
  min-height: 280px;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(232,239,232,.08), rgba(232,239,232,.02));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.synopsis-timeline span {
  color: var(--yellow);
  font-weight: 900;
  letter-spacing: .14em;
  font-family: Arial, sans-serif;
}

.synopsis-timeline h3 {
  color: var(--yellow);
  margin-top: auto;
}

.world-rearranged {
  min-height: clamp(680px, 86svh, 930px);
}

.world-layout {
  position: relative;
  z-index: 3;
  width: min(var(--max), 100%);
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr);
  gap: clamp(26px, 6vw, 90px);
  align-items: center;
}

.world-title h2 {
  color: var(--yellow);
}

.world-details {
  max-width: 760px;
}

.world-grid {
  grid-template-columns: 1fr;
}

.world-grid strong {
  display: block;
  color: var(--yellow);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: Arial, sans-serif;
  font-size: .78rem;
}

.character-copy,
.story-card {
  width: min(620px, calc(100vw - 42px));
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.story-tabs-wrap .tab-list.side-tab-list {
  top: 50%;
  left: clamp(18px, 4vw, 58px);
  right: auto;
  transform: translateY(-50%);
  display: grid;
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  overflow: visible;
}

.side-tab-list .tab-button {
  border-right: 0;
  border-bottom: 1px solid rgba(244,185,40,.24);
}

.side-tab-list .tab-button:last-child {
  border-bottom: 0;
}

.story-section .tab-panel {
  padding-left: clamp(160px, 17vw, 240px);
  padding-top: 96px;
}

.story-card {
  min-height: 320px;
}

.aftermath-section {
  min-height: clamp(620px, 82svh, 860px);
}

.aftermath-section .copy-block {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.theme-section {
  min-height: clamp(620px, 84svh, 900px);
}

.distribution-panel {
  padding-top: clamp(56px, 7vw, 86px);
  padding-bottom: clamp(56px, 7vw, 86px);
}

.distribution-layout {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(420px, 1.1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}

.distribution-layout h2 {
  color: var(--yellow);
}

.distribution-grid {
  display: grid;
  gap: 16px;
}

.distribution-grid article {
  padding: 20px;
  border: 1px solid var(--line);
  background: rgba(232,239,232,.04);
}

.distribution-grid h3 {
  color: var(--yellow);
}

.closing {
  min-height: 100svh;
}

.closing .contact-copy {
  position: relative;
  z-index: 3;
}

/* More parallax candidates per notes */
.logline-section,
.source-section,
.theme-section {
  overflow: hidden;
}

@media (max-width: 960px) {
  .teaser-cinematic,
  .world-layout,
  .distribution-layout {
    grid-template-columns: 1fr;
  }

  .teaser-cinematic {
    min-height: auto;
    padding: 82px 16px 34px;
  }

  .teaser-frame {
    order: -1;
  }

  .synopsis-timeline {
    grid-template-columns: 1fr;
  }

  .synopsis-timeline article {
    min-height: auto;
  }

  .story-tabs-wrap .tab-list.side-tab-list {
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    width: auto;
    min-width: min(420px, calc(100vw - 36px));
    max-width: calc(100vw - 36px);
    overflow-x: auto;
  }

  .side-tab-list .tab-button {
    border-bottom: 0;
    border-right: 1px solid rgba(244,185,40,.24);
  }

  .story-section .tab-panel {
    padding-left: 16px;
    padding-top: 142px;
  }

  .character-copy,
  .story-card {
    width: 100%;
    min-height: auto;
  }

  .world-rearranged,
  .aftermath-section,
  .theme-section {
    min-height: auto;
  }
}

@media (max-width: 540px) {
  .teaser-frame {
    aspect-ratio: 16 / 10;
  }
}

/* V5 notes pass: teaser embed, stacked synopsis, character/act balance, readability, section separation */
h2 {
  font-size: clamp(1.85rem, 3.9vw, 4.05rem);
  line-height: 1.02;
}

.copy-block h2,
.overlay-copy h2,
.section-heading h2,
.distribution-layout h2 {
  text-wrap: balance;
}

.legacy-section .copy-block h2 {
  font-size: clamp(1.75rem, 3.15vw, 3.35rem);
  max-width: 680px;
}

.media-section + .media-section::after,
.media-section + .tabbed-section::after,
.tabbed-section + .media-section::after,
.tabbed-section + .tabbed-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: max(18px, calc((100vw - var(--max)) / 2));
  right: max(18px, calc((100vw - var(--max)) / 2));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,185,40,.72), transparent);
  z-index: 30;
  pointer-events: none;
}

.tabbed-section {
  position: relative;
}

.teaser-frame iframe,
.modal-card iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.synopsis-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 940px;
}

.synopsis-timeline article {
  min-height: auto;
  display: grid;
  grid-template-columns: 72px minmax(160px, 220px) 1fr;
  gap: clamp(14px, 2.2vw, 28px);
  align-items: center;
  padding: clamp(18px, 2.2vw, 28px);
}

.synopsis-timeline article span,
.synopsis-timeline article h3,
.synopsis-timeline article p {
  margin: 0;
}

.character-copy,
.story-card {
  width: min(600px, calc(100vw - 42px));
  min-height: 285px;
}

.command-panel {
  align-items: end;
}

.command-veil {
  background:
    linear-gradient(180deg, rgba(2,8,11,.16), rgba(2,8,11,.72)),
    linear-gradient(90deg, rgba(2,8,11,.22), rgba(2,8,11,.08) 48%, rgba(2,8,11,.48));
}

.command-copy {
  justify-self: end;
  text-align: left;
  width: min(540px, calc(100vw - 42px));
  min-height: 250px;
  margin-bottom: clamp(26px, 4vh, 52px);
}

.command-name-row {
  position: absolute;
  z-index: 4;
  inset: auto clamp(18px, 5vw, 72px) clamp(26px, 7vh, 86px);
  height: 40px;
  pointer-events: none;
}

.command-name {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  padding: 8px 12px;
  border: 1px solid rgba(244,185,40,.48);
  background: rgba(2,8,11,.72);
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 900;
  box-shadow: 0 10px 32px rgba(0,0,0,.35);
}

.command-name-left { left: 18%; }
.command-name-center { left: 48%; }
.command-name-right { left: 78%; }

.story-card {
  justify-self: end;
  text-align: left;
  min-height: 310px;
  justify-content: center;
}

.story-section .tab-panel {
  padding-right: clamp(18px, 5vw, 72px);
}

.production-grid article {
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.production-grid article p {
  margin-bottom: 0;
}

@media (max-width: 960px) {
  h2 {
    font-size: clamp(1.85rem, 8vw, 3.2rem);
  }

  .synopsis-timeline article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .story-card,
  .character-copy,
  .command-copy {
    width: 100%;
    min-height: auto;
    justify-self: stretch;
  }

  .command-copy {
    margin-bottom: 0;
  }

  .command-name-row {
    display: none;
  }
}


/* V5.1 patch: YouTube error 153 fallback + responsive Legacy Reimagined background */
.teaser-frame {
  position: relative;
}

.teaser-fallback {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  padding: 9px 11px;
  border: 1px solid rgba(244,185,40,.62);
  background: rgba(2,8,11,.82);
  color: var(--yellow);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .68rem;
  font-weight: 900;
}

.legacy-section {
  min-height: clamp(600px, 82svh, 860px);
}

.legacy-section::before {
  background-size: cover !important;
  background-position: center center !important;
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.04) !important;
}

@media (min-width: 961px) {
  .legacy-section .copy-block {
    width: min(620px, 44vw);
  }
}

@media (max-width: 960px) {
  .legacy-section {
    min-height: 78svh;
  }

  .legacy-section::before {
    background-size: cover !important;
    background-position: center center !important;
    transform: scale(1.01) !important;
  }
}


/* V5.2 patch: remove YouTube iframe to eliminate Error 153; improve Legacy scaling */
.teaser-poster {
  display: block;
  text-decoration: none;
  background: #02080b;
}

.teaser-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .82;
}

.teaser-play-button {
  position: absolute;
  right: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  z-index: 6;
  padding: 14px 18px;
  border: 1px solid rgba(244,185,40,.72);
  background: rgba(2,8,11,.86);
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem;
  font-weight: 900;
  box-shadow: 0 16px 40px rgba(0,0,0,.38);
}

.teaser-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(180deg, rgba(2,8,11,.08), rgba(2,8,11,.32));
  pointer-events: none;
}

.legacy-section {
  min-height: clamp(560px, 78svh, 820px);
}

.legacy-section::before {
  inset: -2.5vh -2.5vw !important;
  width: auto !important;
  height: auto !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.01) !important;
}

@media (max-width: 960px) {
  .teaser-play-button {
    left: 14px;
    right: 14px;
    text-align: center;
  }
  .legacy-section::before {
    inset: 0 !important;
    transform: none !important;
  }
}

/* V5.3 recognition showcase: real laurel assets, not text cards */
.recognition-showcase {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 42%, rgba(14,138,160,.18), transparent 34%),
    linear-gradient(180deg, rgba(2,8,11,.92), rgba(6,20,26,.94)),
    #02080b;
}
.recognition-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/images/page-08.jpg");
  background-size: cover;
  background-position: center center;
  opacity: .26;
  transform: scale(1.04);
}
.recognition-showcase::after {
  content: "";
  position: absolute;
  left: max(18px, calc((100vw - var(--max))/2));
  right: max(18px, calc((100vw - var(--max))/2));
  top: clamp(112px, 14vw, 178px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,185,40,.7), transparent);
  opacity: .72;
}
.recognition-showcase .section-heading,
.recognition-showcase .laurel-grid {
  position: relative;
  z-index: 2;
}
.recognition-showcase .section-heading {
  margin-bottom: clamp(28px, 5vw, 58px);
}
.recognition-showcase .section-heading h2 {
  font-family: Georgia, serif;
  font-weight: 500;
  color: rgba(255,232,184,.96);
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: clamp(2rem, 4.5vw, 4.2rem);
  line-height: 1.05;
  text-shadow: 0 12px 44px rgba(0,0,0,.62);
}
.recognition-showcase .laurel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 42px);
  max-width: 1180px;
  margin: 0 auto;
}
.recognition-showcase .laurel-grid article {
  min-height: auto;
  padding: clamp(14px, 2vw, 26px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(244,185,40,.18);
  background: radial-gradient(circle at center, rgba(244,185,40,.10), rgba(2,8,11,.08) 58%, rgba(2,8,11,.30));
  box-shadow: 0 18px 54px rgba(0,0,0,.26);
}
.recognition-showcase .laurel-grid img {
  width: 100%;
  max-width: 330px;
  height: clamp(150px, 19vw, 240px);
  object-fit: contain;
  display: block;
  mix-blend-mode: screen;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.55));
}
@media (max-width: 960px) {
  .recognition-showcase .laurel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .recognition-showcase .laurel-grid img {
    height: clamp(132px, 30vw, 210px);
  }
}
@media (max-width: 540px) {
  .recognition-showcase .laurel-grid {
    grid-template-columns: 1fr;
  }
  .recognition-showcase .section-heading h2 {
    letter-spacing: .08em;
    font-size: clamp(1.8rem, 10vw, 3rem);
  }
  .recognition-showcase .laurel-grid img {
    height: 190px;
  }
}

/* V5.4 recognition scale pass: 50% smaller, fluid grid */
.recognition-showcase {
  min-height: auto;
  padding-top: clamp(82px, 9vw, 118px) !important;
  padding-bottom: clamp(54px, 7vw, 86px) !important;
}
.recognition-showcase::after {
  top: clamp(92px, 10vw, 132px);
}
.recognition-showcase .section-heading {
  margin-bottom: clamp(18px, 3vw, 34px);
}
.recognition-showcase .section-heading h2 {
  font-size: clamp(1.55rem, 3.1vw, 3rem);
  letter-spacing: clamp(.06em, .8vw, .13em);
}
.recognition-showcase .laurel-grid {
  width: min(92vw, 960px);
  grid-template-columns: repeat(auto-fit, minmax(clamp(128px, 18vw, 170px), 1fr));
  gap: clamp(10px, 1.8vw, 22px);
  align-items: center;
}
.recognition-showcase .laurel-grid article {
  padding: clamp(8px, 1.2vw, 14px);
  min-height: clamp(92px, 13vw, 132px);
}
.recognition-showcase .laurel-grid img {
  width: min(100%, clamp(118px, 15vw, 165px));
  max-width: 165px;
  height: clamp(76px, 10vw, 120px);
}
@media (max-width: 960px) {
  .recognition-showcase .laurel-grid {
    width: min(92vw, 620px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .recognition-showcase .laurel-grid img {
    width: min(100%, clamp(102px, 22vw, 150px));
    height: clamp(72px, 17vw, 112px);
  }
}
@media (max-width: 540px) {
  .recognition-showcase .laurel-grid {
    width: min(88vw, 360px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .recognition-showcase .laurel-grid img {
    width: min(100%, 138px);
    height: clamp(86px, 26vw, 108px);
  }
}

/* V5.5 recognition layout correction: preserve 3 x 2 desktop grid while staying scalable */
.recognition-showcase .laurel-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: min(88vw, 900px) !important;
  max-width: 900px !important;
  gap: clamp(12px, 1.6vw, 22px) !important;
  margin-inline: auto !important;
  align-items: center !important;
}
.recognition-showcase .laurel-grid article {
  min-height: clamp(104px, 13vw, 150px) !important;
  padding: clamp(8px, 1.1vw, 14px) !important;
}
.recognition-showcase .laurel-grid img {
  width: min(100%, clamp(130px, 16vw, 190px)) !important;
  max-width: 190px !important;
  height: clamp(90px, 11vw, 132px) !important;
  object-fit: contain !important;
}
@media (max-width: 720px) {
  .recognition-showcase .laurel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(88vw, 420px) !important;
  }
  .recognition-showcase .laurel-grid img {
    width: min(100%, clamp(118px, 34vw, 160px)) !important;
    height: clamp(86px, 28vw, 116px) !important;
  }
}
@media (max-width: 420px) {
  .recognition-showcase .laurel-grid {
    grid-template-columns: 1fr !important;
    width: min(82vw, 280px) !important;
  }
}

/* V5.6 global responsive background + laurel scaling pass
   Goal: every cinematic background responds to browser width/height changes,
   while the recognition grid stays 3 x 2 on desktop and scales fluidly. */
.media-section,
.tab-panel {
  background-color: #02080b !important;
  overflow: hidden !important;
}

.media-section::before,
.tab-panel::before {
  inset: -4vh -4vw !important;
  width: auto !important;
  height: auto !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  transform-origin: center center !important;
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.075) !important;
  will-change: transform;
}

.media-section:not(.parallax-ready)::before,
.tab-panel:not(.parallax-ready)::before {
  transform: scale(1.045) !important;
}

.section-video {
  object-fit: cover !important;
  object-position: center center !important;
}

/* Keep mobile backgrounds from drifting/cropping unpredictably. */
@media (max-width: 760px) {
  .media-section::before,
  .tab-panel::before,
  .legacy-section::before {
    inset: 0 !important;
    transform: none !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}

/* Recognition section background should behave like the other image-backed sections. */
.recognition-showcase::before {
  inset: -4vh -4vw !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transform: scale(1.06) !important;
  transform-origin: center center !important;
}

/* Desktop: locked 3 columns x 2 rows, but the entire grid and laurels scale with viewport. */
.recognition-showcase .laurel-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: clamp(540px, 58vw, 900px) !important;
  max-width: calc(100vw - 72px) !important;
  gap: clamp(10px, 1.25vw, 22px) !important;
  margin-inline: auto !important;
  align-items: center !important;
}

.recognition-showcase .laurel-grid article {
  width: 100% !important;
  aspect-ratio: 1.48 / 1 !important;
  min-height: 0 !important;
  padding: clamp(6px, .85vw, 14px) !important;
  display: grid !important;
  place-items: center !important;
}

.recognition-showcase .laurel-grid img {
  width: clamp(98px, 10.6vw, 190px) !important;
  max-width: 82% !important;
  height: clamp(68px, 7.5vw, 132px) !important;
  object-fit: contain !important;
}

@media (max-width: 760px) {
  .recognition-showcase .laurel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(88vw, 430px) !important;
    max-width: none !important;
  }
  .recognition-showcase .laurel-grid img {
    width: clamp(104px, 33vw, 160px) !important;
    height: clamp(78px, 25vw, 118px) !important;
  }
}

@media (max-width: 420px) {
  .recognition-showcase .laurel-grid {
    grid-template-columns: 1fr !important;
    width: min(80vw, 280px) !important;
  }
}

/* V5.7 requested corrections: recognition font, centered laurels, new Danny/Diane images, command alignment */
.recognition-showcase .section-heading h2 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  text-transform: none !important;
  color: var(--yellow) !important;
  font-size: clamp(1.85rem, 3.9vw, 4.05rem) !important;
  line-height: 1.02 !important;
}

.recognition-showcase .laurel-grid {
  justify-items: center !important;
  align-items: center !important;
}

.recognition-showcase .laurel-grid article {
  display: grid !important;
  place-items: center !important;
  justify-items: center !important;
  align-items: center !important;
}

.recognition-showcase .laurel-grid img {
  display: block !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}

#panel-danny::before {
  background-position: center center !important;
}

#panel-diane::before {
  background-position: center center !important;
}

.command-name-left { left: 18% !important; }
.command-name-center { left: 50% !important; }
.command-name-right { left: 82% !important; }

.command-copy {
  justify-self: center !important;
  text-align: center !important;
  margin-inline: auto !important;
}

.command-copy p,
.command-copy h2,
.command-copy .eyebrow {
  text-align: center !important;
}

@media (max-width: 760px) {
  #panel-danny::before,
  #panel-diane::before {
    background-position: center center !important;
  }
  .command-copy {
    justify-self: stretch !important;
    text-align: center !important;
  }
}

/* V5.8 hard correction: make image-backed sections scale with browser instead of behaving like fixed/cropped canvases. */
@media (min-width: 761px) {
  .media-section,
  .tab-panel {
    /* Match the 16:9 desktop artwork so the background artwork scales with viewport width. */
    min-height: max(560px, calc(100vw * 0.5625)) !important;
  }

  .hero.media-section,
  .closing.media-section {
    min-height: max(640px, calc(100vw * 0.5625)) !important;
  }

  .media-section::before,
  .tab-panel::before,
  .legacy-section::before,
  .recognition-showcase::before {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: 100% auto !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: translate3d(0, calc(var(--parallax-y, 0px) * .18), 0) scale(1) !important;
    transform-origin: center center !important;
  }

  .media-section:not(.parallax-ready)::before,
  .tab-panel:not(.parallax-ready)::before {
    transform: scale(1) !important;
  }
}

@media (max-width: 760px) {
  .media-section,
  .tab-panel {
    /* Match the 9:16 mobile artwork when mobile images are used. */
    min-height: max(620px, calc(100vw * 1.7778)) !important;
  }

  .media-section::before,
  .tab-panel::before,
  .legacy-section::before,
  .recognition-showcase::before {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: 100% auto !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
  }
}

/* V5.8 hard correction: center laurel art visually inside every box. */
.recognition-showcase .laurel-grid {
  justify-content: center !important;
  justify-items: center !important;
  align-content: center !important;
  align-items: center !important;
}

.recognition-showcase .laurel-grid article {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: clamp(8px, 1vw, 14px) !important;
  overflow: hidden !important;
}

.recognition-showcase .laurel-grid img {
  display: block !important;
  width: 84% !important;
  height: auto !important;
  max-width: 84% !important;
  max-height: 84% !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* V5.9 correction: remove responsive black gaps caused by 100% auto backgrounds.
   Use cover so every image-backed section fills its container while scaling with the browser. */
@media (min-width: 761px) {
  .media-section,
  .tab-panel,
  .legacy-section,
  .recognition-showcase {
    min-height: clamp(620px, 56.25vw, 900px) !important;
  }

  .hero.media-section,
  .closing.media-section {
    min-height: clamp(680px, 56.25vw, 980px) !important;
  }

  .media-section::before,
  .tab-panel::before,
  .legacy-section::before,
  .recognition-showcase::before {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: translate3d(0, calc(var(--parallax-y, 0px) * .12), 0) scale(1.015) !important;
    transform-origin: center center !important;
  }

  .media-section:not(.parallax-ready)::before,
  .tab-panel:not(.parallax-ready)::before {
    transform: scale(1.015) !important;
  }

  .people-section .tab-panel {
    min-height: clamp(620px, 56.25vw, 900px) !important;
  }
}

@media (max-width: 760px) {
  .media-section::before,
  .tab-panel::before,
  .legacy-section::before,
  .recognition-showcase::before {
    background-size: cover !important;
    background-position: center center !important;
  }
}

/* V5.9 correction: true visual centering for laurel art inside each card. */
.recognition-showcase .laurel-grid article {
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  line-height: 0 !important;
}

.recognition-showcase .laurel-grid img {
  display: block !important;
  margin: auto !important;
  width: min(86%, clamp(120px, 11vw, 190px)) !important;
  height: auto !important;
  max-width: 190px !important;
  max-height: 86% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: translateX(0) !important;
}

/* V5.10 hard layout correction: image-backed sections use image-aspect heights so backgrounds fill with no bottom gaps. */
@media (min-width: 761px) {
  .media-section,
  .tab-panel,
  .legacy-section,
  .recognition-showcase {
    min-height: 0 !important;
    height: max(620px, min(1000px, calc(100vw * 0.5625))) !important;
    padding-top: clamp(86px, 7vw, 118px) !important;
    padding-bottom: clamp(34px, 4vw, 64px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .hero.media-section,
  .closing.media-section {
    height: max(680px, min(1080px, calc(100vw * 0.5625))) !important;
  }

  .tabbed-section,
  .tabs {
    min-height: 0 !important;
    height: auto !important;
    background: #02080b !important;
    overflow: hidden !important;
  }

  .tabs .tab-panel.active {
    display: grid !important;
  }

  .people-section .tab-panel,
  .story-section .tab-panel {
    min-height: 0 !important;
    height: max(620px, min(1000px, calc(100vw * 0.5625))) !important;
  }

  /* Danny's new artwork is 3:2, so give that panel a matching scalable height. */
  #panel-danny {
    height: max(640px, min(1060px, calc(100vw * 0.666667))) !important;
  }

  .media-section::before,
  .tab-panel::before,
  .legacy-section::before,
  .recognition-showcase::before {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
  }

  #panel-danny::before {
    background-size: cover !important;
    background-position: center center !important;
  }
}

@media (max-width: 760px) {
  .tabbed-section,
  .tabs {
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .media-section,
  .tab-panel,
  .legacy-section,
  .recognition-showcase {
    min-height: 0 !important;
    height: max(680px, calc(100vw * 1.7778)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .media-section::before,
  .tab-panel::before,
  .legacy-section::before,
  .recognition-showcase::before {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
  }
}

/* V5.10 laurel centering: absolute-center each transparent PNG inside its card. */
.recognition-showcase .laurel-grid article {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.recognition-showcase .laurel-grid img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 82% !important;
  height: 82% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
}

/* V5.11 character tab height correction: all character panels share one scalable section height.
   This prevents Danny/Diane/Command from changing the section height when tabs switch. */
@media (min-width: 761px) {
  .people-section,
  .people-section .tabs {
    min-height: 0 !important;
    height: var(--character-section-height) !important;
    overflow: hidden !important;
  }

  .people-section {
    --character-section-height: max(620px, min(1000px, calc(100vw * 0.5625)));
  }

  .people-section .tab-panel,
  .people-section #panel-danny,
  .people-section #panel-diane,
  .people-section #panel-command,
  .people-section .tabs .tab-panel.active {
    min-height: 0 !important;
    height: var(--character-section-height) !important;
    max-height: var(--character-section-height) !important;
    padding-top: clamp(86px, 7vw, 118px) !important;
    padding-bottom: clamp(34px, 4vw, 64px) !important;
    overflow: hidden !important;
  }

  .people-section .tab-panel::before,
  .people-section #panel-danny::before,
  .people-section #panel-diane::before,
  .people-section #panel-command::before {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    transform: none !important;
  }

  .people-section #panel-danny::before {
    background-position: center center !important;
  }

  .people-section #panel-diane::before {
    background-position: center center !important;
  }

  .people-section #panel-command::before {
    background-position: center center !important;
  }
}

@media (max-width: 760px) {
  .people-section,
  .people-section .tabs {
    min-height: 0 !important;
    height: var(--character-section-height-mobile) !important;
    overflow: hidden !important;
  }

  .people-section {
    --character-section-height-mobile: max(680px, calc(100vw * 1.7778));
  }

  .people-section .tab-panel,
  .people-section #panel-danny,
  .people-section #panel-diane,
  .people-section #panel-command,
  .people-section .tabs .tab-panel.active {
    min-height: 0 !important;
    height: var(--character-section-height-mobile) !important;
    max-height: var(--character-section-height-mobile) !important;
    overflow: hidden !important;
  }

  .people-section .tab-panel::before,
  .people-section #panel-danny::before,
  .people-section #panel-diane::before,
  .people-section #panel-command::before {
    background-size: cover !important;
    background-position: center center !important;
    transform: none !important;
  }
}

/* V6 recognition heading cleanup: remove stray divider crossing the title and keep section scalable. */
.recognition-showcase::after {
  display: none !important;
  content: none !important;
}

.recognition-showcase .section-heading {
  position: relative !important;
  z-index: 3 !important;
  margin-bottom: clamp(24px, 3vw, 42px) !important;
  border: 0 !important;
}

.recognition-showcase .section-heading::before,
.recognition-showcase .section-heading::after,
.recognition-showcase .section-heading h2::before,
.recognition-showcase .section-heading h2::after {
  display: none !important;
  content: none !important;
}

.recognition-showcase .section-heading h2 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  text-transform: none !important;
  line-height: 1.02 !important;
  color: var(--yellow) !important;
}

/* V6 full image-section scaling standardization. */
@media (min-width: 761px) {
  .media-section,
  .tab-panel,
  .legacy-section,
  .recognition-showcase {
    min-height: 0 !important;
    height: clamp(620px, 56.25vw, 1000px) !important;
    overflow: hidden !important;
  }

  .hero.media-section,
  .closing.media-section {
    height: clamp(680px, 56.25vw, 1080px) !important;
  }

  .people-section,
  .people-section .tabs,
  .people-section .tab-panel,
  .people-section #panel-danny,
  .people-section #panel-diane,
  .people-section #panel-command,
  .people-section .tabs .tab-panel.active {
    height: clamp(620px, 56.25vw, 1000px) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .media-section::before,
  .tab-panel::before,
  .legacy-section::before,
  .recognition-showcase::before,
  .people-section .tab-panel::before {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    transform: none !important;
  }
}

@media (max-width: 760px) {
  .media-section,
  .tab-panel,
  .legacy-section,
  .recognition-showcase,
  .people-section,
  .people-section .tabs,
  .people-section .tab-panel,
  .people-section #panel-danny,
  .people-section #panel-diane,
  .people-section #panel-command,
  .people-section .tabs .tab-panel.active {
    min-height: 0 !important;
    height: max(680px, calc(100vw * 1.7778)) !important;
    overflow: hidden !important;
  }

  .media-section::before,
  .tab-panel::before,
  .legacy-section::before,
  .recognition-showcase::before,
  .people-section .tab-panel::before {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
  }
}

/* V6.1 live-site cleanup: embedded teaser player and missing video-file fallback */
.teaser-embed {
  display: block;
  width: min(100%, 980px);
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.teaser-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.teaser-embed::after,
.teaser-poster::after {
  content: none !important;
}
.video-first-hero::before,
.animated-bg-ready::before,
.media-section::before,
.tab-panel::before {
  background-size: cover;
  background-position: center center;
}

/* V6.2 mobile correction pass: restore phone layouts without cropping/cutoff. */
@media (max-width: 760px) {
  /* Let content-driven sections expand on phone instead of clipping at a fixed image height. */
  .recognition-showcase,
  .source-section,
  .legacy-section {
    height: auto !important;
    min-height: max(720px, 100svh) !important;
    overflow: visible !important;
  }

  .source-section::before,
  .legacy-section::before,
  .recognition-showcase::before {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    transform: none !important;
  }

  /* Reframe problem backgrounds for mobile so the subject/artwork stays on-screen. */
  .legacy-section::before {
    background-position: left center !important;
  }

  .source-section::before {
    background-position: center center !important;
  }

  /* Recognition: show all six laurels, two centered columns, no clipped third card. */
  .recognition-showcase {
    padding-top: 76px !important;
    padding-bottom: 60px !important;
  }

  .recognition-showcase .section-heading {
    margin-bottom: 24px !important;
  }

  .recognition-showcase .laurel-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(92vw, 430px) !important;
    max-width: 430px !important;
    gap: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: center !important;
    justify-items: center !important;
  }

  .recognition-showcase .laurel-grid article {
    width: 100% !important;
    aspect-ratio: 1.48 / 1 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .recognition-showcase .laurel-grid img {
    width: 84% !important;
    height: 84% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* Character tabs: prevent landscape character art from being cropped out on phones. */
  .people-section,
  .people-section .tabs,
  .people-section .tab-panel,
  .people-section #panel-danny,
  .people-section #panel-diane,
  .people-section #panel-command,
  .people-section .tabs .tab-panel.active {
    height: max(760px, 100svh) !important;
    min-height: max(760px, 100svh) !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .people-section #panel-danny::before,
  .people-section #panel-diane::before {
    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: #02080b !important;
  }

  .people-section #panel-command::before {
    background-size: cover !important;
    background-position: center center !important;
  }

  .people-section .tab-panel {
    align-items: end !important;
    padding: 120px 16px 24px !important;
  }

  .people-section .character-copy {
    width: 100% !important;
    max-width: none !important;
    justify-self: center !important;
    margin: 0 auto !important;
  }

  /* Story/Act tabs: center controls and cards; remove stray adjacent box/overflow on Act III. */
  .story-tabs-wrap .tab-list.side-tab-list,
  .story-tabs {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    justify-content: center !important;
    overflow-x: auto !important;
  }

  .story-section,
  .story-section .tabs,
  .story-section .tab-panel,
  .story-section .tabs .tab-panel.active {
    height: max(760px, 100svh) !important;
    min-height: max(760px, 100svh) !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .story-section .tab-panel {
    align-items: end !important;
    justify-items: center !important;
    padding: 138px 16px 28px !important;
  }

  .story-section .tab-panel::before {
    background-size: cover !important;
    background-position: center center !important;
  }

  #panel-act3::before {
    background-position: center center !important;
  }

  .story-card {
    width: 100% !important;
    max-width: 520px !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .story-card p,
  .story-card h2,
  .story-card .eyebrow {
    text-align: center !important;
  }
}

@media (max-width: 420px) {
  .recognition-showcase .laurel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(94vw, 390px) !important;
  }

  .recognition-showcase .section-heading h2 {
    font-size: clamp(1.65rem, 9vw, 2.4rem) !important;
  }
}


/* V6.3 mobile corrective pass: sizing, framing, preloading-friendly layout */
@media (max-width: 760px) {
  /* General phone typography: prevent right-side clipping and oversized headings. */
  body { overflow-x: hidden !important; }
  .site-header { padding: 12px 14px !important; }
  .brand { font-size: 1.08rem !important; }
  .hero-copy,
  .copy-block,
  .overlay-copy,
  .contact-copy {
    max-width: calc(100vw - 32px) !important;
    width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-copy { align-self: center !important; }
  h1 { font-size: clamp(3.35rem, 17vw, 5.8rem) !important; line-height: .92 !important; }
  h2,
  .copy-block h2,
  .overlay-copy h2,
  .section-heading h2,
  .distribution-layout h2 {
    font-size: clamp(1.78rem, 8.2vw, 2.72rem) !important;
    line-height: 1.04 !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance;
  }
  p { font-size: .98rem !important; line-height: 1.48 !important; }

  /* Title page: keep artwork and text inside phone viewport. */
  .hero.media-section {
    height: 100svh !important;
    min-height: 680px !important;
    padding: 82px 16px 34px !important;
    align-items: center !important;
  }
  .hero.media-section::before {
    background-size: cover !important;
    background-position: center center !important;
  }

  /* Legacy: use the desktop artwork and lock the visible artwork to the left side. */
  .legacy-section {
    height: auto !important;
    min-height: 760px !important;
    padding: 88px 16px 44px !important;
    align-items: end !important;
  }
  .legacy-section::before {
    background-size: auto 100% !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
  }
  .legacy-section .right-copy,
  .legacy-section .copy-block {
    justify-self: center !important;
    text-align: left !important;
    background: rgba(2,8,11,.62) !important;
    border: 1px solid rgba(232,239,232,.14) !important;
    padding: 18px !important;
    backdrop-filter: blur(4px);
  }

  /* Source material: use the desktop artwork and keep the book/subject visible on the right. */
  .source-section {
    height: auto !important;
    min-height: 760px !important;
    padding: 88px 16px 44px !important;
    align-items: end !important;
  }
  .source-section::before {
    background-size: auto 100% !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
  }
  .source-section .left-copy,
  .source-section .copy-block {
    justify-self: center !important;
    text-align: left !important;
    background: rgba(2,8,11,.62) !important;
    border: 1px solid rgba(232,239,232,.14) !important;
    padding: 18px !important;
    backdrop-filter: blur(4px);
  }

  /* Character tabs: one consistent phone height; no contain/letterbox black boxes. */
  .people-section,
  .people-section .tabs,
  .people-section .tab-panel,
  .people-section #panel-danny,
  .people-section #panel-diane,
  .people-section #panel-command,
  .people-section .tabs .tab-panel.active {
    height: 100svh !important;
    min-height: 720px !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  .people-section .tab-panel {
    padding: 118px 16px 24px !important;
    align-items: end !important;
    justify-items: center !important;
  }
  .people-section .tab-panel::before,
  .people-section #panel-danny::before,
  .people-section #panel-diane::before,
  .people-section #panel-command::before {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    transform: none !important;
  }
  .people-section #panel-danny::before {
    background-position: 39% center !important;
  }
  .people-section #panel-diane::before {
    background-position: 62% center !important;
  }
  .people-section #panel-command::before {
    background-size: cover !important;
    background-position: center center !important;
  }
  .people-section .character-copy,
  .people-section .command-copy {
    width: calc(100vw - 32px) !important;
    max-width: 520px !important;
    min-height: auto !important;
    margin: 0 auto !important;
    justify-self: center !important;
    padding: 17px !important;
  }

  /* Act tabs: center menu/card and keep Act III from exposing adjacent/stray boxes. */
  .story-section,
  .story-section .tabs,
  .story-section .tab-panel,
  .story-section .tabs .tab-panel.active {
    height: 100svh !important;
    min-height: 720px !important;
    overflow: hidden !important;
  }
  .story-tabs-wrap .tab-list.side-tab-list,
  .story-tabs {
    top: 66px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 28px) !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  .story-section .tab-panel {
    padding: 132px 16px 26px !important;
    justify-items: center !important;
    align-items: end !important;
  }
  .story-section .tab-panel::before {
    background-size: cover !important;
    background-position: center center !important;
  }
  #panel-act3::before { background-position: center center !important; }
  .story-card {
    width: calc(100vw - 32px) !important;
    max-width: 520px !important;
    min-height: auto !important;
    justify-self: center !important;
    margin: 0 auto !important;
    text-align: center !important;
    padding: 17px !important;
  }
  .story-card p,
  .story-card h2,
  .story-card .eyebrow { text-align: center !important; }
}

/* V6.4 mobile image-first correction: show Character and Act art without side cropping or text covering faces. */
@media (max-width: 760px) {
  .people-section,
  .people-section .tabs,
  .story-section,
  .story-section .tabs {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .people-section .tabs [role="tabpanel"].active,
  .story-section .tabs [role="tabpanel"].active {
    display: flex !important;
    flex-direction: column !important;
  }

  .people-section .tab-panel,
  .people-section #panel-danny,
  .people-section #panel-diane,
  .people-section #panel-command,
  .story-section .tab-panel,
  .story-section .tabs .tab-panel.active {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 112px 14px 32px !important;
    align-items: center !important;
    justify-items: center !important;
    background: #02080b !important;
  }

  .people-section .tab-panel .veil,
  .story-section .tab-panel .veil {
    display: none !important;
  }

  .people-section .tab-panel::before,
  .story-section .tab-panel::before {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    z-index: 1 !important;
    width: min(100%, calc(100vw - 28px)) !important;
    max-width: 520px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 14px !important;
    transform: none !important;
    background-repeat: no-repeat !important;
    background-color: #02080b !important;
    border: 1px solid rgba(244,185,40,.22) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.42) !important;
  }

  .people-section #panel-danny::before {
    aspect-ratio: 3 / 2 !important;
    background-size: contain !important;
    background-position: center center !important;
  }

  .people-section #panel-diane::before {
    aspect-ratio: 16 / 9 !important;
    background-size: contain !important;
    background-position: center center !important;
  }

  .people-section #panel-command::before {
    aspect-ratio: 9 / 16 !important;
    background-size: contain !important;
    background-position: center top !important;
    max-width: min(100%, 420px) !important;
  }

  .people-section .character-copy,
  .people-section .command-copy,
  .story-section .story-card {
    position: relative !important;
    z-index: 3 !important;
    width: min(100%, calc(100vw - 28px)) !important;
    max-width: 520px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    justify-self: center !important;
    align-self: center !important;
    text-align: left !important;
    padding: 17px !important;
    background: rgba(2,8,11,.74) !important;
  }

  .people-section .character-copy h2,
  .people-section .command-copy h2,
  .story-section .story-card h2 {
    font-size: clamp(1.65rem, 7.2vw, 2.45rem) !important;
  }

  .command-name-row {
    display: none !important;
  }

  .story-tabs-wrap .tab-list.side-tab-list,
  .story-tabs {
    top: 66px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: calc(100vw - 28px) !important;
    overflow-x: auto !important;
  }

  .story-section .tab-panel::before {
    aspect-ratio: 9 / 16 !important;
    background-size: contain !important;
    background-position: center center !important;
    max-width: min(100%, 420px) !important;
  }

  #panel-act1::before,
  #panel-act2::before,
  #panel-act3::before {
    background-size: contain !important;
    background-position: center center !important;
  }

  .story-card p,
  .story-card h2,
  .story-card .eyebrow {
    text-align: left !important;
  }
}

/* V6.5 mobile unification: Characters and Acts use the same image-first frame.
   This prevents command/act images from being oversized or side-cropped and keeps text below artwork. */
@media (max-width: 760px) {
  .people-section,
  .people-section .tabs,
  .story-section,
  .story-section .tabs {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: #02080b !important;
  }

  .people-section .tabs [role="tabpanel"].active,
  .story-section .tabs [role="tabpanel"].active {
    display: flex !important;
    flex-direction: column !important;
  }

  .people-section .tab-panel,
  .people-section #panel-danny,
  .people-section #panel-diane,
  .people-section #panel-command,
  .story-section .tab-panel,
  .story-section #panel-act1,
  .story-section #panel-act2,
  .story-section #panel-act3 {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 112px 14px 32px !important;
    align-items: center !important;
    justify-items: center !important;
    background: #02080b !important;
  }

  .people-section .tab-panel .veil,
  .story-section .tab-panel .veil,
  .command-name-row {
    display: none !important;
  }

  .people-section .tab-panel::before,
  .people-section #panel-danny::before,
  .people-section #panel-diane::before,
  .people-section #panel-command::before,
  .story-section .tab-panel::before,
  .story-section #panel-act1::before,
  .story-section #panel-act2::before,
  .story-section #panel-act3::before {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    content: "" !important;
    flex: 0 0 auto !important;
    z-index: 1 !important;
    width: min(100%, calc(100vw - 28px)) !important;
    max-width: 520px !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 14px !important;
    transform: none !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #02080b !important;
    border: 1px solid rgba(244,185,40,.22) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.42) !important;
  }

  .people-section .character-copy,
  .people-section .command-copy,
  .story-section .story-card {
    position: relative !important;
    z-index: 3 !important;
    width: min(100%, calc(100vw - 28px)) !important;
    max-width: 520px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    align-self: center !important;
    justify-self: center !important;
    text-align: left !important;
    padding: 17px !important;
    background: rgba(2,8,11,.78) !important;
    border: 1px solid rgba(232,239,232,.14) !important;
    backdrop-filter: blur(4px);
  }

  .story-card p,
  .story-card h2,
  .story-card .eyebrow {
    text-align: left !important;
  }

  .people-section .character-copy h2,
  .people-section .command-copy h2,
  .story-section .story-card h2 {
    font-size: clamp(1.62rem, 7vw, 2.35rem) !important;
    line-height: 1.05 !important;
  }
}

/* V6.6 phone correction: use desktop-wide art for Command and Acts; Danny fills frame. */
@media (max-width: 760px) {
  .people-section #panel-command::before,
  .story-section #panel-act1::before,
  .story-section #panel-act2::before,
  .story-section #panel-act3::before {
    aspect-ratio: 16 / 9 !important;
    width: min(100%, calc(100vw - 28px)) !important;
    max-width: 520px !important;
    background-size: contain !important;
    background-position: center center !important;
    background-color: #02080b !important;
  }

  .people-section #panel-danny::before {
    aspect-ratio: 16 / 9 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-color: #02080b !important;
  }

  .people-section #panel-diane::before {
    aspect-ratio: 16 / 9 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-color: #02080b !important;
  }
}


/* V6.7 mobile image-source correction: do not use vertical mobile crops for Command or Acts.
   Command and Acts use the specified desktop-wide images, scaled to fit the image box.
   Danny fills the same 16:9 frame; Diane keeps the working treatment. */
@media (max-width: 760px) {
  .people-section #panel-command::before {
    background-image: url("assets/images/page-18.jpg") !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .story-section #panel-act1::before {
    background-image: url("assets/images/page-04.jpg") !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .story-section #panel-act2::before {
    background-image: url("assets/images/page-22.jpg") !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .story-section #panel-act3::before {
    background-image: url("assets/images/page-26.jpg") !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .people-section #panel-danny::before {
    background-image: url("assets/images/danny-x.jpeg") !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .people-section #panel-diane::before {
    background-image: url("assets/images/diane-x.jpeg") !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .people-section #panel-command::before,
  .story-section #panel-act1::before,
  .story-section #panel-act2::before,
  .story-section #panel-act3::before,
  .people-section #panel-danny::before,
  .people-section #panel-diane::before {
    width: min(100%, calc(100vw - 28px)) !important;
    max-width: 520px !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
  }
}