/* ==========================================================================
   Satellite Country — styles.css
   Single stylesheet. Vanilla CSS, no build step, no preprocessor.

   ORDER OF SECTIONS
   01 Fonts (commented out until woff2 files exist)
   02 Tokens
   03 Reset
   04 Base typography
   05 Layout
   06 Components
   07 Page-specific
   08 Motion + reduced-motion guard

   Mobile-first: every media query is min-width.
   ========================================================================== */


/* 01 FONTS ================================================================
   The site currently uses a system font stack (see --font-display below),
   which needs no downloads and renders instantly.

   TO SWITCH TO SELF-HOSTED FONTS LATER:
   1. Drop the .woff2 files into assets/fonts/
   2. Uncomment the two @font-face blocks below
   3. Change the FIRST name in --font-display / --font-body to match
   Nothing else needs to change.

@font-face {
  font-family: "SatCo Display";
  src: url("../assets/fonts/display.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SatCo Body";
  src: url("../assets/fonts/body.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
   ======================================================================== */


/* 02 TOKENS =============================================================== */

:root {
  /* --- Palette. Fixed by the brief. Do not change these eight values. --- */
  --ink:        #0A0A0A;   /* near-black, primary text and dark sections */
  --ink-soft:   #1C1C1C;   /* elevated dark surfaces */
  --paper:      #FFFFFF;   /* primary background */
  --paper-warm: #F5F4F2;   /* alternating section background */
  --signal:     #8B1A1A;   /* dark red — primary accent, CTAs */
  --signal-lit: #A82424;   /* hover state */
  --rule:       #DEDCD8;   /* hairlines and borders */
  --muted:      #5A5A5A;   /* secondary text */

  /* --- Derived. ---
     --border-strong exists because --rule is only 1.37:1 against white.
     That is fine for a decorative hairline but FAILS the WCAG 3:1 minimum
     for the border of an interactive control. Form fields therefore use
     --border-strong (6.9:1), never --rule. */
  --border-strong: var(--muted);

  /* --- Type families ---
     Bahnschrift ships with Windows 10+; DIN Alternate ships with macOS/iOS.
     Both are DIN-derived industrial grotesques, which is the utilitarian
     signage character this audience should see. Zero bytes, zero FOIT. */
  --font-display: Bahnschrift, "DIN Alternate", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Type scale, 1.25 ratio, fluid between mobile and desktop --- */
  --fs-xs:   0.8125rem;                                        /* 13px */
  --fs-sm:   0.9375rem;                                        /* 15px */
  --fs-base: 1.0625rem;                                        /* 17px → 18px at 900px */
  --fs-md:   clamp(1.1875rem, 1.09rem + 0.42vw, 1.3125rem);    /* 19 → 21 */
  --fs-lg:   clamp(1.375rem,  1.24rem + 0.60vw, 1.625rem);     /* 22 → 26 */
  --fs-xl:   clamp(1.625rem,  1.38rem + 1.09vw, 2.0625rem);    /* 26 → 33 */
  --fs-2xl:  clamp(2rem,      1.66rem + 1.52vw, 2.5625rem);    /* 32 → 41 */
  --fs-3xl:  clamp(2.375rem,  1.87rem + 2.26vw, 3.1875rem);    /* 38 → 51 */
  --fs-4xl:  clamp(2.625rem,  1.80rem + 3.67vw, 4rem);         /* 42 → 64 */

  /* --- Spacing --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* --- Structure --- */
  /* Roughly how tall the sticky header is. Used to push in-page anchor
     targets clear of it, so a jump to #how does not land underneath the bar.
     Mobile is taller because the header wraps onto two rows. */
  --header-h: 116px;

  --wrap: 1200px;
  --measure: 68ch;
  --radius: 2px;                 /* barely-rounded; established, not startup-y */
  --section-y: clamp(3.5rem, 8vw, 8rem);   /* 56px mobile → 128px desktop */
  --tap: 44px;                   /* minimum tap target */

  /* --- Motion --- */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;
  --reveal-duration: 400ms;
}


/* 03 RESET ================================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Anything that can be jumped to by a link stops below the sticky header
   instead of behind it. Covers #main (skip link) and #how (home page). */
:target,
main[id],
section[id] {
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }

img, svg { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--signal-lit); }

/* Visible focus everywhere. Never removed, only restyled. */
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}

/* On dark surfaces --signal is only 2.13:1, so the focus ring switches to
   white to stay above the 3:1 non-text contrast minimum. */
