/* ============================================================
   Reel Memories — mobile-first stylesheet
   Base styles target ~360px. Enhancements at 700px / 1024px.
   ============================================================ */

:root{
  --ink:        #0E0D0C;
  --ink-2:      #161412;
  --ink-3:      #211D19;
  --line:       rgba(246,241,234,.14);
  --cream:      #F6F1EA;
  --cream-dim:  rgba(246,241,234,.68);
  --cream-mute: rgba(246,241,234,.46);
  --gold:       #C9A87C;
  --gold-soft:  rgba(201,168,124,.16);

  /* One family throughout. Display type is separated from body type by
     weight, size and tracking rather than by a second typeface. */
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --pad: 20px;                 /* gutter */
  --sec: 72px;                 /* section rhythm */
  --r:   14px;                 /* radius */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Reserve the scrollbar's space permanently. Both the loader and the
     mobile drawer lock scrolling, and without this the bar disappears
     and the whole page jumps sideways as they open and close. */
  scrollbar-gutter:stable;
  /* No snapping on the page itself — the feed snaps sideways inside its
     own scroller, which leaves vertical scrolling completely untouched.
     Anchor offsets are handled per-section with scroll-margin below. */
}

section[id]{ scroll-margin-top:80px; }
.intro, .hero{ scroll-margin-top:0; }

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-size:16px;
  font-weight:300;
  line-height:1.6;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; }
svg{ width:100%; height:100%; display:block; }
a{ color:inherit; }

/* Form controls do not inherit the family on their own — without this
   their labels fall back to the system font. */
button,input,select,textarea{ font-family:inherit; }

/* Nothing on this page is set in italic. <i> is used here only as a
   decorative element, never for emphasis. */
i{ font-style:normal; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--ink); padding:12px 18px;
  font-size:14px; text-decoration:none; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- layout ---------- */

.wrap{ width:100%; margin-inline:auto; padding-inline:var(--pad); max-width:1180px; }
.wrap--narrow{ max-width:720px; }

.section{ padding-block:var(--sec); position:relative; }

.section__head{ margin-bottom:36px; max-width:34ch; }
.section__lede{ color:var(--cream-dim); margin:14px 0 0; }

/* ---------- type ---------- */

.eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-weight:500; margin:0 0 14px;
}

.h2{
  font-family:var(--display);
  font-size:clamp(2rem, 9vw, 3.6rem);
  font-weight:200;
  line-height:1.05;
  letter-spacing:-.025em;
  margin:0;
}
.h2 .amp{ font-style:normal; color:var(--gold); }

h3{ font-family:var(--sans); font-size:1.0625rem; font-weight:500; letter-spacing:.005em; margin:0 0 8px; }

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.link{
  color:var(--gold); text-decoration:none;
  border-bottom:1px solid var(--gold-soft);
  padding-bottom:2px; transition:border-color .3s var(--ease);
}
.link:hover{ border-color:var(--gold); }

.fineprint{ margin-top:28px; font-size:13px; color:var(--cream-mute); max-width:60ch; }

/* ---------- buttons ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 26px;
  font-family:var(--sans); font-size:14px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:background-color .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .18s var(--ease);
}
.btn:active{ transform:scale(.975); }

.btn--solid{ background:var(--cream); color:var(--ink); }
.btn--solid:hover{ background:var(--gold); }

.btn--ghost{ border-color:var(--line); color:var(--cream); background:transparent; }
.btn--ghost:hover{ border-color:var(--cream); }

.btn--sm{ min-height:42px; padding:0 20px; font-size:12px; }
.btn--full{ width:100%; }

/* ============================================================
   NAV
   ============================================================ */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .4s var(--ease), border-color .4s var(--ease),
             backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(14,13,12,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}

/* Over the title card the nav would just repeat the lockup sitting in the
   middle of the screen, so it stays out of the way until you scroll off it.
   :focus-within brings it back for keyboard users, who would otherwise be
   tabbing into something they cannot see. */
.nav.is-lifted:not(:focus-within){
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
}
.nav{
  transition:background-color .4s var(--ease), border-color .4s var(--ease),
             opacity .5s var(--ease), transform .5s var(--ease),
             visibility .5s var(--ease);
}

.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px var(--pad);
  max-width:1180px; margin-inline:auto;
}

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
/* The mark is expressive enough now that the old boxed container just
   crowded it. It sits free, sized on the 34:24 viewBox. */
