/* ============================================================
   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; }
}

/* ============================================================
   ✦✦ THE SCREENING ROOM — interactive 3D film gallery (work.html)
   Real CSS 3D: perspective + preserve-3d + Z-depth. No libraries.
   JS owns the world rotation and per-screen placement.
   ============================================================ */

/* ---- A daylight gallery: white walls, soft shadows, films as framed prints ---- */
body.is-room{ background:var(--paper); }
.room{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(193,18,31,.05), transparent 62%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 55%, var(--paper) 100%);
  color:var(--ink);
  padding-bottom:clamp(40px,6vh,80px);
}

/* ---- Head ---- */
.room__head{
  position:relative; z-index:3; max-width:var(--maxw); margin:0 auto;
  padding:clamp(112px,15vh,170px) var(--gut) 0; text-align:center;
}
.room__eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-ui); font-size:12px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--crimson-hi);
}
.room__eyebrow{ color:var(--crimson); }
.room__eyebrow i{ width:9px; height:9px; border-radius:50%; background:var(--crimson); box-shadow:0 0 12px 1px rgba(193,18,31,.35); }
.room__title{
  margin-top:16px; font-family:var(--font-display); font-weight:600;
  font-size:clamp(38px,7vw,92px); line-height:1; letter-spacing:-.03em; color:var(--ink);
}
.room__title em{ font-family:var(--font-accent); font-style:italic; font-weight:400; color:var(--crimson); }
.room__lead{
  margin:18px auto 0; max-width:52ch; font-family:var(--font-ui);
  font-size:clamp(14.5px,1.2vw,17px); line-height:1.65; color:var(--ink-2);
}

/* ---- Stage ---- */
/* full-bleed: the room is a space, not a boxed widget.
   .room is already full-width, so NO 100vw hack — 100vw counts the scrollbar
   and would shove the whole room ~8px off-centre. */
.room__stage{
  position:relative; z-index:2; overflow:hidden;
  margin-top:clamp(18px,3vh,38px);
}

/* gallery floor: a soft shadow pooling under the films, with a faint grid */
.room__floor{
  position:absolute; left:0; right:0; bottom:0; height:38%; z-index:0; pointer-events:none;
  background:
    radial-gradient(62% 100% at 50% 100%, rgba(22,19,15,.09), transparent 72%),
    linear-gradient(180deg, transparent, rgba(22,19,15,.03) 60%, transparent);
}
.room__floor::after{
  content:""; position:absolute; inset:auto 0 0 0; height:100%;
  background-image:
    repeating-linear-gradient(90deg, rgba(22,19,15,.05) 0 1px, transparent 1px 8.5%),
    repeating-linear-gradient(180deg, rgba(22,19,15,.05) 0 1px, transparent 1px 22%);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 55%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 55%, transparent);
  opacity:.6;
}
/* daylight wash instead of projector haze */
.room__haze{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.7;
  background:
    radial-gradient(46% 40% at 22% 26%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(45% 38% at 78% 62%, rgba(193,18,31,.045), transparent 70%);
  animation:fogdrift 30s ease-in-out infinite alternate;
}
.room__beam{
  position:absolute; inset:-10% 0 auto 0; height:70%; z-index:0; pointer-events:none;
  opacity:.6;
  background:conic-gradient(from 190deg at 50% -14%, transparent, rgba(255,255,255,.9) 7%, transparent 16%);
}

/* ---- 3D viewport ---- */
.room__viewport{
  position:relative; z-index:2;
  height:clamp(470px,72vh,790px);
  /* padding lifts the ring clear of the caption layer overlaid at the bottom */
  padding-bottom:clamp(115px,16vh,185px);
  perspective:1500px; perspective-origin:50% 42%;
  /* NB: no mask/filter here — either can flatten the preserve-3d context.
     Depth falloff is handled by per-screen opacity (--d) instead. */
  cursor:grab; touch-action:pan-y;
}
.room__viewport.is-dragging{ cursor:grabbing; }
.room__world{
  position:absolute; inset:0; margin:auto;
  width:var(--scrw,420px); height:0;
  transform-style:preserve-3d; will-change:transform;
  /* no-JS fallback: pulled back by the default radius so nothing is magnified */
  transform:rotateX(-4deg) translateZ(-560px) rotateY(0deg);
}

/* ---- A screen ---- */
.scr{
  position:absolute; top:50%; left:0;
  width:var(--scrw,420px); margin-top:calc(var(--scrh,236px) / -2);
  transform-style:preserve-3d; cursor:pointer;
  /* --a angle, --r radius set by JS */
  transform:rotateY(var(--a,0deg)) translateZ(var(--r,560px));
  opacity:calc(1 - var(--d,0) * .74);
  transition:opacity .8s var(--ease);
}
/* While the room is actually moving, JS rewrites --d every frame — the easing
   transition would fight it and lag the dimming behind the spin. Drop it. */
.room__world.is-spinning .scr{ transition:none; }
.scr__frame{
  position:relative; width:100%; height:var(--scrh,236px);
  overflow:hidden; border-radius:4px; background:var(--card);
  border:1px solid var(--hairline-2);
  box-shadow:0 30px 60px -34px rgba(22,19,15,.45);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease), transform .6s var(--ease);
}
.scr__frame img,
.scr__frame video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* on a light wall the unfocused films recede by desaturating, not by going dark */
  filter:saturate(.5) brightness(1.02) contrast(.96);
  transition:filter .7s var(--ease);
}
.scr__frame video{ opacity:0; transition:opacity .55s var(--ease), filter .7s var(--ease); }
/* vertical films: show the whole frame, letterboxed, never cropped */
.scr--v .scr__frame img,
.scr--v .scr__frame video{ object-fit:contain; background:var(--paper-soft); }