.band--signal :focus-visible,
.site-footer :focus-visible,
.section--ink :focus-visible {
  outline-color: var(--paper);
}

::selection { background: var(--signal); color: var(--paper); }


/* 04 BASE TYPOGRAPHY ====================================================== */

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); line-height: 1.2; letter-spacing: -0.01em; }
h4 { font-size: var(--fs-md); line-height: 1.25; letter-spacing: -0.01em; }

p + p { margin-top: var(--space-4); }

.lead {
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--muted);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--space-4);
}

/* One accent rule per section, maximum. */
.rule-accent {
  width: 56px;
  height: 3px;
  background: var(--signal);
  border: 0;
  margin: var(--space-5) 0;
}

.text-muted { color: var(--muted); }
.text-sm { font-size: var(--fs-sm); }

/* Available to screen readers, invisible on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 900px) {
  body { font-size: 1.125rem; }   /* 18px */
}


/* 05 LAYOUT =============================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 900px) {
  .wrap { padding-inline: var(--space-7); }
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--warm { background: var(--paper-warm); }
.section--ink { background: var(--ink); color: var(--paper); }

.section--ink h1,
.section--ink h2,
.section--ink h3 { color: var(--paper); }

.section--ink .lead,
.section--ink .text-muted { color: #C9C7C3; }   /* 11.4:1 on --ink */

/* The darker red is nearly invisible on near-black, so the accent rule
   switches to the lighter variant on dark surfaces. */
.section--ink .rule-accent { background: var(--signal-lit); }

.measure { max-width: var(--measure); }

/* Narrow text column.
   Do NOT put .measure directly on .wrap — .measure's max-width overrides the
   1200px container and .wrap's `margin-inline: auto` then centres the narrow
   column in the viewport, so it no longer lines up with headings elsewhere.
   Use .wrap--narrow instead: the container keeps its width and centring, and
   the children are what get capped. */
.wrap--narrow > * { max-width: var(--measure); }

.section-head { margin-bottom: var(--space-7); }

.stack > * + * { margin-top: var(--space-4); }

/* Skip link — first focusable element on every page. */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-3) var(--space-5);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--t-fast);
}
.skip-link:focus {
  top: var(--space-4);
  color: var(--paper);
}


/* 06 COMPONENTS =========================================================== */

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--t-base), border-color var(--t-base), color var(--t-base);
}

.btn--primary {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--paper);
}
.btn--primary:hover {
  background: var(--signal-lit);
  border-color: var(--signal-lit);
  color: var(--paper);
}

.btn--ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
}

/* For use inside the red band and other dark surfaces. */
.btn--invert {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--signal);
}
.btn--invert:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.btn--block { width: 100%; }

.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Text link that behaves like a secondary CTA. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}
.link-arrow:hover { color: var(--signal); }
.link-arrow svg { flex: none; }

/* --- Header + nav -------------------------------------------------------
   With JavaScript OFF the nav list is always visible and the toggle button
   stays hidden (it ships with the `hidden` attribute; main.js removes it).
   Nothing is ever a dead control. */

/* Sticky, so the Apply Now button is reachable from anywhere on the page.
   `sticky` rather than `fixed` on purpose: the header stays in normal flow, so
   nothing below it needs a compensating top padding and there is no layout
   shift on load. The shadow separates it from content scrolling underneath —
   the 1px rule alone disappears against white sections. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 2px 8px rgba(10, 10, 10, 0.05);
}

.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 72px;
  padding-block: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--ink);
}
.brand img { width: 190px; height: auto; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle[hidden] { display: none; }
.nav-toggle:hover { background: var(--paper-warm); }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* On mobile the nav wraps onto its own full-width row beneath the bar. */
.nav {
  order: 3;
  flex-basis: 100%;
}

.nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--space-3) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.nav a:hover { color: var(--signal); }

.nav a[aria-current="page"] {
  color: var(--signal);
  box-shadow: inset 3px 0 0 var(--signal);
  padding-left: var(--space-3);
}

/* Collapsed state applies only once JS has enhanced the header. */
.site-header[data-nav="enhanced"] .nav { display: none; }

/* Now that the header is pinned, an open menu has to be able to scroll on its
   own. Without the cap, a long menu on a short phone would push its last items
   below the fold with no way to reach them. */
