/* ═══════════════════════════════════════════════════════
   CEL AEROSPACE — cinematic scroll concept
   Brand: Kanit display · Martel Sans body · #1AABE3 accent
   ═══════════════════════════════════════════════════════ */

:root{
  --ink:#130C0E;
  --cyan:#1AABE3;
  --navy:#00285E;
  --navy2:#005993;
  --void:#04070D;
  --void2:#081120;
  --paper:#FFFFFF;
  --paper2:#F4F4F4;
  --line-l:rgba(19,12,14,.14);
  --line-d:rgba(255,255,255,.16);
  --mut-l:rgba(19,12,14,.56);
  --mut-d:rgba(255,255,255,.60);
  --mono:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --disp:"Kanit",sans-serif;
  --body:"Martel Sans",sans-serif;
}

*{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{
  font-family:var(--body);
  font-weight:300;
  color:var(--ink);
  background:var(--void);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--cyan);color:#fff;}

.mono{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;font-weight:400;}

/* ── Loader ─────────────────────────────────────────── */
.loader{
  position:fixed;inset:0;z-index:100;
  background:var(--void);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s ease .15s,visibility .7s ease .15s;
}
.loader.done{opacity:0;visibility:hidden;}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:1.1rem;width:min(300px,70vw);}
.loader__mark{width:44px;filter:brightness(0) invert(1);opacity:.9;}
.loader__label{color:var(--mut-d);}
.loader__bar{width:100%;height:1px;background:var(--line-d);overflow:hidden;}
.loader__fill{height:100%;width:0%;background:var(--cyan);transition:width .25s ease;}
.loader__pct{color:var(--cyan);}

/* ── Header ─────────────────────────────────────────── */
.header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.15rem clamp(1.2rem,3.5vw,3rem);
  mix-blend-mode:difference;color:#fff;
}
.header a{color:#fff;text-decoration:none;}
.header__brand{display:flex;align-items:center;gap:.65rem;}
.header__mark{width:30px;filter:brightness(0) invert(1);}
.footer__mark{width:34px;filter:brightness(0) invert(1);}
.header__word{font-family:var(--disp);font-weight:600;font-size:1rem;letter-spacing:.06em;}
.header__word em{font-style:normal;font-weight:200;letter-spacing:.14em;}
.header__nav{display:flex;gap:1.8rem;}
.header__nav a{opacity:.65;transition:opacity .25s;}
.header__nav a:hover{opacity:1;}
.header__cta{
  border:1px solid rgba(255,255,255,.4);
  padding:.55rem .95rem;border-radius:2px;
  transition:background .25s,border-color .25s;
}
.header__cta:hover{background:#fff;color:#000;border-color:#fff;}
@media(max-width:820px){.header__nav{display:none;}}

/* ── Scenes (pinned canvas stages) ──────────────────── */
.scene{position:relative;background:var(--void);}
.scene__stage{
  position:relative;height:100vh;height:100svh;
  overflow:hidden;
}
.scene__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.scene__vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(4,7,13,.55) 100%),
    linear-gradient(to bottom,rgba(4,7,13,.5),transparent 18%,transparent 82%,rgba(4,7,13,.6));
}

/* HUD chrome */
.hud{
  position:absolute;z-index:6;color:var(--mut-d);
  display:flex;align-items:center;gap:.5rem;
}
.hud--tl{top:4.6rem;left:clamp(1.2rem,3.5vw,3rem);}
.hud--tr{top:4.6rem;right:clamp(1.2rem,3.5vw,3rem);}
.hud--bl{bottom:1.6rem;left:clamp(1.2rem,3.5vw,3rem);}
.hud--br{bottom:1.6rem;right:clamp(1.2rem,3.5vw,3rem);}
.hud__dot{width:5px;height:5px;border-radius:50%;background:var(--cyan);display:inline-block;box-shadow:0 0 8px var(--cyan);}
.hud__ok{color:var(--cyan);}
#hudAz,#hudFrame,#hudAssy,#hudMag{color:#fff;}

