/* ═══════════════════════════════════════════════════════════════
   Photon Planet — Sunplus

   The palette is sampled from the company's own photography, not
   invented:  azure #004EA3 and violet #3B21C0 are the backdrop of
   the product shot;  #3C5A83 is the sky reflected in the membrane
   in the desert photograph;  #2E3643 is the panel glass.

   The organising idea: the mat turns the ground into a second sky.
   So the page is lit from below — cards, images and the control
   rail all take their light from their lower edge, the way the
   rear face of a bifacial module does.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:        #0A1420;
  --ink-2:      #46596B;
  --ink-3:      #64758A;

  --paper:      #FFFFFF;
  --mirror:     #F2F8FC;
  --sky-pale:   #DEEBF3;
  --line:       #D3DFE7;

  --slate-900:  #0A1420;
  --slate-800:  #101E2C;
  --slate-700:  #1E3040;
  --slate-line: #24384A;

  --azure:      #0A56B4;
  --azure-lt:   #3D8BF0;
  --azure-dk:   #063A80;
  --violet:     #3B21C0;

  --sun:        #F0A62E;
  --sun-lt:     #FFCE72;

  --focus:      var(--azure);

  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --gut: clamp(1.25rem, 4vw, 3rem);
  --sec: clamp(4.5rem, 9vw, 8.5rem);
  --maxw: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 1.0625rem/1.65 var(--body);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:2px; }

:target, .section, .hero{ scroll-margin-top:5rem; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:840px; }

.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.9375em; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:#fff; padding:.75rem 1.25rem;
  font:600 .875rem var(--body); text-decoration:none;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* Reveal on scroll. Only armed once JS is confirmed, so the page is
   fully readable if the script never runs. */
.js [data-reveal]{ opacity:0; transform:translateY(20px); }
.js [data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity .75s cubic-bezier(.22,.7,.3,1), transform .75s cubic-bezier(.22,.7,.3,1);
}
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1; transform:none; }
}


/* ── Type roles ───────────────────────────────────────────── */

