/* Shared chrome — appears on every page
 * Mandatory POVA elements: wordmark top-center, vertical ticker left edge,
 * corner "+" registration marks all four corners, composition number. */

/* The field — the black canvas that paints behind everything.
 * Halo is a soft radial that follows the cursor and tints toward the
 * hovered product's signal color. Stays subtle; field reads black always. */
.field {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    /* cursor-driven signal halo — strongest layer */
    radial-gradient(
      circle 1100px at var(--field-halo-x) var(--field-halo-y),
      color-mix(in oklab, var(--field-halo-color) calc(var(--field-halo-strength) * 100%), transparent) 0%,
      color-mix(in oklab, var(--field-halo-color) calc(var(--field-halo-strength) * 30%), transparent) 30%,
      transparent 65%
    ),
    /* base black field with soft top vignette */
    radial-gradient(
      ellipse 1700px 1200px at 50% 30%,
      var(--field-base) 0%,
      var(--field-edge) 80%
    );
  transition:
    --field-halo-color var(--t-slow) var(--ease-out),
    --field-halo-strength var(--t-med) var(--ease-out);
}

/* Engineering grid overlay — tight CAD-style lines on the field.
 * Minor 40px squares, major 160px. Sits ABOVE the field gradient but
 * BELOW page content so the halo still shows through. */
.field::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    /* major vertical lines every 160px */
    linear-gradient(to right, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    /* major horizontal lines every 160px */
    linear-gradient(to bottom, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    /* minor vertical lines every 40px */
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    /* minor horizontal lines every 40px */
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size:
    160px 160px,
    160px 160px,
    40px 40px,
    40px 40px;
  /* No mask — grid runs full-bleed. User reference shows grid visible
   * across the entire canvas. Earlier vignette was hiding it. */
  z-index: 1;
}

/* Wordmark — the real POVA logo image, flat white via filter.
 * Per brand book: "Top-center position preferred; fixed size regardless of
 * canvas size — never scales with the canvas." Uses the proprietary
 * POVA letterforms (custom typeface) — never typeset. */
.wordmark {
  position: fixed;
  /* Top chrome row uses 44px-tall pills (cart at top:24px → midline 46;
   * hamburger at top:24px → midline 46). Wordmark image is 22px tall,
   * so top: 35 puts its midline at 46 — flush with the pills. */
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  user-select: none;
  pointer-events: auto;
}
.wordmark img {
  /* Convert chrome 3D logo to flat white for top-of-page mark */
  filter: brightness(0) invert(1);
  height: 22px;
  width: auto;
  display: block;
}
/* The wordmark SVG already includes the [R] mark in the artwork — no
 * pseudo-element ® needed. Removing this avoids the double trademark. */

/* Vertical ticker — left edge. Each page sets its own static identity string
 * in HTML (e.g. "00 / FIELD / 2026", "A1 / ABOUT / DESIGNED AND BUILT TO TOLERANCE"),
 * which field.js captures on load and restores on disengage. On hover, streams
 * the live product campaign tagline. Orange, max 60% opacity. */
.ticker {
  /* Native vertical text — writing-mode handles glyph rotation and the
   * element's box stays in the normal flow box model, so flexbox-style
   * centering works without transform math. The track grows symmetrically
   * around the viewport midline and clips with ellipsis when too long. */
  position: fixed;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  writing-mode: sideways-lr;
  z-index: 90;
  max-height: 80vh;
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--pova-orange);
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out);
}
.ticker::before {
  content: "+ ";
  margin-right: 6px;
  opacity: 0.7;
}
.ticker[data-streaming="true"] {
  opacity: 0.75;
}

/* Composition number — top-right, mono, "01 / 06" style.
 * Doubles as the currency / index marker. Mid-line aligned with the
 * cart pill and hamburger button (both 44px tall starting at top:24).
 * Comp-number is ~17px tall, so top: 38 puts midline at ~46. */
