/* ============================================================
   Kindra Sign Shop — sales site
   Palette is the Kindra brand kit, sampled from the logo files:
     ink #0E110B · lime #B4FF3C · deep lime #7ED320
     plate #253311 · off-white #F4F4EE
   ============================================================ */

:root{
  --ink:#0E110B;
  --ink-2:#12150F;
  --ink-3:#171B13;
  --ink-4:#1C2118;
  --line:#262B1E;
  --line-soft:#20261A;
  --plate:#253311;
  --lime:#B4FF3C;
  --lime-deep:#7ED320;
  --lime-ink:#4B6606;
  --off:#F4F4EE;
  --mid:#9BA394;
  --low:#6E7665;

  --shell:min(1400px, 94vw);
  --r:18px;

  --d:'Outfit',system-ui,sans-serif;
  --b:'Inter',system-ui,sans-serif;
  --m:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--off);
  font-family:var(--b);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
h1,h2,h3{font-family:var(--d);font-weight:700;line-height:1.02;letter-spacing:-.025em;margin:0}
p{margin:0 0 1.1em}
b,strong{color:var(--off);font-weight:600}
em{font-style:normal;color:var(--lime)}
.hl{color:var(--lime)}
.wrap{width:var(--shell);margin-inline:auto}

.skip{position:absolute;left:-9999px;top:0;background:var(--lime);color:var(--ink);padding:.7rem 1rem;z-index:99}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}