/* the film number, floating off the screen edge */
.scr__tag{
  position:absolute; top:-14px; left:-10px; z-index:4;
  font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3.4vw,46px);
  line-height:1; letter-spacing:-.03em;
  color:transparent; -webkit-text-stroke:1px rgba(22,19,15,.3);
  transition:-webkit-text-stroke-color .5s var(--ease), color .5s var(--ease);
}

/* game-style targeting brackets on the focused screen */
.scr__brackets{ position:absolute; inset:8px; z-index:3; pointer-events:none; opacity:0; transition:opacity .45s var(--ease), inset .45s var(--ease); }
.scr__brackets::before,
.scr__brackets::after{
  content:""; position:absolute; width:26px; height:26px;
  border:2px solid var(--crimson);
}
.scr__brackets::before{ top:0; left:0; border-right:none; border-bottom:none; }
.scr__brackets::after{ bottom:0; right:0; border-left:none; border-top:none; }

/* light spill behind the focused screen */
/* on a light wall, the focused film is grounded by a soft cast shadow rather
   than a glow — a bloom on paper just reads as muddy */
.scr__glow{
  position:absolute; inset:-16% -10%; z-index:0; pointer-events:none; opacity:0;
  /* a radial gradient is already soft — no blur filter, which would cost a
     separate compositing pass on every screen */
  background:radial-gradient(52% 52% at 50% 58%, rgba(22,19,15,.22), transparent 72%);
  transition:opacity .7s var(--ease);
}

/* floor reflection */
.scr__reflect{
  position:absolute; top:calc(var(--scrh,236px) + 4px); left:0; z-index:0;
  width:100%; height:var(--scrh,236px); overflow:hidden; pointer-events:none;
  transform:scaleY(-1); opacity:.1;
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 62%);
          mask-image:linear-gradient(180deg, #000, transparent 62%);
  transition:opacity .7s var(--ease);
}
.scr__reflect img{ width:100%; height:100%; object-fit:cover; filter:saturate(.5) brightness(1.06); }
.scr--v .scr__reflect img{ object-fit:contain; }