.comp-number {
  position: fixed;
  top: 38px;
  right: 32px;
  z-index: 100;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);
  letter-spacing: 0.3em;
  color: var(--pova-white);
  opacity: 0.7;
  user-select: none;
}
.comp-number .dim { opacity: 0.45; }

/* Corner "+" registration marks — non-negotiable on every layout.
 * Fixed-size, low-opacity white. */
.reg-marks {
  position: fixed;
  inset: 24px;
  z-index: 80;
  pointer-events: none;
}
.reg-marks::before,
.reg-marks::after,
.reg-marks span::before,
.reg-marks span::after {
  content: "+";
  position: absolute;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--pova-white);
  opacity: 0.35;
  line-height: 1;
}
.reg-marks::before { top: 0; left: 0; }
.reg-marks::after { top: 0; right: 0; }
.reg-marks span::before { bottom: 0; left: 0; }
.reg-marks span::after { bottom: 0; right: 0; }

/* Glass primitive — used for every floating UI surface.
 * Low-opacity charcoal + heavy backdrop blur + inner top-edge highlight
 * + thin outer stroke. Brutalist, not soft. */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--glass-radius);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),                    /* top inner highlight */
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),                       /* bottom inner shadow */
    0 16px 40px rgba(0, 0, 0, 0.5);                          /* lift off the field */
  position: relative;
  isolation: isolate;          /* keep child blend modes from breaking backdrop */
}

/* Fallback for browsers without backdrop-filter — give the glass a
 * solid-but-subtle bg so it still reads as a card. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(15, 15, 17, 0.85); }
}

/* Glass card "+" registration marks — every glass surface gets the four
 * corner marks. Smaller, tighter than the page-frame ones. */
.glass--reg::before,
.glass--reg::after,
.glass--reg > .glass-corners::before,
.glass--reg > .glass-corners::after {
  content: "+";
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--pova-white);
  opacity: 0.4;
  line-height: 1;
  pointer-events: none;
}
.glass--reg::before { top: 5px; left: 5px; }
.glass--reg::after { top: 5px; right: 5px; }
.glass--reg > .glass-corners::before { bottom: 5px; left: 5px; }
.glass--reg > .glass-corners::after { bottom: 5px; right: 5px; }

/* Glass pill — short rounded pill for the cart counter, status flags etc. */
.glass-pill {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-stroke);
  border-radius: var(--glass-radius-pill);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pova-white);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Glass nav pill — top-left, holds the 0+ cart counter. (Cart link
 * still routes to /shop#cart since checkout is third-party; the
 * counter remains as a chrome element.) */
.nav-pill {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-pill .pill-link {
  padding: 10px 20px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--pova-white);
}
.nav-pill .cart {
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.2em;
}
.nav-pill .cart .count { color: var(--pova-orange); }

/* Status flag — (R) ready / (N) new / (P) pre-order */
.flag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pova-orange);
  opacity: 0.85;
}
.flag::before { content: "("; opacity: 0.5; margin-right: 1px; }
.flag::after { content: ")"; opacity: 0.5; margin-left: 1px; }

