/* ═══════════════════════════════════════════════════
   CULTR MEDIA
   Palette sampled directly from the logo:
   cream #F8F8F0  ·  red #DE3135
   Red is treated as a LIGHT SOURCE, never a flat fill.
   ═══════════════════════════════════════════════════ */

:root{
  --black:      #060607;
  --black-2:    #0B0B0D;
  --black-3:    #131316;
  --line:       #232327;

  --red:        #DE3135;
  --red-hot:    #FF3B2F;
  --red-deep:   #7E1114;

  --cream:      #F8F8F0;
  --ash:        #8A8781;
  --ash-dim:    #56544F;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gut: clamp(20px, 5vw, 72px);
  --max: 1440px;

  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; }

/* author display rules must never beat the hidden attribute */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--red); color:var(--cream); }

:focus-visible{
  outline:2px solid var(--red-hot);
  outline-offset:3px;
}

/* ── film grain ───────────────────────────────── */
.grain{
  position:fixed; inset:-50%;
  pointer-events:none; z-index:400;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-6%,3%) }
  40%{ transform:translate(4%,-5%) }
  60%{ transform:translate(-3%,6%) }
  80%{ transform:translate(5%,2%) }
}

/* ── boot sequence ────────────────────────────── */
.boot{
  position:fixed; inset:0; z-index:500;
  background:var(--black);
  display:grid; place-items:center;
  transition:opacity .5s var(--ease), visibility .5s;
}
.boot.is-done{ opacity:0; visibility:hidden; }
.boot__inner{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:13px;
  letter-spacing:.14em;
}
.boot__dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--red);
  box-shadow:0 0 14px var(--red);
  animation:blink 1s steps(2) infinite;
}
.boot__label{ color:var(--red); }
.boot__tc{ color:var(--ash-dim); }

@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:.15} }

/* ── nav ──────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:300;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:16px var(--gut);
  transition:background .4s var(--ease), backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(6,6,7,.78);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav__brand img{ width:76px; height:auto; }

.nav__links{ display:flex; gap:30px; }
.nav__links a{
  font-size:14px; color:var(--ash);
  transition:color .25s;
  position:relative;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-5px;
  width:100%; height:1px; background:var(--red);
  transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__right{ display:flex; align-items:center; gap:18px; }
.nav__rec{
  display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; color:var(--ash-dim);
}
.nav__rec i{
  width:7px; height:7px; border-radius:50%;
  background:var(--red); box-shadow:0 0 10px var(--red);
  animation:blink 1.4s steps(2) infinite;
}

.nav__burger{
  display:none;
  width:40px; height:40px;
  background:none; border:1px solid var(--line);
  border-radius:50%; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav__burger span{
  display:block; width:15px; height:1.5px;
  background:var(--cream); transition:transform .3s var(--ease), opacity .3s;
}
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

/* mobile menu */
.mobile{
  position:fixed; inset:0; z-index:290;
  background:var(--black);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  font-family:var(--display);
  font-size:clamp(30px,9vw,52px);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.02em;
}
.mobile[hidden]{ display:none; }
.mobile a{ padding:6px 0; }
.mobile__cta{ color:var(--red); }

/* ── buttons ──────────────────────────────────── */
.btn{
  --bg:var(--cream); --fg:var(--black);
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bg);
  border-radius:100px;
  font-family:var(--body);
  font-size:14px; font-weight:600;
  cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             background .3s, color .3s, border-color .3s;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 34px -10px rgba(222,49,53,.7);
}
.btn__arrow{ transition:transform .3s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

.btn--sm{ padding:11px 20px; font-size:13px; }

.btn--ghost{
  --bg:transparent; --fg:var(--cream);
  border-color:var(--line);
}
.btn--ghost:hover{
  border-color:var(--red);
  color:var(--cream);
  box-shadow:0 10px 34px -14px rgba(222,49,53,.55);
}

/* ── hero ─────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  justify-content:center;
  /* bottom padding keeps the CTAs clear of the absolute bottom HUD
     on short viewports */
  padding:124px var(--gut) 104px;
  overflow:hidden;
}

.hero__stage{ position:absolute; inset:0; z-index:0; }

.hero__plates{ position:absolute; inset:0; }
.hero__plates img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  filter:grayscale(.28) contrast(1.08) brightness(.66);
  transform:scale(1.06);
  transition:opacity 1.6s var(--ease), transform 7s linear;
}
.hero__plates img.is-on{ opacity:.72; transform:scale(1.14); }

/* hero background loop — layers over the stills and fades in only once it
   can actually play, so a missing file degrades to the stills silently */
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  filter:grayscale(.28) contrast(1.08) brightness(.66);
  transform:scale(1.04);
  transition:opacity 1.4s var(--ease);
  pointer-events:none;
}
.hero__video.is-on{ opacity:.72; }

