/* ============================================================
   DARKBLOOM — Site stylesheet (shared: home + film pages)
   Dark cinematic, cream roster, condensed contact.
   ============================================================ */

:root{
  --ink:        #0A0A0B;
  --ink-2:      #100F12;
  --bone:       #ECE7DC;
  --bone-2:     #B8B2A7;
  --grey:       #9A938A;
  --grey-2:     #807A6F;
  --cream:      #F2EFE9;
  --cream-2:    #E9E4DA;
  --ink-cream:  #2B2722;   /* text on cream */
  --bloom:      #9B2D3A;   /* oxblood — used sparingly as the one red accent */
  --bloom-2:    #C24A57;
  --bloom-text: #D86A74;
  --line:       rgba(236,231,220,0.12);
  --line-2:     rgba(236,231,220,0.22);
  --line-dark:  rgba(43,39,34,0.18);

  --serif: "Fraunces", "Hoefler Text", Georgia, serif;
  --sans:  "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif;
  --mono:  "Space Mono", ui-monospace, Menlo, monospace;
  --display: "Jost", "Hanken Grotesk", sans-serif;
  --caps:  "Jost", "Hanken Grotesk", sans-serif;
  --cond:  "Jost", "Archivo Narrow", sans-serif;

  --gut: clamp(1.25rem, 5vw, 4.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-size:clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height:1.65;
  letter-spacing:0.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--ink); color:var(--bone); }
/* On light/cream grounds, the "accent" resolves to ink rather than paper */
.roster, .about-section--cream{ --bloom:var(--ink-cream); --bloom-2:var(--ink-cream); --bloom-text:var(--ink-cream); }
:focus-visible{ outline:2px solid var(--bloom-text); outline-offset:3px; }

.eyebrow{
  font-family:var(--mono); font-size:0.7rem; font-weight:400;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--grey-2);
}

/* Film grain */
.grain{
  position:fixed; inset:-50%; z-index:900; pointer-events:none; opacity:.07;
  animation:grain 1.6s steps(5) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-1.5%,1%)} 40%{transform:translate(1.5%,-1.5%)} 60%{transform:translate(-1%,1.5%)} 80%{transform:translate(1.5%,-1%)} 100%{transform:translate(0,0)} }
@media (prefers-reduced-motion: reduce){ .grain{ animation:none; } }

/* ============================ Nav ============================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:background .4s var(--ease), border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,10,11,.78);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--line);
}
.nav__inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem; padding:1.4rem var(--gut);
}
.nav__side{ display:flex; gap:clamp(1.25rem,3vw,2.75rem); align-items:center; }
.nav__side--right{ justify-content:flex-end; }
.nav__side a{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-2); position:relative; padding:.3rem 0; transition:color .3s;
  white-space:nowrap;
}
.nav__side a::after{
  content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px;
  background:var(--bloom-text); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__side a:hover{ color:var(--bone); }
.nav__side a:hover::after{ transform:scaleX(1); }
.nav__brand{ display:block; }
.nav__brand img{ height:15px; width:auto; }

@media (max-width:720px){
  .nav__inner{ grid-template-columns:1fr auto; padding:1.1rem var(--gut); }
  .nav__brand{ order:-1; }
  .nav__side{ display:none; }            /* replaced by the full-screen menu */
  .navmenu-btn{ display:inline-flex; }
}

/* ============================ Image slots ============================ */
/* Empty-state caption legibility: light text on dark sections, dark on cream */
image-slot{ color:rgba(236,231,220,.65); }
.roster-card image-slot{ color:rgba(43,39,34,.62); }
/* While a full-bleed slot is empty, thin the scrim so the drop target reads */
.hero__scrim, .film-hero__scrim{ transition:opacity .5s; }
.hero__slot:not([data-filled]) + .hero__scrim{ opacity:.45; }
.film-hero__slot:not([data-filled]) + .film-hero__scrim{ opacity:.62; }

/* ============================ Hero ============================ */
/* Smooth-scroll hero: a sticky frame whose clip-window expands as you scroll */
.hero{ position:relative; height:100svh; height:100dvh; }
.hero__sticky{ position:relative; height:100svh; height:100dvh; overflow:hidden;
  display:grid; place-items:center; padding:0 var(--gut); background:#000; }
.hero__clip{ position:absolute; inset:0; z-index:0; }
.hero__slot{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  --slot-bg: #121116;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(110% 80% at 50% 50%, rgba(8,8,9,.18) 0%, rgba(8,8,9,.42) 70%, rgba(8,8,9,.72) 100%),
    linear-gradient(to bottom, rgba(8,8,9,.55) 0%, transparent 22%, transparent 72%, rgba(8,8,9,.85) 100%);
}
.hero__title{
  position:relative; z-index:2; pointer-events:none;
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.8rem, 9.5vw, 8.2rem);
  line-height:1.04; letter-spacing:.06em; color:var(--cream);
  text-align:center; text-wrap:balance;
  text-shadow:0 2px 60px rgba(0,0,0,.45);
}
.hero__title em{ font-style:normal; font-weight:400; }
.hero__scroll{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
}
.hero__scroll-line{
  width:1px; height:44px; overflow:hidden; position:relative;
  background:rgba(236,231,220,.25);
}
.hero__scroll-line::after{
  content:""; position:absolute; top:-50%; left:0; width:100%; height:50%;
  background:var(--bone); animation:scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse{ to{ top:100%; } }
@media (prefers-reduced-motion: reduce){ .hero__scroll-line::after{ animation:none; } }

/* ============================ Statement (cream) ============================ */
.statement{
  background:var(--cream); color:var(--ink-cream);
  padding:clamp(7rem,16vw,13rem) var(--gut); text-align:center;
}
.statement p{
  font-family:var(--serif); font-weight:420; line-height:1.35;
  font-size:clamp(1.5rem, 3.2vw, 2.7rem); letter-spacing:-0.01em;
  max-width:30ch; margin-inline:auto; text-wrap:balance;
}
.statement em{ font-style:italic; }

/* Dark statement — near-fullscreen; a cinematic per-word blur-up that settles and STAYS.
   "darkest places" lives in the dark; the cursor's light (or scroll, on touch) reveals it. */
.statement--dark{ background:#000; color:#FFFFFF;
  min-height:100svh; min-height:100dvh; display:grid; place-items:center;
  padding-block:clamp(8rem,20vw,15rem); }
.statement--dark p{ color:#fff; font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,5.6vw,4.2rem); line-height:1.24; letter-spacing:-0.015em;
  max-width:19ch; perspective:900px; }
/* Per-word reveal: blur + lift + subtle 3D tilt, eased and staggered; once, then stays */
.statement .w{
  display:inline-block;
  opacity:0; filter:blur(12px) brightness(.6);
  transform:translateY(22px) scale(.96) rotateX(-15deg);
  transform-style:preserve-3d; backface-visibility:hidden; will-change:filter,transform,opacity;
  transition:opacity 2.2s cubic-bezier(.25,.46,.45,.94), filter 2.2s cubic-bezier(.25,.46,.45,.94), transform 2.2s cubic-bezier(.25,.46,.45,.94);
  transition-delay:calc(var(--i) * 90ms);
}
.statement .reveal.in .w{ opacity:1; filter:blur(0) brightness(1); transform:none; }
/* "darkest places" — italic, painted by a light that lives at the cursor (default: in the dark).
   Emerges LAST and SLOWLY, after the rest of the line has settled. */
.statement--dark em.w{ font-style:italic;
  color:transparent; -webkit-text-fill-color:transparent;
  -webkit-background-clip:text; background-clip:text; background-repeat:no-repeat; background-position:center;
  transition-delay:2.3s; transition-duration:3.8s; }
@media (hover:hover) and (pointer:fine){
  .statement--dark em.w{ background-image:radial-gradient(circle 175px at var(--spot-x,50%) var(--spot-y,150%),
    rgba(245,242,236,1) 0%, rgba(245,242,236,.55) 26%, rgba(245,242,236,.14) 58%, rgba(245,242,236,.07) 100%); }
}
@media (hover:none), (pointer:coarse){
  .statement--dark em.w{ background-image:radial-gradient(140% 160% at 50% 50%,
    rgba(245,242,236, calc(.15 + var(--rev,0) * .83)) 0%, rgba(245,242,236, calc(.09 + var(--rev,0) * .8)) 100%); }
}
@media (prefers-reduced-motion: reduce){
  .statement .w{ opacity:1; transform:none; filter:none; transition:none; }
  .statement--dark em.w{ background-image:radial-gradient(140% 160% at 50% 50%, rgba(245,242,236,.92), rgba(245,242,236,.82)); }
}

/* ============================ Work ============================ */
.work{ padding:clamp(6rem,12vw,10rem) var(--gut); max-width:1500px; margin-inline:auto; }
.work__head{ text-align:center; margin-bottom:clamp(4rem,8vw,7rem); }
.work__title{
  font-family:var(--display); font-weight:460; text-transform:uppercase;
  font-size:clamp(2.4rem,6vw,4.6rem);
  letter-spacing:.06em; line-height:1;
}
.work__head .eyebrow{ display:block; margin-top:1.2rem; }

.work-row{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,5.5rem); align-items:center;
  padding:clamp(2.5rem,5vw,4.5rem) 0;
  border-top:1px solid var(--line);
}
.work-row:last-child{ border-bottom:1px solid var(--line); }
.work-row:nth-child(even) .work-row__media{ order:2; }
.work-row__media{ position:relative; display:block; }
.work-row__media image-slot{
  display:block; width:100%; height:auto; aspect-ratio:16/9; --slot-bg:#131217;
}
.work-row__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 60%, rgba(8,8,9,.35) 100%);
  opacity:0; transition:opacity .4s;
}
.work-row__body{ max-width:34rem; }
.work-row__n{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--grey-2); }
.work-row__title{
  display:inline-block; margin-top:1rem;
  font-family:var(--serif); font-weight:380; line-height:1.05; letter-spacing:-0.02em;
  font-size:clamp(2.2rem, 4.6vw, 4rem); color:var(--bone);
  transition:color .35s;
}
.work-row__title em{ font-style:italic; font-weight:420; }
.work-row a:hover .work-row__title,
.work-row__title:hover{ color:var(--bloom-text); }
.work-row__meta{ margin-top:1.1rem; }
.work-row__meta .eyebrow{ color:var(--grey); }
.work-row__cta{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.6rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone-2); border-bottom:1px solid transparent; padding-bottom:.25rem;
  transition:color .3s, border-color .3s;
}
.work-row__cta span{ transition:transform .3s var(--ease); display:inline-block; }
.work-row__cta:hover{ color:var(--bone); border-bottom-color:var(--line-2); }
.work-row__cta:hover span{ transform:translateX(5px); }