.site-header[data-nav="enhanced"] .nav.is-open {
  display: block;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (min-width: 900px) {
  /* One row from here up, so the sticky header is shorter. */
  :root { --header-h: 84px; }

  .site-header__bar { min-height: 84px; flex-wrap: nowrap; }

  .nav {
    order: 0;
    flex-basis: auto;
    margin-left: auto;
  }

  .nav ul {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    border-top: 0;
  }
  .nav a {
    min-height: auto;
    padding: var(--space-2) 0;
    border-bottom: 2px solid transparent;
  }
  .nav a[aria-current="page"] {
    box-shadow: none;
    padding-left: 0;
    border-bottom-color: var(--signal);
  }
  /* Desktop always shows the nav, even with the enhanced attribute set. */
  .site-header[data-nav="enhanced"] .nav { display: block; }
  .nav-toggle,
  .site-header[data-nav="enhanced"] .nav-toggle { display: none; }
}

/* --- Cards -------------------------------------------------------------- */

.card {
  padding: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.card__icon { color: var(--signal); margin-bottom: var(--space-4); }
.card__icon svg { width: 40px; height: 40px; }
.card h3 { margin-bottom: var(--space-3); }
.card p { color: var(--muted); }

.grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid { gap: var(--space-6); }
}

/* --- Provider lineup ---------------------------------------------------- */

.provider-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

/* Every cell is the same size. `aspect-ratio` rather than a min-height, so a
   tall logo cannot stretch its row and leave neighbouring rows shorter. 3:2
   is a compromise: the lineup mixes square "authorized dealer" badges with
   wordmarks as wide as 5.6:1, and this shape gives both room. */
.provider-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: var(--space-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
}

/* The logos are supplied at whatever shape the brand uses, so each one is
   scaled to fit inside its cell rather than filled to it. object-fit: contain
   plus auto width/height means nothing is ever cropped or squashed. The
   provider name lives in each image's alt text, which is what a screen reader
   announces and what shows if an image fails to load. */
.provider-grid img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (min-width: 640px) { .provider-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .provider-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }

/* --- Steps -------------------------------------------------------------- */

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: var(--space-6);
}

.steps li {
  counter-increment: step;
  padding-top: var(--space-4);
  border-top: 3px solid var(--ink);
}

.steps li::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--signal);
  margin-bottom: var(--space-3);
}

.steps h3 { margin-bottom: var(--space-2); }
.steps p { color: var(--muted); font-size: var(--fs-sm); }

@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
}

/* --- Signature red band ------------------------------------------------- */

.band--signal {
  background: var(--signal);
  color: var(--paper);
  padding-block: var(--section-y);
}
.band--signal h2 { color: var(--paper); max-width: 22ch; }
.band--signal p { color: #F2DCDC; }   /* 6.6:1 on --signal */
.band__inner { display: grid; gap: var(--space-6); }

@media (min-width: 900px) {
  .band__inner {
    grid-template-columns: 1.6fr auto;
    align-items: center;
    gap: var(--space-8);
  }
}

/* --- Stats strip -------------------------------------------------------- */

.stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.stats li { border-top: 1px solid var(--rule); padding-top: var(--space-4); }

.stats b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.stats span {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.section--ink .stats li { border-top-color: #3A3A3A; }
.section--ink .stats span { color: #C9C7C3; }

@media (min-width: 640px) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* --- FAQ (native <details>, no JS) -------------------------------------- */

.faq { border-top: 1px solid var(--rule); }

.faq details { border-bottom: 1px solid var(--rule); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap);
  padding-block: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  flex: none;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--signal);
}
.faq details[open] summary::after { content: "\2212"; }   /* minus */

.faq details > *:not(summary) {
  padding-bottom: var(--space-5);
  color: var(--muted);
  max-width: var(--measure);
}

/* --- Fit / not-a-fit lists ---------------------------------------------- */

.check-list { list-style: none; display: grid; gap: var(--space-3); }
.check-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-3);
  align-items: start;
}
.check-list svg { width: 20px; height: 20px; margin-top: 4px; flex: none; }
.check-list--yes svg { color: var(--signal); }
.check-list--no svg { color: var(--muted); }

/* --- Form fields --------------------------------------------------------
   Borders use --border-strong, not --rule: an interactive control's border
   must clear 3:1 against its background (WCAG 2.1 SC 1.4.11). */

/* Apply page. The form is the point of the page, so the intro above it is
   compressed to get the required fields as high on the first screen as
   possible. */