.brand__mark{
  width:40px; height:28px; flex:none; color:var(--gold);
}
.brand__text{ display:flex; flex-direction:column; line-height:1.05; }
.brand__name{ font-family:var(--display); font-size:1.15rem; letter-spacing:-.01em; }
/* Tracked out to sit just under the width of the name above it — the
   balance the lockup wants. */
.brand__tag{
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-mute); margin-top:3px; white-space:nowrap;
}

.nav__toggle{
  width:44px; height:44px; flex:none; margin-right:-8px;
  background:none; border:0; cursor:pointer; color:var(--cream);
  display:grid; place-items:center;
}
.bars{ display:block; width:22px; }
.bars i{
  display:block; height:1px; background:currentColor; border-radius:1px;
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.bars i:first-child{ margin-bottom:6px; }
.nav__toggle[aria-expanded="true"] .bars i:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .bars i:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* mobile drawer */
.nav__menu{
  position:fixed; inset:0; z-index:-1;
  background:rgba(14,13,12,.98);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 32px;
  opacity:0; visibility:hidden;
  transition:opacity .38s var(--ease), visibility .38s var(--ease);
}
.nav__menu.is-open{ opacity:1; visibility:visible; }

.nav__menu a{
  font-family:var(--display); font-size:2rem; font-weight:200;
  text-decoration:none; padding:10px 0; color:var(--cream);
  opacity:0; transform:translateY(12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), color .25s var(--ease);
}
.nav__menu.is-open a{ opacity:1; transform:none; }
.nav__menu.is-open a:nth-child(1){ transition-delay:.06s; }
.nav__menu.is-open a:nth-child(2){ transition-delay:.10s; }
.nav__menu.is-open a:nth-child(3){ transition-delay:.14s; }
.nav__menu.is-open a:nth-child(4){ transition-delay:.18s; }
.nav__menu.is-open a:nth-child(5){ transition-delay:.22s; }
.nav__menu.is-open a:nth-child(6){ transition-delay:.26s; }
.nav__menu a:hover{ color:var(--gold); }

.nav__menu .btn{
  align-self:flex-start; margin-top:22px;
  font-family:var(--sans); font-size:13px;
}

body.is-locked{ overflow:hidden; }

/* ============================================================
   INTRO — the title card the site opens on
   Brand only: mark, name, tagline. The video hero is one
   scroll below, so the cue at the bottom has to be legible.
   ============================================================ */

/* The card is taller than the screen by --bleed and pulled back up by the
   same amount, so its last stretch sits on top of the hero video. That tail
   fades to fully transparent, dissolving the card into the footage instead
   of ending on a hard edge. */
.intro{
  --bleed:34svh;

  position:relative; z-index:2;
  min-height:calc(100svh + var(--bleed));
  display:grid; place-items:center;
  padding:96px var(--pad) var(--bleed);
  margin-bottom:calc(var(--bleed) * -1);
  text-align:center;

  /* Measured from the bottom up, so the dissolve lands exactly on the
     bleed — the only stretch that has video behind it. Fading any higher
     would just fade black into black and then pop the video in. */
  background:linear-gradient(to top,
    rgba(14,13,12,0)    0,
    rgba(14,13,12,.26)  calc(var(--bleed) * .26),
    rgba(14,13,12,.62)  calc(var(--bleed) * .55),
    rgba(14,13,12,.90)  calc(var(--bleed) * .78),
    var(--ink)          var(--bleed));
}

/* a low warm glow so the panel is not a flat black rectangle */
.intro::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 32% at 50% 38%, rgba(201,168,124,.11), transparent 72%);
}

.intro__inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
}

.intro__mark{
  width:96px; height:68px; color:var(--gold);
  margin-bottom:30px;
}

/* A grotesque needs negative tracking and a lighter weight at display
   sizes to read as quiet rather than shouted — the opposite of what the
   serif wanted here. */
.intro__name{
  font-family:var(--display); font-weight:200;
  font-size:clamp(3.4rem, 11vw, 5.6rem);
  line-height:1; letter-spacing:-.04em;
  margin:0;
}
/* stacked on a phone so the type can run large; one line from 700px up */
.intro__name em{ display:block; font-style:normal; color:var(--gold); }

/* The tracking here is a starting point only — a script widens it until
   the caption spans exactly the width of the name above, which CSS cannot
   express because that width changes with the viewport and with whether
   the name wraps to two lines. This value is what shows if JS is off. */
.intro__tag{
  font-size:10px; letter-spacing:.5em; text-transform:uppercase;
  color:var(--cream-mute);
  margin:26px 0 0;
  white-space:nowrap;
}