/* ── dimension-line label: a signwriter's measurement tick ── */
.stage{
  font-family:var(--m);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--low);
  display:flex;align-items:center;gap:.85rem;margin:0 0 1.4rem;
}
.stage::before{
  content:"";width:44px;height:7px;flex:none;
  border-left:1px solid currentColor;border-right:1px solid currentColor;
  background:linear-gradient(currentColor,currentColor) left 50%/100% 1px no-repeat;
  opacity:.75;
}
.stage-lime{color:var(--lime)}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--lime);color:var(--ink);
  font-family:var(--d);font-weight:700;font-size:16px;letter-spacing:-.01em;
  padding:.95rem 1.6rem;border-radius:999px;text-decoration:none;border:1px solid var(--lime);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover{background:#c9ff6b;border-color:#c9ff6b;transform:translateY(-2px);box-shadow:0 10px 30px -12px rgba(180,255,60,.55)}
.btn-ghost{background:transparent;color:var(--off);border-color:var(--line)}
.btn-ghost:hover{background:var(--ink-3);border-color:var(--lime);color:var(--lime);box-shadow:none}
.btn-sm{padding:.6rem 1.1rem;font-size:14px}
.btn-lg{padding:1.1rem 2rem;font-size:18px}

/* ── nav ── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;gap:2rem;
  padding:.85rem max(4vw, calc((100vw - var(--shell))/2));
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.stuck{background:rgba(14,17,11,.82);backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
.nav-brand{display:flex;align-items:center;text-decoration:none;color:var(--off);min-height:44px}
.nav-lockup{width:150px;height:auto}
.foot-lockup{width:178px}
.nav-links{display:flex;gap:1.6rem;margin-left:auto}
.nav-links a{color:var(--mid);text-decoration:none;font-size:14.5px;font-weight:500}
.nav-links a:hover{color:var(--lime)}

/* ── hero ── */
.hero{position:relative;min-height:92svh;display:flex;align-items:center;padding:6rem 0 3.5rem;overflow:hidden}

.hero::after{ /* vignette so the floor never fights the type */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(78% 60% at 26% 42%, rgba(14,17,11,.9) 0%, rgba(14,17,11,.28) 58%, transparent 100%);
}
.hero-inner{
  position:relative;z-index:2;width:var(--shell);margin-inline:auto;max-width:100%;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.hero h1{font-size:clamp(2.2rem,3.5vw,3.45rem);font-weight:800;margin:0 0 1.5rem;letter-spacing:-.04em}
.lede{font-size:clamp(1rem,1.35vw,1.16rem);color:var(--mid);max-width:40ch;margin-bottom:2.1rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.4rem}
.hero-note{font-family:var(--m);font-size:12px;letter-spacing:.06em;color:var(--low);margin:0}

/* device cluster — the product, angled, not a logo */
.hero-devices{
  position:relative;perspective:1600px;perspective-origin:65% 50%;
  justify-self:end;width:100%;max-width:660px;margin-right:-3vw;
}
.hero-screen,.hero-phone{
  display:block;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.hero-screen{
  width:100%;border-radius:12px;
  transform:rotateY(var(--ry,-15deg)) rotateX(var(--rx,3.5deg)) translateZ(0);
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.75));
}
.hero-phone{
  position:absolute;left:-9%;bottom:-11%;width:27%;min-width:130px;
  transform:rotateY(var(--ry,-15deg)) rotateX(var(--rx,3.5deg)) translateZ(120px);
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.8));
}
.hero-tag{
  position:absolute;right:2%;bottom:-2.6rem;margin:0;
  font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--low);
}
.hero-scroll{
  position:absolute;left:50%;bottom:2rem;transform:translateX(-50%);z-index:2;
  font-family:var(--m);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--low);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
}
.hero-scroll span{width:1px;height:38px;background:linear-gradient(var(--lime),transparent);animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* ── bands ── */
.band{padding:clamp(3.4rem,5.4vw,5rem) 0;position:relative}
.band-plate{background:var(--ink-2);border-block:1px solid var(--line-soft)}
.band-limits{background:var(--ink-2);border-block:1px solid var(--line-soft)}
.band-friday{background:linear-gradient(180deg,var(--ink) 0%,#101409 45%,var(--ink) 100%)}
.h2{font-size:clamp(2.1rem,4.6vw,3.6rem);margin:0 0 1.1rem}
.h2-big{font-size:clamp(2.3rem,5.4vw,4.4rem)}
.wide{color:var(--mid);max-width:62ch;font-size:1.05rem}

/* ── leaks ── */
.leaks{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;margin-top:3rem}
.leak{background:var(--ink);padding:2.1rem 1.7rem;transition:background .25s}
.leak:hover{background:var(--ink-3)}
.leak h3{font-size:1.16rem;margin-bottom:.7rem;color:var(--lime)}
.leak p{color:var(--mid);font-size:.95rem;margin:0}

/* ── can't cards ── */
.cants{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.1rem;margin-top:3rem}
.cant{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:2rem 1.8rem}
.cant-k{font-family:var(--m);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--low);margin:0 0 .5rem}
.cant h3{font-size:1.3rem;margin-bottom:.9rem;line-height:1.15}
.cant p{color:var(--mid);font-size:.95rem;margin:0}
.cant-own{background:var(--plate);border-color:#31461a}
.cant-own h3{color:var(--lime)}
.cant-own p{color:#cfe0b6}

/* ── feature blocks ── */
.feat{
  width:var(--shell);margin:3.4rem auto 0;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.feat-flip .feat-copy{order:2}
.feat-hero{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.feat-copy h3{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:1.2rem;text-wrap:balance}
.feat-copy p{color:var(--mid);font-size:1rem}
.pull{
  border-left:2px solid var(--lime);padding-left:1.1rem;
  color:var(--off)!important;font-family:var(--d);font-weight:500;font-size:1.08rem;line-height:1.4;
}
.feat-shot{position:relative}
.screen{width:100%;height:auto;border-radius:10px;filter:drop-shadow(0 30px 60px rgba(0,0,0,.65))}
.phone{width:100%;height:auto;filter:drop-shadow(0 24px 48px rgba(0,0,0,.7))}
.feat-shot-phones{display:flex;gap:clamp(.6rem,2vw,1.6rem);align-items:flex-start}
.feat-shot-phones .phone{width:50%}
.phone-back{margin-top:12%;opacity:.92}
.phone-inset{position:absolute;right:-2%;bottom:-8%;width:23%;min-width:120px}

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

/* ── a friday ── */
.friday{width:var(--shell);margin:2.4rem auto 0;display:grid;grid-template-columns:300px 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.friday-rail{position:sticky;top:22vh}
.friday-phone{position:relative}
.friday-phone img{width:100%;filter:drop-shadow(0 30px 60px rgba(0,0,0,.75));transition:opacity .35s ease}
.friday-phone.swap img{opacity:0}
.friday-list{list-style:none;margin:0;padding:0;counter-reset:none}
.fstep{
  border-top:1px solid var(--line-soft);padding:2.4rem 0;
  opacity:.32;transition:opacity .45s ease;
  display:grid;grid-template-columns:112px 1fr;gap:1.5rem;align-items:start;
}
.fstep.on{opacity:1}
.fstep-end{border-bottom:1px solid var(--line-soft)}
.ftime{font-family:var(--m);font-size:1.35rem;font-weight:500;color:var(--lime);margin:0;letter-spacing:-.02em}
.ftime span{font-size:.75rem;letter-spacing:.1em;margin-left:2px;color:var(--low)}
.fbody{margin:0;color:var(--mid);font-size:1.02rem}
.fstep.on .fbody{color:#c3cbba}

/* ── yours list ── */
.yours{list-style:none;margin:3rem 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 2.5rem}
.yours li{border-bottom:1px solid var(--line-soft);padding:1rem 0 1rem 2rem;position:relative;color:var(--mid);font-size:.98rem}
.yours li::before{content:"";position:absolute;left:0;top:1.5rem;width:11px;height:11px;background:var(--lime);clip-path:polygon(0 0,100% 0,0 100%)}

/* ── gallery ── */
.gallery{width:var(--shell);margin:3.5rem auto 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.gcell{
  background:var(--ink-2);border:1px solid var(--line-soft);border-radius:12px;
  padding:.7rem;cursor:pointer;color:var(--mid);font-family:var(--m);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;text-align:left;
  display:flex;flex-direction:column;gap:.7rem;transition:border-color .2s,transform .2s,background .2s;
}
.gcell-wide{grid-column:span 2}
.gcell img{border-radius:6px;width:100%;height:auto}
.gcell:hover{border-color:var(--lime);transform:translateY(-3px);background:var(--ink-3);color:var(--lime)}

/* ── limits ── */
.limits{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem 2.4rem;margin-top:3rem}
.limit h3{font-size:1.08rem;margin-bottom:.5rem;color:var(--off)}
.limit p{color:var(--low);font-size:.94rem;margin:0}

/* ── two things ── */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.2rem;margin-top:3rem}
.two-item{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:2rem}
.two-n{font-family:var(--m);font-size:2.4rem;color:var(--lime);margin:0 0 .6rem;line-height:1;opacity:.35}
.two-item h3{font-size:1.2rem;margin-bottom:.8rem}
.two-item p{color:var(--mid);font-size:.95rem;margin:0}

/* ── cta ── */
.band-cta{padding:clamp(4.5rem,7vw,6.5rem) 0;background:
  radial-gradient(90% 120% at 15% 0%, rgba(180,255,60,.09) 0%, transparent 60%),var(--ink);
  border-top:1px solid var(--line-soft)}
.band-cta .wide{margin-bottom:2.4rem}

/* ── footer ── */
.foot{border-top:1px solid var(--line-soft);padding:3rem 0;background:var(--ink-2)}
.foot-in{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}
.foot p{margin:0;color:var(--low);font-size:.86rem;max-width:52ch}

/* ── lightbox ── */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(6,8,3,.94);display:flex;align-items:center;justify-content:center;padding:4vw;backdrop-filter:blur(6px)}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:92vh;width:auto;border-radius:8px}
.lb-close{position:absolute;top:1.2rem;right:1.6rem;background:none;border:0;color:var(--off);font-size:2.6rem;line-height:1;cursor:pointer}
.lb-close:hover{color:var(--lime)}

/* ── responsive ── */
@media (max-width:980px){
  .hero{min-height:auto;padding-top:6rem}
  .hero-inner{grid-template-columns:minmax(0,1fr);gap:3.5rem}
  .hero-devices{margin-right:0;perspective:none}
  .hero-screen{transform:none!important}
  .hero-phone{position:static;width:38%;margin:-14% 0 0 auto;transform:none!important}
  .hero-tag{position:static;margin-top:1rem;text-align:right}
  .feat,.feat-hero{grid-template-columns:minmax(0,1fr);gap:2.2rem}
  .feat-flip .feat-copy{order:0}
  .friday{grid-template-columns:minmax(0,1fr)}
  .friday-rail{display:none}
  .fstep{opacity:1;grid-template-columns:88px 1fr;gap:1rem;padding:1.8rem 0}
  .gcell-wide{grid-column:span 1}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav-links{display:none}
  .nav-lockup{width:118px}
  .nav .btn-sm{padding:.55rem .95rem;font-size:13px}
  .btn{font-size:15px;padding:.85rem 1.3rem}
  .band{padding:2.8rem 0}
  .band-cta{padding:3.6rem 0}
  .hero{padding-top:5.5rem;min-height:auto}
  .hero h1{font-size:clamp(1.8rem,7vw,2.7rem)}
  .h2{font-size:clamp(1.8rem,7.4vw,2.6rem)}
  .feat-copy h3{font-size:clamp(1.5rem,6.4vw,2.1rem)}
  .lede{max-width:none}
  .phone-inset{position:static;width:45%;margin-top:1.2rem}
  .feat{margin-top:4.5rem}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .hero-scroll{display:none}
}

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


/* ══════════════════════════════════════════════════════════
   Additions: progress, photo bands, counters, build phases, FAQ
   ══════════════════════════════════════════════════════════ */

/* scroll progress */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;background:transparent;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--deep),var(--lime));
  box-shadow:0 0 12px rgba(180,255,60,.55);transition:width .12s linear}

/* full-bleed photo bands */
.photoband{position:relative;isolation:isolate;padding:clamp(4rem,7vw,6.5rem) 0;overflow:hidden}
.photoband-sm{padding:clamp(3rem,5vw,4.5rem) 0}
.pb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transform:scale(1.08) translateY(var(--pby,0px));will-change:transform}
.pb-shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(14,17,11,.97) 0%,rgba(14,17,11,.9) 42%,rgba(14,17,11,.55) 100%),
             linear-gradient(180deg,var(--ink) 0%,transparent 18%,transparent 82%,var(--ink) 100%)}
