/* ============================================================
   NOWILL — THE VAULT  ·  film-1-vault
   Cold cyan descent. One continuous scrub film + vault floor.
   Fingerprint: Michroma / Instrument Sans / IBM Plex Mono
   ============================================================ */

:root{
  --abyss:#030a0d;
  --deep:#06141a;
  --ink:#0a1e26;
  --cyan:#4be0ea;
  --cyan-hot:#8df2f8;
  --cyan-dim:#1a97a6;
  --ice:#eaf6ff;
  --steel:#8fb2bf;
  --line:rgba(120,220,235,.14);
  --line-strong:rgba(120,220,235,.32);
  --font-d:"Michroma",sans-serif;
  --font-b:"Instrument Sans",system-ui,sans-serif;
  --font-m:"IBM Plex Mono",monospace;
  --frame:16px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--abyss);
  color:var(--ice);
  font-family:var(--font-b);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--cyan);color:var(--abyss)}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

h1,h2,h3{font-family:var(--font-d);font-weight:400;text-transform:uppercase;line-height:1.14}

/* ---------- kicker / mono labels ---------- */
.k{
  font-family:var(--font-m);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cyan);
}
.k--dim{color:var(--steel)}

/* ============================================================
   LOADER
   ============================================================ */
#loader{
  position:fixed;inset:0;z-index:200;
  background:var(--abyss);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4rem;
  transition:opacity .9s ease,visibility .9s;
}
#loader.done{opacity:0;visibility:hidden}
.ldr-mark{width:104px;height:auto;overflow:visible}
.ldr-mark path{
  stroke:var(--ice);
  stroke-dasharray:1;stroke-dashoffset:1;
  filter:drop-shadow(0 0 14px rgba(75,224,234,.45));
}
.ldr-mark circle{opacity:0;transition:opacity .4s ease}
.ldr-mark.lit circle{opacity:1}
.ldr-row{display:flex;align-items:baseline;gap:1.4rem}
#ldrPct{font-family:var(--font-m);font-size:.8rem;letter-spacing:.18em;color:var(--steel)}

/* ============================================================
   FIXED CHROME — frame, grade, grain, HUD, header
   ============================================================ */
.frame{
  position:fixed;inset:var(--frame);z-index:90;pointer-events:none;
  border:1px solid var(--line);
}
.frame::before,.frame::after{
  content:"";position:absolute;width:14px;height:14px;
  border:1px solid var(--line-strong);
}
.frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

.grade{
  position:fixed;inset:0;z-index:40;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 46%,transparent 52%,rgba(2,7,9,.62) 100%),
    linear-gradient(180deg,rgba(6,20,26,.22),transparent 22%,transparent 78%,rgba(3,10,13,.4));
}
#grain{
  position:fixed;inset:0;z-index:45;pointer-events:none;
  width:100vw;height:100vh;
  opacity:.075;
  mix-blend-mode:overlay;
  image-rendering:pixelated;
}

.hud{
  position:fixed;left:calc(var(--frame) + 14px);right:calc(var(--frame) + 14px);
  bottom:calc(var(--frame) + 10px);
  z-index:80;pointer-events:none;
  display:flex;justify-content:space-between;align-items:flex-end;
  font-family:var(--font-m);font-size:.66rem;letter-spacing:.2em;color:var(--steel);
  transition:opacity .6s ease;
}
.hud.gone{opacity:0}
.hud-depth b{color:var(--cyan);font-weight:500}
.hud-stratum{text-align:right}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--frame) + 8px) calc(var(--frame) + 14px);
  transition:background .5s ease,backdrop-filter .5s ease;
}
header.scrolled{
  background:linear-gradient(180deg,rgba(3,10,13,.78),rgba(3,10,13,.28) 80%,transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.brand{display:flex;align-items:center;gap:.7rem}
.brand svg{height:24px;width:auto}
.brand-name{font-family:var(--font-d);font-size:.86rem;letter-spacing:.32em}
nav{display:flex;align-items:center;gap:2rem}
nav a{
  font-family:var(--font-m);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--steel);transition:color .25s;
}
nav a:hover{color:var(--cyan-hot)}
.pill{
  font-family:var(--font-m);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ice);border:1px solid var(--line-strong);
  padding:.55em 1.2em;border-radius:100px;
  transition:border-color .3s,box-shadow .3s,color .3s;
}
.pill:hover{border-color:var(--cyan);color:var(--cyan-hot);box-shadow:0 0 22px rgba(75,224,234,.28)}

