/* ============================================================
   SURREAL THEORY
   Dark cinematic system. Restraint is the whole point:
   one metallic accent, used sparingly; everything else is
   black, charcoal and warm white. Texture does the work
   that colour would do on a lesser brief.
   ============================================================ */

:root{
  --void:      #0A0A0B;   /* deep black — page ground        */
  --charcoal:  #121214;   /* raised surface                  */
  --smoke:     #1C1C1F;   /* hairlines, borders              */
  --warm:      #F1EDE6;   /* warm white — primary text       */
  --ash:       #86827C;   /* secondary text                  */
  --metal:     #A2937C;   /* restrained champagne metallic   */
  --metal-lo:  #6B6153;   /* recessed metallic               */

  --display: "Instrument Serif", Georgia, serif;
  --sans:    "Archivo", system-ui, -apple-system, sans-serif;
  --mono:    "DM Mono", ui-monospace, monospace;

  --gut: clamp(1.25rem, 5vw, 5rem);
  --slow: cubic-bezier(.16,.84,.34,1);
  --film: 1.4s var(--slow);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--void); color:var(--warm);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
:focus-visible{ outline:1px solid var(--metal); outline-offset:4px }

/* ---------- film grain: the texture that makes it read as film ---------- */
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none;
  opacity:.048; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 700ms steps(3) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-2%)} 100%{transform:translate(0,0)}
}

/* ---------- type ---------- */
.d1,.d2,.d3{
  font-family:var(--display); font-weight:400; margin:0;
  line-height:.98; letter-spacing:-.02em;
}
.d1{ font-size:clamp(3.25rem, 11vw, 9rem) }
.d2{ font-size:clamp(2.4rem, 6.5vw, 5rem) }
.d3{ font-size:clamp(1.6rem, 3vw, 2.5rem); line-height:1.08 }
.d1 em,.d2 em,.d3 em{ font-style:italic; color:var(--metal) }

.label{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--metal); margin:0 0 1.5rem;
}
.label-ash{ color:var(--ash) }
p{ margin:0 0 1.15em }
.lede{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--ash); max-width:46ch; line-height:1.6 }
.small{ font-size:.9rem; color:var(--ash) }

.wrap{ max-width:1440px; margin:0 auto; padding-inline:var(--gut); position:relative; z-index:2 }
.band{ padding-block:clamp(5rem,13vw,11rem) }
.hair{ border-top:1px solid var(--smoke) }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem var(--gut);
  transition:background .6s var(--slow), padding .6s var(--slow);
}
.nav.stuck{ background:rgba(10,10,11,.86); backdrop-filter:blur(16px); padding-block:.95rem }
.wordmark{
  font-family:var(--sans); font-size:.78rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase;
}
.wordmark i{ font-style:normal; color:var(--metal) }
.nav-links{ display:flex; gap:2.25rem; align-items:center }
.nav-links a{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ash); transition:color .4s var(--slow);
}
.nav-links a:hover{ color:var(--warm) }
.nav-links a.on{ color:var(--warm) }
@media(max-width:820px){ .nav-links a:not(.keep){ display:none } }

/* ============================================================
   HERO — the opening frame
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:grid; align-items:center;
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0 }
.hero-bg video{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 2.6s var(--slow);
  filter:saturate(.72) contrast(1.04);
}
.hero-bg video.up{ opacity:.4 }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(10,10,11,.72) 0%, rgba(10,10,11,.34) 40%, rgba(10,10,11,.96) 100%),
    radial-gradient(120% 80% at 50% 40%, transparent 30%, rgba(10,10,11,.8) 100%);
}
.hero-inner{ position:relative; z-index:2; padding-block:9rem 5rem }
.hero .d1{ max-width:16ch }
.hero-sub{ margin-top:2.25rem; max-width:44ch }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:3rem }

.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.95rem 1.9rem; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; border:1px solid var(--smoke);
  transition:border-color .5s var(--slow), background .5s var(--slow), color .5s var(--slow);
}
.btn-solid{ background:var(--warm); border-color:var(--warm); color:var(--void); font-weight:500 }
.btn-solid:hover{ background:var(--metal); border-color:var(--metal) }
.btn-line:hover{ border-color:var(--metal); color:var(--metal) }

.scrollcue{
  position:absolute; left:var(--gut); bottom:2.25rem; z-index:2;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ash);
  display:flex; align-items:center; gap:.75rem;
}
.scrollcue::before{
  content:""; width:44px; height:1px; background:var(--metal-lo);
  transform-origin:left; animation:cue 2.8s var(--slow) infinite;
}
@keyframes cue{ 0%,100%{transform:scaleX(.35); opacity:.5} 50%{transform:scaleX(1); opacity:1} }

/* ============================================================
   STATEMENT
   ============================================================ */
