/* ==========================================================================
   Abhishek Shah Casting Company — "The Audition Room"
   Palette pulled from the logo: coral masks, marigold stairs & star.
   ========================================================================== */
:root {
  --ink: #0d0b0a;
  --stage: #141110;
  --stage-2: #1c1714;
  --paper: #efe6d6;
  --paper-2: #e4d8c3;
  --cream: #f6efe3;
  --muted: #a39887;
  --rule-ink: rgba(20, 17, 16, .2);
  --rule-cream: rgba(246, 239, 227, .16);
  --coral: #ef6054;
  --coral-deep: #c9463b;
  --gold: #ffcc01;
  --gold-soft: #f2c14e;
  --f-serif: "Gloock", "Georgia", serif;
  --f-sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Courier Prime", "Courier New", monospace;
  --f-hand: "Kalam", "Comic Sans MS", cursive;
  --f-gu: "Baloo Bhai 2", "Noto Sans Gujarati", sans-serif;
  --wrap: 104rem;
  --pad: max(clamp(16px, 4vw, 56px), calc((100vw - var(--wrap)) / 2));
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; font-size: clamp(16px, calc(16px + (100vw - 1440px) * .0042), 20px); }
@supports (overflow: clip) { html { overflow-x: clip; } }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--ink); color: var(--cream);
  font: 400 1.0625rem/1.6 var(--f-sans);
  -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