/* offset past the bleed so the cue sits inside the solid part of the card */
.intro__cue{
  position:absolute; left:50%; bottom:calc(var(--bleed) + 26px);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-decoration:none;
  padding:10px 16px;
}
.intro__cue-label{
  font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--cream-mute);
  transition:color .3s var(--ease);
}
.intro__cue:hover .intro__cue-label{ color:var(--gold); }

.intro__cue-line{
  position:relative; display:block;
  width:1px; height:46px; overflow:hidden;
  background:var(--line);
}
.intro__cue-line i{
  position:absolute; inset:0; display:block;
  background:var(--gold);
  animation:drop 2.4s var(--ease) infinite;
}

@keyframes drop{
  0%{ transform:translateY(-100%); }
  55%,100%{ transform:translateY(100%); }
}

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative; z-index:1;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:96px var(--pad) 64px;
  overflow:hidden;
  isolation:isolate;
}

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

.hero__video{
  width:100%; height:100%;
  object-fit:cover; object-position:center 32%;
  filter:saturate(.92) contrast(1.04);
}

/* On mobile the copy runs almost the full height of the frame, so the
   scrim has to carry contrast everywhere — not just at the bottom. */
/* Starts light: the title card's own fade is still darkening this stretch,
   and stacking two heavy gradients would put a murky band across the join. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(14,13,12,.10)  0%,
      rgba(14,13,12,.34) 16%,
      rgba(14,13,12,.50) 30%,
      rgba(14,13,12,.66) 54%,
      rgba(14,13,12,.97) 100%),
    linear-gradient(90deg, rgba(14,13,12,.5) 0%, transparent 62%);
}

/* The video runs from near-black interiors to blown-out daylight, so the
   scrim alone cannot guarantee contrast. A soft shadow under the copy holds
   it legible on the brightest frames without reading as a drop shadow. */
.hero__body{
  position:relative; max-width:640px;
  text-shadow:0 1px 18px rgba(8,7,7,.72), 0 1px 3px rgba(8,7,7,.5);
}
.hero__body .btn{ text-shadow:none; }

.hero__title{
  font-family:var(--display);
  font-size:clamp(2.4rem, 12vw, 4.6rem);
  font-weight:200; line-height:1.02; letter-spacing:-.04em;
  margin:0 0 20px;
  text-wrap:balance;
}
.hero__title em{ font-style:normal; color:var(--gold); }

.hero__lede{
  color:rgba(246,241,234,.86); font-size:1rem; max-width:44ch;
  margin:0 0 28px;
}

.hero__cta{ display:flex; flex-direction:column; gap:12px; }

.hero__stats{
  list-style:none; display:flex; gap:26px; flex-wrap:wrap;
  margin:38px 0 0; padding:22px 0 0;
  border-top:1px solid var(--line);
}
.hero__stats li{ display:flex; flex-direction:column; gap:2px; }
.hero__stats strong{
  font-family:var(--display); font-size:1.6rem; font-weight:400;
  color:var(--gold); line-height:1;
}
.hero__stats span{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-mute);
}

.hero__scroll{ display:none; }

/* ============================================================
   MARQUEE
   ============================================================ */

.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  background:var(--ink-2); padding:15px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:22px; width:max-content;
  animation:slide 34s linear infinite;
}
.marquee__track span{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cream-mute); white-space:nowrap;
}
.marquee__track i{ color:var(--gold); font-style:normal; font-size:9px; }

@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================================================
   REEL PLAYER (9:16)
   ============================================================ */

.reel{ margin:0; }

.reel__frame{
  position:relative;
  aspect-ratio:9/16;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--ink-3);
  border:1px solid var(--line);
  isolation:isolate;
}

/* The poster attribute carries a real frame from the film, so the box is
   never empty while the mp4 streams in — no spinner needed. */
.reel__frame video{
  width:100%; height:100%; object-fit:cover;
}

/* subtle vignette so controls stay readable over any frame */
.reel__veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,13,12,.42) 0%, transparent 24%,
                                     transparent 66%, rgba(14,13,12,.5) 100%);
}