@media (max-width:860px){
  .work-row{ grid-template-columns:1fr; gap:1.5rem; align-items:start; }
  .work-row:nth-child(even) .work-row__media{ order:0; }
}

/* ============================ Interstitial ============================ */
.interstitial{
  background:#000; text-align:center;
  padding:clamp(8rem,22vw,17rem) var(--gut);
}
.interstitial p{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.25rem, 2.6vw, 2.1rem); letter-spacing:0;
  color:var(--grey);
}
.interstitial p em{ color:var(--cream); font-style:italic; font-weight:480; }

/* ============================ Roster (cream) ============================ */
.roster{ background:var(--cream); color:var(--ink-cream); padding:clamp(6rem,12vw,9rem) 0 clamp(4rem,8vw,6rem); }
.roster__head{ text-align:center; padding:0 var(--gut); }
.roster__title{
  font-family:var(--serif); font-weight:500; letter-spacing:.04em;
  font-size:clamp(3rem, 7.5vw, 6rem); line-height:1; color:#3A352E;
}
.roster__tabs{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(1.25rem,3vw,2.6rem); margin-top:clamp(1.8rem,3vw,2.6rem);
}
.roster__tab{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:#6B6457; padding:.35rem 0; position:relative; transition:color .3s;
}
.roster__tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:var(--bloom); transform:scaleX(0); transition:transform .35s var(--ease);
}
.roster__tab:hover{ color:var(--ink-cream); }
.roster__tab.active{ color:var(--bloom); }
.roster__tab.active::after{ transform:scaleX(1); }

.roster__lede{
  max-width:64ch; margin:clamp(2rem,4vw,3rem) auto 0; padding:0 var(--gut);
  color:#5E574A; font-size:1.05rem; line-height:1.75; text-align:center;
}
.roster__lede p + p{ margin-top:1.2em; }
.roster__lede em{ font-style:italic; color:var(--ink-cream); }

.roster__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  margin-top:clamp(3.5rem,7vw,6rem); padding:0 1rem;
}
.roster-card{
  position:relative; display:block; aspect-ratio:16/9.2; overflow:hidden;
  background:#D8D2C6;
}
.roster-card image-slot{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  --slot-bg:#DDD7CB;
}
.roster-card__scrim{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(180deg, transparent 52%, rgba(12,11,10,.62) 100%);
  transition:opacity .4s;
}
.roster-card__name{
  position:absolute; left:clamp(1.25rem,3vw,2.4rem); bottom:clamp(1rem,2.6vw,2rem); z-index:3;
  pointer-events:none;
  font-family:var(--serif); font-weight:420; letter-spacing:-0.01em;
  font-size:clamp(1.6rem, 3.4vw, 2.9rem); line-height:1.1; color:#F5F2EB;
  text-shadow:0 1px 24px rgba(0,0,0,.5);
}
.roster-card__role{
  display:block; margin-top:.35rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(245,242,235,.75);
}
.roster-card.hidden{ display:none; }
@media (max-width:720px){
  .roster__grid{ grid-template-columns:1fr; }
}

/* ============================ Studio ============================ */
.studio{ padding:clamp(6rem,12vw,10rem) var(--gut); max-width:1500px; margin-inline:auto; }
.studio__intro{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.studio__title{
  font-family:var(--display); font-weight:460; text-transform:uppercase;
  font-size:clamp(2.4rem,6vw,4.6rem);
  letter-spacing:.06em; line-height:1;
}
.studio__lede .eyebrow{ display:block; margin-bottom:1.2rem; }
.studio__kicker{ display:block; margin:clamp(2.5rem,5vw,3.5rem) 0 1.3rem; }
.studio__kicker + .process{ margin-top:0; }
/* Studio beliefs — editorial hairline rows (distinct from Impact's stat cards) */
.beliefs{ list-style:none; max-width:1120px; margin:clamp(3rem,7vw,5.5rem) auto 0; border-top:1px solid var(--line); }
.belief{ display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,1.5fr); gap:clamp(1.5rem,4vw,4.5rem); align-items:baseline;
  padding:clamp(1.8rem,3.6vw,3rem) 0; border-bottom:1px solid var(--line); }
