/* ═══════════════════════════════════════════════════════════════════
   ProtoDynamics — pd.css · design system  ·  register: SpaceX
   Black · white · grey + ONE accent: blue sapphire (the logo / the jewel).
   Full-bleed imagery. Huge UPPERCASE, tracked headlines. SHARP corners —
   no pill buttons, no rounded cards, no gradient panels. Type + the logo
   carry it. Designed with purpose.
   Distinct from LabForge (lf2.css) — they do NOT mirror.
   Self-hosted fonts only (no CDN) · no external JS.
   ═══════════════════════════════════════════════════════════════════ */

/* Space Grotesk — modern technical grotesque · self-hosted (W-CR-2, no CDN) */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(assets/fonts/space-grotesk-var.woff2) format("woff2")}

:root{
  /* ground — clean neutral black → grey (no navy tint) */
  --black:#0a0b0d;  --black-2:#111317;  --panel:#15171c;  --line:#23262d;  --line-2:#343842;

  /* ink — white / grey */
  --ink:#f4f6f9;  --ink-soft:#c3c9d2;  --ink-mute:#7c828d;

  /* THE accent — blue sapphire (the logo, the jewel). Used sparingly. */
  --sapphire:#2f6fe0;  --sapphire-hi:#6aa0ff;  --sapphire-lo:#123f8f;

  /* legacy aliases — kept so existing markup recolors cleanly (NO warm) */
  --copper:#c9ced5;  --copper-hi:#ffffff;  --copper-lo:#a3a9b2;
  --alu:#c0c5cd;     --alu-dim:#828892;

  /* light zone (dark → light reward — "the lights came on") */
  --paper:#f4f5f7;  --paper-2:#e9ebef;  --ink-dark:#0f1114;  --ink-dark-soft:#454b54;

  --sans:"Space Grotesk",-apple-system,system-ui,"Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --serif:"Hoefler Text",Garamond,Georgia,serif;

  --r:2px;                 /* sharp — the whole system */
  --container:1180px;
  --gutter:clamp(1.25rem,5vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--ink);
  font-family:var(--sans);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
::selection{background:rgba(47,111,224,.32);color:#fff}

/* ── display type — UPPERCASE, tracked (the register) ──────────── */
.eyebrow{font-family:var(--mono);font-size:clamp(10px,1.5vw,12px);letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-mute);margin:0 0 2em;font-weight:500}
.headline{font-size:clamp(2rem,6vw,4.2rem);line-height:1.02;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;color:var(--ink);margin:0}
.line{font-size:clamp(19px,3.1vw,28px);line-height:1.42;letter-spacing:.004em;color:var(--ink-soft);margin:0}
.line strong{color:var(--ink);font-weight:600}
.sub{font-size:clamp(12px,1.7vw,14px);color:var(--ink-mute);margin:2.4em 0 0;
  letter-spacing:.16em;text-transform:uppercase;font-family:var(--mono)}
.rule{width:48px;height:1px;background:var(--line-2);margin:2.6em auto 0;border:0}
.t-copper,.t-alu{color:var(--ink)}          /* emphasis = plain white — no metal */
.t-sapphire{color:var(--sapphire-hi)}
.serif{font-family:var(--serif);font-style:italic}

/* ── nav — thin, uppercase, transparent over hero ──────────────── */
.nav{position:sticky;top:0;z-index:100;background:rgba(10,11,13,.72);
  -webkit-backdrop-filter:saturate(130%) blur(10px);backdrop-filter:saturate(130%) blur(10px);
  border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--container);margin:0 auto;min-height:60px;padding:.5rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink);font-weight:600;letter-spacing:.02em}
.brand img{height:22px;width:auto}
.brand .mark{width:20px;height:20px;-webkit-mask:url(img/pd-mark.svg) center/contain no-repeat;
  mask:url(img/pd-mark.svg) center/contain no-repeat;background:var(--sapphire-hi);flex:none}
.menu{display:flex;align-items:center;gap:.1rem}
.menu a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem .9rem;
  color:var(--ink-soft);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  transition:color .18s}
.menu a:hover,.menu a[aria-current=page]{color:var(--ink)}
.menu .desk{margin-left:.6rem;color:#0a0b0d;background:var(--ink);border-radius:var(--r);
  padding:.6rem 1.15rem;font-weight:600;letter-spacing:.16em}
.menu .desk:hover{color:#0a0b0d;background:#fff}
.nav-toggle{display:none;min-height:44px;min-width:44px;padding:.5rem .8rem;background:transparent;
  border:1px solid var(--line-2);border-radius:var(--r);color:var(--ink);
  font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
@media(max-width:820px){
  .nav-toggle{display:inline-flex;align-items:center;gap:.5rem}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;padding:.6rem var(--gutter) 1rem;background:var(--black-2);border-bottom:1px solid var(--line)}
  .menu.open{display:flex}
  .menu a{min-height:50px;font-size:.8rem;border-bottom:1px solid var(--line)}
  .menu .desk{margin:.7rem 0 0;text-align:center;justify-content:center}
}

/* ── section frame — full-bleed cinematic ──────────────────────── */
section{position:relative;width:100%;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:14vh 7vw;overflow:hidden}
.wrap{max-width:820px;width:100%;position:relative;z-index:2}
.section-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.5}
.section-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,11,13,.5),rgba(10,11,13,.72))}
.section-tight{min-height:auto;padding:12vh 7vw}