/* ============================================================
   THE JOURNEY — sticky scrub stage
   ============================================================ */
#journey{height:1500vh;position:relative}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--abyss)}
#film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#motes{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}

/* ---------- beats ---------- */
.beat{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;
  padding:0 clamp(24px,7vw,110px);
  opacity:0;pointer-events:none;
}
.beat-inner{max-width:880px;margin:0 auto;text-align:center;width:100%;position:relative;z-index:0}
.beat-inner::before{
  content:"";position:absolute;inset:-16% -20%;z-index:-1;
  background:radial-gradient(closest-side,rgba(3,10,13,.62),rgba(3,10,13,.34) 55%,transparent 74%);
  filter:blur(8px);
  opacity:0;transition:opacity .7s ease;
}
.beat.live .beat-inner::before{opacity:1}
.beat--left .beat-inner{margin:0;text-align:left;max-width:640px}
.beat-inner>*{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s ease,transform .7s ease;
  transition-delay:calc(var(--i,0)*110ms);
}
.beat.live .beat-inner>*{opacity:1;transform:translateY(0)}

.beat h1{
  font-size:clamp(2.7rem,9vw,7rem);
  letter-spacing:.08em;
  margin:1.1rem 0 1.4rem;
  text-shadow:0 0 44px rgba(75,224,234,.35);
}
.beat h2{
  font-size:clamp(1.7rem,4.4vw,3.4rem);
  letter-spacing:.05em;
  margin:1rem 0 1.2rem;
  text-shadow:0 2px 30px rgba(3,10,13,.85),0 0 12px rgba(3,10,13,.5);
}
.beat p{
  color:#a7c8d6;font-size:clamp(.98rem,1.4vw,1.15rem);max-width:36em;
  text-shadow:0 1px 22px rgba(3,10,13,.9),0 0 8px rgba(3,10,13,.6);
}
.beat-inner p{margin-left:auto;margin-right:auto}
.beat--left .beat-inner p{margin-left:0}
.slogan{font-family:var(--font-m);font-size:.72rem;letter-spacing:.18em;color:var(--steel);margin-top:1.8rem}

/* stack ticks (beat 1) */
.stack{
  display:flex;flex-wrap:wrap;gap:.6rem 1rem;margin:1.6rem 0 1.3rem;
}
.beat-inner .stack{justify-content:flex-start}
.stack span{
  font-family:var(--font-m);font-size:.7rem;letter-spacing:.18em;
  color:var(--ice);border:1px solid var(--line-strong);
  padding:.5em 1em;border-radius:4px;
  background:rgba(6,20,26,.4);backdrop-filter:blur(3px);
}
.stack span::before{content:"▸ ";color:var(--cyan)}

/* pillars (beat 3) */
.pillars{
  display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 2.2rem;margin-top:1.8rem;text-align:left;
}
.pillars div h4{
  font-family:var(--font-m);font-weight:500;font-size:.7rem;letter-spacing:.2em;
  color:var(--cyan);margin-bottom:.3rem;text-transform:uppercase;
}
.pillars div p{font-size:.88rem;color:var(--steel);max-width:30em}