.belief__n{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--grey-2); }
.belief__title{ font-family:var(--serif); font-weight:380; font-size:clamp(1.6rem,3vw,2.6rem); letter-spacing:-0.02em; line-height:1.05; color:var(--bone); }
.belief__body{ color:var(--grey); font-size:1.0625rem; line-height:1.65; }
@media (max-width:760px){ .belief{ grid-template-columns:auto 1fr; gap:.8rem 1.5rem; } .belief__body{ grid-column:1 / -1; } }
.studio__lede p{ color:var(--grey); font-size:1.125rem; }
.studio__lede em{ color:var(--bone); font-style:italic; }
.process{
  list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin-top:clamp(3rem,6vw,5rem); background:var(--line); border:1px solid var(--line);
}
.process__step{ background:var(--ink); padding:clamp(1.5rem,2.5vw,2.25rem); transition:background .4s; }
.process__step:hover{ background:var(--ink-2); }
.process__n{ font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; color:var(--bloom-text); }
.process__step h3{ font-family:var(--serif); font-weight:450; font-size:1.5rem; margin:.9rem 0 .6rem; letter-spacing:-0.01em; }
.process__step p{ color:var(--grey); font-size:.92rem; }
@media (max-width:1024px){ .process{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px){ .studio__intro{ grid-template-columns:1fr; align-items:start; } }
@media (max-width:520px){ .process{ grid-template-columns:1fr; } }

/* ============================ Impact ============================ */
.impact{ background:#000; padding:clamp(6rem,12vw,10rem) var(--gut); }
.impact__inner{ max-width:1500px; margin-inline:auto; }
.impact__head{ text-align:center; margin-bottom:clamp(3.5rem,7vw,6rem); }
.impact__head .eyebrow{ display:block; margin-bottom:1.2rem; }
.impact__title{
  font-family:var(--display); font-weight:460; text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.8rem);
  letter-spacing:.06em; line-height:1.08; color:#fff;
}
.impact__title em{ font-style:normal; font-weight:280; }
.impact__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.impact-stat{ background:#000; padding:clamp(2rem,4vw,3.5rem) clamp(1.35rem,2.5vw,2.25rem); transition:background .4s; }
.impact-stat:hover{ background:var(--ink-2); }
.impact-stat__fig{
  font-family:var(--serif); font-weight:340; letter-spacing:-0.03em; line-height:1;
  font-size:clamp(2.4rem, 4.8vw, 4.1rem); color:#fff; white-space:nowrap;
}
.impact-stat__fig sup{ font-size:.45em; vertical-align:.55em; letter-spacing:0; }
.impact-stat__fig em{ font-style:italic; font-weight:400; }
.impact-stat__label{
  display:block; margin-top:1.4rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bloom-text);
}
.impact-stat__sub{ margin-top:.7rem; color:var(--grey); font-size:.95rem; max-width:26ch; }
.impact__leaders{ margin-top:clamp(3.5rem,7vw,5.5rem); text-align:center; }
.impact__leaders > .eyebrow{ display:block; }
.impact__names{
  margin-top:1.1rem; font-family:var(--serif); font-style:italic; font-weight:380;
  font-size:clamp(1.1rem,2.2vw,1.6rem); color:var(--bone-2); letter-spacing:.01em;
  max-width:52ch; margin-inline:auto; text-wrap:balance;
}
/* Partner marquee — collaborator wordmarks on an infinite right→left loop (no logo files; mono-brand wordmarks) */
.marquee{ margin:clamp(2.6rem,5vw,4rem) auto 0; overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%); }
.marquee__track{ display:flex; width:max-content; will-change:transform; animation:marquee 46s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ position:relative; flex:none; display:inline-flex; align-items:center;
  padding-inline:clamp(1.5rem,3.2vw,2.85rem);
  font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.18em;
  font-size:clamp(1rem,1.5vw,1.4rem); line-height:1; white-space:nowrap;
  color:rgba(236,231,220,.46); transition:color .4s var(--ease); }
.marquee__item::after{ content:""; position:absolute; right:-2px; top:50%; width:4px; height:4px; border-radius:50%;
  background:var(--bloom-text); transform:translateY(-50%); opacity:.5; }
.marquee__item:hover{ color:var(--bone); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (max-width:720px){ .impact__grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; }
  .marquee{ -webkit-mask-image:none; mask-image:none; }
}

/* ============================ About page ============================ */
.about-hero{ padding:clamp(10rem,20vh,14rem) var(--gut) clamp(3rem,6vw,5rem); max-width:1500px; margin-inline:auto; }
.about-hero .eyebrow{ display:block; margin-bottom:1.4rem; }
.about-hero h1{
  font-family:var(--display); font-weight:480; text-transform:uppercase; line-height:1.04;
  font-size:clamp(2.8rem,8vw,6.5rem); letter-spacing:.06em; color:var(--cream);
}
.about-hero h1 em{ font-style:normal; font-weight:280; }
.about-section{ padding:clamp(3rem,6vw,5rem) var(--gut) clamp(5rem,9vw,8rem); max-width:1500px; margin-inline:auto; }
.about-section--cream{ background:var(--cream); color:var(--ink-cream); max-width:none; }
.about-section--cream .about-grid{ max-width:1500px; margin-inline:auto; }
.about-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,6vw,7rem); align-items:start; }
.about-grid .prose{ margin-top:2.1rem; }   /* align the right column with the H2, not the small eyebrow */
.about-grid__head{ position:sticky; top:7rem; }
.about-grid__head h2{
  font-family:var(--serif); font-weight:400; letter-spacing:-0.02em; line-height:1.08;
  font-size:clamp(2.2rem,4.6vw,3.8rem);
}
.about-grid__head h2 em{ font-style:italic; }
.about-grid__head .eyebrow{ display:block; margin-bottom:1.1rem; }
.about-figure{ margin-top:clamp(1.8rem,3vw,2.6rem); }
.about-figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; border:1px solid var(--line); }
.about-section--cream .about-figure img{ border-color:var(--line-dark); }
.about-figure figcaption{ display:block; margin-top:.8rem; }
.about-section--cream .about-figure figcaption{ color:#6B6457; }
@media (max-width:760px){ .about-grid{ grid-template-columns:1fr; gap:2.5rem; } .about-grid__head{ position:static; } .about-grid .prose{ margin-top:0; } }
.prose p{ margin-bottom:1.4em; max-width:62ch; }
.prose p:last-child{ margin-bottom:0; }
.prose .lead{ font-size:1.25rem; line-height:1.6; color:var(--bone); }
.about-section--cream .prose{ color:#4A443A; }
.about-section--cream .prose .lead{ color:var(--ink-cream); }
.prose{ color:var(--grey); font-size:1.05rem; }
.prose a{ color:inherit; border-bottom:1px solid var(--bloom-text); padding-bottom:1px; transition:color .3s, border-color .3s; }
.prose a:hover{ color:var(--bloom-text); border-bottom-color:var(--bloom-text); }
.prose em{ color:inherit; font-style:italic; }
.prose strong{ font-weight:600; color:inherit; }
.about-pull{
  padding:clamp(6rem,14vw,11rem) var(--gut); background:#000; text-align:center;
}
.about-pull p{
  font-family:var(--serif); font-weight:400; line-height:1.3; letter-spacing:-0.01em;
  font-size:clamp(1.8rem,4.2vw,3.4rem); color:#fff; max-width:24ch; margin-inline:auto; text-wrap:balance;
}
.about-pull p em{ font-style:italic; color:var(--bloom-text); }
.about-cta{ text-align:center; padding:clamp(5rem,10vw,8rem) var(--gut); }
.about-cta .btn{ font-size:1rem; padding:1.1rem 2.2rem; }

/* ============================ Contact ============================ */
.contact{ position:relative; padding:clamp(7rem,14vw,11rem) var(--gut); max-width:1500px; margin-inline:auto; }
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; }
.contact__title{
  font-family:var(--serif); font-weight:400; font-size:clamp(2.2rem,5vw,3.8rem);
  letter-spacing:-0.02em; line-height:1.08; margin-top:1.2rem; max-width:14ch;
}
.contact__body{ margin-top:1.5rem; color:var(--grey); max-width:38ch; }
.contact__email{
  display:inline-block; margin-top:2rem;
  font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2.5vw,1.9rem);
  color:var(--bloom-text); border-bottom:1px solid transparent; padding-bottom:.2rem;
  transition:border-color .3s;
}
.contact__email:hover{ border-bottom-color:var(--bloom-text); }
.form{ display:flex; flex-direction:column; gap:1.4rem; }
.field{ display:flex; flex-direction:column; gap:.55rem; }
.field label{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); }
.field input,.field textarea{
  width:100%; background:var(--ink-2); border:1px solid var(--line-2); border-radius:4px;
  padding:.9rem 1rem; color:var(--bone); font-family:var(--sans); font-size:1rem;
  resize:vertical; min-height:48px; transition:border-color .3s, background .3s;
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--bloom-text); background:#16141A; }
.btn{
  display:inline-flex; align-items:center; gap:.7rem; font-size:.95rem;
  padding:.95rem 1.5rem; border-radius:100px; min-height:48px;
  transition:transform .35s var(--ease), background .35s, color .35s;
}
.btn--primary{ background:var(--bone); color:var(--ink); font-weight:500; }
.btn--primary:hover{ transform:translateY(-2px); background:#fff; }
.form__submit{ align-self:flex-start; margin-top:.5rem; }
.contact__success{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; color:var(--bloom-text);
}
@media (max-width:768px){ .contact__grid{ grid-template-columns:1fr; } }

/* ============================ Footer ============================ */
.footer{
  border-top:1px solid var(--line);
  padding:clamp(2.5rem,5vw,4rem) var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.footer img{ height:12px; width:auto; opacity:.8; }
.footer .eyebrow{ font-size:.62rem; }

/* ============================ Film detail page ============================ */
.film-hero{
  position:relative; min-height:100svh; min-height:100dvh;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
  padding:clamp(6.5rem,12vh,9rem) var(--gut) clamp(2.5rem,5vh,4rem);
}
.film-hero__slot{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  --slot-bg:#121116;
}
.film-hero__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.film-hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(8,8,9,.82) 0%, rgba(8,8,9,.55) 34%, rgba(8,8,9,.12) 62%, rgba(8,8,9,.25) 100%),
    linear-gradient(to bottom, rgba(8,8,9,.5) 0%, transparent 20%, transparent 62%, rgba(8,8,9,.88) 100%);
}
.film-hero__top{ position:relative; z-index:2; max-width:34rem; }
.film-hero__title{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(2.4rem, 5.4vw, 4.4rem); line-height:1.02; letter-spacing:.04em;
  color:#fff; max-width:14ch;
}
.film-hero__meta{ margin-top:1.4rem; }
.film-hero__meta .eyebrow{ color:var(--bone-2); display:block; }
.film-hero__meta .eyebrow + .eyebrow{ margin-top:.4rem; }
.film-hero__syn{
  margin-top:2rem; color:var(--bone-2); font-size:.98rem; line-height:1.7; max-width:44ch;
}
.film-hero__syn.placeholder{
  font-family:var(--mono); font-size:.78rem; color:var(--grey-2); letter-spacing:.02em;
}
.film-hero__play{
  position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center; width:84px; height:84px;
}
.film-hero__play::after{
  content:""; border-style:solid; border-width:16px 0 16px 26px;
  border-color:transparent transparent transparent var(--bloom-2, #C24A57);
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.5));
  transition:transform .35s var(--ease);
}
.film-hero__play:hover::after{ transform:scale(1.15); }

