@font-face{font-family:"Archivo";src:url("../fonts/Archivo-var.woff2") format("woff2-variations"),url("../fonts/Archivo-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Instrument Serif";src:url("../fonts/InstrumentSerif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Instrument Serif";src:url("../fonts/InstrumentSerif-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}

/* ============================================================
   DMX of New Jersey — scroll-film site
   Palette: ink void -> ivory bone -> amber finding -> warm paper
   ============================================================ */

:root{
  --ink:      #07090C;
  --ink-2:    #0E1319;
  --ink-3:    #161C24;
  --bone:     #E8E4DC;
  --bone-dim: #9A958A;
  --amber:    #E8A33D;
  --amber-lo: #C77A1E;
  --paper:    #F4F1EC;
  --paper-2:  #EAE4D9;
  --rule:     #DAD2C4;
  --text:     #191C20;
  --text-2:   #545C66;

  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad: clamp(20px, 5.5vw, 64px);
  --maxw: 1180px;
  --measure: 34ch;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:400; letter-spacing:-0.015em; }
p{ margin:0; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px var(--pad);
  color:var(--bone); transition:color .5s ease;
  pointer-events:none;
}
.hdr.on-light{ color:#14181D; }
.hdr > *{ pointer-events:auto; }
.mark{ display:flex; align-items:baseline; gap:9px; text-decoration:none; color:currentColor; }
.mark svg{ display:block; height:19px; width:auto; }
.mark .mark-sub{
  font-size:10px; letter-spacing:.20em; text-transform:uppercase;
  opacity:.62; font-weight:500; white-space:nowrap;
}
.hdr-call{
  font-size:12.5px; letter-spacing:.10em; text-transform:uppercase; font-weight:600;
  text-decoration:none; color:currentColor;
  border:1px solid currentColor; border-radius:999px; padding:8px 15px;
  opacity:.85; transition:opacity .25s, background .25s, color .25s;
  white-space:nowrap;
}
.hdr-call:hover{ opacity:1; background:currentColor; }
.hdr.on-light .hdr-call:hover{ color:var(--paper); }
.hdr:not(.on-light) .hdr-call:hover{ color:var(--ink); }

/* chapter readout */
.readout{
  position:fixed; left:var(--pad); bottom:22px; z-index:55;
  color:var(--bone); font-size:10.5px; letter-spacing:.19em; text-transform:uppercase;
  display:flex; align-items:center; gap:11px; opacity:0; transition:opacity .6s ease, color .5s ease;
  pointer-events:none;
}
.readout.show{ opacity:.82; }
.readout.on-light{ color:#14181D; }
.readout-bar{ width:78px; height:2px; background:currentColor; opacity:.28; position:relative; }
.readout-bar i{ position:absolute; inset:0 auto 0 0; width:0%; background:currentColor; opacity:1; display:block; }

/* ---------- Film ---------- */
#film{ position:relative; height:380vh; background:var(--ink); }
.stage{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--ink); }
#frame, #ambient{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#ambient{ pointer-events:none; }
.vig{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 38%, rgba(0,0,0,.55) 100%);
}
.grain{
  position:absolute; inset:-50%; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  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='.55'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }
.handoff{ position:absolute; inset:auto 0 0 0; height:60%; opacity:0; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--seam,#FBF7D5) 92%); }

/* loader */
.loader{
  position:fixed; inset:0; z-index:90; background:var(--ink); color:var(--bone);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  transition:opacity .7s ease; text-align:center; padding:24px;
}
.loader.gone{ opacity:0; pointer-events:none; }
.loader .lb{ width:min(210px,55vw); height:1px; background:rgba(232,228,220,.18); position:relative; }
.loader .lb i{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--amber); display:block; transition:width .25s ease; }
.loader small{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; opacity:.5; }

/* beats */
.beats{ position:absolute; inset:0; pointer-events:none; }
.beat{
  position:absolute; inset:0; display:flex; align-items:center;
  padding:0 var(--pad); opacity:0; will-change:opacity,transform;
}
.beat.left{ justify-content:flex-start; }
.beat.center{ justify-content:center; text-align:center; }
.beat-in{ max-width:min(620px, 88vw); color:var(--bone); }
.beat.center .beat-in{ margin-inline:auto; }
.beat h2, .beat h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.15rem, 7.4vw, 4.2rem); line-height:1.03; letter-spacing:-.02em;
  text-wrap:balance;
}
.beat p{
  margin-top:.85em; font-size:clamp(.95rem, 3.5vw, 1.12rem); line-height:1.55;
  color:rgba(232,228,220,.74); max-width:36ch;
}
.beat.center p{ margin-inline:auto; }
.beat em{ font-style:italic; color:var(--amber); }

/* hero */
.hero-eyebrow{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(232,228,220,.55); margin-bottom:1.5em; font-weight:500;
}
.hero-note{ margin-top:1.1em !important; color:rgba(232,228,220,.6) !important; }
.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:6;
  color:rgba(232,228,220,.62); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none;
  transition:color .5s ease;
}
.scroll-cue .cue-word{ animation:cueWord 3.4s ease-in-out infinite; }
.scroll-cue i{ width:1px; height:30px; background:linear-gradient(rgba(232,228,220,.65), transparent); animation:cue 2.2s ease-in-out infinite; }
@keyframes cueWord{ 0%,100%{opacity:.5} 50%{opacity:1} }
@keyframes cue{ 0%,100%{transform:scaleY(.4); transform-origin:top; opacity:.35} 50%{transform:scaleY(1); transform-origin:top; opacity:.8} }

/* the verdict stack (chapter 1) */
.verdicts{ position:absolute; inset:0; pointer-events:none; }
.verdict{
  position:absolute; left:50%; font-family:var(--display); font-style:italic;
  color:rgba(232,228,220,.5); white-space:nowrap; opacity:0;
  font-size:clamp(1.05rem, 4.4vw, 1.7rem); will-change:transform,opacity;
}

/* finale lockup */
.finale-mark{ display:block; width:clamp(190px, 52vw, 330px); height:auto; margin-bottom:.55em; }
.finale-mark{ stroke:currentColor; }
.beat .finale-sub{
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(232,228,220,.62); margin-top:0;
}

/* ---------- Content ---------- */
main{ position:relative; z-index:2; background:var(--paper); color:var(--text); }
.landing{ height:11vh; background:linear-gradient(to bottom, var(--seam,#FBF7D5), var(--paper) 88%); }

section{ padding-block:clamp(44px, 7.5vw, 84px); }
.eyebrow{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  color:var(--amber-lo); margin-bottom:1.25em;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--rule); }
h2.big{
  font-family:var(--display); font-size:clamp(1.95rem, 6.6vw, 3.3rem); line-height:1.08;
  letter-spacing:-.02em; max-width:20ch; text-wrap:balance;
}
h3{ font-family:var(--display); font-size:clamp(1.3rem, 4.4vw, 1.7rem); line-height:1.18; }
.lede{ font-size:clamp(1.05rem, 4vw, 1.22rem); line-height:1.62; max-width:var(--measure); color:var(--text); margin-top:1.1em; }
.body-copy{ max-width:var(--measure); color:var(--text-2); margin-top:1.1em; }
.body-copy + .body-copy{ margin-top:1em; }

/* still vs motion */
.compare{ display:grid; gap:2px; margin-top:clamp(26px,5vw,40px); background:var(--rule); border:1px solid var(--rule); }
.compare > div{ background:var(--paper); padding:clamp(24px,5.5vw,38px); }
.compare .c-tag{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--text-2); margin-bottom:1.3em; }
.compare .c-motion{ background:var(--ink); color:var(--bone); }
.compare .c-motion .c-tag{ color:var(--amber); }
.compare h3{ margin-bottom:.5em; }
.compare p{ color:var(--text-2); font-size:.97rem; }
.compare .c-motion p{ color:rgba(232,228,220,.72); }

/* scans */
.scans{ display:grid; gap:16px; margin-top:clamp(26px,5vw,40px); }
.scan{ background:var(--ink-2); border:1px solid #23292F; }
.scan img{ width:100%; height:auto; }
.scan figcaption{ padding:14px 16px 16px; color:var(--bone-dim); font-size:.86rem; line-height:1.45; }
.scan figcaption b{ color:var(--bone); font-weight:600; display:block; margin-bottom:.28em; font-size:.92rem; }
.scan-note{ margin-top:20px; font-size:.85rem; color:var(--text-2); font-style:italic; }

/* who it's for */
.who{ display:grid; gap:0; margin-top:clamp(30px,6vw,46px); border-top:1px solid var(--rule); }
.who li{ list-style:none; padding:20px 0; border-bottom:1px solid var(--rule); display:flex; gap:16px; align-items:baseline; }
.who li span{ font-family:var(--display); font-size:.95rem; color:var(--amber-lo); min-width:2.1em; }
.who li div{ font-size:1.02rem; }
.who li small{ display:block; color:var(--text-2); font-size:.9rem; margin-top:.3em; }
ul.who{ padding:0; margin-top:clamp(22px,4.5vw,34px); }

/* visit steps */
.steps{ margin-top:clamp(28px,5vw,42px); display:grid; gap:clamp(30px,5.5vw,46px); }
.step{ display:grid; gap:20px; }
.step-n{ font-family:var(--display); font-size:2.4rem; line-height:1; color:var(--amber-lo); }
.step img{ width:100%; height:auto; border:1px solid var(--rule); }
.step h3{ margin-bottom:.4em; }
.step p{ color:var(--text-2); max-width:var(--measure); }

/* dark band */
.band{ background:var(--ink); color:var(--bone); }
.band h2.big{ color:var(--bone); }
.band .body-copy{ color:rgba(232,228,220,.7); }
.band .eyebrow{ color:var(--amber); }
.band .eyebrow::after{ background:#252B33; }
.band .lede{ color:var(--bone); }

/* CTA */
.cta{ text-align:center; background:var(--ink); color:var(--bone); }
.cta h2{ font-family:var(--display); font-size:clamp(2rem,7vw,3.4rem); line-height:1.06; max-width:16ch; margin-inline:auto; }
.cta p{ color:rgba(232,228,220,.68); max-width:38ch; margin:1.2em auto 0; }
.callbtn{
  display:inline-flex; align-items:center; gap:12px; margin-top:2em;
  background:var(--amber); color:#1A1206; text-decoration:none;
  font-weight:700; font-size:1.14rem; letter-spacing:.01em;
  padding:17px 30px; border-radius:999px; transition:transform .2s, background .2s;
}
.callbtn:hover{ background:#F2B356; transform:translateY(-2px); }
.callbtn svg{ width:19px; height:19px; fill:currentColor; }
.cta .addr{ margin-top:2.2em; font-size:.95rem; color:rgba(232,228,220,.6); line-height:1.7; }
.cta .addr a{ color:var(--amber); text-decoration:none; }

/* footer */
footer{ background:var(--ink-2); color:var(--bone-dim); padding-block:clamp(48px,9vw,72px); font-size:.9rem; }
.f-top{ display:grid; gap:34px; padding-bottom:34px; border-bottom:1px solid #222831; }
.f-mark svg{ height:22px; width:auto; }
.f-mark svg{ color:var(--bone); }
.f-mark p{ margin-top:.9em; max-width:32ch; line-height:1.6; }
.f-col h4{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone); margin:0 0 1.1em; font-weight:600; }
.f-col a, .f-col p{ display:block; color:var(--bone-dim); text-decoration:none; margin-bottom:.55em; line-height:1.55; }
.f-col a:hover{ color:var(--amber); }
.socials{ display:flex; gap:14px; margin-top:.3em; }
.socials a{ width:34px; height:34px; border:1px solid #2A313A; border-radius:50%; display:grid; place-items:center; margin:0; transition:border-color .2s, background .2s; }
.socials a:hover{ border-color:var(--amber); background:rgba(232,163,61,.1); }
.socials svg{ width:15px; height:15px; fill:var(--bone-dim); transition:fill .2s; }
.socials a:hover svg{ fill:var(--amber); }
.f-bot{ padding-top:30px; display:grid; gap:16px; font-size:.82rem; line-height:1.65; color:#6B7480; }
.f-bot .disc{ max-width:70ch; }

/* sticky mobile call */
.sticky-call{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--amber); color:#1A1206; text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 18px calc(15px + env(safe-area-inset-bottom));
  font-weight:700; font-size:1.02rem;
  transform:translateY(105%); transition:transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -6px 24px rgba(0,0,0,.22);
}
.sticky-call.show{ transform:translateY(0); }
.sticky-call svg{ width:17px; height:17px; fill:currentColor; }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.rv.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (min-width:720px){
  body{ font-size:17.5px; }
  .compare{ grid-template-columns:1fr 1fr; }
  .scans{ grid-template-columns:repeat(3,1fr); }
  .step{ grid-template-columns:auto 1fr 1.15fr; gap:34px; align-items:start; }
  .step .step-n{ padding-top:.1em; }
  .f-top{ grid-template-columns:1.5fr 1fr 1fr; gap:48px; }
  .f-bot{ grid-template-columns:1fr auto; align-items:end; }
  .sticky-call{ display:none; }
  .beat.left .beat-in{ margin-left:2vw; }
}
@media (min-width:1040px){
  .step{ gap:48px; }
}

@media (prefers-reduced-motion:reduce){
  .grain{ animation:none; }
  .scroll-cue i{ animation:none; }
  .rv{ opacity:1; transform:none; transition:none; }
  *{ scroll-behavior:auto !important; }
}

/* finale resolves onto the film's near-white field */
.beat.finale .beat-in{ color:#14181D; }
.beat.finale .finale-sub{ color:rgba(20,24,29,.66); }

/* legibility scrim behind film type — soft, follows the text block */
.beat::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 62% at 50% 50%, rgba(7,9,12,.72) 0%, rgba(7,9,12,.42) 45%, transparent 78%);
}
.beat.left::before{ background:radial-gradient(95% 62% at 22% 50%, rgba(7,9,12,.76) 0%, rgba(7,9,12,.44) 48%, transparent 80%); }
.beat.finale::before{ background:radial-gradient(110% 60% at 50% 50%, rgba(251,247,213,.74) 0%, rgba(251,247,213,.36) 50%, transparent 80%); }
.beat-in{ position:relative; }

/* film type: hold legibility over bright bone */
.beat p{ color:rgba(232,228,220,.84); text-shadow:0 1px 14px rgba(7,9,12,.55); }
.beat h1, .beat h2{ text-shadow:0 2px 22px rgba(7,9,12,.45); }
.beat.finale .beat-in{ text-shadow:none; }
.beat.finale .finale-sub{ line-height:1.9; }
.beat.finale .finale-sub span{ font-size:.86em; letter-spacing:.3em; opacity:.8; }

/* header sits on the content once the film is behind us */
.hdr.solid{
  background:rgba(244,241,236,.93);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--rule);
}
@supports not (backdrop-filter: blur(1px)){ .hdr.solid{ background:var(--paper); } }

/* keep the sticky call bar off the last of the footer */
@media (max-width:719px){ footer{ padding-bottom:calc(clamp(48px,9vw,72px) + 72px); } }