/* ==========================================================================
   HELION LIGHTS — main.css
   Single stylesheet. No preprocessor, no framework, no external font requests.
   Layout follows the approved Helion website mockup.
   Order: tokens -> reset -> utilities -> type -> components -> sections.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Color: surfaces --------------------------------------------------- */
  --c-black:         #070707; /* page ground */
  --c-near-black:    #0d0e0f; /* alternating section ground */
  --c-charcoal:      #141517; /* raised surface / cards */
  --c-charcoal-2:    #1b1d1f; /* hover surface */
  --c-graphite:      #2b2e31; /* registration marks, strong dividers */

  /* --- Color: type ------------------------------------------------------- */
  --c-text:          #f0efec; /* off-white, primary */
  --c-text-strong:   #ffffff;
  --c-text-muted:    #a2a7ab; /* supporting body */
  --c-text-faint:    #6e7478; /* labels, meta, captions */

  /* --- Color: Helion orange (sampled from the approved mockup) ----------- */
  --c-accent:        #f26b21;
  --c-accent-hot:    #ff8340; /* hover */
  --c-accent-deep:   #c2500f; /* pressed */
  --c-accent-tint:   rgba(242, 107, 33, 0.12);
  --c-on-accent:     #0a0a0a; /* text on an orange fill */

  /* --- Color: lines ------------------------------------------------------ */
  --c-border:        rgba(255, 255, 255, 0.09);
  --c-border-strong: rgba(255, 255, 255, 0.2);
  --c-focus:         #ff8340;
  --c-error:         #ff9b8a; /* validation text, legible on the night photo */

  /* --- Color: form fields ------------------------------------------------
     Charcoal fields that stay legible over the hero photograph without
     becoming light boxes. Slightly translucent so the band still reads
     behind them. */
  --c-field-bg:      rgba(28, 28, 28, 0.92); /* ~#1a1a1a over the hero */
  --c-field-border:  #555555;
  --c-field-hover:   #7a7a7a;
  --c-field-ph:      #aaaaaa;

  /* --- Typography --------------------------------------------------------
     System stack until the final Helion brand face is licensed. Zero network
     cost, no FOUT, and it carries the heavy industrial weight the mockup
     uses. Swapping in the real face is a one-token change. */
  --font-display: "Helvetica Neue", Inter, "Segoe UI", system-ui, -apple-system,
                  Arial, sans-serif;
  --font-body: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
               Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas,
               monospace;

  --fs-eyebrow: 0.6875rem;
  --fs-small:   0.8125rem;
  --fs-body:    clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --fs-lead:    clamp(1rem, 0.95rem + 0.4vw, 1.1875rem);
  --fs-h4:      clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --fs-h3:      clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --fs-h2:      clamp(1.875rem, 1.3rem + 2.3vw, 3.25rem);
  --fs-hero:    clamp(2.75rem, 1.4rem + 5.6vw, 5.5rem);

  --lh-tight: 0.94;
  --lh-snug:  1.15;
  --lh-body:  1.6;

  --tr-caps:  0.16em;  /* eyebrow / label tracking */
  --tr-tight: -0.02em; /* display tracking */

  /* --- Spacing ----------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --section-y: clamp(3.5rem, 7vw, 7rem);

  /* --- Layout ------------------------------------------------------------ */
  --container: 1400px;
  /* The hero composition — photograph, scrim and copy — is capped narrower than
     the page container and centred, so it stops spreading on large monitors.
     The value bar below is sized from the same token so the two read as one
     block. Everything outside it is the page ground, which the scrim's own
     edges resolve to almost exactly, so the join is invisible. */
  --hero-max: 1200px;
  /* Where the desktop frame sits inside that cap. Negative x walks the frame
     left, bringing the hog in off the right edge; positive y drops it, carrying
     the lit vegetation lower down the composition. Offsets only — the frame is
     never rescaled, so the hog keeps the size it was composed at. */
  --hero-shift-x: -68px;
  --hero-shift-y: -88px;
  --container-mid: 1120px;
  --container-narrow: 700px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --header-h: 72px;

  /* --- Borders / radii ---------------------------------------------------- */
  --radius-sm: 2px;
  --radius: 3px;
  --hairline: 1px solid var(--c-border);

  /* --- Motion ------------------------------------------------------------ */
  --t-fast: 140ms cubic-bezier(0.2, 0, 0.2, 1);
  --t: 240ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--c-black);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* guard against any single element forcing h-scroll */
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* High-contrast focus ring for keyboard users on every interactive element. */
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--c-accent); color: var(--c-on-accent); }