.pb-body{position:relative}
.pb-lede{color:var(--mid);max-width:46ch;margin-top:1.2rem;font-size:1.05rem}
.pb-note{margin-top:2rem;font-family:var(--m);font-size:11.5px;letter-spacing:.05em;color:var(--low);max-width:60ch}

/* counted metrics */
.counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem;margin-top:2rem}
.count{border-top:1px solid var(--line);padding-top:1.1rem}
.count b{display:block;font-family:var(--d);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.9rem);
  letter-spacing:-.03em;color:var(--lime);font-variant-numeric:tabular-nums;line-height:1}
.count span{display:block;margin-top:.5rem;font-size:.95rem;color:var(--off);max-width:22ch}
.count i{display:block;margin-top:.45rem;font-style:normal;font-family:var(--m);font-size:10.5px;
  letter-spacing:.07em;color:var(--low)}

/* photo behind a plate band */
.band-photo{position:relative;isolation:isolate;overflow:hidden}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.3}
.band-photo::before,.band-cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(14,17,11,.86) 30%,rgba(14,17,11,.86) 70%,var(--ink) 100%)}
.band-cta{position:relative;isolation:isolate;overflow:hidden}

/* build phases */
.phases{list-style:none;margin:2.2rem 0 0;padding:0;position:relative}
.phases::before{content:"";position:absolute;left:26px;top:8px;bottom:8px;width:1px;background:var(--line)}
.phases::after{content:"";position:absolute;left:26px;top:8px;width:1px;height:var(--ph,0%);
  background:linear-gradient(180deg,var(--lime),var(--deep));box-shadow:0 0 10px rgba(180,255,60,.4);
  transition:height .25s linear}