/* red light source bleeding up from behind the frame */
.hero__bloom{
  position:absolute; inset:0;
  background:
    radial-gradient(96% 60% at 50% 114%,
      rgba(255,86,58,.82) 0%, rgba(230,52,50,.42) 30%,
      rgba(140,20,24,.16) 55%, transparent 76%),
    radial-gradient(56% 44% at 6% 2%, rgba(168,22,26,.42) 0%, transparent 62%),
    /* directional scrim: weights the copy side so text stays readable on any
       frame, while the right of the picture stays bright */
    linear-gradient(100deg,
      rgba(6,6,7,.8) 0%, rgba(6,6,7,.52) 32%,
      rgba(6,6,7,.16) 58%, transparent 78%),
    /* kept light enough to read the footage through, dark enough at the
       top and bottom edges to hold the nav and the headline */
    linear-gradient(180deg,
      rgba(6,6,7,.74) 0%, rgba(6,6,7,.18) 38%,
      rgba(6,6,7,.36) 74%, rgba(6,6,7,.58) 100%);
}
.hero__scan{
  position:absolute; inset:0;
  background:repeating-linear-gradient(180deg,
    rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}

/* viewfinder corner brackets */
.vf{ position:absolute; inset:clamp(14px,2.4vw,30px); z-index:2; pointer-events:none; }
.vf__c{
  position:absolute; width:32px; height:32px;
  border:1.5px solid rgba(248,248,240,.7);
}
.vf__c--tl{ top:0; left:0; border-right:0; border-bottom:0; }
.vf__c--tr{ top:0; right:0; border-left:0; border-bottom:0; }
.vf__c--bl{ bottom:0; left:0; border-right:0; border-top:0; }
.vf__c--br{ bottom:0; right:0; border-left:0; border-top:0; }

.hero__hud{
  position:absolute; z-index:3;
  left:calc(var(--gut) + 4px); right:calc(var(--gut) + 4px);
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ash-dim);
}
.hero__hud--top{ top:96px; }
.hero__hud--bottom{ bottom:34px; justify-content:flex-end; }

.hud__rec{ display:flex; align-items:center; gap:8px; color:var(--red); }
.hud__rec i{
  width:8px; height:8px; border-radius:50%;
  background:var(--red); box-shadow:0 0 12px var(--red);
  animation:blink 1.4s steps(2) infinite;
}
.hud__tc{ color:var(--ash-dim); }

.hud__scroll{
  display:flex; align-items:center; gap:9px;
  padding:10px 0 10px 14px;          /* reaches a 44px tap target */
  color:var(--ash-dim); transition:color .3s;
}
.hud__scroll:hover{ color:var(--cream); }
.hud__scroll i{
  width:1px; height:26px;
  background:linear-gradient(180deg,var(--red),transparent);
  animation:drop 1.8s var(--ease) infinite;
}
@keyframes drop{ 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 100%{transform:scaleY(0);transform-origin:bottom} }

.hero__inner{ position:relative; z-index:3; max-width:var(--max); width:100%; margin:0 auto; }

.hero__eyebrow{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash); margin:0 0 22px;
}

.hero__h1{
  font-family:var(--display);
  /* four lines, so the scale sits lower than a three-line hero would take */
  font-size:clamp(34px, 8.6vw, 130px);
  font-weight:900;
  font-stretch:112%;
  line-height:.87;
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin:0;
}
.hero__h1 .l{ display:block; overflow:hidden; }
.hero__h1 .l > *{ display:block; }
.hero__h1 .dot{ display:inline; color:var(--red); }

.hero__sub{
  max-width:44ch;
  margin:30px 0 0;
  font-size:clamp(15px,1.6vw,19px);
  /* lighter than the section ledes: this one sits over moving footage */
  color:#C9C6BE;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; }

/* ── ticker ───────────────────────────────────── */
.ticker{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:16px 0;
  overflow:hidden;
  background:var(--black-2);
}
.ticker__row{
  display:flex; align-items:center; gap:34px;
  width:max-content;
  animation:slide 34s linear infinite;
  font-family:var(--display);
  font-size:14px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--ash);
  padding-left:34px;
}
.ticker__row b{
  width:6px; height:6px; border-radius:50%;
  background:var(--red); flex:none;
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── section shell ────────────────────────────── */
.sec{
  position:relative;
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(80px,11vw,150px) var(--gut);
}

.sec__head{ margin-bottom:clamp(44px,6vw,76px); }
.sec__head--center{ text-align:center; max-width:660px; margin-left:auto; margin-right:auto; }

.tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ash); margin:0 0 20px;
}
.tag i{
  width:7px; height:7px; border-radius:50%;
  background:var(--red); box-shadow:0 0 10px var(--red);
}
.sec__head--center .tag{ justify-content:center; }

.sec__title{
  font-family:var(--display);
  font-size:clamp(38px,6.4vw,88px);
  font-weight:900;
  font-stretch:108%;
  line-height:.92;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:0;
}
.sec__lede{
  max-width:46ch;
  margin:22px 0 0;
  font-size:clamp(15px,1.5vw,17px);
  color:var(--ash);
}
.sec__head--center .sec__lede{ margin-left:auto; margin-right:auto; }