.film-credits{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.5rem,4vw,3.5rem); max-width:1100px;
}
.film-credits__label{
  font-family:var(--caps); font-weight:500; text-transform:uppercase; letter-spacing:.12em;
  font-size:.82rem; color:#fff; padding-bottom:.7rem; margin-bottom:1rem;
  border-bottom:1.5px solid rgba(255,255,255,.8);
}
.film-credits__body{ color:var(--bone-2); font-size:.92rem; line-height:1.6; }
.film-credits__body span{
  display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--grey); margin:.7rem 0 .1rem;
}
.film-credits__body span:first-child{ margin-top:0; }
.film-credits__body a{ border-bottom:1px solid var(--line-2); transition:color .3s, border-color .3s; }
.film-credits__body a:hover{ color:#fff; border-bottom-color:#fff; }

@media (max-width:860px){
  .film-credits{ grid-template-columns:1fr; gap:1.8rem; }
  .film-hero__play{ top:auto; bottom:42%; left:auto; right:var(--gut); transform:none; }
}

/* ============================ Reveal ============================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--d,0) * 90ms); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================ Elevation pass — hero + work imagery ============================ */
/* Real hero media (still/loop): full-bleed, slow Ken-Burns drift, fade-from-black entrance */
.hero__media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); will-change:transform;
  animation:heroMediaIn 1.8s var(--ease) both, heroDrift 24s var(--ease) 1.8s infinite alternate;
}
@media (prefers-reduced-motion: reduce){ .hero__media{ animation:none; transform:scale(1.04); } }
@keyframes heroMediaIn{ from{ opacity:0; transform:scale(1.12); } to{ opacity:1; transform:scale(1.06); } }
@keyframes heroDrift{ from{ transform:scale(1.06); } to{ transform:scale(1.16) translate(-1.6%,-1%); } }
/* No centred title now — let the footage breathe; keep top/bottom gradients for nav + tagline legibility */
.hero__scrim{
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(8,8,9,.10) 0%, rgba(8,8,9,.38) 60%, rgba(8,8,9,.74) 100%),
    linear-gradient(to bottom, rgba(8,8,9,.58) 0%, transparent 22%, transparent 60%, rgba(8,8,9,.92) 100%);
}
.hero__title{ animation: heroTitleIn 1.3s var(--ease) .35s both; }
@keyframes heroTitleIn{ from{ opacity:0; transform:translateY(24px); filter:blur(10px); } to{ opacity:1; transform:none; filter:none; } }

/* ============================ Films — movie-poster gallery ============================ */
.posters{ columns:3; column-gap:clamp(.9rem,1.8vw,1.5rem); max-width:1240px; margin-inline:auto; }
@media (max-width:1024px){ .posters{ columns:2; } }
@media (max-width:600px){ .posters{ columns:1; max-width:430px; } }
.poster{
  position:relative; display:block; break-inside:avoid; margin:0 0 clamp(.9rem,1.8vw,1.5rem);
  overflow:hidden; background:#121116; border:1px solid var(--line); isolation:isolate;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .4s;
}
.poster__img{ display:block; width:100%; height:auto; transition:transform 1.1s var(--ease); }
.poster--loop{ aspect-ratio:16/9; }
.poster__vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.poster__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(8,8,9,.5) 0%, transparent 26%, transparent 52%, rgba(8,8,9,.86) 100%); }
.poster__credit{ position:absolute; top:1.15rem; left:0; right:0; z-index:2; text-align:center;
  font-family:var(--mono); font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(245,242,235,.82); }
.poster__name{ position:absolute; bottom:clamp(.9rem,2vw,1.4rem); left:clamp(1rem,2.2vw,1.6rem); right:auto; z-index:2; text-align:left; padding:0;
  font-family:var(--serif); font-weight:480; text-transform:uppercase; letter-spacing:.04em; line-height:1.05;
  font-size:clamp(1rem,1.3vw,1.25rem); color:#F5F2EB; text-shadow:0 1px 18px rgba(0,0,0,.6); }
.poster:hover{ transform:translateY(-7px); box-shadow:0 36px 70px -28px rgba(0,0,0,.85); border-color:var(--line-2); }
.poster:hover .poster__img, .poster:hover .poster__vid{ transform:scale(1.055); }
.poster__cta{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:1.6rem 1rem 1.2rem; text-align:center;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bone);
  background:linear-gradient(to top, rgba(8,8,9,.94), rgba(8,8,9,0));
  opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease), transform .4s var(--ease); }
.poster:hover .poster__cta{ opacity:1; transform:none; }
.poster__cta span{ display:inline-block; transition:transform .3s var(--ease); }
.poster:hover .poster__cta span{ transform:translateX(5px); }
@media (prefers-reduced-motion: reduce){ .poster,.poster__img,.poster__vid,.poster__cta{ transition:none; } }

