/* ============================================================
   CINEVO AI PRODUCTION — Cinematic dark portfolio
   ============================================================ */

:root{
  --bg:        #0C0A0A;
  --bg-soft:   #101012;
  --surface:   #141416;
  --fg:        #F4F1EA;
  --muted:     #8A857C;
  --muted-2:   #57534B;
  --gold:      #E5484D;
  --gold-soft: #c93a3f;

  /* Accent palette (adds color to Services / Process / Testimonials) */
  --a1: #E5484D; /* gold   */
  --a2: #FF6B3D; /* ember */
  --a3: #D88C87; /* ash rose */
  --a4: #98A2B3; /* steel */
  --line:      rgba(244,241,234,0.10);
  --line-2:    rgba(244,241,234,0.06);

  --font-display: "Clash Display", "Arial Black", system-ui, sans-serif;
  --font-ui: "Satoshi", system-ui, sans-serif;
  --font-body: "Satoshi", system-ui, sans-serif;

  --maxw: 1340px;
  --gut: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.lock{ overflow:hidden; }
a{ color:inherit; text-decoration:none; }
img,video{ display:block; max-width:100%; }
::selection{ background:var(--gold); color:#fff; }

/* ---------- Smooth scroll (Lenis) ---------- */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---------- Overlays ---------- */
.grain{
  position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.vignette{
  position:fixed; inset:0; z-index:8999; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* ---------- Custom cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:9500; width:14px; height:14px;
  border-radius:50%; background:var(--gold); pointer-events:none;
  transform:translate(-50%,-50%); mix-blend-mode:difference;
  transition:width .35s var(--ease), height .35s var(--ease), background .3s;
  display:grid; place-items:center;
}
.cursor__label{
  font-family:var(--font-ui); font-size:11px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:#fff; opacity:0; transform:scale(.6); transition:opacity .25s, transform .25s;
  white-space:nowrap;
}
.cursor.is-hover{ width:84px; height:84px; mix-blend-mode:normal; background:var(--gold); }
.cursor.is-hover .cursor__label{ opacity:1; transform:scale(1); }
@media (hover:none){ .cursor{ display:none; } }

/* ---------- Preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:grid; place-items:center;
}
.preloader__inner{ text-align:center; width:min(80vw,360px); }
.preloader__brand{
  font-family:var(--font-display); font-weight:300; font-size:clamp(34px,7vw,56px);
  letter-spacing:.02em; margin-bottom:26px;
}
.preloader__brand span{ color:var(--gold); font-style:italic; margin-left:.15em; }
.preloader__bar{ height:1px; width:100%; background:var(--line); overflow:hidden; }
.preloader__bar span{ display:block; height:100%; width:0; background:var(--gold); }
.preloader__count{
  font-family:var(--font-ui); font-size:12px; color:var(--muted); margin-top:14px; letter-spacing:.1em;
}

/* ---------- Navbar ---------- */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gut); transition:padding .4s var(--ease), background .4s, backdrop-filter .4s;
}
.nav.scrolled{
  padding:14px var(--gut); background:rgba(10,10,11,.72);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line-2);
}
.nav__logo{
  font-family:var(--font-display); font-size:22px; font-weight:400; letter-spacing:.04em;
  display:flex; align-items:center; gap:.5em;
}
.nav__logo em{ color:var(--gold); font-style:italic; }
.nav__logo-mark{ color:var(--gold); font-size:13px; }
.nav__logo-sub{
  font-family:var(--font-ui); font-size:10.5px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); align-self:center; margin-left:.1em;
  padding-left:.7em; border-left:1px solid var(--line); line-height:1;
}
@media (max-width:520px){ .nav__logo-sub{ display:none; } }
.nav__links{ display:flex; gap:34px; }
.nav__links a{
  font-family:var(--font-ui); font-size:14px; color:rgba(244,241,234,.86); letter-spacing:.02em;
  position:relative; transition:color .3s; text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.nav.scrolled .nav__links a{ text-shadow:none; color:rgba(244,241,234,.7); }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:var(--gold); transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--fg); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  font-family:var(--font-ui); font-size:13px; font-weight:500; letter-spacing:.03em;
  padding:11px 22px; border:1px solid rgba(229,72,77,.55); color:var(--gold);
  border-radius:6px; transition:.35s var(--ease);
  background:rgba(10,10,11,.25); backdrop-filter:blur(6px); text-shadow:0 1px 10px rgba(0,0,0,.4);
}
.nav__cta:hover{ background:var(--gold); color:#fff; border-color:var(--gold); text-shadow:none; }
.nav__burger span{ box-shadow:0 1px 8px rgba(0,0,0,.5); }
.nav__burger{ display:none; background:none; border:none; cursor:pointer; width:34px; height:34px; flex-direction:column; gap:7px; justify-content:center; align-items:center; }
.nav__burger span{ display:block; width:24px; height:2px; background:var(--fg); transition:.35s var(--ease); }
.nav__burger.open span:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
.nav__burger.open span:nth-child(2){ transform:translateY(-4.5px) rotate(-45deg); }

/* ---------- Mobile menu ---------- */
.mobile-menu{
  position:fixed; inset:0; z-index:999; background:var(--bg-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  opacity:0; pointer-events:none; transform:translateY(-12px); transition:.45s var(--ease);
}
.mobile-menu.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
.mobile-menu a{ font-family:var(--font-display); font-size:34px; }
.mobile-menu__cta{ color:var(--gold) !important; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-ui); font-size:14px; font-weight:500; letter-spacing:.02em;
  padding:15px 30px; border-radius:6px; cursor:pointer; transition:.4s var(--ease); border:1px solid transparent;
}
.btn--solid{ background:var(--gold); color:#fff; }
.btn--solid:hover{ background:#fff; transform:translateY(-2px); }
.btn--ghost{ border-color:var(--line); color:var(--fg); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn--full{ width:100%; justify-content:center; border:none; }

/* ---------- Reveal animation base ---------- */
.reveal{ opacity:0; transform:translateY(26px); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; height:100svh; min-height:640px; overflow:hidden; display:flex; align-items:flex-end; }
.hero__media{ position:absolute; inset:-8% 0; z-index:0; will-change:transform; }
.hero__video{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.15) 35%, rgba(10,10,11,.75) 78%, var(--bg) 100%),
    radial-gradient(80% 60% at 50% 100%, rgba(10,10,11,.6), transparent);
}
.hero__content{ position:relative; z-index:2; padding:0 var(--gut) clamp(90px,14vh,150px); max-width:1100px; }
.hero__kicker{
  font-family:var(--font-ui); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:12px; margin-bottom:26px;
}
.hero__kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(229,72,77,.5); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(229,72,77,.45);} 70%{ box-shadow:0 0 0 12px rgba(229,72,77,0);} 100%{ box-shadow:0 0 0 0 rgba(229,72,77,0);} }
.hero__title{
  font-family:var(--font-display); font-weight:340; line-height:.98;
  font-size:clamp(46px, 8.5vw, 124px); letter-spacing:-.02em;
}
.hero__title em{ font-style:italic; color:var(--gold); }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; transform:translateY(110%); }
.hero__sub{
  margin-top:30px; max-width:560px; font-size:clamp(16px,1.5vw,19px); color:var(--muted); line-height:1.65;
}
.hero__actions{ margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; }
.hero__scroll{
  position:absolute; right:var(--gut); bottom:clamp(90px,14vh,150px); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--font-ui); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.hero__scroll-line{ width:1px; height:60px; background:var(--line); position:relative; overflow:hidden; }
.hero__scroll-line i{ position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--gold); animation:scrolldown 2s infinite var(--ease); }
@keyframes scrolldown{ 0%{ transform:translateY(-100%);} 100%{ transform:translateY(300%);} }
@media (max-width:760px){ .hero__scroll{ display:none; } }

/* Marquee */
.marquee{ position:absolute; bottom:0; left:0; width:100%; z-index:2; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:16px 0; background:rgba(10,10,11,.4); backdrop-filter:blur(6px); overflow:hidden; }
.marquee__track{ display:flex; align-items:center; gap:40px; width:max-content; animation:marquee 26s linear infinite; }
.marquee__track span{ font-family:var(--font-ui); font-size:14px; letter-spacing:.05em; color:var(--fg); text-transform:uppercase; white-space:nowrap; }
.marquee__track .sep{ color:var(--gold); font-size:9px; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   SECTION HEAD
   ============================================================ */
.section-head{ padding:clamp(90px,14vh,170px) var(--gut) 0; max-width:var(--maxw); margin:0 auto; }
.section-head.center{ text-align:center; }
.section-head__index{ font-family:var(--font-ui); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:22px; }
.section-head__title{ font-family:var(--font-display); font-weight:340; font-size:clamp(34px,5.5vw,76px); line-height:1.02; letter-spacing:-.02em; max-width:14ch; }
.section-head.center .section-head__title{ margin:0 auto; }
.section-head__lead{ margin-top:24px; max-width:48ch; color:var(--muted); font-size:clamp(15px,1.4vw,18px); }
.section-head.center .section-head__lead{ margin-left:auto; margin-right:auto; }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{ padding:clamp(110px,18vh,220px) var(--gut); max-width:1200px; margin:0 auto; text-align:center; }
.manifesto__kicker{ font-family:var(--font-ui); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:34px; }
.manifesto__text{ font-family:var(--font-display); font-weight:330; font-size:clamp(28px,4.4vw,62px); line-height:1.18; letter-spacing:-.01em; }
.manifesto__text [data-word]{ display:inline-block; opacity:.12; transition:opacity .3s; }
.manifesto__text .muted{ }

/* ============================================================
   WORK
   ============================================================ */
.work__grid{
  max-width:var(--maxw); margin:0 auto; padding:60px var(--gut) 40px;
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(40px,6vw,90px) clamp(20px,3vw,48px);
}
.work-item{ display:block; cursor:pointer; }
.work-item.span-8{ grid-column:span 8; }
.work-item.span-7{ grid-column:span 7; }
.work-item.span-6{ grid-column:span 6; }
.work-item.span-5{ grid-column:span 5; }
.work-item.span-4{ grid-column:span 4; }
.work-item.align-right{ grid-column-end:13; }
/* center: explicit start+span so the span isn't overridden (fixes collapsed item) */
.work-item.span-8.align-center{ grid-column:3 / span 8; }
.work-item__media{
  position:relative; overflow:hidden; border-radius:6px; background:var(--surface);
  border:1px solid var(--line-2);
}
.work-item__media.ar-16x9{ aspect-ratio:16/9; }
.work-item__media.ar-9x16{ aspect-ratio:9/16; }
.work-item__media img,
.work-item__media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.work-item__media video{ opacity:0; transition:opacity .6s var(--ease); }
.work-item__media img{ transition:transform 1.1s var(--ease), filter .6s; transform:scale(1.02); filter:saturate(.92); }
.work-item.is-playing .work-item__media video{ opacity:1; }
.work-item:hover .work-item__media img{ transform:scale(1.06); filter:saturate(1.05); }
.work-item__play{
  position:absolute; bottom:16px; right:16px; z-index:3;
  font-family:var(--font-ui); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--gold); padding:8px 14px; border-radius:6px;
  opacity:0; transform:translateY(8px); transition:.4s var(--ease);
}
.work-item:hover .work-item__play{ opacity:1; transform:translateY(0); }
.work-item__meta{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:18px; padding-bottom:8px; border-bottom:1px solid var(--line-2); }
.work-item__meta h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(19px,2vw,26px); letter-spacing:-.01em; }
.work-item__meta span{ font-family:var(--font-ui); font-size:12.5px; color:var(--muted); letter-spacing:.03em; text-align:right; }

/* ============================================================
   SERVICES
   ============================================================ */
.services__list{ max-width:var(--maxw); margin:50px auto 0; padding:0 var(--gut); }
.service{
  position:relative; display:grid; grid-template-columns:90px 1fr 240px; gap:30px; align-items:start;
  padding:42px 28px 42px 18px; border-top:1px solid var(--line);
  transition:padding-left .5s var(--ease), background .5s var(--ease);
  border-radius:10px;
}
.service:last-child{ border-bottom:1px solid var(--line); }
.service::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px;
  background:var(--acc); transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease);
}
.service:hover{ padding-left:34px; background:color-mix(in srgb, var(--acc) 7%, transparent); }
.service:hover::before{ transform:scaleY(1); }
.service:nth-child(1){ --acc:var(--a1); }
.service:nth-child(2){ --acc:var(--a2); }
.service:nth-child(3){ --acc:var(--a3); }
.service:nth-child(4){ --acc:var(--a4); }
.service__num{
  font-family:var(--font-ui); font-size:15px; font-weight:600; color:var(--acc);
  letter-spacing:.05em; padding-top:10px;
}
.service__body h3{
  font-family:var(--font-display); font-weight:380; font-size:clamp(26px,3.4vw,46px);
  line-height:1.05; letter-spacing:-.015em; margin-bottom:14px;
  display:inline-flex; align-items:center; gap:.4em; transition:color .4s;
}
.service__body h3::after{
  content:"→"; font-family:var(--font-ui); font-size:.5em; color:var(--acc);
  opacity:0; transform:translateX(-8px); transition:.45s var(--ease);
}
.service:hover .service__body h3{ color:var(--acc); }
.service:hover .service__body h3::after{ opacity:1; transform:translateX(0); }
.service__body p{ color:var(--muted); max-width:54ch; font-size:clamp(15px,1.3vw,17px); }
.service__tag{
  font-family:var(--font-ui); font-size:11.5px; color:var(--acc); letter-spacing:.06em;
  text-align:right; padding-top:14px; text-transform:uppercase;
  opacity:.65; transition:opacity .4s;
}
.service:hover .service__tag{ opacity:1; }

/* ============================================================
   PROCESS
   ============================================================ */
.process__steps{
  max-width:var(--maxw); margin:60px auto 0; padding:0 var(--gut);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,40px);
}
.step{
  position:relative; padding:26px 22px; border-radius:6px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--acc) 9%, transparent), color-mix(in srgb, var(--acc) 2%, transparent));
  border:1px solid color-mix(in srgb, var(--acc) 22%, transparent);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.step::before{
  content:""; position:absolute; left:22px; right:22px; top:0; height:2px; border-radius:2px;
  background:var(--acc); transform:scaleX(.25); transform-origin:left; transition:transform .6s var(--ease);
}
.step:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -24px color-mix(in srgb, var(--acc) 55%, transparent); border-color:color-mix(in srgb, var(--acc) 45%, transparent); }
.step:hover::before{ transform:scaleX(1); }
.step:nth-child(1){ --acc:var(--a1); }
.step:nth-child(2){ --acc:var(--a2); }
.step:nth-child(3){ --acc:var(--a3); }
.step:nth-child(4){ --acc:var(--a4); }
.step__num{
  font-family:var(--font-ui); font-size:13px; font-weight:600; color:var(--acc); letter-spacing:.12em;
  display:inline-block; padding:4px 10px; border-radius:6px;
  background:color-mix(in srgb, var(--acc) 16%, transparent);
}
.step h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(22px,2.4vw,30px); margin:16px 0 12px; color:var(--fg); }
.step p{ color:var(--muted); font-size:15px; }

.stats{
  max-width:var(--maxw); margin:clamp(80px,12vh,140px) auto 0; padding:0 var(--gut);
  display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
}
.stat{ border-left:2px solid color-mix(in srgb, var(--acc) 50%, transparent); padding-left:24px; }
.stat:nth-child(1){ --acc:var(--a1); }
.stat:nth-child(2){ --acc:var(--a2); }
.stat:nth-child(3){ --acc:var(--a3); }
.stat:nth-child(4){ --acc:var(--a4); }
.stat__num{ font-family:var(--font-display); font-weight:340; font-size:clamp(40px,6vw,80px); line-height:1; color:var(--acc); display:block; letter-spacing:-.02em; }
.stat p{ color:var(--muted); font-size:14px; margin-top:10px; }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ padding:clamp(110px,16vh,200px) var(--gut); max-width:var(--maxw); margin:0 auto; }
.about__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.about__media{ aspect-ratio:4/5; overflow:hidden; border-radius:8px; border:1px solid var(--line-2); }
.about__media video{ width:100%; height:100%; object-fit:cover; }
.about__text .section-head__index{ margin-bottom:20px; }
.about__text h2{ font-family:var(--font-display); font-weight:340; font-size:clamp(30px,4.2vw,56px); line-height:1.05; letter-spacing:-.02em; margin-bottom:26px; }
.about__text p{ color:var(--muted); margin-bottom:20px; font-size:clamp(15px,1.4vw,17.5px); max-width:52ch; }
.about__text .btn{ margin-top:14px; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{ padding-bottom:clamp(80px,12vh,140px); }
.testimonials__grid{
  max-width:var(--maxw); margin:60px auto 0; padding:0 var(--gut);
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.quote{
  position:relative; background:var(--surface); border:1px solid var(--line-2); border-radius:6px;
  padding:32px 30px 30px; overflow:hidden; transition:transform .5s var(--ease), border-color .5s;
}
.quote::before{ content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:linear-gradient(90deg, var(--acc), transparent); }
.quote:hover{ transform:translateY(-6px); border-color:color-mix(in srgb, var(--acc) 40%, transparent); }
.quote__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.quote__mark{ font-family:var(--font-display); font-size:64px; line-height:.6; color:var(--acc); opacity:.5; }
.quote__stars{ color:var(--gold); font-size:14px; letter-spacing:2px; }
.quote blockquote{ font-family:var(--font-display); font-weight:340; font-size:clamp(18px,1.7vw,22px); line-height:1.45; letter-spacing:-.01em; }
.quote blockquote b{ color:var(--acc); font-weight:500; font-style:normal; }
.quote figcaption{ margin-top:28px; display:flex; align-items:center; gap:14px; }
.quote__avatar{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-ui); font-size:14px; font-weight:600; color:#fff;
  background:var(--acc); letter-spacing:.02em;
}
.quote__who{ display:flex; flex-direction:column; gap:2px; }
.quote__who strong{ font-weight:500; font-family:var(--font-ui); font-size:14px; }
.quote__who span{ color:var(--muted); font-size:13px; }
.quote:nth-child(1){ --acc:var(--a1); }
.quote:nth-child(2){ --acc:var(--a3); }
.quote:nth-child(3){ --acc:var(--a4); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ padding:clamp(100px,14vh,180px) var(--gut); border-top:1px solid var(--line-2); }
.contact__inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,100px); align-items:start; }
.contact__head .section-head__index{ margin-bottom:22px; }
.contact__title{ font-family:var(--font-display); font-weight:330; font-size:clamp(40px,6vw,86px); line-height:.98; letter-spacing:-.025em; }
.contact__title em{ font-style:italic; color:var(--gold); }
.contact__title .line{ display:block; overflow:hidden; }
.contact__title .line > span{ display:block; transform:translateY(110%); }
.contact__head p{ margin-top:28px; color:var(--muted); max-width:40ch; }
.contact__email{ display:inline-block; margin-top:24px; font-family:var(--font-ui); font-size:clamp(16px,1.6vw,20px); color:var(--gold); border-bottom:1px solid var(--line); padding-bottom:4px; transition:.3s; }
.contact__email:hover{ border-color:var(--gold); }