/* Bracketed mono label, e.g. [ STORM ] or [ ₹INR ] */
.bracket {
  font-family: var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.bracket::before { content: "[ "; opacity: 0.5; }
.bracket::after { content: " ]"; opacity: 0.5; }

/* Breakpoints */
@media (max-width: 900px) {
  .reg-marks { inset: 16px; }
  .ticker { left: 16px; font-size: var(--fs-mono-xs); }
  /* Wordmark + comp-number alignment is handled by base + min-width:601
   * + max-width:600 rules — no overrides needed at this breakpoint. */
}
@media (max-width: 600px) {
  /* Ticker stays visible on mobile — left-edge vertical brand line.
   * Constrain so the rotated text never extends past the left edge. */
  .ticker {
    left: 6px;
    font-size: 9px;
    max-height: 60vh;
    /* Lock the rotated box width so writing-mode geometry can't push
     * its content past the viewport edge. */
    max-width: 14px;
    overflow: hidden;
  }
  /* Nav row — cart pill + hamburger sit at top-left. About pill is
   * hidden on mobile (its content moves into the hamburger drawer
   * injected by motion.js). Compact sizing keeps a safe gap from
   * the centred wordmark on a 380px viewport. */
  .nav-pill { left: 12px; top: 14px; gap: 6px; }
  .nav-pill .cart {
    padding: 10px 12px;
    min-height: 44px;
    min-width: 44px;
    gap: 4px;
    letter-spacing: 0.15em;
    font-size: var(--fs-mono-xs);
  }
  /* Drop the "CART" word on small screens — count + plus stays. */
  .nav-pill .cart > span:nth-child(3) { display: none; }
  /* About pill is replaced by the hamburger on mobile. */
  .nav-pill .pill-link { display: none; }
  /* Hamburger lives top-RIGHT (standalone), not inside the nav-pill.
   * Cart pill stays top-left. */
  .hamburger-btn {
    position: fixed;
    top: 14px;
    right: 12px;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
  }
  .nav-pill .hamburger { display: none; }  /* old in-pill version off */
  .hamburger-btn .bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 18px;
  }
  .hamburger-btn .bars span {
    display: block;
    height: 1.5px;
    background: var(--pova-white);
    border-radius: 1px;
    transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
  }
  body.nav-open .hamburger-btn .bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  body.nav-open .hamburger-btn .bars span:nth-child(2) { opacity: 0; }
  body.nav-open .hamburger-btn .bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .nav-pill .hamburger .bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 18px;
  }
  .nav-pill .hamburger .bars span {
    display: block;
    height: 1.5px;
    background: var(--pova-white);
    border-radius: 1px;
    transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
  }
  /* Open state: bars morph to an × */
  body.nav-open .nav-pill .hamburger .bars span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
  }
  body.nav-open .nav-pill .hamburger .bars span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-pill .hamburger .bars span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
  }

  /* Wordmark — vertically centred with the nav-pill row. The pills
   * are 44px tall starting at top:14px → centre y = 36. The wordmark
   * image at height 22 needs top such that its centre lines up:
   *   centre y = top + 11 = 36  →  top = 25. */
  .wordmark { top: 25px; }
  .wordmark img { height: 22px; }
  /* Comp number — top-right, sits to the LEFT of the hamburger.
   * Hamburger is at right:12 width:44 → comp number ends before that
   * with a small gap. */
  .comp-number {
    top: 26px;
    right: 70px;
    bottom: auto;
    left: auto;
    font-size: 10px;
    opacity: 0.6;
    max-width: 80px;
    white-space: nowrap;
  }
}

/* Hamburger button — visible on every viewport. Sits top-right, glass
 * styling, mirrors the cart-pill height. The drawer it opens (handled
 * by motion.js) carries the full nav, so the standalone About pill
 * is hidden on desktop too — the drawer is the canonical menu. */
.hamburger-btn {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
}
.hamburger-btn .bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}
.hamburger-btn .bars span {
  display: block;
  height: 1.5px;
  background: var(--pova-white);
  border-radius: 1px;
  transition: transform var(--t-fast) var(--ease-out),
              opacity var(--t-fast) var(--ease-out);
}
body.nav-open .hamburger-btn .bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.nav-open .hamburger-btn .bars span:nth-child(2) { opacity: 0; }
body.nav-open .hamburger-btn .bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Standalone About pill is redundant when the hamburger drawer carries
 * the full menu — hide it on every viewport. The cart pill still
 * occupies the top-left slot on its own. */
.nav-pill .pill-link { display: none; }

/* Desktop chrome row geometry — comp number sits LEFT of the hamburger,
 * the cart pill stays top-left. All four anchors share the same vertical
 * eye-line: cart at 24px, wordmark at 28px (image height-22 → centre 39),
 * comp number centred against the row, hamburger at 24px right:24px. */
