/* ============================================================
   44 FILMS — "Sky Estate" design system
   Twilight sky, drifting cloud decks, copper glass architecture.
   ============================================================ */

:root{
  /* night → twilight */
  --night-0:#0A0916;
  --night-1:#12101F;
  --night-2:#1A1730;
  /* the single flat tone every section sits on — the hero fades into
     exactly this, which is why the handoff is invisible */
  --night-base:#0C0A18;
  --twilight:#2A2342;
  --dusk:#3B3046;

  /* horizon */
  --horizon:#C9954A;
  --gold:#E3B375;

  /* copper / brand */
  --peach:#F2C3A4;
  --peach-dim:#C3A392;
  --peach-faint:rgba(242,195,164,0.55);
  --copper:#C2764B;
  --copper-lit:#E28C57;

  --cloud:#D8DAEA;

  /* surfaces */
  --glass:rgba(240,205,180,0.055);
  --glass-2:rgba(240,205,180,0.085);
  --glass-line:rgba(242,195,164,0.16);
  --glass-line-2:rgba(242,195,164,0.30);
  --ink:rgba(10,9,22,0.55);

  --display:'Playfair Display', Georgia, serif;
  --display-alt:'Cormorant Garamond', Georgia, serif;
  --body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap:1180px;
  --pad:56px;

  /* Hero layer geometry. Each plate is sized as a % of hero width and
     positioned by the % of hero height its CENTRE sits at. These eight
     numbers are the whole composition — tune here, nowhere else. */
  /* The backdrop is sized by BOTH axes — see .plate-sky. --sky-h over 100%
     is what pushes the render's own top and bottom edges outside the hero,
     and raising --sky-y slides the visible window up the plate, cropping
     more off the bottom. */
  --sky-w:124%;    --sky-h:112%;   --sky-y:46%;
  --logo-w:22.5%;  --logo-y:40%;
  --props-w:118%;  --props-y:55%;
  --clouds-w:158%; --clouds-y:74%;
  --radius:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (max-width:760px){ :root{ --pad:22px; } }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--night-0);
  color:var(--peach-dim);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* `hidden` makes body a scroll container, which stops the sticky hero from
   pinning. `clip` clamps the same overflow without that side effect. */
@supports (overflow-x: clip){
  body{ overflow-x:clip; }
}

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--peach);
  font-weight:400;
  margin:0;
  line-height:1.06;
  letter-spacing:-0.015em;
}
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

::selection{ background:rgba(226,140,87,0.35); color:#fff; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }

/* ------------------------------------------------------------
   1. THE SKY — fixed backdrop behind everything
   ------------------------------------------------------------ */
/* The page sits on ONE flat night tone. Nothing here is a vertical ramp,
   so no section boundary can ever land on a colour mismatch — that seam
   is what made the hero look like it was cut off with scissors. The
   twilight and the horizon glow are local to the hero instead. */
.sky{
  position:fixed; inset:0;
  z-index:-3;
  background:
    radial-gradient(85% 55% at 12% 4%,  rgba(74,58,104,0.34) 0%, transparent 70%),
    radial-gradient(70% 50% at 90% 58%, rgba(194,118,75,0.10) 0%, transparent 74%),
    var(--night-base);
}

/* fine grain so the big gradients don't band */
.sky::after{
  content:'';
  position:absolute; inset:0;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  pointer-events:none;
}

/* Slow drifting cloud decks. These live INSIDE the hero (and the interior
   page headers) rather than behind the whole document, and they sit in the
   upper band so they read as cloud behind the title. */
.deck{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.deck span{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  will-change:transform;
}
.deck span:nth-child(1){
  width:86vw; height:26vh; left:-8vw; top:6%;
  background:radial-gradient(closest-side, rgba(216,218,234,.20), transparent 74%);
  animation:drift-a 84s linear infinite;
}
.deck span:nth-child(2){
  width:62vw; height:22vh; right:-10vw; top:26%;
  background:radial-gradient(closest-side, rgba(226,140,87,.15), transparent 76%);
  animation:drift-b 108s linear infinite;
}
.deck span:nth-child(3){
  width:74vw; height:20vh; left:8vw; top:34%;
  background:radial-gradient(closest-side, rgba(150,140,200,.17), transparent 76%);
  animation:drift-a 132s linear infinite reverse;
}
@keyframes drift-a{
  0%{ transform:translate3d(-6%,0,0); }
  50%{ transform:translate3d(10%,-3%,0); }
  100%{ transform:translate3d(-6%,0,0); }
}
@keyframes drift-b{
  0%{ transform:translate3d(6%,0,0); }
  50%{ transform:translate3d(-12%,4%,0); }
  100%{ transform:translate3d(6%,0,0); }
}

/* pinprick stars in the upper sky — hero-local, same as the clouds */
.stars{
  position:absolute; inset:0 0 45% 0;
  z-index:1;
  pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,240,225,.75), transparent),
    radial-gradient(1px 1px at 62% 9%,  rgba(255,240,225,.55), transparent),
    radial-gradient(1px 1px at 84% 26%, rgba(255,240,225,.65), transparent),
    radial-gradient(1px 1px at 33% 34%, rgba(255,240,225,.40), transparent),
    radial-gradient(1px 1px at 74% 44%, rgba(255,240,225,.35), transparent),
    radial-gradient(1px 1px at 46% 14%, rgba(255,240,225,.50), transparent),
    radial-gradient(1px 1px at 92% 12%, rgba(255,240,225,.45), transparent);
  animation:twinkle 7s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{opacity:.85;} 50%{opacity:.4;} }