.contact__form{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-family:var(--font-ui); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.field input,.field select,.field textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line);
  color:var(--fg); font-family:var(--font-body); font-size:16px; padding:10px 0; transition:border-color .3s;
}
.field textarea{ resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:var(--muted-2); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); }
.field select{ cursor:pointer; }
.field select option{ background:var(--surface); color:var(--fg); }
.contact__form .btn{ grid-column:1 / -1; }
.form-status{ grid-column:1/-1; font-family:var(--font-ui); font-size:13px; color:var(--gold); min-height:1em; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ padding:clamp(50px,7vh,80px) var(--gut) 30px; border-top:1px solid var(--line-2); overflow:hidden; }
.footer__top{ max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; align-items:center; }
.footer__logo{ font-family:var(--font-display); font-size:24px; }
.footer__logo em{ color:var(--gold); font-style:italic; }
.footer__totop{ font-family:var(--font-ui); font-size:13px; color:var(--muted); letter-spacing:.04em; transition:color .3s; }
.footer__totop:hover{ color:var(--gold); }
.footer__big{
  font-family:var(--font-display); font-weight:300; text-align:center;
  font-size:clamp(46px,15vw,230px); line-height:.9; letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1px var(--line);
  margin:clamp(30px,5vw,60px) 0; white-space:nowrap;
}
.footer__bottom{ max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:24px; border-top:1px solid var(--line-2); }
.footer__bottom span{ font-size:13px; color:var(--muted); }
.footer__social{ display:flex; gap:24px; }
.footer__social a{ font-family:var(--font-ui); font-size:13px; color:var(--muted); transition:color .3s; }
.footer__social a:hover{ color:var(--gold); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:9800; background:rgba(5,5,6,.92); backdrop-filter:blur(10px);
  display:grid; place-items:center; padding:var(--gut);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox__stage{ width:min(1100px,100%); max-height:84vh; transform:scale(.96); transition:transform .5s var(--ease); }
.lightbox.open .lightbox__stage{ transform:scale(1); }
.lightbox__stage video{ width:100%; max-height:84vh; border-radius:8px; background:#000; }
.lightbox__close{
  position:absolute; top:24px; right:28px; width:46px; height:46px; border-radius:50%;
  background:transparent; border:1px solid var(--line); color:var(--fg); font-size:18px; cursor:pointer; transition:.3s;
}
.lightbox__close:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .nav__links,.nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .contact__inner,.about__grid{ grid-template-columns:1fr; }
  .about__media{ aspect-ratio:16/10; max-height:460px; }
  .service{ grid-template-columns:50px 1fr; }
  .service__tag{ display:none; }
  .process__steps{ grid-template-columns:repeat(2,1fr); row-gap:40px; }
  .stats{ grid-template-columns:repeat(2,1fr); row-gap:40px; }
  .testimonials__grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .work__grid{ display:flex; flex-direction:column; }
  .work-item{ width:100%; }
  .work-item__media.ar-9x16{ aspect-ratio:4/5; }
  .contact__form{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .hero__content{ padding-bottom:120px; }
  .marquee__track{ gap:24px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero__title .line > span,.contact__title .line > span{ transform:none !important; }
  .manifesto__text [data-word]{ opacity:1 !important; }
  .marquee__track,.hero__scroll-line i,.hero__kicker .dot{ animation:none !important; }
  .cursor{ display:none !important; }
}

/* ============================================================
   ✦ CINEMATIC LUXURY LAYER — atmospheric chapters & depth
   ============================================================ */
:root{
  --navy:    #0B1022;
  --charcoal:#16151B;
  --ivory:   #F6F2E9;
}
body{ color:var(--ivory); }

/* Global atmospheric field — a continuous scene behind every section */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(20,28,58,.55) 0%, rgba(10,12,22,.2) 38%, transparent 70%),
    radial-gradient(90% 60% at 100% 8%, rgba(229,72,77,.06), transparent 55%),
    linear-gradient(180deg, #0A0808 0%, #0A0B14 26%, #0C0B10 52%, #0E0B0A 78%, #150A0C 100%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:radial-gradient(60% 50% at 50% 120%, rgba(229,72,77,.05), transparent 70%);
}

/* Section layering: atmosphere behind, content in front */
.manifesto,.services,.process,.testimonials,.contact,.about{
  position:relative; isolation:isolate; overflow:hidden;
}
.atmos{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.atmos > *{ position:absolute; inset:-18%; display:block; }
.manifesto > *:not(.atmos),
.services > *:not(.atmos),
.process > *:not(.atmos),
.testimonials > *:not(.atmos),
.contact > *:not(.atmos),
.about > *:not(.atmos){ position:relative; z-index:2; }

/* Soft seams so chapters dissolve into one another */
.manifesto::before,.services::before,.process::before,.testimonials::before,.contact::before{
  content:""; position:absolute; inset:0 0 auto 0; height:160px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, #0A0A0F, transparent);
}

/* ---------- HERO: light beams + drifting dust + scroll rail ---------- */
.hero__scroll{ display:none; }
.hero__beam{
  position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;
  background:
    conic-gradient(from 210deg at 8% -12%, rgba(229,72,77,.26), transparent 22%),
    radial-gradient(40% 60% at 6% 0%, rgba(229,72,77,.14), transparent 60%);
  will-change:transform;
}
.hero__dust{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 30%, rgba(246,242,233,.7), transparent),
    radial-gradient(1.4px 1.4px at 22% 68%, rgba(229,72,77,.6), transparent),
    radial-gradient(1.8px 1.8px at 38% 18%, rgba(246,242,233,.5), transparent),
    radial-gradient(1.3px 1.3px at 54% 80%, rgba(229,72,77,.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 40%, rgba(246,242,233,.5), transparent),
    radial-gradient(1.7px 1.7px at 84% 64%, rgba(229,72,77,.45), transparent),
    radial-gradient(1.4px 1.4px at 92% 24%, rgba(246,242,233,.5), transparent);
  animation:dustfloat 18s ease-in-out infinite alternate;
}
@keyframes dustfloat{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(-14px,-26px,0);} }
.scroll-rail{
  position:absolute; left:var(--gut); bottom:clamp(80px,12vh,140px); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.scroll-rail span{
  writing-mode:vertical-rl; font-family:var(--font-ui); font-size:11px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--muted);
}
.scroll-rail i{ position:relative; width:1px; height:84px; background:var(--line); overflow:hidden; display:block; }
.scroll-rail i::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--gold); animation:scrolldown 2.2s var(--ease) infinite; }
@media (max-width:760px){ .scroll-rail{ display:none; } }

/* ---------- MANIFESTO: midnight gold-vein monolith ---------- */
.manifesto{ background:linear-gradient(180deg, transparent, rgba(8,9,16,.5) 40%, transparent); }
.atmos--manifesto{ background:radial-gradient(80% 70% at 50% 50%, rgba(14,18,38,.7), transparent 75%); }
.atmos__veins{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009 0.015' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.80 0 0 0 0 0.25 0 0 0 0 0.27 0 0 0 2.2 -0.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");
  background-size:cover; opacity:.16; mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 80%);
          mask-image:radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 80%);
}
.atmos__beam{
  background:conic-gradient(from 180deg at 50% -20%, transparent, rgba(229,72,77,.16) 8%, transparent 18%);
  mix-blend-mode:screen;
}
.atmos__fog{
  background:radial-gradient(50% 40% at 30% 30%, rgba(40,46,80,.5), transparent 70%),
             radial-gradient(45% 38% at 75% 70%, rgba(26,22,18,.6), transparent 70%);
  animation:fogdrift 26s ease-in-out infinite alternate; filter:blur(8px);
}
.atmos__fog--cool{ background:radial-gradient(45% 40% at 25% 40%, rgba(28,40,70,.45), transparent 70%),radial-gradient(45% 40% at 80% 65%, rgba(18,30,55,.5), transparent 70%); }
@keyframes fogdrift{ from{ transform:translate3d(0,0,0) scale(1);} to{ transform:translate3d(24px,-18px,0) scale(1.08);} }
.manifesto__text [data-word].muted{ }
.manifesto__text [data-word]{ filter:drop-shadow(0 2px 30px rgba(0,0,0,.5)); }

/* ---------- SERVICES: museum slabs with film frames ---------- */
.atmos--services{ background:linear-gradient(180deg, transparent, rgba(22,21,27,.5), transparent); }
.atmos__glow{ border-radius:50%; filter:blur(70px); opacity:.5; }
.atmos__glow--l{ inset:auto auto -10% -10%; width:48%; height:60%; background:radial-gradient(circle, rgba(229,72,77,.16), transparent 70%); }
.atmos__glow--r{ inset:-10% -12% auto auto; width:46%; height:60%; background:radial-gradient(circle, rgba(80,120,180,.12), transparent 70%); }

.services__list{ display:flex; flex-direction:column; gap:clamp(22px,2.6vw,34px); margin-top:64px; }
.service{
  position:relative; display:flex; align-items:stretch; min-height:clamp(260px,34vw,360px);
  padding:0; border-radius:6px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--acc) 18%, var(--line));
  background:linear-gradient(120deg, rgba(22,21,27,.72), rgba(12,12,17,.5));
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:transform .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.service::before{ content:none; }
.service:nth-child(even){ flex-direction:row-reverse; }
.service:hover{
  padding-left:0; transform:translateY(-7px);
  border-color:color-mix(in srgb, var(--acc) 55%, transparent);
  box-shadow:0 50px 90px -50px color-mix(in srgb, var(--acc) 60%, transparent);
  background:linear-gradient(120deg, rgba(26,25,32,.8), rgba(14,14,19,.55));
}
.service__media{ position:relative; flex:1 1 46%; overflow:hidden; }
.service__media img,.service__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.service__media video{ opacity:0; transition:opacity .6s var(--ease); }
.service__media img{ transform:scale(1.04); filter:saturate(.9) contrast(1.02); transition:transform 1.2s var(--ease); }
.service:hover .service__media img{ transform:scale(1.1); }
.service.is-playing .service__media video{ opacity:1; }
.service__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(12,12,17,.92), rgba(12,12,17,.1) 55%, transparent); }
.service:nth-child(even) .service__media::after{ background:linear-gradient(270deg, rgba(12,12,17,.92), rgba(12,12,17,.1) 55%, transparent); }
.service__body{
  flex:1 1 54%; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,3.6vw,60px); gap:2px;
}
.service__num{ position:static; font-family:var(--font-ui); font-size:13px; font-weight:600; letter-spacing:.14em; color:var(--acc); padding:0; margin-bottom:18px; }
.service__icon{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center; margin-bottom:24px;
  color:var(--acc); border:1px solid color-mix(in srgb, var(--acc) 38%, transparent);
  background:radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--acc) 20%, transparent), transparent 70%);
  box-shadow:0 0 34px -8px color-mix(in srgb, var(--acc) 60%, transparent), inset 0 0 18px -10px var(--acc);
}
.service__icon svg{ width:26px; height:26px; }
.service__body h3{
  display:block; font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.2vw,44px);
  line-height:1.04; letter-spacing:-.015em; margin-bottom:16px; color:var(--ivory);
}
.service__body h3::after{ content:none; }
.service:hover .service__body h3{ color:var(--ivory); }
.service__body p{ color:var(--muted); max-width:46ch; font-size:clamp(14.5px,1.2vw,16.5px); }
.service__tag{
  display:inline-block; margin-top:22px; padding:7px 14px; border-radius:6px; width:max-content;
  font-family:var(--font-ui); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--acc); border:1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  background:color-mix(in srgb, var(--acc) 8%, transparent); opacity:1; text-align:left;
}