/* ── buttons — SHARP. Uppercase, tracked. No pills. No radius to speak of. ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:50px;
  padding:.85em 2.1em;border-radius:var(--r);font:600 .74rem/1 var(--sans);
  letter-spacing:.2em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;
  text-decoration:none;transition:background .18s,color .18s,border-color .18s}
.btn-copper{color:#0a0b0d;background:var(--ink);border-color:var(--ink)}        /* PRIMARY = solid white */
.btn-copper:hover{background:#fff;border-color:#fff;color:#0a0b0d}
.btn-ghost{color:var(--ink);background:transparent;border-color:var(--line-2)}  /* SECONDARY = thin outline */
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-sapphire{color:#fff;background:var(--sapphire);border-color:var(--sapphire)} /* ACCENT (rare) */
.btn-sapphire:hover{background:var(--sapphire-hi);border-color:var(--sapphire-hi)}

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

/* ── facet badge — sharp minimal mono chip (de-pilled) ─────────── */
.fbadge{position:fixed;right:16px;bottom:16px;z-index:60;display:inline-flex;align-items:center;
  gap:.5rem;padding:.42rem .7rem;border-radius:var(--r);background:rgba(15,17,22,.85);
  border:1px solid var(--line-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  font:600 .84rem/1 var(--mono);letter-spacing:.06em;color:var(--ink);user-select:none;
  transition:border-color .3s,box-shadow .3s,transform .15s}
.fbadge .fmark{width:15px;height:15px;-webkit-mask:url(img/pd-mark.svg) center/contain no-repeat;
  mask:url(img/pd-mark.svg) center/contain no-repeat;background:var(--ink-mute);flex:none;transition:background .3s}
.fbadge .fnum{display:inline-block;min-width:.66em;text-align:center;color:var(--ink);
  transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.fbadge.pop .fnum{transform:scale(1.6)}
.fbadge .ftot{opacity:.5}
.fbadge.complete{border-color:var(--sapphire);box-shadow:0 0 0 1px var(--sapphire),0 6px 22px rgba(47,111,224,.5)}
.fbadge.complete .fmark{background:var(--sapphire-hi)}

/* ── reception desk (the way-in form) — sharp inputs ───────────── */
.desk-form{display:flex;flex-direction:column;gap:.7rem;max-width:440px;margin:2em auto 0;text-align:left}
.desk-form input,.desk-form textarea{width:100%;min-height:50px;background:var(--black-2);
  border:1px solid var(--line-2);border-radius:var(--r);color:var(--ink);font:400 1rem var(--sans);
  padding:.75em 1em;transition:border-color .2s}
.desk-form textarea{min-height:100px;resize:vertical}
.desk-form input::placeholder,.desk-form textarea::placeholder{color:var(--ink-mute)}
.desk-form input:focus,.desk-form textarea:focus{outline:none;border-color:var(--sapphire)}
.desk-form .btn-copper{margin-top:.3rem;width:100%}
.desk-status{font:400 .78rem var(--mono);color:var(--ink-mute);text-align:center;letter-spacing:.06em;min-height:1.2em;margin:.4em 0 0}
.desk-fine{font-size:.74rem;color:var(--ink-mute);text-align:center;margin:.8em 0 0;letter-spacing:.04em}

/* ── DARK → LIGHT (the reward zone) ────────────────────────────── */
.light-zone{background:var(--paper);color:var(--ink-dark)}
.light-zone .eyebrow{color:var(--ink-dark-soft)}
.light-zone .headline,.light-zone .line{color:var(--ink-dark)}
.light-zone .line strong{color:#000}
.light-zone .sub{color:var(--ink-dark-soft)}
.light-zone a{color:var(--sapphire-lo)}
.light-zone .rule{background:rgba(0,0,0,.14)}
.light-zone .btn-copper{color:#fff;background:#0a0b0d;border-color:#0a0b0d}
.light-zone .btn-ghost{color:var(--ink-dark);border-color:rgba(0,0,0,.28)}

/* ── footer — thin, uppercase, mono ────────────────────────────── */
.foot{padding:8vh 7vw 9vh;text-align:center;border-top:1px solid var(--line)}
.foot .foot-menu{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;justify-content:center;margin:0 0 2em}
.foot .foot-menu a{color:var(--ink-soft);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.foot .foot-menu a:hover{color:var(--ink)}
.foot .meta{font-family:var(--mono);font-size:clamp(10px,1.4vw,12px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute)}
.foot .dot{margin:0 .8em;color:var(--line-2)}

/* ── logo as hero centerpiece ──────────────────────────────────── */
.pd-logo{width:clamp(230px,34vw,420px);height:auto;margin:0 auto}

/* ── motion / small-screen ─────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@media(max-width:560px){section{padding-left:6vw;padding-right:6vw}}