.statement{ max-width:20ch }
.statement-lines{ margin-top:3.5rem; display:grid; gap:.4rem; max-width:34ch }
.statement-lines span{
  font-family:var(--display); font-size:clamp(1.35rem,2.6vw,2.1rem);
  line-height:1.25; color:var(--ash);
}
.statement-lines span b{ font-weight:400; color:var(--warm) }

/* ============================================================
   FEATURED CASE
   ============================================================ */
.case-hero{
  position:relative; aspect-ratio:21/9; overflow:hidden;
  background:var(--charcoal); margin-top:3rem;
}
@media(max-width:760px){ .case-hero{ aspect-ratio:4/5 } }
.case-hero video{ width:100%; height:100%; object-fit:cover; filter:saturate(.8) }
.case-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,11,.85), transparent 55%);
}
.case-play{
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; padding:2rem clamp(1.25rem,3vw,2.5rem); flex-wrap:wrap;
}
.case-play .t{ font-family:var(--display); font-size:clamp(1.5rem,3vw,2.4rem); line-height:1 }
.case-play .m{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ash); margin-top:.5rem;
}
.playbtn{
  display:inline-flex; align-items:center; gap:.7rem; font-family:var(--mono);
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid rgba(241,237,230,.28); padding:.75rem 1.3rem;
  backdrop-filter:blur(6px); transition:border-color .4s var(--slow), color .4s var(--slow);
}
.playbtn:hover{ border-color:var(--metal); color:var(--metal) }

/* case steps: the sequence is real, so it is numbered */
.steps{ display:grid; gap:0; margin-top:4rem; border-top:1px solid var(--smoke) }
.step{
  display:grid; grid-template-columns:4rem minmax(0,14rem) minmax(0,1fr);
  gap:2rem; padding-block:2rem; border-bottom:1px solid var(--smoke);
  align-items:start;
}
@media(max-width:860px){ .step{ grid-template-columns:3rem minmax(0,1fr); gap:1rem } .step .sd{ grid-column:2 } }
.step .sn{ font-family:var(--mono); font-size:.7rem; color:var(--metal-lo); letter-spacing:.1em; padding-top:.4rem }
.step .sh{ font-family:var(--display); font-size:1.35rem; line-height:1.1 }
.step .sd{ color:var(--ash); font-size:.95rem; margin:0; max-width:56ch }
.step.pending .sd{ color:var(--metal-lo); font-style:italic }

/* ============================================================
   FILM GRID
   ============================================================ */