/* ---------- PROCESS: lit corridor + glowing glass steps ---------- */
.atmos--process{ background:radial-gradient(80% 90% at 50% 0%, rgba(14,20,40,.6), transparent 70%); }
.atmos__corridor{
  background:
    linear-gradient(180deg, rgba(229,72,77,.05), transparent 30%),
    repeating-linear-gradient(90deg, transparent 0 14%, rgba(229,72,77,.04) 14% 14.4%);
  -webkit-mask-image:radial-gradient(60% 80% at 50% 30%, #000, transparent 75%);
          mask-image:radial-gradient(60% 80% at 50% 30%, #000, transparent 75%);
}
.step{ overflow:hidden; }
.step__icon{
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center; margin:18px 0 4px;
  color:var(--acc); border:1px solid color-mix(in srgb, var(--acc) 42%, transparent);
  background:radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 72%);
  box-shadow:0 0 32px -6px color-mix(in srgb, var(--acc) 60%, transparent);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.step__icon svg{ width:26px; height:26px; }
.step:hover .step__icon{ transform:translateY(-4px) scale(1.06); box-shadow:0 0 46px -4px color-mix(in srgb, var(--acc) 75%, transparent); }

/* ---------- TESTIMONIALS: spotlight stage on dark marble ---------- */
.atmos--testimonials{ background:linear-gradient(180deg, transparent, rgba(10,10,14,.4)); }
.atmos__spotlight{
  background:radial-gradient(46% 50% at 50% -6%, rgba(229,72,77,.16), rgba(229,72,77,.04) 30%, transparent 62%);
  mix-blend-mode:screen;
}
.atmos__marble{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.018' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.6 0 0 0 0 0.72 0 0 0 1.8 -0.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size:cover; opacity:.08; mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 40%);
          mask-image:linear-gradient(180deg, transparent, #000 40%);
}
.quote{ background:linear-gradient(180deg, rgba(22,21,27,.82), rgba(12,12,17,.7)); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }

/* ---------- CONTACT: golden cinematic finale ---------- */
.contact{ background:linear-gradient(180deg, transparent, rgba(22,8,10,.5) 50%, rgba(30,10,13,.7)); }
.atmos--contact{ background:radial-gradient(70% 80% at 50% 120%, rgba(229,72,77,.14), transparent 70%); }
.atmos__goldbeam{ mix-blend-mode:screen; filter:blur(2px); }
.atmos__goldbeam--1{ background:conic-gradient(from 20deg at 18% 120%, transparent, rgba(229,72,77,.22) 10%, transparent 22%); }
.atmos__goldbeam--2{ background:conic-gradient(from -10deg at 82% 120%, transparent, rgba(229,72,77,.16) 8%, transparent 20%); }
.atmos__halo{ background:radial-gradient(40% 50% at 50% 100%, rgba(229,72,77,.18), transparent 70%); filter:blur(20px); animation:fogdrift 22s ease-in-out infinite alternate; }
.contact__email{ color:var(--gold); }

/* ---------- Editorial typography polish ---------- */
.section-head__index,.manifesto__kicker,.hero__kicker{ letter-spacing:.2em; }
.hero__title,.section-head__title,.contact__title,.manifesto__text,.about__text h2{ text-shadow:0 4px 40px rgba(0,0,0,.4); }

/* ---------- Responsive: slabs stack ---------- */
@media (max-width:860px){
  .service,.service:nth-child(even){ flex-direction:column; min-height:0; }
  .service__media{ flex:none; width:100%; aspect-ratio:16/9; }
  .service__media::after,.service:nth-child(even) .service__media::after{ background:linear-gradient(0deg, rgba(12,12,17,.92), transparent 70%); }
  .service__body{ padding:28px 26px 34px; }
}

/* ---------- Reduced motion (cinematic layer) ---------- */
@media (prefers-reduced-motion:reduce){
  .hero__dust,.atmos__fog,.atmos__halo,.scroll-rail i::after,.scroll-rail__chev{ animation:none !important; }
  .atmos > *{ transform:none !important; }
}

/* ============================================================
   ✦ EDITORIAL HERO + NAV PILL (reference-matched)
   ============================================================ */

/* ---- Floating nav pill ---- */
.nav{ position:fixed; top:0; left:0; width:100%; z-index:1000; display:block; padding:18px var(--gut) 0; background:none; backdrop-filter:none; border:none; transition:padding .4s var(--ease); }
.nav.scrolled{ padding:10px var(--gut) 0; background:none; backdrop-filter:none; border-bottom:none; }
.nav__bar{
  max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:clamp(16px,2.5vw,30px);
  padding:12px 12px 12px clamp(20px,2vw,28px); border:1px solid var(--line);
  border-radius:10px; background:rgba(12,12,17,.55); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 20px 60px -40px rgba(0,0,0,.9); transition:background .4s, border-color .4s;
}
.nav.scrolled .nav__bar{ background:rgba(9,9,13,.82); border-color:rgba(244,241,234,.14); }
.nav__logo{ display:flex; align-items:center; gap:.45em; font-family:var(--font-display); font-size:21px; letter-spacing:.02em; padding-right:clamp(16px,2vw,26px); border-right:1px solid var(--line); }
.nav__logo em{ color:var(--gold); font-style:italic; }
.nav__links{ flex:1; display:flex; justify-content:center; gap:clamp(18px,2.2vw,34px); }
.nav__cta{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  background:linear-gradient(100deg,#FF5F63,#E5484D 60%,#B3121F); color:#fff; border:none;
  padding:12px 20px; font-family:var(--font-ui); font-weight:600; font-size:13.5px; border-radius:6px;
  text-shadow:none; box-shadow:0 12px 30px -14px rgba(229,72,77,.7); transition:.35s var(--ease);
}
.nav__cta svg{ width:15px; height:15px; }
.nav__cta:hover{ filter:brightness(1.07); transform:translateY(-1px); background:linear-gradient(100deg,#FF5F63,#E5484D 60%,#B3121F); color:#fff; border:none; }
@media (max-width:1024px){ .nav__bar{ padding-right:8px; } }

/* ---- Hero: split editorial layout ---- */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; overflow:hidden; }
.hero__media{ position:absolute; inset:0; width:100%; height:100%; z-index:0; will-change:transform; }
.hero__video{ width:100%; height:100%; object-fit:cover; filter:brightness(.9) contrast(1.04) saturate(1.02); }
.hero__grade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,12,24,.2), rgba(10,8,10,.34)); mix-blend-mode:multiply; }
.hero__scrim{ display:none; }
.hero__media-fade{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,8,9,.94) 0%, rgba(10,8,9,.74) 28%, rgba(10,8,9,.34) 56%, rgba(10,8,9,.2) 82%),
    linear-gradient(0deg, #0A0808 0%, rgba(10,8,9,.78) 12%, rgba(10,8,9,.2) 30%, transparent 44%),
    linear-gradient(180deg, rgba(10,8,9,.72) 0%, rgba(10,8,9,.2) 14%, transparent 30%);
}
.hero__inner{
  position:relative; z-index:2; flex:1; width:100%; max-width:var(--maxw); margin:0 auto;
  padding:clamp(104px,12.5vh,148px) var(--gut) clamp(22px,3vh,34px);
  display:flex; flex-direction:column;
}
.hero__content{ flex:1; display:flex; flex-direction:column; justify-content:center; max-width:660px; padding:0; }
.hero__title{ font-size:clamp(40px,6.6vw,94px); line-height:.97; }
.hero__sub{ margin-top:22px; max-width:470px; }
.hero__actions{ margin-top:28px; }
.btn svg{ width:18px; height:18px; }
.btn--gold{ background:linear-gradient(100deg,#FF5F63,#E5484D 58%,#B3121F); color:#fff; border:none; box-shadow:0 16px 40px -16px rgba(229,72,77,.6); }
.btn--gold:hover{ filter:brightness(1.06); transform:translateY(-2px); background:linear-gradient(100deg,#FF5F63,#E5484D 58%,#B3121F); color:#fff; }
.btn--ghost svg{ width:20px; height:20px; }

/* Featured-in + stats */
.hero__proof{
  position:relative; margin-top:auto;
  padding:0 clamp(16px,2.5vw,32px); border-radius:8px;
  background:linear-gradient(180deg, rgba(10,8,9,.35), rgba(10,8,9,.72));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line-2);
}
.featured{ display:flex; flex-direction:column; align-items:center; gap:13px; padding:16px 0 18px; border-top:none; }
.featured__label{ font-family:var(--font-ui); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); opacity:.85; }
.featured__logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(22px,4.5vw,60px); }
.featured__logos span{ color:var(--ivory); opacity:.7; font-size:clamp(15px,1.55vw,21px); transition:opacity .3s; white-space:nowrap; text-shadow:0 1px 12px rgba(0,0,0,.6); }
.featured__logos span:hover{ opacity:1; }
.logo-vogue{ font-family:var(--font-display); font-weight:500; letter-spacing:.24em; }
.logo-forbes{ font-family:var(--font-display); font-weight:600; }
.logo-fast{ font-family:var(--font-display); font-weight:600; letter-spacing:.02em; }
.logo-hype{ font-family:var(--font-ui); font-weight:700; letter-spacing:.01em; }
.logo-adweek{ font-family:var(--font-ui); font-weight:700; letter-spacing:.04em; }
.logo-uncrate{ font-family:var(--font-ui); font-weight:400; letter-spacing:.08em; text-transform:lowercase; }

.hero-stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.hstat{ position:relative; display:flex; align-items:center; gap:15px; padding:18px clamp(14px,2.4vw,38px); }
.hstat:not(:last-child)::after{ content:""; position:absolute; right:0; top:26%; height:48%; width:1px; background:var(--line); }
.hstat > svg{ width:28px; height:28px; color:var(--gold); flex:0 0 auto; opacity:1; }
.hstat__num{ font-family:var(--font-display); font-size:clamp(19px,1.95vw,27px); font-weight:500; color:#FFFFFF; display:block; line-height:1.05; letter-spacing:-.01em; text-shadow:0 1px 14px rgba(0,0,0,.6); }
.hero__fx{ position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen; }
.hstat p{ font-family:var(--font-ui); font-size:12.5px; color:rgba(244,241,234,.72); margin-top:6px; letter-spacing:.03em; }

/* Scroll rail chevron */
.scroll-rail{ gap:12px; }
.scroll-rail__chev{ width:18px; height:18px; color:var(--muted); animation:chevbob 2s ease-in-out infinite; }
@keyframes chevbob{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(4px); opacity:1; } }

/* ---- Work: full-width feature + balanced spans ---- */
.work-item.span-12{ grid-column:span 12; }
.work-item__media.ar-21x9{ aspect-ratio:21/9; }
.work-item.feature .work-item__meta h3{ font-size:clamp(24px,2.8vw,38px); }

/* ---- Hero responsive ---- */
@media (max-width:1024px){
  .hero__media{ width:100%; }
  .hero__media-fade{ background:
    linear-gradient(90deg, #0A0808 0%, rgba(10,8,9,.85) 30%, rgba(10,8,9,.35) 70%, rgba(10,8,9,.4)),
    linear-gradient(0deg, #0A0808 4%, transparent 40%); }
  .hero__content{ max-width:100%; }
}
@media (max-width:760px){
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
  .hstat:nth-child(2)::after{ display:none; }
  .featured__logos{ gap:18px 28px; }
  .hero__title{ font-size:clamp(40px,11vw,68px); }
}
@media (prefers-reduced-motion:reduce){ .scroll-rail__chev{ animation:none !important; } }

/* ============================================================
   ✦ MANIFESTO — refined editorial statement
   ============================================================ */
.manifesto{ padding:clamp(120px,20vh,240px) var(--gut); }
.atmos--manifesto{ background:radial-gradient(78% 70% at 50% 46%, rgba(16,22,46,.8), transparent 72%); }
/* cooler, cleaner fog (less muddy brown) */
.manifesto .atmos__fog{
  background:radial-gradient(46% 40% at 32% 34%, rgba(36,46,86,.5), transparent 70%),
             radial-gradient(44% 38% at 72% 68%, rgba(22,30,60,.42), transparent 70%);
}
.manifesto .atmos__veins{ opacity:.12; }

.manifesto__inner{ position:relative; z-index:2; max-width:1080px; margin:0 auto; text-align:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:16px; margin-bottom:clamp(30px,4vw,46px); }
.eyebrow i{ display:block; width:clamp(28px,6vw,72px); height:1px; background:linear-gradient(90deg, transparent, rgba(229,72,77,.7)); }
.eyebrow i:last-child{ background:linear-gradient(90deg, rgba(229,72,77,.7), transparent); }
.eyebrow span{ font-family:var(--font-ui); font-size:12px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }

.manifesto__text{
  font-family:var(--font-display); font-weight:330; font-size:clamp(34px,5.6vw,78px);
  line-height:1.06; letter-spacing:-.022em; color:var(--ivory);
}
.manifesto__text .ln{ display:block; }
.manifesto__text em{ font-style:italic; color:var(--gold); }

.manifesto__say{
  margin-top:clamp(22px,3vw,38px); font-family:var(--font-display); font-weight:330;
  font-size:clamp(19px,2.3vw,30px); line-height:1.34; color:var(--muted); letter-spacing:-.005em;
}
.manifesto__say .ln{ display:block; }
.manifesto__say b{ color:var(--gold); font-weight:500; font-style:italic; }

.manifesto__cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:clamp(38px,4.5vw,58px);
  font-family:var(--font-ui); font-size:14px; letter-spacing:.02em; color:var(--ivory);
  padding:14px 28px; border:1px solid var(--line); border-radius:6px; transition:.4s var(--ease);
}
.manifesto__cta svg{ width:16px; height:16px; transition:transform .4s var(--ease); }
.manifesto__cta:hover{ border-color:var(--gold); color:var(--gold); background:rgba(229,72,77,.06); }
.manifesto__cta:hover svg{ transform:translateX(5px); }

/* line-reveal initial state (in case JS sets it; harmless default visible) */
@media (prefers-reduced-motion:reduce){ .manifesto__text .ln,.manifesto__say .ln{ opacity:1 !important; transform:none !important; } }

/* ============================================================
   ✦ WORK AS CENTERPIECE — cinematic showcase
   ============================================================ */
.work{ position:relative; isolation:isolate; padding-bottom:clamp(40px,6vh,90px); }
.work::before{
  content:""; position:absolute; top:0; left:0; right:0; height:420px; z-index:0; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%, rgba(229,72,77,.07), transparent 72%);
}
.work > *{ position:relative; z-index:1; }

/* Bigger editorial header for the hero asset */
.work .section-head__index{ font-size:13px; }
.work .section-head__title{ font-size:clamp(46px,8.5vw,128px); line-height:.94; letter-spacing:-.03em; }
.work .section-head__lead{ font-size:clamp(15px,1.5vw,19px); }

/* Tighter, more deliberate grid rhythm */
.work__grid{ gap:clamp(16px,2.2vw,30px) clamp(16px,2vw,28px); padding-top:clamp(40px,6vw,70px); }

/* Each tile becomes a self-contained cinematic poster */
.work-item{ position:relative; }
.work-item__media{ border-radius:8px; }
.work-item__media::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,8,9,.05) 0%, transparent 38%, rgba(10,8,9,.35) 68%, rgba(10,8,9,.9) 100%);
  opacity:.9; transition:opacity .5s var(--ease);
}
.work-item:hover .work-item__media::before{ opacity:1; }
.work-item__media img{ filter:saturate(.78) brightness(.9); transition:transform 1.2s var(--ease), filter .6s var(--ease); transform:scale(1.04); }
.work-item:hover .work-item__media img{ transform:scale(1.09); filter:saturate(1.05) brightness(1); }