.phase{position:relative;padding:0 0 2.6rem 5rem;min-height:54px}
.ph-n{position:absolute;left:0;top:0;width:53px;height:53px;border-radius:50%;
  display:grid;place-items:center;background:var(--ink);border:1px solid var(--line);
  font-family:var(--m);font-size:13px;color:var(--low);transition:all .4s ease}
.phase.in .ph-n{border-color:var(--lime);color:var(--lime)}
.phase h3{font-size:clamp(1.2rem,2vw,1.5rem);margin:0 0 .5rem;font-weight:700}
.phase p{color:var(--mid);max-width:60ch;margin:0}
.phase em{display:block;margin-top:.6rem;font-style:normal;font-family:var(--m);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--low)}

/* FAQ */
.faq{margin-top:1.9rem;max-width:82ch}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.35rem 3rem 1.35rem 0;position:relative;
  font-family:var(--d);font-weight:600;font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--off);
  transition:color .2s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--lime)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--lime);border-bottom:2px solid var(--lime);
  transform:translateY(-70%) rotate(45deg);transition:transform .28s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details div{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
.faq details[open] div{grid-template-rows:1fr}
.faq details div p{min-height:0;color:var(--mid);margin:0;padding:0 0 1.5rem;max-width:70ch}

/* gallery lift */
.gcell{transition:transform .3s ease, border-color .3s ease}
.gcell:hover{transform:translateY(-4px);border-color:var(--lime)}

@media (max-width:980px){
  .counts{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem}
  .pb-shade{background:linear-gradient(180deg,var(--ink) 0%,rgba(14,17,11,.88) 22%,rgba(14,17,11,.88) 78%,var(--ink) 100%)}
}
@media (max-width:600px){
  .counts{grid-template-columns:minmax(0,1fr)}
  .phase{padding-left:4rem}
  .ph-n{width:44px;height:44px;font-size:12px}
  .phases::before,.phases::after{left:22px}
}
@media (prefers-reduced-motion: reduce){
  .pb-img{transform:scale(1.02)!important}
  .progress span{transition:none}
}

/* ══════════════════════════════════════════════════════════
   Cinematic pass: fixed 3D backdrop, chapter breaks, filmstrip,
   line reveals, marquee, parent-company footer
   ══════════════════════════════════════════════════════════ */

/* the persistent WebGL stage sits behind everything */
#stage3d{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.nav,.progress,main,.foot{position:relative;z-index:2}
/* bands stay opaque so copy is always readable; chapters are the windows */
.band,.foot{background:var(--ink)}
.band-plate{background:var(--plate-bg,#12150F)}

/* ── chapter breaks ── */
.cinema{position:relative;isolation:isolate;min-height:74svh;display:flex;align-items:center;
  overflow:hidden;padding:4rem 0;z-index:1}
.cin-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transform:scale(var(--cs,1.15)) translateY(var(--cy,0px));will-change:transform}
.cin-shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(14,17,11,.95) 0%,rgba(14,17,11,.78) 45%,rgba(14,17,11,.3) 100%),
             linear-gradient(180deg,var(--ink) 0%,transparent 20%,transparent 78%,var(--ink) 100%)}
.cin-body{position:relative}
.cin-k{font-family:var(--m);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--lime);margin:0 0 1.1rem;display:flex;align-items:center;gap:1rem}
.cin-k::before{content:"";width:56px;height:1px;background:var(--lime);transform-origin:left;
  transform:scaleX(var(--ck,0));transition:transform .9s cubic-bezier(.2,.7,.2,1) .1s}