.films{
  display:grid; gap:clamp(.75rem,1.5vw,1.5rem); margin-top:3.5rem;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media(max-width:1080px){ .films{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media(max-width:720px){ .films{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.film{ text-align:left; display:block; width:100% }
.film-frame{
  position:relative; aspect-ratio:9/16; overflow:hidden; background:var(--charcoal);
  transition:transform 1s var(--slow);
}
.film:hover .film-frame{ transform:scale(1.014) }
.film-frame video{ width:100%; height:100%; object-fit:cover; filter:saturate(.8); transition:filter .9s var(--slow) }
.film:hover .film-frame video{ filter:saturate(1) }
.film-frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,11,.7), transparent 45%);
  opacity:.85; transition:opacity .9s var(--slow);
}
.film:hover .film-frame::after{ opacity:.5 }
.film-cap{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:1.1rem }
.film-cap .ft{ font-family:var(--display); font-size:1.15rem; line-height:1.1 }
.film-cap .fm{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash); margin-top:.4rem;
  display:flex; justify-content:space-between; gap:.75rem;
}
/* lower-resolution sources sit in the tighter columns so they are never over-scaled */

/* ============================================================
   DIGITAL
   ============================================================ */
.digital{ display:grid; gap:clamp(1.5rem,4vw,3rem); grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:3.5rem }
@media(max-width:860px){ .digital{ grid-template-columns:1fr } }
.dcard{ display:block }
.dshot{
  aspect-ratio:16/10; background:var(--charcoal); overflow:hidden;
  border:1px solid var(--smoke); position:relative;
}
.dshot img{ width:100%; height:100%; object-fit:cover; object-position:top center }
.dshot .missing{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:var(--metal-lo);
  background:repeating-linear-gradient(45deg, var(--charcoal) 0 12px, #17171A 12px 24px);
  padding:1.5rem; line-height:1.9;
}
.dmeta{ display:flex; justify-content:space-between; gap:1.5rem; align-items:baseline; margin-top:1.25rem }
.dmeta h3{ font-family:var(--display); font-weight:400; font-size:1.5rem; margin:0; line-height:1.1 }
.dmeta .tag{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ash); white-space:nowrap;
}
.dmeta .tag.live{ color:var(--metal) }
.dcard p{ margin-top:.85rem; color:var(--ash); font-size:.93rem; max-width:52ch }

/* ============================================================
   SERVICES
   ============================================================ */
.svcs{ margin-top:3.5rem; border-top:1px solid var(--smoke) }
.svc{
  display:grid; grid-template-columns:4rem minmax(0,22rem) minmax(0,1fr);
  gap:2rem; padding-block:2.4rem; border-bottom:1px solid var(--smoke);
  align-items:baseline; transition:background .7s var(--slow);
}
@media(max-width:860px){ .svc{ grid-template-columns:3rem minmax(0,1fr) } .svc p{ grid-column:2 } }
.svc:hover{ background:linear-gradient(90deg, rgba(162,147,124,.045), transparent 60%) }
.svc .sn{ font-family:var(--mono); font-size:.68rem; color:var(--metal-lo) }
.svc h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,2.6vw,2.1rem); margin:0; line-height:1.05 }
.svc p{ margin:0; color:var(--ash); font-size:.95rem; max-width:50ch }

/* ============================================================
   CONTACT + FOOTER
   ============================================================ */
.contact-grid{ display:grid; gap:clamp(2rem,6vw,5rem); grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:start }
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr } }
.mail{
  font-family:var(--display); font-size:clamp(1.7rem,4vw,3.2rem);
  color:var(--metal); display:inline-block; margin-top:1.5rem;
  word-break:break-word; line-height:1.1;
  border-bottom:1px solid var(--metal-lo); padding-bottom:.2rem;
  transition:color .5s var(--slow), border-color .5s var(--slow);
}
.mail:hover{ color:var(--warm); border-color:var(--warm) }
.dl{ display:grid; gap:1.5rem; margin:0 }
.dl dt{ font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--metal-lo) }
.dl dd{ margin:.45rem 0 0; font-size:.95rem; color:var(--ash) }

footer{ padding-block:3rem; border-top:1px solid var(--smoke) }
.foot{
  display:flex; flex-wrap:wrap; gap:1.25rem 2.5rem; justify-content:space-between;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--metal-lo);
}
.foot a{ transition:color .4s var(--slow) }
.foot a:hover{ color:var(--warm) }

/* ============================================================
   PLAYER
   ============================================================ */
.player{
  position:fixed; inset:0; z-index:100; display:none; place-items:center;
  padding:1.5rem; background:rgba(6,6,7,.97); backdrop-filter:blur(10px);
}
.player[open]{ display:grid }
.player video{ max-height:88svh; max-width:min(94vw,480px) }
.player .x{
  position:absolute; top:1.5rem; right:var(--gut); font-family:var(--mono);
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ash); padding:.6rem;
}
.player .x:hover{ color:var(--warm) }
.player .cap{
  position:absolute; left:0; right:0; bottom:1.5rem; text-align:center;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ash);
}

/* ============================================================
   PRICING PAGE
   ============================================================ */
