:root {
  --display: 'Playfair Display', Georgia, serif;
  --cond:    'Barlow Condensed', sans-serif;
  --body:    'Barlow', sans-serif;

  
  --p-rose:    #f48fb1;   
  --p-peach:   #ffab91;   
  --p-yellow:  #fff176;   
  --p-mint:    #a5d6a7;   
  --p-sky:     #81d4fa;   
  --p-lavender:#ce93d8;   
  --p-teal:    #80cbc4;   
  --p-lilac:   #b39ddb;   
}

/* ─── Loading screen ─── */
.loader {
  position: fixed; inset: 0; z-index: 12000;
  background: #111;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.5s ease;
}
.loader.done { opacity: 0; pointer-events: none; }

.loader-center {
  position: relative;
  width: clamp(200px, 40vw, 280px);
  height: clamp(200px, 40vw, 280px);
  display: flex; align-items: center; justify-content: center;
}
.loader-logo {
  width: clamp(80px, 16vw, 110px);
  height: auto; border-radius: 50%; z-index: 1;
  animation: loaderPulse 1.8s ease-in-out infinite;
}
@keyframes loaderPulse { 0%,100%{transform:scale(0.96);opacity:.85;} 50%{transform:scale(1.04);opacity:1;} }

.loader-dots {
  position: absolute; inset: 0;
  animation: loaderSpin 2s linear infinite;
  will-change: transform;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }

.loader-dots span {
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 12px; margin: -6px;
  border-radius: 50%;
}

.loader-dots span:nth-child(1) { background:#f48fb1; transform:rotate(0deg)   translateX(clamp(100px,20vw,140px)); opacity:1;   }
.loader-dots span:nth-child(2) { background:#ffab91; transform:rotate(60deg)  translateX(clamp(100px,20vw,140px)); opacity:0.82;}
.loader-dots span:nth-child(3) { background:#fff176; transform:rotate(120deg) translateX(clamp(100px,20vw,140px)); opacity:0.64;}
.loader-dots span:nth-child(4) { background:#a5d6a7; transform:rotate(180deg) translateX(clamp(100px,20vw,140px)); opacity:0.46;}
.loader-dots span:nth-child(5) { background:#81d4fa; transform:rotate(240deg) translateX(clamp(100px,20vw,140px)); opacity:0.28;}
.loader-dots span:nth-child(6) { background:#ce93d8; transform:rotate(300deg) translateX(clamp(100px,20vw,140px)); opacity:0.14;}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; background: #111; }
body { overflow-y: auto; overflow-x: clip; }
html { overflow-x: clip; max-width: 100%; }

.landscape-nudge {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: #0d0d0d;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px; padding: 40px;
  text-align: center;
}
.landscape-nudge-icon {
  font-size: 48px;
  animation: rotatePhone 2s ease-in-out infinite;
}
@keyframes rotatePhone {
  0%, 100% { transform: rotate(0deg); }
  40%, 60% { transform: rotate(90deg); }
}
.landscape-nudge p {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); line-height: 1.6;
}
.landscape-nudge-skip {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.25); margin-top: 12px;
  cursor: pointer; background: none; border: none;
  text-decoration: underline;
}

@media (max-width: 600px) and (orientation: portrait) {
  .landscape-nudge { display: flex; }
}

.grid-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(rgba(0,0,0,0.07) 1px,transparent 1px), linear-gradient(90deg,rgba(0,0,0,0.07) 1px,transparent 1px);
  background-size: 36px 36px;
}
.grid-overlay--light {
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px);
  background-size: 36px 36px;
}

.color-blob { position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:1; }

.stripe-bar { position:absolute; left:0; right:0; height:6px; z-index:10; pointer-events:none; }
.stripe-bar--top {
  top:0;
  background: repeating-linear-gradient(90deg,
    var(--p-rose) 0, var(--p-rose) 14px,
    var(--p-peach) 14px, var(--p-peach) 28px,
    var(--p-yellow) 28px, var(--p-yellow) 42px,
    var(--p-mint) 42px, var(--p-mint) 56px,
    var(--p-sky) 56px, var(--p-sky) 70px,
    var(--p-lavender) 70px, var(--p-lavender) 84px,
    transparent 84px, transparent 96px
  );
  opacity: 0.75;
}
.stripe-bar--bottom {
  bottom:0;
  background: repeating-linear-gradient(90deg,
    var(--p-sky) 0, var(--p-sky) 14px,
    var(--p-lavender) 14px, var(--p-lavender) 28px,
    var(--p-teal) 28px, var(--p-teal) 42px,
    var(--p-rose) 42px, var(--p-rose) 56px,
    transparent 56px, transparent 70px
  );
  opacity: 0.5;
}

.bg-slab { position:absolute; inset:0; z-index:0; }

.cover-photos { position:absolute; inset:0; z-index:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.cp { background-size:cover; background-position:center; }
.cover-photo-wash { position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,0,0,0.88) 0%,rgba(0,0,0,0.55) 100%); }

/* Slide nav controls hidden — desktop is scroll-based */
.progress-bar, .slide-counter, .nav-dots, .nav-btn { display: none !important; }

.progress-bar { position:fixed; top:0; left:0; right:0; height:3px; z-index:600; background:rgba(255,255,255,0.08); }
.progress-fill {
  height:100%;
  background: linear-gradient(90deg, var(--p-rose), var(--p-peach), var(--p-yellow), var(--p-mint), var(--p-sky), var(--p-lavender));
  transition:width 0.4s ease;
  box-shadow: 0 0 8px rgba(244,143,177,0.5);
}

.slide-counter { position:fixed; top:14px; right:20px; z-index:600; font-family:var(--cond); font-size:11px; letter-spacing:0.22em; font-weight:600; color:rgba(255,255,255,0.28); }

.nav-dots { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:600; }
.nav-dot { width:6px; height:6px; border-radius:50%; border:none; background:rgba(255,255,255,0.18); cursor:pointer; transition:all 0.25s; }
.nav-dot.active { background: var(--p-peach); transform:scale(1.5); box-shadow: 0 0 6px var(--p-peach); }

.nav-btn {
  position:fixed; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.7); border:2px solid rgba(255,255,255,0.7);
  color:#fff; font-family:var(--cond); font-size:20px; font-weight:700;
  width:46px; height:46px; border-radius:4px;
  cursor:pointer; z-index:600; transition:all 0.2s;
  display:flex; align-items:center; justify-content:center;
  text-shadow:0 1px 4px rgba(0,0,0,0.8);
  box-shadow:0 2px 12px rgba(0,0,0,0.5);
}
.nav-btn:hover { border-color: var(--p-peach); color: var(--p-peach); }
.nav-btn--prev { left:10px; }
.nav-btn--next { right:10px; }

.deck { width:100%; }
.slide { position:relative; display:flex; flex-direction:column; padding:56px 72px 64px; min-height:100vh; overflow:visible; }

/* slide/active/out classes are no-ops on desktop (scroll layout) */
.slide.active, .slide.out { opacity:1; transform:none; pointer-events:all; }

.slide-label-top { position:absolute; top:24px; left:72px; font-family:var(--cond); font-size:10px; font-weight:700; letter-spacing:0.3em; text-transform:uppercase; color:rgba(0,0,0,0.35); z-index:10; }
.slide-label-top--light { color:rgba(255,255,255,0.35); }

.stamp { position:absolute; bottom:52px; right:72px; z-index:10; font-family:var(--cond); font-weight:900; font-size:11px; letter-spacing:0.3em; text-align:center; line-height:1.4; border:2px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.2); padding:6px 12px; transform:rotate(-5deg); }

.slide--cover { justify-content:flex-end; padding-bottom:80px; }
.cover-inner { position:relative; z-index:5; }
.cover-kicker { font-family:var(--cond); font-size:12px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:16px; }
.cover-em { font-family:var(--display); font-style:italic; font-weight:700; font-size:clamp(52px,8vw,100px); line-height:1.0; color:rgba(255,255,255,0.9); display:block; }
.cover-main { font-family:var(--cond); font-weight:900; font-size:clamp(72px,12vw,152px); line-height:0.87; letter-spacing:0.02em; color:#fff; display:block; text-shadow: 4px 4px 0 var(--p-rose), 8px 8px 0 rgba(244,143,177,0.2); }
.cover-rule { width:100%; height:1px; background:rgba(255,255,255,0.2); margin:18px 0; }
.cover-logline { font-family:var(--display); font-style:italic; font-size:clamp(13px,1.5vw,17px); line-height:1.65; color:rgba(255,255,255,0.6); max-width:580px; margin-bottom:18px; }
.cover-meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-family:var(--cond); font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.35); }
.pipe { color:rgba(255,255,255,0.15); }
.cover-side-text { position:absolute; top:50%; right:60px; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; font-family:var(--display); font-style:italic; font-size:11px; color:rgba(255,255,255,0.18); letter-spacing:0.08em; z-index:5; }