.cinema.in .cin-k::before{--ck:1}
.cin-h{font-family:var(--d);font-weight:800;letter-spacing:-.04em;line-height:1.03;margin:0;
  font-size:clamp(2.1rem,5vw,4.6rem);max-width:20ch}
.cin-s{margin-top:1.6rem;color:var(--mid);max-width:44ch;font-size:1.05rem}

/* ── line-by-line heading reveal ── */
.ln{display:block;overflow:hidden}
.ln > i{display:block;font-style:inherit;transform:translateY(105%);opacity:0;
  transition:transform .78s cubic-bezier(.16,.84,.28,1), opacity .5s ease}
.in .ln > i,.ln.in > i{transform:translateY(0);opacity:1}
.ln:nth-child(2) > i{transition-delay:.08s}
.ln:nth-child(3) > i{transition-delay:.16s}
.ln:nth-child(4) > i{transition-delay:.24s}

/* ── reveal on screenshots ──
   The old version slid a solid lime block across the image, which
   read as a bug more than an effect. This masks the image up from
   below and runs a single thin lime edge along the leading line —
   the print head passing over the sheet. */
.shut{position:relative;overflow:hidden}
.shut > img,.shut > .stack{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s cubic-bezier(.16,.84,.28,1)}
.shut.go > img,.shut.go > .stack{clip-path:inset(0 0 0 0)}
.shut::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--lime) 18%,#fff 50%,var(--lime) 82%,transparent);
  box-shadow:0 0 22px 4px rgba(180,255,60,.5);pointer-events:none}
.shut.go::after{animation:pass 1.05s cubic-bezier(.16,.84,.28,1) forwards}
@keyframes pass{
  0%{opacity:0;transform:translateY(0)}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(var(--shh,420px))}
}

/* clickable inline screenshots */
[data-zoom]{cursor:zoom-in;transition:filter .3s ease}
[data-zoom]:hover{filter:brightness(1.08)}
[data-zoom]:focus-visible{outline:2px solid var(--lime);outline-offset:4px}

/* ── marquee ── */
.marquee{position:relative;z-index:1;overflow:hidden;border-block:1px solid var(--line);
  background:var(--ink);padding:1.1rem 0}
.mq-track{display:flex;align-items:center;gap:1.4rem;width:max-content;
  animation:mq 46s linear infinite;will-change:transform}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track span{font-family:var(--m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mid);white-space:nowrap}
.mq-track i{color:var(--lime);font-style:normal}
@keyframes mq{to{transform:translateX(-50%)}}

/* ── filmstrip gallery ── */
.band-strip{padding-bottom:clamp(3.5rem,6vw,5rem)}
.strip-wrap{margin-top:1.8rem}
.strip{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.5rem calc((100vw - var(--shell)) / 2) 1.4rem;scrollbar-width:none;cursor:grab}
.strip::-webkit-scrollbar{display:none}
.strip.drag{cursor:grabbing;scroll-snap-type:none}
.shot{flex:0 0 auto;width:min(560px,74vw);scroll-snap-align:center;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:0;overflow:hidden;cursor:zoom-in;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s ease;text-align:left}
.shot-ph{width:min(230px,44vw)}
.shot:hover{transform:translateY(-6px);border-color:var(--lime)}
.shot:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.shot img{width:100%;display:block}
.shot-lbl{display:block;padding:.85rem 1rem;font-family:var(--m);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--low)}
.shot:hover .shot-lbl{color:var(--lime)}
.strip-ctl{display:flex;align-items:center;gap:1.1rem;margin-top:.6rem}
.sbtn{width:44px;height:44px;flex:0 0 auto;border-radius:50%;background:transparent;
  border:1px solid var(--line);color:var(--off);font-size:17px;cursor:pointer;
  transition:all .25s ease}
.sbtn:hover{border-color:var(--lime);color:var(--lime)}
.strip-track{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden}
.strip-track span{position:absolute;left:0;top:0;height:100%;width:18%;background:var(--lime);
  transition:transform .15s linear}

/* ── lightbox ── */
.lb-fig{margin:0;max-width:94vw;max-height:90svh;display:flex;flex-direction:column;gap:.9rem;align-items:center}
.lb-fig img{max-width:94vw;max-height:82svh;object-fit:contain;border-radius:10px}
.lb-fig figcaption{font-family:var(--m);font-size:12px;letter-spacing:.05em;color:var(--mid);
  text-align:center;max-width:70ch}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  background:rgba(14,17,11,.72);border:1px solid var(--line);color:var(--off);font-size:19px;
  cursor:pointer;z-index:2;transition:all .25s ease}
.lb-nav:hover{border-color:var(--lime);color:var(--lime)}
.lb-prev{left:2.2vw}
.lb-next{right:2.2vw}