/* --------------------------------------------------------------------------
   3. UTILITIES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--mid { max-width: var(--container-mid); }
.container--narrow { max-width: var(--container-narrow); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-4); }

.icon { flex: none; }

/* --------------------------------------------------------------------------
   4. TYPE PRIMITIVES
   -------------------------------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 26px;
  height: 1px;
  background: var(--c-accent);
}
.eyebrow--center { justify-content: center; }

.display,
.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  color: var(--c-text-strong);
  text-wrap: balance;
}
.section-title { font-size: var(--fs-h2); }

/* The mockup pairs every major headline with a short uppercase strapline. */
.strapline {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-text);
}

.lead {
  max-width: 54ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-text-muted);
  text-wrap: pretty;
}

.prose p {
  max-width: 60ch;
  color: var(--c-text-muted);
  text-wrap: pretty;
}
.prose p + p { margin-top: var(--sp-4); }

.accent { color: var(--c-accent); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 50px; /* generous touch target */
  padding: 0 var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.btn .icon { width: 16px; height: 16px; }

.btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}
.btn--primary:hover {
  background: var(--c-accent-hot);
  border-color: var(--c-accent-hot);
}
.btn--primary:active {
  background: var(--c-accent-deep);
  border-color: var(--c-accent-deep);
}

/* Outline button, as used for the secondary actions in the mockup. */
.btn--ghost {
  border-color: var(--c-border-strong);
  color: var(--c-text-strong);
}
.btn--ghost:hover {
  border-color: var(--c-text-strong);
  background: rgba(255, 255, 255, 0.05);
}

.btn--sm { min-height: 42px; padding: 0 var(--sp-5); font-size: var(--fs-eyebrow); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
@media (min-width: 560px) {
  .btn-row { flex-direction: row; flex-wrap: wrap; }
  .btn-row .btn { min-width: 210px; }
}

/* --------------------------------------------------------------------------
   6. IMAGE PLACEHOLDERS
   Intentional, labeled frames holding the exact proportion and composition
   the final Helion photography will occupy. Frames and briefs — never a fake
   product rendered in CSS.
   -------------------------------------------------------------------------- */
.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  /* max-width guard: min-height + aspect-ratio can otherwise resolve the box
     width from its height and push past the container on narrow screens. */
  max-width: 100%;
  min-height: 170px;
  padding: var(--sp-5);
  aspect-ratio: var(--ph-ratio, 4 / 3);
  border: 1px solid var(--c-border);
  background-color: var(--c-charcoal);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 14px,
    rgba(255, 255, 255, 0.022) 14px 15px
  );
}

/* Corner registration marks: reads as a framing guide, not decoration. */
.ph::before,
.ph::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--c-graphite);
}
.ph::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.ph::after { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }

.ph__label {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.ph__note {
  position: relative;
  max-width: 44ch;
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--c-text-faint);
}

.ph--tall     { --ph-ratio: 3 / 4; }
.ph--portrait { --ph-ratio: 4 / 5; }
.ph--square   { --ph-ratio: 1 / 1; }
.ph--wide     { --ph-ratio: 16 / 9; }
.ph--photo    { --ph-ratio: 16 / 10; }
/* Cinematic 21:9 only where there is room; a phone gets a usable frame. */
.ph--pano     { --ph-ratio: 16 / 10; min-height: 200px; }
@media (min-width: 760px) {
  .ph--pano   { --ph-ratio: 21 / 9; min-height: 240px; }
}
.ph--thumb    { --ph-ratio: 1 / 1; min-height: 0; padding: var(--sp-3); }
.ph--thumb .ph__label { font-size: 0.625rem; letter-spacing: 0.1em; }

/* Fills a positioned parent — used for the full-bleed photographic bands
   the mockup builds the hero and field sections from. */
.ph--fill {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  min-height: 0;
  border: 0;
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
}
.ph--fill::before, .ph--fill::after { display: none; }
.ph--fill .ph__note { display: none; }

/* Real photography, occupying exactly the geometry the placeholders reserved.
   Swapping a .ph--fill placeholder for a .photo--fill photograph moves
   nothing else in the band. */