/* control buttons */
.reel__sound,
.reel__expand{
  position:absolute; z-index:2;
  width:42px; height:42px; padding:11px;
  border-radius:50%; cursor:pointer; color:var(--cream);
  background:rgba(14,13,12,.5); border:1px solid var(--line);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background-color .3s var(--ease), border-color .3s var(--ease), transform .18s var(--ease);
}
.reel__sound{ right:10px; bottom:10px; }
.reel__expand{ right:10px; top:10px; }
.reel__sound:hover, .reel__expand:hover{ background:rgba(14,13,12,.8); border-color:var(--gold); }
.reel__sound:active, .reel__expand:active{ transform:scale(.92); }

.reel__sound .i-loud{ display:none; }
.reel__sound[aria-pressed="true"] .i-mute{ display:none; }
.reel__sound[aria-pressed="true"] .i-loud{ display:block; }
.reel__sound[aria-pressed="true"]{ border-color:var(--gold); color:var(--gold); }

.reel__cap{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; margin-top:12px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.reel__cap span:first-child{ color:var(--cream); }
.reel__cap span:last-child{ color:var(--cream-mute); }

/* ============================================================
   FEATURED
   ============================================================ */

.featured{ background:var(--ink); }
.featured__grid{ display:flex; flex-direction:column; gap:36px; }
.featured__copy p{ color:var(--cream-dim); }
.featured__copy .h2{ margin-bottom:18px; }

.meta{
  margin:24px 0; padding:18px 0;
  border-block:1px solid var(--line);
  display:grid; gap:12px;
}
.meta div{ display:flex; justify-content:space-between; gap:16px; }
.meta dt{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream-mute);
}
.meta dd{ margin:0; font-size:14px; color:var(--cream); text-align:right; }

/* the featured reel is capped so it never towers on tall phones */
.featured__player .reel__frame{ max-height:74svh; margin-inline:auto; }
.featured__player .reel--lg{ max-width:min(100%, 420px); }

/* ============================================================
   WORK GRID
   ============================================================ */

.work{ background:var(--ink-2); }

/* ---------- THE FEED (phones) ----------
   A sideways deck: swipe left or right, films snap to the centre of the
   screen, and only the centred one plays. Its own horizontal scroller,
   so vertical page scrolling is never intercepted.

   Sized in vw rather than % so the maths stays obvious: cards are 82vw
   and the 9vw side padding is exactly what lets the first and last card
   reach the centre — (100 - 82) / 2. */

.deck{ position:relative; }

.reelgrid{
  /* On a phone the card is sized by width. On anything larger it is sized
     by HEIGHT and the width follows from 9:16 — a card sized by width on a
     laptop would be taller than the screen. */
  --card:82vw;
  --gap:12px;

  display:flex; flex-direction:row; gap:var(--gap);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin-inline:calc(var(--pad) * -1);   /* full-bleed past the gutter */
  padding-block:4px;
}
.reelgrid::-webkit-scrollbar{ display:none; }

/* Spacers, not padding, so the first and last film can still reach the
   middle. A flex item's percentage basis resolves against this scroller's
   own width, which padding percentages would not — that keeps the centring
   exact at every width without hard-coding viewport maths. */
.reelgrid::before,
.reelgrid::after{
  content:"";
  flex:0 0 calc(50% - var(--card) / 2 - var(--gap));
}

.reelgrid .reel{
  position:relative;
  flex:0 0 var(--card);
  scroll-snap-align:center;
  scroll-snap-stop:always;   /* one film per swipe, never skip two */
  /* the film in the middle is the one playing — the others step back */
  opacity:.42;
  transform:scale(.94);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.reelgrid .reel.is-active{ opacity:1; transform:none; }

/* caption overlays the card, clear of the buttons on the right */
.reelgrid .reel__cap{
  position:absolute; left:18px; right:66px; bottom:16px;
  z-index:2; margin:0;
  flex-direction:column; align-items:flex-start; gap:4px;
  text-align:left;
}
.reelgrid .reel__cap span:first-child{
  font-family:var(--display); font-size:1.35rem; font-weight:300;
  letter-spacing:0; text-transform:none; color:var(--cream);
}
.reelgrid .reel__cap span:last-child{
  font-size:9.5px; letter-spacing:.2em;
}

.reelgrid .reel__sound { right:12px; bottom:16px; background:rgba(14,13,12,.4); }
.reelgrid .reel__expand{ right:12px; top:12px;  background:rgba(14,13,12,.4); }

/* the copy sits directly on the footage here, so the falloff is heavier */
.reelgrid .reel__veil{
  background:linear-gradient(180deg,
    rgba(14,13,12,.5) 0%, rgba(14,13,12,.1) 20%,
    rgba(14,13,12,0) 48%, rgba(14,13,12,.62) 86%, rgba(14,13,12,.82) 100%);
}

/* Arrow controls. A phone has the swipe, a mouse has nothing — without
   these the deck is unusable with a pointer, so they appear from 700px. */
.deck__nav{
  display:none;
  position:absolute; top:50%; z-index:3;
  width:52px; height:52px; padding:14px;
  transform:translateY(-50%);
  border-radius:50%; cursor:pointer; color:var(--cream);
  background:rgba(14,13,12,.62); border:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background-color .3s var(--ease), border-color .3s var(--ease),
             opacity .3s var(--ease);
}
.deck__nav--prev{ left:-6px; }
.deck__nav--next{ right:-6px; }
.deck__nav:hover{ background:rgba(14,13,12,.85); border-color:var(--gold); }

.work__hint{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin:18px 0 0;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream-mute);
}
.work__hint svg{ width:15px; height:15px; color:var(--gold); flex:none; }