/* ------------------------------------------------------------
   2. ENTRANCE
   The page is never hidden behind JS — only the hero copy and the
   estate animate in, so a script or paint hiccup can't blank the site.
   ------------------------------------------------------------ */
@keyframes lift-in{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}
@keyframes settle-in{
  from{ opacity:0; transform:translateY(40px) scale(1.03); }
  to{ opacity:1; transform:none; }
}

/* ------------------------------------------------------------
   3. NAVIGATION — floating glass pill
   ------------------------------------------------------------ */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:40;
  padding:20px var(--pad);
  transition:padding .4s var(--ease), background .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav.stuck{
  padding:12px var(--pad);
  background:rgba(12,10,25,0.62);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid rgba(242,195,164,0.10);
}
.nav-inner{
  max-width:var(--wrap); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{
  display:inline-flex; align-items:baseline; gap:.42rem;
  font-family:var(--display);
  font-size:1.5rem;
  color:var(--peach);
  text-decoration:none;
  letter-spacing:0;
  white-space:nowrap;
}
.brand em{ font-style:italic; }
.brand-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--copper-lit);
  box-shadow:0 0 10px var(--copper-lit);
  align-self:center;
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }

.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-size:.83rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--peach-dim);
  text-decoration:none;
  position:relative;
  padding:4px 0;
  transition:color .3s var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--copper-lit);
  transition:right .35s var(--ease);
}
.nav-links a:hover{ color:var(--peach); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{ right:0; }
.nav-links a[aria-current="page"]{ color:var(--peach); }
@media (max-width:940px){ .nav-links{ display:none; } }

.nav-right{ display:flex; align-items:center; gap:12px; }
/* the nav CTA lives inside the overlay menu on small screens */
@media (max-width:940px){ .nav-right > .btn{ display:none; } }

.nav-toggle{
  display:none;
  width:42px; height:42px;
  align-items:center; justify-content:center;
  background:var(--glass);
  border:1px solid var(--glass-line);
  border-radius:50%;
  color:var(--peach);
  cursor:pointer; padding:0;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.nav-toggle svg{ width:18px; height:18px; }
.nav-toggle .ic-close{ display:none; }
.nav-toggle[aria-expanded="true"] .ic-open{ display:none; }
.nav-toggle[aria-expanded="true"] .ic-close{ display:block; }
@media (max-width:940px){ .nav-toggle{ display:flex; } }

.mobile-menu{
  position:fixed; inset:0;
  z-index:39;
  background:rgba(10,9,22,0.92);
  backdrop-filter:blur(26px);
  -webkit-backdrop-filter:blur(26px);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 var(--pad);
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.mobile-menu.open{ opacity:1; visibility:visible; }
.mobile-menu a{
  font-family:var(--display);
  font-size:clamp(2rem,9vw,3rem);
  color:var(--peach-dim);
  text-decoration:none;
  padding:10px 0;
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.mobile-menu a:hover,
.mobile-menu a[aria-current="page"]{ color:var(--peach); transform:translateX(8px); }
@media (min-width:941px){ .mobile-menu{ display:none; } }

/* ------------------------------------------------------------
   4. HERO
   ------------------------------------------------------------ */
.hero{
  position:relative;
  height:100svh; min-height:520px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(120% 80% at 18% 42%, #4A3450 0%, transparent 55%),
    linear-gradient(180deg, #2A2547 0%, #241F3C 45%, #1A1730 100%);
}

/* The twilight + horizon glow, local to the interior page headers. It is
   fully opaque at the top and dissolves to nothing well before the header
   ends, handing off to the flat --night-base the rest of the page sits on.
   The home hero no longer uses it — an opaque video plate covers it. */
.page-head::before{
  content:'';
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(120% 64% at 18% 60%, rgba(201,149,74,0.32) 0%, rgba(201,149,74,0.07) 40%, transparent 68%),
    radial-gradient(92% 52% at 78% 26%, rgba(74,58,104,0.44) 0%, transparent 64%),
    linear-gradient(180deg,
      #0A0916 0%,
      #12101F 18%,
      #1B1730 36%,
      #262038 54%,
      #3A2F3E 70%,
      #4A3B3E 82%,
      #2A2231 92%,
      var(--night-base) 100%);
  -webkit-mask-image:linear-gradient(180deg,
    #000 0%, #000 46%,
    rgba(0,0,0,.92) 62%, rgba(0,0,0,.70) 74%,
    rgba(0,0,0,.40) 85%, rgba(0,0,0,.15) 94%, transparent 100%);
  mask-image:linear-gradient(180deg,
    #000 0%, #000 46%,
    rgba(0,0,0,.92) 62%, rgba(0,0,0,.70) 74%,
    rgba(0,0,0,.40) 85%, rgba(0,0,0,.15) 94%, transparent 100%);
}

.hero-copy{
  position:absolute; left:0; right:0; bottom:0;
  z-index:6;
  padding:0 6vw 9vh;
  text-align:center;
  will-change:transform, opacity;
}

/* staggered entrance for the hero copy (the parallax script owns the
   transform on .hero-copy itself, so the children animate instead) */
.hero-copy > *{ animation:lift-in .95s var(--ease) both; }
.hero-copy > *:nth-child(1){ animation-delay:.10s; }
.hero-copy > *:nth-child(2){ animation-delay:.22s; }
.hero-copy > *:nth-child(3){ animation-delay:.34s; }
.hero-copy > *:nth-child(4){ animation-delay:.46s; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:26px;
}
.eyebrow::before,
.eyebrow::after{
  content:''; width:34px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(227,179,117,.7));
}
.eyebrow::after{ background:linear-gradient(270deg, transparent, rgba(227,179,117,.7)); }

/* The plate already carries the copper 44 wordmark, so the live title is
   pulled off the screen rather than out of the markup — it is the page's
   only <h1>, and deleting it would leave the homepage headless for search
   and screen readers. Taking it out of flow also leaves the slogan and
   buttons exactly where they were, since .hero-copy is bottom-anchored. */
.hero h1{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  animation:none;
}
.hero-sub{
  font-family:var(--display-alt);
  font-weight:300; font-style:italic;
  font-size:clamp(1.15rem, 3.1vw, 2.35rem);
  color:var(--peach);
  margin:0;
  text-shadow:0 2px 26px rgba(10,8,20,.85);
}

.hero-actions{
  margin-top:32px;
  display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap;
}

/* ---- the plates -----------------------------------------------------
   Every parallax plane. sky.js writes the transform; the <img> inside
   carries an independent idle drift so the scene breathes when nobody
   is scrolling. */
.plate{
  position:absolute; left:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  will-change:transform;
  pointer-events:none;
}
.plate img{ display:block; width:100%; height:auto; }

/* The backdrop is the one plate that has to COVER the hero rather than
   float in it, so unlike the others it gets an explicit box and
   object-fit:cover. Sized by width alone it could never fill vertically —
   the render is wider than the viewport, so its bottom edge always cut a
   line across the frame no matter how wide it was scaled. */
.plate-sky{ width:var(--sky-w); height:var(--sky-h); top:var(--sky-y); }
.plate-sky img{
  height:100%;
  object-fit:cover;
  object-position:center;
  animation:plate-drift-a 26s ease-in-out infinite;
}

.plate-logo{ width:var(--logo-w); top:var(--logo-y); }
.plate-logo img{
  animation:plate-drift-b 14s ease-in-out infinite;
  filter:drop-shadow(0 18px 45px rgba(10,6,20,.55));
}

.plate-props{ width:var(--props-w); top:var(--props-y); }
.plate-props img{ animation:plate-drift-c 19s ease-in-out infinite; }

/* Foreground cloud deck. Anchored below the fold so only the tops break
   into the lower frame, and sat above the scrim — it is in front of the
   scene, so it should not be darkened by the readability wash. It stays
   BEHIND .hero-copy: in front of the type it washes out the buttons. */
.plate-clouds{ z-index:4; width:var(--clouds-w); top:var(--clouds-y); }
.plate-clouds img{
  animation:plate-drift-a 22s ease-in-out infinite reverse;
  /* Sat back off the scrim's reach, so a bright cloud drifting behind the
     ghost button does not eat its contrast. Raise toward 1 for a brighter,
     more present deck. */
  filter:brightness(.82) saturate(.92);
}

/* Renamed from drift-a/b in the reference — those names are already taken
   by the .deck cloud layers the interior page headers use. */
@keyframes plate-drift-a{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@keyframes plate-drift-b{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-13px) rotate(.4deg); } }
@keyframes plate-drift-c{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }

/* Darkens the lower third so the slogan and buttons stay readable no
   matter what drifts behind them. */
.hero-scrim{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(18,16,31,.30) 0%,
    rgba(18,16,31,0)   26%,
    rgba(18,16,31,.30) 62%,
    rgba(18,16,31,.92) 100%);
}

/* Hands the hero off to the flat page background below it, and doubles as
   the footing the copy sits on. It is ABOVE the foreground cloud deck and
   below .hero-copy, which is what keeps a bright cloud from washing out the
   ghost button — the main .hero-scrim sits under the clouds and cannot. */
.hero-fade{
  position:absolute; left:0; right:0; bottom:0;
  height:34vh;
  z-index:5;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,9,22,0)    0%,
    rgba(10,9,22,.22) 34%,
    rgba(10,9,22,.55) 62%,
    rgba(10,9,22,.86) 84%,
    var(--night-0)   100%);
}

/* Narrow screens: push the scene up in scale so it still reads. */
@media (max-width:820px){
  :root{
    --sky-w:200%;    --sky-h:130%;   --sky-y:48%;
    --logo-w:46%;    --logo-y:36%;
    --props-w:230%;  --props-y:54%;
    --clouds-w:300%; --clouds-y:80%;
  }
}

/* floating film debris */
.motes{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
/* drifting script pages — warm paper, kept faint so they stay texture */
.mote{
  position:absolute;
  width:15px; height:20px;
  background:linear-gradient(150deg, rgba(247,232,206,.85), rgba(206,178,140,.55));
  border-radius:1px;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
  animation:mote-rise linear infinite;
}
/* the odd one out: a curl of film stock */
.mote.strip{
  width:9px; height:30px;
  border-radius:1px;
  background:
    repeating-linear-gradient(180deg, rgba(255,228,200,.45) 0 2px, transparent 2px 6px) left  center/2px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(255,228,200,.45) 0 2px, transparent 2px 6px) right center/2px 100% no-repeat,
    rgba(36,28,40,.8);
}
@keyframes mote-rise{
  0%{ transform:translateY(20px) rotate(0deg); opacity:0; }
  12%{ opacity:.55; }
  88%{ opacity:.4; }
  100%{ transform:translateY(-56vh) rotate(240deg); opacity:0; }
}

/* scroll cue */
.cue{
  position:absolute; bottom:26px; left:50%;
  transform:translateX(-50%);
  z-index:7;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--peach-faint);
}
.cue i{
  display:block; width:1px; height:44px;
  background:linear-gradient(180deg, rgba(242,195,164,.7), transparent);
  animation:cue-slide 2.4s ease-in-out infinite;
}
@keyframes cue-slide{
  0%{ transform:scaleY(0); transform-origin:top; opacity:0; }
  40%{ transform:scaleY(1); transform-origin:top; opacity:1; }
  60%{ transform:scaleY(1); transform-origin:bottom; opacity:1; }
  100%{ transform:scaleY(0); transform-origin:bottom; opacity:0; }
}
@media (max-height:700px){ .cue{ display:none; } }