/* ── parent company ── */
.parent{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.6rem);
  align-items:center;border-top:1px solid var(--line);margin-top:2.8rem;padding-top:2.8rem}
.parent-logo{display:block;width:min(280px,68%);transition:opacity .25s ease,transform .25s ease}
.parent-logo:hover{opacity:.86;transform:translateY(-2px)}
.parent-logo img{width:100%;height:auto}
.parent-l .stage{margin-bottom:1rem}
.parent-r p{color:var(--mid);max-width:52ch;margin:0 0 1rem}
.parent-link{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--m);font-size:13px;
  letter-spacing:.08em;color:var(--lime);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .25s ease}
.parent-link:hover{border-bottom-color:var(--lime)}
.nav-parent{font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--low);text-decoration:none;margin-right:1.2rem;transition:color .25s ease;white-space:nowrap}
.nav-parent:hover{color:var(--lime)}

/* ── magnetic buttons ── */
.btn{will-change:transform}

@media (max-width:980px){
  .parent{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .parent-logo{width:min(240px,60%)}
  .cinema{min-height:74svh}
  .cin-shade{background:linear-gradient(180deg,var(--ink) 0%,rgba(14,17,11,.86) 20%,rgba(14,17,11,.9) 80%,var(--ink) 100%)}
}
@media (max-width:760px){
  .nav-parent{display:none}
  .shot{width:82vw}
  .shot-ph{width:52vw}
  .lb-nav{width:42px;height:42px}
  .lb-prev{left:1rem} .lb-next{right:1rem}
}
@media (prefers-reduced-motion: reduce){
  .mq-track{animation:none}
  .ln > i{transform:none!important;opacity:1!important}
  .cin-img{transform:scale(1.05)!important}
  .shut::after{display:none}
}


/* ══════════════════════════════════════════════════════════
   Moving pattern + contact form
   ══════════════════════════════════════════════════════════ */

/* A cutting-mat dot grid and a set of diagonal hairlines that
   travel at different rates as you scroll, so the opaque bands
   have depth of their own rather than sitting flat on the ink. */
.band::before,.marquee::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(180,255,60,.16) 1px, transparent 1.6px),
    repeating-linear-gradient(58deg, rgba(180,255,60,.05) 0 1px, transparent 1px 74px);
  background-size:38px 38px, auto;
  background-position:0 var(--pat, 0px), var(--pat2, 0px) 0;
  -webkit-mask-image:radial-gradient(120% 78% at 50% 42%, #000 0%, transparent 78%);
  mask-image:radial-gradient(120% 78% at 50% 42%, #000 0%, transparent 78%);
  opacity:.85;
}
.band > *:not(.cta-bg){position:relative;z-index:1}
.band-photo::before{opacity:.4}

/* ── contact form ── */
.form-band{position:relative;isolation:isolate;overflow:hidden}
.form-band .cta-bg{opacity:.22}
.form-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:2.2rem}
.form-aside p{color:var(--mid);max-width:44ch}
.form-aside .bar{border-left:2px solid var(--lime);padding-left:1.1rem;margin-top:1.6rem;
  color:var(--off);font-weight:600;max-width:42ch}
.form-aside ul{list-style:none;padding:0;margin:1.8rem 0 0}
.form-aside li{padding-left:1.6rem;position:relative;color:var(--mid);margin-bottom:.7rem;font-size:.95rem}
.form-aside li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
  background:var(--lime);transform:rotate(45deg)}

form.enq{display:grid;gap:1.05rem}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.fld label,.fset legend{display:block;font-family:var(--m);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--low);margin-bottom:.5rem;padding:0}
.fld input,.fld textarea{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:9px;padding:.85rem .95rem;color:var(--off);font:inherit;font-size:.97rem;
  transition:border-color .2s ease, background .2s ease}