@media (min-width: 601px) {
  .nav-pill { top: 24px; left: 24px; gap: 8px; }
  .nav-pill .cart { padding: 10px 14px; min-height: 44px; }
  /* Mid-line align: cart 44px starts at 24 → midline 46. Comp-number
   * is ~14px tall at this size, so top: 39 puts midline at 46. */
  .comp-number {
    top: 39px;
    right: 84px;
    bottom: auto;
    left: auto;
    font-size: var(--fs-mono-sm);
    letter-spacing: 0.25em;
  }
}

/* Backdrop — sits BEHIND the drawer, fades in when nav opens, fills
 * the rest of the viewport, and clicks-through to close. Catches the
 * "click outside to dismiss" gesture and gives a clear visual that the
 * page is dimmed but still there. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out);
}
body.nav-open .nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Hamburger drawer — side panel sliding in from the right. Mobile
 * gets a near-full-bleed sheet (90% width); desktop caps at 460 px so
 * the page behind stays partially visible. Backdrop handles dismiss. */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 90%;
  max-width: 460px;
  z-index: 200;
  background: rgba(8, 8, 10, 0.96);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  padding: 100px 32px 48px;
  transform: translateX(100%);
  transition: transform var(--t-med) var(--ease-out);
  pointer-events: none;
  visibility: hidden;
  box-shadow: -24px 0 48px rgba(0, 0, 0, 0.55);
}
body.nav-open .nav-drawer {
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
}

/* Close button inside the drawer — visible X at the top-right of the
 * panel itself (different anchor than the hamburger trigger which sits
 * in the page chrome). Always-visible escape hatch. */
.nav-drawer-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: var(--pova-white);
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.nav-drawer-close:hover {
  border-color: var(--pova-orange);
  background: rgba(255, 93, 1, 0.06);
}
.nav-drawer-close::before {
  content: "×";
  font-size: 22px;
  line-height: 1;
}
.nav-drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.nav-drawer a {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: var(--pova-white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.nav-drawer a::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 1.5px;
  background: var(--pova-orange);
  transition: width var(--t-fast) var(--ease-out);
}
.nav-drawer a:hover::before,
.nav-drawer a:focus-visible::before { width: 24px; }
.nav-drawer .meta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pova-white);
  opacity: 0.45;
}
@media (max-width: 420px) {
  .reg-marks { inset: 10px; font-size: 12px; }
  :root { --fs-mono-xs: 11px; }
}

/* ============================================================
 * FOOTER — shared across product, about, and other content pages.
 * Per brand book: 4-column information grid (About POVA / Quick Links /
 * Help & Support / Legal) + email subscribe + tagline + chrome wordmark.
 * No orange in the footer — typography and spacing carry it.
 * Pages with fixed bottom UI (buy bar) override .footer margin-bottom.
 * ============================================================ */