/* ------------------------------------------------------------
   5. BUTTONS
   ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px;
  border-radius:999px;
  font-size:.84rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn-primary{
  background:linear-gradient(140deg, var(--copper-lit), var(--copper) 62%, #9C5836);
  color:#1B0E07;
  font-weight:600;
  box-shadow:0 10px 34px rgba(194,118,75,.30), inset 0 1px 0 rgba(255,222,196,.55);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 44px rgba(226,140,87,.42), inset 0 1px 0 rgba(255,222,196,.7);
}
.btn-ghost{
  background:var(--glass);
  border-color:var(--glass-line-2);
  color:var(--peach);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.btn-ghost:hover{ background:var(--glass-2); transform:translateY(-2px); }

/* ------------------------------------------------------------
   6. SECTIONS + GLASS PANELS
   ------------------------------------------------------------ */
section{ position:relative; padding:clamp(80px,11vw,140px) 0; }

.section-head{ margin-bottom:clamp(40px,6vw,68px); max-width:760px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.tag{
  display:block;
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
}
.section-head h2{ font-size:clamp(2.2rem,5.4vw,3.8rem); }
.section-head h2 em{ font-style:italic; color:var(--copper-lit); }
.section-head p{ margin-top:18px; color:var(--peach-dim); font-size:1rem; line-height:1.7; }

.panel{
  background:var(--glass);
  border:1px solid var(--glass-line);
  border-radius:var(--radius);
  backdrop-filter:blur(20px) saturate(1.1);
  -webkit-backdrop-filter:blur(20px) saturate(1.1);
  box-shadow:0 24px 70px rgba(6,5,14,.42), inset 0 1px 0 rgba(255,225,200,.10);
  position:relative;
  overflow:hidden;
}
/* dome-glass sheen */
.panel::before{
  content:'';
  position:absolute; left:0; right:0; top:0; height:52%;
  background:linear-gradient(180deg, rgba(255,232,210,.07), transparent);
  pointer-events:none;
}

.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* ---- scene / feature card ---- */
.card{
  padding:34px 30px 32px;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--glass-line-2);
  box-shadow:0 34px 80px rgba(6,5,14,.55), inset 0 1px 0 rgba(255,225,200,.16);
}
.card-no{
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--copper-lit);
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:22px;
}
.card-no span:last-child{ color:var(--peach-faint); letter-spacing:.14em; }
.card h3{ font-size:1.6rem; margin-bottom:12px; }
.card p{ font-size:.94rem; line-height:1.7; color:var(--peach-dim); }

