/* Shell — site styles */

:root {
  --bg: #000;
  --bg-alt: #170f19;      /* deep plum */
  --surface: #1f1524;
  --line: rgba(255, 255, 255, .1);
  --text: #fff;
  --muted: #aba0b2;
  --accent: #8c52ff;      /* violet */
  --accent-2: #cb6ce6;    /* orchid */
  --accent-dim: rgba(140, 82, 255, .14);
  --radius: 6px;
  --wrap: 1120px;
  --display: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
  --head: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.7 var(--body);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: var(--accent-2); }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; line-height: 1.1; }
h2 {
  font: 400 clamp(2.4rem, 6vw, 3.6rem)/1 var(--display);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 32px;
}
h3 { font: 700 1rem/1.25 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 32px; } }
.narrow { max-width: 820px; }
.center { text-align: center; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #000; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 .82rem/1 var(--head); letter-spacing: .14em; text-transform: uppercase;
  background: var(--accent); color: #000; text-decoration: none;
  padding: 16px 26px; border: 1px solid var(--accent); border-radius: 0;
  transition: background .2s, color .2s, box-shadow .2s;
}
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); box-shadow: 0 0 36px rgba(203, 108, 230, .45); }
.btn-ghost { background: transparent; color: var(--text); border-color: rgba(255, 255, 255, .4); }
.btn-ghost:hover { background: transparent; color: var(--accent-2); border-color: var(--accent-2); box-shadow: none; }
.btn-sm { padding: 11px 18px; font-size: .74rem; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { color: var(--text); text-decoration: none; font: 400 1.7rem/1 var(--display); letter-spacing: .3em; margin: 0; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 28px); } /* tighter on narrower screens */
.nav a:not(.btn) { white-space: nowrap; color: var(--muted); text-decoration: none; font: 700 .76rem/1 var(--head); letter-spacing: .14em; text-transform: uppercase; }
.nav a:not(.btn):hover { color: var(--accent-2); }
.nav-gap { width: 24px; } /* space before the items that wait for the name */
.js body.is-locked .nav-locked { opacity: .35; } /* greyed until the name is entered */
.menu-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.bars, .bars::before, .bars::after { display: block; width: 22px; height: 2px; background: var(--text); position: relative; transition: transform .2s; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -7px; } .bars::after { top: 7px; }
.menu-toggle[aria-expanded="true"] .bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .bars::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1040px) { /* the full menu needs about 1010px */
  .menu-toggle { display: block; }
  .nav {
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #000; border-bottom: 1px solid var(--line);
    padding: 8px 16px 20px; display: none;
  }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
  .nav .btn { margin-top: 16px; }
}

/* Full-bleed video (hero + bands). A glow sits behind each video,
   so the page still looks right before footage is added. */
.media, .video-band { position: relative; overflow: hidden; background:
  radial-gradient(ellipse 45% 55% at 62% 40%, rgba(203, 108, 230, .45), transparent 70%),
  radial-gradient(ellipse 40% 50% at 40% 70%, rgba(80, 90, 255, .35), transparent 70%),
  #000; }
.media video, .video-band video { width: 100%; height: 100%; object-fit: cover; }
/* Placeholder still behind the hero video; the video covers it once added */
.media-still { position: absolute; top: 0; left: 0; width: 100%; height: max(56.25vw, 320px); object-fit: cover; object-position: 50% 0;
  /* 16:9 still fills the 16:9 hero (the media box runs 20% lower, behind the stats),
     scaled up 35% from its centre; top and bottom fade into the black
     (the top fade starts at 13%, where the scaled still meets the top of the hero) */
  transform: scale(1.35); transform-origin: 50% 50%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 13%, #000 19%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 13%, #000 19%, #000 80%, transparent 100%); }
.hero .media { background: #000; } /* the still's black edges blend into this */
.media video { position: relative; }
/* The header video stays invisible until it's actually playing, so a missing or blocked
   video (e.g. iPhone Low Power Mode) never shows over the GOO title */
.hero .media video { opacity: 0; transition: opacity 1s ease; }
.hero .media video.is-playing { opacity: 1; }
/* Never show iPhone's big play button over any of the site's videos */
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls { display: none !important; }
.video-band { height: clamp(260px, 56vw, 620px); }
.video-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg-alt) 0%, transparent 9%, transparent 91%, var(--bg) 100%); } /* short fades top and bottom; the middle is untouched */
/* Creature band: a still frame shows until the video is really playing (iPhones may block
   autoplay, e.g. in Low Power Mode); a tap anywhere starts it. The shading lets taps through. */