/* ── work grid ────────────────────────────────── */
.work{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(14px,1.7vw,24px);
}
.card{
  grid-column:span 2;
  cursor:pointer;
  position:relative;
  /* isolate creates a stacking context so the ::before under-glow at
     z-index:-1 sits behind the card but still above the body background */
  isolation:isolate;
}
.card--wide{ grid-column:span 4; }
.card--full{ grid-column:span 6; }
/* Shorts posters are 9:16 — a 16:9 crop would throw most of the frame away */
.card--vert .card__media{ aspect-ratio:4/5; }
/* the tall card fills its two grid rows instead of deriving width
   from an aspect ratio, which would push it past its column */
.card--tall{
  grid-column:span 2; grid-row:span 2;
  display:flex; flex-direction:column;
}

.card__media{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:var(--black-3);
  aspect-ratio:16/9;
  border:1px solid var(--line);
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.card--tall .card__media{
  aspect-ratio:auto;
  flex:1 1 auto;
  min-height:0;
}

.card__media img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(.4) brightness(.82) contrast(1.06);
  transform:scale(1.02);
  transition:transform .8s var(--ease), filter .55s var(--ease);
}

/* red light source rising from behind the card on hover */
.card::before{
  content:'';
  position:absolute; inset:auto 8% -14px 8%;
  height:56px;
  background:radial-gradient(60% 100% at 50% 100%, rgba(255,59,47,.85), transparent 72%);
  filter:blur(20px);
  opacity:0; z-index:-1;
  transition:opacity .5s var(--ease);
}
.card:hover::before,
.card:focus-visible::before{ opacity:1; }

.card:hover .card__media,
.card:focus-visible .card__media{
  border-color:rgba(222,49,53,.55);
  box-shadow:0 22px 60px -26px rgba(222,49,53,.75);
}
.card:hover .card__media img,
.card:focus-visible .card__media img{
  transform:scale(1.075);
  filter:grayscale(0) brightness(1) contrast(1.02);
}

.card__play{
  position:absolute; inset:0; margin:auto;
  width:60px; height:60px;
  border-radius:50%;
  background:rgba(6,6,7,.5);
  backdrop-filter:blur(6px);
  border:1px solid rgba(248,248,240,.28);
  display:grid; place-items:center;
  opacity:0; transform:scale(.86);
  transition:opacity .4s var(--ease), transform .4s var(--ease), background .3s;
}
.card__play i{
  width:0; height:0;
  border-left:12px solid var(--cream);
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  margin-left:3px;
}
.card:hover .card__play,
.card:focus-visible .card__play{ opacity:1; transform:scale(1); }
.card:hover .card__play{ background:var(--red); border-color:var(--red); }

/* "2 films · 12 photos" — tells you a project card holds more than one thing */
.card__count{
  position:absolute; left:12px; bottom:12px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.11em; text-transform:uppercase;
  padding:5px 10px; border-radius:100px;
  background:rgba(6,6,7,.72);
  border:1px solid var(--line);
  color:var(--cream);
  backdrop-filter:blur(6px);
}

.card__ratio{
  position:absolute; top:12px; right:12px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.1em;
  padding:4px 8px; border-radius:4px;
  background:rgba(6,6,7,.65);
  border:1px solid var(--line);
  color:var(--ash);
}

.card__meta{
  position:relative;
  padding:16px 2px 0;
}
.card__meta h3{
  font-family:var(--display);
  font-size:clamp(16px,1.75vw,21px);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.015em;
  line-height:1.15;
  margin:0;
}
.card__sub{
  margin:7px 0 0;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--red);
}

/* ── clients ──────────────────────────────────── */
.clients{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:34px 0;
  background:var(--black-2);
  overflow:hidden;
}
/* sits below the marquee as the payoff line, not above it as a label —
   so it reads brighter than the client names it signs off */
.clients__label{
  text-align:center;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ash);
  margin:26px 0 0;
}
.clients__marquee{ overflow:hidden; }
.clients__row{
  display:flex; align-items:center; gap:clamp(30px,4vw,56px);
  width:max-content;
  padding-left:clamp(30px,4vw,56px);
  animation:slide 46s linear infinite;
}
.clients__row img{
  height:clamp(30px,3.4vw,46px);
  width:auto; flex:none;
  /* the artwork is already pure white; opacity is what holds them back from
     shouting louder than the work above */
  opacity:.62;
  transition:opacity .4s var(--ease);
}
.clients__row img:hover{ opacity:1; }
/* optical sizing — matched by eye, not by number: a tall narrow mark, a long
   wordmark and a round badge all need different heights to carry equal weight */
.clients__row img.is-tall{ height:clamp(38px,4.4vw,58px); }   /* NBA        */
.clients__row img.is-wide{ height:clamp(24px,2.7vw,36px); }   /* wordmarks  */
.clients__row img.is-mark{ height:clamp(35px,4vw,53px); }     /* round badges */
.clients__row i{
  width:7px; height:7px; border-radius:50%;
  background:var(--red); flex:none; opacity:.7;
}