/* Title overlaid on the poster (streaming-platform feel) */
.work-item__meta{
  position:absolute; left:0; right:0; bottom:0; z-index:3; margin:0; padding:clamp(18px,2vw,32px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  border-bottom:none; transform:translateY(8px); opacity:.92;
  transition:transform .55s var(--ease), opacity .55s var(--ease);
}
.work-item:hover .work-item__meta{ transform:translateY(0); opacity:1; }
.work-item__meta h3{ color:#fff; font-size:clamp(19px,2.2vw,30px); text-shadow:0 2px 24px rgba(0,0,0,.7); }
.work-item__meta span{ color:rgba(244,241,234,.78); text-align:right; text-shadow:0 1px 16px rgba(0,0,0,.8); }

/* "View case" cue, top-right */
.work-item__play{ top:16px; right:16px; bottom:auto; left:auto; }

/* Full-bleed immersive feature (Coco Bay) */
.work-item.feature{ grid-column:1 / -1; width:100vw; margin-left:calc(50% - 50vw); }
.work-item.feature .work-item__media{ border-radius:0; border-left:none; border-right:none; }
.work-item.feature .work-item__meta{ padding:clamp(28px,4vw,64px) clamp(20px,5vw,90px); }
.work-item.feature .work-item__meta h3{ font-size:clamp(30px,4.6vw,66px); letter-spacing:-.02em; }
.work-item.feature .work-item__meta span{ font-size:clamp(13px,1.2vw,16px); }

@media (max-width:760px){
  .work-item.feature{ width:100%; margin-left:0; }
  .work-item.feature .work-item__media{ border-radius:8px; }
}

/* ============================================================
   ✦ REAL ASSET ENVIRONMENTS (generated stills)
   ============================================================ */
/* Studio / About — edit-suite still */
.about__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Testimonials — black marble spotlight stage as the room */
.atmos--testimonials{
  background:
    linear-gradient(180deg, rgba(10,8,9,.78) 0%, rgba(10,8,9,.62) 45%, rgba(10,8,9,.9) 100%),
    url("../assets/testimonials.jpg") center 30%/cover no-repeat;
}
.testimonials .atmos__marble{ opacity:.03; }

/* Contact — golden architectural interior finale */
.atmos--contact{
  background:
    linear-gradient(180deg, rgba(10,8,9,.62) 0%, rgba(18,7,9,.78) 60%, rgba(22,8,10,.9) 100%),
    url("../assets/contact.jpg") center/cover no-repeat;
}

/* Placeholder testimonial cards (awaiting real quotes) */
.quote--empty{ border-style:dashed; border-color:color-mix(in srgb, var(--acc) 28%, var(--line)); background:linear-gradient(180deg, rgba(20,20,26,.5), rgba(12,12,17,.4)); }
.quote--empty blockquote{ color:var(--muted); font-style:italic; }
.quote--empty .quote__avatar{ background:transparent; color:var(--acc); border:1px dashed color-mix(in srgb, var(--acc) 50%, transparent); font-weight:400; }
.quote--empty .quote__who strong{ color:var(--muted); }
.quote--empty .quote__who span{ color:var(--muted-2); }

/* ============================================================
   ✦ FINAL POLISH — duotone ignite, hidden sections, mobile perf
   ============================================================ */
[hidden]{ display:none !important; }

/* Work tiles rest in a moody dark-gold duotone, ignite to full colour on hover */
.work-item__media img{
  filter:grayscale(1) contrast(1.12) brightness(.85);
  transition:transform 1.2s var(--ease), filter .7s var(--ease);
}
.work-item:hover .work-item__media img{
  filter:grayscale(0) saturate(1.1) brightness(1) contrast(1.03);
}
/* videos always play in full colour — the "ignite" payoff */
.work-item__media video{ filter:none; }

/* mobile: drop heavy atmosphere layers */
@media (max-width:760px), (hover:none){
  .hero__dust,.hero__fx{ display:none !important; }
  .work-item__media img{ filter:saturate(.95) brightness(.92); } /* lighter grade, no hover on touch */
}

/* ============================================================
   ✦✦ PAPER & CRIMSON — the UX redesign layer
   Dark cinematic hero + footer · warm paper body · crimson accent
   ============================================================ */
:root{
  --paper:      #F6F3ED;
  --paper-soft: #EFEBE2;
  --card:       #FFFFFF;
  --ink:        #16130F;
  --ink-2:      #55504A;
  --ink-3:      #8A847B;
  --hairline:   rgba(22,19,15,.14);
  --hairline-2: rgba(22,19,15,.08);
  --crimson:    #C1121F;
  --crimson-hi: #E5484D;
}

/* --- Kill the global dark field & vignette; page base becomes paper --- */
body{ background:var(--paper); }
body::before, body::after{ display:none; }
.vignette{ display:none; }
.grain{ opacity:.035; }

/* ============ HERO — calm, minimal, readable ============ */
.hero{ background:#0C0A0A; }
.hero__media{ width:100%; inset:0; }
.hero__video{ filter:brightness(.85) contrast(1.05) saturate(1.02); }
.hero__grade{ background:linear-gradient(180deg, rgba(10,8,9,.35), rgba(10,8,9,.25)); }
.hero__media-fade{
  background:
    linear-gradient(0deg, rgba(10,8,9,.88) 0%, rgba(10,8,9,.35) 26%, transparent 48%),
    linear-gradient(180deg, rgba(10,8,9,.55) 0%, transparent 26%),
    linear-gradient(90deg, rgba(10,8,9,.5) 0%, transparent 55%);
}
.hero__inner{ padding:clamp(104px,12vh,150px) var(--gut) clamp(56px,9vh,96px); }
.hero__content{ max-width:900px; justify-content:flex-end; }
.hero__title{ font-size:clamp(46px,8vw,116px); line-height:.97; text-shadow:0 4px 50px rgba(0,0,0,.55); }
.hero__title em{ color:var(--crimson-hi); }
.hero__sub{
  margin-top:24px; max-width:none; font-family:var(--font-ui);
  font-size:clamp(15px,1.5vw,19px); color:rgba(246,242,233,.85); text-shadow:0 1px 18px rgba(0,0,0,.6);
}
.hero__actions{ margin-top:34px; align-items:center; }
.hero__link{
  display:inline-flex; align-items:center; gap:9px; margin-left:8px;
  font-family:var(--font-ui); font-size:15px; color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.6);
  border-bottom:1px solid rgba(246,242,233,.4); padding-bottom:3px; transition:.3s;
}
.hero__link svg{ width:16px; height:16px; }
.hero__link:hover{ color:var(--crimson-hi); border-color:var(--crimson-hi); }
.scroll-rail span{ color:rgba(246,242,233,.6); }
.scroll-rail i{ background:rgba(246,242,233,.25); }

/* ============ LIGHT BODY SECTIONS ============ */
.manifesto,.work,.services,.process,.about,.contact{
  background:var(--paper); color:var(--ink);
}
/* hide all dark-tuned atmospheres & seams in the paper body */
.manifesto .atmos,.services .atmos,.process .atmos,.contact .atmos,
.manifesto::before,.services::before,.process::before,.testimonials::before,.contact::before,
.work::before{ display:none; }

/* typography on paper */
.section-head__index{ color:var(--crimson); }
.section-head__title{ color:var(--ink); text-shadow:none; }
.section-head__lead{ color:var(--ink-2); }

/* ---- Manifesto: pure editorial on paper ---- */
.manifesto{ background:var(--paper-soft); }
.eyebrow span{ color:var(--crimson); }
.eyebrow i{ background:linear-gradient(90deg, transparent, rgba(193,18,31,.6)); }
.eyebrow i:last-child{ background:linear-gradient(90deg, rgba(193,18,31,.6), transparent); }
.manifesto__text{ color:var(--ink); text-shadow:none; }
.manifesto__text em{ color:var(--crimson); }
.manifesto__say{ color:var(--ink-2); }
.manifesto__say b{ color:var(--crimson); }
.manifesto__cta{ border-color:var(--hairline); color:var(--ink); }
.manifesto__cta:hover{ border-color:var(--crimson); color:var(--crimson); background:rgba(193,18,31,.05); }

/* ---- Work: gallery wall ---- */
.work .section-head__title{ font-size:clamp(40px,6.5vw,96px); }
.work__grid{ gap:clamp(44px,5.5vw,72px) clamp(20px,2.6vw,36px); }
.work-item__media{
  border:none; border-radius:4px; background:var(--paper-soft);
  box-shadow:0 24px 60px -30px rgba(22,19,15,.35);
}
.work-item__media.ar-4x5{ aspect-ratio:4/5; }
.work-item__media::before{ display:none; }             /* no dark overlay on films */
.work-item__media img{ filter:none; transform:scale(1.01); }   /* full colour, always */
.work-item:hover .work-item__media img{ filter:none; transform:scale(1.05); }
/* meta returns BELOW the film — never on top of it */
.work-item__meta{
  position:static; transform:none; opacity:1; padding:16px 2px 0;
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-bottom:none;
}
.work-item__meta h3{ color:var(--ink); font-size:clamp(18px,1.8vw,24px); text-shadow:none; }
.work-item__meta span{ color:var(--ink-3); text-shadow:none; font-size:12.5px; }
.work-item.feature .work-item__meta{ padding:18px 2px 0; }
.work-item.feature .work-item__meta h3{ font-size:clamp(22px,2.4vw,32px); }
.work-item.feature{ width:100%; margin-left:0; }        /* no more full-bleed breakout */
.work-item.feature .work-item__media{ border-radius:4px; }
.work-item__play{ background:var(--crimson); color:#fff; }

/* ---- Services: white cards, hairline frames ---- */
.service{
  background:var(--card); border:1px solid var(--hairline-2);
  box-shadow:0 18px 44px -28px rgba(22,19,15,.25);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.service:hover{
  background:var(--card); border-color:var(--hairline);
  box-shadow:0 30px 60px -30px rgba(22,19,15,.35); transform:translateY(-6px);
}
.service__media::after{ background:linear-gradient(90deg, rgba(255,255,255,.0), transparent 40%); }
.service:nth-child(even) .service__media::after{ background:linear-gradient(270deg, rgba(255,255,255,.0), transparent 40%); }
.service__media img{ filter:none; }
.service__body h3{ color:var(--ink); }
.service__body p{ color:var(--ink-2); }
.service__num{ color:var(--crimson); }
.service__icon{
  color:var(--crimson); border:1px solid rgba(193,18,31,.3);
  background:rgba(193,18,31,.06); box-shadow:none;
}
.service__tag{ color:var(--ink-2); border-color:var(--hairline); background:transparent; }
.service:nth-child(1),.service:nth-child(2),.service:nth-child(3),.service:nth-child(4){ --acc:var(--crimson); }

/* ---- Process: light steps ---- */
.step{
  background:var(--card); border:1px solid var(--hairline-2);
  box-shadow:0 16px 40px -28px rgba(22,19,15,.22);
}
.step::before{ background:var(--crimson); }
.step:hover{ box-shadow:0 26px 50px -26px rgba(22,19,15,.3); border-color:var(--hairline); }
.step:nth-child(1),.step:nth-child(2),.step:nth-child(3),.step:nth-child(4){ --acc:var(--crimson); }
.step__num{ color:var(--crimson); background:rgba(193,18,31,.08); }
.step__icon{ color:var(--crimson); border-color:rgba(193,18,31,.3); background:rgba(193,18,31,.05); box-shadow:none; }
.step h3{ color:var(--ink); }
.step p{ color:var(--ink-2); }
.stats .stat{ border-left:2px solid rgba(193,18,31,.4); }
.stat:nth-child(1),.stat:nth-child(2),.stat:nth-child(3),.stat:nth-child(4){ --acc:var(--crimson); }
.stat__num{ color:var(--crimson); }
.stat p{ color:var(--ink-2); }

/* ---- About / Studio ---- */
.about__text h2{ color:var(--ink); text-shadow:none; }
.about__text p{ color:var(--ink-2); }
.about__media{ border:none; box-shadow:0 24px 60px -30px rgba(22,19,15,.35); }
.about .btn--ghost{ border-color:var(--hairline); color:var(--ink); }
.about .btn--ghost:hover{ border-color:var(--crimson); color:var(--crimson); }

/* ---- Contact: bright finale ---- */
.contact{ background:var(--paper-soft); border-top:1px solid var(--hairline-2); }
.contact__title{ color:var(--ink); text-shadow:none; }
.contact__title em{ color:var(--crimson); }
.contact__head p{ color:var(--ink-2); }
.contact__email{ color:var(--crimson); border-bottom-color:rgba(193,18,31,.35); }
.contact__email:hover{ border-color:var(--crimson); }
.field label{ color:var(--ink-3); }
.field input,.field select,.field textarea{ color:var(--ink); border-bottom:1px solid var(--hairline); }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-3); }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--crimson); }
.field select option{ background:#fff; color:var(--ink); }
.form-status{ color:var(--crimson); }

/* buttons on paper */
.btn--solid{ background:var(--crimson); color:#fff; }
.btn--solid:hover{ background:var(--crimson-hi); color:#fff; transform:translateY(-2px); }

/* ---- Footer stays cinema-dark ---- */
.footer{ background:#0C0A0A; border-top:none; padding-top:clamp(60px,8vh,90px); }

/* selection on paper */
::selection{ background:var(--crimson); color:#fff; }

/* mobile tweak for the light work grid */
@media (max-width:760px){
  .work-item__media.ar-9x16{ aspect-ratio:4/5; }
  .work-item__media img{ filter:none; }
}

/* ============================================================
   ✦ REVIEWS — realistic client review cards (paper theme)
   ============================================================ */
.reviews{
  position:relative; background:var(--paper); color:var(--ink);
  padding-bottom:clamp(90px,12vh,150px);
}
.reviews__grid{
  max-width:var(--maxw); margin:56px auto 0; padding:0 var(--gut);
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.2vw,28px);
}
.review-card{
  background:var(--card); border:1px solid var(--hairline-2); border-radius:8px;
  padding:26px 28px 28px;
  box-shadow:0 14px 36px -26px rgba(22,19,15,.28);
  transition:box-shadow .4s var(--ease), transform .4s var(--ease);
}
.review-card:hover{ transform:translateY(-3px); box-shadow:0 24px 48px -26px rgba(22,19,15,.34); }
.review-card__head{ display:flex; align-items:center; gap:14px; }
.review-card__avatar{
  width:46px; height:46px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  border:1px solid var(--hairline-2);
}
.review-card__who{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.review-card__who strong{ font-family:var(--font-ui); font-weight:600; font-size:15px; color:var(--ink); }
.review-card__who span{ font-family:var(--font-ui); font-size:12.5px; color:var(--ink-3); }
.review-card__date{ margin-left:auto; font-family:var(--font-ui); font-size:12px; color:var(--ink-3); white-space:nowrap; align-self:flex-start; padding-top:3px; }
.review-card__stars{
  margin:16px 0 10px; font-size:15px; letter-spacing:3px; color:#E8A33D;
}
.review-card p{
  font-size:15px; line-height:1.65; color:var(--ink-2); margin:0;
}
@media (max-width:860px){
  .reviews__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   ✦ RHYTHM PASS — tighter vertical spacing across all sections
   ============================================================ */
.section-head{ padding-top:clamp(56px,8vh,96px); }
.section-head__index{ margin-bottom:14px; }
.section-head__lead{ margin-top:14px; }

.manifesto{ padding-top:clamp(70px,10vh,120px); padding-bottom:clamp(70px,10vh,120px); }
.eyebrow{ margin-bottom:clamp(20px,2.6vw,30px); }
.manifesto__say{ margin-top:clamp(16px,2vw,26px); }
.manifesto__cta{ margin-top:clamp(26px,3vw,40px); }

.work__grid{ padding-top:clamp(26px,3.2vw,44px); gap:clamp(34px,4vw,52px) clamp(20px,2.6vw,36px); }
.work{ padding-bottom:clamp(30px,4vh,60px); }

.services__list{ margin-top:32px; }

.process__steps{ margin-top:34px; }
.stats{ margin-top:clamp(44px,6vh,70px); }

.about{ padding-top:clamp(70px,10vh,120px); padding-bottom:clamp(70px,10vh,120px); }

.reviews__grid{ margin-top:34px; }
.reviews{ padding-bottom:clamp(60px,8vh,100px); }

.contact{ padding-top:clamp(70px,10vh,120px); padding-bottom:clamp(70px,10vh,120px); }
.contact__head p{ margin-top:18px; }
.contact__email{ margin-top:16px; }

/* Cursor fix: the difference blend turned it teal on paper — solid crimson instead */
.cursor{ mix-blend-mode:normal; background:var(--crimson-hi); opacity:.85; }
.cursor.is-hover{ background:var(--crimson-hi); opacity:1; }

/* ============================================================
   ✦ FEATURED WORK (homepage) + WORK PAGE
   ============================================================ */
/* ---- Featured section ---- */
.featured{ position:relative; background:var(--paper); color:var(--ink); }
.featured__rails{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(26px,3.2vw,44px) var(--gut) 0;
  display:flex; flex-direction:column; gap:clamp(36px,4.5vw,56px);
}
.featured__cta{
  display:flex; flex-direction:column; align-items:center; gap:0;
  padding:clamp(36px,5vw,60px) var(--gut) clamp(56px,8vh,90px);
}
.featured .work-item.feature{ width:100%; margin-left:0; }

/* ---- Nav active page link ---- */
.nav__links a.is-active{ color:var(--fg); }
.nav__links a.is-active::after{ width:100%; }

/* ---- Work page ---- */
.workpage .section-head{ padding-top:clamp(120px,15vh,170px); }
.workpage .section-head__title{ font-size:clamp(42px,7vw,104px); }

.work-filter{
  max-width:var(--maxw); margin:clamp(26px,3.4vw,44px) auto 0; padding:0 var(--gut);
  display:flex; flex-wrap:wrap; gap:10px;
}
.fbtn{
  font-family:var(--font-ui); font-size:14px; font-weight:500; letter-spacing:.02em;
  padding:11px 22px; border-radius:6px; cursor:pointer;
  background:transparent; color:var(--ink-2); border:1px solid var(--hairline);
  transition:.35s var(--ease);
}
.fbtn:hover{ border-color:var(--crimson); color:var(--crimson); }
.fbtn.is-active{ background:var(--crimson); border-color:var(--crimson); color:#fff; }

.workpage .work__grid{ padding-top:clamp(30px,3.6vw,48px); }

.workpage__cta{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:clamp(50px,7vw,80px) var(--gut) clamp(70px,9vh,110px); text-align:center;
}
.workpage__cta p{
  font-family:var(--font-display); font-weight:340; font-size:clamp(22px,2.6vw,34px);
  color:var(--ink); letter-spacing:-.01em;
}

/* ============================================================
   ✦ TYPE SYSTEM v2 — Clash Display (primary) + Satoshi (secondary)
   Clash ships 400–700 and no italics: weights up, italics off,
   accents carried by colour instead of slant.
   ============================================================ */
/* Display headlines: poster weight, tight tracking */
.hero__title,
.section-head__title,
.manifesto__text,
.contact__title,
.about__text h2{
  font-weight:600; letter-spacing:-.025em;
}
.workpage__cta p,
.manifesto__say{ font-weight:500; }

/* Sub-headlines and card titles */
.service__body h3,
.step h3,
.work-item__meta h3,
.footer__logo,
.nav__logo{ font-weight:500; }

/* Kill faux-italics everywhere the old serif slanted (colour is the accent now) */
.hero__title em,
.contact__title em,
.manifesto__text em,
.manifesto__say b,
.nav__logo em,
.footer__logo em,
.preloader__brand span{ font-style:normal; }

/* Numbers & stats in display font read better slightly tighter */
.stat__num{ font-weight:600; letter-spacing:-.02em; }

/* Satoshi small-label polish */
.section-head__index,
.eyebrow span,
.featured__label{ font-weight:500; }
.hero__sub{ font-weight:400; }

/* ============================================================
   ✦ CLIENTS — "worked with" logo marquee beneath the hero
   ============================================================ */
.clients{
  position:relative; background:var(--paper); color:var(--ink);
  padding:clamp(30px,4.5vh,48px) 0 clamp(26px,4vh,44px);
  border-bottom:1px solid var(--hairline-2);
}
.clients__label{
  display:block; text-align:center; margin-bottom:clamp(18px,2.6vw,28px);
  font-family:var(--font-ui); font-size:11.5px; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-3);
}
.clients__marquee{
  overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.clients__track{
  display:flex; align-items:center; gap:clamp(48px,7vw,110px);
  width:max-content; padding:0 clamp(24px,3.5vw,55px);
  animation:clientscroll 30s linear infinite;
}
.clients__marquee:hover .clients__track{ animation-play-state:paused; }
@keyframes clientscroll{ to{ transform:translateX(-50%); } }
.clients__track img{
  width:clamp(110px,13vw,160px); height:46px; object-fit:contain; flex:0 0 auto;
  transition:transform .4s var(--ease);
}
.clients__track img:hover{ transform:scale(1.1); }
@media (prefers-reduced-motion:reduce){
  .clients__track{ animation:none; flex-wrap:wrap; justify-content:center; width:100%; }
  .clients__track img:nth-child(n+5){ display:none; }
}

/* ============================================================
   ✦ STAT BAR — dark cinema strip beneath the client logos
   ============================================================ */
.statbar{
  background:var(--paper); padding:clamp(6px,1.2vh,14px) var(--gut);
}
.statbar .hero-stats{
  max-width:var(--maxw); margin:0 auto;
  border-top:1px solid var(--hairline-2); border-bottom:1px solid var(--hairline-2);
}
.statbar .hstat{ padding:clamp(20px,2.6vh,30px) clamp(14px,2.4vw,38px); }
.statbar .hstat > svg{ color:var(--crimson); }
.statbar .hstat__num{ color:var(--ink); font-weight:600; letter-spacing:-.01em; text-shadow:none; }
.statbar .hstat p{ color:var(--ink-2); }
.statbar .hstat:not(:last-child)::after{ background:var(--hairline); }
@media (max-width:760px){
  .statbar .hero-stats{ grid-template-columns:repeat(2,1fr); }
  .statbar .hstat:nth-child(2)::after{ display:none; }
}

/* ============================================================
   ✦ FEATURED v2 — split editorial layout (mockup match)
   ============================================================ */
.featured{ padding-bottom:clamp(56px,8vh,96px); }

/* top bar */
.featured__topbar{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(48px,7vh,84px) var(--gut) 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.featured__eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-ui); font-size:13px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--crimson);
}
.featured__eyebrow i{ width:14px; height:14px; border-radius:50%; background:var(--crimson); }
.featured__topright{ display:flex; align-items:center; gap:clamp(18px,3vw,44px); }
.featured__topright > span{ font-family:var(--font-ui); font-size:14px; color:var(--ink-2); }
.featured__aboutlink{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-ui); font-size:12.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--crimson); transition:.3s;
}
.featured__aboutlink .circ{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(193,18,31,.4); color:var(--crimson); transition:.35s var(--ease);
}
.featured__aboutlink .circ svg{ width:14px; height:14px; }
.featured__aboutlink:hover .circ{ background:var(--crimson); color:#fff; }

/* layout */
.featured__layout{
  position:relative; max-width:var(--maxw); margin:0 auto;
  padding:clamp(30px,4.5vh,56px) var(--gut) 0;
  display:grid; grid-template-columns:minmax(280px,.9fr) 2fr; gap:clamp(30px,4.5vw,70px);
  align-items:start;
}

/* left column */
.featured__left{ position:sticky; top:120px; display:flex; flex-direction:column; align-items:flex-start; }
.featured__title{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.025em;
  font-size:clamp(52px,6.4vw,104px); line-height:.98; color:var(--ink);
}
.featured__title span,.featured__title em{ display:block; }
.featured__title em{ color:var(--crimson); font-style:normal; font-weight:500; }
.featured__dash{ display:block; width:58px; height:2px; background:var(--crimson); margin:clamp(22px,3vh,34px) 0; }
.featured__lead{
  font-family:var(--font-ui); font-size:clamp(15px,1.35vw,17.5px); line-height:1.7;
  color:var(--ink-2); margin-bottom:clamp(28px,4vh,42px);
}

/* right tiles */
.featured__right{ display:flex; flex-direction:column; gap:clamp(22px,2.8vw,36px); min-width:0; }
.feat-tile .work-item__media{ border-radius:6px; }
.feat-tile .work-item__media::before{
  display:block; content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,8,9,.16), transparent 30%, transparent 55%, rgba(10,8,9,.68));
}
.feat-tile__num{
  position:absolute; top:20px; left:22px; z-index:3;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-ui); font-size:14px; font-weight:600; color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.feat-tile__num i{ display:block; width:30px; height:1px; background:rgba(255,255,255,.65); }
.feat-tile__info{
  position:absolute; left:22px; bottom:20px; z-index:3;
  display:flex; align-items:baseline; gap:18px;
}
.feat-tile__info h3{
  font-family:var(--font-display); font-weight:500; letter-spacing:.01em;
  font-size:clamp(26px,3.2vw,44px); color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.55);
}
.feat-tile__info > span{
  font-family:var(--font-ui); font-size:clamp(12px,1.05vw,14px); line-height:1.45;
  color:rgba(246,242,233,.85); text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.feat-tile__view{
  position:absolute; right:22px; bottom:20px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-ui); font-size:12px; color:rgba(246,242,233,.9);
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.feat-tile__view .circ{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(246,243,237,.92); color:var(--ink); transition:.35s var(--ease);
}
.feat-tile__view .circ svg{ width:16px; height:16px; }
.feat-tile:hover .feat-tile__view .circ{ background:var(--crimson); color:#fff; transform:scale(1.08); }

/* pager rail */
.featured__pager{
  position:absolute; right:calc(var(--gut) * .25); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.featured__arrow{
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; background:var(--paper-soft);
  border:1px solid var(--hairline-2); color:var(--ink-2); transition:.3s var(--ease);
}
.featured__arrow svg{ width:15px; height:15px; }
.featured__arrow:hover{ background:var(--crimson); border-color:var(--crimson); color:#fff; }
.featured__count{ font-family:var(--font-ui); font-size:12.5px; color:var(--ink-3); white-space:nowrap; }
.featured__count b{ color:var(--crimson); font-weight:600; }

@media (max-width:1100px){
  .featured__layout{ grid-template-columns:1fr; }
  .featured__left{ position:static; }
  .featured__pager{ display:none; }
}
@media (max-width:760px){
  .featured__topright > span{ display:none; }
  .feat-tile .work-item__media.ar-21x9{ aspect-ratio:16/9; }
  .feat-tile__info{ gap:12px; flex-direction:column; }
}

/* ============================================================
   ✦ FEATURED v3 — title fix + vertical film carousel
   ============================================================ */
/* keep the headline inside its column (was clipping under the films) */
.featured__layout{ grid-template-columns:minmax(0,.85fr) 2.1fr; }
.featured__left{ min-width:0; }
.featured__title{ font-size:clamp(42px,4.8vw,84px); overflow-wrap:anywhere; }

/* carousel viewport: one film in frame, others staged offscreen */
.featured__right{
  position:relative; overflow:hidden; border-radius:6px;
  display:block; gap:0;
}
.feat-tile{ position:absolute; inset:0; will-change:transform; }
.feat-tile:first-child{ position:relative; }   /* defines the viewport height */
.feat-tile .work-item__media{ height:100%; }
.feat-tile:not(.is-active){ pointer-events:none; }

@media (max-width:1100px){
  .featured__pager{ display:flex; position:static; transform:none; flex-direction:row; justify-content:center; margin-top:18px; grid-column:1 / -1; }
}

/* ============================================================
   ✦ FEATURED v4 — center-focus horizontal carousel (reference match)
   Active film large and bright in the middle, neighbours peek
   on both sides, everything glides horizontally.
   ============================================================ */
.featured__right{ overflow:hidden; border-radius:0; }
.featured__track{ display:flex; align-items:center; gap:clamp(16px,2vw,28px); will-change:transform; }
.feat-tile{
  position:relative; inset:auto; flex:0 0 min(74%,780px);
  transform-origin:center center; will-change:transform,opacity;
  cursor:pointer;
}
.feat-tile:first-child{ position:relative; }
.feat-tile:not(.is-active){ pointer-events:auto; }         /* side cards are clickable to focus */
.feat-tile .work-item__media{ aspect-ratio:16/9; height:auto; }
.feat-tile:not(.is-active) .feat-tile__view{ opacity:0; }
.feat-tile__view{ transition:opacity .4s var(--ease); }

@media (max-width:1100px){
  .feat-tile{ flex-basis:82%; }
}
@media (max-width:760px){
  .feat-tile .work-item__media.ar-21x9{ aspect-ratio:16/9; }
}

/* ============================================================
   ✦ TYPE ACCENT — reference match: sans headline + red italic serif
   ============================================================ */
:root{ --font-accent:"Instrument Serif", Georgia, serif; }

/* Featured title: clean grotesque "Featured", italic serif crimson "Work" */
.featured__title{
  font-family:var(--font-ui); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(38px,4.3vw,76px); line-height:1.02;
  overflow-wrap:normal; word-break:keep-all;
}
.featured__title span{ white-space:nowrap; }
.featured__title em{
  font-family:var(--font-accent); font-style:italic; font-weight:400;
  font-size:1.12em; letter-spacing:0; line-height:.9;
}

/* carry the same italic-serif accent through the site's crimson words */
.hero__title em,
.contact__title em,
.manifesto__text em{
  font-family:var(--font-accent); font-style:italic; font-weight:400;
}

/* ============================================================
   ✦ FEATURED v5 — vertical center-focus carousel (up/down glide)
   ============================================================ */
.featured__right{ aspect-ratio:5/4; }
.featured__track{ flex-direction:column; height:auto; }
.feat-tile{ flex:0 0 auto; width:100%; }
@media (max-width:1100px){
  .featured__right{ aspect-ratio:4/3.4; }
  .feat-tile{ flex-basis:auto; }
}

/* ============================================================
   ✦ FEATURED v6 — edge fade like the reference + visibility safety
   ============================================================ */
.featured__right{
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
/* carousel tiles are never hidden by scroll reveals */
.feat-tile, .feat-tile .work-item__media{ visibility:visible !important; }

/* ============================================================
   ✦ HERO TYPE v3 — mockup match: small elegant serif headline
   ============================================================ */
.hero__title{
  font-family:var(--font-accent); font-weight:400;
  font-size:clamp(34px,4.1vw,66px); line-height:1.06; letter-spacing:-.005em;
  text-shadow:0 3px 34px rgba(0,0,0,.5);
}
.hero__title i{ font-style:italic; font-weight:400; }
.hero__title em{ font-size:1em; }
.hero__sub{
  margin-top:22px; font-family:var(--font-ui); font-weight:400;
  font-size:clamp(14px,1.15vw,17px); line-height:1.55; color:rgba(246,242,233,.82);
}
.hero__actions{ margin-top:28px; gap:26px; }
.hero__actions .btn--gold{
  padding:13px 22px; font-size:13.5px; border-radius:8px;
  background:linear-gradient(100deg,#F0686C,#E5484D 70%,#D63A3F);
  box-shadow:0 14px 32px -14px rgba(229,72,77,.65);
}
.hero__actions .btn--gold svg{ width:15px; height:15px; }
.hero__link{ font-size:14px; }
.hero__link svg{ width:15px; height:15px; }

/* ============================================================
   ✦ HERO TYPE v4 — mockup match: clean grotesque headline
   ============================================================ */
.hero__title{
  font-family:var(--font-ui); font-weight:500;
  font-size:clamp(36px,4.4vw,72px); line-height:1.08; letter-spacing:-.02em;
}
.hero__title em{
  font-family:var(--font-ui); font-style:normal; font-weight:500;
  font-size:1em; color:var(--crimson-hi);
}

/* ============================================================
   ✦ REVIEWS SLIDER — coverflow: center in focus, neighbours
   scaled + blurred + half-cut off the screen edges
   ============================================================ */
.reviews__slider{
  position:relative; width:100vw; margin-left:calc(50% - 50vw);
  overflow:hidden; margin-top:clamp(30px,4vw,52px); padding:26px 0;
}
.reviews__track{
  display:flex; align-items:stretch; gap:clamp(20px,2.6vw,40px); width:max-content;
  transition:transform .85s cubic-bezier(.16,1,.3,1); will-change:transform;
}
.reviews__track .review-card{
  flex:0 0 clamp(280px,44vw,560px);
  transform:scale(.86); opacity:.4; filter:blur(5px); cursor:pointer;
  transition:transform .85s cubic-bezier(.16,1,.3,1), opacity .85s var(--ease), filter .85s var(--ease);
}
.reviews__track .review-card:hover{ transform:scale(.89); }
.reviews__track .review-card.is-active,
.reviews__track .review-card.is-active:hover{
  transform:scale(1); opacity:1; filter:blur(0); cursor:default;
  box-shadow:0 34px 74px -34px rgba(22,19,15,.42);
}

/* nav: arrows + progress dots */
.reviews__nav{ display:flex; align-items:center; justify-content:center; gap:clamp(16px,2vw,26px); margin-top:clamp(30px,3.5vw,44px); }
.reviews__arrow{
  width:46px; height:46px; border-radius:50%; cursor:pointer; flex:0 0 auto;
  display:grid; place-items:center; background:var(--card);
  border:1px solid var(--hairline); color:var(--ink); transition:.3s var(--ease);
}
.reviews__arrow svg{ width:18px; height:18px; }
.reviews__arrow:hover{ background:var(--crimson); border-color:var(--crimson); color:#fff; transform:scale(1.06); }
.reviews__dots{ display:flex; align-items:center; gap:9px; }
.reviews__dot{
  width:8px; height:8px; border-radius:50%; padding:0; cursor:pointer;
  background:var(--hairline); border:none; transition:.35s var(--ease);
}
.reviews__dot:hover{ background:var(--ink-3); }
.reviews__dot.is-active{ width:24px; border-radius:5px; background:var(--crimson); }

@media (max-width:760px){
  .reviews__track .review-card{ flex-basis:82vw; filter:blur(3px); }
}

/* ============================================================
   ✦ CRAFTS SLIDER — same coverflow as reviews, vertical cards
   ============================================================ */
.services__slider{
  position:relative; width:100vw; margin-left:calc(50% - 50vw);
  overflow:hidden; margin-top:clamp(34px,4.5vw,60px); padding:26px 0;
}
.services__track{
  display:flex; align-items:stretch; gap:clamp(20px,2.6vw,40px); width:max-content;
  transition:transform .85s cubic-bezier(.16,1,.3,1); will-change:transform;
}
/* each craft becomes a vertical card, overriding the old horizontal slab */
.services__track .service,
.services__track .service:nth-child(even){
  flex:0 0 clamp(300px,40vw,500px);
  flex-direction:column; align-items:stretch; min-height:0; padding:0;
  border-radius:10px; overflow:hidden; cursor:pointer;
  transform:scale(.86); opacity:.4; filter:blur(5px);
  transition:transform .85s cubic-bezier(.16,1,.3,1), opacity .85s var(--ease), filter .85s var(--ease);
}
.services__track .service:hover{ transform:scale(.88); }
.services__track .service.is-active,
.services__track .service.is-active:hover{
  transform:scale(1); opacity:1; filter:blur(0); cursor:default;
  box-shadow:0 34px 74px -34px rgba(22,19,15,.42);
}
.services__track .service__media{ position:relative; flex:none; width:100%; aspect-ratio:16/10; }
.services__track .service__media::after{ display:none; }
.services__track .service__body{ flex:1 1 auto; padding:clamp(26px,2.2vw,36px); justify-content:flex-start; }
.services__track .service__num{ padding-top:0; }
.services__track .service__body p{ max-width:none; }

/* nav (mirror of reviews nav) */
.services__nav{ display:flex; align-items:center; justify-content:center; gap:clamp(16px,2vw,26px); margin-top:clamp(30px,3.5vw,44px); }
.services__arrow{
  width:46px; height:46px; border-radius:50%; cursor:pointer; flex:0 0 auto;
  display:grid; place-items:center; background:var(--card);
  border:1px solid var(--hairline); color:var(--ink); transition:.3s var(--ease);
}
.services__arrow svg{ width:18px; height:18px; }
.services__arrow:hover{ background:var(--crimson); border-color:var(--crimson); color:#fff; transform:scale(1.06); }
.services__dots{ display:flex; align-items:center; gap:9px; }
.services__dot{
  width:8px; height:8px; border-radius:50%; padding:0; cursor:pointer;
  background:var(--hairline); border:none; transition:.35s var(--ease);
}
.services__dot:hover{ background:var(--ink-3); }
.services__dot.is-active{ width:24px; border-radius:5px; background:var(--crimson); }

@media (max-width:760px){
  .services__track .service,
  .services__track .service:nth-child(even){ flex-basis:82vw; filter:blur(3px); }
}

/* ============================================================
   ✦ CRAFTS SLIDER v2 — compact cards that fit the viewport
   ============================================================ */
.services__track .service,
.services__track .service:nth-child(even){ flex-basis:clamp(280px,34vw,440px); }
.services__track .service__media{ aspect-ratio:16/9; }
.services__track .service__body{ padding:clamp(22px,1.7vw,30px); }
.services__track .service__num{ margin-bottom:12px; font-size:13px; }
.services__track .service__icon{ width:42px; height:42px; margin-bottom:16px; }
.services__track .service__icon svg{ width:20px; height:20px; }
.services__track .service__body h3{
  font-size:clamp(21px,1.9vw,29px); line-height:1.06; margin-bottom:12px;
}
.services__track .service__body p{ font-size:clamp(13.5px,1vw,15px); line-height:1.55; }
.services__track .service__tag{ margin-top:16px; padding:6px 12px; font-size:11px; }
@media (max-width:760px){
  .services__track .service,
  .services__track .service:nth-child(even){ flex-basis:82vw; }
}

/* ============================================================
   ✦ CRAFTS v3 (shorter) + STUDIO image (landscape, not cropped tall)
   ============================================================ */
.services__track .service__media{ aspect-ratio:2/1; }
.services__track .service__body{ padding:clamp(18px,1.4vw,26px); }
.services__track .service__num{ margin-bottom:9px; }
.services__track .service__icon{ margin-bottom:12px; }
.services__track .service__body h3{ margin-bottom:9px; }
.services__track .service__tag{ margin-top:14px; }

/* Studio image: landscape aspect so the edit-suite shot isn't cropped tall */
.about__media{ aspect-ratio:16/10; max-height:none; align-self:center; }
@media (max-width:760px){ .about__media{ aspect-ratio:16/11; } }

/* ============================================================
   ✦ NAV — solid at top → frosted glass + shorter on scroll →
   expands back on hover. Smooth throughout.
   ============================================================ */
.nav__bar{
  background:rgba(18,16,22,.92);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:background .55s var(--ease), -webkit-backdrop-filter .55s var(--ease),
             backdrop-filter .55s var(--ease), padding .55s var(--ease),
             max-width .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease);
}
.nav.scrolled .nav__bar{
  max-width:calc(var(--maxw) - 100px);
  padding-top:8px; padding-bottom:8px;
  background:rgba(18,16,22,.58);
  -webkit-backdrop-filter:blur(26px) saturate(1.6); backdrop-filter:blur(26px) saturate(1.6);
  border-color:rgba(244,241,234,.16);
  box-shadow:0 14px 48px -22px rgba(0,0,0,.5);
}
.nav.scrolled .nav__bar:hover{
  max-width:var(--maxw);
  padding-top:12px; padding-bottom:12px;
  background:rgba(18,16,22,.94);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 20px 60px -30px rgba(0,0,0,.7);
}

/* ============================================================
   ✦ SPACING — tighten gaps between sections
   ============================================================ */
.section-head{ padding-top:clamp(40px,5vh,66px); }
.process__steps{ margin-top:22px; }
.stats{ margin-top:clamp(34px,4.5vh,54px); }
.about{ padding-top:clamp(52px,7vh,90px); padding-bottom:clamp(52px,7vh,90px); }
.manifesto{ padding-top:clamp(56px,8vh,96px); padding-bottom:clamp(56px,8vh,96px); }
.contact{ padding-top:clamp(56px,8vh,96px); padding-bottom:clamp(56px,8vh,96px); }
.services__slider,.reviews__slider{ margin-top:clamp(22px,2.6vw,36px); padding:22px 0; }
.services__nav,.reviews__nav{ margin-top:clamp(22px,2.6vw,32px); }
.featured{ padding-bottom:clamp(40px,5vh,70px); }
.statbar .hstat{ padding-top:clamp(16px,2vh,24px); padding-bottom:clamp(16px,2vh,24px); }

/* ============================================================
   ✦ SPACING v2 — restore BETWEEN-section breathing room,
   pull HEADING → CONTENT tight (fixes the in-section gap)
   ============================================================ */
/* between-section space (above each heading) — comfortable again */
.section-head{ padding-top:clamp(74px,10vh,120px); }
.about{ padding-top:clamp(74px,10vh,120px); padding-bottom:clamp(64px,9vh,110px); }
.manifesto{ padding-top:clamp(80px,11vh,130px); padding-bottom:clamp(80px,11vh,130px); }
.contact{ padding-top:clamp(80px,11vh,130px); padding-bottom:clamp(80px,11vh,130px); }

/* heading → content: tight, no more big gap under the title */
.process__steps{ margin-top:16px; }
.services__slider,.reviews__slider{ margin-top:14px; padding:16px 0; }
.services__nav,.reviews__nav{ margin-top:clamp(20px,2.4vw,30px); }
.stats{ margin-top:clamp(38px,5vh,58px); }
.section-head__lead{ margin-top:12px; }

/* ============================================================
   ✦ NAV GLASS v2 — Apple-style frosted glass when scrolled
   ============================================================ */
.nav.scrolled .nav__bar{
  max-width:calc(var(--maxw) - 100px);
  padding-top:8px; padding-bottom:8px;
  background:rgba(24,22,28,.5);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 44px -20px rgba(0,0,0,.5);
}
.nav.scrolled .nav__bar:hover{
  max-width:var(--maxw);
  padding-top:12px; padding-bottom:12px;
  background:rgba(20,18,24,.92);
  -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%);
  border-color:rgba(255,255,255,.08);
}

/* ============================================================
   ✦ RESPONSIVE — authoritative final pass (phone → TV/4K)
   Placed last so it wins over all earlier appended rules.
   ============================================================ */

/* ---------- Tablet & below: nav collapses to burger ---------- */
@media (max-width:1024px){
  .nav__links, .nav__cta{ display:none !important; }
  .nav__burger{ display:flex !important; }
  .nav__bar{ justify-content:space-between; }
  .nav.scrolled .nav__bar{ max-width:var(--maxw); }   /* no shrink on touch */
}

/* ---------- Featured split layout → stacked ---------- */
@media (max-width:1100px){
  .featured__layout{ grid-template-columns:1fr; }
  .featured__left{ position:static; }
  .featured__pager{ position:static; transform:none; flex-direction:row; justify-content:center; margin-top:20px; }
}

/* ---------- Phone ---------- */
@media (max-width:640px){
  .featured__topbar{ flex-direction:column; align-items:flex-start; gap:12px; padding-top:clamp(40px,7vh,70px); }
  .featured__topright{ width:100%; justify-content:space-between; gap:14px; }
  .feat-tile .work-item__media.ar-21x9{ aspect-ratio:16/9; }
  .feat-tile__info h3{ font-size:clamp(22px,6vw,30px); }
  .process__steps{ grid-template-columns:1fr; }
  .hero__title{ font-size:clamp(30px,8.6vw,46px); }
  .hero__inner{ padding-top:clamp(96px,13vh,130px); }
  .section-head__title{ font-size:clamp(30px,8vw,46px); }
  .manifesto__text{ font-size:clamp(28px,8vw,44px); }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:14px; }
  .featured__aboutlink{ font-size:11px; }
}

/* ---------- Large desktop ---------- */
@media (min-width:1700px){
  :root{ --maxw:1520px; }
  .reviews__track .review-card{ flex-basis:clamp(560px,32vw,720px); }
  .services__track .service,
  .services__track .service:nth-child(even){ flex-basis:clamp(440px,26vw,560px); }
}

/* ---------- TV / 4K ---------- */
@media (min-width:2400px){
  :root{ --maxw:1820px; --gut:clamp(40px,6vw,140px); }
  .hero__title{ font-size:clamp(72px,5vw,108px); }
  .reviews__track .review-card{ flex-basis:820px; }
  .services__track .service,
  .services__track .service:nth-child(even){ flex-basis:640px; }
}

/* ============================================================
   ✦ FIX: stray flex-center on .featured collapsed its width
   (leftover from the removed "As Featured In" strip)
   ============================================================ */
.featured{ display:block; }

/* manifesto eyebrow: drop flanking lines on phones so it doesn't overflow */
@media (max-width:640px){
  .eyebrow{ flex-wrap:wrap; justify-content:center; gap:0; }
  .eyebrow i{ display:none; }
  .eyebrow span{ white-space:normal; text-align:center; font-size:11px; letter-spacing:.16em; }
}

/* ============================================================
   ✦ LARGE SCREEN v2 — consistent readable width + contained
   coverflow (overrides the earlier aggressive maxw bumps)
   ============================================================ */
@media (min-width:1600px){
  :root{ --maxw:1440px; }
  /* cap the full-bleed sliders so the center-focus + peek stays proportional */
  .reviews__slider, .services__slider{ width:min(100vw,1560px); margin-left:auto; margin-right:auto; }
  .reviews__track .review-card{ flex-basis:660px; }
  .services__track .service,
  .services__track .service:nth-child(even){ flex-basis:560px; }
}
@media (min-width:2400px){ :root{ --maxw:1440px; } }

/* Craft thumbnails: slightly more zoom (+2%) */
.services__track .service__media img{ transform:scale(1.06); }
.services__track .service:hover .service__media img{ transform:scale(1.12); }

/* ============================================================
   ✦ WORK PAGE → masonry (fixes mixed-aspect gaps in filters)
   ============================================================ */
@media (min-width:761px){
  .workpage .work__grid{
    display:block; column-count:2; column-gap:clamp(20px,2.6vw,36px);
    padding-top:clamp(36px,4vw,56px);
  }
  .workpage .work__grid .work-item{
    width:100%; margin:0 0 clamp(30px,3.4vw,46px);
    break-inside:avoid; -webkit-column-break-inside:avoid;
  }
  .workpage .work__grid .work-item.feature{
    column-span:all; -webkit-column-span:all;
    width:100%; margin-left:0;
  }
  .workpage .work__grid .work-item.feature .work-item__media{
    border-radius:8px;
  }
}

/* ============================================================
   ✦ AUDIT FIXES (2026-07-09) — a11y, tap targets, contrast
   ============================================================ */

/* Hidden UI must be unfocusable: visibility flips instantly on open,
   and only after the fade finishes on close */
.lightbox{ visibility:hidden; transition:opacity .4s var(--ease), visibility 0s .4s; }
.lightbox.open{ visibility:visible; transition:opacity .4s var(--ease), visibility 0s 0s; }
.mobile-menu{ visibility:hidden; transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s; }
.mobile-menu.open{ visibility:visible; transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s 0s; }

/* Keyboard focus: visible, on-brand, only for keyboard users */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--crimson-hi); outline-offset:3px; border-radius:2px;
}
.work-item:focus-visible{ outline-offset:6px; }

/* Tap targets ≥44px: dots get an invisible extended hit area */
.reviews__dot, .services__dot{ position:relative; }
.reviews__dot::before, .services__dot::before{
  content:""; position:absolute; left:50%; top:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}
.featured__arrow{ width:44px; height:44px; }
.nav__burger{ width:44px; height:44px; }

/* Contrast: 12.5px meta text was #8A847B (3.4:1) — darken to pass AA */
.featured__count, .review-card__who span, .review-card__date, .work-item__meta span{ color:var(--ink-2); }

/* Solid-button hover: #E5484D under white text was 3.9:1 — #D63A3F passes */
.btn--solid:hover{ background:#D63A3F; }

/* Preloader brand: weight 300 was never loaded (faux-light) — use real 500 */
.preloader__brand{ font-weight:500; }

/* ============================================================
   ✦ MOTION & CRAFT v3 — performant interaction layer
   Transform/opacity only (compositor). No new assets, no colour,
   no type, no copy changes. All degrades under reduced-motion
   via the global reset above; pointer effects gated in JS.
   ============================================================ */

/* ---- Scroll progress line (top of viewport) ---- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%; will-change:transform;
  background:linear-gradient(90deg, var(--crimson), var(--crimson-hi));
  z-index:1200; pointer-events:none;
}

/* ---- Buttons: contained light-sweep on hover ---- */
.btn, .nav__cta{ position:relative; overflow:hidden; isolation:isolate; }
.btn > svg, .nav__cta > svg{ position:relative; z-index:1; }
.btn::after, .nav__cta::after{
  content:""; position:absolute; inset:0 auto 0 0; width:55%; height:100%; z-index:0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.30) 50%, transparent);
  transform:translateX(-190%) skewX(-16deg); pointer-events:none;
  transition:transform .75s var(--ease);
}
.btn:hover::after, .nav__cta:hover::after{ transform:translateX(320%) skewX(-16deg); }
/* on the light ghost buttons the white sweep would be invisible-to-muddy — tune it */
.btn--ghost::after, .fbtn::after{ background:linear-gradient(100deg, transparent, rgba(193,18,31,.12) 50%, transparent); }

/* filter pills get the same sweep for consistency */
.fbtn{ position:relative; overflow:hidden; }
.fbtn::after{
  content:""; position:absolute; inset:0 auto 0 0; width:55%; height:100%;
  transform:translateX(-190%) skewX(-16deg); pointer-events:none;
  transition:transform .7s var(--ease);
}
.fbtn:hover::after{ transform:translateX(320%) skewX(-16deg); }

/* ---- Nav links: origin-aware underline (grow from left, retract right) ---- */
.nav__links a::after{
  left:0; right:0; width:auto; transform:scaleX(0); transform-origin:right center;
  transition:transform .4s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left center; }
.nav__links a.is-active::after{ transform:scaleX(1); transform-origin:left center; }

/* ---- Magnetic elements: smooth transform handoff (JS drives translate) ---- */
.hero__actions .btn, .nav__cta,
.featured__arrow, .reviews__arrow, .services__arrow,
.manifesto__cta, .workpage__cta .btn, .footer__totop{
  will-change:transform;
}

/* ---- Icon micro-motion on card hover ---- */
.service__icon{ transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.service:hover .service__icon,
.services__track .service.is-active:hover .service__icon{ transform:translateY(-3px) scale(1.07); }
.manifesto__cta:hover svg{ transform:translateX(5px); }

/* ---- Hero: cinematic open + slow ambient breath ---- */
@keyframes heroLightsUp{ from{ opacity:0; } to{ opacity:1; } }
@keyframes heroBreath{ from{ transform:scale(1); } to{ transform:scale(1.045); } }
@keyframes railIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
.hero__media{ animation:heroLightsUp 1.25s ease both; }
.scroll-rail{ animation:railIn 1s var(--ease) .55s both; }
/* breath only where it won't cost a phone battery / conflict with scroll scrub */
@media (hover:hover) and (pointer:fine){
  .hero__video{ animation:heroBreath 24s ease-in-out infinite alternate; }
}

/* ---- Card lift depth: a touch more premium on the paper body ---- */
.review-card{ transition:box-shadow .45s var(--ease), transform .45s var(--ease); }
.step{ transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s; }

/* ---- Keep the new motion honest under reduced-motion ---- */
@media (prefers-reduced-motion:reduce){
  .hero__media,.scroll-rail,.hero__video{ animation:none !important; }
  .btn::after,.nav__cta::after,.fbtn::after{ display:none !important; }
  .scroll-progress{ display:none !important; }
}

/* ============================================================
   ✦ FUNNEL BLOCKS — benefits, FAQ, repeated section CTA
   Existing tokens only: no new colours, fonts, or assets.
   ============================================================ */

/* ---- The one repeated ask, after each block ---- */
.section-cta{
  display:flex; justify-content:center;
  padding:clamp(30px,4vh,50px) var(--gut) 0;
}

/* ---- BENEFITS — four plain reasons, replaces the duplicate stat row ---- */
.benefits{
  position:relative; background:var(--paper-soft); color:var(--ink);
  padding-bottom:clamp(64px,9vh,110px);
}
.benefits__grid{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(20px,3vw,36px) var(--gut) 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,2.8vw,40px);
}
.benefit{ display:flex; flex-direction:column; align-items:flex-start; gap:13px; }
.benefit__icon{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  color:var(--crimson); border:1px solid rgba(193,18,31,.3); background:rgba(193,18,31,.06);
  transition:transform .5s var(--ease), background .5s var(--ease);
}
.benefit__icon svg{ width:20px; height:20px; }
.benefit:hover .benefit__icon{ transform:translateY(-3px) scale(1.06); background:rgba(193,18,31,.1); }
.benefit h3{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(18px,1.6vw,23px); line-height:1.14; letter-spacing:-.015em; color:var(--ink);
}
.benefit p{
  font-family:var(--font-ui); font-size:clamp(14px,1.05vw,15.5px);
  line-height:1.62; color:var(--ink-2);
}
@media (max-width:900px){ .benefits__grid{ grid-template-columns:repeat(2,1fr); row-gap:clamp(26px,4vw,36px); } }
@media (max-width:560px){ .benefits__grid{ grid-template-columns:1fr; } }

/* ---- FAQ — native <details>, no JS, keyboard accessible ---- */
.faq{
  position:relative; background:var(--paper); color:var(--ink);
  padding-bottom:clamp(64px,9vh,110px);
}
.faq__list{ max-width:900px; margin:0 auto; padding:clamp(16px,2.4vw,30px) var(--gut) 0; }
.faq__item{ border-bottom:1px solid var(--hairline); }
.faq__item summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding:clamp(20px,2.4vw,27px) 0; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(17px,1.75vw,24px); line-height:1.3; letter-spacing:-.015em; color:var(--ink);
  transition:color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::marker{ content:""; }
.faq__item summary:hover,
.faq__item[open] summary{ color:var(--crimson); }
/* plus → minus toggle */
.faq__sign{ position:relative; flex:0 0 auto; width:22px; height:22px; margin-top:5px; }
.faq__sign::before,.faq__sign::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--crimson);
  transform:translate(-50%,-50%); transition:transform .4s var(--ease);
}
.faq__sign::before{ width:15px; height:2px; }
.faq__sign::after{ width:2px; height:15px; }
.faq__item[open] .faq__sign::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq__answer{ padding:0 clamp(24px,5vw,58px) clamp(22px,2.6vw,30px) 0; }
.faq__answer p{
  font-family:var(--font-ui); font-size:clamp(14.5px,1.1vw,16.5px);
  line-height:1.7; color:var(--ink-2); max-width:62ch;
}
@keyframes faqOpen{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }
.faq__item[open] .faq__answer{ animation:faqOpen .45s var(--ease) both; }

@media (prefers-reduced-motion:reduce){
  .faq__item[open] .faq__answer{ animation:none !important; }
}

/* ============================================================
   ✦ FOOTER v2 — clean light sitemap footer
   Brand + blurb on the left, link columns right, one hairline base.
   ============================================================ */
.footer{
  background:var(--paper); color:var(--ink);
  border-top:1px solid var(--hairline-2);
  padding:clamp(56px,8vh,92px) var(--gut) clamp(24px,3.4vh,34px);
}
.footer__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.7fr) 1fr 1fr;
  gap:clamp(34px,6vw,96px);
}