.video-band { background: #000 url(assets/creature-poster.jpg) center / cover no-repeat; cursor: pointer; }
.video-band video { opacity: 0; transition: opacity .6s ease; }
.video-band video.is-playing { opacity: 1; }
.video-band::after { pointer-events: none; }
/* Sound on/off, centred at the bottom of the video */
.sound-toggle { position: absolute; z-index: 2; left: 50%; bottom: 20px; transform: translateX(-50%); width: 40px; height: 40px; display: grid; place-items: center; padding: 0; color: #fff; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.sound-toggle:hover { color: var(--accent-2); border-color: var(--accent-2); }
.sound-toggle .icon-on, .sound-toggle[aria-pressed="true"] .icon-off { display: none; }
.sound-toggle[aria-pressed="true"] .icon-on { display: block; }

/* Hero */
.hero {
  position: relative; overflow: hidden;
  min-height: max(56.25vw, 320px); /* 16:9 */
  display: flex; align-items: flex-end;
  padding: 120px 0 72px;
}
.hero .media { position: absolute; inset: 0 0 -20% 0; } /* runs on behind the stats strip */
.hero { overflow: visible; overflow-x: clip; } /* the title's trailing letter gap may run past the right edge */
/* later sections sit above the hero image; the stats strip lets it show through */
.stats, .section, .video-band, .footer { position: relative; z-index: 1; }
.hero .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, transparent 80%, #000 100%); } /* no dimming in the middle, only the bottom */
.hero-inner { position: relative; z-index: 1; }
.chip {
  display: inline-block;
  font: 700 .72rem/1 var(--head); letter-spacing: .18em; text-transform: uppercase;
  color: #000; background: var(--accent); padding: 9px 14px; margin-bottom: 24px;
}
.title {
  font: 400 clamp(6rem, 24vw, 15rem)/.82 var(--display);
  letter-spacing: .12em; margin: 0 0 20px; color: var(--text);
  text-shadow: 0 0 60px rgba(140, 82, 255, .45);
}
.logline { font: 700 clamp(1.2rem, 2.6vw, 1.7rem)/1.4 var(--body); color: var(--accent-2); letter-spacing: .03em; max-width: 34ch; margin-bottom: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Stats */
.stats { background: transparent; }
.stats-brand { text-align: right; }
.stats-logo { display: block; margin: 20px 0 10px auto; width: 148px; height: auto; } /* above the fiscal sponsor line */
.stats .stats-note { margin: 0 0 80px; text-align: right; line-height: 1.5; } /* small line above the stats, like the footer; the bar sits 80px below it */
@media (max-width: 760px) { /* phones: logo 20% smaller, logo and fiscal line centred */
  .stats-brand { text-align: center; }
  .stats-logo { width: 118px; margin-left: auto; margin-right: auto; }
  .stats .stats-note { text-align: center; margin-top: 40px; } /* 40px lower */
}
.stats-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.stat { padding: 36px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; border-left: 1px solid var(--line); }
.stats-grid .stat:first-child { border-left: 0; }
.stat-num { font: 400 clamp(1.6rem, 3.6vw, 3.4rem)/.95 var(--display); color: var(--text); letter-spacing: .04em; }
.stat-label { font: 700 .72rem/1.3 var(--head); color: var(--accent); text-transform: uppercase; letter-spacing: .14em; }
@media (max-width: 760px) { /* phones: one stat per row, lines running edge to edge */
  .stats-grid { grid-template-columns: 1fr; padding-left: 0; padding-right: 0; }
  .stat { padding: 24px 16px; border-left: 0; }
  .stats-grid .stat + .stat { border-top: 1px solid var(--line); }
  .stat { padding: 18px 16px; gap: 8px; }  /* rows closer together */
  .stat-num { font-size: 2.72rem; }  /* bigger on phones */
  .stat-label { font-size: .76rem; }
}

/* Sections */
.section { padding: clamp(64px, 10vw, 112px) 0; background: var(--bg-alt); }
.section.alt { background: var(--bg); }
/* No hard edges: each section's top blends from the colour of the one above */
.section { --blend: 360px; background: linear-gradient(180deg, var(--bg) 0, color-mix(in srgb, var(--bg) 94%, var(--bg-alt)) calc(var(--blend) * .15), color-mix(in srgb, var(--bg) 75%, var(--bg-alt)) calc(var(--blend) * .32), color-mix(in srgb, var(--bg) 50%, var(--bg-alt)) calc(var(--blend) * .5), color-mix(in srgb, var(--bg) 25%, var(--bg-alt)) calc(var(--blend) * .68), color-mix(in srgb, var(--bg) 6%, var(--bg-alt)) calc(var(--blend) * .85), var(--bg-alt) var(--blend)); }
.section.alt { background: linear-gradient(180deg, var(--bg-alt) 0, color-mix(in srgb, var(--bg-alt) 94%, var(--bg)) calc(var(--blend) * .15), color-mix(in srgb, var(--bg-alt) 75%, var(--bg)) calc(var(--blend) * .32), color-mix(in srgb, var(--bg-alt) 50%, var(--bg)) calc(var(--blend) * .5), color-mix(in srgb, var(--bg-alt) 25%, var(--bg)) calc(var(--blend) * .68), color-mix(in srgb, var(--bg-alt) 6%, var(--bg)) calc(var(--blend) * .85), var(--bg) var(--blend)); }
.video-band + .section.alt { background: var(--bg); } /* the video band already ends in black */
.eyebrow { font: 700 .72rem/1 var(--head); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.eyebrow span { color: var(--accent-2); }
.eyebrow { text-wrap: balance; } /* long subheaders split into even lines, not one word left over */
.eyebrow span::after { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--accent-2); vertical-align: middle; margin-left: 12px; }
.section p { max-width: 72ch; }
.callout { font: 700 clamp(1.6rem, 3.6vw, 2.4rem)/1.18 var(--body); /* same as the Introduction callout */ letter-spacing: .03em; color: var(--accent-2); margin-top: 1.4em; }

/* Scroll fade-in */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; transition-delay: var(--d, 0s); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Cards */
.cards { display: grid; gap: 20px; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cards.three { grid-template-columns: 1fr; } }
/* Talent on phones: the three cards become a looping carousel that slides on its own
   and can be swiped (built by script; the copy of the first card only shows here) */
.talent-clone { display: none; }
@media (max-width: 760px) {
  .talent-view { overflow: hidden; touch-action: pan-y; margin: 0 -2px; padding: 0 2px; }
  .talent-view .cards.three { display: flex; gap: 0; transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
  .talent-view .cards.three > .card { flex: 0 0 100%; text-align: left; }
  .talent-view .cards.three > .card + .card { border-left-width: 1px; }
  .talent-view.is-dragging .cards.three, .talent-view.no-anim .cards.three { transition: none; }
  .talent-clone { display: block; }
}
.card { background: var(--surface); border: 1px solid rgba(140, 82, 255, .28); border-radius: var(--radius); padding: 28px; }
.card p:last-child { margin-bottom: 0; }
/* Character headshots bleed to the card edges at the top */
.headshot { width: calc(100% + 56px); margin: -28px -28px 24px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.headshot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
/* Headshots sit in high-contrast black and white until the card is hovered */
.headshot img { filter: grayscale(1) contrast(1.35); transition: filter .5s ease; }
.card:hover .headshot img { filter: none; }
.age { color: var(--muted); font-weight: 400; }
.meta { font: 700 .72rem/1.3 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 10px 0 12px; }
.status { display: inline-block; font: 700 .7rem/1 var(--head); letter-spacing: .12em; color: var(--muted); border: 1px solid var(--line); padding: 8px 11px; margin-bottom: 16px; }
.status.confirmed { color: #000; background: var(--accent); border-color: var(--accent); }

/* Split layout */
.split { display: grid; grid-template-columns: 1fr 260px; gap: 48px; align-items: center; }
.stat-feature { border: 1px solid rgba(140, 82, 255, .35); border-radius: var(--radius); background: var(--surface); text-align: center; padding: 40px 20px; align-items: center; }
.stat-feature .stat-num { font-size: 8rem; color: var(--accent-2); }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: 32px; } .stat-feature { padding: 28px 20px; } .stat-feature .stat-num { font-size: 5rem; } }

/* Similar films */
.tags { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .tags { grid-template-columns: 1fr 1fr; } }
.tags li {
  font: 400 clamp(1.3rem, 2.6vw, 1.8rem)/1.05 var(--display); letter-spacing: .1em; text-transform: uppercase;
  display: flex; align-items: flex-end; min-height: 110px; padding: 18px;
  border: 1px solid rgba(140, 82, 255, .45); border-radius: var(--radius);
  background: radial-gradient(ellipse 80% 90% at 80% 0%, rgba(140, 82, 255, .22), transparent 70%), var(--surface);
}

/* Tiers */
.tiers { grid-template-columns: repeat(4, 1fr); margin: 40px 0 28px; }
@media (max-width: 1000px) { .tiers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tiers { grid-template-columns: 1fr; } }
.tier, .js .tier.reveal { display: flex; flex-direction: column; transition: opacity .9s ease var(--d, 0s), transform .9s ease var(--d, 0s), background-color .3s ease, border-color .3s ease, box-shadow .3s ease, translate .3s ease; }
.tier:hover, .tier:focus-within {
  background-color: #2c1a3c;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 1px var(--accent-2), 0 0 42px rgba(203, 108, 230, .45), inset 0 0 36px rgba(140, 82, 255, .18);
  translate: 0 -4px;
}
.tier-amt { transition: color .3s ease; }
.tier:hover .tier-amt { color: var(--accent-2); }
.tier h3 { margin-top: 14px; }
.tier-amt { font: 400 2.6rem/1 var(--display); color: var(--text); letter-spacing: .04em; margin: 0 0 6px; }
.fine { font-size: .86rem; color: var(--muted); margin: 6px 0 0; }
.remaining { margin-top: auto !important; padding-top: 20px; font: 700 .72rem/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--text); display: flex; gap: 10px; flex-wrap: wrap; }
.funded { color: var(--accent-2); }
.sponsor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid rgba(140, 82, 255, .45); background: linear-gradient(120deg, var(--accent-dim), transparent 60%); border-radius: var(--radius); padding: 28px; }
.sponsor p { margin: 0; color: var(--muted); }
.sponsor-label { font: 700 .72rem/1 var(--head); letter-spacing: .18em; text-transform: uppercase; color: var(--accent) !important; margin-bottom: 10px !important; }
.sponsor-name { font: 700 1.25rem/1.2 var(--head); color: var(--text) !important; margin-bottom: 6px !important; }
@media (max-width: 560px) { .sponsor .btn { width: 100%; } }
/* Fiscal sponsor and producer banners side by side (stacked on phones) */
.sponsor-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sponsor-pair .sponsor { align-items: flex-start; }
@media (max-width: 760px) { .sponsor-pair { grid-template-columns: 1fr; } }
.section p.more-info { margin-top: 60px; } /* under the sponsor boxes, a line of space clear of them */
.more-info a { white-space: nowrap; } /* keep "Email us" together */

/* Numbered steps (Key Dates) */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.step[open] { border-color: rgba(140, 82, 255, .55); }
.step summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 64px 1fr auto 28px; align-items: center; gap: 16px; padding: 22px 24px; }
.step summary::-webkit-details-marker { display: none; }
.step summary::after { content: "+"; font: 400 1.6rem/1 var(--head); color: var(--accent-2); text-align: right; transition: transform .2s; }
.step[open] summary::after { transform: rotate(45deg); }
.step-num { font: 400 2.6rem/1 var(--display); color: var(--accent); letter-spacing: .04em; }
.step-title { font: 700 1rem/1.2 var(--head); letter-spacing: .12em; text-transform: uppercase; }
.step-range { font: 600 .82rem/1.3 var(--body); color: var(--muted); text-align: right; }
.dates { list-style: none; margin: 0; padding: 0 24px 22px 104px; display: grid; gap: 10px; }
.dates li { padding-left: 16px; border-left: 2px solid rgba(140, 82, 255, .4); }
.dates b { color: var(--text); }
@media (max-width: 640px) {
  .step summary { grid-template-columns: 44px 1fr 24px; grid-template-areas: "n t x" "n r x"; row-gap: 4px; padding: 18px; }
  .step-num { grid-area: n; font-size: 2rem; }
  .step-title { grid-area: t; }
  .step-range { grid-area: r; text-align: left; }
  .step summary::after { grid-area: x; }
  .dates { padding: 0 18px 18px; }
}

/* FAQ accordions: same cards as Key Dates, without the date column */
.faq .step summary { grid-template-columns: 64px 1fr 28px; }
.answer { padding: 0 24px 22px 104px; color: var(--muted); }
.answer p { margin: 0; max-width: 72ch; }
@media (max-width: 640px) {
  .faq .step summary { grid-template-columns: 44px 1fr 24px; grid-template-areas: "n t x"; }
  .answer { padding: 0 18px 18px; }
}

/* Accordion open/close animation (script animates the height) */
.step.is-closing summary::after { transform: none; }

/* Contact */
.contact { background: linear-gradient(180deg, var(--bg-alt) 0, color-mix(in srgb, var(--bg-alt) 50%, transparent) 180px, transparent 360px), radial-gradient(ellipse 60% 70% at 50% 100%, rgba(140, 82, 255, .22), transparent 70%), var(--bg); }
.contact .eyebrow { justify-content: center; }
.contact p { margin-left: auto; margin-right: auto; }
.contact-name { font: 700 1.1rem/1.5 var(--head); letter-spacing: .08em; }
.contact-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; margin-bottom: 28px; } /* stacks on narrow phones */
.contact-card .contact-name { text-align: left; margin: 0; }
.contact-logo { display: block; width: 148px; height: auto; flex: none; } /* Silverspell logo, right of the producer details */
@media (max-width: 480px) { .contact-card { flex-direction: column-reverse; } } /* phones: logo centred above the details */
@media (min-width: 761px) { .contact-card { position: relative; left: -8px; } } /* desktop: block nudged 8px left */
#contact .eyebrow { margin-bottom: 92px; } /* 60px more space under the Contact heading and subheader */
.contact-name a { color: inherit; text-decoration: none; } /* phone number reads as plain text */
.contact-name a:hover { color: var(--accent-2); }
.contact-email { font: 400 clamp(2rem, 6vw, 3.4rem)/1.1 var(--display); letter-spacing: .06em; text-decoration: none; color: var(--accent-2); word-break: break-word; }
.thanks { color: var(--muted); margin: 28px auto 36px !important; }