/* ---- Focused screen: comes to full colour ---- */
.scr.is-active{ opacity:1; cursor:default; }
.scr.is-active .scr__frame{
  border-color:rgba(193,18,31,.4);
  box-shadow:0 46px 90px -38px rgba(22,19,15,.55), 0 0 0 1px rgba(193,18,31,.12);
}
.scr.is-active .scr__frame img,
.scr.is-active .scr__frame video{ filter:saturate(1.04) brightness(1) contrast(1.02); }
.scr.is-active.is-playing .scr__frame video{ opacity:1; }
.scr.is-active .scr__brackets{ opacity:1; inset:-9px; }
.scr.is-active .scr__glow{ opacity:1; }
.scr.is-active .scr__reflect{ opacity:.2; }
.scr.is-active .scr__tag{ -webkit-text-stroke-color:var(--crimson); }
.scr:not(.is-active):hover .scr__frame{ border-color:var(--hairline); transform:translateY(-5px); box-shadow:0 40px 74px -36px rgba(22,19,15,.5); }
.scr:not(.is-active):hover .scr__frame img{ filter:saturate(.85) brightness(1); }
.scr:focus-visible{ outline:none; }
.scr:focus-visible .scr__frame{ outline:2px solid var(--crimson); outline-offset:5px; }

/* ---- Edge navigation: tall invisible hit zones on the room itself ---- */
.room__edge{
  position:absolute; top:0; bottom:clamp(120px,17%,190px); z-index:6;
  width:clamp(58px,9vw,120px); cursor:pointer; border:none; background:none;
  display:grid; place-items:center; color:var(--ink-3);
  transition:color .4s var(--ease), background .5s var(--ease);
}
.room__edge--l{ left:0; background:linear-gradient(90deg, rgba(246,243,237,.75), transparent); }
.room__edge--r{ right:0; background:linear-gradient(270deg, rgba(246,243,237,.75), transparent); }
.room__edge svg{ width:30px; height:30px; transition:transform .45s var(--ease); }
.room__edge:hover{ color:var(--crimson); }
.room__edge--l:hover{ background:linear-gradient(90deg, rgba(193,18,31,.09), transparent); }
.room__edge--r:hover{ background:linear-gradient(270deg, rgba(193,18,31,.09), transparent); }
.room__edge--l:hover svg{ transform:translateX(-5px); }
.room__edge--r:hover svg{ transform:translateX(5px); }
.room__edge:focus-visible{ outline:2px solid var(--crimson-hi); outline-offset:-6px; }

/* ---- One caption layer, overlaid on the bottom of the room ---- */
.room__bar{
  position:absolute; left:0; right:0; bottom:0; z-index:5; pointer-events:none;
  padding:clamp(46px,8vh,90px) var(--gut) clamp(22px,3.4vh,34px);
  background:linear-gradient(180deg, transparent, rgba(246,243,237,.88) 46%, var(--paper));
  transition:opacity .5s var(--ease);
}
.room__bar > *{ pointer-events:auto; }
.room__bar .room__strip,
.room__bar .room__caption{ max-width:var(--maxw); margin:0 auto; }

/* film-strip index: one segment per film */
.room__strip{ display:flex; align-items:center; gap:5px; width:min(460px,58%); margin-bottom:clamp(16px,2.4vh,24px); }
.room__tick{
  flex:1; height:3px; min-width:6px; padding:0; border:none; cursor:pointer; border-radius:2px;
  background:rgba(22,19,15,.16); transition:background .4s var(--ease), transform .4s var(--ease);
}
.room__tick:hover{ background:rgba(22,19,15,.42); transform:scaleY(1.8); }
.room__tick.is-active{
  background:var(--crimson); transform:scaleY(2.2);
  box-shadow:0 0 10px 0 rgba(193,18,31,.4);
}
.room__tick:focus-visible{ outline:2px solid var(--crimson); outline-offset:4px; }