em { font-style: normal; }
:focus-visible { outline: 2px dashed var(--gold); outline-offset: 4px; }
::selection { background: var(--coral); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- shared bits ---------- */
.kicker {
  display: flex; align-items: center; gap: .7em;
  font: 700 .74rem/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.kicker--ink { color: rgba(13, 11, 10, .62); }
.kicker__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); flex: none; box-shadow: 0 0 0 4px rgba(239, 96, 84, .18); }
.kicker__dot--gold { background: var(--gold); box-shadow: 0 0 0 4px rgba(255, 204, 1, .16); }
.kicker__dot--ink { background: var(--ink); box-shadow: 0 0 0 4px rgba(13, 11, 10, .12); }
.sec-title { font: 400 clamp(3rem, min(8.4vw, 15vh), 8.6rem)/.92 var(--f-serif); letter-spacing: -.02em; }
.sec-title em { color: var(--coral); }
.sec-head { padding: 0 var(--pad); display: grid; gap: 1.6rem; }
.sec-head--center { text-align: center; justify-items: center; }
.dark { background: var(--stage); color: var(--cream); }
.paper {
  color: var(--ink);
  background:
    radial-gradient(120% 60% at 10% 0%, rgba(255, 255, 255, .45), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(170, 140, 100, .18), transparent 60%),
    var(--paper);
}
.label-h { display: flex; align-items: center; gap: 1.2rem; font: 700 .8rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
.label-h i { flex: 1; height: 1px; background: currentColor; opacity: .3; }
.label-h--light { color: var(--muted); padding: 0 var(--pad); margin-top: clamp(60px, 8vw, 110px); }
.gu { font: 800 clamp(3rem, 7.4vw, 6.8rem)/1 var(--f-gu); color: var(--coral); }
.link-ul { display: inline-block; font: 700 .82rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding-bottom: .4em; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease), color .3s; }
.link-ul:hover { color: var(--gold); background-size: 30% 1px; }
.btn {
  display: inline-flex; align-items: center; gap: .6em; justify-content: center;
  font: 700 .82rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  padding: 1.15em 1.7em; border-radius: 999px; color: var(--ink);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn:hover { transform: translateY(-3px) rotate(-1deg); }
.btn--coral { background: var(--coral); box-shadow: 0 10px 30px -10px rgba(239, 96, 84, .7); }
.btn--gold { background: var(--gold); box-shadow: 0 10px 30px -10px rgba(255, 204, 1, .55); }

/* ---------- film grain + cursor ---------- */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { background-position: 0 0; } 20% { background-position: -37px 21px; } 40% { background-position: 29px -44px; }
  60% { background-position: -58px -13px; } 80% { background-position: 47px 36px; } 100% { background-position: 0 0; }
}
.cursor { position: fixed; left: 0; top: 0; z-index: 96; pointer-events: none; display: none; opacity: 0; transition: opacity .4s; }
.cursor.is-live { opacity: 1; }
.has-cursor .cursor { display: block; }
.cursor__ring {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1.5px solid var(--coral); transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, opacity .3s;
}
.cursor__ring::after { content: ""; position: absolute; width: 14px; height: 3px; border-radius: 3px; background: var(--gold); left: 88%; top: 88%; transform: rotate(41deg); transform-origin: 0 50%; transition: opacity .3s; }
.cursor__label { position: absolute; transform: translate(-50%, -50%); font: 700 .66rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .25s; white-space: nowrap; }
.cursor.is-label .cursor__ring { width: 86px; height: 86px; margin: -43px 0 0 -43px; background: var(--gold); border-color: var(--gold); }
.cursor.is-label .cursor__ring::after { opacity: 0; }
.cursor.is-label .cursor__label { opacity: 1; }
.cursor.is-hidden .cursor__ring { opacity: 0; }

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100; background: var(--ink);
  display: grid; place-items: center; --r: 0px;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1px));
          mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1px));
}
.loader__mark { width: clamp(96px, 16vw, 168px); overflow: visible; }
.loader__mark .lm { transform-box: fill-box; }
.loader__slate { position: absolute; bottom: 8vh; display: flex; gap: 2.4rem; font: 700 .74rem/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.loader__count { color: var(--coral); min-width: 2ch; }
.no-js .loader { display: none; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(14px + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right)) 14px calc(var(--pad) + env(safe-area-inset-left)); transition: background .5s, backdrop-filter .5s, padding .5s var(--ease);
}
.nav.is-scrolled { background: rgba(13, 11, 10, .72); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 10px; }
.nav__brand { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.nav__mark { width: 3.125rem; height: 3.625rem; flex: none; transition: transform .6s var(--ease); }
.nav__brand:hover .nav__mark { transform: rotate(-8deg) scale(1.06); }
.nav__name { display: grid; font: 300 1.14rem/1.06 var(--f-sans); letter-spacing: .01em; }
.nav.is-scrolled .nav__mark { width: 2.625rem; height: 3.05rem; }
.nav__mark { transition: transform .6s var(--ease), width .5s var(--ease), height .5s var(--ease); }
.nav__name b { font-weight: 700; }
.nav__tc { display: flex; align-items: center; gap: .6rem; font: 700 .78rem/1 var(--f-mono); letter-spacing: .12em; color: var(--muted); font-variant-numeric: tabular-nums; }
.nav__tc i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: rec 1.2s steps(2) infinite; }
.nav__tc.is-rew span::before { content: "◀◀ "; color: var(--gold); }
@keyframes rec { 50% { opacity: .15; } }
.nav__right { display: flex; align-items: center; gap: .6rem; }
.nav__cta, .nav__menu {
  font: 700 .74rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  padding: .95em 1.3em; border-radius: 999px; border: 1px solid var(--rule-cream); display: inline-flex; align-items: center; gap: .7em;
  transition: background .3s, color .3s, border-color .3s;
}
.nav__cta { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.nav__cta:hover { background: var(--gold); border-color: var(--gold); }
.nav__menu:hover { border-color: var(--cream); }
.nav__menu i { width: 18px; height: 8px; border-block: 1.5px solid currentColor; transition: transform .4s var(--ease), height .4s; }
.nav__menu[aria-expanded="true"] i { height: 0; border-bottom: 0; transform: rotate(45deg); }

.menu {
  position: fixed; inset: 0; z-index: 79; background: var(--coral); color: var(--ink);
  display: grid; align-content: center; padding: 100px var(--pad) 40px; gap: 3rem;
  clip-path: circle(0 at calc(100% - 60px) 34px);
}
.menu[hidden] { display: none; }
.menu__list { display: grid; gap: .1em; counter-reset: m; }
.menu__list a { display: flex; align-items: baseline; gap: 1.2rem; text-decoration: none; font: 400 clamp(2.4rem, 7vw, 5.6rem)/1.02 var(--f-serif); letter-spacing: -.02em; transition: transform .45s var(--ease), color .3s; }
.menu__list a:hover { transform: translateX(14px); color: var(--cream); }
.menu__list small { font: 700 .74rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; min-width: 4.5em; }
.menu__foot { display: flex; flex-wrap: wrap; gap: 2rem; font: 700 .86rem/1 var(--f-mono); letter-spacing: .08em; }
.menu__foot a { text-decoration: none; border-bottom: 1px solid; padding-bottom: .3em; }

/* ---------- HERO ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: var(--ink); isolation: isolate; }
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero__fallback { position: absolute; inset: -10%; z-index: -3; background: url(../assets/img/atlas.webp) center / 60% repeat; filter: grayscale(.85) brightness(.28); transform: rotate(-7deg); display: none; }
.no-gl .hero__fallback { display: block; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(13, 11, 10, .55) 0%, transparent 22%, transparent 48%, rgba(13, 11, 10, .82) 100%); }
.hero__handle { position: absolute; left: 0; top: 0; height: 12px; width: 72px; border-radius: 12px; background: var(--gold); transform-origin: 0 50%; pointer-events: none; opacity: 0; box-shadow: 0 0 22px rgba(255, 204, 1, .35); }
.hero__hint { position: absolute; left: 0; top: 0; font: 400 1.05rem/1 var(--f-hand); color: var(--gold); pointer-events: none; opacity: 0; white-space: nowrap; transform: rotate(-4deg); }
.hero__inner { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(110px, 17vh, 180px); pointer-events: none; }
.hero__inner .kicker { color: rgba(246, 239, 227, .72); margin-bottom: 1.6rem; }
.hero__title { font: 400 clamp(3.2rem, min(10.2vw, 21vh), 11.6rem)/.9 var(--f-serif); letter-spacing: -.025em; text-shadow: 0 6px 40px rgba(0, 0, 0, .55); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.hero__title .line > span { display: inline-block; }
.circled { position: relative; color: var(--coral); display: inline-block; }
.circled svg { position: absolute; left: -14%; top: -12%; width: 128%; height: 124%; overflow: visible; filter: url(#rough); }
.circled path { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero__note { position: absolute; left: calc(clamp(3.2rem, min(10.2vw, 21vh), 11.6rem) * 3.8); bottom: calc(clamp(3.2rem, min(10.2vw, 21vh), 11.6rem) * .32); font: 700 clamp(1.1rem, 2vw, 1.7rem)/1 var(--f-hand); color: var(--gold); transform: rotate(-6deg); }
.hero__bar {
  position: absolute; left: var(--pad); right: var(--pad); bottom: calc(28px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-top: 18px; border-top: 1px solid var(--rule-cream);
  font: 700 .72rem/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 239, 227, .7);
}
.hero__values { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.hero__values li:nth-child(1) { color: var(--cream); }
.hero__scroll { text-decoration: none; display: inline-flex; gap: .6em; }
.hero__scroll span { display: inline-block; animation: bob 1.8s var(--ease) infinite; color: var(--coral); }
@keyframes bob { 50% { transform: translateY(5px); } }

/* ---------- SCENE 02: company / call sheet ---------- */
.company { padding: clamp(90px, 12vw, 160px) var(--pad) clamp(90px, 10vw, 140px); position: relative; overflow: hidden; }
.sheet { margin: 0 auto; display: grid; gap: clamp(56px, 8vw, 110px); }
.sheet__head { display: grid; grid-template-columns: .8fr 2fr .6fr 1fr; border: 1.5px solid var(--ink); }
.sheet__head > div { padding: 14px 18px; display: grid; gap: 6px; border-left: 1.5px solid var(--ink); }
.sheet__head > div:first-child { border-left: 0; }
.sheet__head span { font: 700 .66rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.sheet__head b { font: 500 1.05rem/1.2 var(--f-sans); }
.statement { font: 400 clamp(2rem, 4.9vw, 4.7rem)/1.04 var(--f-serif); letter-spacing: -.015em; max-width: 22ch; }
.statement .w { display: inline-block; }
.company__cols { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.55; max-width: 34ch; }
.lede em { font-family: var(--f-serif); }
.stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1.5px solid var(--ink); }
.stats > div { padding: 22px 0 26px; border-bottom: 1px solid var(--rule-ink); display: flex; flex-direction: column-reverse; gap: .5rem; }
.stats > div:nth-child(odd) { padding-right: 20px; border-right: 1px solid var(--rule-ink); }
.stats > div:nth-child(even) { padding-left: 24px; }
.stats dt { font: 700 .7rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.stats dd { font: 400 clamp(3rem, 6vw, 5.4rem)/.9 var(--f-serif); font-variant-numeric: tabular-nums; }
.services { border-top: 1.5px solid var(--ink); margin-top: -40px; }
.services li {
  position: relative; display: grid; grid-template-columns: 4.5rem 1.1fr 1fr 3rem; align-items: center; gap: 1rem;
  padding: clamp(18px, 2.6vw, 30px) 10px; border-bottom: 1px solid var(--rule-ink); isolation: isolate; overflow: hidden;
}
.services li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s var(--ease); }
@media (hover: hover) {
.services li:hover::before { transform: scaleY(1); }
.services li:hover { color: var(--cream); }
.services__no { font: 700 .8rem/1 var(--f-mono); letter-spacing: .1em; }
.services h3 { font: 400 clamp(1.9rem, 4.2vw, 3.8rem)/1 var(--f-serif); letter-spacing: -.015em; transition: transform .55s var(--ease), color .3s; }
.services li:hover h3 { transform: translateX(12px); color: var(--gold); }
.services p { font-size: 1rem; opacity: .78; }
.services__arrow { font-size: 1.6rem; justify-self: end; transition: transform .5s var(--ease); color: var(--coral); }
.services li:hover .services__arrow { transform: rotate(45deg); }
}

.discover { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.discover__intro { display: grid; gap: 1.2rem; }
.discover__intro h2 { font: 400 clamp(2.4rem, 4.6vw, 4.2rem)/1 var(--f-serif); letter-spacing: -.015em; }
.discover__intro p:last-child { max-width: 36ch; opacity: .8; }
.roster {
  position: relative; background: #fbf7ef; padding: 26px clamp(18px, 3vw, 40px) 30px; transform: rotate(1.2deg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 30px 60px -30px rgba(60, 40, 20, .45);
  background-image: repeating-linear-gradient(transparent 0 55px, rgba(70, 110, 170, .18) 55px 56px);
  background-position: 0 71px;
}
.roster::before { content: ""; position: absolute; top: 0; bottom: 0; left: 62px; width: 1px; background: rgba(239, 96, 84, .45); }
.roster__row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; height: 56px; font: 400 clamp(1rem, 1.6vw, 1.24rem)/1 var(--f-mono); }
.roster__row > :first-child { opacity: .55; font-size: .85em; }
.roster__row > :nth-child(2) { padding-left: 22px; }
.roster__row--head { height: 44px; font: 700 .7rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; opacity: .55; }
.roster__row--head > :nth-child(2) { padding-left: 22px; }
.stamp { justify-self: end; font: 700 .78rem/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--coral-deep); border: 2.5px solid currentColor; padding: .5em .7em .45em; border-radius: 4px; transform: rotate(-9deg); filter: url(#rough); opacity: 0; mix-blend-mode: multiply; }
.roster__more { margin-top: 10px; padding-left: 66px; font: 700 1.25rem/1 var(--f-hand); color: var(--coral-deep); }

/* ---------- SCENE 03: founders ---------- */
.founders { padding: clamp(100px, 12vw, 170px) 0 clamp(80px, 10vw, 140px); display: grid; gap: clamp(70px, 10vw, 140px); overflow: hidden; }
.founder { display: grid; grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); gap: clamp(40px, 7vw, 8rem); align-items: center; padding: 0 var(--pad); width: 100%; }
.founder--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); }
.founder--flip .headshot { order: 2; }
.headshot { position: relative; width: min(32rem, 100%, 56vh); justify-self: center; aspect-ratio: 4 / 5.3; perspective: 1600px; transform: rotate(-2.5deg); text-align: left; }
.headshot--tilt { transform: rotate(2.5deg); }
.headshot__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1s var(--ease); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.headshot.is-flipped .headshot__inner { transform: rotateY(180deg); }
.headshot__front, .headshot__back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); transition: visibility 0s linear .3s; }
.headshot.is-flipped .headshot__front, .headshot:not(.is-flipped) .headshot__back { visibility: hidden; }
.headshot__front { background: #f7f2e9; padding: 14px 14px 64px; display: block; }
.headshot__front img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.08) brightness(1.02); transition: filter .8s var(--ease); }
.headshot:hover .headshot__front img { filter: grayscale(0) contrast(1.02); }
.headshot__name { position: absolute; left: 22px; bottom: 16px; font: 700 1.5rem/1 var(--f-hand); color: var(--ink); }
.headshot__name::after { content: "↻ flip"; margin-left: .7em; font: 700 .64rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--coral-deep); vertical-align: middle; }
.headshot__back {
  transform: rotateY(180deg); background: #fbf7ef; color: var(--ink); padding: clamp(20px, 3vw, 34px);
  display: flex; flex-direction: column; gap: .5rem; overflow: hidden;
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(70, 110, 170, .14) 27px 28px);
}
.resume__title { font: 400 1.9rem/1 var(--f-serif); }
.resume__role { font: 700 .66rem/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--coral-deep); padding-bottom: .6rem; border-bottom: 1.5px solid var(--ink); }
.resume__h { margin-top: .5rem; font: 700 .66rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; opacity: .5; }
.resume__list { font: 400 clamp(.82rem, 1.2vw, .95rem)/1.45 var(--f-mono); }
.clip { position: absolute; top: -22px; right: 46px; width: 22px; height: 64px; border: 3px solid #b9b4ab; border-radius: 12px; z-index: 3; transform: rotate(6deg); box-shadow: 1px 2px 2px rgba(0, 0, 0, .3); pointer-events: none; }
.clip::after { content: ""; position: absolute; inset: 8px 3px 14px; border: 3px solid #b9b4ab; border-top: 0; border-radius: 0 0 8px 8px; }
.founder__text { display: grid; gap: 1.1rem; max-width: 40rem; }
.founder__role { font: 700 .74rem/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.founder__text h3 { font: 400 clamp(2.8rem, 5.6vw, 5.4rem)/.95 var(--f-serif); letter-spacing: -.02em; }
.founder__text p:not(.founder__role) { color: rgba(246, 239, 227, .8); }
.founder__text em { font-family: var(--f-serif); color: var(--cream); }
.founder__text .link-ul { justify-self: start; margin-top: .6rem; }

/* ---------- SCENE 04: honours ---------- */
.honours { position: relative; padding: clamp(60px, 8vw, 120px) 0 clamp(70px, 9vw, 130px); overflow: hidden;
  background: radial-gradient(60% 55% at 28% 38%, rgba(242, 193, 78, .16), transparent 70%), var(--stage); }
.honours__stage { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; min-height: min(92vh, 860px); padding-right: var(--pad); }
.lotus { width: 100%; height: min(86vh, 800px); display: block; }
.honours__copy { display: grid; gap: 1.6rem; }
.gold-text { background: linear-gradient(170deg, #fff1b8 0%, var(--gold-soft) 35%, #b9822a 70%, #f7d77a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.honours__lede { font-size: clamp(1.08rem, 1.45vw, 1.3rem); color: rgba(246, 239, 227, .84); max-width: 40ch; }
.honours__lede em { font-family: var(--f-serif); color: var(--gold-soft); }
.honours__also { font: 700 .74rem/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-left: 1.2rem; border-left: 2px solid var(--gold); }
.laurels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 46px); align-items: end; padding: 46px var(--pad) 0; max-width: calc(min(76rem, 140vh) + 2 * var(--pad)); margin: 0 auto; }
.laurel { position: relative; display: grid; gap: 1rem; }
.laurel img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9); transition: transform .7s var(--ease); }
.laurel:hover img { transform: translateY(-8px) rotate(-1deg); }
.laurel--hero img { box-shadow: 0 0 0 1px rgba(242, 193, 78, .5), 0 40px 90px -20px rgba(242, 193, 78, .35); }
.laurel figcaption { display: grid; gap: .3rem; }
.laurel b { font: 400 clamp(1.3rem, 2.2vw, 2rem)/1 var(--f-serif); }
.laurel span { font: 700 .68rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wreath { position: absolute; right: -14px; top: -18px; width: clamp(84px, 9vw, 116px); z-index: 2; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); transform: rotate(8deg); }
.hits { margin-top: clamp(70px, 9vw, 120px); border-block: 1px solid var(--rule-cream); padding: 22px 0; }
.hits__label { padding: 0 var(--pad) 14px; font: 700 .72rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; align-items: center; gap: 1.8rem; animation: marquee 38s linear infinite; font: 400 clamp(2rem, 4.6vw, 4.4rem)/1.1 var(--f-serif); white-space: nowrap; }
.marquee__track span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1px var(--cream); }
.marquee__track i { font-style: normal; color: var(--gold); font-size: .5em; }
.hits:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- SCENE 05: the reel ---------- */
.reel { background: var(--ink); position: relative; }
.reel__pin { height: 100vh; height: 100svh; display: flex; flex-direction: column; padding-top: 82px; overflow: hidden; }
.reel__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .9rem 2rem; padding: 0 var(--pad) 18px; }
.reel__head .kicker { grid-column: 1 / -1; }
.reel__head .sec-title { font-size: clamp(2.6rem, 5.2vw, 5.2rem); display: flex; align-items: flex-start; gap: .8rem; }
.reel__count { font: 700 .74rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: .5em .7em; border-radius: 999px; transform: rotate(6deg) translateY(.6rem); }
.reel__hint { font: 400 1.15rem/1.2 var(--f-hand); color: var(--gold); }
.only-m { display: none; }
.reel__strip { position: relative; flex: 1; min-height: 0; background: #1a1512; display: flex; flex-direction: column; box-shadow: inset 0 0 80px rgba(0, 0, 0, .6); }
.sprockets {
  height: 30px; flex: none; --sx: 0px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='30'%3E%3Crect x='12' y='8' width='20' height='14' rx='3' fill='%230d0b0a'/%3E%3C/svg%3E") var(--sx) 0 / 44px 30px repeat-x, #2a221d;
}
.reel__track { flex: 1; min-height: 0; display: flex; gap: clamp(34px, 4vw, 64px); padding: 22px var(--pad); width: max-content; align-items: stretch; will-change: transform; }
.reel__year { display: flex; gap: 22px; height: 100%; }
.reel__label { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.reel__label span { font: 400 clamp(4rem, 9vh, 7.4rem)/.85 var(--f-serif); color: transparent; -webkit-text-stroke: 1px rgba(246, 239, 227, .55); letter-spacing: -.02em; }
.reel__year[data-year="TBA"] .reel__label span { -webkit-text-stroke-color: var(--gold); font-size: clamp(2.8rem, 6vh, 4.8rem); }
.reel__label small { font: 700 .66rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.reel__track { --ph: 220px; }
.reel__films { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 22px 20px; align-content: start; }
.film { position: relative; display: flex; flex-direction: column; width: calc(var(--ph) * .6667); }
.film__poster { position: relative; height: var(--ph); width: 100%; background: #241d19; overflow: hidden; transition: transform .6s var(--ease), box-shadow .6s; box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .9); }
.film__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .6s; filter: saturate(.92); }
.film:hover .film__poster { transform: translateY(-6px) rotate(-1.2deg); }
.film:hover .film__poster img { transform: scale(1.06); filter: saturate(1.1); }
.film__meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; grid-template-columns: auto 1fr; column-gap: .5rem; row-gap: 3px; align-items: baseline; padding: 38px 10px 10px; background: linear-gradient(transparent, rgba(8, 6, 5, .78) 45%, rgba(8, 6, 5, .94)); pointer-events: none; }
.film__no { font: 700 .62rem/1 var(--f-mono); color: var(--coral); }
.film__title { font: 500 .95rem/1.12 var(--f-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.film__dir { grid-column: 2; font: 400 .68rem/1.2 var(--f-mono); color: #c9bfb0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.film .badge { position: absolute; top: 10px; left: -6px; }
.badge { font: 700 .58rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: .55em .7em; border-radius: 2px; color: var(--ink); white-space: nowrap; z-index: 2; box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
.badge--gold { background: var(--gold); }
.badge--soon { background: var(--cream); }
.badge--lang { background: var(--coral); }
.mark-circle { position: absolute; left: -12%; top: -6%; width: 124%; height: 112%; pointer-events: none; overflow: visible; z-index: 3; filter: url(#rough); }
.mark-circle path { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease); }
.film:hover .mark-circle path { stroke-dashoffset: 0; }
.film__poster--slate { background: #23201e; display: flex; }
.slate { flex: 1; display: flex; flex-direction: column; }
.slate__clap { height: 18%; background: repeating-linear-gradient(-55deg, #efe6d6 0 16px, #121010 16px 32px); transform-origin: 0 100%; transform: rotate(-8deg); border-bottom: 3px solid #121010; transition: transform .5s var(--ease); }
.film:hover .slate__clap { transform: rotate(0deg); }
.slate__body { flex: 1; display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 6px 10px; padding: 14px 12px; color: #eae2d2; }
.slate__body span { font: 700 .52rem/1.8 var(--f-mono); letter-spacing: .12em; opacity: .55; }
.slate__body b { font: 700 clamp(.78rem, 1.7vh, 1rem)/1.2 var(--f-hand); }
.reel__end { display: grid; align-content: center; gap: 1.4rem; width: min(380px, 70vw); padding-right: var(--pad); }
.reel__end p { font: 400 clamp(1.8rem, 3vw, 2.6rem)/1.1 var(--f-serif); }
.reel__end em { color: var(--coral); }
.reel__end .btn { justify-self: start; }
.reel__progress { height: 3px; background: rgba(246, 239, 227, .1); flex: none; }
.reel__progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--coral), var(--gold)); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- SCENE 06: ad films ---------- */
.ads { padding: 0 0 clamp(90px, 11vw, 150px); }
.bars { display: grid; grid-template-columns: repeat(7, 1fr); height: 16px; }
.bars i:nth-child(1) { background: #e9e4d8; } .bars i:nth-child(2) { background: #e8c547; } .bars i:nth-child(3) { background: #6fb7b4; }
.bars i:nth-child(4) { background: #7aa35a; } .bars i:nth-child(5) { background: #b0568f; } .bars i:nth-child(6) { background: #d0533f; } .bars i:nth-child(7) { background: #3c5a9a; }
.ads__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 7vw, 110px); padding: clamp(80px, 10vw, 130px) var(--pad) 0; align-items: center; }
.ads__copy { display: grid; gap: 1.4rem; }
.ads__big { font: 400 clamp(7rem, min(19vw, 30vh), 17rem)/.8 var(--f-serif); color: var(--coral); letter-spacing: -.04em; margin-top: 1rem; }
.ads__text { max-width: 40ch; font-size: clamp(1.05rem, 1.4vw, 1.24rem); }
.credits { background: var(--ink); color: var(--cream); padding: 30px 0 0; box-shadow: 0 40px 80px -40px rgba(40, 25, 10, .7); transform: rotate(-1.4deg); }
.credits__cap { text-align: center; font: 700 .7rem/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding-bottom: 18px; border-bottom: 1px solid var(--rule-cream); }
.credits__window { height: clamp(320px, 46vh, 460px); overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.credits__roll { display: grid; gap: 1.6rem; text-align: center; padding: 1.4rem 0; animation: roll 16s linear infinite; }
.credits__roll li { font: 300 clamp(1.5rem, 2.6vw, 2.2rem)/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; }
.credits__roll li:nth-child(3n+2) { font-family: var(--f-serif); text-transform: none; letter-spacing: 0; color: var(--gold); }
.credits__more { font-family: var(--f-hand) !important; text-transform: none !important; color: var(--coral) !important; }
@keyframes roll { to { transform: translateY(-50%); } }

/* ---------- SCENE 07: vision / iris ---------- */
.vision { height: 230vh; position: relative; background: var(--ink); }
.vision__iris {
  position: sticky; top: 0; height: 100vh; height: 100svh; background: var(--coral); color: var(--ink); --r: 4vmax;
  clip-path: circle(var(--r) at 50% 50%); display: grid; place-items: center; overflow: hidden;
}
.vision__iris::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(80, 20, 10, .35)); pointer-events: none; }
.vision__inner { position: relative; display: grid; justify-items: center; text-align: center; gap: 2rem; padding: 0 var(--pad); }
.vision__words { display: grid; font: 400 clamp(2.4rem, 12vw, 11.4rem)/.88 var(--f-serif); letter-spacing: -.03em; }
.vision__words span:last-child { color: var(--cream); }
.vision__text { max-width: 52ch; font-size: clamp(1.02rem, 1.4vw, 1.22rem); font-weight: 500; }

/* ---------- SCENE 08: contact ---------- */
.contact { padding: clamp(100px, 9vw, 9rem) 0 clamp(70px, 8vw, 110px); }
.contact__lede { max-width: 50ch; color: rgba(246, 239, 227, .78); font-size: clamp(1.05rem, 1.35vw, 1.2rem); }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 40px); padding: clamp(44px, 4vw, 4.5rem) var(--pad) 0; max-width: calc(80rem + 2 * var(--pad)); margin: 0 auto; }
.door {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 50% 50% 10px 10px / 9rem 9rem 10px 10px; border: 1px solid var(--rule-cream);
  padding: clamp(64px, 6vw, 6rem) clamp(24px, 4vw, 54px) clamp(34px, 4vw, 54px); display: grid; gap: 1.1rem; justify-items: center; text-align: center;
  background: linear-gradient(180deg, #1d1815, #120f0d); --x: 50%; --y: 0%;
}
.door__light { position: absolute; inset: 0; z-index: -1; opacity: .55; transition: opacity .6s;
  background: radial-gradient(60% 50% at var(--x) var(--y), rgba(255, 220, 140, .28), transparent 70%); }
.door:hover .door__light { opacity: 1; }
.door .gu { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.door__kick { font: 700 .74rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); min-height: clamp(2.2rem, 4vw, 3.4rem); display: grid; align-items: end; }
.door h3 { font: 400 clamp(2.2rem, 4.2vw, 3.8rem)/.98 var(--f-serif); letter-spacing: -.02em; }
.door p:not(.gu):not(.door__kick) { color: rgba(246, 239, 227, .76); max-width: 34ch; }
.door .btn { margin-top: .8rem; }
.copy { font: 400 .8rem/1.4 var(--f-mono); color: var(--muted); word-break: break-all; transition: color .3s; }
.copy span { margin-left: .5em; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.copy:hover { color: var(--cream); }
.contact__strip { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 40px); padding: clamp(18px, 3vw, 40px) var(--pad) 0; max-width: calc(80rem + 2 * var(--pad)); margin: 0 auto; }
.reach {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 32px); border: 1px solid var(--rule-cream); border-radius: 10px;
  text-decoration: none; background: linear-gradient(180deg, #1d1815, #151210); transition: border-color .35s, transform .45s var(--ease);
}
.reach:hover { border-color: rgba(255, 204, 1, .55); transform: translateY(-3px); }
.reach__icon { width: clamp(44px, 3.4vw, 54px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(239, 96, 84, .12); color: var(--coral); transition: background .35s, color .35s; }
.reach:hover .reach__icon { background: var(--coral); color: var(--ink); }
.reach__icon svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.reach__txt { display: grid; gap: .45rem; min-width: 0; }
.reach__txt small { font: 700 .66rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.reach__txt b { font: 500 clamp(1.05rem, 1.6vw, 1.5rem)/1.15 var(--f-sans); letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
.reach:hover .reach__txt b { color: var(--gold); }
.reach__go { font-size: 1.2rem; color: var(--muted); transition: transform .45s var(--ease), color .3s; }
.reach:hover .reach__go { transform: translate(3px, -3px); color: var(--gold); }

/* ---------- footer ---------- */
.foot { background: var(--ink); padding: clamp(70px, 9vw, 120px) var(--pad) calc(36px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 2.2rem; border-top: 1px solid var(--rule-cream); text-align: center; }
.foot__logo { width: min(560px, 86vw); height: auto; }
.foot__values { font: 700 .76rem/1.6 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.foot__row { width: 100%; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--rule-cream); font: 400 .8rem/1.4 var(--f-mono); color: var(--muted); }
.foot__rewind { text-decoration: none; color: var(--cream); }
.foot__rewind:hover { color: var(--gold); }
.foot__end { font: 400 1.2rem/1 var(--f-hand); color: var(--coral); }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 97; transform: translate(-50%, 220%); visibility: hidden; background: var(--gold); color: var(--ink); padding: .9em 1.4em; border-radius: 999px; font: 700 .76rem/1 var(--f-mono); letter-spacing: .08em; transition: transform .5s var(--ease); pointer-events: none; }
.toast.is-on { transform: translate(-50%, 0); visibility: visible; }

/* ---------- one scene = one screen (desktop & laptop) ---------- */
@media (min-width: 900px) and (min-height: 600px) {
  .br-m { display: none; }
  .sec-title--line { font-size: clamp(2.8rem, min(5.4vw, 10vh), 6.2rem); }
  .founders { padding-top: clamp(84px, 11vh, 130px); gap: 0; }
  .founders .sec-head { gap: 1rem; margin-bottom: clamp(28px, 5vh, 56px); }
  .founder + .founder { margin-top: clamp(90px, 16vh, 180px); }
  .headshot { width: min(32rem, 100%, 48vh); }
  .founder__text h3 { font-size: clamp(2.8rem, min(5.6vw, 9vh), 5.4rem); }
  .contact { padding-top: clamp(84px, 11vh, 130px); }
  .contact .sec-head { gap: 1rem; }
  .doors { padding-top: clamp(28px, 5vh, 56px); }
  .door { padding-top: clamp(40px, 6vh, 6rem); gap: .8rem; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .nav__tc { display: none; }
  .honours__stage { grid-template-columns: 1fr; padding: 0 var(--pad); min-height: 0; }
  .lotus { height: min(62vh, 560px); margin: -40px 0 -20px; }
}
@media (max-width: 899px) {
  .nav__mark, .nav.is-scrolled .nav__mark { width: 40px; height: 46px; }
  .nav__brand { gap: .7rem; }
  .nav__name { font-size: .95rem; }
  .sheet__head { grid-template-columns: 1fr 1fr; }
  .sheet__head > div:nth-child(3) { border-left: 0; }
  .sheet__head > div:nth-child(n+3) { border-top: 1.5px solid var(--ink); }
  .company__cols, .discover, .founder, .founder--flip, .ads__grid, .doors, .contact__strip { grid-template-columns: 1fr; }
  .founder--flip .headshot { order: 0; }
  .headshot { width: min(360px, 88%); }
  .services { margin-top: -20px; }
  .services li { grid-template-columns: 2.6rem 1fr 2rem; }
  .services p { grid-column: 2; }
  .services__arrow { grid-row: 1; grid-column: 3; }
  .hero__note { left: auto; right: var(--pad); bottom: -2.2rem; }
  .hero__values { gap: .4rem 1rem; }
  .hero__since { display: none; }
  .laurels { grid-template-columns: 1fr 1fr; }
  .laurel--hero { grid-column: 1 / -1; grid-row: 1; width: min(360px, 80%); justify-self: center; }
  .credits { transform: none; }
  .door { border-radius: 50% 50% 10px 10px / 7rem 7rem 10px 10px; }

}
@media (max-width: 899px), (max-height: 599px) {
  /* the reel becomes one swipeable film strip */
  .reel__pin { height: auto; overflow: visible; padding-bottom: 50px; }
  .reel__head { grid-template-columns: 1fr; }
  .only-d { display: none; }
  .only-m { display: inline !important; }
  .reel__year { height: auto; }
  .reel__track { align-items: flex-start; }
  .sprockets { height: 22px; background-size: 32px 22px; }
  .reel__label { scroll-snap-align: start; }
  .reel__strip { overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: var(--pad); scrollbar-width: none; overscroll-behavior-x: contain; }
  .reel__strip::-webkit-scrollbar { display: none; }
  .reel__strip .sprockets { width: var(--tw, 100%); }
  .reel__track { gap: 24px; padding: 18px var(--pad); }
  .reel__year { gap: 12px; }
  .reel__label span { font-size: 3.2rem; }
  .reel__films { display: flex; gap: 12px; }
  .film { flex: none; width: 46vw; max-width: 220px; scroll-snap-align: start; }
  .film__poster { height: auto; aspect-ratio: 2 / 3; }
  .reel__end { width: 70vw; padding-right: var(--pad); }
  .reel__progress { display: none; }
}
@media (max-width: 560px) {
  .nav__cta { display: none; }
  .reach__txt b { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  .hero__title { font-size: 13vw; }
  .roster { padding-inline: 14px; }
  .roster__row { font-size: .86rem; grid-template-columns: 30px 1fr auto; }
  .roster::before { left: 44px; }
  .roster__row > :nth-child(2), .roster__row--head > :nth-child(2) { padding-left: 16px; }
  .stamp { font-size: .58rem; padding: .45em .5em .4em; letter-spacing: .14em; }
  .roster__more { padding-left: 46px; }
  .sec-title { font-size: clamp(2.5rem, 13vw, 4rem); }
  .statement { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .sheet__head b { font-size: .92rem; }
  .ads__big { font-size: 33vw; }
  .door { padding-inline: 20px; }
  .hero__inner { bottom: 150px; }
  .hero__bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero__scroll { display: none; }
  .stats > div:nth-child(even) { padding-left: 14px; }
  .roster::before { left: 50px; }
  .roster__row { grid-template-columns: 34px 1fr auto; }
  .roster__more { padding-left: 54px; }
  .laurels { gap: 14px; }
  .wreath { width: 70px; right: -6px; }
}

/* phones held sideways: size the big type and the reel by height */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 0; }
  .hero__title { font-size: min(10.2vw, 17vh); }
  .hero__inner { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .hero__inner .kicker { margin-bottom: .8rem; }
  .hero__bar { padding-top: 10px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .hero__note { display: none; }
  .film { width: min(46vw, 220px, 40vh); }
  .vision__words { font-size: min(12vw, 17vh); }
  .lotus { height: 80vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .stamp { opacity: .9; }
  .circled path { stroke-dashoffset: 0; }
  .vision { height: auto; }
  .vision__iris { position: relative; clip-path: none; min-height: 100vh; }
}