/* ---------- playback chrome ---------- */

.reel__progress{
  position:absolute; left:0; right:0; top:0; height:2px;
  z-index:2; background:rgba(246,241,234,.16);
  opacity:0; transition:opacity .4s var(--ease);
}
.reel.is-playing .reel__progress{ opacity:1; }
.reel__progress i{
  display:block; height:100%; width:0;
  background:var(--gold);
}

.reel__hint{
  position:absolute; left:50%; bottom:94px; z-index:2;
  transform:translateX(-50%);
  margin:0; padding:9px 16px;
  white-space:nowrap;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream);
  background:rgba(14,13,12,.55); border:1px solid var(--line);
  border-radius:999px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition:opacity .45s var(--ease);
  pointer-events:none;
}
/* only ever on the active film in the feed, and only while it is silent */
.reelgrid .reel.is-active.is-silent .reel__hint{ opacity:1; }
.featured .reel__hint{ display:none; }

/* ============================================================
   SERVICE CARDS
   ============================================================ */

.cards{ display:grid; gap:16px; }

.card{
  position:relative;
  padding:28px 22px 26px;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg, rgba(246,241,234,.035), rgba(246,241,234,0));
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.card:hover{ border-color:rgba(201,168,124,.42); }
.card__num{
  display:block; font-family:var(--display); font-size:.95rem;
  color:var(--gold); letter-spacing:.1em; margin-bottom:14px;
}
.card p{ color:var(--cream-dim); font-size:15px; }

.ticks{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px; }
.ticks li{
  position:relative; padding-left:20px;
  font-size:13.5px; color:var(--cream-dim);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:50%;
  border:1px solid var(--gold);
}

/* ============================================================
   PACKAGES
   ============================================================ */

.packages{ background:var(--ink); }

.tiers{ display:grid; gap:16px; }

.tier{
  position:relative;
  padding:30px 24px;
  border:1px solid var(--line); border-radius:var(--r);
  display:flex; flex-direction:column;
}
.tier--feature{
  border-color:rgba(201,168,124,.44);
  background:linear-gradient(180deg, rgba(201,168,124,.09), rgba(201,168,124,.01));
}
.tier__badge{
  position:absolute; top:-11px; left:24px;
  background:var(--gold); color:var(--ink);
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; padding:5px 12px; border-radius:999px;
}
.tier__name{
  font-family:var(--display); font-size:1.6rem; font-weight:200;
  letter-spacing:.01em; margin:0 0 6px;
}
.tier__price{
  font-family:var(--display); font-size:2.25rem; font-weight:200;
  color:var(--gold); line-height:1; margin:0 0 12px;
  display:flex; align-items:baseline; gap:8px;
}
.tier__price .from{
  font-family:var(--sans); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cream-mute);
}
.tier__for{ font-size:14px; color:var(--cream-dim); margin:0; }
.tier .ticks{ margin-bottom:26px; }
.tier .btn{ margin-top:auto; }

/* ============================================================
   PROCESS
   ============================================================ */

.process{ background:var(--ink-2); }

.steps{ list-style:none; margin:0; padding:0; display:grid; gap:0; }

.step{
  position:relative;
  padding:26px 0 26px 54px;
  border-bottom:1px solid var(--line);
}
.step:last-child{ border-bottom:0; padding-bottom:0; }
.step:first-child{ padding-top:0; }