/* ── services ─────────────────────────────────── */
/* six services land as a clean 3 × 2 — auto-fit left dead cells */
.svc{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--line);
}
.svc__item:nth-child(3n){ border-right:0; }
.svc__item{
  position:relative;
  padding:36px 30px 40px;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  transition:background .45s var(--ease);
  overflow:hidden;
}
.svc__item::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:1px;
  background:linear-gradient(90deg,var(--red),transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.svc__item:hover{ background:var(--black-2); }
.svc__item:hover::after{ transform:scaleX(1); }

.svc__no{
  display:block;
  font-family:var(--display);
  font-size:clamp(18px,2vw,24px);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.015em;
  margin-bottom:14px;
}
.svc__item p{ margin:0; color:var(--ash); font-size:14.5px; max-width:38ch; }

/* ── approach ─────────────────────────────────── */
.phase{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(20px,2.6vw,34px);
  counter-reset:none;
}
.phase__item{
  position:relative;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.phase__item::before{
  content:'';
  position:absolute; top:-1px; left:0;
  width:38px; height:2px;
  background:var(--red);
  box-shadow:0 0 12px var(--red);
}
.phase__slate{
  display:inline-block;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--black);
  background:var(--cream);
  padding:4px 9px; border-radius:3px;
  margin-bottom:16px;
}
.phase__item h3{
  font-family:var(--display);
  font-size:clamp(19px,2.1vw,25px);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.015em;
  margin:0 0 10px;
}
.phase__item p{ margin:0; color:var(--ash); font-size:14.5px; }

/* ── studio ───────────────────────────────────── */
.studio{
  display:grid;
  grid-template-columns:1fr;
  max-width:62ch;
}
.studio__copy p{ color:var(--ash); max-width:50ch; font-size:clamp(15px,1.5vw,17px); }
.studio__copy .sec__title{ margin-bottom:26px; }
.studio__copy .btn{ margin-top:16px; }

/* ── testimonials ─────────────────────────────── */
.voices{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2vw,26px);
  align-items:start;
}
.voice{
  position:relative;
  margin:0;
  padding:30px 28px 26px;
  background:var(--black-2);
  border:1px solid var(--line);
  border-radius:16px;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease);
}
/* the quote mark is the red accent doing the work, not a coloured panel */
.voice::before{
  content:'”';
  position:absolute; top:6px; right:22px;
  font-family:var(--display);
  font-size:64px; font-weight:900; line-height:1;
  color:var(--red);
  opacity:.28;
}
.voice:hover{
  border-color:rgba(222,49,53,.4);
  box-shadow:0 18px 50px -30px rgba(222,49,53,.7);
}
.voice blockquote{
  margin:0 0 22px;
  font-size:clamp(14.5px,1.45vw,16px);
  line-height:1.65;
  color:var(--ash);
  max-width:52ch;
}
.voice figcaption{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.voice figcaption b{
  font-family:var(--display);
  font-size:15px; font-weight:800;
  text-transform:uppercase; letter-spacing:-.01em;
  color:var(--cream);
}
.voice figcaption span{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ash-dim);
}

/* ── enquiry form ─────────────────────────────── */
.sec--start{ overflow:hidden; }
.start__bloom{
  position:absolute; inset:auto 0 -220px 0;
  height:420px;
  background:radial-gradient(50% 100% at 50% 100%, rgba(222,49,53,.3), transparent 70%);
  filter:blur(50px);
  pointer-events:none;
}

.form{
  position:relative;
  max-width:760px; margin:0 auto;
  background:var(--black-2);
  border:1px solid var(--line);
  border-radius:20px;
  padding:clamp(24px,3.6vw,46px);
}

.form__bar{
  height:2px; background:var(--line);
  border-radius:2px; overflow:hidden;
  margin-bottom:34px;
}
.form__bar span{
  display:block; height:100%; width:25%;
  background:var(--red);
  box-shadow:0 0 12px var(--red);
  transition:width .5s var(--ease);
}

.step{
  border:0; margin:0; padding:0;
  display:none;
}
.step.is-on{ display:block; animation:stepIn .45s var(--ease); }
@keyframes stepIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.step legend{
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--display);
  font-size:clamp(21px,2.6vw,30px);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.02em;
  margin-bottom:24px;
  padding:0;
}
.step__n{
  font-family:var(--mono); font-size:12px;
  font-weight:400; letter-spacing:.1em;
  color:var(--red);
}

.opts{ display:flex; flex-wrap:wrap; gap:10px; }
.opts--grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }

.opt{ position:relative; display:block; cursor:pointer; }
.opt input{
  position:absolute; opacity:0;
  width:100%; height:100%; margin:0; cursor:pointer;
}
.opt span{
  display:flex; align-items:center; gap:10px;
  padding:14px 20px;
  border:1px solid var(--line);
  border-radius:100px;
  font-size:14px;
  color:var(--ash);
  transition:border-color .3s, color .3s, background .3s, box-shadow .3s;
}
.opt span::before{
  content:'';
  width:8px; height:8px; border-radius:50%;
  border:1px solid var(--ash-dim);
  flex:none;
  transition:background .25s, border-color .25s, box-shadow .25s;
}
.opt:hover span{ border-color:var(--ash-dim); color:var(--cream); }
.opt input:checked + span{
  border-color:var(--red);
  color:var(--cream);
  background:rgba(222,49,53,.08);
  box-shadow:0 6px 26px -14px rgba(222,49,53,.85);
}
.opt input:checked + span::before{
  background:var(--red);
  border-color:var(--red);
  box-shadow:0 0 10px var(--red);
}
.opt input:focus-visible + span{ outline:2px solid var(--red-hot); outline-offset:3px; }