.eyebrow{
  display:flex; align-items:center; gap:.55rem;
  margin:0 0 1.35rem;
  font-family:var(--mono); font-weight:500;
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3);
}
.eyebrow__u{ color:var(--azure); font-weight:600; text-transform:none; letter-spacing:.06em; }
.eyebrow__dot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--sun); box-shadow:0 0 0 4px rgba(240,166,46,.25);
}
.eyebrow--tight{ margin-bottom:.85rem; }
.eyebrow--hero{ color:var(--slate-700); }
.eyebrow--on-dark{ color:#8296A8; }
.eyebrow--on-dark .eyebrow__u{ color:var(--azure-lt); }
.eyebrow--on-volt{ color:#A9BCE8; }
.eyebrow--on-volt .eyebrow__u{ color:var(--sun-lt); }

h1{
  margin:0 0 1.6rem;
  font-family:var(--display); font-weight:800; font-stretch:112%;
  font-size:clamp(2.4rem, 5.6vw, 4.5rem);
  line-height:.93; letter-spacing:-.032em;
}

.h2{
  margin:0 0 1.35rem;
  font-family:var(--display); font-weight:700; font-stretch:108%;
  font-size:clamp(1.9rem, 3.7vw, 3.05rem);
  line-height:1.02; letter-spacing:-.026em;
  max-width:20ch; text-wrap:balance;
}
.h2--on-dark{ color:var(--paper); }

.lede{
  margin:0 0 2rem;
  font-size:clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height:1.62; color:var(--ink-2);
  max-width:56ch;
}
.lede strong{ color:var(--ink); font-weight:600; }
.lede--on-dark{ color:#B7C6D3; }
.lede--on-dark strong{ color:var(--paper); }
.lede--tight{ margin-bottom:2.75rem; }

.note{
  margin:3.25rem 0 0; padding-top:1.5rem;
  border-top:1px solid var(--line);
  font-size:.9375rem; color:var(--ink-2); max-width:58ch;
}


/* ── Buttons ──────────────────────────────────────────────── */

.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem; margin:0; }

.btn{
  display:inline-block; padding:.95rem 1.6rem;
  font:600 .9375rem/1 var(--body); letter-spacing:-.005em;
  text-decoration:none; border:1px solid transparent; border-radius:3px;
  cursor:pointer;
  transition:background-color .18s, color .18s, border-color .18s,
             box-shadow .18s, transform .18s;
}
.btn--solid{
  background:var(--azure); color:var(--paper);
  box-shadow:0 6px 20px -8px rgba(10,86,180,.75);
}
.btn--solid:hover{
  background:var(--azure-dk); transform:translateY(-1px);
  box-shadow:0 10px 26px -8px rgba(10,86,180,.85);
}
.btn--ghost{
  background:rgba(255,255,255,.75); color:var(--ink);
  border-color:rgba(255,255,255,.9);
  backdrop-filter:saturate(150%) blur(6px);
}
.btn--ghost:hover{ border-color:var(--azure); color:var(--azure); background:var(--paper); }

.btn--sun{ background:var(--sun); color:var(--slate-900); }
.btn--sun:hover{ background:var(--sun-lt); transform:translateY(-1px); }


/* ── Masthead ─────────────────────────────────────────────── */

/* Fixed, not sticky: the sky should run the full height of the window
   behind it. It only gains a surface once there is content underneath. */
.masthead{
  position:fixed; top:0; left:0; right:0; z-index:40;
  border-bottom:1px solid transparent;
  transition:background-color .3s, border-color .3s, backdrop-filter .3s;
}
.masthead[data-stuck="true"]{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(170%) blur(12px);
  border-bottom-color:var(--line);
}
.masthead__in{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:.75rem var(--gut);
  display:flex; align-items:center; gap:1rem;
}

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; }
/* The mark is a 148×123 raster keyed off its white plate. Height is
   the fixed dimension so the lockup sits on the wordmark's optical
   centre; width follows the aspect ratio. */
.brand__mark{ display:block; width:auto; height:34px; flex:none; }
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__name{
  font-family:var(--display); font-weight:800; font-stretch:110%;
  font-size:1.0625rem; letter-spacing:-.02em;
}
.brand__sub{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}

.nav{ display:flex; align-items:center; gap:1.75rem; }
.nav__link{
  font-size:.9375rem; font-weight:500; text-decoration:none; color:var(--slate-700);
  padding:.25rem 0; border-bottom:2px solid transparent;
}
.nav__link:hover{ color:var(--azure); border-bottom-color:var(--azure); }
.nav__cta{
  font:600 .875rem/1 var(--body); text-decoration:none;
  padding:.72rem 1.1rem; background:var(--azure); color:var(--paper); border-radius:3px;
}
.nav__cta:hover{ background:var(--azure-dk); }

.navtoggle{ display:none; }


/* ── Hero ─────────────────────────────────────────────────── */

.hero{ background:#E4EDF2; }
.hero__stage{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(620px, 100svh, 1000px);
  display:flex;
}
.hero__scene{ position:absolute; inset:0; z-index:-1; }
/* The mirror is at its deepest at the foot of the stage. Fade it into the
   page rather than cutting it off with a hard line. */
.hero__stage::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:72px;
  background:linear-gradient(to bottom, rgba(228,237,242,0), #E4EDF2);
  pointer-events:none;
}
.hero__in{ position:relative; z-index:1; }

.scene{
  width:100%; height:100%; display:block;
  --ground-fill:#4A3B2C;
  --mirror-op:0;
  --bounce-op:.06;
  --glow-op:.03;
  --bloom-op:0;
  --ripple-op:0;
  --ray-op:.30;
  --bounce-col:#8FCEFF;
  --panel-col:#1B2C3D;
}
.scene .ground{ fill:var(--ground-fill); }
.scene .mirror{ opacity:var(--mirror-op); }
.scene .bloom{ opacity:var(--bloom-op); }

@media (prefers-reduced-motion: no-preference){
  .scene .rays-down{ animation:flow 3s linear infinite; }
  .scene .sun-glow{ animation:pulse 7s ease-in-out infinite; transform-origin:1140px 140px; }
}
@keyframes flow{ to{ stroke-dashoffset:-58; } }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.9 } 50%{ transform:scale(1.07); opacity:1 } }