.footer {
  position: relative;
  z-index: 4;
  padding: 80px var(--safe-desktop) 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  color: var(--pova-white);
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.footer-top, .footer-mid {
  display: grid;
  gap: 40px 32px;
}
.footer-top {
  grid-template-columns: 1fr 2fr 1fr;
  align-items: start;
}
.footer-mid {
  grid-template-columns: repeat(4, 1fr);
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pova-white);
  opacity: 1;
  margin: 0 0 18px;
  /* Small orange "+" anchor distinguishes a column heading from the
   * clickable items below it. The titles were sitting at opacity 0.55
   * which made them read *less* prominent than the links — inverted
   * hierarchy. Bumped to weight 700, full opacity, with an inline mark
   * the eye reads as "this is a section label, not a link." */
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.footer-col h4::before {
  content: "+";
  color: var(--pova-orange);
  font-weight: 500;
  opacity: 0.9;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col li, .footer-col a {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pova-white);
  opacity: 0.6;
  transition: opacity 160ms ease;
}
.footer-col a:hover { opacity: 1; }
.footer-products-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.footer-slogan h4 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--pova-white);
  opacity: 1;
  text-transform: none;
  margin: 0;
}
.footer-subscribe form.subscribe {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding: 6px 0;
  max-width: 380px;
}
.footer-subscribe input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--pova-white);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.2em;
  padding: 10px 0;
}
.footer-subscribe input::placeholder { color: rgba(255, 255, 255, 0.4); }
.footer-subscribe button {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: var(--pova-white);
  font-size: 22px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--t-fast);
}
.footer-subscribe button:hover { opacity: 1; }
.footer-subscribe .sub-ack {
  position: absolute;
  bottom: -22px;
  left: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.2em;
  color: var(--pova-orange);
  opacity: 0;
  transition: opacity var(--t-fast);
}
/* Chrome-3D wordmark — transparent PNG; fills the footer base. The
 * wordmark breaks OUT of the footer's content box (which has
 * asymmetric padding on mobile to keep column copy clear of the
 * rotated ticker rail) by negating the parent's exact padding values
 * with negative margins. The img then has equal gutters from the
 * viewport edge — the giant POVA reads as horizontally centered on
 * every screen. */
/* Doctrinal closer — single line above the giant chrome wordmark.
 * Per POVA Doctrine §3.3: "A Radically Original Composition." is
 * preserved as the closer of every product brochure across the line.
 * Mirroring that in the website footer so every page signs off with
 * the same line before the wordmark. Brand-tier voice — display
 * weight, sub-tagline scale, low contrast so it doesn't out-shout
 * the wordmark beneath it. */
.footer-closer {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--pova-white);
  opacity: 0.85;
}
.footer-closer em {
  font-style: italic;
  color: var(--pova-orange);
  opacity: 0.85;
}
@media (max-width: 600px) {
  .footer-closer {
    margin-top: 24px;
    padding-top: 24px;
    font-size: 18px;
    letter-spacing: 0;
  }
}

/* Trust ribbon — service credentials band. Reused under the about
 * hero and inside the homepage stage just above .hero-copy. Defined
 * in chrome.css so every page that loads chrome (incl. index, which
 * doesn't pull about.css) gets the same band. */
.trust-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  margin: 0 auto 80px;
  max-width: 1100px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pova-white);
  opacity: 0.55;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.trust-ribbon__sep { opacity: 0.4; }
.trust-ribbon__item { white-space: nowrap; }
@media (max-width: 600px) {
  .trust-ribbon { gap: 8px 14px; padding: 14px 16px; font-size: 9px; letter-spacing: 0.25em; }
  .trust-ribbon__sep { display: none; }
}

/* On the homepage, the ribbon sits inside the .stage element above
 * .hero-copy. The stage is a fixed-viewport composition; pin the
 * ribbon to the bottom centre so it reads as the proof anchor of
 * the first frame without disrupting instrument layout. */
.home .stage .trust-ribbon {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  margin: 0;
  width: calc(100% - 48px);
  max-width: 980px;
  z-index: 6;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 700px) {
  .home .stage .trust-ribbon { bottom: 96px; }
}

/* Per-page closer line — small mono signature replacing the deck-y
 * "A radically original composition." Each page gets a different
 * line that earns its space (provenance, scale, service). */
.footer-closer-line {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  color: var(--pova-white);
  opacity: 0.4;
}
@media (max-width: 600px) {
  .footer-closer-line {
    font-size: 9px;
    letter-spacing: 0.2em;
  }
}

.footer-wordmark {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  /* Center the metallic wordmark within the footer-inner box.
   * No more negative-margin compensation on mobile (footer is
   * symmetric there now). */
  text-align: center;
}
.footer-wordmark picture {
  display: block;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}