.step__n{
  position:absolute; left:0; top:26px;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line); color:var(--gold);
  font-family:var(--display); font-size:.95rem;
}
.step:first-child .step__n{ top:0; }
.step p{ color:var(--cream-dim); font-size:15px; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.quotes{ background:var(--ink); text-align:center; }

.quotecar__stage{ position:relative; }

.quote{
  margin:0;
  opacity:0; visibility:hidden;
  position:absolute; inset:0;
  transition:opacity .6s var(--ease), visibility .6s;
}
.quote.is-active{ opacity:1; visibility:visible; position:relative; }

.quote p{
  font-family:var(--display);
  font-size:clamp(1.5rem, 6.5vw, 2.4rem);
  font-weight:200; font-style:normal; line-height:1.28;
  letter-spacing:-.01em; margin:0 0 22px;
  text-wrap:balance;
}
.quote cite{
  font-style:normal; font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold);
}

.quotecar__dots{ display:flex; gap:8px; justify-content:center; margin-top:34px; }
.quotecar__dots button{
  width:26px; height:26px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center;
}
.quotecar__dots button::after{
  content:""; width:100%; height:2px; max-width:26px;
  background:var(--line); border-radius:2px;
  transition:background-color .4s var(--ease);
}
.quotecar__dots button[aria-selected="true"]::after{ background:var(--gold); }

/* ============================================================
   FAQ
   ============================================================ */

.faq{ background:var(--ink-2); }

.acc__item{ border-bottom:1px solid var(--line); }
.acc__item:first-child{ border-top:1px solid var(--line); }

.acc__item summary{
  list-style:none; cursor:pointer;
  padding:22px 40px 22px 0; position:relative;
  font-size:16px; font-weight:400; color:var(--cream);
  transition:color .3s var(--ease);
}
.acc__item summary::-webkit-details-marker{ display:none; }
.acc__item summary:hover{ color:var(--gold); }

.acc__item summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:11px; height:11px; margin-top:-6px;
  border-right:1px solid var(--gold); border-bottom:1px solid var(--gold);
  transform:rotate(45deg); transform-origin:center;
  transition:transform .35s var(--ease);
}
.acc__item[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }

.acc__body{ padding:0 8px 24px 0; }
.acc__body p{ color:var(--cream-dim); font-size:15px; margin:0; }

/* ============================================================
   CONTACT FORM
   ============================================================ */

.contact{ background:var(--ink); }

.form{ display:grid; gap:18px; }
.row{ display:grid; gap:18px; }

.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream-mute);
}

.field input,
.field select,
.field textarea{
  width:100%;
  font-family:var(--sans); font-size:16px; font-weight:300; /* 16px avoids iOS zoom */
  color:var(--cream);
  background:rgba(246,241,234,.035);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 15px;
  min-height:52px;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:110px; line-height:1.55; }

.field select{
  background-image:linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                   linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position:calc(100% - 20px) 23px, calc(100% - 14px) 23px;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.field select option{ background:var(--ink-3); color:var(--cream); }

.field input::placeholder,
.field textarea::placeholder{ color:rgba(246,241,234,.28); }

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--gold);
  background:rgba(246,241,234,.06);
}

.field input[type="date"]{ color-scheme:dark; }

.err{
  margin:0; font-size:12px; color:#E39A8B; min-height:0;
  opacity:0; transition:opacity .25s var(--ease);
}
.field.is-bad .err{ opacity:1; }
.field.is-bad input,
.field.is-bad select{ border-color:rgba(227,154,139,.6); }

.form .btn{ margin-top:6px; }
.form__note{
  margin:0; font-size:13.5px; color:var(--gold);
  min-height:1.4em; text-align:center;
}

.direct{
  margin-top:36px; padding-top:26px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px 12px;
  justify-content:center; align-items:center;
  font-size:13.5px; color:var(--cream-mute);
}
.direct a{ color:var(--cream-dim); text-decoration:none; transition:color .3s var(--ease); }
.direct a:hover{ color:var(--gold); }

/* ============================================================
   FOOTER
   ============================================================ */