.fields{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:block; }
.field--full{ grid-column:1 / -1; }
.field > span{
  display:block;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--ash-dim);
  margin-bottom:8px;
}
.field > span i{ font-style:normal; text-transform:none; letter-spacing:0; opacity:.65; }
.field input, .field textarea{
  width:100%;
  padding:14px 16px;
  background:var(--black);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--cream);
  font-family:var(--body); font-size:15px;
  transition:border-color .3s, box-shadow .3s;
  resize:vertical;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ash-dim); }
.field input:focus, .field textarea:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(222,49,53,.14);
}

.err{
  margin:14px 0 0;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.08em;
  color:var(--red-hot);
  opacity:0; height:0; overflow:hidden;
  transition:opacity .3s;
}
.err.is-on{ opacity:1; height:auto; }

.form__nav{
  display:flex; align-items:center; gap:12px;
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.form__count{
  margin-left:auto;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ash-dim);
}
.form__note{
  margin:20px 0 0;
  font-size:14px;
  color:var(--ash);
  min-height:1.2em;
}
.form__note.is-ok{ color:var(--cream); }
.form__note.is-warn{ color:var(--red-hot); }

.form.is-sent .step,
.form.is-sent .form__nav,
.form.is-sent .form__bar{ display:none; }

.sent{
  text-align:center; padding:26px 0 10px;
  animation:stepIn .5s var(--ease);
}
.sent h3{
  font-family:var(--display);
  font-size:clamp(24px,3.4vw,40px);
  font-weight:900; text-transform:uppercase;
  letter-spacing:-.025em; margin:0 0 12px;
}
.sent p{ color:var(--ash); margin:0 auto; max-width:46ch; }
.sent .btn{ margin-top:24px; }
.sent--inline{ padding:0; text-align:left; }
.sent--inline .btn{ margin-top:16px; }

/* ── footer ───────────────────────────────────── */
.foot{
  border-top:1px solid var(--line);
  padding:clamp(48px,6vw,76px) var(--gut) 26px;
  max-width:var(--max); margin:0 auto;
}
.foot__top{
  display:flex; flex-wrap:wrap;
  justify-content:space-between; gap:40px;
  padding-bottom:44px;
}
.foot__brand img{ width:104px; height:auto; }
.foot__cols{ display:flex; flex-wrap:wrap; gap:clamp(34px,6vw,84px); }
.foot__cols h4{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ash-dim);
  margin:0 0 16px; font-weight:400;
}
.foot__cols a{
  display:block;
  font-size:14.5px;
  color:var(--ash);
  /* padded to a ~45px tap target — 4px made these fiddly on a phone */
  padding:11px 0;
  transition:color .25s;
}
.foot__cols a:hover{ color:var(--red); }

.foot__bar{
  display:flex; flex-wrap:wrap; gap:14px;
  justify-content:space-between;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ash-dim);
}
.foot__rec{ display:flex; align-items:center; gap:8px; }
.foot__rec i{
  width:7px; height:7px; border-radius:50%;
  background:var(--red);
  animation:blink 1.6s steps(2) infinite;
}

/* ── project view ─────────────────────────────── */
.proj{
  position:fixed; inset:0; z-index:450;
  background:rgba(4,4,5,.95);
  backdrop-filter:blur(20px);
  display:grid; place-items:start center;
  padding:clamp(10px,2.5vw,34px);
  overflow-y:auto;
  animation:fade .35s var(--ease);
}
.proj[hidden]{ display:none; }

.proj__inner{
  width:min(1180px,100%);
  background:var(--black);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 40px 130px -60px rgba(222,49,53,.6);
  animation:stepIn .45s var(--ease);
}

.proj__head{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px;
  padding:clamp(20px,2.6vw,30px);
  background:rgba(11,11,13,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.proj__client{
  margin:0 0 8px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--red);
}
.proj__title{
  margin:0;
  font-family:var(--display);
  font-size:clamp(26px,4vw,54px);
  font-weight:900; text-transform:uppercase;
  letter-spacing:-.03em; line-height:.92;
}
.proj__tags{
  margin:10px 0 0;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ash-dim);
}
.proj__x{
  flex:none;
  width:44px; height:44px; border-radius:50%;
  background:transparent; border:1px solid var(--line);
  color:var(--cream); font-size:15px; cursor:pointer;
  transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.proj__x:hover{ background:var(--red); border-color:var(--red); transform:scale(1.07); }

.proj__body{ padding:clamp(20px,2.6vw,30px); }
.proj__sec + .proj__sec{ margin-top:clamp(34px,4.5vw,56px); }
.proj__lab{
  display:flex; align-items:center; gap:9px;
  margin:0 0 18px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ash);
}
.proj__lab i{
  width:7px; height:7px; border-radius:50%;
  background:var(--red); box-shadow:0 0 10px var(--red);
}