.photo { position: relative; margin: 0; }
.photo--fill { position: absolute; inset: 0; }
/* Phone: the band is a purpose-composed 1080x1600 frame, not a crop of the
   desktop photograph. It is shown whole — the subject sits upper-right and the
   black negative space down the left and across the lower frame is where the
   headline and signup are meant to fall. So the band is pinned to the top of
   the hero and given the frame's own ratio, letting its height follow the
   viewport width. No mask: the frame's own floor is already pure black and
   meets the hero ground invisibly. */
.hero .photo--fill {
  bottom: auto;
  height: auto;
  aspect-ratio: 1080 / 1600;
}
/* Tablet and up: a second purpose-composed frame, 1920x1080, built to the same
   rule — subject right, pure black down the left and across the floor. The band
   is released back to the hero's full box, but the photograph inside it is NOT
   stretched to that box: it is laid in at its natural full-width scale, top
   aligned, so the hog stays the size it was composed at. Where the hero is
   taller than the frame the figure's own ground shows through below it, and
   that ground is #000 — the frame's floor is literally #000, not the page's
   #070707, so matching it exactly is what keeps the join invisible. Where the
   hero is shorter, the hero's overflow clips the frame's black floor. */
@media (min-width: 760px) {
  .hero .photo--fill {
    bottom: 0;
    height: auto;
    aspect-ratio: auto;
    background: #000;
  }
  /* Natural height for the width — the box then matches the frame's own ratio,
     so there is nothing for object-fit to crop or letterbox. Offset from there
     to place the frame within the band. Relative positioning is painted, not
     laid out, so the hero's height and every element over it are untouched;
     the band clips what the offset pushes past its edges, so the approved
     1200px composition edge does not move. What the frame vacates is the
     figure's own #000 ground. */
  .hero .photo--fill { overflow: hidden; }

  /* Feather the frame into the band so no rectangular boundary is readable.
     A black overlay rather than a mask: the band's ground is already #000, so
     painting toward black is the same result with none of the mask-composite
     compatibility cost, and each edge stays independently tunable.

     Each stop set is expressed against the band, and every gradient reaches
     full black BEFORE the frame's own edge, so the cut itself is buried rather
     than merely softened. The falloffs are front-loaded — steep for the first
     few percent, then long and shallow — so the eye reads a gradual emergence
     instead of a ramp with a findable start. Left is the deepest, per the
     brief; it also keeps the glow off the copy column. The bright core sits
     around 27-72% across and 48-88% down, and the stops are placed to leave
     the hog clear. */
  .hero .photo--fill::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      /* bottom — the frame cuts through lit vegetation here, so this is the
         edge that most needs burying; it is also the longest fade. These stops
         are registered to where the frame's bottom edge actually falls in the
         band (64.6% down, i.e. 35.4% up from the floor), NOT to the band's own
         floor — the gradient is anchored to the band, so it has to be re-aimed
         whenever the frame moves vertically. Full black is reached 13px BEFORE
         the edge rather than at it, so the edge is buried rather than merely
         softened, and the fade opens 146px above it. */
      linear-gradient(
        to top,
        #000 37%,
        rgba(0, 0, 0, 0.72) 40%,
        rgba(0, 0, 0, 0.38) 44%,
        rgba(0, 0, 0, 0.14) 48%,
        transparent 53%
      ),
      /* left — deepest fade, carrying the scene out from under the headline. */
      linear-gradient(
        to right,
        #000 18%,
        rgba(0, 0, 0, 0.55) 30%,
        rgba(0, 0, 0, 0.22) 40%,
        transparent 50%
      ),
      /* right — the frame's edge still carries ~9/255, so it needs burying. */
      linear-gradient(
        to left,
        #000 7%,
        rgba(0, 0, 0, 0.5) 14%,
        rgba(0, 0, 0, 0.18) 22%,
        transparent 30%
      ),
      /* top — faintest edge (~5/255); a short fade is enough. */
      linear-gradient(
        to bottom,
        #000 8%,
        rgba(0, 0, 0, 0.45) 14%,
        transparent 26%
      );
  }
  .hero .photo--fill img {
    height: auto;
    position: relative;
    left: var(--hero-shift-x);
    top: var(--hero-shift-y);
  }

  /* Cap the composition. Both layers are inset:0 boxes, so a max-width plus
     auto inline margins centres them without touching the frame's ratio or its
     internal left/right balance — the photograph is not re-cropped, only the
     stage it stands on stops widening. */
  .hero .photo--fill,
  .hero__scrim {
    max-width: var(--hero-max);
    margin-inline: auto;
  }
  /* The copy column rides the same cap, so the headline keeps its established
     inset from the frame's left edge instead of drifting away from it. */
  .hero .hero__inner { max-width: var(--hero-max); }
}