/* ---- timeline ---- */
.timeline{ position:relative; }
.timeline::before{
  content:''; position:absolute; left:0; top:8px; bottom:8px; width:1px;
  background:linear-gradient(180deg, transparent, var(--glass-line-2) 12%, var(--glass-line-2) 88%, transparent);
}
.step{
  display:grid; grid-template-columns:190px 1fr;
  gap:36px;
  padding:30px 0 30px 32px;
  position:relative;
}
.step::before{
  content:''; position:absolute; left:-4px; top:42px;
  width:9px; height:9px; border-radius:50%;
  background:var(--copper-lit);
  box-shadow:0 0 0 4px rgba(226,140,87,.16), 0 0 14px var(--copper-lit);
}
.step-when{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
  padding-top:6px;
}
.step h3{ font-size:1.7rem; margin-bottom:10px; }
.step p{ color:var(--peach-dim); font-size:.96rem; line-height:1.75; max-width:600px; }
@media (max-width:760px){
  .step{ grid-template-columns:1fr; gap:10px; padding-left:26px; }
  .step::before{ top:34px; }
}

/* ---- client / credit tiles ---- */
.tile{
  aspect-ratio:1/.62;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  transition:transform .5s var(--ease), background .5s var(--ease);
}
.tile:hover{ transform:translateY(-4px); background:var(--glass-2); }
.tile svg{ width:40px; height:40px; opacity:.85; }
.tile span{
  font-size:.63rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--peach-faint);
}