/* ============================ Films — editorial poster lineup ============================ */
.films{ padding:clamp(6rem,12vw,10rem) var(--gut) clamp(3rem,7vw,5rem); max-width:1600px; margin-inline:auto; }
.films__head{ text-align:center; margin-bottom:clamp(3.5rem,7vw,6rem); }
.films__title{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(2.4rem,6vw,4.6rem); letter-spacing:.06em; line-height:1; }
.films__head .eyebrow{ display:block; margin-top:1.2rem; }
.films__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3.25rem); align-items:start; }
.filmcard{ display:block; }
.filmcard__poster{ display:block; aspect-ratio:2/3; overflow:hidden; background:#121116; border:1px solid var(--line); }
/* Films zoom-out reveal: posters settle from zoomed-in to natural as they scroll up (scroll-driven via JS) */
.filmcard__poster img{ width:100%; height:100%; object-fit:cover; transform:scale(1); transition:none; will-change:transform; }
.filmcard__n{ display:block; margin-top:1.5rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--grey-2); }
.filmcard__title{ margin-top:.7rem; font-family:var(--serif); font-weight:380; font-size:clamp(1.5rem,2.2vw,2.1rem); line-height:1.05; letter-spacing:-0.02em; color:var(--bone); transition:color .35s; }
.filmcard__title em{ font-style:italic; }
.filmcard:hover .filmcard__title{ color:var(--bone-2); }
.filmcard__log{ margin-top:.9rem; color:var(--grey); font-size:.95rem; line-height:1.6; }
.filmcard__cta{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.3rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-2); border-bottom:1px solid transparent; padding-bottom:.2rem; transition:color .3s, border-color .3s; }
.filmcard__cta span{ display:inline-block; transition:transform .3s var(--ease); }
.filmcard:hover .filmcard__cta{ color:var(--bone); border-bottom-color:var(--line-2); }
.filmcard:hover .filmcard__cta span{ transform:translateX(5px); }
@media (max-width:860px){ .films__row{ grid-template-columns:1fr; max-width:430px; margin-inline:auto; gap:clamp(2.5rem,7vw,4rem); } }
/* Embedded poster title (Ride to Clear v2) — themed; no studio/director credit */
.filmcard__poster--titled{ position:relative; }
.ptext{ position:absolute; inset:0; z-index:2; pointer-events:none; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(1.4rem,3.2vw,2.2rem) 1rem clamp(1.6rem,3.5vw,2.4rem);
  background:linear-gradient(to bottom, rgba(8,8,9,.5) 0%, transparent 26%, transparent 58%, rgba(8,8,9,.72) 100%); }
.ptext__kicker{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(.8rem,1.1vw,.95rem); letter-spacing:.06em; color:rgba(245,242,236,.88); }
.ptext__title{ margin-top:auto; font-family:var(--serif); font-weight:400; text-transform:uppercase; letter-spacing:.08em;
  font-size:clamp(1.5rem,2.4vw,2.15rem); line-height:1; color:#F5F2EC; }
.ptext__foot{ margin-top:.9rem; font-family:var(--mono); font-size:.52rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(245,242,236,.72); }

/* Film feature — own section; landscape loop with text beside (never over) */
.film-feature{ display:grid; grid-template-columns:1.45fr .55fr; gap:clamp(2rem,4.5vw,4.5rem); align-items:center;
  max-width:1600px; margin-inline:auto; padding:clamp(3.5rem,8vw,7rem) var(--gut); }
.film-feature--alt{ grid-template-columns:.55fr 1.45fr; }
.film-feature--alt .film-feature__media{ order:2; }
.film-feature__media{ display:block; aspect-ratio:16/9; overflow:hidden; background:#121116; border:1px solid var(--line); }
.film-feature__media video{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.film-feature__media:hover video{ transform:scale(1.04); }
.film-feature__title{ margin-top:.7rem; font-family:var(--serif); font-weight:380; font-size:clamp(2rem,3.4vw,3rem); line-height:1.04; letter-spacing:-0.02em; color:var(--bone); }
.film-feature__title em{ font-style:italic; }
/* Clickable feature titles — same red-on-hover as the poster cards */
.film-feature__title a{ color:inherit; text-decoration:none; transition:color .35s; }
.film-feature__title a:hover{ color:var(--bloom-text); }
.film-feature__log{ margin-top:1.1rem; color:var(--grey); font-size:1.0625rem; line-height:1.65; max-width:42ch; }
.film-feature__body .filmcard__cta{ margin-top:1.6rem; }
@media (max-width:860px){ .film-feature{ grid-template-columns:1fr; gap:1.5rem; } .film-feature--alt .film-feature__media{ order:0; } }

/* ============================ Section micro-interactions (premium, restrained) ============================ */
/* Films — hover lift (the image already eases in) */
.filmcard{ transition:transform .5s var(--ease); }
.filmcard:hover{ transform:translateY(-6px); }
.filmcard:hover .filmcard__title{ color:var(--bloom-text); }

/* Studio beliefs — staggered rise + a red hairline that draws in on hover */
.beliefs.reveal .belief{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.beliefs.reveal.in .belief{ opacity:1; transform:none; }
.beliefs.reveal .belief:nth-child(2){ transition-delay:.12s; }
.beliefs.reveal .belief:nth-child(3){ transition-delay:.24s; }
.belief{ position:relative; }
.belief::before{ content:""; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--bloom-text); transition:width .6s var(--ease); }
.belief:hover::before{ width:64px; }
.belief__title, .belief__n{ transition:color .4s; }
.belief:hover .belief__title{ color:#fff; }
.belief:hover .belief__n{ color:var(--bloom-text); }

/* "Read our story" — a quiet, looping pull that keeps drawing the eye */
.studio__more{ margin-top:clamp(2.5rem,5vw,3.5rem); }
.studio__more a{ font-size:.78rem; }
.studio__more a span{ display:inline-block; animation:nudge 2.6s var(--ease) infinite; }
@keyframes nudge{ 0%,100%{ transform:translateX(0); opacity:.75; } 50%{ transform:translateX(6px); opacity:1; } }
.studio__more a:hover span{ animation:none; transform:translateX(6px); }

/* Impact — faint red depth so the black isn't flat, + figures settle/brighten */
.impact{ position:relative; overflow:hidden; }
.impact::before{ content:""; position:absolute; z-index:0; left:50%; top:6%; width:78%; height:62%; transform:translateX(-50%);
  background:radial-gradient(58% 58% at 50% 50%, rgba(155,45,58,.11), transparent 70%); pointer-events:none; }
.impact__inner{ position:relative; z-index:1; }
.impact-stat__fig{ transition:transform .9s var(--ease), color .4s; }
.impact-stat:hover .impact-stat__fig{ color:#fff; transform:translateY(-3px); }

@media (prefers-reduced-motion: reduce){
  .studio__more a span{ animation:none; }
  .beliefs.reveal .belief{ opacity:1; transform:none; }
}

/* ============================ Liquid Eclipse — mark + cursor (official brand) ============================ */
.nav__brand{ display:inline-flex; align-items:center; gap:.6rem; }
.db-mark{ display:inline-block; width:24px; height:24px; color:var(--bone); flex:none; }
.db-mark svg{ width:100%; height:100%; display:block; overflow:visible; }
.db-l{ animation:db-l 3.4s ease-in-out infinite; }
.db-r{ animation:db-r 3.4s ease-in-out infinite; }
@keyframes db-l{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(9px); } }
@keyframes db-r{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-9px); } }

/* Premium cursor — ring + precise dot (replaces the default on fine pointers) */
body.cursor-on{ cursor:none; }
body.cursor-on input, body.cursor-on textarea{ cursor:auto; }
.cursor-ring, .cursor-dot{ position:fixed; top:0; left:0; z-index:1300; pointer-events:none;
  transform:translate(-50%,-50%); opacity:0; will-change:transform; }
body.cursor-on .cursor-ring, body.cursor-on .cursor-dot{ opacity:1; }
.cursor-ring{ width:32px; height:32px; border:1px solid var(--bloom-text); border-radius:50%;
  transition:width .35s var(--ease), height .35s var(--ease), background .35s, border-color .35s, opacity .4s; }
.cursor-ring.is-hover{ width:62px; height:62px; background:rgba(155,45,58,0.18); border-color:rgba(216,106,116,0.5); }
.cursor-dot{ width:6px; height:6px; background:var(--bloom-text); border-radius:50%; box-shadow:0 0 10px rgba(216,106,116,0.55); }
/* Candle glow — warm, screen-blended so it only lifts the black; trails the cursor */
.glow{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:0; mix-blend-mode:screen;
  background:radial-gradient(circle 300px at var(--gx,50%) var(--gy,50%), rgba(198,104,104,0.075), rgba(198,104,104,0.022) 40%, transparent 72%);
  transition:opacity 1s ease; }
body.glow-on .glow{ opacity:1; }
/* Statement: the candle glow lifts a touch brighter while the cursor lingers in this section */
body.in-statement .glow{ background:radial-gradient(circle 330px at var(--gx,50%) var(--gy,50%), rgba(216,150,150,0.13), rgba(216,150,150,0.038) 42%, transparent 74%); }
@media (prefers-reduced-motion: reduce){ .db-l,.db-r{ animation:none; } .cursor-ring,.cursor-dot,.glow{ display:none; } body.cursor-on{ cursor:auto; } }
@media (hover:none),(pointer:coarse){ .cursor-ring,.cursor-dot,.glow{ display:none; } body.cursor-on{ cursor:auto; } }

/* Work-row stills: contained, cinematic hover push-in + scrim */
.work-row__media{ overflow:hidden; }
.work-row__img{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover; transform:scale(1.01);
  transition:transform 1s var(--ease), filter .6s var(--ease); will-change:transform;
}
.work-row__media:hover .work-row__img{ transform:scale(1.07); }
.work-row__media:hover::after{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .hero__media{ animation:none; transform:none; }
  .hero__title{ animation:none; }
  .work-row__img{ transition:none; }
}

/* ============================ About — cinematic still band ============================ */
/* Full-bleed documentary still after the pull quote; slow drift + the global grain give it life */
.about-still{ position:relative; padding:0; }
.about-still__fig{ position:relative; width:100%; aspect-ratio:2.48 / 1; max-height:88vh; overflow:hidden; background:#0b0b0c; margin:0; }
.about-still__fig img{ width:100%; height:100%; object-fit:cover; transform:scale(1.05);
  animation:aboutStillDrift 26s var(--ease) infinite alternate; will-change:transform; }
.about-still__fig::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 46%, transparent 50%, rgba(8,8,9,.5) 100%),
    linear-gradient(to bottom, rgba(8,8,9,.28) 0%, transparent 26%, transparent 72%, rgba(8,8,9,.42) 100%); }
@keyframes aboutStillDrift{ from{ transform:scale(1.05); } to{ transform:scale(1.13) translate(-1.4%, -1.2%); } }
@media (prefers-reduced-motion: reduce){ .about-still__fig img{ animation:none; transform:scale(1.02); } }

/* ============================ Contact — background film-reel video ============================ */
.contact{ overflow:hidden; }
.contact__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.4; }
.contact__bg-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(105deg, rgba(10,10,11,.95) 0%, rgba(10,10,11,.82) 40%, rgba(10,10,11,.6) 72%, rgba(10,10,11,.5) 100%),
    linear-gradient(to bottom, rgba(10,10,11,.55) 0%, transparent 30%, transparent 70%, rgba(10,10,11,.65) 100%); }