.photo--fill img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The night frames are dark by nature; the bands sit on the page ground
     so any letterboxing on extreme ratios disappears into it. */
  background: var(--c-black);
}

/* --------------------------------------------------------------------------
   7. SECTION SHELL
   -------------------------------------------------------------------------- */
.section { position: relative; padding-block: var(--section-y); }
.section--alt { background: var(--c-near-black); }
.section--line { border-top: var(--hairline); }

.section__head {
  max-width: 66ch;
  margin-bottom: clamp(2rem, 4.5vw, 3.5rem);
}
.section__head--center {
  margin-inline: auto;
  text-align: center;
}
.section__head--center .eyebrow { justify-content: center; }
.section__head--center .lead { margin-inline: auto; }
.section__head .lead { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   8. HEADER + NAVIGATION
   Mockup: wordmark left, nav inline, action right. On phones the toggle moves
   to the left and the wordmark centres.
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: var(--hairline);
  background: rgba(7, 7, 7, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header__inner {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

/* --- Wordmark: the Helion Lights logo asset ---
   Sized by height so the lockup keeps a consistent optical weight; width
   follows the intrinsic 440x107 ratio. The width/height attributes on the
   <img> reserve the box and keep layout shift at zero. */
.wordmark {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  padding-block: var(--sp-2);
}
.wordmark__img {
  width: auto;
  height: 30px;
}

.nav { display: none; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.25rem);
}
.nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--sp-3);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-text);
  transition: color var(--t-fast);
}
.nav__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.nav__link:hover { color: var(--c-accent); }
.nav__link:hover::after { transform: scaleX(1); }

.header__cta { display: none; }

/* Mobile menu toggle */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 9px;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu-toggle__bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--c-text);
  transition: transform var(--t), opacity var(--t-fast);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  overflow-y: auto;
  padding: var(--sp-6) var(--gutter) var(--sp-8);
  border-top: var(--hairline);
  background: var(--c-black);
}
/* Author `display: flex` above outranks the UA rule for [hidden], so the
   closed state has to be restated here or the drawer renders open. */
.mobile-nav[hidden] { display: none; }

.mobile-nav__list { display: flex; flex-direction: column; }
.mobile-nav__link {
  display: block;
  padding: var(--sp-5) 0;
  border-bottom: var(--hairline);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-text);
}
.mobile-nav__link:hover { color: var(--c-accent); }

body.is-menu-open { overflow: hidden; }

@media (min-width: 940px) {
  .header__inner { grid-template-columns: auto 1fr auto; }
  .wordmark { justify-self: start; }
  .wordmark__img { height: 34px; }
  .nav { display: block; justify-self: start; margin-left: clamp(1.5rem, 3vw, 3.5rem); }
  .header__cta { display: inline-flex; }
  .menu-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* --------------------------------------------------------------------------
   9. HERO — full-bleed photographic band, copy overlaid left
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  /* Phone: the copy sits just under the header and the band is only as tall
     as the copy needs, so the value bar is not pushed off the fold. The
     centred, viewport-height treatment starts at the tablet breakpoint. */
  align-items: flex-start;
  overflow: hidden;
  padding-block: 10px var(--sp-1);
  border-bottom: var(--hairline);
  background: var(--c-black);
}
@media (min-width: 760px) {
  .hero {
    align-items: center;
    min-height: clamp(30rem, 74vh, 48rem);
    padding-block: clamp(3rem, 7vw, 5rem);
  }
}

/* Both frames are shown in full: `contain` against a box that already carries
   the frame's own ratio guarantees the composition is never cropped, whatever
   the viewport width. Top-anchored so any sub-pixel slack falls into the black
   floor rather than trimming the subject. */
.hero .photo--fill img { object-fit: contain; object-position: 50% 0%; }