/* films */
.films{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.film__frame{
  display:block; width:100%;
  aspect-ratio:16/9;
  border:1px solid var(--line); border-radius:12px;
  background:var(--black-3) center/cover no-repeat;
  cursor:pointer; position:relative; overflow:hidden;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.film.is-vert .film__frame{ aspect-ratio:9/16; }
iframe.film__frame{ cursor:default; }
.film__frame::after{
  content:''; position:absolute; inset:0;
  background:rgba(6,6,7,.4);
  transition:background .4s var(--ease);
}
.film__frame:hover{
  border-color:rgba(222,49,53,.55);
  box-shadow:0 20px 60px -30px rgba(222,49,53,.8);
}
.film__frame:hover::after{ background:rgba(6,6,7,.16); }
.film__play{
  position:absolute; inset:0; margin:auto; z-index:1;
  width:62px; height:62px; border-radius:50%;
  background:rgba(6,6,7,.55); backdrop-filter:blur(6px);
  border:1px solid rgba(248,248,240,.3);
  display:grid; place-items:center;
  transition:background .3s, border-color .3s, transform .35s var(--ease);
}
.film__play i{
  width:0; height:0; margin-left:3px;
  border-left:13px solid var(--cream);
  border-top:9px solid transparent; border-bottom:9px solid transparent;
}
.film__frame:hover .film__play{
  background:var(--red); border-color:var(--red); transform:scale(1.08);
}
.film__frame--empty{
  display:grid; place-items:center; text-align:center; padding:24px;
  cursor:default;
}
.film__frame--empty span{
  position:relative; z-index:1;
  font-family:var(--mono); font-size:11.5px; line-height:1.7; color:var(--ash);
}
.film__frame--empty code{
  color:var(--red); background:rgba(222,49,53,.1);
  padding:2px 6px; border-radius:4px;
}
.film__cap{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; margin:12px 2px 0;
}
.film__cap b{
  font-family:var(--display); font-size:15px; font-weight:800;
  text-transform:uppercase; letter-spacing:-.01em;
}
.film__cap span{ font-family:var(--mono); font-size:11.5px; color:var(--red); }

/* photo grid */
.shots{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:clamp(10px,1.2vw,16px);
}
.shot{
  padding:0; border:1px solid var(--line); border-radius:10px;
  overflow:hidden; cursor:pointer; background:var(--black-3);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.25) brightness(.92);
  transition:transform .6s var(--ease), filter .45s var(--ease);
}
.shot:hover{
  border-color:rgba(222,49,53,.5);
  box-shadow:0 16px 44px -24px rgba(222,49,53,.8);
}
.shot:hover img{ transform:scale(1.06); filter:none; }

/* ── photo viewer ─────────────────────────────── */
.pv{
  position:fixed; inset:0; z-index:470;
  background:rgba(3,3,4,.97);
  backdrop-filter:blur(10px);
  display:grid; place-items:center;
  padding:clamp(40px,6vw,72px) clamp(14px,4vw,80px);
  animation:fade .3s var(--ease);
}
.pv[hidden]{ display:none; }
.pv__fig{ margin:0; display:grid; place-items:center; gap:14px; max-height:100%; }
.pv__fig img{
  max-width:100%; max-height:82vh;
  object-fit:contain; border-radius:8px;
  animation:stepIn .4s var(--ease);
}
.pv__fig figcaption{
  font-family:var(--mono); font-size:11.5px;
  letter-spacing:.14em; color:var(--ash-dim);
}
.pv__x, .pv__nav{
  position:absolute; z-index:2;
  width:46px; height:46px; border-radius:50%;
  background:rgba(11,11,13,.82); border:1px solid var(--line);
  color:var(--cream); font-size:16px; cursor:pointer;
  display:grid; place-items:center;
  transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.pv__x:hover, .pv__nav:hover{
  background:var(--red); border-color:var(--red); transform:scale(1.08);
}
.pv__x{ top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); }
.pv__nav{ top:50%; margin-top:-23px; }
.pv__nav--prev{ left:clamp(10px,2vw,26px); }
.pv__nav--next{ right:clamp(10px,2vw,26px); }

/* ── scroll reveal ────────────────────────────── */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width:1024px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav__rec{ display:none; }
  .studio{ grid-template-columns:1fr; }
  .svc{ grid-template-columns:repeat(2,1fr); }
  .svc__item:nth-child(3n){ border-right:1px solid var(--line); }
  .svc__item:nth-child(2n){ border-right:0; }
  .card--wide{ grid-column:span 3; }
  .card--full{ grid-column:span 6; }
/* Shorts posters are 9:16 — a 16:9 crop would throw most of the frame away */
.card--vert .card__media{ aspect-ratio:4/5; }
  .card{ grid-column:span 3; }
  .card--tall{ grid-column:span 3; grid-row:auto; }
  .card--tall .card__media{ aspect-ratio:9/16; }
}