.fld textarea{min-height:104px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--lime);background:rgba(180,255,60,.05)}
.fld input::placeholder,.fld textarea::placeholder{color:#5d6653}

.fset{border:0;padding:0;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:block;padding:.6rem .95rem;border:1px solid var(--line);border-radius:999px;
  font-size:.9rem;color:var(--mid);cursor:pointer;transition:all .2s ease;user-select:none}
.chip span:hover{border-color:#4a5a35;color:var(--off)}
.chip input:checked + span{border-color:var(--lime);color:var(--ink);background:var(--lime);font-weight:600}
.chip input:focus-visible + span{outline:2px solid var(--lime);outline-offset:3px}

.f-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.4rem}
.f-note{font-family:var(--m);font-size:11px;color:var(--low);letter-spacing:.04em}
.f-msg{font-family:var(--m);font-size:12.5px;padding:.9rem 1rem;border-radius:9px;display:none}
.f-msg.ok{display:block;border:1px solid var(--lime);color:var(--lime);background:rgba(180,255,60,.07)}
.f-msg.bad{display:block;border:1px solid #FB7185;color:#FB7185;background:rgba(251,113,133,.07)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:980px){
  .form-grid{grid-template-columns:minmax(0,1fr);gap:2.2rem}
}
@media (max-width:600px){
  .f2{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){
  .shut > img,.shut > .stack{clip-path:none!important}
  .shut::after{display:none}
}

/* ══════════════════════════════════════════════════════════
   Final grade: grain, vignette, hero entrance, chapter numerals
   ══════════════════════════════════════════════════════════ */

/* Film grain and a viewport vignette over the whole page. Both sit
   above the content but below the lightbox, and neither takes a
   pointer event. Low opacity on purpose — you should feel it and
   not see it. */
.grain,.vig{position:fixed;inset:0;z-index:3;pointer-events:none}
.vig{background:radial-gradient(128% 96% at 50% 46%, transparent 52%, rgba(0,0,0,.5) 100%)}
.grain{
  inset:-120px;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.9'/></svg>");
  animation:grain 640ms steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 33%{transform:translate(-14px,9px)} 66%{transform:translate(11px,-12px)} 100%{transform:translate(0,0)}
}

/* Hero entrance — the page arrives rather than just being there. */
.hero .stage,.hero .lede,.hero-cta,.hero-note,.hero-devices{
  opacity:0;transform:translateY(16px);
  transition:opacity .85s ease, transform .95s cubic-bezier(.16,.84,.28,1);
}
.hero-devices{transform:translateY(26px) scale(.975)}
.hero.lit .stage        {opacity:1;transform:none;transition-delay:.05s}
.hero.lit .lede         {opacity:1;transform:none;transition-delay:.46s}
.hero.lit .hero-cta     {opacity:1;transform:none;transition-delay:.56s}
.hero.lit .hero-note    {opacity:1;transform:none;transition-delay:.64s}
.hero.lit .hero-devices {opacity:1;transform:none;transition-delay:.3s}

/* Ghosted chapter numeral behind the copy. */
.cin-body::before{
  position:absolute;right:-1vw;top:50%;transform:translateY(-52%);
  font-family:var(--d);font-weight:800;font-size:clamp(9rem,26vw,26rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(180,255,60,.15);
  pointer-events:none;z-index:-1;letter-spacing:-.05em;
}
[data-cinema="1"] .cin-body::before{content:"01"}
[data-cinema="2"] .cin-body::before{content:"02"}
[data-cinema="3"] .cin-body::before{content:"03"}

/* A lime hairline draws across the top of each band as it arrives. */
.band{--rule:0}
.band::after{content:"";position:absolute;left:0;top:0;height:1px;width:100%;
  background:linear-gradient(90deg,var(--lime),rgba(180,255,60,0));
  transform:scaleX(var(--rule));transform-origin:left;
  transition:transform 1.1s cubic-bezier(.16,.84,.28,1);opacity:.55}
.band.ruled{--rule:1}

@media (prefers-reduced-motion: reduce){
  .grain{animation:none;opacity:.03}
  .hero .stage,.hero .lede,.hero-cta,.hero-note,.hero-devices{opacity:1!important;transform:none!important}
  .band::after{transition:none}
}

/* ── mobile pass ─────────────────────────────────────────────
   Verified at 360 / 390 / 430 / 768 / 1024. */

/* touch targets: these two are text links that sat under 40px */
.parent-link{padding:.55rem 0;min-height:44px}
.nav-parent{padding:.6rem 0;display:inline-flex;align-items:center;min-height:40px}

@media (max-width:420px){
  /* the highlighted hero line overran by a few px at 360 */
  .hero h1{font-size:clamp(1.6rem,6.4vw,2.3rem)}
  .h2{font-size:clamp(1.5rem,6.2vw,2.1rem)}
  .cin-h{font-size:clamp(1.7rem,7.4vw,2.4rem)}
  .lede{font-size:1rem}
}

@media (max-width:760px){
  /* the page is long on a phone; take air out of the seams */
  .band{padding:2.4rem 0}
  .cinema{min-height:62svh;padding:3rem 0}
  .photoband{padding:2.6rem 0}
  .photoband-sm{padding:2.2rem 0}
  .cin-body::before{font-size:34vw;right:-3vw;opacity:.7}
  .marquee{padding:.8rem 0}
  .mq-track span{font-size:11px}
  .counts{margin-top:1.4rem}
  .strip-ctl{margin-top:.2rem}
  /* full-width primary action — easier to hit than a floating pill */
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%;text-align:center;justify-content:center}
  .f-foot .btn{width:100%;text-align:center;justify-content:center}
  .f-foot{flex-direction:column;align-items:stretch;gap:.7rem}
  .f-note{text-align:center}
}

@media (max-width:760px) and (pointer:coarse){
  /* grain costs more than it gives on a phone GPU */
  .grain{display:none}
}

/* Chapter two: the installer sits mid-frame, so the copy moves to the
   right and the shade flips with it. Chapters now alternate sides,
   which reads better across the scroll anyway. */
[data-cinema="2"] .cin-shade{
  background:linear-gradient(270deg,rgba(14,17,11,.96) 0%,rgba(14,17,11,.9) 38%,rgba(14,17,11,.45) 72%,rgba(14,17,11,.22) 100%),
             linear-gradient(180deg,var(--ink) 0%,transparent 20%,transparent 78%,var(--ink) 100%);
}
[data-cinema="2"] .cin-body{margin-left:auto;text-align:right;max-width:min(1000px,96%)}
[data-cinema="2"] .cin-h{margin-left:auto}
[data-cinema="2"] .cin-s{margin-left:auto}
[data-cinema="2"] .cin-k{justify-content:flex-end}
[data-cinema="2"] .cin-k::before{order:2;transform-origin:right}
[data-cinema="2"] .cin-body::before{right:auto;left:-1vw}
@media (max-width:760px){
  [data-cinema="2"] .cin-body{text-align:left;margin-left:0}
  [data-cinema="2"] .cin-k{justify-content:flex-start}
  [data-cinema="2"] .cin-k::before{order:0}
  [data-cinema="2"] .cin-shade{background:linear-gradient(180deg,var(--ink) 0%,rgba(14,17,11,.86) 20%,rgba(14,17,11,.9) 80%,var(--ink) 100%)}
}

/* The masked line spans clipped descenders and any wrapped row. Pad the
   mask and pull it back so nothing is ever cut, whatever the line length. */
.ln{padding-bottom:.14em;margin-bottom:-.14em}
.cin-h{max-width:26ch}
[data-cinema="2"] .cin-h{max-width:none}

/* ── form: legibility pass ───────────────────────────────────
   The photo behind it was fighting the fields. Drop it right
   back, sit the form on its own panel, and lift the contrast of
   every input so it reads as something you can actually fill in. */
.form-band .cta-bg{opacity:.1}
form.enq{
  background:rgba(9,12,7,.78);
  border:1px solid #33402a;
  border-radius:14px;
  padding:clamp(1.2rem,2.4vw,1.9rem);
  backdrop-filter:blur(3px);
}
.fld input,.fld textarea{
  background:rgba(255,255,255,.06);
  border-color:#3d4b31;
  color:#fff;
}
.fld input::placeholder,.fld textarea::placeholder{color:#77826a}
.fld input:focus,.fld textarea:focus{
  border-color:var(--lime);
  background:rgba(180,255,60,.08);
  box-shadow:0 0 0 3px rgba(180,255,60,.13);
}
.fld label,.fset legend{color:#93a081;font-size:11px}
.fld label i,.fset legend i{
  font-style:normal;text-transform:none;letter-spacing:.02em;
  color:#5f6a52;margin-left:.45rem;
}
.chip span{border-color:#3d4b31;color:#c2cbb4}
.chip span:hover{border-color:var(--lime);color:#fff}
.f-note{color:#8c977c}

/* the aside was also sitting on the photo */
.form-aside p{color:#c2cbb4}
.form-aside li{color:#b3bda5}


/* ── hero: close the gap, grow the mark ──────────────────────
   On a tall monitor the centred hero left a big empty band above
   the eyebrow. Cap the hero height so the copy sits higher, and
   give the lockup more presence. */
.hero{min-height:min(88svh,880px);padding:5rem 0 3rem}
.nav-lockup{width:200px}
.foot-lockup{width:230px}

@media (max-width:980px){
  .hero{min-height:auto;padding-top:5.5rem}
}
@media (max-width:760px){
  .nav-lockup{width:150px}
  .hero{padding-top:5rem}
}

/* Pull the hero copy up: extra bottom padding shifts the centred
   block toward the top without stranding the scroll cue. */
.hero{min-height:min(84svh,780px);padding:4rem 0 6rem}
/* the lockup was being shrunk by flex on narrow screens */
.nav-brand{flex:0 0 auto}
.nav-lockup{max-width:none}
@media (max-width:760px){
  .nav-lockup{width:134px}
  .nav .btn-sm{padding:.5rem .8rem;font-size:12.5px}
}
@media (max-width:400px){
  .nav-lockup{width:116px}
}

/* The grain layer was a 240px-oversized fixed box so its transform had
   room to move. On a 360px phone that box added 3px of document width.
   Same effect, animated on background-position, so the box is exactly
   the viewport and can never contribute to overflow. */
.grain{inset:0;animation:grainpos 640ms steps(3) infinite}
@keyframes grainpos{
  0%{background-position:0 0} 33%{background-position:-14px 9px}
  66%{background-position:11px -12px} 100%{background-position:0 0}
}
/* html{overflow-x:clip} removed: it changed the scroll root and stopped
   the IntersectionObserver reveals from firing. The grain fix above
   already removed the 3px overflow on its own. */
/* nav can shrink its button before it pushes past the edge */
.nav .btn-sm{flex:0 1 auto;min-width:0}