/* scroll cue */
.cue{
  position:absolute;left:50%;bottom:calc(var(--frame) + 42px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-family:var(--font-m);font-size:.62rem;letter-spacing:.26em;color:var(--steel);
}
.cue i{
  width:1px;height:44px;background:linear-gradient(var(--cyan),transparent);
  animation:cue 1.8s ease-in-out infinite;transform-origin:top;
}
@keyframes cue{0%{transform:scaleY(.2);opacity:0}35%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(18px);opacity:0}}

/* ============================================================
   THE VAULT FLOOR — ground sections
   ============================================================ */
#floor{
  position:relative;z-index:5;
  background:linear-gradient(180deg,#041016,var(--abyss) 26%);
  box-shadow:0 -40px 90px rgba(2,8,10,.9);
}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,60px)}
section{padding:clamp(90px,12vh,150px) 0}

.sec-head{margin-bottom:clamp(40px,6vh,72px);max-width:760px}
.sec-head h2{font-size:clamp(1.7rem,4vw,3rem);letter-spacing:.05em;margin:.9rem 0 1rem}
.sec-head p{color:var(--steel)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.rv.on{opacity:1;transform:none}

/* ---------- chambers (services) ---------- */
.chambers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,34px)}
.card{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,rgba(10,30,38,.5),rgba(6,20,26,.25));
  transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s,box-shadow .45s;
}
.card:hover{
  transform:translateY(-5px);
  border-color:rgba(75,224,234,.45);
  box-shadow:0 18px 50px rgba(2,8,10,.7),0 0 34px rgba(75,224,234,.12);
}
.plate{aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--deep)}
.plate img,.plate video{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.plate::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(3,10,13,.65));
  pointer-events:none;
}
.card.inview .plate img{animation:kb 16s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.14) translateY(-2.5%)}}
.card-body{padding:1.5rem 1.6rem 1.7rem}
.card-body h3{font-size:.98rem;letter-spacing:.1em;margin:.55rem 0 .6rem}
.card-body p{color:var(--steel);font-size:.92rem}

/* ---------- bedrock (why) ---------- */
#why{position:relative;overflow:hidden}
#why .prlx-bg{filter:brightness(.28) saturate(1.15)}
.bedrock{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px);
  position:relative;z-index:2;
}
.rock{
  border:1px solid var(--line);border-radius:10px;padding:1.6rem 1.4rem;
  background:rgba(3,10,13,.62);backdrop-filter:blur(6px);
}
.rock h4{
  font-family:var(--font-m);font-weight:500;font-size:.7rem;letter-spacing:.2em;
  color:var(--cyan);margin-bottom:.7rem;text-transform:uppercase;
}
.rock p{color:var(--steel);font-size:.9rem}
#why .sec-head{position:relative;z-index:2}

/* ---------- process ---------- */
#process{position:relative;overflow:hidden}
.prlx-bg{
  position:absolute;inset:-18% 0;z-index:0;
  background-size:cover;background-position:center;
  will-change:transform;
}
#process .prlx-bg{filter:brightness(.3) saturate(1.1)}
.prlx-plate{
  position:absolute;right:clamp(10px,6vw,90px);top:14%;z-index:1;
  width:clamp(160px,22vw,300px);border:1px solid var(--line-strong);border-radius:10px;
  overflow:hidden;box-shadow:0 24px 70px rgba(2,8,10,.8);
  will-change:transform;opacity:.85;
}
.steps{position:relative;z-index:2;display:grid;gap:clamp(26px,4vh,44px);max-width:720px}
.step{
  display:grid;grid-template-columns:96px 1fr;gap:1.6rem;align-items:baseline;
  border-top:1px solid var(--line);padding-top:1.5rem;
}
.step b{
  font-family:var(--font-m);font-weight:500;font-size:1.5rem;color:var(--cyan);
  letter-spacing:.08em;
}
.step h3{font-size:1rem;letter-spacing:.12em;margin-bottom:.5rem}
.step p{color:var(--steel);font-size:.95rem;max-width:36em}