@media (max-width:720px){
  .nav__right .btn--sm{ display:none; }
  .hero{ padding-top:106px; }
  .hero__hud--top{ top:84px; }
  /* narrowing Archivo's width axis fits ~8px more type per line on phones,
     so the four-line headline still reads big instead of shrinking to fit */
  .hero__h1{ font-stretch:88%; font-size:clamp(34px, 11vw, 42px); }
  .work{ grid-template-columns:1fr; }
  .card, .card--wide, .card--tall, .card--full{ grid-column:span 1; }
  .card--tall .card__media{ aspect-ratio:4/5; }
  .fields{ grid-template-columns:1fr; }
  .voices{ grid-template-columns:1fr; }
  .svc{ grid-template-columns:1fr; }
  .svc__item,
  .svc__item:nth-child(3n),
  .svc__item:nth-child(2n){ border-right:0; }
  .form__nav{ flex-wrap:wrap; }
  .form__count{ width:100%; margin-left:0; order:-1; margin-bottom:6px; }
  .pv__nav{ width:42px; height:42px; }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .grain{ display:none; }
  .reveal{ opacity:1; transform:none; }
  .hero__plates img.is-on{ transform:scale(1); }
}

/* ═══════════════════════════════════════════════════
   BOOKING — persistent button + scheduling panel
   ═══════════════════════════════════════════════════ */

.bookbtn{
  position:fixed; right:0; bottom:26px; z-index:320;
  display:flex; align-items:center; gap:11px;
  padding:15px 22px 15px 20px;
  background:var(--cream); color:var(--black);
  border:1px solid var(--cream);
  border-radius:100px 0 0 100px;
  font-family:var(--body); font-size:13px; font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 16px 44px -18px rgba(0,0,0,.9);
  transform:translateX(0);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease),
             background .3s, color .3s;
}
.bookbtn svg{ width:17px; height:17px; flex:none; }
.bookbtn:hover{
  transform:translateX(-4px);
  box-shadow:0 18px 50px -16px rgba(222,49,53,.85);
}
/* tucks away while the booking panel itself is open */
.bookbtn.is-hidden{ transform:translateX(110%); }

.book{
  position:fixed; inset:0; z-index:460;
  background:rgba(4,4,5,.9);
  backdrop-filter:blur(16px);
  display:grid; place-items:center;
  padding:clamp(12px,3vw,40px);
  animation:fade .3s var(--ease);
  overflow-y:auto;
}
.book[hidden]{ display:none; }

.book__panel{
  width:min(720px,100%);
  max-height:92vh;
  display:flex; flex-direction:column;
  background:var(--black);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 40px 120px -50px rgba(222,49,53,.55);
  animation:stepIn .4s var(--ease);
}
.book__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:20px 24px;
  border-bottom:1px solid var(--line);
  background:var(--black-2);
  flex:none;
}
.book__head h2{
  display:flex; align-items:center; gap:12px;
  margin:0;
  font-family:var(--display);
  font-size:clamp(15px,1.8vw,19px);
  font-weight:800; text-transform:uppercase;
  letter-spacing:.06em;
}
.book__head svg{ width:19px; height:19px; color:var(--red); flex:none; }
.book__x{
  width:36px; height:36px; flex:none;
  border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid var(--line);
  color:var(--cream); font-size:14px;
  transition:background .3s, border-color .3s;
}
.book__x:hover{ background:var(--red); border-color:var(--red); }

.book__body{
  padding:clamp(18px,2.6vw,28px);
  overflow-y:auto;
  display:grid; gap:18px;
}
.bk-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field > span b{ color:var(--red); font-weight:400; }

.book__body select{
  width:100%; padding:14px 16px;
  background:var(--black-2);
  border:1px solid var(--line); border-radius:10px;
  color:var(--cream); font-family:var(--body); font-size:15px;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ash) 50%),
                   linear-gradient(135deg,var(--ash) 50%,transparent 50%);
  background-position:calc(100% - 19px) center, calc(100% - 13px) center;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.book__body select:focus{ outline:none; border-color:var(--red); }

.bk-block{ border:0; margin:0; padding:0; }
.bk-block legend{
  padding:0 0 12px;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--ash-dim);
}
.bk-block legend b{ color:var(--red); font-weight:400; }