.hero__in{
  display:grid; grid-template-rows:1fr auto; align-items:start;
  width:100%;
  padding-top:clamp(6rem, 15vh, 9rem);
  padding-bottom:clamp(1.25rem, 3vh, 2.25rem);
  gap:clamp(2rem, 5vh, 3.5rem);
}
.hero__copy{ max-width:40rem; }

/* The control rail sits on the mirror, because the mirror is what it
   controls. Frosted so the scene still reads through it, and lit along
   its lower edge. */
.rail{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:end; gap:1.25rem 2.5rem;
  padding:1.15rem 1.35rem 1.25rem;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(160%) blur(14px);
  border:1px solid rgba(255,255,255,.85);
  border-bottom:2px solid var(--azure);
  border-radius:4px;
  box-shadow:0 -12px 40px -18px rgba(10,86,180,.55), 0 18px 40px -30px rgba(10,20,32,.6);
}

.readout{ display:flex; gap:2rem; order:2; }
.readout__cell{ display:block; }
.readout__fig{
  display:block; font-family:var(--mono); font-weight:500;
  font-size:clamp(1.35rem, 2.2vw, 1.9rem); line-height:1.05; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.readout__fig--accent{ color:var(--azure); }
.readout__lab{
  display:block; margin-top:.35rem;
  font-family:var(--mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
/* ρ upper-cases to Ρ, which is indistinguishable from a Latin P. */
.readout__gr{ text-transform:none; }

.albedo{ display:grid; gap:.35rem; order:1; }
.albedo__label{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--slate-700);
}
.albedo__range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:28px; background:transparent; margin:0; cursor:ew-resize;
}
.albedo__range::-webkit-slider-runnable-track{
  height:6px; border-radius:3px;
  background:linear-gradient(to right, #4A3B2C, #8C7A5E 24%, #C9BBA4 48%, #9FC8E4 72%, #FFFFFF);
  box-shadow:inset 0 0 0 1px rgba(10,20,32,.12);
}
.albedo__range::-moz-range-track{
  height:6px; border-radius:3px;
  background:linear-gradient(to right, #4A3B2C, #8C7A5E 24%, #C9BBA4 48%, #9FC8E4 72%, #FFFFFF);
}
.albedo__range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:26px; margin-top:-10px; border-radius:3px;
  background:var(--azure); border:2px solid #fff;
  box-shadow:0 2px 10px rgba(10,86,180,.6);
}
.albedo__range::-moz-range-thumb{
  width:14px; height:26px; border-radius:3px;
  background:var(--azure); border:2px solid #fff;
  box-shadow:0 2px 10px rgba(10,86,180,.6);
}

.albedo__ticks{
  display:flex; justify-content:space-between; gap:.5rem;
  list-style:none; margin:0; padding:0;
  font-family:var(--mono); font-size:.625rem; letter-spacing:.04em; color:var(--ink-3);
}
.albedo__ticks .is-mat{ color:var(--azure); font-weight:600; }

.albedo__help{
  margin:1.25rem auto 0; max-width:var(--maxw);
  padding-block:0 1.75rem;
  font-size:.75rem; line-height:1.55; color:var(--ink-3);
}


/* ── Specimen band ────────────────────────────────────────── */

.specimen{
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(61,139,240,.18), transparent 62%),
    linear-gradient(180deg, #101E2C, #0A1420);
  color:#B7C6D3;
  padding-block:var(--sec);
  --focus:#FFCE72;
}
.specimen__in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem); align-items:center;
}
.specimen__fig{ margin:0; }
.specimen__fig img{
  width:100%; border-radius:3px;
  /* Lit from below: a bright edge and an upward wash, matching the mat. */
  border-bottom:3px solid var(--azure-lt);
  box-shadow:0 -2px 0 rgba(255,255,255,.08) inset,
             0 30px 60px -30px rgba(0,0,0,.9),
             0 0 60px -20px rgba(61,139,240,.5);
}
.specimen__cap{
  margin-top:.9rem;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--azure-lt);
}