.foot{ background:var(--ink-2); border-top:1px solid var(--line); padding-block:44px; }
.foot__inner{ display:flex; flex-direction:column; gap:24px; align-items:center; text-align:center; }
.foot__lockup{
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.foot__mark{ width:44px; height:31px; color:var(--gold); }

/* Left as a block, not a flex column: "Reel" is a bare text node and would
   become its own flex item, splitting the name across two lines. */
.foot__brand{
  font-family:var(--display); font-size:1.5rem; font-weight:200; margin:0;
  line-height:1.1;
}
.foot__brand span{ font-style:normal; color:var(--gold); }
/* Static tracking here: the name and this caption share one element, so
   there is no separate node for the script to measure against. */
.foot__brand em{
  display:block;
  font-family:var(--sans); font-style:normal;
  font-size:9px; letter-spacing:.55em; text-transform:uppercase;
  color:var(--cream-mute); margin-top:10px;
  margin-right:-.55em;
}
.foot__links{ display:flex; flex-wrap:wrap; gap:6px 22px; justify-content:center; }
.foot__links a{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-mute); text-decoration:none; padding:6px 0;
  transition:color .3s var(--ease);
}
.foot__links a:hover{ color:var(--gold); }
.foot__fine{ margin:0; font-size:11.5px; color:rgba(246,241,234,.3); }

/* ============================================================
   LIGHTBOX
   ============================================================ */

.lb{
  position:fixed; inset:0; z-index:150;
  background:rgba(8,7,7,.96);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:grid; place-items:center;
  padding:56px 16px 24px;
  opacity:0; transition:opacity .3s var(--ease);
}
.lb.is-open{ opacity:1; }
.lb[hidden]{ display:none; }

.lb__stage{
  width:100%; height:100%;
  display:grid; place-items:center;
}
.lb__stage video{
  max-width:100%; max-height:100%;
  width:auto; height:100%;
  aspect-ratio:9/16;
  border-radius:12px; background:#000;
}