/* Scrim keeps the headline legible over whatever photograph lands here.
   Weighted to the left, where the copy sits — same as the mockup. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(7, 7, 7, 0.94) 0%,
      rgba(7, 7, 7, 0.82) 34%,
      rgba(7, 7, 7, 0.42) 62%,
      rgba(7, 7, 7, 0.72) 100%
    ),
    linear-gradient(to top, rgba(7, 7, 7, 0.85) 0%, transparent 45%);
  pointer-events: none;
}

.hero__inner { position: relative; width: 100%; }
.hero__copy { max-width: 34rem; }

.hero__title {
  font-size: var(--fs-hero);
  margin-bottom: var(--sp-5);
}
.hero__title span { display: block; }
.hero__title .accent { color: var(--c-accent); }

/* Uppercase two-line strapline under the headline, as in the mockup. */
.hero__sub {
  max-width: 30rem;
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1.125rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-text);
}

/* Phone tightens this gap to shorten the hero; restore the mockup spacing
   once the hero switches to its centred, viewport-height treatment. */
@media (min-width: 760px) {
  .hero__sub { margin-bottom: var(--sp-6); }
}

/* Texas badge, top-right of the hero in the mockup. */
.hero__badge {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-text);
}
.hero__badge .icon { width: 30px; height: 30px; color: var(--c-accent); }
.hero__badge-title {
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
}
.hero__badge-note {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

@media (min-width: 860px) {
  .hero__badge { display: flex; }
}

/* --------------------------------------------------------------------------
   9b. HERO DROP FORM — primary conversion action
   Compact by design: it sits inside the existing hero copy column and must
   not read as a full contact form. Two fields, one button, nothing else.
   -------------------------------------------------------------------------- */
.drop-form { max-width: 30rem; }

.drop-form__pitch {
  margin-bottom: var(--sp-3);
  /* Centred over the field row below it. */
  text-align: center;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-muted);
}

/* Stacked on a phone so both stay full-size touch targets; side by side as
   soon as the column is wide enough to keep the pair compact. */
.drop-form__fields { display: grid; gap: var(--sp-3); }
@media (min-width: 560px) {
  .drop-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.drop-form__input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-field-border);
  border-radius: var(--radius);
  background: var(--c-field-bg);
  color: var(--c-text-strong);
  font: inherit;
  transition: border-color var(--t-fast);
}
.drop-form__input::placeholder { color: var(--c-field-ph); }
.drop-form__input:hover { border-color: var(--c-field-hover); }
.drop-form__input[aria-invalid="true"] { border-color: var(--c-error); }
/* Focus last so it wins over hover and the invalid state. This is additive:
   the global :focus-visible outline is untouched, so keyboard users still get
   the ring on top of the orange border. */
.drop-form__input:focus { border-color: var(--c-accent); }

.drop-form__error {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--c-error);
}
.drop-form__error:empty { display: none; }

.drop-form__submit { width: 100%; margin-top: var(--sp-3); }
@media (min-width: 560px) {
  .drop-form__submit { width: auto; min-width: 16rem; }
}

.drop-form__status {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text);
}
.drop-form__status:empty { display: none; }
.drop-form__status--error { color: var(--c-error); }
.drop-form__status--ok { color: var(--c-accent); }

.drop-form__note {
  margin-top: var(--sp-3);
  /* Centred on the submit button while that button is full width. Above the
     560px breakpoint the button shrinks to its content and sits left, so the
     note returns to sharing its left edge instead. */
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
@media (min-width: 560px) {
  .drop-form__note { text-align: left; }
}

/* Footer placement: same form, centred in its narrow column. The submit stays
   full width at every size here because the column is already narrow, so the
   note stays centred on it too. */
.drop-form--center { margin-inline: auto; }
.drop-form--center .drop-form__submit { width: 100%; }
.drop-form--center .drop-form__note { text-align: center; }

/* Secondary action: deliberately quieter than the orange submit so the
   signup stays visually dominant. */
.hero__secondary { margin-top: var(--sp-5); width: 100%; }
/* Above this breakpoint the submit shrinks to its content, so the secondary
   matches it rather than stretching wider than the form. */
@media (min-width: 560px) {
  .hero__secondary { width: auto; }
}

/* --------------------------------------------------------------------------
   10. VALUE BAR — four-up strip beneath the hero
   -------------------------------------------------------------------------- */
.valuebar {
  background: var(--c-near-black);
  border-bottom: var(--hairline);
}
.valuebar__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.valuebar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  border-top: var(--hairline);
}
.valuebar__item:nth-child(-n + 2) { border-top: 0; }
.valuebar__item + .valuebar__item { border-left: var(--hairline); }
.valuebar__item:nth-child(odd) { border-left: 0; }
.valuebar__item .icon { width: 26px; height: 26px; color: var(--c-text); }
.valuebar__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-strong);
}
.valuebar__body {
  max-width: 24ch;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-muted);
}