/* ---- stat ---- */
.stat{ padding:30px 26px; text-align:center; }
.stat b{
  display:block;
  font-family:var(--display);
  font-size:clamp(2.4rem,6vw,3.4rem);
  font-weight:400;
  color:var(--peach);
  line-height:1;
}
.stat span{
  display:block; margin-top:12px;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--peach-faint);
}

/* ------------------------------------------------------------
   7. FORM
   ------------------------------------------------------------ */
.contact-panel{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(34px,5vw,64px);
  padding:clamp(32px,5vw,60px);
}
@media (max-width:880px){ .contact-panel{ grid-template-columns:1fr; } }

.field{ margin-bottom:18px; }
.field label{
  display:block;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--peach-faint);
  margin-bottom:8px;
}
.field input,
.field textarea{
  width:100%;
  background:rgba(10,9,22,.42);
  border:1px solid var(--glass-line);
  border-radius:12px;
  color:var(--peach);
  padding:14px 16px;
  font-size:.98rem;
  font-family:inherit;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:96px; line-height:1.6; }
.field input::placeholder,
.field textarea::placeholder{ color:rgba(195,163,146,.45); }
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--copper-lit);
  background:rgba(10,9,22,.6);
}
.form-submit{ width:100%; justify-content:center; margin-top:8px; }
.form-status{ margin-top:14px; font-size:.85rem; min-height:1.3em; color:var(--peach-dim); }
.form-status.err{ color:#F08A6E; }
.confirm{ text-align:center; padding:30px 0; }
.confirm b{
  display:block;
  font-family:var(--display); font-size:3.4rem; font-weight:400;
  color:var(--copper-lit); line-height:1;
}
.confirm p{ margin-top:14px; color:var(--peach-dim); font-size:.95rem; }

.reply-note{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
  margin-top:24px;
}

/* ------------------------------------------------------------
   8. FOOTER
   ------------------------------------------------------------ */
.foot{
  padding:60px 0 46px;
  border-top:1px solid rgba(242,195,164,.10);
  position:relative;
}
.foot-inner{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--peach-faint);
}
.foot-inner a{ text-decoration:none; transition:color .3s var(--ease); }
.foot-inner a:hover{ color:var(--peach); }