.rate{
  display:flex; flex-wrap:wrap; gap:.75rem 2.5rem; justify-content:space-between;
  align-items:baseline; padding-block:2rem; border-bottom:1px solid var(--smoke);
}
.rate:first-of-type{ border-top:1px solid var(--smoke) }
.rate h3{ font-family:var(--display); font-weight:400; font-size:1.6rem; margin:0; line-height:1.1 }
.rate p{ margin:.6rem 0 0; color:var(--ash); font-size:.93rem; max-width:56ch }
.rate .amt{ font-family:var(--mono); font-size:1.05rem; color:var(--metal); white-space:nowrap }
.rate ul{ list-style:none; padding:0; margin:.9rem 0 0; display:grid; gap:.4rem }
.rate li{ font-size:.88rem; color:var(--ash); padding-left:1.15rem; position:relative }
.rate li::before{ content:"—"; position:absolute; left:0; color:var(--metal-lo) }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(24px); transition:opacity var(--film), transform var(--film) }
.rv.in{ opacity:1; transform:none }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important }
  html{ scroll-behavior:auto }
  .rv{ opacity:1; transform:none }
  .grain{ display:none }
  .hero-bg video{ opacity:.4 }
}

/* link affordance on the digital cards */
.dgo{
  display:inline-block; margin-top:1.1rem; font-family:var(--mono);
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--metal-lo); transition:color .5s var(--slow);
}
.dcard:hover .dgo{ color:var(--metal) }

/* ---------- packages ---------- */
.pkgs{ display:grid; gap:1px; background:var(--smoke); margin-top:3.5rem; border:1px solid var(--smoke) }
.pkg{ background:var(--void); padding:clamp(1.75rem,3vw,2.75rem); display:grid; gap:1.25rem;
      grid-template-columns:minmax(0,1fr) auto; align-items:start;
      transition:background .7s var(--slow) }
.pkg:hover{ background:var(--charcoal) }
@media(max-width:760px){ .pkg{ grid-template-columns:1fr } }
.pkg-h{ font-family:var(--display); font-weight:400; font-size:clamp(1.7rem,3vw,2.4rem); margin:0; line-height:1.05 }
.pkg-n{ font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
        color:var(--metal-lo); margin:0 0 .75rem }
.pkg-d{ margin:.85rem 0 0; color:var(--ash); font-size:.95rem; max-width:52ch }
.pkg-amt{ font-family:var(--mono); font-size:1.15rem; color:var(--metal); white-space:nowrap; text-align:right }
@media(max-width:760px){ .pkg-amt{ text-align:left } }
.pkg-in{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.45rem; grid-column:1/-1 }
.pkg-in li{ font-size:.88rem; color:var(--ash); padding-left:1.3rem; position:relative }
.pkg-in li::before{ content:"+"; position:absolute; left:0; color:var(--metal-lo); font-family:var(--mono) }
.sec-h{ margin-top:clamp(4rem,9vw,7rem) }

/* ---------- package detail disclosure ---------- */
.pkg-more{ grid-column:1/-1; margin-top:1.5rem; border-top:1px solid var(--smoke); padding-top:1.25rem }
.pkg-more summary{
  cursor:pointer; list-style:none; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--metal-lo);
  display:flex; align-items:center; gap:.6rem; transition:color .4s var(--slow);
}
.pkg-more summary::-webkit-details-marker{ display:none }
.pkg-more summary:hover{ color:var(--metal) }
.pkg-more summary::after{ content:"+"; margin-left:auto; font-size:.9rem; line-height:1 }
.pkg-more[open] summary::after{ content:"–" }
.pkg-more[open] summary{ color:var(--metal) }
.spec-grid{
  display:grid; gap:1.75rem 2.5rem; margin-top:1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.spec-grid dt{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--metal-lo); margin-bottom:.5rem;
}
.spec-grid dd{ margin:0; font-size:.88rem; color:var(--ash); line-height:1.55 }
.spec-grid dd ul{ list-style:none; padding:0; margin:0; display:grid; gap:.3rem }
.spec-grid dd li{ padding-left:1rem; position:relative }
.spec-grid dd li::before{ content:"·"; position:absolute; left:.25rem; color:var(--metal-lo) }

/* ---------- terms ---------- */
.terms{ display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:3rem }
.terms h3{ font-family:var(--display); font-weight:400; font-size:1.35rem; margin:0 0 .85rem; line-height:1.1 }
.terms p, .terms li{ font-size:.9rem; color:var(--ash); margin:0 }
.terms ul{ list-style:none; padding:0; display:grid; gap:.5rem }
.terms li{ padding-left:1.15rem; position:relative }
.terms li::before{ content:"—"; position:absolute; left:0; color:var(--metal-lo) }