/* Align the strip's outer edges with the hero frame above it. The gutter is
   added back on top of the cap so the grid's CONTENT box — the four boxes and
   their dividers — measures --hero-max exactly, rather than the cap being eaten
   by the container's own padding. Below the cap this never binds, so the
   tablet and phone strip is untouched. */
@media (min-width: 760px) {
  .valuebar .container {
    max-width: calc(var(--hero-max) + 2 * var(--gutter));
  }
}

@media (min-width: 820px) {
  .valuebar__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .valuebar__item { border-top: 0; padding-block: var(--sp-7); }
  .valuebar__item:nth-child(odd) { border-left: var(--hairline); }
  .valuebar__item:first-child { border-left: 0; }
}

/* --------------------------------------------------------------------------
   11. RECON — flagship product: copy left, product right
   -------------------------------------------------------------------------- */
.recon__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.recon__media { display: grid; gap: var(--sp-4); }
.recon__thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

/* Icon bullet list, as in the mockup. */
.feature-list {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.feature-list__item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-body);
  color: var(--c-text);
}
.feature-list__item .icon { width: 20px; height: 20px; color: var(--c-accent); }

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.price__amount {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.375rem);
  font-weight: 800;
  letter-spacing: var(--tr-tight);
  color: var(--c-text-strong);
}
.price__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

/* Specification positions. Values stay marked pending until measured on
   production hardware — no estimated figures ship here. */
.spec-list {
  display: grid;
  gap: 0;
  margin-top: var(--sp-6);
  border-top: var(--hairline);
}
.spec-list__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}
.spec-list__key {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.spec-list__val { color: var(--c-text); }
.spec-list__val--pending { color: var(--c-text-faint); }

/* On narrow screens a wrapped value would flush right, away from its key. */
@media (max-width: 479px) {
  .spec-list__row { flex-direction: column; gap: var(--sp-1); }
}

.recon__actions { margin-top: var(--sp-7); }

@media (min-width: 900px) {
  .recon__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* --------------------------------------------------------------------------
   12. SPLIT BAND — photograph bleeding to one edge, copy on the other
   Used for Precision on Purpose and the Heritage story.
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  align-items: stretch;
  border-top: var(--hairline);
  background: var(--c-near-black);
}
.split__media { position: relative; min-height: 260px; }
.split__media .ph {
  height: 100%;
  aspect-ratio: auto;
  border: 0;
}
.split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 5.5rem) var(--gutter);
}
.split__body > * { max-width: 34rem; }

@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split__media { min-height: 30rem; }
  /* Reversed variant puts the photograph on the right edge instead. */
  .split--reverse .split__media { order: 2; }
}

/* --------------------------------------------------------------------------
   13. GRIDS + CARDS
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.grid--2,
.grid--3,
.grid--4 { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  background: var(--c-charcoal);
  transition: border-color var(--t), background var(--t);
}
.card:hover {
  border-color: var(--c-border-strong);
  background: var(--c-charcoal-2);
}
.card__index {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-caps);
  color: var(--c-accent);
}
.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  color: var(--c-text-strong);
}
.card__body {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-text-muted);
}

.card--media { gap: 0; padding: 0; overflow: hidden; }
.card--media .ph { border: 0; }
.card--media .card__inner {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
}

/* --------------------------------------------------------------------------
   14. SHOP — asymmetric photographic mosaic
   -------------------------------------------------------------------------- */
.mosaic {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.125rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) {
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mosaic__item--lead { grid-column: span 2; grid-row: span 2; }
  .mosaic__item--lead .ph { aspect-ratio: auto; height: 100%; }
  .mosaic__item--wide { grid-column: span 2; }
  .mosaic__item--full { grid-column: 1 / -1; }
}

.stat-row {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-top: var(--sp-6);
  border-top: var(--hairline);
}
@media (min-width: 700px) {
  .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.stat__label {
  margin-bottom: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-accent);
}
.stat__body {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-text-muted);
}

.archive-note {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-left: 2px solid var(--c-accent);
  background: var(--c-charcoal);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-text-muted);
}

.heritage__archive {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1rem);
  padding: var(--gutter);
}