.lb__close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:44px; height:44px; padding:12px;
  border-radius:50%; cursor:pointer; color:var(--cream);
  background:rgba(246,241,234,.08); border:1px solid var(--line);
  transition:background-color .3s var(--ease);
}
.lb__close:hover{ background:rgba(246,241,234,.16); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

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

/* ============================================================
   TABLET  ≥ 700px
   ============================================================ */

@media (min-width:700px){
  :root{ --pad:36px; --sec:104px; }

  body{ font-size:17px; }

  .intro__mark{ width:120px; height:85px; margin-bottom:36px; }
  .intro__name em{ display:inline; }
  .intro__tag{ font-size:11px; letter-spacing:.7em; }

  .hero{ padding-bottom:88px; }
  .hero__cta{ flex-direction:row; }
  .hero__stats{ gap:44px; }

  .row{ grid-template-columns:1fr 1fr; }

  .cards{ grid-template-columns:repeat(3,1fr); gap:20px; }
  .tiers{ grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }

  /* Same deck, bigger cards. The card is now sized from the viewport
     height and the width follows the 9:16 frame, so a film never grows
     taller than the screen it is being watched on. */
  .reelgrid{
    --card:min(calc(68svh * 0.5625), 40vw);
    --gap:20px;
    padding-block:8px;
  }

  .deck__nav{ display:block; }

  .reelgrid .reel__cap{ left:22px; right:74px; bottom:20px; }
  .reelgrid .reel__cap span:first-child{ font-size:1.5rem; }

  .steps{ grid-template-columns:1fr 1fr; gap:0 44px; }
  .step{ padding-top:26px; }
  .step:first-child{ padding-top:26px; }
  .step:first-child .step__n{ top:26px; }
  .step:nth-last-child(-n+2){ border-bottom:0; }

  .foot__inner{ flex-direction:row; justify-content:space-between; text-align:left; }
  .foot__lockup{ align-items:flex-start; }

  .lb{ padding:64px 24px 32px; }
}

/* ============================================================
   DESKTOP  ≥ 1024px
   ============================================================ */

@media (min-width:1024px){
  :root{ --pad:48px; --sec:132px; }

  html{ scroll-padding-top:88px; }

  /* horizontal nav replaces the drawer */
  .nav__toggle{ display:none; }
  .nav__menu{
    position:static; inset:auto; z-index:auto;
    flex-direction:row; align-items:center; gap:34px;
    background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    padding:0; opacity:1; visibility:visible; height:auto;
  }
  .nav__menu a{
    font-family:var(--sans); font-size:12px; font-weight:400;
    letter-spacing:.14em; text-transform:uppercase;
    padding:0; opacity:1; transform:none; color:var(--cream-dim);
  }
  .nav__menu a:hover{ color:var(--cream); }
  .nav__menu .btn{ margin-top:0; align-self:auto; color:var(--ink); }

  .brand__mark{ width:36px; height:36px; }
  .brand__name{ font-size:1.3rem; }

  .hero{ padding-bottom:120px; }
  .hero__video{ object-position:center 28%; }
  .hero__title{ font-size:clamp(4rem, 6.4vw, 6.4rem); }
  .hero__lede{ font-size:1.0625rem; }

  .hero__scroll{
    display:block; position:absolute; left:50%; bottom:34px;
    width:1px; height:56px; overflow:hidden;
    background:var(--line); transform:translateX(-50%);
  }
  .hero__scroll span{
    position:absolute; inset:0; display:block;
    background:var(--gold);
    animation:drop 2.4s var(--ease) infinite;
  }

  .section__head{ margin-bottom:56px; }

  .featured__grid{
    flex-direction:row; align-items:center; gap:80px;
  }
  .featured__copy{ flex:1 1 46%; }
  .featured__player{ flex:0 0 380px; }
  .featured__player .reel__frame{ max-height:none; }

  .reelgrid{ gap:28px; }
  .card{ padding:36px 30px 32px; }
  .card:hover{ transform:translateY(-4px); }
  .tier{ padding:38px 30px; }

  .steps{ grid-template-columns:repeat(4,1fr); gap:0; }
  .step{
    padding:0 26px 0 0; border-bottom:0;
    border-right:1px solid var(--line);
  }
  .step:last-child{ border-right:0; }
  .step__n{ position:static; margin-bottom:18px; }
  .step:first-child .step__n{ top:auto; }

  .quotes .wrap{ max-width:860px; }
}

/* ============================================================
   MOTION / CONTRAST PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .marquee__track{ animation:none; }
}

/* ============================================================
   TOUCH TARGETS
   Everything tappable clears 44x44 on a phone, even where the
   visible mark is smaller than the hit area.
   ============================================================ */

.brand{ min-height:44px; }

.btn--sm{ min-height:44px; }

/* inline-flex collapses the whitespace before the trailing arrow */
.link{
  display:inline-flex; align-items:center; gap:.45em;
  min-height:44px;
}

.reel__sound,
.reel__expand{ width:44px; height:44px; padding:12px; }

.quotecar__dots button{ width:34px; height:44px; }

.direct a{ display:inline-flex; align-items:center; min-height:44px; padding-inline:2px; }

.foot__links a{ display:inline-flex; align-items:center; min-height:44px; padding:0; }

/* ============================================================
   LOADER — "tying the knot"

   The two halves of the mark drift in from opposite sides and
   interlock, with a small overshoot so it cinches rather than
   merely arrives. The perforated ring then turns like a reel
   while the page finishes loading.
   ============================================================ */

.loader{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  background:var(--ink);
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }

/* the page cannot be scrolled behind the loader */
body.is-loading{ overflow:hidden; }

.loader__inner{
  display:flex; flex-direction:column; align-items:center;
  gap:26px;
}

.loader__mark{
  width:96px; height:68px; color:var(--gold);
  overflow:visible;   /* the rings start outside the viewBox */
}

.loader__ring--a{ animation:knotLeft  1.25s var(--ease) both; }
.loader__ring--b{
  animation:knotRight 1.25s var(--ease) both,
            knotReel  2.6s linear 1.15s infinite;
}
.loader__hub { animation:knotHub .4s var(--ease) .82s both; }
.loader__word{
  margin:0;
  font-size:10px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--cream-mute);
  margin-right:-.42em;            /* cancel the trailing letter-space */
  animation:knotWord .5s var(--ease) .92s both;
}

@keyframes knotLeft{
  0%   { transform:translateX(-15px); opacity:0; }
  55%  { opacity:1; }
  78%  { transform:translateX(1.5px); }
  100% { transform:translateX(0); opacity:1; }
}
@keyframes knotRight{
  0%   { transform:translateX(15px); opacity:0; }
  55%  { opacity:1; }
  78%  { transform:translateX(-1.5px); }
  100% { transform:translateX(0); opacity:1; }
}
@keyframes knotHub{
  from{ opacity:0; transform:scale(.2); }
  to  { opacity:1; transform:scale(1); }
}
@keyframes knotWord{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:none; }
}
/* dash period is 2.1 + 2.75; four of them loops seamlessly */
@keyframes knotReel{
  to{ stroke-dashoffset:-19.4; }
}

/* The hub scales about its own centre rather than the SVG origin. */
.loader__hub{ transform-origin:22px 12px; transform-box:view-box; }

@media (prefers-reduced-motion:reduce){
  /* the global reduce rule already collapses the timings; make sure
     nothing is left sitting at opacity 0 */
  .loader__ring--a,.loader__ring--b,.loader__hub,.loader__word{
    opacity:1; transform:none;
  }
}