.footer-wordmark img,
.footer .wm img {
  width: 100%;
  max-width: 1320px;
  height: auto;
  margin: 0 auto;
  display: block;
  user-select: none;
  pointer-events: none;
}
@media (max-width: 600px) {
  /* Mobile footer is now symmetric `padding: 56px 24px 32px 24px`.
   * The wordmark wrapper centers naturally inside it — no
   * negative-margin hack required. */
  .footer-wordmark {
    margin-left: 0;
    margin-right: 0;
    padding-inline: 0;
  }
  .footer-wordmark img,
  .footer-wordmark-svg {
    max-width: 100%;
    width: auto;
    max-height: 64px;
  }
}

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-slogan { grid-column: 1 / -1; }
  .footer-mid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  /* Mobile field halo — much smaller radius so a tap doesn't wash the
   * entire viewport with the product accent colour. */
  .field {
    background:
      radial-gradient(
        circle 280px at var(--field-halo-x) var(--field-halo-y),
        color-mix(in oklab, var(--field-halo-color) calc(var(--field-halo-strength) * 100%), transparent) 0%,
        color-mix(in oklab, var(--field-halo-color) calc(var(--field-halo-strength) * 30%), transparent) 30%,
        transparent 65%
      ),
      radial-gradient(
        ellipse 1700px 1200px at 50% 30%,
        var(--field-base) 0%,
        var(--field-edge) 80%
      );
  }
  /* Hard viewport guard. */
  body { max-width: 100vw; overflow-x: hidden; }
  /* Footer — symmetric padding on mobile so the metallic wordmark
   * below centers via the normal box model. The rotated ticker rail
   * is position:fixed (left:16) and never enters footer space, so it
   * doesn't need the extra left gutter the previous asymmetric
   * padding (56px L / 24px R) was guarding against. */
  .footer { padding: 56px 24px 32px 24px; }
  .footer-inner { gap: 48px; }
  /* footer-top stacks vertically — Subscribe leads, Products next, Slogan last. */
  .footer-top {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .footer-subscribe { order: 1; width: 100%; }
  .footer-top > .footer-col:not(.footer-subscribe):not(.footer-slogan) { order: 2; }
  .footer-slogan { order: 3; }
  /* Products list — 2-column grid on mobile (2×2), so "POVA CURVE 02"
   * has its own cell and the four SKUs read as a tight group. */
  .footer-products-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
  }
  /* Subscribe form — input fills full content width, arrow pinned right. */
  .footer-subscribe .subscribe,
  .footer-subscribe form {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    padding: 0;
  }
  .footer-subscribe input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 14px 0;
    color: var(--pova-white);
    font-family: var(--font-body);
    font-size: 14px;
  }
  .footer-subscribe input::placeholder { color: rgba(255, 255, 255, 0.45); }
  .footer-subscribe button {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: var(--pova-orange);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 8px 4px 8px 12px;
  }
  /* footer-mid stays 2-col, breathing room. */
  .footer-mid { grid-template-columns: 1fr 1fr; padding-top: 36px; gap: 36px 24px; }
  /* Section titles — orange accent + tighter caps so they read as
   * headings, not as another row of muted links. */
  .footer-col h4 {
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--pova-orange);
    opacity: 0.78;
    margin-bottom: 16px;
  }
  /* Link items — body-text size, brighter than the muted heading,
   * so the title-vs-links hierarchy is unambiguous. */
  .footer-col li, .footer-col a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.7;
  }
  /* Hide fixed chrome (ticker, cart, about pill, wordmark, comp,
   * reg-marks, back link) when the footer scrolls into view so they
   * stop bleeding through footer copy. Buy-bar stays for commerce.
   * Layout itself is unchanged — just opacity toggles. */
  body.in-footer .ticker,
  body.in-footer .nav-pill,
  body.in-footer .wordmark,
  body.in-footer .comp-number,
  body.in-footer .reg-marks,
  body.in-footer .back-link {
    opacity: 0;
    pointer-events: none;
  }
  .ticker, .nav-pill, .wordmark, .comp-number, .reg-marks, .back-link {
    transition: opacity var(--t-med) var(--ease-out);
  }
}