/* ------------------------------------------------------------
   9. PAGE HEADER (interior pages)
   ------------------------------------------------------------ */
.page-head{
  position:relative;
  padding:clamp(150px,20vh,230px) 0 clamp(90px,12vw,150px);
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
/* must come AFTER the overflow:hidden above, or it loses the cascade and
   the ridge gets guillotined at the header's bottom edge */
@supports (overflow-x: clip){
  .page-head{ overflow-x:clip; overflow-y:visible; }
}
.page-head > .wrap{ position:relative; z-index:5; }
/* same long settle into night as the hero */
.page-head::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:52%;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(12,10,24,0)   0%,
    rgba(12,10,24,.34) 44%,
    rgba(12,10,24,.44) 72%,
    rgba(12,10,24,.22) 90%,
    rgba(12,10,24,0)  100%);
}
.page-head h1{
  font-size:clamp(2.8rem,8vw,5.6rem);
  text-shadow:0 0 60px rgba(226,140,87,.22);
}
.page-head h1 em{ font-style:italic; color:var(--copper-lit); }
.page-head p{
  max-width:600px; margin:24px auto 0;
  color:var(--peach-dim); font-size:1.02rem; line-height:1.75;
}
/* a sliver of the sky estate render behind interior page headers */
.page-head .ridge{
  display:block;
  position:absolute; left:50%; bottom:-6%;
  width:min(2100px,155vw);
  height:min(46vh,420px);
  transform:translateX(-50%);
  z-index:2;
  opacity:.34;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 45%, rgba(0,0,0,.5) 82%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent, #000 45%, rgba(0,0,0,.5) 82%, transparent 100%);
  pointer-events:none;
  will-change:transform;
}
.page-head .ridge img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 62%;
}