.contact__grid{ position:relative; z-index:2; }

/* ============================ Social buttons (Instagram · LinkedIn) ============================ */
.socials{ display:flex; align-items:center; gap:.7rem; }
.contact .socials{ margin-top:2.2rem; }
.social{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid var(--line-2); border-radius:50%; color:var(--bone-2);
  transition:color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); }
.social:hover{ color:var(--ink); background:var(--bone); border-color:var(--bone); transform:translateY(-2px); }
.social svg{ width:18px; height:18px; display:block; }
.footer__social{ display:flex; gap:.7rem; }

/* ============================ In-site fullscreen video lightbox ============================ */
.vlb{ position:fixed; inset:0; z-index:2000; display:grid; place-items:center;
  padding:clamp(0px,3vw,40px); background:rgba(6,6,7,.94);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .42s var(--ease), visibility 0s linear .42s; }
.vlb.is-open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .42s var(--ease); }
.vlb__frame{ position:relative; width:100%; max-width:min(1600px,96vw); aspect-ratio:16/9; max-height:92vh;
  background:#000; box-shadow:0 50px 130px -30px rgba(0,0,0,.92);
  transform:scale(.965); transition:transform .5s var(--ease); }
.vlb.is-open .vlb__frame{ transform:none; }
.vlb__frame iframe, .vlb__frame video{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; display:block; }
.vlb__close{ position:fixed; top:clamp(14px,3vw,30px); right:clamp(14px,3vw,30px); z-index:2;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); background:rgba(10,10,11,.82);
  color:var(--bone); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:color .3s, background .3s, border-color .3s, transform .35s var(--ease); }
.vlb__close:hover{ color:var(--ink); background:var(--bone); border-color:var(--bone); transform:rotate(90deg) scale(1.06); }
.vlb__close svg{ width:18px; height:18px; display:block; }
body.vlb-open{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){ .vlb,.vlb__frame,.vlb__close{ transition:none; } }

/* ============================ Mobile menu (full-screen, built by menu.js) ============================ */
.navmenu-btn{ display:none; align-items:center; justify-content:center; width:46px; height:46px;
  margin-right:-10px; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.navmenu-btn__box{ position:relative; width:26px; height:13px; }
.navmenu-btn__box span{ position:absolute; left:0; width:100%; height:1.5px; background:var(--bone);
  transition:transform .42s var(--ease), opacity .3s var(--ease); }
.navmenu-btn__box span:nth-child(1){ top:0; }
.navmenu-btn__box span:nth-child(2){ bottom:0; }
.navmenu-btn.is-open .navmenu-btn__box span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.navmenu-btn.is-open .navmenu-btn__box span:nth-child(2){ transform:translateY(-5.5px) rotate(-45deg); }
body.menu-open .nav{ z-index:1200; background:transparent; border-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
body.menu-open{ overflow:hidden; }

.navmenu{ position:fixed; inset:0; z-index:1100; background:var(--ink);
  display:flex; flex-direction:column; padding:clamp(6rem,20vw,8rem) var(--gut) clamp(2rem,7vw,3rem);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility 0s linear .45s; }
.navmenu.is-open{ opacity:1; visibility:visible; transition:opacity .45s var(--ease); }
.navmenu__links{ margin-top:auto; display:flex; flex-direction:column; gap:clamp(1rem,3.4vw,1.5rem); }
.navmenu__links a{ display:flex; align-items:baseline; gap:1rem; text-decoration:none;
  font-family:var(--display); font-weight:300; text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(2.3rem,11vw,3.3rem); line-height:1; color:var(--bone);
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s;
  transition-delay:calc(var(--i) * 70ms + 140ms); }
.navmenu.is-open .navmenu__links a{ opacity:1; transform:none; }
.navmenu__links a:active{ color:var(--bloom-text); }
.navmenu__n{ font-family:var(--mono); font-weight:400; font-size:.72rem; letter-spacing:.2em; color:var(--bloom-text); }
.navmenu__foot{ margin-top:auto; padding-top:2.5rem; display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  opacity:0; transition:opacity .6s var(--ease) .42s; }
.navmenu.is-open .navmenu__foot{ opacity:1; }
.navmenu__tag{ font-family:var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--grey); }

/* ============================ Mobile polish ============================ */
@media (max-width:600px){
  /* film-detail credits: two readable columns instead of three cramped ones */
  .film-credits{ grid-template-columns:repeat(2,1fr); gap:1.6rem 1.25rem; }
  /* contact video: darken more evenly on a narrow screen so copy stays crisp */
  .contact__bg{ opacity:.32; }
  .contact__bg-scrim{ background:
    linear-gradient(to bottom, rgba(10,10,11,.82) 0%, rgba(10,10,11,.9) 55%, rgba(10,10,11,.95) 100%); }
  /* a touch more air under stacked stat figures */
  .impact-stat{ padding-block:clamp(1.8rem,7vw,2.4rem); }
}
/* Show the hamburger at mobile — kept last so source order beats the base display:none */
@media (max-width:720px){ .navmenu-btn{ display:inline-flex; } }

/* ============================ Case Studies page ============================ */
.cs-hero{ min-height:74svh; min-height:74dvh; display:flex; flex-direction:column; justify-content:center;
  max-width:1500px; margin-inline:auto; padding:clamp(8rem,16vw,12rem) var(--gut) clamp(3rem,7vw,5rem); }
.cs-hero__title{ margin-top:1.4rem; font-family:var(--serif); font-weight:300; font-size:clamp(2.8rem,8vw,6.4rem);
  line-height:1.02; letter-spacing:-0.025em; color:var(--bone); text-wrap:balance; }
.cs-hero__title em{ font-style:italic; color:#fff; }
.cs-hero__sub{ margin-top:1.8rem; max-width:42ch; color:var(--grey); font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.6; }
.cs-hero__stats{ list-style:none; display:flex; flex-wrap:wrap; gap:clamp(1.8rem,6vw,5rem);
  margin-top:clamp(3rem,6vw,4.5rem); padding-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line); }
.cs-hero__fig{ display:block; font-family:var(--serif); font-weight:340; font-size:clamp(2.4rem,4.5vw,3.6rem); letter-spacing:-0.02em; line-height:1; color:#fff; }
.cs-hero__fig sup{ font-size:.5em; vertical-align:.55em; }
.cs-hero__lab{ display:block; margin-top:.7rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grey-2); }

.cs{ max-width:1500px; margin-inline:auto; padding:clamp(5rem,11vw,9rem) var(--gut); }
.cs + .cs, .cs--alt{ border-top:1px solid var(--line); }
.cs__head{ max-width:1120px; }
.cs__kicker{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; }
.cs__kicker span:first-child{ color:var(--bloom-text); }
.cs__kicker span + span{ color:var(--grey-2); }
.cs__headline{ margin-top:1.6rem; font-family:var(--serif); font-weight:300; font-size:clamp(2.2rem,5.6vw,4.6rem);
  line-height:1.06; letter-spacing:-0.02em; color:var(--bone); max-width:17ch; text-wrap:balance; }
.cs__headline em{ font-style:italic; color:#fff; }
.cs__lede{ margin-top:1.8rem; max-width:46ch; color:var(--grey); font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.65; }

/* Full-bleed feature image with a play target */
.cs__feature{ position:relative; display:block; margin-top:clamp(3rem,6vw,5rem); aspect-ratio:16/9; max-height:80vh;
  overflow:hidden; background:#0b0b0c; border:1px solid var(--line); }
.cs__feature img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.cs__feature:hover img{ transform:scale(1.04); }
.cs__feature::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 95% at 50% 50%, transparent 38%, rgba(8,8,9,.55)); }
.cs__feature-cap{ position:absolute; left:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,1.6rem); z-index:3;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(245,242,236,.85); }
.cs__play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  width:clamp(64px,9vw,88px); height:clamp(64px,9vw,88px); border-radius:50%;
  border:1px solid rgba(245,242,236,.55); background:rgba(10,10,11,.32);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:grid; place-items:center;
  transition:transform .4s var(--ease), background .4s, border-color .4s; }