.slide--whatis { justify-content:center; }
.whatis-layout { display:grid; grid-template-columns:1fr 1fr; gap:52px; position:relative; z-index:5; margin-top:20px; align-items:start; }
.whatis-big { font-family:var(--cond); font-weight:900; font-size:clamp(40px,6vw,76px); line-height:0.95; color:#fff; margin-bottom:16px; }
.whatis-big em { font-family:var(--display); font-style:italic; font-size:0.8em; color: var(--p-lavender); display:block; }
.whatis-sub { font-family:var(--body); font-size:clamp(13px,1.4vw,16px); line-height:1.65; color:rgba(255,255,255,0.6); margin-bottom:20px; }
.whatis-tags { display:flex; flex-wrap:wrap; gap:8px; }
.wtag { font-family:var(--cond); font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; border:1.5px solid; padding:4px 10px; }
.whatis-right { display:flex; flex-direction:column; gap:16px; }
.whatis-point { display:flex; gap:16px; align-items:flex-start; padding:14px 18px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.04); }
.wp-num { font-family:var(--cond); font-weight:900; font-size:32px; line-height:1; flex-shrink:0; }
.wp-text { font-family:var(--body); font-size:clamp(14px,1.25vw,16px); line-height:1.65; color:rgba(255,255,255,0.65); padding-top:4px; }
.wp-text strong { color:#fff; }

.whatis-point:nth-child(1) .wp-num { color: var(--p-lavender); }
.whatis-point:nth-child(2) .wp-num { color: var(--p-sky); }
.whatis-point:nth-child(3) .wp-num { color: var(--p-mint); }
.whatis-point:nth-child(4) .wp-num { color: var(--p-yellow); }

.slide--story { justify-content:center; }
.story-layout { display:grid; grid-template-columns:1fr 1fr; gap:52px; position:relative; z-index:5; margin-top:20px; align-items:start; }
.story-drop { font-family:var(--display); font-weight:900; font-size:130px; line-height:0.75; color: var(--p-rose); float:left; margin-right:6px; margin-top:10px; }
.sh-dim { font-family:var(--cond); font-weight:700; font-size:clamp(22px,3vw,36px); text-transform:uppercase; letter-spacing:0.02em; color:rgba(26,26,26,0.45); }
.sh-it { font-family:var(--display); font-style:italic; font-weight:700; font-size:clamp(18px,2.2vw,28px); color:#666; display:block; margin:6px 0; }
.sh-punch { font-family:var(--cond); font-weight:900; font-size:clamp(42px,6.5vw,84px); line-height:0.9; color:#111; display:block; margin-top:8px; text-shadow: 3px 3px 0 var(--p-rose), 6px 6px 0 rgba(244,143,177,0.15); }
.story-planet { width:70px; height:70px; border-radius:50%; background:radial-gradient(circle at 38% 35%, var(--p-lavender) 0%, #7b1fa2 40%, #3a0050 100%); box-shadow: 0 0 20px 5px rgba(206,147,216,0.3); margin-top:20px; }
@media (hover: hover) { .story-planet { animation:pfloat 6s ease-in-out infinite; } }
.story-right { border-left:2px solid rgba(0,0,0,0.08); padding-left:36px; }
.story-right p { font-family:var(--body); font-size:clamp(12px,1.25vw,14px); line-height:1.78; color:#444; margin-bottom:16px; }
.story-right strong { color:#111; }
.story-kicker { border-top:2px solid #111; padding-top:16px; margin-top:8px; font-family:var(--cond); font-size:clamp(14px,1.6vw,18px); font-weight:600; line-height:1.5; color:#333; }
.story-kicker strong { color: #c62828; }
@keyframes pfloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.character-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  position: relative; z-index: 5;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 2px solid rgba(0,0,0,0.08);
}
.char-card {
  padding: 20px 20px 22px;
  border: 1.5px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.6);
  position: relative;
}
.char-num {
  font-family: var(--cond);
  font-size: 10px; font-weight: 900;
  letter-spacing: 0.25em; color: var(--p-rose);
  margin-bottom: 6px;
}
.char-name {
  font-family: var(--cond);
  font-weight: 900; font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: 0.04em; color: #111;
  margin-bottom: 2px;
}
.char-role {
  font-family: var(--display);
  font-style: italic; font-size: clamp(13px, 1.1vw, 14px);
  color: #888; margin-bottom: 10px;
}
.char-desc {
  font-family: var(--body);
  font-size: clamp(13px, 1.1vw, 14px);
  line-height: 1.7; color: #555;
}

@media (max-width: 900px) {
  .character-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .character-grid { grid-template-columns: 1fr; }
}

.slide--stills, .slide--stills2 { padding:50px 56px 60px; justify-content:flex-start; }
.stills-grid { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:190px 190px; gap:6px; margin-top:40px; width:100%; }
.stills-grid--alt { grid-template-columns:1fr 1fr 2fr; }
.sg-item { width:100%; height:190px; object-fit:cover; object-position:center; display:block; }
.sg-big { grid-row:1/3; height:386px; }
.sg-tall { grid-row:1/3; height:386px; }
.sg-wide { grid-column:1/3; }
.stills-caption { font-family:var(--cond); font-size:10px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.3); margin-top:10px; position:relative; z-index:5; }
.stills-caption a { color: var(--p-peach); text-decoration:none; }

.slide--tone { justify-content:center; }
.tone-layout { display:grid; grid-template-columns:auto 1fr; gap:52px; align-items:center; position:relative; z-index:5; margin-top:10px; }
.tone-words { display:flex; flex-direction:column; gap:1px; }
.tw { font-family:var(--cond); font-weight:900; font-size:clamp(34px,5.2vw,66px); line-height:0.95; display:block; letter-spacing:0.02em; }
.tw--out { color:transparent !important; -webkit-text-stroke:1.5px; }
.tone-right { border-left:1px solid rgba(0,0,0,0.1); padding-left:40px; }
.tone-intro { font-family:var(--display); font-style:italic; font-size:clamp(16px,2vw,22px); color:#111; margin-bottom:18px; line-height:1.4; }
.tone-comps-mini { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap; }
.tcm { padding:10px 14px; background:rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.1); }
.tcm-title { font-family:var(--cond); font-weight:700; font-size:14px; letter-spacing:0.05em; color:#111; }
.tcm-role { font-family:var(--cond); font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:#888; margin-top:2px; }
.tcm-plus { font-family:var(--cond); font-weight:900; font-size:24px; color:#ccc; }
.tone-body { font-family:var(--body); font-size:clamp(12px,1.2vw,14px); line-height:1.75; color:#444; margin-bottom:16px; }
.tone-body em { font-style:normal; font-weight:600; color:#c62828; }
.tone-body strong { color:#111; }
.tone-pull { font-family:var(--display); font-style:italic; font-size:clamp(14px,1.5vw,17px); color:#888; border-top:1px solid #ddd; padding-top:14px; }

.slide--comps { justify-content:center; }
.comps-layout { display:flex; align-items:stretch; gap:0; position:relative; z-index:5; margin-top:20px; width:100%; border:1px solid rgba(255,255,255,0.1); }
.comp-card { flex:1; display:flex; flex-direction:column; }
.comp-card+.comp-card { border-left:1px solid rgba(255,255,255,0.1); }
.comp-img-wrap { position:relative; height:190px; overflow:hidden; flex-shrink:0; }
.comp-img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; mix-blend-mode:luminosity; opacity:0.75; }
.comp-img-overlay { position:absolute; inset:0; z-index:1; pointer-events:none; }
.comp-body { padding:16px 20px; flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.comp-tag { font-family:var(--cond); font-size:12px; font-weight:700; letter-spacing:0.22em; margin-bottom:6px; }
.comp-title { font-family:var(--cond); font-weight:900; font-size:clamp(20px,2.5vw,30px); line-height:1.0; color:#fff; margin-bottom:10px; }
.comp-blurb { font-family:var(--body); font-size:12px; line-height:1.65; color:rgba(255,255,255,0.5); margin-bottom:14px; flex:1; }
.comp-what { font-family:var(--cond); font-weight:900; font-size:12px; letter-spacing:0.22em; text-transform:uppercase; border-top:1px solid; padding-top:10px; }
.comp-x { display:flex; align-items:center; justify-content:center; font-family:var(--cond); font-weight:900; font-size:32px; color:rgba(255,255,255,0.2); padding:0 16px; flex-shrink:0; }

.slide--director { justify-content:center; }
.director-layout { display:grid; grid-template-columns:1fr 2fr; gap:40px; align-items:start; position:relative; z-index:5; margin-top:10px; }
.dir-poster { width:100%; height:160px; background-size:cover; background-position:center; position:relative; margin-bottom:14px; }
.dir-poster-wash { position:absolute; inset:0; background:linear-gradient(to top,rgba(255,255,255,1) 0%,transparent 60%); }
.director-role-tag { font-family:var(--cond); font-size:9px; font-weight:700; letter-spacing:0.3em; color: var(--p-peach); filter:saturate(1.5) brightness(0.75); text-transform:uppercase; margin-bottom:8px; }
.director-name { font-family:var(--cond); font-weight:900; font-size:clamp(44px,6.5vw,80px); line-height:0.9; color:#111; margin-bottom:14px; text-shadow: 3px 3px 0 rgba(255,171,145,0.3); }
.dp-label { font-family:var(--cond); font-size:9px; font-weight:700; letter-spacing:0.25em; color:#999; text-transform:uppercase; margin-bottom:6px; }
.dp-item { font-family:var(--body); font-size:11px; color:#666; margin-bottom:3px; padding-left:10px; border-left:2px solid #ddd; }
.director-url { display:inline-block; margin-top:12px; font-family:var(--cond); font-size:10px; font-weight:700; letter-spacing:0.18em; color: #bf360c; text-decoration:none; border-bottom:1px solid #bf360c; padding-bottom:2px; }
.director-right p { font-family:var(--body); font-size:clamp(11px,1.2vw,13px); line-height:1.78; color:#444; margin-bottom:14px; }
.director-right strong { color:#111; font-weight:600; }
.director-personal { border-left:3px solid var(--p-peach); padding-left:14px; margin:14px 0; background:rgba(255,171,145,0.08); }
.director-personal p { color:#333 !important; }
.dir-films-row { display:flex; gap:12px; margin-top:12px; }
.dfr { flex:1; }
.dfr-img { width:100%; height:80px; object-fit:cover; object-position:top; display:block; }
.dfr-label { font-family:var(--cond); font-size:9px; font-weight:700; letter-spacing:0.15em; color:#888; text-transform:uppercase; margin-top:5px; }

.slide--team { justify-content:center; }
.team-layout { display:grid; grid-template-columns:1fr 1fr; gap:16px; position:relative; z-index:5; margin-top:16px; width:100%; }
.team-card { padding:18px 20px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); }
.tc-role { font-family:var(--cond); font-size:9px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; margin-bottom:6px; }
.tc-name { font-family:var(--cond); font-weight:900; font-size:clamp(18px,2.2vw,26px); line-height:1.05; color:#fff; margin-bottom:10px; }
.team-card p { font-family:var(--body); font-size:12px; line-height:1.65; color:rgba(255,255,255,0.5); }
.team-banner {
  grid-column:1/3;
  background: linear-gradient(90deg, #3a1a4a, #1a2a4a);
  border-top: 3px solid var(--p-lavender);
  padding:16px 22px; font-family:var(--cond); font-size:clamp(13px,1.5vw,16px); font-weight:700; letter-spacing:0.02em; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.team-banner a { font-family:var(--cond); font-size:11px; font-weight:700; letter-spacing:0.18em; color: var(--p-lavender); text-decoration:none; white-space:nowrap; }
.team-banner a:hover { color:#fff; }

.slide--status { justify-content:center; }
.status-layout { display:grid; grid-template-columns:2fr 1fr; gap:40px; align-items:start; position:relative; z-index:5; margin-top:16px; width:100%; }
.status-list { display:flex; flex-direction:column; gap:8px; }
.sr { display:flex; gap:14px; align-items:center; padding:11px 16px; border:1px solid rgba(0,0,0,0.08); background:rgba(255,255,255,0.5); }
.s-next { background:rgba(255,255,255,0.3); }
.sr-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sr-key { font-family:var(--cond); font-size:9px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:#222; flex-shrink:0; min-width:72px; }
.sr-val { font-family:var(--body); font-size:12px; color:#555; }
.status-aside { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.sa-big { font-family:var(--cond); font-weight:900; font-size:clamp(32px,4.5vw,54px); line-height:0.95; text-align:right; }
.sa-sub { font-family:var(--cond); font-size:10px; font-weight:700; letter-spacing:0.25em; text-transform:uppercase; color:#888; text-align:right; }
.sa-targets { margin-top:14px; display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
.sa-targets div { font-family:var(--cond); font-weight:900; font-size:18px; letter-spacing:0.12em; }
.sa-note { font-family:var(--body); font-size:11px; color:#888; text-align:right; margin-top:8px; line-height:1.4; }

.slide--finance { justify-content:center; }
.finance-layout { display:grid; grid-template-columns:auto 1fr; gap:52px; align-items:start; position:relative; z-index:5; margin-top:10px; width:100%; }
.finance-nums { border-right:1px solid rgba(0,0,0,0.1); padding-right:52px; }
.fn-big { font-family:var(--cond); font-weight:900; font-size:clamp(52px,8vw,96px); line-height:1; color:#111; text-shadow: 4px 4px 0 rgba(244,143,177,0.35); }
.fn-sm { font-size:clamp(36px,5.5vw,64px); margin-top:12px; text-shadow: 3px 3px 0 rgba(129,212,250,0.35); }
.fn-label { font-family:var(--cond); font-size:10px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:#888; margin-top:4px; }
.fn-rule { width:100%; height:1px; background:rgba(0,0,0,0.1); margin:20px 0; }
.finance-list { display:flex; flex-direction:column; gap:11px; }
.fi { display:flex; gap:12px; align-items:flex-start; font-family:var(--body); font-size:clamp(11px,1.1vw,13px); line-height:1.65; color:#555; }
.fi-d { flex-shrink:0; margin-top:3px; font-size:8px; }
.fi strong { color:#111; font-weight:600; }

.fi:nth-child(1) .fi-d { color: var(--p-rose); }
.fi:nth-child(2) .fi-d { color: var(--p-sky); }
.fi:nth-child(3) .fi-d { color: var(--p-mint); }
.fi:nth-child(4) .fi-d { color: var(--p-yellow); }
.fi:nth-child(5) .fi-d { color: var(--p-lavender); }
.fi:nth-child(6) .fi-d { color: var(--p-teal); }

.slide--exit { justify-content:center; }
.exit-layout { display:grid; grid-template-columns:1fr 1.5fr; gap:52px; align-items:center; position:relative; z-index:5; margin-top:10px; width:100%; }
.exit-headline { font-family:var(--cond); font-weight:900; font-size:clamp(36px,5.5vw,68px); line-height:1.0; color:#fff; text-transform:uppercase; letter-spacing:0.01em; margin-bottom:14px; }
.exit-headline em { font-family:var(--display); font-style:italic; font-weight:700; font-size:0.7em; color: var(--p-sky); text-transform:none; display:block; margin-top:8px; }
.exit-sub { font-family:var(--body); font-size:clamp(12px,1.2vw,14px); line-height:1.7; color:rgba(255,255,255,0.5); position:relative; z-index:5; }
.exit-path { display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }
.ep-node { padding:14px 18px; border:1px solid; }
.ep-t { font-family:var(--cond); font-size:10px; font-weight:700; letter-spacing:0.25em; text-transform:uppercase; margin-bottom:5px; }
.ep-s { font-family:var(--body); font-size:12px; color:rgba(255,255,255,0.45); line-height:1.5; }
.ep-arrow { font-family:var(--cond); font-weight:900; font-size:24px; color:rgba(255,255,255,0.85); padding-left:18px; text-shadow:0 0 12px rgba(255,255,255,0.4); line-height:1; }

.slide--close { justify-content:center; }
.close-layout { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; position:relative; z-index:5; width:100%; }
.close-em { font-family:var(--display); font-style:italic; font-weight:700; font-size:clamp(40px,6vw,76px); line-height:1.0; color:#fff; display:block; }
.close-main { font-family:var(--cond); font-weight:900; font-size:clamp(52px,8.5vw,108px); line-height:0.87; letter-spacing:0.02em; color:#fff; display:block; text-shadow: 4px 4px 0 var(--p-rose), 8px 8px 0 rgba(244,143,177,0.15); }
.close-by { font-family:var(--cond); font-size:11px; font-weight:600; letter-spacing:0.25em; text-transform:uppercase; color:rgba(255,255,255,0.3); margin-top:14px; margin-bottom:16px; }
.close-checklist { display:flex; flex-direction:column; gap:7px; }
.cc { font-family:var(--cond); font-size:clamp(11px,1.1vw,13px); font-weight:600; letter-spacing:0.04em; color:rgba(255,255,255,0.6); display:flex; gap:10px; align-items:center; }
.close-tagline { font-family:var(--display); font-style:italic; font-size:clamp(14px,1.6vw,18px); line-height:1.65; color:rgba(255,255,255,0.65); margin-bottom:22px; border-left:3px solid var(--p-rose); padding-left:18px; }
.close-ask { font-family:var(--body); font-size:clamp(12px,1.2vw,14px); line-height:1.7; color:rgba(255,255,255,0.55); margin-bottom:22px; }
.close-links { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.cl { font-family:var(--cond); font-size:11px; font-weight:700; letter-spacing:0.18em; text-decoration:none; text-transform:uppercase; }
.cl:hover { text-decoration:underline; }
.close-meta { font-family:var(--cond); font-size:10px; font-weight:600; letter-spacing:0.12em; color:rgba(255,255,255,0.28); line-height:1.8; text-transform:uppercase; }

@media (max-width:900px) {
  .slide { padding:54px 28px 60px; }
  .slide-label-top { left:28px; }
  .whatis-layout,.story-layout,.tone-layout,.finance-layout,.director-layout,.exit-layout,.close-layout,.status-layout { grid-template-columns:1fr; gap:24px; }
  .comps-layout { flex-direction:column; }
  .comp-x { transform:rotate(90deg); padding:8px 0; }
  .stills-grid,.stills-grid--alt { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .sg-big,.sg-tall { grid-row:auto; grid-column:1/3; height:200px; }
  .sg-item { height:140px; }
  .team-banner { grid-column:1/3; }
  .finance-nums { border-right:none; border-bottom:1px solid rgba(0,0,0,0.08); padding-right:0; padding-bottom:20px; display:flex; gap:24px; flex-wrap:wrap; align-items:flex-end; }
  .fn-rule { display:none; }
  .cover-side-text { display:none; }
  .dir-films-row { display:none; }
}
@media (max-width:600px) {
  .slide { padding:48px 18px 54px; }
  .slide-label-top { left:18px; top:18px; }
  .team-layout { grid-template-columns:1fr; }
  .team-banner { grid-column:1; }
  .nav-btn--prev { left:4px; }
  .nav-btn--next { right:4px; }
}

.dir-films-row--top { display:flex; gap:12px; margin-bottom:16px; }
.dfr-img-tall { width:100%; height:140px; object-fit:cover; object-position:top center; display:block; }

.sr-check {
  font-size:14px; font-weight:900; flex-shrink:0;
  color:#33691e; width:18px; text-align:center;
}
.sr-arrow {
  font-size:14px; font-weight:900; flex-shrink:0;
  color:#e65100; width:18px; text-align:center;
}

.comp-title-card {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 20px; text-align: center;
  background: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px,
    transparent 1px, transparent 8px
  );
}
.ctc-year {
  font-family: var(--cond); font-size: 10px; font-weight: 700;
  letter-spacing: 0.3em; color: rgba(255,255,255,0.4);
  margin-bottom: 10px;
}
.ctc-title {
  font-family: var(--cond); font-weight: 900;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 0.95; color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}
.ctc-dir {
  font-family: var(--body); font-size: 10px;
  color: rgba(255,255,255,0.35);
  margin-top: 10px; letter-spacing: 0.08em;
}

.director-stills {
  display: flex; gap: 6px;
  margin-top: 14px; width: 100%;
  overflow: hidden;
}
.dstill {
  flex: 1; height: 80px;
  object-fit: cover; object-position: center;
  display: block; min-width: 0;
}

@media (max-width: 768px) {
  .slide { padding: 44px 16px 54px; }
  .slide-label-top { left: 16px; top: 16px; font-size: 9px; }

  
  .whatis-layout, .story-layout, .tone-layout,
  .finance-layout, .director-layout, .exit-layout,
  .close-layout, .status-layout, .whynow-layout { 
    grid-template-columns: 1fr; gap: 18px; 
  }

  
  .comps-layout { flex-direction: column; }
  .comp-x { transform: rotate(90deg); padding: 4px 0; align-self: center; }
  .comp-img-wrap { height: 140px; }

  
  .team-layout { grid-template-columns: 1fr; }
  .team-banner { grid-column: 1; flex-direction: column; gap: 8px; }

  
  .cover-main { font-size: 17vw; }
  .cover-em { font-size: 11vw; }
  .cover-side-text { display: none; }

  
  .finance-nums { 
    border-right: none; border-bottom: 1px solid rgba(0,0,0,0.1); 
    padding-right: 0; padding-bottom: 14px; 
    display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; 
  }
  .fn-rule { display: none; }

  
  .dstill { height: 60px; }
  .dir-films-row--top { display: none; }

  
  .status-layout { grid-template-columns: 1fr; }
  .status-aside { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 16px; margin-top: 8px; }

  
  .nav-btn { width: 40px; height: 40px; font-size: 16px; }
  .nav-btn--prev { left: 4px; }
  .nav-btn--next { right: 4px; }

  
  .whynow-layout { grid-template-columns: 1fr; }

  
  .close-main { font-size: 14vw; }
  .close-em { font-size: 10vw; }
}

.slide--why { justify-content: center; }
.why-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 52px; align-items: start;
  position: relative; z-index: 5; margin-top: 20px;
  width: 100%;
}
.why-headline {
  font-family: var(--cond); font-weight: 900;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.0; color: #fff;
  margin-bottom: 28px;
}
.why-headline em {
  font-family: var(--display); font-style: italic;
  font-weight: 700; font-size: 0.75em;
  color: var(--p-mint); display: block;
}
.why-examples { display: flex; flex-direction: column; gap: 12px; }
.we-item {
  padding: 12px 16px;
  border-left: 3px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
}
.we-item:nth-child(1) { border-left-color: var(--p-rose); }
.we-item:nth-child(2) { border-left-color: var(--p-sky); }
.we-item:nth-child(3) { border-left-color: var(--p-mint); }
.we-item:nth-child(4) { border-left-color: var(--p-lavender); }
.we-film {
  font-family: var(--cond); font-weight: 900;
  font-size: 16px; letter-spacing: 0.05em;
  color: #fff; margin-bottom: 3px;
}
.we-detail {
  font-family: var(--body); font-size: 13px;
  line-height: 1.5; color: rgba(255,255,255,0.5);
}
.why-intro {
  font-family: var(--body); font-size: clamp(12px, 1.3vw, 15px);
  line-height: 1.78; color: rgba(255,255,255,0.65);
  margin-bottom: 16px;
}
.why-right p {
  font-family: var(--body); font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.75; color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
}
.why-stats { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.why-stat {
  display: flex; gap: 16px; align-items: center;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}
.ws-num {
  font-family: var(--cond); font-weight: 900;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1; flex-shrink: 0;
}
.ws-label {
  font-family: var(--body); font-size: 12px;
  line-height: 1.55; color: rgba(255,255,255,0.5);
}

@media (max-width: 768px) {
  .why-layout { grid-template-columns: 1fr; gap: 20px; }
}

.slide--video { justify-content: center; }
.video-layout {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: 40px; align-items: center;
  position: relative; z-index: 5; margin-top: 20px;
  width: 100%;
}
.video-wrap {
  position: relative; width: 100%;
  padding-bottom: 56.25%; height: 0;
  background: #000;
}
.video-wrap iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; border: none;
}
.vi-title {
  font-family: var(--cond); font-weight: 900;
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1.0; color: #fff; margin-bottom: 6px;
}
.vi-year {
  font-family: var(--mono, monospace); font-size: 10px;
  letter-spacing: 0.25em; color: rgba(255,255,255,0.35);
  margin-bottom: 16px;
}
.video-info p {
  font-family: var(--body); font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.72; color: rgba(255,255,255,0.55);
  margin-bottom: 14px;
}
.vi-note {
  font-family: var(--cond); font-size: 11px;
  font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--p-peach);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 14px; margin-top: 6px;
}

.close-statement p {
  font-family: var(--body); font-size: clamp(13px, 1.4vw, 16px);
  line-height: 1.75; color: rgba(255,255,255,0.6);
  margin-bottom: 14px;
}
.close-invite {
  font-family: var(--display); font-style: italic;
  font-size: clamp(16px, 2vw, 22px);
  color: #fff; margin-top: 8px;
}
.close-contact {
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
}
.close-contact-label {
  font-family: var(--cond); font-size: 10px;
  font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  margin-top: 8px;
}

@media (max-width: 768px) {
  .video-layout { grid-template-columns: 1fr; gap: 20px; }
  .video-wrap { padding-bottom: 56.25%; }
}

@media (max-width: 768px) {

  
  html, body {
    overflow-y: auto !important;
    overflow-x: clip !important;
    height: auto !important;
  }

  
  .progress-bar,
  .slide-counter,
  .nav-dots,
  .nav-btn,
  .cover-side-text,
  .landscape-nudge,
  .stamp { display: none !important; }

  
  .deck {
    width: 100% !important;
    height: auto !important;
    position: static !important;
  }

  
  .slide {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: all !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100svh;
    padding: 56px 20px 40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  
  .slide-label-top {
    position: absolute !important;
    top: 16px !important;
    left: 20px !important;
    font-size: 8px !important;
  }

  
  .whatis-layout,
  .story-layout,
  .tone-layout,
  .why-layout,
  .finance-layout,
  .director-layout,
  .exit-layout,
  .close-layout,
  .status-layout,
  .whynow-layout,
  .comps-layout,
  .video-layout {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
  }

  
  .cover-photos { position: absolute; inset: 0; }
  .cover-main { font-size: 18vw !important; line-height: 0.88; }
  .cover-em { font-size: 12vw !important; }
  .cover-logline { font-size: 14px !important; }
  .cover-kicker { font-size: 8px !important; }

  
  .tw { font-size: clamp(28px, 10vw, 48px) !important; }

  
  .comp-x { align-self: center; transform: rotate(90deg); }
  .comp-img-wrap { height: 160px; }

  
  .team-layout {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  .team-banner { grid-column: 1 !important; flex-direction: column !important; gap: 10px !important; }

  
  .finance-nums {
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    padding-right: 0 !important;
    padding-bottom: 16px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
  }
  .fn-rule { display: none !important; }
  .fn-big { font-size: clamp(44px, 12vw, 72px) !important; }
  .fn-sm { font-size: clamp(32px, 9vw, 52px) !important; margin-top: 0 !important; }

  
  .status-layout {
    display: flex !important;
    flex-direction: column !important;
  }
  .status-aside {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .sa-big { font-size: clamp(28px, 8vw, 44px) !important; }
  .sa-targets { flex-direction: row !important; gap: 12px !important; }

  
  .director-name { font-size: clamp(40px, 12vw, 64px) !important; }
  .dir-films-row--top { display: none !important; }
  .director-stills { display: none !important; }

  
  .video-wrap { padding-bottom: 56.25% !important; }

  
  .why-headline { font-size: clamp(28px, 9vw, 44px) !important; }
  .why-stats { flex-direction: row !important; flex-wrap: wrap !important; gap: 12px !important; }
  .why-stat { flex: 1 !important; min-width: 120px !important; }
  .ws-num { font-size: clamp(24px, 8vw, 40px) !important; }

  
  .exit-headline { font-size: clamp(30px, 9vw, 48px) !important; }

  
  .close-main { font-size: clamp(44px, 14vw, 72px) !important; }
  .close-em { font-size: clamp(30px, 10vw, 50px) !important; }

  
  .wc { font-size: 14px !important; padding: 10px 0 !important; }

  
  .story-drop { font-size: 80px !important; }
  .sh-punch { font-size: clamp(34px, 10vw, 52px) !important; }
  .story-right { border-left: none !important; padding-left: 0 !important; border-top: 2px solid rgba(0,0,0,0.08); padding-top: 16px !important; }

  
  .concept-right { border-left: none !important; padding-left: 0 !important; border-top: 2px solid rgba(255,255,255,0.1); padding-top: 16px !important; }

  
  .whatis-point { padding: 12px 14px !important; }
  .wp-num { font-size: 24px !important; }

  
  .color-blob { opacity: 0.1 !important; }
}

/* Desktop home button — fixed top-center */
.mmd-home-btn {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 200;
  display: flex; align-items: center;
  opacity: 0.6; transition: opacity 0.2s ease;
  text-decoration: none;
}
.mmd-home-btn:hover { opacity: 1; }
.mmd-home-btn img { height: 42px; width: auto; display: block; }
@media (max-width: 768px) { .mmd-home-btn { display: none; } }

.mobile-header {
  display: none;
  background: #0d0d0d;
  padding: 12px 20px;
  border-bottom: 2px solid var(--p-rose);
  position: sticky; top: 0; z-index: 100;
  align-items: center; gap: 14px;
}
.mobile-header-home { display: flex; align-items: center; flex-shrink: 0; }
.mobile-header-logo { height: 38px; width: auto; display: block; }
.mobile-header-title {
  font-family: var(--cond); font-weight: 900;
  font-size: 16px; letter-spacing: 0.12em;
  color: #fff;
}
.mobile-header-sub {
  font-family: var(--cond); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.35); margin-top: 3px;
}

@media (max-width: 768px) {
  .mobile-header { display: flex; }
}

@media (max-width: 768px) {

  
  .slide { position: relative !important; }
  .bg-slab {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
  }
  .grid-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
  }
  /* Decorative blur(70px) blobs are GPU-costly and add nothing at phone size. */
  .color-blob { display: none !important; }

  
  .cover-inner,
  .whatis-layout,
  .story-layout,
  .tone-layout,
  .why-layout,
  .finance-layout,
  .director-layout,
  .exit-layout,
  .close-layout,
  .status-layout,
  .whynow-layout,
  .video-layout,
  .comps-layout,
  .team-layout,
  .audience-layout,
  .director-left,
  .director-right {
    position: relative !important;
    z-index: 5 !important;
  }

  
  .cover-photos {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
  }
  .cover-photo-wash {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
  }

  
  .story-right p,
  .concept-right p,
  .director-right p,
  .why-right p,
  .exit-body,
  .tone-body,
  .comp-blurb,
  .team-card p,
  .fi,
  .wp-text,
  .video-info p { font-size: 14px !important; line-height: 1.75 !important; }

  
  .concept-right { background: rgba(0,0,0,0.15); padding: 16px !important; border-radius: 2px; }
  .story-right { background: rgba(0,0,0,0.06); padding: 16px !important; }

  
  .whatis-point {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
  }
  .we-item { background: rgba(255,255,255,0.06) !important; }
  .team-card { background: rgba(255,255,255,0.06) !important; }
  .sr { background: rgba(255,255,255,0.6) !important; }
  .ep-node { background: rgba(255,255,255,0.05) !important; }

  
  .stripe-bar {
    position: absolute !important;
    z-index: 10 !important;
  }

  
  .tone-layout { gap: 16px !important; }
  .tone-words {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    padding-bottom: 14px !important;
  }
  .tw { font-size: clamp(22px, 7vw, 36px) !important; }
  .tone-right { border-left: none !important; padding-left: 0 !important; }

  
  .why-examples { gap: 8px !important; }
  .we-detail { font-size: 13px !important; }

  
  .finance-list { gap: 14px !important; }
  .fi { font-size: 13px !important; }

  
  .close-statement p { font-size: 14px !important; }
  .close-invite { font-size: 18px !important; }

  
  .audience-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .aud-note { grid-column: 1 !important; }
  .aud-targets { grid-column: 1 !important; }

  
  .comp-title { font-size: 22px !important; }
  .comp-blurb { font-size: 13px !important; }
  .comp-body { padding: 14px !important; }
}

.story-earth {
  position: absolute;
  z-index: 2; pointer-events: none;
  width: 480px; height: 480px;
  border-radius: 50%;
  right: -120px; top: 50%;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 38% 35%,
      #4fc3f7 0%,
      #1565c0 25%,
      #0d47a1 45%,
      #1b5e20 60%,
      #0d47a1 70%,
      #01579b 85%,
      #001233 100%
    );
  box-shadow:
    0 0 80px 20px rgba(21,101,192,0.2),
    inset -40px -40px 80px rgba(0,0,0,0.5);
  opacity: 0.18;
  animation: earthspin 60s linear infinite;
}
@keyframes earthspin {
  0% { box-shadow: 0 0 80px 20px rgba(21,101,192,0.2), inset -40px -40px 80px rgba(0,0,0,0.5); }
  50% { box-shadow: 0 0 100px 30px rgba(21,101,192,0.25), inset -50px -30px 80px rgba(0,0,0,0.4); }
  100% { box-shadow: 0 0 80px 20px rgba(21,101,192,0.2), inset -40px -40px 80px rgba(0,0,0,0.5); }
}

.status-progress-bar {
  position: absolute; top: 44px; left: 72px;
  display: flex; align-items: center; gap: 12px;
  z-index: 10;
}
.status-progress-fill {
  width: 160px; height: 4px;
  background: linear-gradient(90deg, #33691e 0%, #33691e 75%, rgba(0,0,0,0.1) 75%);
  border-radius: 2px;
  position: relative;
}
.status-progress-fill::after {
  content: '▼';
  position: absolute;
  right: -4px; top: -20px;
  font-size: 14px;
  color: #e65100;
}
.status-progress-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #33691e;
}

.tone-comps-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; flex-wrap: wrap;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 14px;
}
.tcr-item {
  flex: 1; min-width: 100px;
  padding: 8px 12px;
  border: 1px solid;
  background: rgba(0,0,0,0.03);
}
.tcr-film {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 13px;
  color: #111; letter-spacing: 0.03em;
}
.tcr-role {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; margin-top: 2px;
}
.tcr-plus {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 20px;
  color: rgba(0,0,0,0.2); flex-shrink: 0;
}

.slide--mood {
  padding: 56px 0 64px !important;
  justify-content: center;
  overflow: visible !important;
}
.mood-marquee-wrap {
  position: relative; z-index: 5;
  width: 100%; display: flex;
  flex-direction: column; gap: 8px;
  margin-top: 36px;
}
.mood-row {
  display: flex; gap: 8px;
  width: max-content;
}
.mood-row--1 { animation: marquee-left 30s linear infinite; }
.mood-row--2 { animation: marquee-right 38s linear infinite; }
.mood-row--3 { animation: marquee-left 24s linear infinite; }
@keyframes marquee-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.mood-img {
  height: 120px; width: auto;
  object-fit: cover; display: block;
  flex-shrink: 0;
  filter: saturate(0.8) contrast(1.05);
  transition: filter 0.3s;
}
.mood-img:hover { filter: saturate(1.2) contrast(1.1); }
.mood-placeholder {
  height: 120px; width: 200px;
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.mood-caption {
  position: absolute; bottom: 30px; left: 72px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.25); z-index: 10;
}

@media (max-width: 768px) {
  .story-earth { width: 300px; height: 300px; right: -80px; opacity: 0.12; }
  .status-progress-bar { left: 20px; }
  .tone-comps-row { gap: 6px; }
  .mood-img { height: 80px; }
  .mood-placeholder { height: 80px; width: 140px; }
  .mood-caption { left: 20px; }
  .slide--mood { padding: 56px 0 64px !important; }
}

.slide--mood {
  padding: 56px 0 40px !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  contain: layout style;
}
.mood-grid {
  position: relative; z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  width: 100%;
  height: calc(100vh - 120px);
  margin-top: 36px;
  overflow: hidden;
}
.mood-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  contain: layout style;
}
.mood-col--1 { animation: col-up 40s linear infinite; }
.mood-col--2 { animation: col-down 52s linear infinite; }
.mood-col--3 { animation: col-up 34s linear infinite; }

@keyframes col-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes col-down {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

.mood-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center;
  display: block;
  flex-shrink: 0;
  filter: saturate(0.85) contrast(1.05);
  transition: filter 0.3s;
}
@media (hover: hover) { .mood-img:hover { filter: saturate(1.3) contrast(1.1); } }

.mood-caption {
  position: absolute;
  bottom: 16px; left: 72px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); z-index: 10;
}

.mood-grid::before,
.mood-grid::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 80px; z-index: 6; pointer-events: none;
}
.mood-grid::before {
  top: 0;
  background: linear-gradient(to bottom, #0a0a0a 0%, transparent 100%);
}
.mood-grid::after {
  bottom: 0;
  background: linear-gradient(to top, #0a0a0a 0%, transparent 100%);
}

@media (max-width: 768px) {
  .mood-grid {
    grid-template-columns: 1fr 1fr;
    height: calc(100svh - 120px);
  }
  .mood-col--3 { display: none; animation: none; }
  .mood-img { height: 140px; }
  .mood-caption { left: 20px; }
}

.slide-label-top {
  font-size: 11px !important;
  letter-spacing: 0.35em !important;
  padding: 6px 14px !important;
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(4px) !important;
  border-left: 3px solid var(--p-peach) !important;
  color: rgba(255,255,255,0.9) !important;
  top: 20px !important;
}
.slide-label-top--light {
  color: rgba(255,255,255,0.9) !important;
}

.slide-label-top[style] {
  color: rgba(255,255,255,0.95) !important;
}

.cover-meta--bright {
  color: rgba(255,255,255,0.9) !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  margin-top: 4px !important;
}
.cover-meta--bright .pipe {
  color: var(--p-rose) !important;
  opacity: 1 !important;
}

.slide-bg-still {
  position: absolute; inset: 0; z-index: 1;
  background-size: cover;
  background-position: center;
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: luminosity;
}

.mood-header {
  position: relative; z-index: 10;
  padding: 0 72px;
  margin-top: 28px;
}
.mood-header-title {
  font-family: var(--cond); font-weight: 900;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1; color: #fff;
  letter-spacing: 0.02em;
}
.mood-header-sub {
  font-family: var(--body); font-size: clamp(12px, 1.2vw, 14px);
  color: rgba(255,255,255,0.45); margin-top: 6px;
  line-height: 1.5;
}

.fn-block {
  display: flex; flex-direction: column;
  gap: 4px;
}

@media (max-width: 768px) {

  
  .slide-label-top {
    font-size: 9px !important;
    letter-spacing: 0.25em !important;
    padding: 4px 10px !important;
    left: 16px !important;
    top: 14px !important;
  }

  
  .cover-meta--bright {
    font-size: 11px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  
  .mood-header { padding: 0 20px; margin-top: 16px; }
  .mood-header-title { font-size: 24px !important; }
  .mood-header-sub { font-size: 12px !important; }

  
  .finance-nums {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    padding-bottom: 20px !important;
    padding-right: 0 !important;
    width: 100% !important;
  }
  .fn-block {
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .fn-block:last-child { border-bottom: none; }
  .fn-big { font-size: clamp(52px, 15vw, 80px) !important; }
  .fn-sm { font-size: clamp(40px, 12vw, 60px) !important; margin-top: 0 !important; }
  .fn-label {
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    color: #555 !important;
  }
  .fn-rule { display: none !important; }

  
  .logline-text { font-size: clamp(18px, 5vw, 28px) !important; }
  .whatis-big { font-size: clamp(32px, 9vw, 52px) !important; }
  .why-headline { font-size: clamp(28px, 8vw, 44px) !important; }
  .unit-headline { font-size: clamp(28px, 8vw, 44px) !important; }

  
  .sh-punch { font-size: clamp(32px, 9vw, 52px) !important; }
  .story-kicker { font-size: 14px !important; }

  
  .tc-name { font-size: 20px !important; }

  
  .slide-bg-still { opacity: 0.05 !important; }
}
.slide-label-top {
  font-size: 13px !important;
  letter-spacing: 0.3em !important;
  padding: 7px 16px !important;
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(6px) !important;
  border-left: 4px solid var(--p-peach) !important;
  color: rgba(255,255,255,0.95) !important;
  font-weight: 900 !important;
  top: 20px !important;
}

.link-obvious {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border: 2px solid currentColor !important;
  border-radius: 2px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  transition: background 0.2s, color 0.2s !important;
  cursor: pointer !important;
}
.link-obvious:hover {
  background: rgba(255,255,255,0.12) !important;
}
.cl.link-obvious {
  display: block !important;
  margin-bottom: 4px !important;
}

.finance-nums--left {
  text-align: left !important;
  align-items: flex-start !important;
}
.finance-nums--left .fn-big,
.finance-nums--left .fn-label { text-align: left !important; }

.why-stat {
  flex-direction: column !important;
  gap: 6px !important;
}
.ws-num {
  font-size: clamp(40px, 6vw, 64px) !important;
  line-height: 1 !important;
}
.ws-label {
  font-size: 13px !important;
  line-height: 1.6 !important;
}

@media (max-width: 768px) {
  .slide-label-top {
    font-size: 10px !important;
    padding: 5px 10px !important;
    left: 16px !important;
    top: 12px !important;
  }
  .why-stats--stack {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .why-stat {
    flex-direction: column !important;
    padding: 14px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
  }
  .ws-num { font-size: clamp(44px, 14vw, 64px) !important; }
  .ws-label { font-size: 13px !important; }
  .link-obvious {
    padding: 10px 16px !important;
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }
  .finance-nums--left {
    flex-direction: column !important;
    width: 100% !important;
  }
  .slide-bg-still { opacity: 0.05 !important; }
}

.status-progress-bar {
  position: absolute;
  top: 58px !important;
  left: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
}

@media (max-width: 768px) {
  .status-progress-bar {
    top: 48px !important;
    left: 16px;
  }
}

.director-collage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.dc-img {
  position: absolute;
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  transition: opacity 0.3s;
}
.dc-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(13,8,8,0.6) 0%,
    rgba(13,8,8,0.3) 50%,
    rgba(13,8,8,0.7) 100%
  );
}

.slide-bg-still--right {
  left: auto !important;
  right: 0;
  width: 50%;
  opacity: 0.04 !important;
}

.director-name {
  color: #fff !important;
  text-shadow: 3px 3px 0 rgba(255,109,0,0.4) !important;
}
.director-role-tag { color: var(--p-peach) !important; }
.director-right p { color: rgba(255,255,255,0.65) !important; }
.director-right strong { color: #fff !important; }
.director-personal {
  border-left-color: var(--p-peach) !important;
  background: rgba(255,171,145,0.1) !important;
}
.director-personal p { color: rgba(255,255,255,0.8) !important; }
.dp-item { color: rgba(255,255,255,0.5) !important; border-left-color: rgba(255,255,255,0.2) !important; }
.dfr-label { color: rgba(255,255,255,0.4) !important; }

@media (max-width: 768px) {
  .dc-img { opacity: 0.2; }
  .slide-bg-still--right { display: none; }
}


/* ─── Scroll-triggered animations ─── */

[data-anim] {
  transition-property: opacity, transform;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hidden states */
[data-anim="up"]:not(.is-visible)    { opacity: 0; transform: translateY(36px); }
[data-anim="down"]:not(.is-visible)  { opacity: 0; transform: translateY(-20px); }
[data-anim="left"]:not(.is-visible)  { opacity: 0; transform: translateX(-36px); }
[data-anim="right"]:not(.is-visible) { opacity: 0; transform: translateX(36px); }
[data-anim="fade"]:not(.is-visible)  { opacity: 0; }
[data-anim="scale"]:not(.is-visible) { opacity: 0; transform: scale(0.88); }

/* Visible state — same for all */
[data-anim].is-visible {
  opacity: 1;
  transform: none;
}

/* Cover load animation (fires on page load, not scroll) */
.cover-inner [data-anim] { }

/* Don't animate mood board columns — they have their own scroll animation */
.mood-col[data-anim] { display: block !important; opacity: 1 !important; transform: none !important; transition: none !important; }


/* ─── SLIDE 04: Things You Will See + References ─── */

.slide--teaser { justify-content: flex-start; }
.teaser-layout {
  display: flex;
  flex-direction: column;
  gap: 48px;
  position: relative; z-index: 5;
  margin-top: 44px;
}
/* Things block: heading + full-width marquee */
.teaser-things-block {
  width: 100%;
}
.teaser-heading {
  font-family: var(--cond);
  font-weight: 900;
  font-size: clamp(32px, 5vw, 68px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: #fff;
  margin-bottom: 20px;
  text-shadow: 4px 4px 0 var(--p-rose), 8px 8px 0 rgba(244,143,177,0.15);
}
.teaser-heading--sm {
  font-size: clamp(28px, 4vw, 52px);
}

/* Horizontal marquee */
.things-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.things-marquee::before,
.things-marquee::after {
  content: '';
  position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none;
  width: 60px;
}
.things-marquee::before { left: 0; background: linear-gradient(to right, #0a0a0a, transparent); }
.things-marquee::after  { right: 0; background: linear-gradient(to left, #0a0a0a, transparent); }
.things-track {
  display: flex;
  gap: 6px;
  width: max-content;
  animation: thingsScroll 55s linear infinite;
}
.things-track:hover { animation-play-state: paused; }
@keyframes thingsScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.tg-item {
  flex-shrink: 0;
  height: 120px;
  width: 200px;
  background: var(--tc, #e63946);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--cond);
  font-weight: 900;
  font-size: 14px; /* JS will override this */
  line-height: 1.15;
  color: #000;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: url('mouseclick.webp') 20 4, pointer !important;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
@media (max-width: 768px) {
  .tg-item { height: 100px; width: 170px; font-size: 15px; }
  .things-track { animation-duration: 40s; }
}
.teaser-list {
  list-style: none;
  padding: 0; margin: 0;
  counter-reset: teaser;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.teaser-list li {
  counter-increment: teaser;
  font-family: var(--body);
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.65;
  color: rgba(255,255,255,0.7);
  padding-left: 32px;
  position: relative;
}
.teaser-list li::before {
  content: counter(teaser, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--cond);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--p-rose);
  line-height: 1.8;
}
.ref-names {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 20px;
}
.ref-names span {
  font-family: var(--cond);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 3px 8px;
}
.ref-collage {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.rc-img {
  width: calc(20% - 4px);
  aspect-ratio: 16/10;
  object-fit: cover;
  filter: saturate(0.8) contrast(1.05);
  transition: filter 0.3s, transform 0.3s;
}
.rc-img:hover {
  filter: saturate(1.2) contrast(1.1);
  transform: scale(1.03);
  z-index: 2;
  position: relative;
}

@media (max-width: 900px) {
  .teaser-layout { grid-template-columns: 1fr; }
}


/* ─── SLIDE 05: Director — hero stills ─── */

.director-stills-hero {
  position: relative; z-index: 5;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  width: 100%;
  margin-top: 44px;
  margin-bottom: 0;
}
.dsh-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.85) contrast(1.05);
  transition: filter 0.3s;
}
@media (hover: hover) { .dsh-img:hover { filter: saturate(1.2) contrast(1.1); } }

/* override old layout when hero stills are present */
.slide--director .director-layout {
  margin-top: 24px;
}
.director-link-big {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--cond);
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--p-rose);
  padding: 10px 20px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.director-link-big:hover {
  background: #fff;
  color: #111;
}

@media (max-width: 768px) {
  .director-stills-hero { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
}


/* ─── Video slide: poster image ─── */

.vi-poster {
  width: 80px;
  float: right;
  margin: 0 0 12px 16px;
  display: block;
  object-fit: cover;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6);
}


/* ─── SLIDE 07: Dual video layout ─── */

.dual-video-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  position: relative; z-index: 5;
  margin-top: 44px;
  align-items: start;
}
.dual-video-col { display: flex; flex-direction: column; gap: 16px; }
.dual-video-info { padding: 0 4px; }
.dual-video-info .vi-title {
  font-family: var(--cond); font-weight: 900;
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.05; color: #fff;
  margin-bottom: 4px; letter-spacing: 0.02em;
}
.dual-video-info .vi-year {
  font-family: var(--cond); font-size: 10px; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--p-peach); margin-bottom: 12px;
}
.dual-video-info p {
  font-family: var(--body);
  font-size: clamp(12px, 1.2vw, 13px);
  line-height: 1.72; color: rgba(255,255,255,0.6);
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .dual-video-layout { grid-template-columns: 1fr; }
}


/* ─── Custom cursor ─── */
*, *::before, *::after { cursor: url('mousecursor.webp') 4 4, auto !important; }
a, button, [role="button"], summary,
.rc-wrap, .dsh-wrap, .tg-item, .ref-names span, .char-card {
  cursor: url('mouseclick.webp') 20 4, pointer !important;
}
input, textarea { cursor: url('mousetype.webp') 32 32, text !important; }
iframe { cursor: auto !important; }

.img-tooltip {
  position: fixed;
  top: 0; left: 0;
  z-index: 99998;
  background: rgba(0,0,0,0.92);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
  border-left: 3px solid #f48fb1;
  max-width: 280px; white-space: normal; word-break: break-word;
}
.img-tooltip.tip-visible { opacity: 1; }


/* ─── SLIDE 01: Fish fly animation ─── */

/* Fish uses position:fixed so overflow:hidden on .slide doesn't clip it */
.fish-fly {
  position: fixed;
  z-index: 9999;
  top: 42vh;
  left: 100vw;
  width: 28vw;
  transform: scaleX(-1);
  pointer-events: none;
  display: none;
}
.fish-fly.fish-run {
  display: block;
  animation: fishFlight 7s ease-in-out forwards;
}
@keyframes fishFlight {
  0%   { left: 100vw;     top: 42vh; }
  12%  { top: 34vh; }
  25%  { top: 50vh; }
  38%  { top: 30vh; }
  52%  { top: 54vh; }
  66%  { top: 36vh; }
  80%  { top: 48vh; }
  100% { left: -28vw;     top: 42vh; }
}
@media (max-width: 768px) {
  .fish-fly { width: 55vw; }
  @keyframes fishFlight {
    0%   { left: 100vw;           top: 42vh; }
    12%  { top: 34vh; }
    25%  { top: 50vh; }
    38%  { top: 30vh; }
    52%  { top: 54vh; }
    66%  { top: 36vh; }
    80%  { top: 48vh; }
    100% { left: calc(-55vw - 80px); top: 42vh; }
  }
}

.cover-logline-punch {
  font-style: normal;
  color: var(--p-peach);
  font-size: 1.15em;
  letter-spacing: 0.01em;
}

/* Bigger base text sizes on desktop */
.cover-logline { font-size: clamp(15px, 1.8vw, 22px) !important; }
.cover-meta span { font-size: clamp(12px, 1.1vw, 14px) !important; }


/* ─── SLIDE 03: Story — full redesign (deep red grunge) ─── */

.story-bg {
  background: #1a0005 !important;
}
.story-texture {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      rgba(180,0,20,0.04) 4px,
      rgba(180,0,20,0.04) 5px
    );
}
.slide--story .slide-label-top { color: rgba(255,160,160,0.5) !important; }
.slide--story .story-layout { margin-top: 52px; }
.slide--story .story-right {
  border-left: 2px solid rgba(255,80,80,0.2) !important;
  padding-left: 36px !important;
  background: none !important;
}
.slide--story .story-right p { color: rgba(255,230,230,0.75) !important; font-size: clamp(13px, 1.4vw, 16px) !important; }
.slide--story .story-right strong { color: #ff8080 !important; }
.slide--story .story-right em { color: var(--p-rose) !important; }
.slide--story .story-kicker {
  border-top: 2px solid rgba(255,80,80,0.3) !important;
  color: rgba(255,200,200,0.8) !important;
  font-size: clamp(14px, 1.5vw, 18px) !important;
}
.slide--story .story-kicker strong { color: var(--p-rose) !important; }

/* Alternating story paragraph animations */
.story-right p[data-anim]:not(.is-visible):nth-child(1) { transform: translateX(-50px) !important; }
.story-right p[data-anim]:not(.is-visible):nth-child(2) { transform: translateX(50px) !important; }
.story-right p[data-anim]:not(.is-visible):nth-child(3) { transform: translateX(-50px) !important; }
.story-right p { transition-duration: 0.75s !important; }
.story-right p:nth-child(1) { transition-delay: 0ms !important; }
.story-right p:nth-child(2) { transition-delay: 200ms !important; }
.story-right p:nth-child(3) { transition-delay: 400ms !important; }
.story-kicker[data-anim]:not(.is-visible) { transform: scale(0.88) translateY(20px) !important; opacity: 0 !important; }
.story-kicker { transition-delay: 580ms !important; }

/* New headline */
.story-headline-new {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative; z-index: 5;
}
.shn-line1 {
  font-family: var(--display);
  font-style: italic; font-weight: 700;
  font-size: clamp(22px, 3vw, 40px);
  color: rgba(255,180,180,0.7);
  line-height: 1.1;
}
.shn-line2 {
  font-family: var(--cond);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 0.95;
  color: rgba(255,220,220,0.9);
  letter-spacing: 0.02em;
}
.shn-line3 {
  font-family: var(--cond);
  font-weight: 900;
  font-size: clamp(36px, 5.5vw, 80px);
  line-height: 0.88;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow: 3px 3px 0 #8b0000, 6px 6px 0 rgba(139,0,0,0.3);
}
.shn-line4 {
  font-family: var(--cond);
  font-weight: 300;
  font-size: clamp(16px, 2vw, 26px);
  line-height: 1.3;
  color: rgba(255,180,180,0.6);
  letter-spacing: 0.06em;
  margin-top: 8px;
  border-left: 3px solid rgba(255,80,80,0.4);
  padding-left: 12px;
}
.shn-line5 {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(24px, 3.5vw, 50px);
  color: var(--p-rose);
  margin-top: 12px;
  text-shadow: 2px 2px 0 #8b0000;
}

/* Rocket gif — horizontal, flies left to right */
.story-rocket {
  position: fixed;
  z-index: 9999;
  top: 38vh;
  left: calc(-240px - 10vw);
  width: 240px;
  transform: rotate(90deg);
  pointer-events: none;
  display: none;
}
.story-rocket.rocket-run {
  display: block;
  animation: rocketFly 4s cubic-bezier(0.25, 0, 0.75, 1) forwards;
}
@keyframes rocketFly {
  0%   { left: calc(-240px - 10vw); top: 38vh; }
  20%  { top: 34vh; }
  45%  { top: 44vh; }
  70%  { top: 32vh; }
  100% { left: calc(100vw + 260px); top: 38vh; }
}

/* Character cards — flat full-color, dark readable text */
.character-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  position: relative; z-index: 5;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,80,80,0.2);
}
.char-card {
  background: var(--cc-color, #e63946) !important;
  border: none !important;
  border-left: 5px solid rgba(0,0,0,0.2) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 20px 22px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
/* Paper grain texture overlay */
.char-card::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.22 !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  background-size: 200px 200px !important;
  mix-blend-mode: overlay !important;
}
.char-card > * { position: relative !important; z-index: 1 !important; }
.char-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6) !important;
  z-index: 2 !important;
  position: relative !important;
}
.char-num { display: none !important; }
.char-name {
  font-family: var(--cond) !important;
  font-weight: 900 !important;
  font-size: clamp(20px, 2vw, 26px) !important;
  letter-spacing: 0.02em !important;
  color: #000 !important;
  margin-bottom: 4px !important;
  line-height: 1.05 !important;
}
.char-role {
  font-family: var(--cond) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(0,0,0,0.6) !important;
  margin-bottom: 14px !important;
}
.char-desc {
  color: rgba(0,0,0,0.82) !important;
  font-size: clamp(11px, 1.05vw, 13px) !important;
  line-height: 1.7 !important;
}

.char-card--dub   { --cc-color: #ffd60a; }
.char-card--pru   { --cc-color: #ff4d6d; }
.char-card--tag   { --cc-color: #4cc9f0; }
.char-card--kvega { --cc-color: #c77dff; }
.char-card--brain { --cc-color: #52b788; }
.char-card--toto  { --cc-color: #ff8c42; }

@media (max-width: 900px) {
  .character-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .character-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}


/* .things-grid removed — replaced by .things-marquee / .things-track */

/* Reference badges */
.ref-names span {
  background: var(--rb, rgba(255,255,255,0.15)) !important;
  border: none !important;
  color: #000 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 5px 14px !important;
  letter-spacing: 0.1em !important;
  transition: filter 0.2s, transform 0.15s;
  cursor: url('mouseclick.webp') 20 4, pointer !important;
}
.ref-names span:hover {
  filter: brightness(1.15);
  transform: scale(1.06);
}

/* Reference image — 4 columns so images are bigger */
.ref-collage {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.rc-wrap {
  position: relative;
  width: calc(25% - 4px);
  overflow: hidden;
  cursor: url('mouseclick.webp') 20 4, pointer !important;
}
.rc-wrap .rc-img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) contrast(1.05);
  transition: filter 0.35s;
}
/* Full image darkens on hover — tooltip now handled by JS */
/* .rc-wrap::after removed — using JS tooltip instead */
@media (hover: hover) { .rc-wrap:hover .rc-img { filter: saturate(0.3) brightness(0.45); } }


/* ─── Director still hover tooltips ─── */

.dsh-wrap {
  position: relative;
  overflow: hidden;
  cursor: url('mouseclick.webp') 20 4, pointer !important;
}
.dsh-wrap .dsh-img { width: 100%; display: block; }
/* .dsh-wrap::after removed — using JS tooltip instead */
.dsh-wrap:hover .dsh-img { filter: saturate(1.2) brightness(1.08) !important; }


/* ─── WHERE WE ARE — new dark flowchart layout ─── */

.status-new-layout {
  position: relative; z-index: 5;
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 32px;
  align-items: start;
  width: 100%;
}
.status-header-block {
  padding: 24px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid var(--p-mint);
}
.shb-title {
  font-family: var(--cond);
  font-weight: 900;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.05;
  color: #fff;
  margin-bottom: 12px;
}
.shb-sub {
  font-family: var(--body);
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
}
.shb-money {
  color: var(--p-mint); font-weight: 700;
}
.status-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sf-node {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
.sf-done { border-left: 3px solid var(--p-mint) !important; }
.sf-next { border-left: 3px solid var(--p-sky) !important; }
.sfn-check {
  font-family: var(--cond); font-weight: 900;
  font-size: 20px; color: var(--p-mint); flex-shrink: 0; width: 28px; text-align: center;
}
.sfn-arrow {
  font-family: var(--cond); font-weight: 900;
  font-size: 20px; color: var(--p-sky); flex-shrink: 0; width: 28px; text-align: center;
}
.sfn-title {
  font-family: var(--cond); font-weight: 900;
  font-size: clamp(14px, 1.4vw, 17px);
  letter-spacing: 0.06em; color: #fff;
  margin-bottom: 2px;
}
.sfn-detail {
  font-family: var(--body);
  font-size: clamp(11px, 1.1vw, 13px);
  color: rgba(255,255,255,0.45);
}
.sf-connector {
  width: 3px;
  height: 16px;
  background: rgba(255,255,255,0.08);
  margin-left: 29px;
}
.sf-connector--next { background: rgba(129,212,250,0.35); }

.status-ask-block {
  padding: 24px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid var(--p-sky);
  text-align: center;
}
.sab-num {
  font-family: var(--cond); font-weight: 900;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1; color: var(--p-sky);
  text-shadow: 3px 3px 0 rgba(129,212,250,0.35);
}
.sab-label {
  font-family: var(--cond); font-size: 11px; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 14px;
}
.sab-note {
  font-family: var(--body); font-size: 13px;
  line-height: 1.65; color: rgba(255,255,255,0.5);
}

@media (max-width: 900px) {
  .status-new-layout { grid-template-columns: 1fr; }
}


/* ─── CLOSING SLIDE ─── */

.slide--close { padding: 0 !important; min-height: 100vh; position: relative; overflow: hidden; }

.close-bg-cycle {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.6) brightness(0.5);
  animation: closeBgCycle 8s step-start infinite;
}
@keyframes closeBgCycle {
  0%    { background-image: url('CBLTMSTILL7.jpg'); }
  14.2% { background-image: url('PLCO3.jpg'); }
  28.4% { background-image: url('BBO3.jpg'); }
  42.6% { background-image: url('CBLTMSTILL8.jpg'); }
  56.8% { background-image: url('PLCO1.jpg'); }
  71%   { background-image: url('BBO5.jpg'); }
  85.2% { background-image: url('CBLTMSTILL1.jpg'); }
}
.close-wash {
  position: absolute; inset: 0; z-index: 1; min-height: 100%;
  background: linear-gradient(
    160deg,
    rgba(0,0,0,0.92) 0%,
    rgba(10,0,20,0.85) 40%,
    rgba(0,0,0,0.75) 100%
  );
}
.close-new-layout {
  position: relative; z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 32px 52px;
  padding: 72px 72px 80px;
  min-height: 100vh;
  align-content: center;
}
.close-title-block {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column;
}
.close-title-block .close-em {
  font-family: var(--display);
  font-style: italic; font-weight: 700;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1; color: rgba(255,255,255,0.88);
  display: block;
}
.close-title-block .close-main {
  font-family: var(--cond);
  font-weight: 900;
  font-size: clamp(64px, 10vw, 140px);
  line-height: 0.85;
  color: #fff;
  letter-spacing: 0.02em;
  display: block;
  text-shadow: 4px 4px 0 var(--p-rose), 8px 8px 0 rgba(244,143,177,0.2);
}
.close-title-block .close-by {
  font-family: var(--cond);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-top: 12px;
}

.close-tagline-block {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center;
  border-left: 3px solid var(--p-rose);
  padding-left: 28px;
}
.close-tagline-block p {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(16px, 2vw, 26px);
  line-height: 1.65; color: rgba(255,255,255,0.75);
}
.close-tagline-block strong { color: var(--p-peach); font-style: normal; }

.close-statement-block {
  grid-column: 1 / 3; grid-row: 2;
}
.close-statement-block p {
  font-family: var(--body);
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.75; color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
}

.close-cta-block {
  grid-column: 2; grid-row: 2;
  display: flex; flex-direction: column; gap: 12px;
  justify-content: center;
}
.close-btn {
  display: block;
  font-family: var(--cond);
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 24px;
  text-align: center;
  transition: transform 0.15s, filter 0.15s;
}
.close-btn:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.1); }
.close-btn--primary {
  background: var(--p-rose);
  color: #111;
}
.close-btn--secondary {
  background: #ffea00;
  color: #111;
}
.close-btn--tertiary {
  background: transparent;
  color: #00e5ff;
  border: 2px solid #00e5ff;
}

/* grid row numbers:
   row1 = title / tagline
   row2 = statement (full width)
   row3 = ig block (full width)
   row4 = investor bar (full width)
   row5 = meta */
.close-new-layout {
  grid-template-rows: auto auto auto auto auto;
}
.close-meta-block {
  grid-column: 1 / 3; grid-row: 5;
  font-family: var(--cond);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 20px;
}

/* ── Investor bar ── */
.close-investor-bar {
  grid-column: 1 / 3; grid-row: 3;
  padding: 32px 28px;
  background: #14131a;
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid var(--p-rose);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  row-gap: 12px;
  align-items: start;
}
.cib-heading { grid-column: 1; grid-row: 1; }
.cib-label   { grid-column: 1; grid-row: 2; align-self: start; }
.cib-form    { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.cib-msg     { grid-column: 2; }
.cib-heading {
  font-family: var(--cond);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-rose);
}
.cib-label {
  font-family: var(--body);
  font-size: clamp(13px, 1.4vw, 16px);
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
}
.cib-form {
  display: flex; flex-direction: column; gap: 0;
}
.cib-row {
  display: flex; gap: 0;
}
.cib-note {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid rgba(255,255,255,0.18);
  border-top: none;
  background: #23222b;
  color: #fff;
  font-family: var(--body); font-size: 16px;
  line-height: 1.55; resize: vertical;
  min-height: 80px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  display: block;
  box-sizing: border-box;
}
.cib-note::placeholder { color: rgba(255,255,255,0.4); }
.cib-note:focus { border-color: var(--p-rose); background: #2c2b35; }
.cib-email {
  flex: 1;
  min-height: 46px;
  padding: 11px 14px;
  border: 2px solid rgba(255,255,255,0.18);
  border-right: none;
  background: #23222b;
  color: #fff;
  font-family: var(--body);
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.cib-email::placeholder { color: rgba(255,255,255,0.4); }
.cib-email:focus { border-color: var(--p-rose); background: #2c2b35; }
.cib-btn {
  min-height: 46px;
  padding: 11px 22px;
  background: var(--p-rose);
  color: #111;
  border: 2px solid var(--p-rose);
  font-family: var(--cond);
  font-size: 14px; font-weight: 900;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  white-space: nowrap;
}
.cib-btn:hover { background: #fff; color: #111; transform: translateY(-1px); }
.cib-btn:disabled { opacity: 0.5; cursor: default; }
.cib-human-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 2px solid rgba(255,255,255,0.18);
  border-top: none;
  background: #23222b;
  cursor: pointer;
}
.cib-human-row input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0;
  accent-color: var(--p-rose);
  cursor: pointer;
}
.cib-human-label {
  font-family: var(--body); font-size: 13px;
  color: rgba(255,255,255,0.55);
  user-select: none;
}
.cib-msg { font-family: var(--body); font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.55); margin-top: 4px; }
.cib-msg--ok { color: var(--p-mint); font-size: 15px; font-weight: 600; }
.cib-msg--ok::before { content: '✓ '; font-weight: 900; }
.cib-msg--err { color: var(--p-rose); font-weight: 600; }

/* ── IG block ── */
.close-ig-block {
  grid-column: 1 / 3; grid-row: 4;
  padding: 40px 0 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 20px;
  position: relative;
}
.close-ig-heading {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  color: #fff;
  margin: 0;
  animation: slideUpFadeIn 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes slideUpFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.close-ig-handle {
  font-family: var(--cond);
  font-weight: 900;
  font-size: clamp(40px, 5.5vw, 72px);
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 18px 32px;
  border: 2px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.04);
  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  width: fit-content;
  position: relative;
  isolation: isolate;
  border-radius: 10px;
}
.close-ig-handle::after {
  content: '→';
  display: inline;
  font-style: normal;
  transition: transform 0.25s ease;
}
.close-ig-handle::before {
  content: ''; position: absolute; inset: -8px; z-index: -1;
  border-radius: 14px;
  background: radial-gradient(closest-side, rgba(244,143,177,0.5), transparent);
  opacity: 0.3;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .close-ig-handle:hover {
    background: var(--p-rose);
    color: #000;
    border-color: var(--p-rose);
    transform: scale(1.04);
  }
  .close-ig-handle:hover::after { transform: translateX(4px); }
  .close-ig-handle:hover::before { opacity: 0; }
}
.close-ig-line {
  font-family: var(--body);
  font-size: clamp(14px, 1.5vw, 18px);
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  max-width: 55ch;
  animation: slideUpFadeIn 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.1s forwards;
  opacity: 0;
}

@media (max-width: 768px) {
  .slide--close { min-height: 0 !important; height: auto !important; }
  .close-new-layout {
    grid-template-columns: 1fr;
    padding: 48px 24px 48px;
    gap: 18px;
    min-height: 0;
    height: auto;
    align-content: start;
  }
  .close-title-block .close-main { font-size: clamp(56px, 16vw, 100px) !important; }
  .close-tagline-block { grid-column: 1; grid-row: 2; border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; }
  .close-statement-block { grid-column: 1; grid-row: 3; }
  .close-investor-bar { grid-column: 1; grid-row: 4; padding: 24px 16px; grid-template-columns: 1fr; column-gap: 0; }
  .cib-heading, .cib-label, .cib-form, .cib-msg { grid-column: 1; grid-row: auto; }
  .close-ig-block { grid-column: 1; grid-row: 5; padding: 32px 0 20px; }
  .close-meta-block { grid-column: 1; grid-row: 6; }
  .close-photos-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
  .cib-form { max-width: 100%; gap: 10px; }
  .cib-row { flex-direction: column; gap: 8px; }
  .cib-email { border: 2px solid rgba(255,255,255,0.25); }
  .cib-note { border-top: 2px solid rgba(255,255,255,0.18); margin-top: 0; }
  .cib-btn { width: 100%; }
  .slide--video { min-height: auto; justify-content: flex-start; }
  .rc-wrap { width: calc(50% - 4px); }
  .teaser-layout { gap: 24px; margin-top: 20px; }
  .close-ig-heading { font-size: clamp(40px, 10vw, 64px); }
  .close-ig-handle { padding: 14px 20px; font-size: clamp(30px, 7vw, 48px); }
  /* Stop cycling 7 full-screen backgrounds on phones — use one static frame. */
  .close-bg-cycle { animation: none; background-image: url('CBLTMSTILL7.jpg'); }
}


/* ─── Global text size increase for desktop ─── */

@media (min-width: 769px) {
  .story-right p,
  .director-right p,
  .video-info p,
  .dual-video-info p,
  .why-right p,
  .whatis-sub,
  .wp-text,
  .char-desc,
  .comp-blurb,
  .fi,
  .ep-s { font-size: clamp(14px, 1.4vw, 16px) !important; line-height: 1.75 !important; }

  .vi-title { font-size: clamp(24px, 3vw, 36px) !important; }
  .comp-title { font-size: clamp(20px, 2.2vw, 28px) !important; }
  .team-card p, .director-right p { font-size: clamp(13px, 1.3vw, 15px) !important; }
}

@media (max-width: 768px) {
  .story-right p, .char-desc { font-size: 15px !important; }
  .shn-line3 { font-size: clamp(32px, 10vw, 60px) !important; }
}

/* ─── Lightbox modal for mood images ─── */
.mood-lightbox {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.mood-lightbox.open {
  opacity: 1; pointer-events: auto;
}

.mood-lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.mood-lightbox-img {
  position: relative; z-index: 1;
  max-width: 85vw; max-height: 85vh;
  width: auto; height: auto;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.mood-lightbox-close {
  position: absolute; top: 24px; right: 24px; z-index: 2;
  width: 48px; height: 48px;
  border: none; background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 32px; line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease;
}
.mood-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.mood-img {
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.mood-img:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .mood-lightbox-img { max-width: 95vw; max-height: 80vh; }
  .mood-lightbox-close {
    width: 40px; height: 40px;
    font-size: 24px;
    top: 12px; right: 12px;
  }
}