/* --------------------------------------------------------------------------
   15. FIELD BAND — full-bleed night photograph, copy overlaid
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: clamp(24rem, 52vh, 34rem);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: var(--hairline);
  background: var(--c-black);
}
.band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(7, 7, 7, 0.94) 0%,
    rgba(7, 7, 7, 0.78) 38%,
    rgba(7, 7, 7, 0.3) 72%,
    rgba(7, 7, 7, 0.6) 100%
  );
  pointer-events: none;
}
.band__inner { position: relative; width: 100%; }
.band__copy { max-width: 32rem; }
.band__copy .lead { margin-block: var(--sp-4) var(--sp-6); }

/* --------------------------------------------------------------------------
   16. FIRST DROP — closing conversion
   -------------------------------------------------------------------------- */
.drop {
  position: relative;
  overflow: hidden;
  border-top: var(--hairline);
  background: var(--c-near-black);
}
/* Faint topographic banding, echoing the mockup's closing section. Built from
   gradients so it costs no request and stays subtle at any size. */
.drop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-radial-gradient(
      circle at 50% 100%,
      transparent 0 34px,
      rgba(255, 255, 255, 0.03) 34px 35px
    ),
    radial-gradient(
      ellipse at 50% 110%,
      rgba(242, 107, 33, 0.14) 0%,
      transparent 62%
    );
  /* A fixed tile size lets the browser rasterize the contour rings once and
     repeat them. Left unsized, the repeating gradient is recomputed across the
     whole band and becomes a real paint cost. */
  background-size: 880px 460px, 100% 100%;
  background-position: center bottom, center;
  background-repeat: repeat-x, no-repeat;
  pointer-events: none;
}
.drop__inner { position: relative; text-align: center; }
.drop__title { margin-bottom: var(--sp-4); }
.drop__copy { margin: 0 auto var(--sp-7); }

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--sp-5);
  border-top: var(--hairline);
  background: var(--c-black);
}
.footer__top {
  display: grid;
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
  border-bottom: var(--hairline);
}
.footer__brand .wordmark__img { height: 44px; }
.footer__blurb {
  max-width: 34ch;
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--c-text-faint);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-5);
}
.footer__heading {
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-text-strong);
}
.footer__list { display: grid; gap: var(--sp-1); }
.footer__link {
  display: inline-block;
  padding-block: var(--sp-3); /* keeps the tap target at ~44px */
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  transition: color var(--t-fast);
}
a.footer__link:hover { color: var(--c-accent); }
/* Routes that do not exist yet: shown, but not linked. */
.footer__link--pending { color: var(--c-text-faint); }

/* Country-of-origin seal. The artwork is a disc on a PURE #000 field, while the
   page grounds are #070707 and #0d0e0f — so laid down flat, its corners read as
   a dark square around the badge. Clipping to a circle removes them
   geometrically: outside the inscribed circle the source is pure black (max
   3/255), so this discards background only and never touches the artwork.

   Chosen over `mix-blend-mode: screen`, which cannot work here — `.js .reveal`
   sets opacity and transform, and each creates a stacking context that isolates
   the blend from the section ground it would need to blend against. A clip has
   no such dependency and is supported everywhere. */
.usa-badge__img,
.footer__usa {
  display: block;
  height: auto; /* square source; never stretched */
  border-radius: 50%;
}

/* In-section seal: given its own air so it reads as a mark, not an inline
   graphic, and kept well under the section title's weight. */
.usa-badge { margin-top: var(--sp-7); }
.usa-badge__img { width: 190px; }

/* Footer: the same mark, quiet, sitting under the brand blurb. */
.footer__usa { width: 88px; margin-top: var(--sp-5); }

@media (min-width: 760px) {
  .usa-badge__img { width: 240px; }
  .footer__usa { width: 104px; }
}

.footer__badge {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.footer__badge .icon { width: 34px; height: 34px; color: var(--c-accent); }
.footer__badge-title {
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-text-strong);
}
.footer__badge-note {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
}

@media (min-width: 720px) {
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1020px) {
  .footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
    align-items: start;
  }
}

.social { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text-muted);
  transition: color var(--t-fast), border-color var(--t-fast);
}
a.social__link:hover { color: var(--c-accent); border-color: var(--c-accent); }
.social__link--pending { color: var(--c-text-faint); }
.social__link .icon { width: 18px; height: 18px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.footer__brandline { color: var(--c-text-muted); }

/* --------------------------------------------------------------------------
   18. MOTION
   One effect: a short fade/rise on section entry, applied by JS and skipped
   entirely when the visitor prefers reduced motion.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0, 0.2, 1);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}