.keyvals{ margin:2rem 0 0; }
.keyvals__row{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:.4rem 1.5rem; padding:.75rem 0; border-top:1px solid var(--slate-line);
}
.keyvals dt{ font-size:.875rem; color:#8296A8; }
.keyvals dd{ margin:0; color:var(--paper); font-weight:500; }


/* ── Sections ─────────────────────────────────────────────── */

.section{ padding-block:var(--sec); }
.section--mirror{ background:linear-gradient(180deg, var(--mirror), var(--paper)); }
.section--sky{ background:linear-gradient(180deg, var(--sky-pale), var(--mirror)); }
.section--slate{
  background:
    radial-gradient(90% 70% at 12% 108%, rgba(61,139,240,.22), transparent 60%),
    linear-gradient(180deg, #0E1E2C, #0A1420);
  color:#B7C6D3;
  --focus:#FFCE72;
}
/* The product photograph carries its own blue-and-violet ground. Rather
   than sit the shot on a contrasting field, the section continues it:
   violet at the upper left where the photo's violet wedge is, azure
   everywhere else. */
.section--volt{
  background:
    radial-gradient(72% 62% at 6% -4%, rgba(59,33,192,.92), transparent 56%),
    linear-gradient(150deg, #1A46B0 0%, #0D3792 50%, #072A66 100%);
  color:#C3D2EE;
  --focus:#FFCE72;
}


/* ── Steps — the light path ───────────────────────────────── */

.steps{
  list-style:none; margin:3.25rem 0 0; padding:0;
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(3, 1fr);
}
.step{
  position:relative; overflow:hidden;
  padding:1.85rem 1.6rem 2rem;
  background:
    linear-gradient(to top, rgba(10,86,180,.07), rgba(255,255,255,0) 58%),
    var(--paper);
  border:1px solid var(--line);
  border-bottom:2px solid var(--line);
  border-radius:4px;
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.step:hover{
  border-bottom-color:var(--azure);
  box-shadow:0 -14px 34px -22px rgba(10,86,180,.85), 0 14px 30px -24px rgba(10,20,32,.4);
  transform:translateY(-2px);
}
.step--key{
  border-bottom-color:var(--azure);
  background:
    linear-gradient(to top, rgba(10,86,180,.13), rgba(255,255,255,0) 62%),
    var(--paper);
}

.step__tag{
  display:flex; align-items:center; gap:.5rem; margin:0 0 1.5rem;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
/* Direction of travel, drawn rather than typed, so it reads at a glance. */
.step__arrow{ width:0; height:0; flex:none; }
.step__arrow--down{ border-left:5px solid transparent; border-right:5px solid transparent; border-top:8px solid var(--sun); }
.step__arrow--up{ border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid var(--azure); }
.step__arrow--in{ width:9px; height:9px; border-radius:50%; border:2.5px solid var(--azure); }

.step__val{
  margin:0 0 1.1rem;
  font-family:var(--mono); font-weight:500;
  font-size:clamp(1.45rem, 2.4vw, 1.95rem); letter-spacing:-.03em;
  color:var(--ink);
}
.step--key .step__val{ color:var(--azure); }

.step__h{
  margin:0 0 .8rem;
  font-family:var(--display); font-weight:600; font-stretch:105%;
  font-size:1.1875rem; line-height:1.2; letter-spacing:-.015em;
  max-width:19ch;
}
.step__p{ margin:0; font-size:.9375rem; line-height:1.65; color:var(--ink-2); }


/* ── Returns ──────────────────────────────────────────────── */

.returns{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:2.5rem 3.5rem; margin-top:3rem; align-items:start;
}

.calc__sentence{
  margin:0 0 2.25rem;
  font-size:clamp(1.125rem, 1.7vw, 1.4375rem); line-height:2.15;
  color:#DCE7F0;
}

.field{ display:inline-flex; align-items:baseline; white-space:nowrap; }
.field input{
  width:4.6ch; padding:.1rem .2rem;
  font:500 1em/1.2 var(--mono); font-variant-numeric:tabular-nums;
  color:var(--sun-lt); background:rgba(61,139,240,.10);
  border:none; border-bottom:2px solid var(--azure-lt);
  text-align:center; border-radius:2px 2px 0 0;
}
.field--w input{ width:6ch; }
.field input:hover{ background:rgba(61,139,240,.2); }
.field input:focus{ outline:none; background:rgba(61,139,240,.26); border-bottom-color:var(--sun); }
.field input::-webkit-outer-spin-button,
.field input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.field input[type=number]{ -moz-appearance:textfield; }
.field__u{
  font-family:var(--mono); font-size:.7em; letter-spacing:.03em;
  color:#8296A8; padding-left:.25em;
}
.field__u--pre{ padding-left:0; padding-right:.05em; }

.calcout{ margin:0; border-top:1px solid var(--slate-line); }
.calcout__row{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:.5rem 1.5rem; padding:.95rem 0; border-bottom:1px solid var(--slate-line);
}
.calcout dt{ font-size:.9375rem; color:#8296A8; }
.calcout dd{ margin:0; font-weight:500; color:var(--paper); }
.mono--big{
  font-size:clamp(1.4rem,2.6vw,1.9rem); letter-spacing:-.03em;
  color:var(--sun-lt); text-shadow:0 0 24px rgba(240,166,46,.35);
}

.calc__foot{ margin:1.35rem 0 0; font-size:.8125rem; line-height:1.55; color:#7C8DA0; max-width:52ch; }

.quoted{
  background:rgba(255,255,255,.045);
  border:1px solid var(--slate-line);
  border-bottom:2px solid var(--azure-lt);
  border-radius:4px;
  padding:1.85rem 1.75rem 1.6rem;
  box-shadow:0 -16px 40px -26px rgba(61,139,240,.9);
}
.quoted .eyebrow{ color:#8296A8; }
.quoted__h{
  margin:0 0 1.35rem;
  font-family:var(--display); font-weight:700; font-stretch:108%;
  font-size:1.4rem; letter-spacing:-.02em; color:var(--paper);
}
.spec{ margin:0; }
.spec__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.65rem 0; border-top:1px solid var(--slate-line);
}
.spec dt{ font-size:.875rem; color:#8296A8; }
.spec dd{ margin:0; font-weight:500; color:var(--paper); }
.quoted__foot{ margin:1.35rem 0 0; font-size:.75rem; line-height:1.5; color:#7C8DA0; }


/* ── Product ──────────────────────────────────────────────── */

.product{
  display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1fr);
  gap:2.5rem 4rem; margin-top:3rem; align-items:center;
}
/* The photograph carries its own blue ground and a thin gold rim.
   The frame repeats the rim rather than fighting it. */
.product__shot img{
  width:100%; border-radius:4px;
  border:1px solid rgba(240,166,46,.5);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.85), 0 0 70px -26px rgba(61,139,240,.55);
}

.pills{
  list-style:none; margin:0 0 2.25rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.pills li{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.01em;
  padding:.48rem .75rem;
  border:1px solid rgba(255,255,255,.24); color:#CBD8F0;
  border-radius:3px; background:rgba(255,255,255,.05);
}


/* ── Projects ─────────────────────────────────────────────── */

.projects{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem;
}
.proj{ margin:0; }
.proj--wide{ grid-column:span 2; }

.proj__fig{ margin:0; }
.proj__fig img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  background:var(--sky-pale); border-radius:4px;
  transition:transform .5s cubic-bezier(.22,.7,.3,1);
}
.proj--wide .proj__fig img{ aspect-ratio:16/9; }
.proj__fig{ overflow:hidden; border-radius:4px; }
.proj:hover .proj__fig img{ transform:scale(1.03); }

.proj__cap{
  display:grid; gap:.25rem;
  padding-top:.85rem; margin-top:.85rem;
  border-top:2px solid var(--azure);
}
.proj--wide .proj__cap{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.25rem 1.5rem;
}
.proj__place{
  font-family:var(--display); font-weight:600; font-stretch:106%;
  font-size:1rem; letter-spacing:-.01em;
}
.proj__meta{ color:var(--ink-3); font-size:.75rem; letter-spacing:.02em; }

/* A figure card among the photographs: the deployment number gets the
   widest, heaviest setting on the page. */
.proj--stat{
  display:flex; flex-direction:column; justify-content:space-between;
  padding:1.6rem 1.5rem 1.5rem;
  background:linear-gradient(to top, rgba(10,86,180,.12), rgba(255,255,255,0) 60%), var(--mirror);
  border:1px solid var(--line); border-bottom:2px solid var(--azure);
  border-radius:4px;
}
.stat__fig{
  margin:0;
  font-family:var(--display); font-weight:800; font-stretch:125%;
  font-size:clamp(3rem, 6vw, 4.4rem); line-height:.85; letter-spacing:-.04em;
  color:var(--azure);
}
.stat__u{
  font-family:var(--mono); font-weight:500; font-size:.9rem;
  letter-spacing:.08em; color:var(--ink-3); margin-left:.4rem; vertical-align:super;
}
.stat__lab{ margin:1.1rem 0 0; font-size:.875rem; line-height:1.55; color:var(--ink-2); }
.stat__list{
  list-style:none; margin:1.25rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.35rem;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
}
/* The separator leads its own item so it never dangles at a line break. */
.stat__list li + li::before{ content:"· "; color:var(--azure); }


/* ── Form ─────────────────────────────────────────────────── */

.form{ margin-top:2.5rem; }
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem 1.5rem; }

.f{ margin:0; display:flex; flex-direction:column; gap:.4rem; }
.f--full{ margin-top:1.25rem; }
.f__l{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2);
}
.f__opt{ color:var(--ink-3); text-transform:none; letter-spacing:.04em; }
.f__i{
  width:100%; padding:.78rem .85rem;
  font:400 1rem/1.4 var(--body); color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  transition:border-color .18s, box-shadow .18s;
}
.f__i:hover{ border-color:var(--ink-3); }
.f__i:focus{
  outline:none; border-color:var(--azure);
  box-shadow:0 0 0 3px rgba(10,86,180,.18), 0 2px 0 var(--azure);
}
.f__i--area{ resize:vertical; min-height:7rem; }
.f__i[aria-invalid="true"]{ border-color:#B3261E; box-shadow:0 0 0 3px rgba(179,38,30,.14); }

.f--check{ flex-direction:row; align-items:flex-start; gap:.7rem; }
.f__c{ width:1.15rem; height:1.15rem; margin-top:.2rem; accent-color:var(--azure); flex:none; }
.f__cl{ font-size:.875rem; line-height:1.5; color:var(--ink-2); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form .actions{ margin-top:1.85rem; }
.form__alt{ font-size:.875rem; color:var(--ink-2); }
.form__alt a{ color:var(--azure); }

.form__status{ margin:1.1rem 0 0; font-size:.9375rem; min-height:1.4em; }
.form__status[data-tone="ok"]{ color:var(--azure); font-weight:500; }
.form__status[data-tone="bad"]{ color:#B3261E; }


/* ── Footer ───────────────────────────────────────────────── */

.foot{
  background:linear-gradient(180deg, #0E1E2C, #060E16);
  color:#93A1AC; padding-top:clamp(3rem,6vw,4.5rem);
  --focus:#FFCE72;
}
.foot__in{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  gap:2.5rem 3rem; padding-bottom:3rem;
}
.foot__brand{ max-width:26ch; }
.brand__mark--foot{ height:48px; margin-bottom:1.25rem; }
.foot__tag{
  margin:0; font-family:var(--display); font-weight:600; font-stretch:106%;
  font-size:1.125rem; line-height:1.25; letter-spacing:-.015em; color:var(--paper);
}

.foot__h{
  margin:0 0 1rem;
  font-family:var(--mono); font-weight:500; font-size:.6875rem;
  letter-spacing:.15em; text-transform:uppercase; color:#7C8DA0;
}
.foot__addr{ font-style:normal; font-size:.9375rem; line-height:1.85; }
.foot__addr a{ color:var(--azure-lt); text-decoration:none; }
.foot__addr a:hover{ text-decoration:underline; }

.foot__list{ list-style:none; margin:0; padding:0; font-size:.9375rem; line-height:1.85; }
.foot__list a{ text-decoration:none; }
.foot__list a:hover{ color:var(--paper); }

.foot__legal{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1.5rem;
  padding-block:1.25rem; border-top:1px solid var(--slate-line);
  font-size:.8125rem; color:#7C8DA0;
}


/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1080px){
  .rail{ grid-template-columns:1fr; align-items:stretch; }
  .readout{ order:1; justify-content:space-between; gap:1rem; }
  .albedo{ order:2; }
  .specimen__in{ grid-template-columns:1fr; }
  .specimen__fig{ max-width:560px; }
  .returns{ grid-template-columns:1fr; }
  .product{ grid-template-columns:1fr; }
  .product__shot{ max-width:360px; }
  .steps{ grid-template-columns:1fr; }
  .step__h{ max-width:none; }
  .step{ padding-bottom:1.75rem; }
  .projects{ grid-template-columns:repeat(2, 1fr); }
  .proj--wide{ grid-column:span 2; }
  .foot__in{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:span 2; }
}

@media (max-width: 820px){
  .navtoggle{
    display:inline-flex; align-items:center; gap:.5rem;
    background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:3px;
    padding:.58rem .85rem; cursor:pointer;
    font:600 .8125rem var(--body); color:var(--ink);
  }
  .navtoggle__bars{ width:16px; height:9px; border-block:2px solid var(--ink); }

  .masthead[data-open="true"]{ background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:.5rem var(--gut) 1.25rem;
  }
  .nav[data-open="true"]{ display:flex; }
  .nav__link{ padding:.9rem 0; border-bottom:1px solid var(--line); }
  .nav__link:hover{ border-bottom-color:var(--line); }
  .nav__cta{ margin-top:1rem; text-align:center; }

  .hero__stage{ min-height:auto; }
  .hero__in{ padding-bottom:1.25rem; gap:2.5rem; }
  .hero__copy{ padding-bottom:6rem; }
  /* The scene is height-driven, so on a narrow, tall stage it would show
     barely one module. Overhang the sides and it reads as an array again. */
  .hero__scene{ inset:0 -40%; }
}

@media (max-width: 640px){
  .readout{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1rem; }
  .readout__cell:first-child{ grid-column:span 2; }
  .albedo__ticks li:nth-child(2),
  .albedo__ticks li:nth-child(3){ display:none; }
  .form__grid{ grid-template-columns:1fr; }
  .projects{ grid-template-columns:1fr; }
  .proj--wide{ grid-column:span 1; }
  .proj--wide .proj__fig img{ aspect-ratio:4/3; }
  .calc__sentence{ line-height:2.35; }
  .foot__in{ grid-template-columns:1fr; }
  .foot__brand{ grid-column:span 1; }
  .specimen__fig{ max-width:none; }
}

@media print{
  .masthead, .rail, .navtoggle, .hero__scene{ display:none; }
  body{ color:#000; background:#fff; }
  .section--slate, .section--volt, .specimen, .foot{ background:#fff; color:#000; }
}