/* brand column */
.footer__logo{
  display:inline-block; font-family:var(--font-display); font-weight:500;
  font-size:clamp(18px,1.7vw,22px); letter-spacing:.2em; color:var(--ink);
}
.footer__logo em{ font-style:normal; color:var(--crimson); }
.footer__blurb{
  margin-top:20px; max-width:40ch;
  font-family:var(--font-ui); font-size:15px; line-height:1.75; color:var(--ink-2);
}
.footer__keep{
  display:block; margin-top:clamp(24px,3.4vh,34px);
  font-family:var(--font-ui); font-weight:600; font-size:15px; color:var(--ink);
}
.footer__mail{
  display:inline-block; margin-top:10px;
  font-family:var(--font-ui); font-size:15px; color:var(--crimson);
  border-bottom:1px solid rgba(193,18,31,.3); padding-bottom:2px; transition:border-color .3s;
}
.footer__mail:hover{ border-color:var(--crimson); }
.footer__social{ display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; }
.footer__social a{ font-family:var(--font-ui); font-size:14px; color:var(--ink-2); transition:color .3s; }
.footer__social a:hover{ color:var(--crimson); }

/* link columns */
.footer__col{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.footer__col h2{
  font-family:var(--font-ui); font-weight:600; font-size:15px;
  color:var(--ink); margin-bottom:4px; letter-spacing:0;
}
.footer__col a{
  font-family:var(--font-ui); font-size:15px; color:var(--ink-2);
  transition:color .3s var(--ease);
}
.footer__col a:hover{ color:var(--crimson); }

/* base line */
.footer__base{
  max-width:var(--maxw); margin:clamp(42px,6vh,70px) auto 0;
  padding-top:22px; border-top:1px solid var(--hairline-2);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.footer__base span{ font-family:var(--font-ui); font-size:13.5px; color:var(--ink-2); }
.footer__totop{
  font-family:var(--font-ui); font-size:13.5px; color:var(--ink-2);
  letter-spacing:.02em; transition:color .3s;
}
.footer__totop:hover{ color:var(--crimson); }

@media (max-width:860px){
  .footer__grid{ grid-template-columns:1fr 1fr; gap:34px clamp(24px,5vw,48px); }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .footer__grid{ grid-template-columns:1fr; }
  .footer__base{ flex-direction:column; align-items:flex-start; gap:12px; }
}

/* ============================================================
   ✦✦ POLISH PASS — spacing system, rhythm, depth, states
   Authoritative final layer. No colour, type or layout changes:
   this only regulates space, depth and motion quality.
   ============================================================ */
:root{
  /* one vertical scale, used everywhere instead of ad-hoc clamps */
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* every full section contributes this top AND bottom, so the gap between any
     two sections is always 2x this — no more 0px next to 154px */
  --sec-y:    clamp(56px, 4.2vw, 76px);
  --sec-y-sm: clamp(34px, 2.6vw, 46px);   /* thin strips: clients, statbar */
  --head-gap: clamp(26px, 2.6vw, 38px);   /* heading block → its content */

  /* layered shadows: two stops so the falloff is gradual instead of a hard edge */
  --sh-1: 0 1px 2px rgba(22,19,15,.04), 0 6px 14px -8px rgba(22,19,15,.10);
  --sh-2: 0 2px 4px rgba(22,19,15,.04), 0 10px 24px -12px rgba(22,19,15,.14),
          0 28px 48px -28px rgba(22,19,15,.16);
  --sh-3: 0 2px 6px rgba(22,19,15,.05), 0 14px 32px -14px rgba(22,19,15,.16),
          0 42px 72px -36px rgba(22,19,15,.22);
}

/* ---------- 1. SECTION RHYTHM ---------- */
/* Sections previously leaned on .section-head padding for their top space, which
   is why some pairs collided at 0px and others opened to 154px. The section owns
   its own vertical space now; the heading block owns none. */
.section-head{ padding-top:0; padding-bottom:0; }

.services,.process,.benefits,.about,.reviews,.faq,.manifesto,.contact{
  padding-top:var(--sec-y); padding-bottom:var(--sec-y);
}
.clients{ padding-top:var(--sec-y-sm); padding-bottom:var(--sec-y-sm); }
.featured{ padding-top:var(--sec-y-sm); padding-bottom:var(--sec-y-sm); }
.statbar{ padding-top:0; padding-bottom:0; }
.featured__topbar{ padding-top:0; }
.featured__layout{ padding-top:var(--head-gap); }
.workpage__cta{ padding-top:var(--sec-y); padding-bottom:var(--sec-y); }

/* heading → content: one value across the whole site */
.section-head + *{ margin-top:var(--head-gap); }
/* The coverflow sliders clip on both axes (overflow:hidden is required for the
   horizontal track), so they need vertical padding or they shear the card shadows
   off mid-falloff. Bottom is deeper because the shadow is cast downward. */
.services__slider,.reviews__slider{
  margin-top:var(--head-gap); padding:22px 0 46px;
}
.process__steps{ margin-top:var(--head-gap); }
.benefits__grid,.faq__list{ padding-top:0; }
.section-head__index{ margin-bottom:var(--sp-3); }
.section-head__title{ margin-bottom:0; }
.section-head__lead{ margin-top:var(--sp-3); }

/* ---------- 2. CTA BREATHING ROOM ---------- */
/* The button was overflowing its own section by 26px and touching the next one. */
.section-cta{
  padding-top:clamp(38px,4.2vw,58px);
  padding-bottom:0;
}
/* slider already carries 46px of shadow room below the cards, so the nav sits close */
.services__nav,.reviews__nav{ margin-top:var(--sp-3); margin-bottom:0; }

/* ---------- 3. DEPTH — layered, soft-falloff shadows ---------- */
.service,.step,.review-card{ box-shadow:var(--sh-1); }
.service:hover,.step:hover{ box-shadow:var(--sh-2); }
.review-card:hover{ box-shadow:var(--sh-2); }
.work-item__media,.about__media{ box-shadow:var(--sh-2); }
/* the featured carousel: was a single -30px-spread shadow that stopped dead */
.feat-tile .work-item__media{ box-shadow:var(--sh-3); }
.services__track .service.is-active,
.services__track .service.is-active:hover,
.reviews__track .review-card.is-active,
.reviews__track .review-card.is-active:hover{ box-shadow:var(--sh-3); }
.btn--solid{ box-shadow:0 1px 2px rgba(22,19,15,.06), 0 10px 22px -12px rgba(193,18,31,.45); }
.btn--solid:hover{ box-shadow:0 2px 4px rgba(22,19,15,.06), 0 16px 30px -12px rgba(193,18,31,.55); }

/* ---------- 4. HERO — a soft pool of shade under the type ---------- */
/* Anchored to the text, not a flat wash over the whole frame, so the footage keeps
   its contrast while the headline gains a richer ground to sit on. */
.hero__inner::before{
  content:""; position:absolute; inset:auto 0 0 0; height:78%;
  z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 78% at 22% 96%, rgba(6,4,5,.52), transparent 68%),
    linear-gradient(180deg, transparent, rgba(6,4,5,.34));
}
.hero__inner{ position:relative; z-index:1; }

/* ---------- 5. MOTION QUALITY ---------- */
/* One easing curve family. Nothing linear, nothing snappy-cheap. */
:root{ --ease-out:cubic-bezier(.22,.61,.36,1); }
.btn,.nav__cta,.fbtn,.footer__col a,.footer__mail,.footer__totop,
.service__icon,.benefit__icon,.step,.review-card,.service{
  transition-timing-function:var(--ease-out);
}
.btn,.nav__cta{ transition-duration:.42s; }

/* ---------- 6. HOVER + FOCUS, consistently ---------- */
.footer__col a,.footer__mail,.footer__social a{
  transition:color .32s var(--ease-out), opacity .32s var(--ease-out);
}
.featured__aboutlink:hover{ color:var(--crimson); }
.statbar .hstat{ transition:transform .5s var(--ease-out); }
/* one visible focus ring for every interactive element, on light and dark */
a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
summary:focus-visible,details:focus-visible{
  outline:2px solid var(--crimson);
  outline-offset:3px;
  border-radius:3px;
}
.hero a:focus-visible,.hero button:focus-visible,
.footer a:focus-visible,.room a:focus-visible,.room button:focus-visible{
  outline-color:var(--crimson-hi);
}

/* ---------- 7. FLICKER FIX (paired with main.js) ---------- */
/* Pre-set the animation start state so the first painted frame is already correct.
   Guarded by html.js so a no-JS visitor never sees blank space. */
html.js .manifesto__text .ln,
html.js .manifesto__say .ln{ opacity:0; will-change:transform,opacity; }
@media (prefers-reduced-motion:reduce){
  html.js .manifesto__text .ln,
  html.js .manifesto__say .ln{ opacity:1 !important; transform:none !important; }
  .hero__inner::before{ opacity:1; }
}

/* ---------- 8. CLS + RENDER STABILITY ---------- */
/* Reserve space for media so nothing jumps as it decodes. */
.clients__track img{ aspect-ratio:160/46; }
.benefit__icon,.service__icon,.step__icon{ flex:0 0 auto; }
/* kill the sub-pixel text shimmer GSAP leaves behind when it drops a layer */
.reveal,.manifesto__text .ln,.manifesto__say .ln,.section-head__title{
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 9. WORK PAGE rhythm, matched to the homepage scale ---------- */
/* the showcase is a full-viewport stage; the CTA below it keeps the standard section rhythm */

/* ---------- 10. MICRO POLISH ---------- */
/* consistent radii: everything lands on 4 / 8 / 10 / pill, nothing in between */
.field input,.field select,.field textarea{ border-radius:0; }
.review-card,.faq__item summary{ border-radius:8px; }
.service{ border-radius:10px; }

/* icons optically centred rather than box-centred */
.benefit__icon svg,.service__icon svg,.step__icon svg{ display:block; }

/* stat bar: give the strip real presence instead of a hairline squeeze */
.statbar .hero-stats{ padding-block:var(--sp-2); }

/* text rendering: stop long headings breaking to a single orphan word */
.section-head__title,.room__title,.hero__title,.contact__title,.manifesto__text{
  text-wrap:balance;
}
.section-head__lead,.room__lead,.hero__sub,.benefit p,.faq__answer p{
  text-wrap:pretty;
}

/* footer: align the base line to the same rhythm */
.footer__base{ margin-top:var(--sec-y); }

/* nav: soften the glass edge so the blur has no hard seam */
.nav.scrolled .nav__bar{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),
             0 1px 2px rgba(0,0,0,.14),
             0 18px 44px -22px rgba(0,0,0,.5);
}

/* lightbox: fade the backdrop instead of snapping it in */
.lightbox{ transition:opacity .45s var(--ease-out), visibility .45s var(--ease-out); }

/* ---------- 11. TOUCH TARGETS ---------- */
/* Text links sat at 24-27px tall. Negative margin cancels the added padding, so the
   hit area grows without shifting a single pixel of layout. */
@media (hover:none){
  .footer__col a,.footer__mail,.footer__social a,.footer__totop{
    padding-block:9px; margin-block:-9px;
  }
  .nav__logo,.footer__logo{ padding-block:6px; margin-block:-6px; }
}

/* ---------- 12. LARGE SCREENS ---------- */
/* Space should grow with the canvas, but not run away on a 4K panel. */
@media (min-width:1600px){
  :root{ --sec-y:clamp(76px,4.4vw,92px); --head-gap:clamp(38px,2.4vw,46px); }
}
@media (min-width:2400px){
  :root{ --sec-y:96px; --head-gap:48px; }
}

/* ---------- 13. SCROLL / RENDER STABILITY ---------- */
html{ scroll-behavior:auto; }          /* Lenis owns smooth scrolling; avoid double easing */
img,video{ max-width:100%; }
.grain{ will-change:auto; }            /* static overlay never needed its own layer */
/* Only promote what actually animates, and only while it does */
.feat-tile{ will-change:transform; }
.reveal{ will-change:opacity,transform; }
.reveal.is-in{ will-change:auto; }

/* ---------- 14. FINAL ALIGNMENT ---------- */
/* footer joins the same 2x --sec-y rhythm as every other section boundary */
.footer{ padding-top:var(--sec-y); }

/* The full-bleed coverflow sliders used 100vw, which counts the scrollbar and so
   overhung the page by ~8px (clipped, but it made the page scrollWidth wider than
   the viewport). Their sections are already full width, so no breakout is needed. */
.reviews__slider,.services__slider{
  width:auto; margin-left:auto; margin-right:auto;
}
@media (min-width:1600px){
  .reviews__slider,.services__slider{ width:min(100%,1560px); }
}

/* ============================================================
   ✦✦✦ TYPE SYSTEM v3 — editorial serif + neutral grotesk
   One foundry, two voices. Instrument Serif speaks (headlines,
   film names, numerals); Instrument Sans informs (UI, body, meta).
   Serif ships weight 400 only, so headings cannot shout.
   ============================================================ */
:root{
  --font-display:"Instrument Serif", "Times New Roman", Georgia, serif;
  --font-ui:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent:"Instrument Serif", Georgia, serif;

  /* Modular scale, ~1.22. Headings come DOWN hard: authority is proportion,
     not size. Display-to-body contrast moves from 5.2:1 to ~3.6:1, which is
     where editorial work actually sits. */
  --fs-display:clamp(40px, 4.6vw, 62px);
  --fs-h1:     clamp(34px, 3.9vw, 50px);
  --fs-h2:     clamp(29px, 3.1vw, 40px);
  --fs-h3:     clamp(19px, 1.6vw, 23px);
  --fs-h4:     clamp(16.5px, 1.25vw, 18.5px);
  --fs-lead:   clamp(16.5px, 1.2vw, 18.5px);
  --fs-body:   clamp(15.5px, 1.05vw, 16.5px);
  --fs-sm:     14.5px;
  --fs-xs:     13px;
  --fs-label:  11.5px;

  --lh-display:1.06;
  --lh-head:   1.14;
  --lh-title:  1.28;
  --lh-lead:   1.55;
  --lh-body:   1.7;

  --tr-display:-.014em;   /* high-contrast serif needs far less negative tracking */
  --tr-head:   -.018em;
  --tr-label:   .18em;

  --measure:      68ch;   /* comfortable prose */
  --measure-lead: 46ch;   /* short intros stay punchy */
}

/* ---------- DISPLAY VOICE — serif, always weight 400 ---------- */
.hero__title,
.section-head__title,
.manifesto__text,
.contact__title,
.featured__title,
.about__text h2,
.room__title,
.workpage__cta p,
.feat-tile__info h3,
.stat__num,
.faq__item summary{
  font-family:var(--font-display);
  font-weight:400;
  font-style:normal;
  letter-spacing:var(--tr-display);
}

.hero__title{ font-size:var(--fs-display); line-height:var(--lh-display); }
.section-head__title,
.manifesto__text,
.contact__title{ font-size:var(--fs-h2); line-height:var(--lh-head); }
.featured__title{ font-size:var(--fs-h1); line-height:var(--lh-head); font-weight:400; }
.about__text h2,
.room__title{ font-size:var(--fs-h1); line-height:var(--lh-head); }
.workpage__cta p{ font-size:var(--fs-h2); line-height:var(--lh-head); font-weight:400; }
.workpage .section-head__title{ font-size:var(--fs-h1); }

/* the accent word stays serif but turns italic — one idea, two cuts */
.hero__title em,
.contact__title em,
.manifesto__text em,
.featured__title em,
.room__title em{
  font-family:var(--font-display);
  font-style:italic; font-weight:400; font-size:1em;
  letter-spacing:0;
}

/* film names + numerals: serif reads filmic and sets numbers beautifully */
.feat-tile__info h3{ font-size:clamp(24px,2.6vw,34px); line-height:1.1; }
.stat__num,.hstat__num{
  font-family:var(--font-display); font-weight:400;
  letter-spacing:-.01em; line-height:1;
}
.stat__num{ font-size:clamp(38px,4.2vw,54px); }
.hstat__num{ font-size:clamp(19px,1.7vw,24px); line-height:1.15; }
.room__num b{ font-family:var(--font-display); font-weight:400; }
.faq__item summary{ font-size:var(--fs-h3); line-height:var(--lh-title); }

/* ---------- INFORMATION VOICE — sans ---------- */
body,.hero__sub,.section-head__lead,.manifesto__say,
.service__body p,.step p,.benefit p,.review-card p,.faq__answer p,
.about__text p,.footer__blurb,.contact__head p,.room__lead,.tour__note{
  font-family:var(--font-body);
}

/* card + step titles stay sans: they label information, they don't speak */
.service__body h3,.step h3,.benefit h3,.room__now h2,.hud__title,.footer__col h2{
  font-family:var(--font-ui); font-weight:600;
  font-size:var(--fs-h3); line-height:var(--lh-title);
  letter-spacing:var(--tr-head);
}
.footer__col h2{ font-size:var(--fs-sm); letter-spacing:0; }
.benefit h3{ font-size:var(--fs-h4); }
/* these two were inheriting 1.6 body line-height at 30-41px and looked slack */
.step h3{ line-height:var(--lh-title); }

/* prose */
.hero__sub{ font-size:var(--fs-lead); line-height:var(--lh-lead); max-width:var(--measure-lead); }
.section-head__lead,.room__lead{ font-size:var(--fs-lead); line-height:var(--lh-lead); max-width:var(--measure-lead); }
.manifesto__say{ font-size:clamp(17px,1.5vw,21px); line-height:1.5; font-weight:400; letter-spacing:0; }
.service__body p,.step p,.benefit p,.review-card p,.faq__answer p,
.about__text p,.footer__blurb,.contact__head p,.tour__note{
  font-size:var(--fs-body); line-height:var(--lh-body);
}
.about__text p,.faq__answer p{ max-width:var(--measure); }
.review-card p{ font-size:var(--fs-body); }

/* ---------- LABELS, META, UI ---------- */
.section-head__index,.clients__label,.featured__eyebrow,.room__eyebrow,
.eyebrow span,.service__num,.tour__step,.field label,.room__now span,
.hud__meta,.feat-tile__info > span,.work-item__meta span{
  font-family:var(--font-ui); font-weight:500;
  font-size:var(--fs-label); letter-spacing:var(--tr-label);
  text-transform:uppercase; line-height:1.4;
}
.field label{ text-transform:none; letter-spacing:.02em; font-size:var(--fs-xs); }
.feat-tile__info > span,.work-item__meta span{ font-size:var(--fs-xs); letter-spacing:.1em; }

.nav__links a,.mobile-menu a{ font-family:var(--font-ui); font-size:var(--fs-sm); font-weight:500; letter-spacing:0; }
.btn,.nav__cta,.fbtn,.hud__play,.room__watch,.tour__ctrl button,.room__tour-start{
  font-family:var(--font-ui); font-weight:600; letter-spacing:.01em;
  font-size:var(--fs-sm);
}
.footer__col a,.footer__mail,.footer__social a,.footer__base span,.footer__totop{
  font-family:var(--font-ui); font-size:var(--fs-sm);
}
.review-card__who strong{ font-family:var(--font-ui); font-weight:600; font-size:var(--fs-sm); }
.review-card__who span,.review-card__date{ font-family:var(--font-ui); font-size:var(--fs-xs); }
.field input,.field select,.field textarea{ font-family:var(--font-ui); font-size:var(--fs-body); }

/* brand marks keep the serif, spaced like a masthead */
.nav__logo,.footer__logo,.preloader__brand{
  font-family:var(--font-display); font-weight:400; letter-spacing:.14em;
}
.nav__logo em,.footer__logo em,.preloader__brand span{ font-style:italic; }

/* ---------- OPTICAL DETAIL ---------- */
/* serif at display size sits better with slightly tightened word spacing */
.hero__title,.section-head__title,.manifesto__text,.contact__title,.room__title{
  word-spacing:-.02em;
  font-feature-settings:"kern" 1,"liga" 1;
}
h1,h2,h3,h4{ text-wrap:balance; }          /* no orphan word on a line of its own */
p{ text-wrap:pretty; }
.faq__answer p,.about__text p,.benefit p,.step p{ hyphens:none; }

/* ---------- TYPE v3 corrections ---------- */
/* `ch` is the width of the ZERO glyph, and Instrument Sans sets a wide zero
   (~0.66em), so 68ch measured out at ~90 characters. Average prose character is
   ~0.5em, so em is the honest unit for measure. */
:root{
  --measure:      34em;   /* ≈ 66-70 characters */
  --measure-lead: 30em;   /* ≈ 58-62 characters */
}

/* The coverflow scopes its own type at a higher specificity than the system,
   which left craft cards outside the scale. Bring them back in. */
.services__track .service__body h3{
  font-family:var(--font-ui); font-weight:600;
  font-size:var(--fs-h3); line-height:var(--lh-title); letter-spacing:var(--tr-head);
}
.services__track .service__body p{
  font-size:var(--fs-body); line-height:var(--lh-body);
}
.services__track .service__num{ font-size:var(--fs-label); letter-spacing:var(--tr-label); }
.services__track .service__tag{ font-size:var(--fs-xs); letter-spacing:.08em; }
.reviews__track .review-card p{ font-size:var(--fs-body); line-height:var(--lh-body); }

/* buttons: an explicit line-height so cap-height centres in the pill */
.btn,.nav__cta,.fbtn,.room__watch,.hud__play,.tour__ctrl button,.room__tour-start{
  line-height:1.1;
}

/* long-form blocks share one measure */
.faq__answer p,.about__text p,.footer__blurb,.review-card p,.tour__note{
  max-width:var(--measure);
}
.manifesto__say{ max-width:36em; margin-inline:auto; }

/* Headings had max-width:14ch, which at 40px forced three-line wraps on any real
   sentence. A display measure of ~17em keeps them to two lines and lets
   text-wrap:balance even out the rag. */
.section-head__title{ max-width:17em; }
.section-head.center .section-head__title{ margin-inline:auto; }
.manifesto__text{ max-width:18em; margin-inline:auto; }
.contact__title{ max-width:16em; }
.hero__title{ max-width:15em; }
.about__text h2{ max-width:14em; }

/* Film names are part of the studio's voice, not UI labels — they were serif in
   the homepage carousel but sans in the screening-room caption. One register. */
.room__now h2,.hud__title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(22px,2.4vw,30px); line-height:1.14;
  letter-spacing:var(--tr-display);
}