/* Footer */
.footer { padding: 40px 0; background: #000; }
.footer-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } /* stacked; SHELL left, the two text lines centred */
.footer .fine { margin: 0; align-self: center; text-align: center; line-height: 1.5; }
.footer .brand { margin: 0 0 10px; }

/* Right-aligned sections (alternating sides) */
.right .wrap { text-align: right; }
.right .eyebrow { flex-direction: row-reverse; }
.right .eyebrow span { display: inline-flex; flex-direction: row-reverse; align-items: center; }
.right .eyebrow span::after { margin: 0 12px 0 0; }
.right .section p, .right p { margin-left: auto; }
@media (max-width: 760px) { /* phones: right-aligned sections read left-aligned */
  .right .wrap { text-align: left; }
  .right .eyebrow, .right .eyebrow span { flex-direction: row; }
  .right .eyebrow span::after { margin: 0 0 0 12px; }
  .right .section p, .right p { margin-left: 0; }
}
.right .split { grid-template-columns: 260px 1fr; }
.right .split > .stat-feature { order: -1; }
@media (max-width: 820px) {
  .right .split { grid-template-columns: 1fr; }
  .right .split > .stat-feature { order: 0; }
}

/* Keep each stat number on one line */
.stat-num { white-space: nowrap; }

/* TEST: donor levels with rollover video */
.tier-reel {
  display: grid; grid-template-columns: minmax(200px, 1fr) 2.2fr; gap: 28px; align-items: stretch;
  margin: 72px 0 112px;
}
.tier-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.tier-list button {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 12px;
  font: 400 2rem/1 var(--display); letter-spacing: .04em; color: var(--text);
  background: var(--surface); border: 1px solid rgba(140, 82, 255, .28); border-radius: var(--radius);
  padding: 14px 20px;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease;
}
/* Lit state comes from .is-active (set by script on hover/tap), not :hover,
   which sticks to the last-tapped button on phones */