/* caption row: number, title, watch */
.room__caption{ display:flex; align-items:flex-end; gap:clamp(16px,3vw,36px); }
.room__num{ display:flex; align-items:baseline; gap:4px; font-family:var(--font-display); letter-spacing:-.03em; flex:0 0 auto; }
.room__num b{ font-size:clamp(30px,4vw,58px); font-weight:600; color:var(--crimson); line-height:.9; }
.room__num i{ font-style:normal; font-size:12.5px; color:var(--ink-3); }
.room__now{ min-width:0; flex:1 1 auto; }
.room__now h2{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(21px,2.6vw,38px); line-height:1.06; letter-spacing:-.025em; color:var(--ink);
}
.room__now span{
  display:block; margin-top:7px; font-family:var(--font-ui); font-size:12px;
  /* ink-2, not ink-3: at 12px uppercase on paper, ink-3 only reaches 3.35:1 */
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2);
}
.room__watch{
  display:inline-flex; align-items:center; gap:11px; flex:0 0 auto; cursor:pointer;
  font-family:var(--font-ui); font-size:13.5px; font-weight:600; letter-spacing:.02em;
  padding:10px 22px 10px 11px; border-radius:100px; min-height:46px;
  color:var(--ink); border:1px solid var(--hairline);
  background:var(--card);
  box-shadow:0 10px 26px -18px rgba(22,19,15,.4);
  transition:.4s var(--ease);
}
.room__watch .circ{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--crimson); color:#fff; transition:transform .4s var(--ease), background .4s;
}
.room__watch .circ svg{ width:12px; height:12px; }
.room__watch:hover{ background:var(--crimson); border-color:var(--crimson); color:#fff; }
.room__watch:hover .circ{ transform:scale(1.14); background:#fff; color:var(--crimson); }

/* the tour takes the caption layer's place while it runs */
.room.is-touring .room__bar{ opacity:0; pointer-events:none; }

/* ---- Hint, quiet and below the room ---- */
.room__hint{
  position:relative; z-index:4; text-align:center;
  padding:clamp(16px,2.4vh,26px) var(--gut) 0;
  font-family:var(--font-ui); font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-2);   /* instructional text must pass AA */
}
.room__hint i{ font-style:normal; color:var(--crimson); margin:0 4px; }
.room__hint kbd{
  font-family:var(--font-ui); font-size:10.5px; padding:2px 6px; border-radius:4px;
  border:1px solid var(--hairline); color:var(--ink-2);
}
@media (hover:none){ .room__hint kbd{ display:none; } }

/* ---- Guided tour: start button ---- */
.room__tour-start{
  display:inline-flex; align-items:center; gap:12px; cursor:pointer;
  margin-top:clamp(22px,3vh,32px); padding:11px 24px 11px 13px;
  font-family:var(--font-ui); font-size:14px; font-weight:600; letter-spacing:.02em;
  color:#fff; border:none; border-radius:100px; min-height:48px;
  background:linear-gradient(100deg,#FF5F63,#E5484D 60%,#B3121F);
  box-shadow:0 18px 42px -18px rgba(229,72,77,.75);
  transition:.4s var(--ease);
}
.room__tour-start .circ{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.16); transition:transform .4s var(--ease), background .4s;
}
.room__tour-start .circ svg{ width:13px; height:13px; }
.room__tour-start:hover{ filter:brightness(1.06); transform:translateY(-2px); }
.room__tour-start:hover .circ{ transform:scale(1.12); background:rgba(255,255,255,.28); }
.room.is-touring .room__tour-start{ opacity:.35; pointer-events:none; }

/* ---- Guided tour: the narration panel ---- */
.tour{
  position:absolute; z-index:7;
  left:50%; transform:translateX(-50%);
  bottom:clamp(18px,3vh,32px);
  width:min(980px, calc(100% - var(--gut) * 2));
  border:1px solid var(--hairline); border-radius:10px; overflow:hidden;
  background:var(--card);
  box-shadow:0 30px 70px -30px rgba(22,19,15,.45);
}
.tour[hidden]{ display:none; }
.tour__bar{ height:2px; width:100%; background:rgba(22,19,15,.1); }
.tour__bar span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--crimson),var(--crimson-hi)); }
.tour__inner{
  display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,3vw,32px);
  padding:clamp(16px,2.2vw,24px) clamp(18px,2.6vw,30px);
}
.tour__body{ min-width:0; }
.tour__step{
  display:block; font-family:var(--font-ui); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--crimson); margin-bottom:8px;
}
.tour__step b,.tour__step i{ font-style:normal; font-weight:600; }
.tour__note{
  font-family:var(--font-ui); font-size:clamp(14px,1.15vw,16.5px); line-height:1.6;
  color:var(--ink-2); max-width:62ch; margin:0;
}
.tour__ctrl{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.tour__ctrl button{
  cursor:pointer; font-family:var(--font-ui); font-size:12.5px; font-weight:600;
  letter-spacing:.03em; padding:0 16px; min-height:40px; border-radius:8px;
  color:var(--ink); background:var(--paper-soft);
  border:1px solid var(--hairline); transition:.3s var(--ease);
}
.tour__ctrl button:hover{ background:var(--crimson); border-color:var(--crimson); color:#fff; }
.tour__ctrl button.is-quiet{ background:transparent; color:var(--ink-3); border-color:transparent; }
.tour__ctrl button.is-quiet:hover{ color:var(--ink); background:var(--paper-soft); border-color:transparent; }

/* while touring, the manual chrome steps out of the way */
.room.is-touring .room__hint{ opacity:.25; transition:opacity .5s var(--ease); }
.room.is-touring .room__edge{ opacity:.35; }

@media (max-width:760px){
  .tour__inner{ flex-direction:column; align-items:flex-start; gap:14px; }
  .tour__ctrl{ width:100%; }
  .tour__ctrl button{ flex:1; padding:0 10px; }
}

/* ---- Bottom CTA sits on the dark room ---- */
.room .workpage__cta{ position:relative; z-index:3; }
.room .workpage__cta p{ color:var(--ink); }

/* ---- Responsive ---- */
@media (max-width:900px){
  .room__viewport{ perspective:1100px; height:clamp(420px,60vh,560px); }
  .room__caption{ align-items:flex-start; gap:16px; flex-wrap:wrap; }
  .room__watch{ order:3; }
}
@media (max-width:640px){
  .room__viewport{ perspective:900px; height:clamp(380px,54vh,470px); padding-bottom:clamp(130px,20vh,170px); }
  /* reflections are the first thing to go on phones — pure memory saving */
  .scr__reflect{ display:none; }
  .room__floor{ height:26%; }
  .room__strip{ width:100%; }
  .room__caption{ gap:12px; }
  .room__num b{ font-size:30px; }
  .room__watch{ width:100%; justify-content:center; }
  .room__edge{ width:44px; bottom:clamp(150px,26%,210px); }
  .room__edge svg{ width:22px; height:22px; }
}

/* ---- Graceful fallback: no motion → an honest flat gallery ---- */
@media (prefers-reduced-motion:reduce){
  .room__stage{ width:auto; margin-left:auto; }
  .room__viewport{
    perspective:none; height:auto; cursor:auto; padding-bottom:0;
    -webkit-mask-image:none; mask-image:none;
  }
  .room__world{
    position:static; width:100%; height:auto; transform:none !important;
    max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);
    display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
    gap:clamp(20px,3vw,32px);
  }
  .scr{
    position:static; width:auto; margin-top:0; opacity:1 !important;
    transform:none !important;
  }
  .scr__frame{ height:auto; aspect-ratio:16/9; }
  .scr__reflect,.scr__glow,.room__beam,.room__haze{ display:none !important; }
  .room__edge,.room__hint{ display:none; }
  .scr__brackets{ display:none; }
  /* caption + tour become normal flow blocks, no overlay scrim */
  .room__bar{
    position:static; background:none; padding:clamp(24px,4vh,40px) var(--gut) 0;
  }
  .tour{
    position:static; transform:none; margin:clamp(20px,3vh,32px) auto 0;
    width:calc(100% - var(--gut) * 2);
  }
}

/* ============================================================
   ✦ 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; }
}