/* ------------------------------------------------------------
   9b. INTERIOR COMPONENTS
   ------------------------------------------------------------ */

/* ---- accordion "shot list" ---- */
.slates{ display:flex; flex-direction:column; gap:14px; }
.slate{ padding:0; }
.slate-row{
  width:100%;
  display:grid;
  grid-template-columns:110px 1fr auto 28px;
  align-items:center;
  gap:20px;
  background:none; border:none;
  padding:26px 30px;
  text-align:left;
  color:inherit;
  cursor:pointer;
  transition:background .35s var(--ease);
}
.slate-row:hover{ background:rgba(240,205,180,.05); }
.slate-no{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--copper-lit);
}
.slate-name{
  font-family:var(--display);
  font-size:clamp(1.25rem,2.6vw,1.75rem);
  color:var(--peach);
}
.slate-tc{
  font-size:.68rem; letter-spacing:.16em;
  color:var(--peach-faint);
}
.slate-mark{
  width:28px; height:28px;
  border:1px solid var(--glass-line-2);
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--peach);
  font-size:1rem; line-height:1;
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.slate-row[aria-expanded="true"] .slate-mark{
  transform:rotate(45deg);
  background:rgba(226,140,87,.2);
}
@media (max-width:760px){
  .slate-row{ grid-template-columns:1fr 28px; gap:8px 16px; padding:22px; }
  .slate-no{ grid-column:1; }
  .slate-mark{ grid-column:2; grid-row:1/3; align-self:center; }
  .slate-name{ grid-column:1; }
  .slate-tc{ display:none; }
}

.slate-panel{
  display:grid; grid-template-columns:1fr 300px;
  gap:34px;
  padding:0 30px 32px;
  border-top:1px solid rgba(242,195,164,.08);
  padding-top:28px;
  margin:0 0 0;
}
.slate-panel[hidden]{ display:none; }
.slate-panel p{ color:var(--peach-dim); line-height:1.75; font-size:.97rem; }
@media (max-width:760px){ .slate-panel{ grid-template-columns:1fr; padding:24px 22px 26px; } }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.chip{
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  padding:7px 14px;
  border:1px solid var(--glass-line);
  border-radius:999px;
  color:var(--peach-dim);
  background:rgba(240,205,180,.04);
}

.still{
  border:1px dashed var(--glass-line);
  border-radius:14px;
  min-height:150px;
  display:grid; place-items:center;
  text-align:center;
  padding:18px;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--peach-faint);
  background:rgba(10,9,22,.25);
}