.tier-list button:focus-visible, .tier-list button.is-active {
  background-color: #2c1a3c; color: var(--accent-2); border-color: var(--accent-2);
  box-shadow: 0 0 0 1px var(--accent-2), 0 0 42px rgba(203, 108, 230, .45), inset 0 0 36px rgba(140, 82, 255, .18);
  outline: none;
}
.tier-screen { position: relative; background: #000; border: 1px solid rgba(140, 82, 255, .28); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 0 42px rgba(203, 108, 230, .225); } /* constant glow: the lit levels' glow at half strength */
.tier-screen video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; z-index: 1; }
.tier-screen.is-playing video { opacity: 1; }

/* Title-card animation: fade in, slow scale up, fade out */
.tier-scene { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; }
/* The scene itself only keeps time; the credit and description fade separately.
   The description fades in slowly after the credit; both fade out together. */
.tier-scene.run { opacity: 1; animation: scene-clock var(--scene, 5s) linear forwards; }
.tier-scene.run .scene-card { animation: scene-fade var(--scene, 5s) ease-in-out forwards, scene-scale var(--scene, 5s) linear forwards; }
.tier-scene.run .scene-note { animation: note-fade var(--scene, 5s) ease-in-out forwards; }
.scene-card, .scene-note { opacity: 0; }
@keyframes scene-clock { from { opacity: 1; } to { opacity: 1; } }
@keyframes scene-fade { 0% { opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes note-fade { 0%, 18% { opacity: 0; } 48% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes scene-scale { from { transform: scale(1); } to { transform: scale(1.08); } }
.scene-card { position: absolute; inset: 0 24px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.scene-card p, .scene-note { margin: 0 !important; max-width: none !important; }
.scene-title { font: 400 clamp(1.6rem, 3vw, 2.4rem)/1.1 var(--display); letter-spacing: .16em; color: var(--accent); }
.scene-name { font: 700 1.4rem/1.35 var(--head); letter-spacing: .06em; color: var(--text); margin-top: 12px !important; }
.scene-name:empty { display: none; }
/* Credit text darkens slightly over the bottom 35% of the letters;
   violet also brightens over the top 10%
   (stops are set for where the capitals sit in the line box) */
.scene-title .cr, .scene-name {
  background: linear-gradient(180deg, #a97dff 17%, var(--accent) 23%, var(--accent) 55%, #5b34a9 76%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.scene-title .you, .scene-name { background-image: linear-gradient(180deg, #fff 55%, #d5d3d9 76%); }
.avail { font: 700 .68rem/1.3 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: left; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
.tier-list button.is-active .avail { color: var(--text); }
.scene-note { position: absolute; left: 24px; right: 24px; bottom: 22px; text-align: center; font-size: .95rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .tier-scene.run .scene-card { animation: scene-fade var(--scene, 5s) ease-in-out forwards; } }
@media (max-width: 760px) {
  .tier-reel { grid-template-columns: 1fr; min-height: 0; }
  .tier-screen { aspect-ratio: 16 / 10; min-height: 0; order: -1; }
  .tier-list button { font-size: 1.7rem; padding: 12px 18px; }
}

/* TEST: stacked version, full-width video with the levels in a row below */
.tier-reel.stacked { grid-template-columns: minmax(0, 1fr); gap: 36px; }
@media (max-width: 760px) { .tier-reel.stacked { gap: 14px; } }
.tier-reel.stacked .tier-screen { aspect-ratio: auto; height: 0; padding-top: 44.44%; order: -1; } /* 2.25 : 1, sized with padding so every browser (older iPhones too) shows it */
.tier-reel.stacked .avail { white-space: nowrap; }
.tier-reel.stacked .tier-list { flex-direction: row; gap: 14px; }
.tier-reel.stacked .tier-list li { flex: 1 1 0; min-width: 0; }
.tier-reel.stacked .tier-list button { height: 100%; flex-direction: column; justify-content: center; gap: 8px; text-align: center; padding: 16px; }
.tier-reel.stacked .avail { justify-content: center; text-align: center; }
@media (max-width: 900px) {
  .tier-reel.stacked .tier-list { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .tier-reel.stacked .tier-screen { padding-top: 62.5%; } /* 16 : 10 */
  .tier-reel.stacked .tier-list { grid-template-columns: 1fr; gap: 10px; }
}

/* Subtle film grain over the donor video panel */
.tier-screen::after {
  content: ""; position: absolute; top: -50%; right: -50%; bottom: -50%; left: -50%; z-index: 2; pointer-events: none;
  opacity: .09; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); }
}
/* A second, coarser grain behind the credits */
.tier-screen::before {
  content: ""; position: absolute; top: -50%; right: -50%; bottom: -50%; left: -50%; pointer-events: none;
  opacity: .0192; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.3s steps(5) infinite reverse, grain-pulse .9s linear infinite;
}
/* Projector-style flicker of the back grain: fast, uneven, narrow range */
@keyframes grain-pulse {
  0% { opacity: .0192; } 11% { opacity: .024; } 19% { opacity: .016; } 32% { opacity: .0224; } 41% { opacity: .0176; }
  55% { opacity: .024; } 63% { opacity: .016; } 74% { opacity: .0208; } 86% { opacity: .0176; } 100% { opacity: .0192; }
}
@media (prefers-reduced-motion: reduce) { .tier-screen::before, .tier-screen::after { animation: none; } }

/* Section number tags (e.g. 04 —— Creature Design) sit under each header */
h2 + .eyebrow { margin-top: -18px; margin-bottom: 32px; }

/* Donor video descriptions stay on one line on phones (sized for iPhone 16, 393px) */
@media (max-width: 560px) {
  .scene-note { white-space: nowrap; font-size: 2.8vw; letter-spacing: 0; left: 10px; right: 10px; bottom: 14px; }
  /* "YOUR NAME" gets its own line in the credits, e.g. YOUR NAME / PRESENTS ... */
  .scene-title .you { display: block; }
  .scene-title .dots { display: none; }
}

/* Top-left SHELL only fades in once the big hero title has scrolled off screen */
.topbar .brand { color: #fff; letter-spacing: -.01em; } /* white Bebas, tight like the header title */
.topbar .brand { display: none; } /* wordmark hidden for now */
.menu-toggle { margin-left: auto; } /* phones: keep the menu button on the right */
@media (min-width: 1041px) {
  .nav { flex: 1; }                      /* menu links sit on the left */
  .nav .btn { margin-left: auto; }       /* Donate stays on the right */
}
.js .topbar .brand { opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.js .topbar.show-brand .brand { opacity: 1; pointer-events: auto; }

/* Hero title fades in slowly on load */
/* Title centred in the hero like a film title card: smaller, widely spaced letters.
   The left padding balances the space letter-spacing adds after the last letter. */
.hero { align-items: center; padding: 24px 0; }
.hero-inner { text-align: center; max-width: none; padding: 0; } /* full width, so SHELL centres on wide screens too */
.hero-inner { mix-blend-mode: difference; } /* SHELL inverts the image / video behind it */
.hero .title { margin: 0; font-family: var(--display); font-weight: 400; color: #fd81e2; text-shadow: none; line-height: .8; font-size: 54.5vw; letter-spacing: -.037em; margin-right: .037em; transform: translateY(.05em) translateY(clamp(-8vw, calc(50svh - 27.5px - 28.125vw), 0px)); /* tight tracking; raised to the middle of the space below the menu */ white-space: nowrap; /* pink SHELL filling the 16:9 header */ }
.js .hero .title.reveal { transform: translateY(.05em) translateY(clamp(-8vw, calc(50svh - 27.5px - 28.125vw), 0px)); transition: none; opacity: 1; } /* the letters fade on instead */
/* Each letter of the title fades on in turn, on a fixed timer */
@media (max-width: 760px) { .hero .title { font-size: 85vw; margin-right: 0; } } /* phones: GOO runs almost edge to edge, centred */
.js .hero .title span { animation: hero-letter-in 8s ease both; }
/* Hold the title (letters and grow) until Bebas Neue has loaded; they stay hidden meanwhile */
.js:not(.fonts-ready) .hero .title span, .js:not(.fonts-ready) .hero .title.reveal { animation-play-state: paused; }
@keyframes hero-letter-in { from { opacity: 0; color: #72c8ff; } to { opacity: 1; color: #fd81e2; } } /* blue to the title pink */
/* The whole title grows slightly towards us while the letters fade on (first letter starts to last letter lands) */
.js .hero .title.reveal { animation: hero-title-grow 8.5s ease-out .4s both; }
@keyframes hero-title-grow { from { scale: .94; } to { scale: 1; } }
.js .hero .title span:nth-child(1) { animation-delay: .4s; }
.js .hero .title span:nth-child(2) { animation-delay: .65s; }
.js .hero .title span:nth-child(3) { animation-delay: .9s; }
/* The header image (later the looping video) fades on over 2s from the start of the page load */
.js .hero .media { animation: hero-media-in 2s ease both; }
@keyframes hero-media-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .hero .media, .js .hero .title span, .js .hero .title.reveal { animation: none; } }

/* Menu jumps: the page fades out, lands just short of the section, then glides in */
main, .footer { transition: opacity .15s ease; }
body:not(.is-jumping) main, body:not(.is-jumping) .footer { transition-duration: .9s; } /* slower fade back in */
.is-jumping main, .is-jumping .footer { opacity: 0; }

/* Donor video table sits right under the Donation Financed header */
p + .tier-reel { margin-top: 40px; margin-bottom: 64px; }
#support .sponsor { margin-top: 48px; }

/* Page-wide film texture, very subtle: drifting grain plus random scratches and dust (script.js) */
.film { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.film::before {
  content: ""; position: absolute; inset: -50%; opacity: .045; mix-blend-mode: screen;
  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='.8' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
.film .scratch, .film .dust { position: absolute; opacity: 0; animation: film-flash var(--life, .3s) ease-out forwards; }
.film .scratch { top: var(--y); left: var(--x); width: 1px; height: var(--h); background: linear-gradient(180deg, transparent, var(--c) 15%, var(--c) 85%, transparent); filter: blur(.4px); transform: rotate(var(--tilt)); }
.film .dust { top: var(--y); left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: var(--c); filter: blur(.6px); }
@keyframes film-flash { 0% { opacity: 0; } 15% { opacity: var(--o); } 60% { opacity: var(--o); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .film::before { animation: none; } }

/* Vimeo video beside the Creature Design text (16:9, fills its column) */
.split-video { grid-template-columns: 1fr 1fr; gap: 48px; }
.right .split-video { grid-template-columns: 1fr 1fr; }
.right .split > .vimeo { order: -1; }
.vimeo { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid rgba(140, 82, 255, .28); border-radius: var(--radius); overflow: hidden; }
.vimeo iframe, .vimeo video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.vimeo:has(video) { aspect-ratio: 1080 / 452; } /* the creature video is widescreen (2.39:1), so the box matches it */
@media (max-width: 820px) { .split-video, .right .split-video { grid-template-columns: 1fr; } .right .split > .vimeo { order: 0; } }

/* Numbered milestones in How to Donate */
.milestones { margin: 0 0 40px; padding-left: 1.4em; max-width: 72ch; } /* space before the sponsor banner */
.milestones li { margin: .3em 0; padding-left: .3em; }

/* How to Donate follows Donation Financed on the same plum, so no blend from black between them */
#how-to-donate { background: var(--bg-alt); padding-top: calc(clamp(64px, 10vw, 112px) - 25px); } /* 25px less space above Expressions of Interest */

/* Three steps to donate: small boxes with the fiscal sponsor banner's border and text styles */
.donate-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 56px 0 64px; } /* room above (after the total raise line) and below (before the milestones) */
.step-box { border: 1px solid rgba(140, 82, 255, .45); background: linear-gradient(120deg, var(--accent-dim), transparent 60%); border-radius: var(--radius); padding: 22px; }
.step-box p { margin: 0; color: var(--muted); font-size: .9rem; max-width: none; }
.step-box .sponsor-name { font-size: 1.05rem; }
@media (max-width: 760px) { .donate-steps { grid-template-columns: 1fr; } }
/* Donor form inside the step boxes */
.step-box { display: flex; flex-direction: column; gap: 10px; }
.step-box .sponsor-label { margin-bottom: 0 !important; }
.pick { min-width: 0; border: 0; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.step-box > p + .pick:not(.levels) { margin-top: 32px; } /* box 01: the questions sit clear of the description */
.step-box > .levels { margin-top: 8px; } /* box 03: equal space above the levels (to the heading) and below them (to the buttons) */
.step-box > .levels + .step-nav { margin-top: 14px; }
.pick legend { font: 700 .72rem/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--text); margin-bottom: 8px; padding: 0; }
.pick label { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pick input + span { display: block; border: 1px solid rgba(140, 82, 255, .45); border-radius: var(--radius); padding: 9px 14px; font: 700 .82rem/1.2 var(--head); letter-spacing: .04em; color: var(--text); transition: background .2s, border-color .2s, color .2s; }
.pick small { display: block; font: 400 .74rem/1.3 var(--body); letter-spacing: 0; color: var(--muted); margin-top: 3px; }
.pick label:hover input + span { border-color: var(--accent-2); }
.pick input:checked + span { background: var(--accent); border-color: var(--accent); }
.pick input:checked + span, .pick input:checked + span small { color: #fff; } /* selected: white text */
.pick .count { position: absolute; top: 9px; right: 12px; font: 700 .68rem/1 var(--head); letter-spacing: .08em; color: var(--muted); } /* available / total */
.pick input:checked + span .count { color: #000; }
.pick input:focus-visible + span { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.levels { flex-direction: column; flex-wrap: nowrap; gap: 12px; }
/* Donor form as a carousel (with script): one step active on the left margin, the others
   stacked behind it to either side */
.step-next { display: none; }
.js .step-next { display: inline-flex; }
.donate-steps.is-carousel { display: block; position: relative; height: var(--step-h, auto); transition: height .5s ease; }
#how-to-donate { overflow-x: clip; } /* steps set back to the sides may run past the page edge */
.is-carousel .step-box { position: absolute; top: 0; left: 0; width: min(780px, 100%); aspect-ratio: 16 / 9; padding: 32px 132px; /* active step sits on the left margin; grows taller if the content needs it */
  transform: translate(var(--x, 0%), var(--y, 0px)) scale(var(--s, 1)); transform-origin: 50% 50%; /* --y centres side steps on the active one */ opacity: var(--o, 1); z-index: var(--z, 3);
  transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s ease; }
/* Steps behind the active one: solid (so each hides the one behind it), no text,
   just the box, its field outlines and its border, darker the further back they sit */
.is-carousel .step-box[data-pos="-1"] { --x: -16%; --s: .9; --z: 2; --stack-bg: #1a121e; --stack-line: rgba(140, 82, 255, .35); cursor: pointer; }
.is-carousel .step-box[data-pos="1"]  { --x: calc(21% - 14px);  --s: .9; --z: 2; --stack-bg: #1a121e; --stack-line: rgba(140, 82, 255, .35); }
.is-carousel .step-box[data-pos="-2"] { --x: -28%; --s: .8; --z: 1; --stack-bg: #130d16; --stack-line: rgba(140, 82, 255, .2); cursor: pointer; }
.is-carousel .step-box[data-pos="2"]  { --x: calc(38% - 14px);  --s: .8; --z: 1; --stack-bg: #130d16; --stack-line: rgba(140, 82, 255, .2); }
.is-carousel .step-box[data-pos="0"] { background: linear-gradient(120deg, var(--accent-dim), transparent 60%), var(--bg-alt); } /* solid, so the step behind doesn't show through */
.is-carousel .step-box:not([data-pos="0"]) { background: var(--stack-bg); border-color: var(--stack-line); }
.is-carousel .step-box:not([data-pos="0"]) > * { pointer-events: none; } /* side steps: click the box to go back, not its fields */
.is-carousel .step-box:not([data-pos="0"]) * { color: transparent !important; } /* hide the text */
.is-carousel .step-box:not([data-pos="0"]) :is(input, .level-box, .pick input + span) { background: rgba(0, 0, 0, .3) !important; border-color: var(--stack-line) !important; }
.is-carousel .step-box:not([data-pos="0"]) .step-nav { visibility: hidden; }
.is-carousel .step-box * { transition: color .5s ease, background-color .5s ease, border-color .5s ease; }
@media (max-width: 760px) {
  .is-carousel .step-box { width: 100%; padding: 18px; } /* phones: room for long names */
  .pick .level { flex-direction: column; align-items: stretch; gap: 6px; } /* phones: amount above the credit, for room */
  .pick .level-amt { flex: none; font-size: 1.25rem; }
  .pick.levels .level-box { flex: none; width: 100%; white-space: normal; }
  .level-box .cr-break { display: block; height: 0; overflow: hidden; } /* phones: credit on one line, name on the next */
}

.section p.exclusive { margin-top: 32px; } /* space above "To protect the exclusivity…" */
/* Credit rules under the exclusivity line: small, with a bullet for each */
.credit-notes { list-style: none; margin: 44px 0 0; padding: 0; font-size: .8rem; line-height: 1.4; color: var(--muted); }
.credit-notes li { position: relative; padding-left: 1.1em; margin-top: 3px; }
.credit-notes li::before { content: "•"; position: absolute; left: 0; }

/* Donation Financed: name field that personalises the credits in the donor table */
.field.credit-name { max-width: 400px; margin: 40px 0 32px; } /* 40px below "Consider this a better opportunity ..." */
.credit-row { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; } /* room for the name message */ /* button sits below the field */
.credit-row input { width: 100%; min-width: 0; }
/* "Please enter your name": sits in the gap under the field, styled like the field labels */
.credit-row { position: relative; }
.field-error { position: absolute; top: 47px; left: 0; margin: 0; font: 700 .68rem/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); animation: field-error-in .3s ease both; }
.field-error[hidden] { display: none; }
.credit-row input[aria-invalid] { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(203, 108, 230, .18); }
@media (min-width: 761px) { .field-error { top: 51px; } }
/* Expressions of Interest: the note sits at the right end of the field's label line */
.donate-steps .field, .donate-steps fieldset { position: relative; }
.donate-steps .field-error { top: 0; left: auto; right: 0; }
.donate-steps .levels > .field-error { top: -16px; } /* the levels have no visible label, so it sits just above the first one */
.donate-steps [data-invalid] input:not([type="radio"]) { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(203, 108, 230, .18); }
.donate-steps fieldset[data-invalid] input + span, .donate-steps fieldset[data-invalid] .level-box { border-color: var(--accent-2); } /* desktop has a wider gap to the button */
@keyframes field-error-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.credit-go svg { margin-left: 10px; vertical-align: -4px; }
/* The rest of Donation Financed, and Expressions of Interest, stay closed until the name is in (with script only) */
.js .support-more, .js #how-to-donate { display: none; }
.js .support-more.is-open, .js #how-to-donate.is-open { display: block; animation: support-open .9s ease both; } /* Expressions of Interest opens with it */
/* Until the name is in, nothing after the name field shows, and the page ends with room
   for the field to sit near the middle of the screen when scrolled to the bottom */
.js body.is-locked #support ~ *, .js body.is-locked .footer { display: none; }
.js body.is-locked #support { padding-bottom: calc(50svh - 127px); }
@media (min-width: 761px) { .credit-row { gap: 32px; } .js body.is-locked #support { padding-bottom: calc(50svh - 131px); } } /* more room around the button on desktop; field stays centred */
@keyframes support-open { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.credit-name input::placeholder { color: var(--muted); opacity: .6; }

/* After sending: the form fades away and a thank-you takes its place, centred */
.donate-steps { transition: opacity .6s ease; }
.donate-steps.is-done { opacity: 0; pointer-events: none; }
.donor-thanks { text-align: center; padding: 72px 16px 64px; animation: thanks-in .9s ease both; outline: none; }
.donor-thanks .thanks-title { font: 400 clamp(2.6rem, 6vw, 4.4rem)/1 var(--display); letter-spacing: .04em; color: var(--accent-2); text-transform: uppercase; margin: 0 auto 18px; max-width: none; }
.donor-thanks p { margin-left: auto; margin-right: auto; color: var(--muted); font-size: 1.05rem; }
@keyframes thanks-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Donor levels: amount above, like a field label; credit and count inside a field-style box */
.level { display: flex; align-items: center; gap: 14px; min-width: 0; } /* amount and credit on one line */
.level-amt { flex: 0 0 5.4rem; font: 400 1.45rem/1 var(--display); letter-spacing: .04em; color: var(--text); } /* amounts in Bebas, like the big stats */
.level input { inset: 0; } /* the whole row is the click target */
.pick .level-box { flex: 1; min-width: 0; position: relative; background: rgba(0, 0, 0, .35); font: 400 .95rem/1.3 var(--body); letter-spacing: 0; padding: 10px 52px 10px 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line, same height as the email field */
.your-name { text-transform: uppercase; font-weight: 700; } /* the donor's name always shows in capitals */
.level-box .count { top: 50%; transform: translateY(-50%); }
.field { display: flex; flex-direction: column; gap: 6px; font: 700 .72rem/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--text); margin-top: 4px; }
.field input, .field select { font: 400 .95rem/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--text); background: rgba(0, 0, 0, .35); border: 1px solid rgba(140, 82, 255, .45); border-radius: var(--radius); padding: 10px 12px 10px 18px; }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent-2); }
.field select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background: rgba(0, 0, 0, .35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23cb6ce6' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.field select option { background: #170f19; color: var(--text); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* spam trap, hidden from people */
.step-nav { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 12px; }
.step-back { display: none; width: 48px; height: 48px; place-items: center; background: transparent; color: var(--text); border: 1px solid rgba(255, 255, 255, .4); cursor: pointer; transition: color .2s, border-color .2s; }
.js .step-back { display: grid; }
.step-back:hover { color: var(--accent-2); border-color: var(--accent-2); }
.step-box:first-child .step-back { display: none; } /* nothing before step 01, so Next lines up with the fields */
.step-box:last-child .step-nav { padding-top: 14px; } /* Express Interest sits 8px lower */
@media (min-width: 761px) {
  .step-box:last-child .step-nav { gap: calc(5.4rem + 14px - 48px); } /* Express Interest lines up with the level fields */
}
.step-box .form-status { min-height: 1.4em; color: var(--accent-2); }
.step-box .form-status.error { color: #ff8a8a; }

/* Similar Films carousel: centre still with the previous and next peeking out behind */
.carousel { position: relative; margin-top: 110px; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; overflow-x: clip; overflow-y: visible; container-type: inline-size; } /* far slides wait off to the sides without widening the page */
/* Stacked carousel: each still back is smaller (100% > 80% > 64%), tucked 30% under the one in front.
   The centre still is half the carousel width; the outer stills fade off at the carousel's edges. */
.carousel-track { position: relative; margin: 0 auto;
  width: min(calc(100% / 2.065), 754px); aspect-ratio: 1600 / 1080;
  /* centred still snapped to whole multiples of 4px in both width and height */
  width: round(down, min(100cqw / 2.065, 754px), 4px);
  height: round(nearest, min(100cqw / 2.065, 754px) * 0.675, 4px); }
.cslide {
  position: absolute; inset: 0; margin: 0; border-radius: 24px; overflow: hidden; /* no border or fill, so overlaps can blend */
  will-change: transform; /* position, size, brightness and stacking are set every frame by script.js */
}
/* Overlapping stills add together, inside their own layer, so a crossfade between two stills
   looks the same whichever one is in front (no step when they swap) */
.carousel-track { isolation: isolate; }
@media (min-width: 761px) { .cslide { mix-blend-mode: plus-lighter; } }
.cslide img { -webkit-user-drag: none; pointer-events: none; }
.cslide img, .cslide-empty { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 24px; } /* rounded enough to read at this size */
.cslide-empty { background: radial-gradient(ellipse 70% 70% at 50% 45%, rgba(140, 82, 255, .22), transparent 70%), #0b070d; }
.cslide-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .55) 100%); }
.cslide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 24px 33px 36px; text-align: left; }
.cslide figcaption h3 { font: 400 .945rem/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--text); margin: 0 0 2px; }
.cslide figcaption h3 b { font-weight: 600; } /* title heavier than its quote marks */
.cslide figcaption h3 .q { font-family: Georgia, "Times New Roman", serif; font-size: 1.15em; line-height: 0; } /* curled quote marks */
.cslide figcaption p { margin: 0; max-width: none; font-size: .81rem; font-weight: 300; line-height: 1.3; color: rgba(255, 255, 255, .8); }
@media (max-width: 760px) {
  .carousel-track { width: 100%; width: round(down, 100cqw, 4px); height: round(nearest, 100cqw * 0.675, 4px); }
  .cslide figcaption { padding: 48px 16px 22px; }
  .cslide figcaption h3 { font-size: .81rem; }
  .cslide figcaption p { font-size: .7rem; }
}

/* Carousel's far left and right edges fade out instead of cutting off hard (desktop only) */
@media (min-width: 761px) {
  .carousel {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 4%, rgba(0,0,0,.75) 9%, #000 13%, #000 87%, rgba(0,0,0,.75) 91%, rgba(0,0,0,.25) 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 4%, rgba(0,0,0,.75) 9%, #000 13%, #000 87%, rgba(0,0,0,.75) 91%, rgba(0,0,0,.25) 96%, transparent 100%);
  }
}

/* Desktop: the carousel runs the full width of the window, not just the text column */
@media (min-width: 761px) {
  .carousel { width: 100vw; margin-left: calc(50% - 50vw); }
}

/* Similar Films: less space under the carousel so it sits centred between the two headings */
#similar { padding-bottom: calc(clamp(64px, 10vw, 112px) - 97px); }

/* Stats strip: dividers on the outer sides too (left of March, right of Total raise) */
@media (min-width: 761px) {
  .stats-grid .stat:first-child { border-left: 1px solid var(--line); }
  .stats-grid .stat:last-child { border-right: 1px solid var(--line); }
}

/* Introduction sits on the same plum as Synopsis below it, so Synopsis doesn't blend from black */
.intro + .section { background: var(--bg-alt); }

/* Introduction + Synopsis: one shared background (black blending to plum, like a section),
   with the faces image screened over it so its black drops away into the plum */
.faces-bg { position: relative; overflow: clip; --blend: 360px;
  background: linear-gradient(180deg, var(--bg) 0, color-mix(in srgb, var(--bg) 94%, var(--bg-alt)) calc(var(--blend) * .15), color-mix(in srgb, var(--bg) 75%, var(--bg-alt)) calc(var(--blend) * .32), color-mix(in srgb, var(--bg) 50%, var(--bg-alt)) calc(var(--blend) * .5), color-mix(in srgb, var(--bg) 25%, var(--bg-alt)) calc(var(--blend) * .68), color-mix(in srgb, var(--bg) 6%, var(--bg-alt)) calc(var(--blend) * .85), var(--bg-alt) var(--blend)); }
.faces-bg > .section, .faces-bg > .intro + .section { background: transparent; }
.faces { position: absolute; right: 0; top: var(--faces-top, 0px); width: 62.5vw; /* 25% smaller; right edge flush with the screen's */ opacity: 0; /* placed to match the mock-up; script fades it with scrolling */
  pointer-events: none; mix-blend-mode: lighten; } /* lighten: the image's black drops into the plum without washing out the face */
.faces img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
  .faces { width: 150vw; right: auto; left: calc(-45vw + 60px); } /* phones: larger, face centred on screen then 60px right */
}


/* From the Director: text with the director's photo beside it (photo above the text on phones) */
.director-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 56px; align-items: start; }
.director-photo { margin: 0; position: sticky; top: 96px; }
.director-photo img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; }
@media (max-width: 820px) {
  .director-split { grid-template-columns: 1fr; gap: 32px; }
  .director-photo { order: -1; position: static; max-width: 420px; }
  .director-photo img { aspect-ratio: 4 / 5; object-position: 50% 45%; }
}

/* Underlines carried over from the pitch deck */
u { text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* Section tags: no numbers now, just the line and the name */
.eyebrow span:empty::after { margin: 0 !important; }

/* Introduction's closing line: orchid, bold, same size as the hero logline */
/* Larger, and centred between the stats bar and the Introduction text
   (the section's top padding plus these margins keep the total space the same) */
.intro-callout { --pad: clamp(64px, 10vw, 112px); font: 700 clamp(1.6rem, 3.6vw, 2.4rem)/1.18 var(--body); letter-spacing: .03em; color: var(--accent-2); margin: calc((67px - var(--pad)) / 2 + 10px) 0 calc((67px + var(--pad)) / 2 - 10px); } /* 10px lower than centre */

/* "Here is where you come in ..." sits centred across the page */
.section p.callout { text-align: center; max-width: none; margin-left: auto; margin-right: auto; margin-top: 123px; }
/* ...and the extra space above it comes out of the section's bottom padding, so the gap to the next section stays the same */
#why { padding-bottom: calc(clamp(64px, 10vw, 112px) - 42px); }

/* An extra line of space above a paragraph */
.section p.gap-above { margin-top: 2.6em; }

/* Donor financing callout: half a line between its two lines */
.callout-next { display: block; margin-top: .5em; }
/* A Feature Presentation sits 50px lower */
#storyworld { padding-top: calc(clamp(64px, 10vw, 112px) + 50px); }

/* A faint dividing line, sitting midway between the text above and below */
.soft-rule { border: 0; height: 1px; background: rgba(255, 255, 255, .12); margin: 21px 0; }

/* Tiny navigation dots under the carousels */
.car-dots { display: flex; justify-content: center; gap: 0; margin-top: 12px; }
.car-dots button { width: 18px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } /* bigger tap area, tiny dot */
.car-dots button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .28); transition: background .3s, transform .3s; }
.car-dots button.is-active::before { background: var(--accent-2); transform: scale(1.3); }
.talent-dots { display: none; } /* the Talent cards are only a carousel on phones */
@media (max-width: 760px) { .talent-dots { display: flex; } }