/* Hero copy */
.hero-copy{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;pointer-events:none;
  padding:0 1rem;
}
.hero-copy__eyebrow{color:var(--cyan);margin-bottom:1.4rem;}
.hero-copy__title{
  font-family:var(--disp);
  font-size:clamp(3rem,10.5vw,9.5rem);
  font-weight:600;line-height:.95;letter-spacing:.02em;
  text-transform:uppercase;
}
.hero-copy__title .thin{font-weight:200;letter-spacing:.08em;}
.hero-copy__tag{
  margin-top:1.6rem;font-size:clamp(.95rem,1.4vw,1.15rem);
  color:var(--mut-d);font-weight:300;letter-spacing:.04em;
}

/* Orbit callouts */
.callout{
  position:absolute;z-index:6;color:#fff;opacity:0;
  max-width:260px;
}
.callout__tick{width:34px;height:1px;background:var(--cyan);margin-bottom:.7rem;box-shadow:0 0 10px var(--cyan);}
.callout__label{color:#fff;margin-bottom:.35rem;display:block;}
.callout__sub{font-size:.82rem;color:var(--mut-d);line-height:1.5;}
.callout--1{top:24%;left:clamp(1.2rem,6vw,6rem);}
.callout--2{top:58%;right:clamp(1.2rem,6vw,6rem);text-align:right;}
.callout--2 .callout__tick{margin-left:auto;}
.callout--3{bottom:20%;left:clamp(1.2rem,8vw,9rem);}

/* Scroll cue */
.scroll-cue{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);
  z-index:6;color:var(--mut-d);display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.scroll-cue__line{
  width:1px;height:38px;background:var(--line-d);position:relative;overflow:hidden;display:block;
}
.scroll-cue__line::after{
  content:"";position:absolute;top:-40%;left:0;width:100%;height:40%;
  background:var(--cyan);animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{to{top:110%;}}

/* ── Light sections shared ──────────────────────────── */
.section-no{color:var(--navy2);display:block;}

/* Story */
.story{
  background:var(--paper);color:var(--ink);
  padding:clamp(6rem,12vh,10rem) clamp(1.2rem,6vw,7rem) clamp(5rem,10vh,8rem);
  position:relative;
}
.story::before{ /* engineering margin rule */
  content:"";position:absolute;top:0;bottom:0;left:clamp(.6rem,2.4vw,2.4rem);
  width:1px;background:var(--line-l);
}
.story__head{max-width:1100px;}
.story__title{
  font-family:var(--disp);font-weight:500;
  font-size:clamp(2.4rem,6vw,5.4rem);
  line-height:1.04;margin-top:1.4rem;letter-spacing:.005em;
}
.story__title em{font-style:normal;color:var(--navy2);}
.story__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(2rem,5vw,5rem);
  margin-top:clamp(2.6rem,6vh,4.5rem);max-width:1100px;
}
.story__lede{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.75;font-weight:400;}
.story__body{font-size:.95rem;line-height:1.9;color:var(--mut-l);}
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-top:clamp(3.5rem,8vh,6rem);border-top:1px solid var(--line-l);
}
.stat{padding:1.8rem 1.6rem 0 0;border-right:1px solid var(--line-l);padding-left:1.6rem;}
.stat:first-child{padding-left:0;}
.stat:last-child{border-right:none;}
.stat__num{
  font-family:var(--disp);font-weight:600;color:var(--navy);
  font-size:clamp(2.6rem,4.6vw,4.2rem);line-height:1;
}
.stat__num sup{color:var(--cyan);font-size:.45em;font-weight:400;}
.stat__label{color:var(--mut-l);margin-top:.7rem;display:block;}

/* Macro captions */
.macro-cap{
  position:absolute;z-index:6;left:clamp(1.2rem,7vw,8rem);bottom:16%;
  max-width:440px;color:#fff;opacity:0;
}
.macro-cap h3{
  font-family:var(--disp);font-weight:500;
  font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.1;margin-bottom:.7rem;
}
.macro-cap p{color:var(--mut-d);font-size:.95rem;line-height:1.7;max-width:360px;}
.macro-cap--2{left:auto;right:clamp(1.2rem,7vw,8rem);text-align:right;}
.macro-cap--2 p{margin-left:auto;}