/* Instrument Serif ships weight 400 only. A later rule left .statbar .hstat__num
   at 600, so the browser was synthesising a faux bold — which smears the thin
   strokes of a high-contrast serif. Pin every serif use to 400. */
.statbar .hstat__num,.hstat__num,.stat__num,
.hero__title,.section-head__title,.manifesto__text,.contact__title,
.featured__title,.about__text h2,.room__title,.workpage__cta p,
.feat-tile__info h3,.faq__item summary,.room__now h2,.hud__title,
.nav__logo,.footer__logo,.preloader__brand,.room__num b{
  font-weight:400 !important;
  font-synthesis-weight:none;   /* never let a browser fake it */
}

/* Root and form controls kept the UA default (Times / Arial). Nothing visible
   used them, but pinning here removes any chance of a fallback flash and makes
   native controls match the system. */
html{ font-family:var(--font-body); }
input,select,textarea,button,option,optgroup{ font-family:inherit; }
.field select option{ font-family:var(--font-ui); }

/* ---------- CRAFT CARDS — bring the height back under one screen ----------
   At >=1600px the active card measured 621px tall, which pushed the slider's
   own arrows below the fold: the card looked cut off and the controls were
   unreachable. Narrower card, shorter media crop, tighter body chrome. Type
   stays on the system scale — only the container shrinks. */