.bk-dur{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.bk-dur label{ position:relative; display:block; cursor:pointer; }
.bk-dur input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.bk-dur span{
  display:block; text-align:center;
  padding:13px 6px;
  border:1px solid var(--line); border-radius:10px;
  font-size:14px; font-weight:600; color:var(--ash);
  transition:border-color .25s, color .25s, background .25s;
}
.bk-dur input:checked + span{
  background:var(--cream); color:var(--black); border-color:var(--cream);
}
.bk-dur input:focus-visible + span{ outline:2px solid var(--red-hot); outline-offset:2px; }

.bk-cal{
  border:1px solid var(--line); border-radius:12px;
  padding:16px; background:var(--black-2);
}
.bk-cal__top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.bk-cal__top strong{
  font-family:var(--display); font-size:14px; font-weight:800;
  text-transform:uppercase; letter-spacing:.12em;
}
.bk-nav{
  width:32px; height:32px; border-radius:8px; cursor:pointer;
  background:transparent; border:1px solid var(--line);
  color:var(--cream); font-size:15px; line-height:1;
  transition:background .25s, border-color .25s, opacity .25s;
}
.bk-nav:hover:not(:disabled){ background:var(--black-3); border-color:var(--ash-dim); }
.bk-nav:disabled{ opacity:.3; cursor:not-allowed; }

.bk-dow, .bk-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.bk-dow span{
  text-align:center; padding:4px 0;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; color:var(--ash-dim);
}
.bk-days button{
  aspect-ratio:1; width:100%;
  background:transparent; border:1px solid transparent;
  border-radius:8px; cursor:pointer;
  color:var(--cream); font-family:var(--body); font-size:13px;
  transition:border-color .2s, background .2s, color .2s;
}
.bk-days button:hover:not(:disabled){ border-color:var(--ash-dim); }
.bk-days button:disabled{ color:var(--ash-dim); opacity:.35; cursor:not-allowed; }
.bk-days button.is-sel{
  background:var(--cream); color:var(--black); border-color:var(--cream);
  font-weight:700;
}
.bk-days .bk-blank{ visibility:hidden; }

.bk-hint{
  margin:14px 0 0; text-align:center;
  font-size:13px; color:var(--ash-dim);
}
.bk-slots{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:8px; margin-top:14px;
}
.bk-slots:empty{ margin-top:0; }
.bk-slots button{
  padding:11px 6px;
  background:transparent; border:1px solid var(--line);
  border-radius:8px; cursor:pointer;
  color:var(--ash); font-family:var(--mono); font-size:12px;
  transition:border-color .2s, color .2s, background .2s;
}
.bk-slots button:hover{ border-color:var(--ash-dim); color:var(--cream); }
.bk-slots button.is-sel{
  background:var(--red); border-color:var(--red); color:var(--cream);
}

.bk-submit{ width:100%; justify-content:center; }
.book__note{
  margin:0; font-size:13.5px; color:var(--ash); text-align:center; min-height:1.2em;
}
.book__note.is-ok{ color:var(--cream); }
.book__note.is-warn{ color:var(--red-hot); }
#bkErr{ text-align:center; }

.book__done{ text-align:center; padding:22px 0 6px; animation:stepIn .4s var(--ease); }
.book__done h3{
  font-family:var(--display); font-size:clamp(20px,2.8vw,30px);
  font-weight:900; text-transform:uppercase; letter-spacing:-.02em;
  margin:0 0 10px;
}
.book__done p{ color:var(--ash); margin:0 auto 20px; max-width:44ch; font-size:14.5px; }

@media (max-width:720px){
  /* icon-only circle on phones, so it never covers the content behind it */
  .bookbtn{
    right:16px; bottom:16px;
    width:52px; height:52px; padding:0;
    border-radius:50%;
    justify-content:center;
  }
  .bookbtn span{ display:none; }
  .bookbtn svg{ width:20px; height:20px; }
  .bookbtn:hover{ transform:none; }
  .bookbtn.is-hidden{ transform:translateX(140%); }
  .bk-grid{ grid-template-columns:1fr; }
  .bk-dur{ grid-template-columns:repeat(2,1fr); }
  .book__panel{ max-height:96vh; }
}

/* ── section background loop (work) ───────────── */
.sec--work{ position:relative; isolation:isolate; }

.sec__bg{
  position:absolute; inset:0; z-index:-1;
  overflow:hidden;
  pointer-events:none;
}
.sec__vid{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  /* the source is a 9:16 clip filling a wide section, so it crops hard and
     upscales — the blur turns that into deliberate texture rather than mush,
     and keeps the project cards the sharpest thing on screen */
  filter:grayscale(.5) brightness(.5) contrast(1.05) blur(3px);
  transform:scale(1.08);
  transition:opacity 1.6s var(--ease);
}
.sec__vid.is-on{ opacity:.3; }

.sec__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(222,49,53,.16), transparent 70%),
    linear-gradient(180deg,
      var(--black) 0%, rgba(6,6,7,.72) 18%,
      rgba(6,6,7,.72) 82%, var(--black) 100%);
}

/* ═══ MOBILE INPUT & TAP-TARGET CORRECTIONS ═══════════ */
@media (max-width:720px){
  /* iOS Safari zooms the whole page when a focused input is under 16px.
     16px here is a functional requirement, not a type choice. */
  .field input, .field textarea,
  .book__body input, .book__body textarea, .book__body select{
    font-size:16px;
  }
  /* calendar days need height even though 7 columns caps their width */
  .bk-days button{
    aspect-ratio:auto;
    min-height:44px;
  }
  .bk-slots button{ padding:14px 6px; }
  .bk-slots{ grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); }
}