/* ---------- contact ---------- */
#contact{position:relative;overflow:hidden;text-align:center}
#contact .prlx-bg{filter:brightness(.42)}
#contact .wrap{position:relative;z-index:2}
#contact h2{font-size:clamp(1.9rem,5vw,3.8rem);letter-spacing:.06em;margin:1rem 0 1.2rem}
#contact>.wrap>p{color:var(--steel);max-width:34em;margin:0 auto 2.6rem}
.cta-mail{
  display:inline-block;font-family:var(--font-d);
  font-size:clamp(1.05rem,3.4vw,2.1rem);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ice);border:1px solid var(--line-strong);border-radius:100px;
  padding:.85em 1.6em;
  transition:border-color .35s,box-shadow .35s,color .35s,transform .35s;
}
.cta-mail:hover{
  border-color:var(--cyan);color:var(--cyan-hot);transform:translateY(-3px);
  box-shadow:0 0 60px rgba(75,224,234,.3),inset 0 0 24px rgba(75,224,234,.08);
}
.cta-sub{font-family:var(--font-m);font-size:.66rem;letter-spacing:.2em;color:var(--steel);margin-top:1.8rem}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:clamp(48px,8vh,80px) 0 clamp(80px,10vh,110px);
  position:relative;z-index:5;background:var(--abyss);
}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(30px,4vw,60px)}
.foot-brand svg{height:30px;margin-bottom:1rem}
.foot-brand p{color:var(--steel);font-size:.88rem;max-width:26em}
.foot-col h5{
  font-family:var(--font-m);font-weight:500;font-size:.64rem;letter-spacing:.22em;
  color:var(--cyan);text-transform:uppercase;margin-bottom:1rem;
}
.foot-col ul{list-style:none}
.foot-col li{font-size:.85rem;color:var(--steel);margin-bottom:.45rem}
.foot-col a:hover{color:var(--cyan-hot)}
.foot-base{
  margin-top:clamp(36px,6vh,60px);padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--font-m);font-size:.62rem;letter-spacing:.18em;color:var(--steel);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .chambers{grid-template-columns:1fr 1fr}
  .bedrock{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:720px){
  :root{--frame:9px}
  #journey{height:1000vh}
  nav a{display:none}
  nav .pill{display:inline-block}
  .hud{font-size:.56rem}
  .hud-stratum{display:none} /* depth counter carries the HUD on mobile */
  .cue{bottom:calc(var(--frame) + 46px)}
  .cue span{display:none}   /* the falling line alone is the cue on mobile */
  .beat{padding:0 clamp(20px,6vw,40px)}
  .beat h1{font-size:clamp(2.2rem,11.5vw,3.4rem)}
  .beat h2{font-size:clamp(1.35rem,6.4vw,2rem)}
  .pillars{grid-template-columns:1fr;gap:.9rem}
  .pillars div p{font-size:.82rem}
  .chambers{grid-template-columns:1fr}
  .bedrock{grid-template-columns:1fr}
  .step{grid-template-columns:56px 1fr;gap:1rem}
  .prlx-plate{display:none}
  .foot-grid{grid-template-columns:1fr}
}

/* ============================================================
   REDUCED MOTION — static readable fallback
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
html.reduced #loader{display:none}
html.reduced #journey{height:auto}
html.reduced .stage{position:static;height:auto;overflow:visible;background:var(--abyss)}
html.reduced #film,html.reduced #motes,html.reduced #grain,html.reduced .cue{display:none}
html.reduced .beat{
  position:relative;inset:auto;opacity:1;pointer-events:auto;
  min-height:70vh;padding-top:14vh;padding-bottom:14vh;
  background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 100vmax rgba(3,10,13,.68);
}
html.reduced .beat-inner>*{opacity:1;transform:none}
html.reduced .rv{opacity:1;transform:none}
html.reduced .prlx-bg,html.reduced .prlx-plate{transform:none!important}
html.reduced .hud{display:none}