.services__track .service,
.services__track .service:nth-child(even){
  flex-basis:clamp(260px, 30vw, 400px);
}
.services__track .service__media{ aspect-ratio:2.3 / 1; }
.services__track .service__body{ padding:clamp(18px, 1.3vw, 24px); }
.services__track .service__icon{ width:38px; height:38px; margin-bottom:10px; }
.services__track .service__icon svg{ width:18px; height:18px; }
.services__track .service__num{ margin-bottom:7px; }
.services__track .service__body h3{ margin-bottom:8px; }
.services__track .service__tag{ margin-top:12px; }

@media (min-width:1600px){
  .services__track .service,
  .services__track .service:nth-child(even){ flex-basis:500px; }
}
@media (min-width:2400px){
  .services__track .service,
  .services__track .service:nth-child(even){ flex-basis:560px; }
}

/* Phones: the card should use the screen width (the new desktop clamp was
   overriding the older 82vw rule and squeezing it to 260px). */
@media (max-width:760px){
  .services__track .service,
  .services__track .service:nth-child(even){ flex-basis:82vw; }
  .services__track .service__media{ aspect-ratio:2 / 1; }
}

/* ============================================================
   ✦ LEGAL PAGE — long-form reading layout
   Narrow measure, generous leading, scannable headings.
   ============================================================ */
body.is-legal{ background:var(--paper); }
.legal{
  position:relative; background:var(--paper); color:var(--ink);
  padding-top:var(--sec-y); padding-bottom:var(--sec-y);
}
.legal__head,.legal__body,.legal__cta{
  max-width:min(720px, calc(100% - var(--gut) * 2));
  margin-inline:auto;
}
.legal__head{ padding-top:clamp(88px,12vh,132px); }
.legal__title{
  margin-top:var(--sp-3);
  font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-h1); line-height:var(--lh-head);
  letter-spacing:var(--tr-display); color:var(--ink); max-width:15em;
}
.legal__lead{
  margin-top:var(--sp-5);
  font-family:var(--font-ui); font-size:var(--fs-lead);
  line-height:var(--lh-lead); color:var(--ink-2); max-width:34em;
}
.legal__updated{
  margin-top:var(--sp-5); padding-top:var(--sp-5);
  border-top:1px solid var(--hairline-2);
  font-family:var(--font-ui); font-size:var(--fs-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}

.legal__body{ margin-top:clamp(34px,4vw,52px); }
.legal__body h2{
  margin-top:clamp(34px,3.6vw,48px); margin-bottom:var(--sp-3);
  font-family:var(--font-ui); font-weight:600;
  font-size:var(--fs-h4); line-height:var(--lh-title);
  letter-spacing:var(--tr-head); color:var(--ink);
}
.legal__body h2:first-child{ margin-top:0; }
.legal__body p{
  font-family:var(--font-ui); font-size:var(--fs-body);
  line-height:var(--lh-body); color:var(--ink-2);
  max-width:34em;
}
.legal__body p + p{ margin-top:var(--sp-4); }
.legal__body a{
  color:var(--crimson);
  border-bottom:1px solid rgba(193,18,31,.3); padding-bottom:1px;
  transition:border-color .3s var(--ease-out);
}
.legal__body a:hover{ border-color:var(--crimson); }

.legal__cta{
  margin-top:clamp(48px,6vw,76px); padding-top:clamp(34px,4vw,46px);
  border-top:1px solid var(--hairline-2);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-5); flex-wrap:wrap;
}
.legal__cta p{
  font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-h3); color:var(--ink); letter-spacing:var(--tr-display);
}
@media (max-width:560px){
  .legal__cta{ flex-direction:column; align-items:flex-start; }
}

/* Legal link sits in the footer base bar beside the copyright, which is where
   people look for it. Buried at the end of a nav column it was effectively
   invisible 7000px down the page. */
.footer__legal{
  font-family:var(--font-ui); font-size:var(--fs-sm); color:var(--ink-2);
  border-bottom:1px solid var(--hairline); padding-bottom:1px;
  transition:color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.footer__legal:hover{ color:var(--crimson); border-color:var(--crimson); }
.footer__base{ gap:var(--sp-5) clamp(18px,2.4vw,30px); }
.footer__base span{ margin-right:auto; }
@media (max-width:520px){ .footer__base span{ margin-right:0; } }

/* ============================================================
   ✦✦ THE SHOWCASE — one film fills the screen, the next wait as cards (work.html)
   Replaces the 3D screening room. GSAP owns the card-to-background expansion
   (clip-path FLIP); CSS owns layout, idle states and the no-JS fallback.
   ============================================================ */
.show{
  --cardw:   clamp(150px, 12.5vw, 200px);
  --cardgap: clamp(14px, 1.4vw, 22px);
  --deck-n:  4;
  --stack:   clamp(150px, 20vh, 200px);   /* copy + deck sit this far above the bottom */
  position:relative; isolation:isolate; overflow:hidden;
  height:100svh; min-height:640px; max-height:1100px;
  background:#0c0a0a; color:#fff;
  touch-action:pan-y; user-select:none;
}
.show .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* no-JS: the list is the page */
.show__list{ position:relative; z-index:4; list-style:none; margin:0; padding:140px var(--gut) 60px; display:grid; gap:28px; }
.show__list h2{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-h2); margin:0 0 4px; }
.show__list span{ font-family:var(--font-ui); font-size:var(--fs-label); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.show__list p{ max-width:34em; color:rgba(255,255,255,.8); }
html.js .show__list{ display:none; }

/* ---- background layers ---- */
.show__stage{ position:absolute; inset:0; z-index:0; }
.show__layer{ position:absolute; inset:0; background:#0c0a0a; clip-path:inset(0px 0px 0px 0px round 0px); will-change:clip-path; }
.show__media{ position:absolute; inset:0; will-change:transform; }
.show__media img,.show__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.show__layer--v .show__media{ inset:0 auto 0 50%; width:auto; aspect-ratio:9/16; transform:translateX(-50%); box-shadow:0 40px 90px -30px rgba(0,0,0,.7); }
.show__blur{ position:absolute; inset:-8%; width:116%; height:116%; object-fit:cover; filter:blur(32px) saturate(1.15); opacity:.9; }
.show__grade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,6,6,.66) 0%, rgba(8,6,6,.34) 40%, rgba(8,6,6,.08) 68%, rgba(8,6,6,.32) 100%),
    linear-gradient(180deg, rgba(8,6,6,.40) 0%, rgba(8,6,6,0) 28%, rgba(8,6,6,0) 52%, rgba(8,6,6,.62) 100%);
}

/* ---- copy ---- */
.show__inner{ position:absolute; inset:0; z-index:2; }
.show__copy{ position:absolute; left:var(--gut); bottom:var(--stack); width:min(40vw, 560px); }
.show__eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-ui); font-size:var(--fs-label); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.8);
}
.show__eyebrow::before{ content:""; flex:none; width:28px; height:1px; background:var(--crimson); }
.show__title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(46px, 6.4vw, 100px); line-height:.94; letter-spacing:-.015em;
  margin:18px 0 0; color:#fff; text-wrap:balance;
}
.show__title em{ font-style:italic; color:#F0A6AA; }
.show__note{
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.55;
  color:rgba(255,255,255,.82); max-width:27em; margin:22px 0 0;
}
.show__actions{ display:flex; align-items:center; gap:14px; margin-top:28px; }
.show__play{
  width:52px; height:52px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--crimson); color:#fff; display:grid; place-items:center;
  box-shadow:0 12px 30px -10px rgba(193,18,31,.75);
  transition:transform .35s var(--ease-out), background .3s var(--ease-out);
}
.show__play svg{ width:18px; height:18px; margin-left:3px; }
.show__play:hover{ transform:scale(1.07); background:#D31B29; }
.show__watch{
  height:46px; padding:0 22px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.42); background:rgba(255,255,255,.02); color:#fff;
  font-family:var(--font-ui); font-size:var(--fs-sm); font-weight:500; letter-spacing:.01em;
  backdrop-filter:blur(6px);
  transition:background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.show__watch:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.show__play:focus-visible,.show__watch:focus-visible,.show__arrow:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* ---- deck of upcoming cards ---- */
.show__deck{
  position:absolute; right:var(--gut); bottom:var(--stack);
  display:flex; gap:var(--cardgap); overflow:visible;
  width:calc(var(--deck-n) * var(--cardw) + (var(--deck-n) - 1) * var(--cardgap));
}
.card{
  flex:none; position:relative; width:var(--cardw); aspect-ratio:3/4.15;
  border-radius:14px; overflow:hidden; padding:0; border:0; cursor:pointer;
  background:#1a1616; color:#fff; text-align:left;
  box-shadow:0 26px 54px -24px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.07);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-out); }