.cs__play::after{ content:""; border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #F5F2EC; margin-left:5px; }
.cs__feature:hover .cs__play, .cs-film:hover .cs__play{ transform:translate(-50%,-50%) scale(1.08); background:var(--bloom); border-color:var(--bloom); }
.cs__play--sm{ width:58px; height:58px; }
.cs__play--sm::after{ border-width:8px 0 8px 13px; }

/* Labeled story blocks */
.cs__blocks{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2rem,4vw,3.5rem); margin-top:clamp(3.5rem,7vw,5.5rem); }
.cs__blocks--two{ grid-template-columns:repeat(2,1fr); max-width:1100px; }
.cs__block-n{ display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bloom-text); border-top:1px solid var(--line); padding-top:1.3rem; margin-bottom:1.2rem; }
.cs__block p{ color:var(--grey); font-size:1.0625rem; line-height:1.66; }
.cs__block strong{ color:var(--bone); font-weight:500; }

/* Big stat band */
.cs__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:clamp(3.5rem,7vw,5.5rem);
  background:var(--line); border:1px solid var(--line); }
.cs-stat{ background:var(--ink); padding:clamp(2rem,4vw,3.2rem) clamp(1.3rem,2.5vw,2.2rem); transition:background .4s; }
.cs-stat:hover{ background:var(--ink-2); }
.cs-stat__fig{ font-family:var(--serif); font-weight:340; font-size:clamp(1.8rem,3.6vw,3rem); letter-spacing:-0.025em; line-height:1; color:#fff; white-space:nowrap; }
.cs-stat__fig sup{ font-size:.5em; vertical-align:.55em; }
.cs-stat__lab{ display:block; margin-top:1.2rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grey-2); }

/* The pivot */
.cs-pivot{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(.7rem,2vw,1.5rem);
  margin:clamp(3.5rem,8vw,6rem) 0; font-family:var(--serif); font-weight:300; font-size:clamp(1.5rem,3.5vw,2.9rem); letter-spacing:-0.01em; }
.cs-pivot__from{ color:var(--grey-2); text-decoration:line-through; text-decoration-color:rgba(216,106,116,.55); }
.cs-pivot__arrow{ color:var(--bloom-text); }
.cs-pivot__to{ color:#fff; font-style:italic; }

.cs__lead{ margin-top:clamp(2rem,4vw,3rem); max-width:28ch; font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,3vw,2.6rem); line-height:1.22; letter-spacing:-0.01em; color:var(--bone); }
.cs__lead em{ font-style:italic; color:#fff; }
.cs__body{ margin-top:1.6rem; max-width:48ch; color:var(--grey); font-size:1.0625rem; line-height:1.7; }
.cs__section-title{ margin-top:clamp(4rem,8vw,6rem); font-family:var(--display); font-weight:300; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(1.5rem,3vw,2.3rem); color:var(--bone); }
.cs__section-title em{ font-style:normal; color:var(--bloom-text); }

/* Two-up films */
.cs-films{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); margin-top:clamp(2.5rem,5vw,3.5rem); }
.cs-film{ display:block; }
.cs-film__media{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#0b0b0c; border:1px solid var(--line); }
.cs-film__media video, .cs-film__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.cs-film:hover .cs-film__media video, .cs-film:hover .cs-film__media img{ transform:scale(1.04); }
.cs-film__place{ display:block; margin-top:1.3rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bloom-text); }
.cs-film__title{ margin-top:.6rem; font-family:var(--serif); font-weight:380; font-size:clamp(1.5rem,2.4vw,2.1rem); letter-spacing:-0.01em; color:var(--bone); transition:color .35s; }
.cs-film:hover .cs-film__title{ color:var(--bloom-text); }
.cs-film__log{ margin-top:.8rem; color:var(--grey); font-size:1rem; line-height:1.6; max-width:44ch; }
.cs-film__cta{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.2rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-2); }
.cs-film__cta span{ display:inline-block; transition:transform .3s var(--ease); }
.cs-film:hover .cs-film__cta span{ transform:translateX(5px); }

/* Atmospheric band */
.cs-band{ margin:clamp(4rem,9vw,7rem) 0 0; width:100%; aspect-ratio:16/9; max-height:78vh; overflow:hidden; background:#0b0b0c; border:1px solid var(--line); }
.cs-band img{ width:100%; height:100%; object-fit:cover; }

/* Trust moment */
.cs-trust{ text-align:center; max-width:52ch; margin:clamp(4rem,9vw,7rem) auto 0; }
.cs-trust__lead{ display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); }
.cs-trust__big{ margin:1.4rem 0; font-family:var(--serif); font-weight:300; font-size:clamp(3rem,8vw,6rem); line-height:1; letter-spacing:-0.025em; color:var(--bone); }
.cs-trust__big em{ font-style:italic; color:#fff; }
.cs-trust__note{ display:block; max-width:44ch; margin-inline:auto; color:var(--grey); font-size:1.05rem; line-height:1.62; }

.cs-close{ margin-top:clamp(4rem,9vw,7rem); font-family:var(--serif); font-weight:300; font-size:clamp(1.7rem,3.8vw,3.1rem); line-height:1.2; letter-spacing:-0.015em; color:var(--bone); max-width:22ch; }
.cs-close em{ font-style:italic; color:#fff; }

/* Closing CTA */
.cs-cta{ text-align:center; max-width:1500px; margin-inline:auto; padding:clamp(6rem,14vw,11rem) var(--gut); border-top:1px solid var(--line); }
.cs-cta__title{ margin-top:1.2rem; font-family:var(--serif); font-weight:300; font-size:clamp(2.2rem,5.6vw,4.6rem); line-height:1.06; letter-spacing:-0.02em; color:var(--bone); text-wrap:balance; }
.cs-cta__title em{ font-style:italic; color:#fff; }
.cs-cta__actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.2rem 2.2rem; margin-top:2.6rem; }
.cs-cta__phone{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-2); border-bottom:1px solid var(--line-2); padding-bottom:.35rem; transition:color .3s, border-color .3s; }
.cs-cta__phone:hover{ color:var(--bloom-text); border-bottom-color:var(--bloom-text); }
.cs-cta__phone span{ display:inline-block; transition:transform .3s var(--ease); }
.cs-cta__phone:hover span{ transform:translateX(4px); }

@media (max-width:760px){
  .cs__blocks, .cs__blocks--two, .cs-films, .cs__stats{ grid-template-columns:1fr; }
  .cs__stats{ gap:1px; }
  .cs-films{ gap:3rem; }
}

/* Impact-section link to the case studies */
.impact__cta{ text-align:center; margin-top:clamp(2.6rem,5vw,3.5rem); }

/* Bot-safe phone link (contact block) */
.contact__phone{ display:block; margin-top:1.1rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-2); width:max-content; border-bottom:1px solid transparent; padding-bottom:.25rem;
  transition:color .3s, border-color .3s; }