/* ---- video reel ---- */
.reel-frame{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--glass-line);
  background:#07060F;
  box-shadow:0 30px 90px rgba(6,5,14,.6);
}
.reel-frame video{ width:100%; height:auto; display:block; }
.reel-cover{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(180deg, rgba(10,9,22,.25), rgba(10,9,22,.72));
  border:none; cursor:pointer;
  color:var(--peach);
  transition:opacity .5s var(--ease);
}
.reel-cover[hidden]{ display:none; }
.reel-play{
  width:74px; height:74px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(240,205,180,.10);
  border:1px solid var(--glass-line-2);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.reel-play svg{ width:26px; height:26px; fill:var(--peach); margin-left:4px; }
.reel-cover:hover .reel-play{ transform:scale(1.08); background:rgba(226,140,87,.24); }
.reel-cover-title{ font-family:var(--display); font-size:1.5rem; }
.reel-cover-sub{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--peach-faint); }

.reel-meta{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-top:18px;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--peach-faint);
}
.reel-meta .spec{ color:var(--copper-lit); }
.reel-note{
  margin-top:26px;
  font-size:.8rem; line-height:1.7;
  color:rgba(195,163,146,.72);
  max-width:760px;
}

/* ---- work / review cards ---- */
.mark-visual{
  width:56px; height:56px;
  display:grid; place-items:center;
  border-radius:14px;
  background:rgba(240,205,180,.05);
  border:1px solid var(--glass-line);
  margin-bottom:20px;
}
.mark-visual svg{ width:28px; height:28px; }

.status{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:22px;
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}
.quote-mark{
  font-family:var(--display);
  font-size:3.4rem; line-height:.6;
  color:rgba(226,140,87,.5);
  display:block;
  margin-bottom:14px;
}
.card-tag{
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--peach-faint);
}

/* ---- crew ---- */
.crew-card{
  display:grid; grid-template-columns:280px 1fr;
  gap:0;
  overflow:hidden;
}
@media (max-width:760px){ .crew-card{ grid-template-columns:1fr; } }
.crew-photo{ position:relative; background:#0D0B18; }
.crew-photo picture{ display:block; width:100%; height:100%; }
.crew-photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 22%;
  min-height:320px;
}
.crew-photo::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 55%, rgba(10,9,22,.5));
  mix-blend-mode:multiply;
}
.crew-info{ padding:38px 36px; }
.crew-info h3{ font-size:2rem; margin:12px 0 6px; }
.crew-role{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--copper-lit);
  margin-bottom:18px;
}
.crew-info .bio{ color:var(--peach-dim); line-height:1.8; font-size:.97rem; }

/* ---- closing CTA band ---- */
.cta-band{ text-align:center; padding:clamp(46px,6vw,72px) clamp(26px,5vw,60px); }
.cta-band h2{ font-size:clamp(2rem,5vw,3.2rem); }
.cta-band h2 em{ font-style:italic; color:var(--copper-lit); }
.cta-band p{
  max-width:560px; margin:20px auto 32px;
  color:var(--peach-dim); line-height:1.75;
}

/* ---- contact sheet frames ---- */
.frame{
  aspect-ratio:16/10;
  border:1px dashed var(--glass-line);
  border-radius:14px;
  display:grid; place-items:center;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--peach-faint);
  background:rgba(10,9,22,.25);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.frame:hover{ border-color:var(--glass-line-2); background:rgba(240,205,180,.05); }

.sheet-head{
  display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:12px;
  margin-bottom:24px;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--peach-faint);
}
.sheet-head a{ color:var(--copper-lit); text-decoration:none; }
.sheet-head a:hover{ color:var(--peach); }

/* ------------------------------------------------------------
   10. REVEAL ON SCROLL
   ------------------------------------------------------------ */
.rise{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.rise.in{ opacity:1; transform:none; }

/* ------------------------------------------------------------
   11. 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;
  }
  .rise{ opacity:1; transform:none; }
  .motes,.cue{ display:none; }
  .hero-copy > *{ animation:none; opacity:1; transform:none; }
  /* the parallax script is already inert here; this pins the result.
     .plate keeps its transform — that is its translate(-50%,-50%)
     centring, not motion, and clearing it throws the whole scene off. */
  .plate img{ animation:none; }
  .plate{ transition:none; }
  .hero-copy{ transform:none !important; opacity:1 !important; }
}