.card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.74) 100%); }
.card__body{ position:absolute; left:14px; right:12px; bottom:14px; z-index:1; display:flex; flex-direction:column; gap:4px; }
.card__body i{ display:block; width:18px; height:1px; background:rgba(255,255,255,.75); margin-bottom:4px; }
.card__meta{ font-family:var(--font-ui); font-size:10.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.card__title{ font-family:var(--font-display); font-weight:400; font-size:clamp(17px, 1.35vw, 21px); line-height:1.06; letter-spacing:-.005em; }
.card__title em{ font-style:italic; }
.card:hover{ transform:translateY(-6px); box-shadow:0 34px 60px -24px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.14); }
.card:hover img{ transform:scale(1.05); }
.card:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* ---- bar: arrows, progress, counter ---- */
.show__bar{
  position:absolute; left:var(--gut); right:var(--gut); bottom:clamp(44px, 6vh, 64px); z-index:3;
  display:flex; align-items:center; gap:clamp(20px, 3vw, 44px);
}
.show__nav{ display:flex; gap:12px; }
.show__arrow{
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.38); background:rgba(255,255,255,.04); color:#fff;
  display:grid; place-items:center; backdrop-filter:blur(6px);
  transition:background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.show__arrow svg{ width:18px; height:18px; }
.show__arrow:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.show__arrow:active{ transform:scale(.94); }
.show__progress{ flex:1; height:1px; background:rgba(255,255,255,.24); position:relative; }
.show__progress span{
  position:absolute; left:0; top:-1px; height:3px; width:100%; border-radius:2px;
  background:var(--crimson); transform-origin:left center; transform:scaleX(.1);
  transition:transform .8s var(--ease-out);
}
.show__count{ display:flex; align-items:baseline; gap:8px; color:#fff; }
.show__count-cur{ display:inline-grid; overflow:hidden; font-family:var(--font-display); font-weight:400; font-size:clamp(40px, 4.2vw, 60px); line-height:1; }
.show__count-cur > b{ grid-area:1/1; font-weight:400; }
.show__count i{ font-style:normal; font-family:var(--font-ui); font-size:var(--fs-xs); letter-spacing:.06em; color:rgba(255,255,255,.62); }

/* ---- responsive ----
   Desktop keeps copy left / deck right. The deck drops to three cards below
   1400px so it never runs into the copy, and below 1000px the two stack
   (tablet portrait, phones). The static first deck ships four cards; CSS hides
   the fourth until JS settles the count, so nothing jumps on narrow screens. */
.show__deck--static .card:nth-child(n+5){ display:none; }

@media (max-width:1399px){
  .show{ --deck-n:3; --cardw:clamp(140px, 13vw, 180px); }
  .show__deck--static .card:nth-child(n+4){ display:none; }
  .show__copy{ width:min(42vw, 520px); }
  .show__note{ max-width:24em; }
}
@media (max-width:1199px){
  .show{ --cardw:clamp(130px, 13.5vw, 165px); --stack:clamp(140px, 19vh, 180px); }
  .show__title{ font-size:clamp(44px, 6vw, 76px); }
}
@media (min-width:1900px){
  .show{ --cardw:clamp(200px, 11.5vw, 240px); --cardgap:24px; --stack:clamp(170px, 19vh, 230px); }
  .show__copy{ width:min(40vw, 680px); }
  .show__title{ font-size:clamp(90px, 5.6vw, 120px); }
  .show__note{ font-size:clamp(16.5px, .95vw, 19px); max-width:30em; }
}
/* short landscape screens: 13-inch laptops, phones held sideways */
@media (min-width:1001px) and (max-height:720px){
  .show{ min-height:600px; --stack:clamp(120px, 17vh, 150px); --cardw:clamp(130px, 11vw, 160px); }
  .show__title{ font-size:clamp(40px, 5.2vw, 72px); }
  .show__note{ margin-top:14px; }
  .show__actions{ margin-top:20px; }
  .show__bar{ bottom:clamp(28px, 4vh, 44px); }
}
@media (max-width:1000px){
  .show{ height:auto; min-height:100svh; max-height:none; --deck-n:3; }
  .show__inner{
    position:relative; inset:auto; min-height:100svh;
    display:flex; flex-direction:column; justify-content:flex-end; gap:30px;
    padding:120px var(--gut) calc(clamp(28px, 5vh, 44px) + 84px);
  }
  .show__copy{ position:static; width:100%; max-width:600px; }
  .show__deck{ position:static; --cardw:clamp(96px, 27vw, 150px); --cardgap:12px; }
  .show__deck--static .card:nth-child(n+4){ display:none; }
  .show__title{ font-size:clamp(40px, 9vw, 72px); }
  .show__note{ max-width:34em; }
  .show__bar{ bottom:clamp(28px, 5vh, 44px); gap:18px; }
  .show__count-cur{ font-size:36px; }
}
@media (max-width:560px){
  .show__deck{ --cardw:clamp(96px, 27vw, 132px); }
  .show__title{ font-size:clamp(40px, 11.5vw, 60px); }
  .card__body{ left:10px; right:8px; bottom:10px; }
  .card__meta{ font-size:9px; }
  .card__title{ font-size:15px; }
}
@media (prefers-reduced-motion:reduce){
  .card,.card img,.show__progress span{ transition:none; }
}

/* ============================================================
   ✦✦ FEATURED STACK — the four films as an unfolding stack (index.html)
   From the user's reference: white rounded rows, one open at a time, the open
   row unfolds its film beneath its header while the others sit as slightly
   narrower pills. Height animates with the grid 0fr→1fr trick, so there is no
   JS measuring; initFeaturedStack only toggles .is-open and runs the clock.
   ============================================================ */
.featured__right{
  display:block; aspect-ratio:auto; height:auto; overflow:visible; border-radius:0; padding:0;
  -webkit-mask-image:none; mask-image:none;
}
.fstack{ display:flex; flex-direction:column; gap:clamp(10px, 1.2vw, 14px); }
.frow{
  --inset: clamp(10px, 3.2%, 28px);
  position:relative; margin-inline:var(--inset);
  background:#FFFDFA; border:1px solid var(--hairline); border-radius:18px;
  box-shadow:var(--sh-1);
  transition:margin .8s var(--ease-out), box-shadow .8s var(--ease-out), background .5s var(--ease-out);
}
.frow.is-open{ margin-inline:0; background:#fff; box-shadow:var(--sh-3); }

/* header row */
.frow__bar{
  display:flex; align-items:center; gap:clamp(12px, 1.4vw, 20px); width:100%;
  padding:clamp(12px, 1.3vw, 16px) clamp(16px, 1.6vw, 22px);
  background:none; border:0; border-radius:inherit; cursor:pointer;
  text-align:left; color:var(--ink); font:inherit;
}
.frow__bar:focus-visible{ outline:2px solid var(--crimson); outline-offset:-2px; }
.frow__num{
  flex:none; width:2.4em; font-family:var(--font-ui); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.1em; color:var(--ink-3); transition:color .4s var(--ease-out);
}
.frow.is-open .frow__num{ color:var(--crimson); }
.frow__name{
  flex:1; min-width:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(20px, 1.6vw, 25px); line-height:1.1; letter-spacing:-.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.frow__cat{
  flex:none; font-family:var(--font-ui); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); text-align:right; line-height:1.4;
}
.frow__cat i{ display:block; font-style:normal; font-weight:400; color:var(--ink-3); }
.frow__chev{
  flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--hairline);
  display:grid; place-items:center; color:var(--ink-2);
  transition:transform .7s var(--ease-out), background .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.frow__chev svg{ width:15px; height:15px; }
.frow__bar:hover .frow__chev{ border-color:var(--ink-2); }
.frow.is-open .frow__chev{ transform:rotate(180deg); background:var(--crimson); border-color:var(--crimson); color:#fff; }

/* the film unfolds beneath the header */
.frow__body{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .85s var(--ease-out), opacity .4s var(--ease-out);
}
.frow.is-open .frow__body{
  grid-template-rows:1fr; opacity:1;
  transition:grid-template-rows .85s var(--ease-out), opacity .6s var(--ease-out) .25s;
}
.frow__inner{ min-height:0; overflow:hidden; }
.frow__media{
  position:relative; aspect-ratio:21/9; margin:0 12px 12px; border-radius:12px; overflow:hidden;
  background:#141010; cursor:pointer; isolation:isolate;
}
.frow__media img,.frow__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.frow__media img{ transition:transform 1.2s var(--ease-out); }
.frow__media:hover img{ transform:scale(1.03); }
.frow__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%); pointer-events:none; }
.frow__media:focus-visible{ outline:2px solid var(--crimson); outline-offset:2px; }
.frow__view{
  position:absolute; right:16px; bottom:14px; z-index:1; display:flex; align-items:center; gap:10px;
  color:#fff; font-family:var(--font-ui); font-size:var(--fs-xs); letter-spacing:.03em;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.frow__view .circ{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(8px);
  transition:background .35s var(--ease-out), color .35s var(--ease-out), transform .35s var(--ease-out);
}
.frow__view .circ svg{ width:14px; height:14px; margin-left:2px; }
.frow__media:hover .frow__view .circ{ background:#fff; color:var(--ink); transform:scale(1.06); }

@media (max-width:640px){
  .frow{ --inset:8px; border-radius:14px; }
  .frow__bar{ gap:10px; padding:12px 14px; }
  .frow__cat{ font-size:10px; }
  .frow__cat i{ display:none; }
  .frow__name{ font-size:19px; }
  .frow__chev{ width:28px; height:28px; }
  .frow__media{ aspect-ratio:16/9; margin:0 8px 8px; border-radius:10px; }
}
@media (prefers-reduced-motion:reduce){
  .frow,.frow__body,.frow__chev,.frow__media img,.frow__view .circ{ transition:none; }
}

/* ============================================================
   ✦✦ THE METHOD BOOK — one spread per step, the page turns (index.html)
   From the user's reference: a book seen head-on in perspective, the current
   page rotating around the spine to reveal the next. Real CSS 3D: each leaf is
   a two-faced card hinged on the spine; JS only toggles .is-turned and orders
   the stacks. Below 640px the spread becomes a single-page flipbook.
   ============================================================ */
.book{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); perspective:2400px; }
.book__stage{
  position:relative; margin:0 auto; aspect-ratio:1.7;
  /* never taller than the screen allows: the heading and controls need ~300px around it */
  width:min(100%, 820px, calc((100svh - 340px) * 1.7));
  min-width:min(100%, 520px);
  transform-style:preserve-3d; user-select:none; cursor:pointer;
}
.book__stage a{ cursor:pointer; }
/* soft shadow the book casts on the paper */
.book__stage::after{
  content:""; position:absolute; left:3%; right:3%; bottom:-7%; height:16%; z-index:-2;
  background:radial-gradient(ellipse at center, rgba(22,19,15,.26), rgba(22,19,15,0) 70%);
  filter:blur(10px); pointer-events:none;
}
.book__side{ position:absolute; top:0; bottom:0; width:50%; }
.book__side--l{ left:0; }
.book__side--r{ left:50%; }
/* the block of pages beneath each side */
.book__side::before,.book__side::after{
  content:""; position:absolute; inset:0; z-index:-1; background:#F9F5EE; border:1px solid var(--hairline); border-radius:inherit;
}
.book__side--l::before{ transform:translate(-3px, 3px); border-radius:10px 2px 2px 10px; }
.book__side--l::after{  transform:translate(-6px, 6px); border-radius:10px 2px 2px 10px; opacity:.7; }
.book__side--r::before{ transform:translate(3px, 3px);  border-radius:2px 10px 10px 2px; }
.book__side--r::after{  transform:translate(6px, 6px);  border-radius:2px 10px 10px 2px; opacity:.7; }

.leaf{
  position:absolute; left:50%; top:0; width:50%; height:100%;
  transform-origin:left center; transform-style:preserve-3d;
  transition:transform 1.1s cubic-bezier(.45,.02,.18,1);
  will-change:transform;
}
.leaf.is-turned{ transform:rotateY(-180deg); }
.leaf.is-turning{ z-index:99 !important; }
.leaf__front,.leaf__back{ -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.leaf__back{ transform:rotateY(180deg); }

/* a page */
.page{
  position:absolute; inset:0; overflow:hidden;
  background:#FFFDFA; border:1px solid var(--hairline);
  padding:clamp(20px, 3vw, 40px);
  display:flex; flex-direction:column; justify-content:center;
  color:var(--ink);
}
.page--l{ border-radius:10px 2px 2px 10px; }
.page--r{ border-radius:2px 10px 10px 2px; }
/* gutter shade towards the spine */
.page--l::after,.page--r::after{ content:""; position:absolute; top:0; bottom:0; width:44px; pointer-events:none; }
.page--l::after{ right:0; background:linear-gradient(270deg, rgba(22,19,15,.09), rgba(22,19,15,0)); }
.page--r::after{ left:0;  background:linear-gradient(90deg,  rgba(22,19,15,.09), rgba(22,19,15,0)); }
/* lighting while a leaf is mid-turn */
.page__shade{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .45s var(--ease-out);
  background:linear-gradient(90deg, rgba(22,19,15,.16), rgba(22,19,15,0) 40%, rgba(22,19,15,0) 60%, rgba(22,19,15,.10)); }
.leaf.is-turning .page__shade{ opacity:1; }

.page__num{ font-family:var(--font-ui); font-size:var(--fs-label); font-weight:500; letter-spacing:.14em; color:var(--crimson); }
.page__icon{
  width:48px; height:48px; border-radius:50%; margin-top:clamp(14px, 2.2vw, 24px);
  border:1px solid rgba(193,18,31,.3); background:rgba(193,18,31,.05); color:var(--crimson);
  display:grid; place-items:center;
}
.page__icon svg{ width:21px; height:21px; }
.page__title{
  font-family:var(--font-display); font-weight:400; font-size:clamp(28px, 3vw, 42px); line-height:1.02; letter-spacing:-.012em;
  margin:clamp(14px, 2vw, 22px) 0 0; color:var(--ink); text-wrap:balance;
}
.page__kicker{ font-family:var(--font-display); font-style:italic; font-size:clamp(16px, 1.3vw, 19px); line-height:1.3; color:var(--ink-2); margin:10px 0 0; max-width:16em; }
.page__run{ font-family:var(--font-ui); font-size:var(--fs-label); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.page__run i{ font-style:normal; color:var(--crimson); margin:0 4px; }
.page__body{ font-family:var(--font-body); font-size:clamp(15px, 1.05vw, 17px); line-height:1.6; color:var(--ink-2); margin:clamp(14px, 1.8vw, 22px) 0 0; max-width:24em; }
.page__folio{ position:absolute; bottom:clamp(14px, 2vw, 22px); font-family:var(--font-ui); font-size:var(--fs-xs); color:var(--ink-3); letter-spacing:.06em; }
.page--l .page__folio{ left:clamp(20px, 3vw, 40px); }
.page--r .page__folio{ right:clamp(20px, 3vw, 40px); }
.page__end{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px, 2.8vw, 38px); line-height:1.05; letter-spacing:-.012em; margin:0; color:var(--ink); }
.page__end em{ font-style:italic; color:var(--crimson); }
.page--close,.page--end{ justify-content:center; }
.page__cta{ align-self:flex-start; margin-top:clamp(20px, 2.6vw, 30px); }

/* controls */
.book__bar{
  display:flex; align-items:center; justify-content:center; gap:clamp(14px, 2vw, 24px);
  width:min(100%, 820px); margin:clamp(22px, 3vw, 34px) auto 0;
}
.book__arrow{
  width:44px; height:44px; border-radius:50%; flex:none; cursor:pointer;
  border:1px solid var(--hairline); background:#fff; color:var(--ink);
  display:grid; place-items:center;
  transition:background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.book__arrow svg{ width:18px; height:18px; }
.book__arrow:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.book__arrow:active{ transform:scale(.94); }
.book__arrow:focus-visible,.book__dot:focus-visible{ outline:2px solid var(--crimson); outline-offset:3px; }
.book__dots{ display:flex; gap:8px; }
.book__dot{ width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer; background:rgba(22,19,15,.18); transition:background .3s, transform .3s var(--ease-out); }
.book__dot.is-on{ background:var(--crimson); transform:scale(1.25); }
.book__label{ font-family:var(--font-ui); font-size:var(--fs-sm); color:var(--ink-2); min-width:11em; text-align:center; }
.book__label i{ font-style:normal; color:var(--crimson); margin:0 4px; }

/* the old step cards are gone; keep the section rhythm */
.process .book{ margin-top:var(--head-gap); }

@media (max-width:900px){
  .book__stage{ aspect-ratio:1.45; width:min(100%, calc((100svh - 280px) * 1.45)); min-width:min(100%, 440px); }
  .page{ padding:clamp(18px, 3vw, 30px); }
  .page__title{ font-size:clamp(26px, 4.4vw, 40px); }
  .page__body{ font-size:15.5px; }
  .book__label{ min-width:0; }
}
@media (max-width:640px){
  /* single-page flipbook: only the text pages, full width, hinged on the left edge */
  .book__stage{ aspect-ratio:.82; width:min(100%, 400px, calc((100svh - 250px) * .82)); min-width:min(100%, 260px); }
  .book__side--l{ display:none; }
  .book__side--r{ left:0; width:100%; }
  .leaf{ left:0; width:100%; }
  .leaf__back{ display:none; }
  .page--r{ border-radius:10px; }
  .page--r::after{ display:none; }
  .page__body{ font-size:16px; max-width:none; }
  .page__run{ font-size:11px; }
  .book__bar{ gap:12px; }
  .book__label{ font-size:var(--fs-xs); }
}
/* short laptop screens: pull the heading, book and controls together so the whole spread fits */
@media (min-width:901px) and (max-height:780px){
  .process .book{ margin-top:22px; }
  .book__bar{ margin-top:16px; }
  .page{ padding:clamp(16px, 2.4vw, 30px); }
  .page__body{ font-size:15px; }
}
@media (prefers-reduced-motion:reduce){
  .leaf,.page__shade,.book__dot,.book__arrow{ transition:none; }
}

/* in-page anchors land with the heading clear of the fixed nav */
section[id], [id="top"]{ scroll-margin-top:84px; }