/* Assembly spec rail */
.spec-rail{
  position:absolute;z-index:6;right:clamp(1.2rem,4vw,4rem);top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;
  width:min(360px,86vw);
  border-top:1px solid var(--line-d);
}
.spec{
  display:flex;flex-direction:column;gap:.3rem;
  padding:1rem 0;border-bottom:1px solid var(--line-d);
  color:#fff;opacity:0;transform:translateX(24px);
  background:linear-gradient(to right,transparent,rgba(4,7,13,.35));
}
.spec__key{color:var(--cyan);}
.spec__val{font-size:.92rem;font-weight:400;line-height:1.5;}

/* ── Positioning interstitial ───────────────────────── */
.positioning{
  background:linear-gradient(160deg,var(--navy) 0%,var(--void2) 90%);
  color:#fff;
  padding:clamp(8rem,20vh,14rem) clamp(1.2rem,6vw,7rem);
  position:relative;overflow:hidden;
}
.positioning::after{ /* faint blueprint grid */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
}
.positioning .section-no{color:var(--cyan);position:relative;z-index:1;}
.positioning__title{
  position:relative;z-index:1;
  font-family:var(--disp);font-weight:500;
  font-size:clamp(2.2rem,5.6vw,5rem);line-height:1.08;margin-top:1.4rem;
  max-width:1150px;
}
.positioning__title em{font-style:normal;color:var(--cyan);}

/* line mask reveal */
.line-mask{display:block;overflow:hidden;}
.line-mask .line{display:block;transform:translateY(110%);}

/* ── Contact ────────────────────────────────────────── */
.contact{
  background:var(--paper2);color:var(--ink);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(2.5rem,6vw,6rem);
  padding:clamp(6rem,12vh,10rem) clamp(1.2rem,6vw,7rem);
}
.contact__title{
  font-family:var(--disp);font-weight:500;
  font-size:clamp(2.6rem,5.4vw,4.8rem);line-height:1.02;margin-top:1.3rem;
}
.contact__sub{margin-top:1.6rem;color:var(--mut-l);line-height:1.8;max-width:420px;font-size:.98rem;}
.contact__meta{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:2.4rem;color:var(--navy2);}
.contact__form{display:flex;flex-direction:column;gap:1.5rem;max-width:560px;}
.field{display:flex;flex-direction:column;gap:.5rem;}
.field label{color:var(--mut-l);}
.field input,.field textarea{
  font-family:var(--body);font-size:1rem;font-weight:400;color:var(--ink);
  background:transparent;border:none;border-bottom:1px solid var(--line-l);
  padding:.55rem 0;outline:none;resize:vertical;border-radius:0;
  transition:border-color .3s;
}
.field input:focus,.field textarea:focus{border-color:var(--cyan);}
.contact__submit{
  margin-top:.6rem;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--disp);font-weight:500;font-size:1.05rem;letter-spacing:.03em;
  background:var(--navy);color:#fff;border:none;cursor:pointer;
  padding:1.1rem 1.4rem;border-radius:2px;
  transition:background .3s,transform .3s;
}
.contact__submit:hover{background:var(--cyan);transform:translateY(-2px);}
.contact__submit .arrow{font-size:.9rem;}
.contact__note{color:var(--navy2);min-height:1em;}

/* ── Footer ─────────────────────────────────────────── */
.footer{
  background:var(--void);color:#fff;text-align:center;
  padding:4.5rem 1.5rem 2.5rem;
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
}
.footer__brand{display:flex;align-items:center;gap:.7rem;}
.footer__tag{color:var(--mut-d);font-size:.95rem;}
.footer__legal{color:rgba(255,255,255,.28);margin-top:1.6rem;max-width:640px;line-height:1.8;}

/* reveal default state (JS animates in) */
.reveal{opacity:0;transform:translateY(28px);}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;}
  .line-mask .line{transform:none;}
  .scroll-cue__line::after{animation:none;}
}