.form-intro { margin-bottom: var(--space-5); }
.form-intro h1 { margin-bottom: var(--space-3); }

.form { max-width: 34rem; }

.field { margin-bottom: var(--space-5); }

.field > label,
.fieldset > legend {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.req { color: var(--signal); font-weight: 700; }
.opt { color: var(--muted); font-weight: 400; letter-spacing: 0; }

.hint {
  margin-top: calc(var(--space-2) * -1 + 2px);
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.input:hover, .select:hover, .textarea:hover { border-color: var(--ink); }

.input:focus, .select:focus, .textarea:focus {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.textarea { min-height: 8rem; resize: vertical; }

/* Addresses need more than one line but nowhere near a full message box. */
.textarea--short { min-height: 4.5rem; }

.select {
  appearance: none;
  padding-right: var(--space-8);
  /* Hand-written chevron, inlined so no extra request and no icon library. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235A5A5A' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 16px;
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--signal);
  box-shadow: inset 0 0 0 1px var(--signal);
}

.error {
  display: none;
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--signal);
}
.error.is-shown { display: block; }

.fieldset {
  margin: 0 0 var(--space-5);
  padding: 0;
  border: 0;
}

.choices { display: grid; gap: var(--space-1); }
@media (min-width: 640px) { .choices--2col { grid-template-columns: repeat(2, 1fr); } }

.choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  min-height: var(--tap);
  padding-block: var(--space-2);
  cursor: pointer;
}

.choice input {
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--signal);
  flex: none;
}

.form-divider {
  margin: var(--space-7) 0 var(--space-5);
  padding-top: var(--space-5);
  border-top: 3px solid var(--ink);
}

/* Honeypot. The WRAPPER is hidden, never the input itself — bots that check
   for display:none on the field will still fill it in. */
.hp-wrap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  display: none;
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-left: 3px solid var(--signal);
  background: var(--paper-warm);
  font-size: var(--fs-sm);
}
.form-status.is-shown { display: block; }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: #C9C7C3;
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--fs-sm);
}

.site-footer__grid { display: grid; gap: var(--space-7); }

.site-footer h2 {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: var(--space-4);
}

.site-footer a { color: var(--paper); text-decoration: none; }
.site-footer a:hover { color: var(--paper); text-decoration: underline; }

.site-footer ul { list-style: none; display: grid; gap: var(--space-3); }

.site-footer__brand img { width: 200px; }

.site-footer__legal {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid #3A3A3A;
  font-size: var(--fs-xs);
}

@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1.4fr; }
  .site-footer__brand { grid-column: auto; }
}


/* 07 PAGE-SPECIFIC ======================================================== */

.hero { padding-block: var(--space-8) var(--section-y); }
/* 20ch rather than 16ch: the headline now names five product lines, and a
   tighter cap pushed it to four ragged lines on desktop. */
.hero h1 { font-size: var(--fs-4xl); max-width: 20ch; }
.hero .lead { margin-top: var(--space-5); max-width: 54ch; }

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Hero split. Copy first in the DOM so that on a phone the headline and the
   Apply button come before the images, keeping the CTA high on the screen. */
.hero__grid { display: grid; gap: var(--space-7); }

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--space-8);
  }
}

/* --- Slideshow -----------------------------------------------------------
   The first slide carries .is-active in the HTML, not from JavaScript. If JS
   never runs the visitor still sees a picture instead of an empty frame.
   Every image is pre-cropped to 16:9 so nothing shifts as slides change. */

.slideshow {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-warm);
}

.slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
}
.slideshow__slide.is-active { opacity: 1; }

.slideshow__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dots are built by main.js, so no dead controls appear without JavaScript. */
.slideshow__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.slideshow__dot {
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
}

/* The visible dot is smaller than its 44px tap target. */
.slideshow__dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rule);
  border: 1px solid var(--muted);
  transition: background-color var(--t-base);
}
.slideshow__dot:hover::before { background: var(--muted); }
.slideshow__dot[aria-current="true"]::before {
  background: var(--signal);
  border-color: var(--signal);
}

@media (min-width: 640px) {
  .hero__actions { flex-direction: row; align-items: center; gap: var(--space-6); }
}
@media (min-width: 900px) {
  .hero { padding-block: var(--space-9) var(--section-y); }
}


/* 08 MOTION =============================================================== */

/* The .reveal class is added by main.js, never written into the HTML.
   If it were in the markup, users with JavaScript disabled would get a
   permanently invisible page. */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

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