.contact__phone:hover{ color:var(--bloom-text); border-bottom-color:var(--bloom-text); }
.contact__phone span{ display:inline-block; transition:transform .3s var(--ease); }
.contact__phone:hover span{ transform:translateX(4px); }

/* ============================ Section background videos ============================ */
/* Dimmed, scrimmed footage behind text-heavy black sections. .bgvid is lazy-played by menu.js. */
.sectionbg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.20; pointer-events:none; }
.sectionbg-scrim{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,10,11,.74) 0%, rgba(10,10,11,.84) 50%, rgba(10,10,11,.92) 100%); }
.studio{ position:relative; overflow:hidden; }
.studio__intro, .studio .beliefs, .studio__more{ position:relative; z-index:1; }

/* Full-bleed video band (home) — a human "moment" that breaks up the copy */
.vband{ position:relative; width:100%; aspect-ratio:16/9; max-height:72vh; overflow:hidden; background:#0b0b0c; display:grid; place-items:center; }
.vband__vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.vband__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(135% 125% at 55% 45%, rgba(8,8,9,.08) 0%, rgba(8,8,9,.36) 55%, rgba(8,8,9,.72) 100%); }
.vband__line{ position:relative; z-index:2; text-align:center; padding:0 var(--gut);
  font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,4vw,3rem); line-height:1.2; letter-spacing:-0.01em; color:var(--bone); text-wrap:balance;
  text-shadow:0 2px 36px rgba(0,0,0,.85), 0 1px 8px rgba(0,0,0,.6); }
.vband__line em{ font-style:italic; color:#fff; }

/* Bible trust band (case studies) — looping footage with the trust statement over it */
.cs-band--trust{ position:relative; display:grid; place-items:center; aspect-ratio:16/9; max-height:84vh; }
.cs-band__vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.cs-band__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 110% at 50% 46%, rgba(8,8,9,.42) 0%, rgba(8,8,9,.8) 100%); }
.cs-band__overlay{ position:relative; z-index:2; text-align:center; max-width:48ch; padding:clamp(2rem,5vw,3.5rem) var(--gut); margin:0; }
.cs-band__overlay .cs-trust__lead{ display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(245,242,236,.78); }
.cs-band__overlay .cs-trust__big{ margin:1.2rem 0; font-family:var(--serif); font-weight:300; font-size:clamp(2.6rem,7vw,5rem); line-height:1; letter-spacing:-0.025em; color:#fff; }
.cs-band__overlay .cs-trust__big em{ font-style:italic; }
.cs-band__overlay .cs-trust__note{ display:block; max-width:42ch; margin-inline:auto; color:var(--bone-2); font-size:1rem; line-height:1.6; }
@media (max-width:600px){ .vband, .cs-band--trust{ aspect-ratio:4/5; max-height:none; } }

/* Video lightbox — fill the screen when a phone/tablet is turned sideways (landscape) */
@media (orientation:landscape) and (max-height:560px){
  .vlb{ padding:0; }
  .vlb__frame{ width:100vw; max-width:100vw; max-height:100vh; aspect-ratio:auto; height:100vh; }
  .vlb__frame iframe, .vlb__frame video{ height:100%; }
  .vlb__close{ top:10px; right:10px; }
}

/* ============================ Joy band — embedded, cinematic detail ============================ */
.vband__vid{ will-change:transform; animation:vbandDrift 26s var(--ease) infinite alternate; }
@keyframes vbandDrift{ from{ transform:scale(1.05); } to{ transform:scale(1.14); } }
/* fade the footage into the black sections above/below, plus a soft vignette — feels embedded, not pasted */
.vband__scrim{ background:
  linear-gradient(to bottom, #0A0A0B 0%, rgba(10,10,11,0) 16%, rgba(10,10,11,0) 80%, #0A0A0B 100%); }
.vband__cap{ position:absolute; left:clamp(1.3rem,3.2vw,2.6rem); bottom:clamp(1.3rem,3.2vw,2.3rem); z-index:2;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(245,242,236,.82); }
.vband__scroll{ position:absolute; left:50%; bottom:clamp(1.4rem,3.2vw,2.4rem); transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.vband__scroll-label{ font-family:var(--mono); font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(245,242,236,.74); }
.vband__scroll-line{ width:1px; height:40px; position:relative; overflow:hidden; background:rgba(236,231,220,.28); }
.vband__scroll-line::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--bone); animation:scrollPulse 2.2s ease-in-out infinite; }

/* ============================ Smooth first paint ============================ */
/* A brief whole-page fade-in masks font-swap + media pop, so the first load feels intentional, not choppy */
@keyframes pageIn{ from{ opacity:0; } to{ opacity:1; } }
body{ animation:pageIn .45s var(--ease) both; }
@media (prefers-reduced-motion: reduce){
  body{ animation:none; }
  .vband__vid{ animation:none; }
  .vband__scroll-line::after{ animation:none; }
}

/* ============================ Hero tagline (bottom-left) ============================ */
.hero__tagline{ position:absolute; left:var(--gut); bottom:clamp(2.2rem,5vw,3.4rem); z-index:2; margin:0;
  font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.26em;
  font-size:clamp(.8rem,1.05vw,1rem); color:var(--bone); pointer-events:none;
  animation:heroTitleIn 1.3s var(--ease) .5s both; }

/* ============================ About — one editorial section ============================ */
.about-lead{ max-width:1100px; margin-inline:auto; text-align:center;
  padding:clamp(9rem,18vw,13rem) var(--gut) clamp(2.5rem,6vw,4rem); }
.about-lead__quote{ margin:1.5rem auto 0; max-width:22ch; font-family:var(--serif); font-weight:300;
  font-size:clamp(2.2rem,6vw,4.2rem); line-height:1.12; letter-spacing:-0.02em; color:var(--bone); text-wrap:balance; }
.about-lead__quote em{ font-style:italic; color:#fff; }
.about-story{ max-width:1180px; margin-inline:auto; padding:0 var(--gut) clamp(6rem,12vw,9rem);
  display:grid; grid-template-columns:1fr minmax(300px,0.82fr); gap:clamp(2.5rem,5.5vw,5rem); align-items:start; }
.about-story__prose{ max-width:60ch; }
.about-story__prose p{ color:var(--grey); font-size:1.075rem; line-height:1.78; margin-top:1.5rem; }
.about-story__prose p:first-child{ margin-top:0; }
.about-story__prose .lead{ color:var(--bone); font-family:var(--serif); font-weight:380;
  font-size:clamp(1.45rem,2.8vw,2.05rem); line-height:1.32; letter-spacing:-0.01em; }
.about-story__prose em{ color:var(--bone); font-style:italic; }
.about-story__fig{ margin:0; position:sticky; top:clamp(5rem,13vh,8.5rem); }
.about-story__fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; border:1px solid var(--line); }
.about-story__fig figcaption{ display:block; margin-top:.85rem; text-align:left; }
@media (max-width:860px){
  .about-story{ grid-template-columns:1fr; gap:0; }
  .about-story__prose{ max-width:64ch; margin-inline:auto; }
  .about-story__fig{ position:static; margin:clamp(3rem,7vw,4.5rem) auto 0; max-width:520px; }
  .about-story__fig figcaption{ text-align:center; }
}