/* ==========================================================================
   Endurance Co - production stylesheet
   Single source of truth for the design system. Ported from
   260508-test-all-sections.html (the wireframe section library).
   Structure:
     1. Foundations (vars, reset, container, panels, type, buttons, chips)
     2. Header.site (production)
     3. Sections S01-S24 (wireframe section library)
     4. Footer.site (production)
     5. Legacy (deprecated, used only by pages awaiting rebuild)
   No new section types may be added during content work. New patterns
   must land in the wireframe first.
   ========================================================================== */

/* ===== 1. FOUNDATIONS ==================================================== */

:root {
  --navy: #000028;
  --paper: #ffffff;
  --off-white: #f3f5f7;
  --card-bg: #f3f5f7;
  --card-img-bg: #e9eced;
  --red: #f42200;
  --red-dark: #cc1d00;
  --muted: #5f5f6a;
  --line: #d4d4dc;
  --line-soft: #e8e8ee;
  --radius: 12px;
  --pill: 999px;
  --max: 1180px;
  --max-narrow: 880px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--navy);
  background: var(--paper);
  line-height: 1.5;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); text-decoration: none; }

/* CONTAINER */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: var(--max-narrow); margin: 0 auto; padding: 0 32px; }

/* PANELS - single 32px tier per wireframe. Card edges are the visual
   section boundary. Card padding-bottom (24px) is internal breathing
   inside the card, separate from the 32px section padding. */
.panel,
.panel-tight { padding: 32px 0; }
.panel-bg-off { background: var(--off-white); }
.panel-bg-navy { background: var(--navy); color: #fff; }
.panel-bg-navy h1,
.panel-bg-navy h2,
.panel-bg-navy h3,
.panel-bg-navy h4 { color: #fff; }
.panel-bg-navy .copy,
.panel-bg-navy .lede { color: rgba(255,255,255,0.7); }

/* Same-bg adjacency collapse - second panel drops top padding so visible
   gap is one panel's worth, not two stacked. Covers every combination of
   bg classes plus default-white panels via :not() rule. Sections with
   their own bg CSS (s-press, s-marquee, s-quote-b, s-quote-c) MUST also
   carry the matching panel-bg-* class for this to fire. */
.panel-bg-off + .panel-bg-off,
.panel-bg-navy + .panel-bg-navy,
.panel:not(.panel-bg-off):not(.panel-bg-navy) + .panel:not(.panel-bg-off):not(.panel-bg-navy),
.panel:not(.panel-bg-off):not(.panel-bg-navy) + .panel-tight:not(.panel-bg-off):not(.panel-bg-navy),
.panel-tight:not(.panel-bg-off):not(.panel-bg-navy) + .panel:not(.panel-bg-off):not(.panel-bg-navy),
.panel-tight:not(.panel-bg-off):not(.panel-bg-navy) + .panel-tight:not(.panel-bg-off):not(.panel-bg-navy) { padding-top: 0; }

@media (max-width: 720px) {
  .panel,
  .panel-tight { padding: 24px 0; }
  .wrap, .wrap-narrow { padding: 0 20px; }
}

/* TYPOGRAPHY */
.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 14px;
  display: block;
}
.eyebrow-light { color: rgba(255,255,255,0.65); }
h1, h2, h3, h4 {
  font-family: inherit;
  margin: 0;
  color: var(--navy);
  font-weight: 700;
}
h1 { font-size: 40px; line-height: 1.15; letter-spacing: -0.022em; margin-bottom: 16px; }
h2 { font-size: 38px; line-height: 1.15; letter-spacing: -0.022em; margin-bottom: 16px; }
h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 10px; }
h4 { font-size: 17px; line-height: 1.3; margin-bottom: 8px; }
.reg, .tm { font-size: 0.62em; vertical-align: super; line-height: 0; }
.lede {
  font-size: 19px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 580px;
  margin-bottom: 24px;
}
.copy {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 16px;
}
.copy:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  h1 { font-size: 30px; }
  h2 { font-size: 26px; }
  .lede { font-size: 17px; }
}

/* SECTION HEAD */
.section-head { max-width: 720px; margin: 0 0 30px; }
.section-head .copy,
.section-head .lede { margin-bottom: 0; }
@media (max-width: 720px) { .section-head { margin: 0 0 22px; } }

/* BUTTONS */
.btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.btn-row:first-child { margin-top: 0; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 26px;
  border-radius: var(--pill);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn-secondary { background: #fff; color: var(--red); border-color: var(--red); }
.btn-secondary:hover { background: var(--red); color: #fff; }
.btn-on-dark { background: #fff; color: var(--navy); border-color: #fff; }
.btn-on-dark:hover { background: rgba(255,255,255,0.88); color: var(--navy); }
.btn-on-dark-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-on-dark-outline:hover { background: #fff; color: var(--navy); border-color: #fff; }
/* Solid white button - for use on imagery/dark surfaces */
.btn-white { background: #fff; color: var(--navy); border-color: #fff; }
.btn-white:hover { background: rgba(255,255,255,0.88); color: var(--navy); border-color: rgba(255,255,255,0.88); }
/* White button with thin black outline - for light-surface secondary actions */
.btn-outline { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* CTA ARROW (inline text link with fixed arrow affordance)
   Used for product/browse destinations. No underline — distinguished by red colour,
   weight 700, and the trailing arrow. The ::after supplies the arrow glyph.
   Usage: <span class="cta-arrow">Compare</span> inside a parent <a class="card">.
   No .cta-arrow-label wrapper needed or used. */
.cta-arrow { display:inline; font-size:13px; font-weight:700; color:var(--red); letter-spacing:0.01em; text-transform:none; text-decoration:none; }
.cta-arrow::after { content:"\00a0\2192"; text-decoration:none; }

/* APP BADGES - global utility, section-agnostic. Use anywhere a row of
   platform-store badges replaces the standard .btn-row. Each child is
   <a class="app-badge"> wrapping a single 40px SVG badge image. */
.app-badges {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 24px;
}
.app-badges:first-child { margin-top: 0; }
.app-badge { display: inline-flex; align-items: center; }
.app-badge img { height: 40px; width: auto; display: block; }

/* IMAGE PLACEHOLDER - global utility, section-agnostic. Renders a visible,
   numbered stand-in for any image slot that has no real asset yet, so gaps are
   trivially identifiable ("that's IMG-014"). Fills its container edge-to-edge at
   any aspect ratio (hero, 16:10 segment, 3:4 tile, 1:1 bento). No border (no-lines
   rule); uses the shared --card-img-bg neutral grey. Drop it INSIDE the existing
   image wrapper (.card-img, .img, .seg-img, .cell.image, .portrait, etc.) so it
   inherits that slot's aspect-ratio and radius.
   Reference is a data attribute (drives CSS content, keeps markup single-element,
   greppable in the DOM). Subject/spec is a second data attribute.
   Usage: <div class="img-placeholder" data-ref="IMG-014"
             data-subject="Government sector · 1180×740 · WebP"></div> */
.img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: var(--card-img-bg);
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  gap: 6px;
  color: var(--navy);
  overflow: hidden;
}
.img-placeholder::before {
  content: attr(data-ref);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  font-size: clamp(15px, 2.4vw, 26px);
  letter-spacing: 0.04em;
  color: var(--navy);
}
.img-placeholder::after {
  content: attr(data-subject);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(10px, 1.4vw, 13px);
  line-height: 1.4;
  color: var(--muted);
  max-width: 90%;
}

/* CHIPS */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--pill);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

/* NEW CHIP (pill on dark hero) */
.new-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 16px;
  border-radius: var(--pill);
  border: 1px solid rgba(255,255,255,0.55);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}


/* ===== 2. HEADER (PRODUCTION) ============================================ */

header.site {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 50;
}
header.site .header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}
header.site .header-logo img { height: 19px; width: auto; display: block; }
nav.site { display: flex; gap: 28px; }
nav.site a {
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
}
nav.site a:hover { color: #fff; text-decoration: none; }
nav.site a.is-active { color: #fff; border-bottom-color: var(--red); }
@media (max-width: 720px) { nav.site { display: none; } }


/* ===== 3. SECTIONS S01-S24 (WIREFRAME LIBRARY) =========================== */

/* --- S01 PRODUCT HERO ----------------------------------------------------- */
.s-product-hero {
  background:
    radial-gradient(ellipse at 75% 55%, rgba(60,110,180,0.55) 0%, transparent 60%),
    linear-gradient(180deg, #1a2a58 0%, #0c1838 50%, #04102a 100%);
  color: #fff;
  padding: 75px 0;
  position: relative;
  overflow: hidden;
}
.s-product-hero .wrap {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 32px;
  align-items: center;
}
.s-product-hero .text { max-width: 460px; }
.s-product-hero .img-wrap { display: flex; justify-content: flex-end; }
.s-product-hero .img-wrap img { max-width: 100%; height: auto; }
.s-product-hero h1 { color: #fff; }
.s-product-hero .lede { color: rgba(255,255,255,0.78); margin-bottom: 0; }
.s-product-hero .eyebrow { color: var(--red); }
@media (max-width: 900px) {
  .s-product-hero { padding: 54px 0; }
  .s-product-hero .wrap { grid-template-columns: 1fr; gap: 32px; }
}

/* S01B - product hero, full background image variant */
.s-product-hero.full-bg .wrap { display: block; width: 100%; position: relative; z-index: 2; }
.s-product-hero.full-bg .img-wrap { display: none; }
.s-product-hero.full-bg .text { max-width: 460px; position: relative; z-index: 2; }
.s-product-hero.full-bg img.bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.6;
}
.s-product-hero.full-bg::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,0,40,0.85) 0%, rgba(0,0,40,0.5) 100%);
  z-index: 1;
}

/* --- S02 TEXT HERO -------------------------------------------------------- */
.s-text-hero {
  position: relative;
  background: #04102a;
  color: #fff;
  padding: 75px 0;
  min-height: 380px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.s-text-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,40,0.55) 0%, rgba(0,0,40,0.85) 100%);
  z-index: 1;
}
.s-text-hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.s-text-hero .wrap { position: relative; z-index: 2; width: 100%; }
.s-text-hero h1 { color: #fff; }
.s-text-hero .lede { color: rgba(255,255,255,0.78); max-width: 630px; }
.s-text-hero .text { max-width: 630px; }
@media (max-width: 720px) { .s-text-hero { padding: 54px 0; min-height: 320px; } }

/* --- S03 FEATURED PRODUCT GRID ------------------------------------------- */
.s-featured .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.s-featured .card {
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.s-featured .card:hover { text-decoration: none; }
.s-featured .card-img {
  aspect-ratio: 1/1;
  background: var(--card-img-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.s-featured .card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-featured .card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 4px; }
.s-featured .variant { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #888; font-weight: 600; margin-bottom: 4px; }
.s-featured .name { font-size: 17px; font-weight: 700; color: var(--navy); }
.s-featured .sub { font-size: 13px; color: var(--muted); }
.s-featured .price { font-size: 14px; font-weight: 700; color: var(--navy); margin: 6px 0 0; }
.s-featured .cta-arrow { margin-top: 10px; }
@media (max-width: 1100px) { .s-featured .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .s-featured .grid { grid-template-columns: 1fr; } }

/* --- S03b COLOUR CAROUSEL (scoped to .s-featured, motion exception) ------- */
/* Auto-rotating colour carousel. Approved pattern (Simon-specified).
   Deliberate motion exception: scoped to .s-featured only.
   Honouring prefers-reduced-motion: rotate + fade are disabled; first image shown. */
.s-featured .card-img { position: relative; }
.s-featured .card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
}
.s-featured .card-img img:first-child { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .s-featured .card-img img { transition: opacity 500ms ease; }
}

/* --- S04 DARK SHOWCASE PAIR ---------------------------------------------- */
.s-compare .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.s-compare .card { background: var(--navy); border-radius: var(--radius); overflow: hidden; color: #fff; display: flex; flex-direction: column; text-decoration: none; cursor: pointer; }
.s-compare .card:hover { text-decoration: none; }
.s-compare .img { aspect-ratio: 16/9; background: #1a2a55; overflow: hidden; }
.s-compare .img img { width: 100%; height: 100%; object-fit: cover; }
.s-compare .body { padding: 28px 32px 24px; display: flex; flex-direction: column; gap: 14px; }
.s-compare .eyebrow { color: rgba(255,255,255,0.55); margin: 0; }
.s-compare h3 { color: #fff; margin: 0; font-size: 22px; }
.s-compare .btn { align-self: flex-start; height: 40px; padding: 0 22px; font-size: 13px; }
@media (max-width: 720px) { .s-compare .grid { grid-template-columns: 1fr; } }

/* --- S05 IMAGE TILE GRID (6 portrait) ------------------------------------ */
.s-tiles .grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.s-tiles .tile {
  aspect-ratio: 3/4;
  background: #d8d8d8;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 16px 16px 24px;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}
.s-tiles .tile:hover { text-decoration: none; }
.s-tiles .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.s-tiles .tile .img-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; border-radius: 0; }
.s-tiles .tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,40,0.8) 100%); z-index: 1; }
.s-tiles .tile span { position: relative; z-index: 2; }
@media (max-width: 1100px) { .s-tiles .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .s-tiles .grid { grid-template-columns: repeat(2, 1fr); } }

/* --- S06 IMAGE-TEXT 5/7 (text left, image right) -------------------------
   Wireframe rule: image is contained (not cropped), anchored right-center.
   Used for app / phone-screen / ecosystem shots with alpha transparency. */
.s-imgtext .grid { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: center; }
.s-imgtext .img { aspect-ratio: 1/1; background: var(--card-img-bg); border-radius: var(--radius); overflow: hidden; }
.s-imgtext .img img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
@media (max-width: 900px) { .s-imgtext .grid { grid-template-columns: 1fr; gap: 28px; } }

/* --- S07 STATS WALL ------------------------------------------------------- */
.s-stats .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; align-items: start; }
.s-stats .stat-num { font-size: 32px; font-weight: 700; color: var(--navy); line-height: 1; letter-spacing: -0.02em; }
.s-stats .stat-label { font-size: 12px; color: var(--muted); line-height: 1.4; margin-top: 6px; }
@media (max-width: 900px) { .s-stats .grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (max-width: 540px) { .s-stats .grid { grid-template-columns: repeat(2, 1fr); } }

/* --- S08 NUMBERED CAPABILITIES (3-col) ----------------------------------- */
.s-caps .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.s-caps .num { font-size: 12px; font-weight: 700; color: var(--red); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
.s-caps .copy { font-size: 14px; }
@media (max-width: 800px) { .s-caps .grid { grid-template-columns: 1fr; gap: 22px; } }

/* --- S09 SEGMENT CARDS (alternating image/text 50/50) -------------------- */
.s-segments .seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
  min-height: 320px;
}
.s-segments .seg:last-of-type { margin-bottom: 0; }
.s-segments .seg.reverse .seg-img { order: 2; }
.s-segments .seg-img { background: #d8d8d8; overflow: hidden; }
.s-segments .seg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-segments .seg-text { padding: 36px 42px 24px; display: flex; flex-direction: column; justify-content: flex-start; }
@media (max-width: 900px) {
  .s-segments .seg,
  .s-segments .seg.reverse { grid-template-columns: 1fr; }
  .s-segments .seg.reverse .seg-img { order: 0; }
  .s-segments .seg-img { aspect-ratio: 16/10; }
  .s-segments .seg-text { padding: 28px 24px 24px; }
}

/* --- S10 CTA STRIP -------------------------------------------------------- */
.s-cta .block { max-width: 580px; }

/* --- S11 MARKETS (chip row) ---------------------------------------------- */
.s-markets .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.s-markets .footnote { font-size: 11px; color: var(--muted); margin-top: 14px; }

/* --- S13 BENTO MOSAIC ----------------------------------------------------- */
.s-bento .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 220px 220px;
  gap: 12px;
}
.s-bento .cell {
  background: rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.s-bento .tall { grid-row: span 2; padding: 0; }
.s-bento .wide { grid-column: span 2; }
.s-bento .cell.image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-bento .stat-num { font-size: 56px; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -0.04em; margin-top: auto; }
.s-bento .stat-label { font-size: 12px; color: rgba(255,255,255,0.65); margin-top: 8px; }
.s-bento .quote { font-size: 17px; line-height: 1.35; color: #fff; }
.s-bento .quote-meta { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); font-weight: 700; margin-top: auto; padding-top: 12px; }
@media (max-width: 900px) {
  .s-bento .grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .s-bento .cell { min-height: 200px; }
}
@media (max-width: 540px) {
  .s-bento .grid { grid-template-columns: 1fr; }
  .s-bento .tall,
  .s-bento .wide { grid-row: span 1; grid-column: span 1; }
}

/* --- S14 THREE-PATH NAVIGATOR -------------------------------------------- */
.s-paths .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.s-paths .card { background: var(--card-bg); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; }
.s-paths .card:hover { text-decoration: none; }
.s-paths .img { aspect-ratio: 16/10; background: #d8d8d8; overflow: hidden; }
.s-paths .img img { width: 100%; height: 100%; object-fit: cover; }
.s-paths .body { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 8px; }
.s-paths .name { font-size: 22px; font-weight: 700; color: var(--navy); }
.s-paths .copy { font-size: 14px; }
@media (max-width: 900px) { .s-paths .grid { grid-template-columns: 1fr; } }

/* --- S15 BRAND LOGO MARQUEE ---------------------------------------------- */
.s-marquee { background: var(--off-white); padding: 32px 0; }
/* .marquee-clip lives INSIDE .wrap so it inherits exactly the same content-box
   width, left edge, and right edge as every other .wrap child on the page.
   overflow:hidden clips the scrolling row. transform:translateZ(0) forces this
   element onto its own GPU compositing layer, which makes Chromium/WebKit apply
   the overflow clip to the child's composited layer too -- without this, the
   animated child escapes the overflow boundary on wide viewports. */
.s-marquee .wrap .marquee-clip {
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
}
.s-marquee .row {
  display: flex;
  gap: 56px;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  color: rgba(0,0,40,0.45);
  width: max-content;
  animation: s-marquee-scroll 40s linear infinite;
}
.s-marquee:hover .row { animation-play-state: paused; }
.s-marquee .row span { white-space: nowrap; }
@keyframes s-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .s-marquee .row {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* --- S16 CHANNEL CARDS --------------------------------------------------- */
.s-channels .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.s-channels .card { background: var(--card-bg); border-radius: var(--radius); padding: 28px 32px 24px; }
.s-channels .meta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--red); font-weight: 700; margin-bottom: 14px; }
.s-channels .link {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  border-bottom: 2px solid var(--red);
  padding-bottom: 2px;
  margin-bottom: 12px;
  word-break: break-word;
}
.s-channels .note { font-size: 13px; color: var(--muted); line-height: 1.5; }
@media (max-width: 720px) { .s-channels .grid { grid-template-columns: 1fr; } }

/* --- S17 TWO-COL TEXT ----------------------------------------------------- */
.s-twocol .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.s-twocol .copy { font-size: 16px; }
@media (max-width: 800px) { .s-twocol .grid { grid-template-columns: 1fr; gap: 40px; } }

/* --- S18 SCENARIO LIST --------------------------------------------------- */
.s-scenarios .list { border-top: 1px solid var(--line-soft); }
.s-scenarios .item { border-bottom: 1px solid var(--line-soft); padding: 24px 0; }
.s-scenarios .item:last-child { border-bottom: none; padding-bottom: 0; }
.s-scenarios h4 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.s-scenarios .item .copy { font-size: 15px; margin: 0; }

/* --- S19 TESTIMONIAL (3 variants) ---------------------------------------- */
.s-quote-a .block { max-width: 800px; }
.s-quote-a .mark { font-size: 64px; color: var(--red); line-height: 0.8; font-weight: 700; display: block; }
.s-quote-a .q { font-size: 28px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; color: var(--navy); margin-bottom: 24px; }
.s-quote-a .attr { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; }

.s-quote-b { background: var(--navy); color: #fff; padding: 32px 0; }
.s-quote-b .block { max-width: 800px; }
.s-quote-b .q { font-size: 32px; line-height: 1.25; font-weight: 500; color: #fff; letter-spacing: -0.015em; margin-bottom: 28px; }
.s-quote-b .attr { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.65); font-weight: 700; }
@media (max-width: 720px) { .s-quote-b .q { font-size: 24px; } }

.s-quote-c { background: var(--off-white); }
.s-quote-c .card {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px 36px 24px;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  align-items: center;
  max-width: 900px;
}
.s-quote-c .portrait { width: 140px; height: 140px; border-radius: 50%; background: #d8d8d8; overflow: hidden; flex-shrink: 0; }
.s-quote-c .portrait img { width: 100%; height: 100%; object-fit: cover; }
.s-quote-c .q { font-size: 22px; line-height: 1.4; font-weight: 500; color: var(--navy); letter-spacing: -0.01em; margin-bottom: 16px; }
.s-quote-c .attr { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; }
.s-quote-c .role { font-size: 12px; color: var(--muted); margin-top: 4px; }
@media (max-width: 720px) {
  .s-quote-c .card { grid-template-columns: 1fr; gap: 20px; padding: 28px; }
  .s-quote-c .portrait { margin: 0 auto; }
}

/* --- S20 CONTACT INFO BLOCK ---------------------------------------------- */
.s-contact .card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 36px 40px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.s-contact h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--red); font-weight: 700; margin-bottom: 12px; }
.s-contact p { font-size: 14px; color: var(--muted); margin-bottom: 4px; line-height: 1.55; }
.s-contact strong { color: var(--navy); }
@media (max-width: 720px) { .s-contact .card { grid-template-columns: 1fr; padding: 28px; } }

/* --- S21 FORM ------------------------------------------------------------- */
.s-form .grid { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: start; }
.s-form .card { background: var(--card-bg); border-radius: var(--radius); padding: 28px 32px 24px; display: flex; flex-direction: column; gap: 14px; }
.s-form .field { display: flex; flex-direction: column; gap: 6px; }
.s-form .field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #555; font-weight: 700; }
.s-form .field input,
.s-form .field textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--navy);
}
.s-form .field textarea { min-height: 100px; resize: vertical; }
.s-form .btn-row { margin-top: 8px; }
/* Warranty-claim form additions: select/date/file inherit the input styling,
   plus a checkbox agreement row, field hints, required marker and status line.
   Functional borders only — no shadows/dividers/transitions (site rules). */
.s-form .field select { font-family: inherit; font-size: 14px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--navy); }
.s-form .field input[type="file"] { font-size: 13px; color: var(--muted); }
.s-form .req { color: var(--red); }
.s-form .field .hint { font-size: 12px; color: var(--muted); margin: 0; }
.s-form .field-check { flex-direction: row; align-items: flex-start; gap: 10px; }
.s-form .field-check input { width: auto; margin-top: 3px; flex: none; }
.s-form .field-check label { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; color: var(--navy); }
.s-form .form-status { font-size: 14px; color: var(--navy); margin: 4px 0 0; }
.s-form .form-status.is-error { color: var(--red); }
@media (max-width: 900px) {
  .s-form .grid { grid-template-columns: 1fr; gap: 16px; }
  .s-form .lede { margin-bottom: 0; }
  .s-form .card { padding: 24px; }
}

/* --- S22 PRESS / AWARDS STRIP -------------------------------------------- */
.s-press { background: var(--off-white); padding: 32px 0; }
.s-press .row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; align-items: center; justify-items: center; }
.s-press .item { font-size: 13px; font-weight: 700; color: rgba(0,0,40,0.5); text-align: center; line-height: 1.2; letter-spacing: -0.01em; }
@media (max-width: 900px) { .s-press .row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .s-press .row { grid-template-columns: repeat(2, 1fr); } }

/* --- S23 IMAGE-TEXT 7/5 (image-dominant) --------------------------------- */
.s-imgtext-75 .grid { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: center; }
.s-imgtext-75 .grid.reverse { grid-template-columns: 5fr 7fr; }
.s-imgtext-75 .grid.reverse .img { order: 2; }
.s-imgtext-75 .img { aspect-ratio: 4/3; background: var(--card-img-bg); border-radius: var(--radius); overflow: hidden; }
.s-imgtext-75 .img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .s-imgtext-75 .grid,
  .s-imgtext-75 .grid.reverse { grid-template-columns: 1fr; gap: 28px; }
  .s-imgtext-75 .grid.reverse .img { order: 0; }
}

/* --- S24 VIDEO HERO ------------------------------------------------------- */
.s-video-hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  padding: 75px 0;
  min-height: 380px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.s-video-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.s-video-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,40,0.55) 0%, rgba(0,0,40,0.85) 100%);
  z-index: 1;
}
.s-video-hero .wrap { position: relative; z-index: 2; width: 100%; }
.s-video-hero h1 { color: #fff; }
.s-video-hero .lede { color: rgba(255,255,255,0.78); }
.s-video-hero .text { max-width: 580px; }
@media (max-width: 720px) { .s-video-hero { padding: 54px 0; min-height: 320px; } }


/* ===== 4. FOOTER (PRODUCTION) ============================================ */

footer.site {
  background: var(--navy);
  color: rgba(255,255,255,0.65);
  padding: 48px 0 32px;
}
footer.site a { color: rgba(255,255,255,0.85); text-decoration: none; }
footer.site a:hover { color: var(--red); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-brand img { height: 13.5px; width: auto; display: block; margin-bottom: 18px; }
.footer-brand p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.55); max-width: 280px; }
.footer-brand .footer-legal { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.6; margin-top: 16px; }
.footer-brand .footer-legal p { margin: 4px 0; max-width: 320px; }
.footer-col h5 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  font-weight: 700;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; font-size: 14px; }
/* Single-grid footer: on desktop, lock brand text/legal to the same 31px row pitch as the link-list li items.
   line-height:31px matches the li pitch (21px height + 10px margin-bottom).
   margin-top:-6px on brand p corrects the optical glyph offset (13px font in 31px box vs 14px font in 21px li)
   so distributor text glyphs land within 0.5px of their paired list-row glyphs.
   margin-top:31px on footer-legal skips one clear row above the legal block, aligning the entity line
   with li[3] (the fourth list row). On mobile/tablet these overrides are removed so the block stacks
   cleanly with normal spacing. */
@media (min-width: 801px) {
  .footer-brand p { line-height: 31px; margin-top: -6px; margin-bottom: 0; }
  .footer-brand .footer-legal { line-height: 31px; margin-top: 62px; }
  .footer-brand .footer-legal p { margin: 0; }
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* End of stylesheet. Section library above is the entire design system. */

/* ===== HOMEPAGE ONLY: Audience-gateway hero (.s-gateway-hero) ============
   New rules appended 2026-08. No existing rule modified.
   ========================================================================= */

/* Full-bleed hero fills the viewport between header and footer.
   Solid navy fallback so the page reads correctly while hero-home.webp
   is a placeholder. When the real WebP lands at assets/img/hero-home.webp
   it takes over automatically — no markup change required. */
.s-gateway-hero {
  position: relative;
  background-color: #1a4a86; /* aurora blue base - the flutter fades into this, not white or black */
  background-image: url('img/hero-home.webp');
  background-size: cover;
  background-position: center 58%; /* nudge the image up so the aurora arc rises into frame */
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Legibility overlay on top of the background image */
.s-gateway-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(26,74,134,0.42); /* blue wash - unifies the aurora to blue, lifts the dark edges, softens the white */
  z-index: 0;
}

.s-gateway-hero .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 48px 0; /* doubled top/bottom band (2x the 24px gap between the squares) */
}

/* Two-panel grid — side by side on desktop */
.s-gateway-hero .gateway-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Each panel is a full-link block with its own dark backdrop */
.s-gateway-hero .gateway-panel {
  position: relative;
  aspect-ratio: 1 / 1; /* square panels */
  border-radius: var(--radius);
  overflow: hidden;
  background: #1a4a86; /* blue - shows as the frame on the bordered variant */
  text-decoration: none;
  color: #fff;
  display: block;
}

.s-gateway-hero .gateway-panel:hover { text-decoration: none; color: #fff; }

/* Blue tint over squares 4 and 5 (the middle-row squares the heading sits on) */
.s-gateway-hero .gateway-panel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 33.333%;
  width: 66.667%;
  height: 33.334%;
  z-index: 1;
  background: rgba(0, 0, 40, 0.85); /* the navy used on header/footer (--navy #000028), darker */
  pointer-events: none;
}

/* 3x3 image montage filling the panel */
.s-gateway-hero .gateway-montage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0;
  z-index: 0;
}
.s-gateway-hero .gateway-montage img {
  width: 100%;
  height: 100%;
  min-width: 0;   /* stop the image's intrinsic size from blowing out the 1fr track */
  min-height: 0;  /* forces every cell to an exact square regardless of image aspect */
  object-fit: cover;
  display: block;
}

/* Variant B: montage inset so the blue panel shows as a border (matches the 24px gap between squares) */
.s-gateway-hero .gateway-panel--inset .gateway-montage {
  inset: 24px;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
}

/* Question text overlaid on the montage, with a scrim for legibility */
.s-gateway-hero .gateway-label {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%); /* sit the heading on the middle row */
  z-index: 2; /* above the mask */
  padding: 20px 36px 20px 26px; /* left nudged ~10px so the business tagline holds one line */
}
.s-gateway-hero .gateway-label h2 {
  font-size: clamp(30px, 3.6vw, 52px); /* both same size; scales with width so it stays ~2 lines */
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.05;
  max-width: 66%; /* heading area; wraps the two-line headings within it */
}
.s-gateway-hero .gateway-label .gateway-cta {
  display: block;              /* own line; respects max-width */
  font-size: clamp(12px, 1.4vw, 14px); /* scales down at narrower desktop widths */
  font-weight: 600;
  color: rgba(255,255,255,0.80);
  letter-spacing: 0.03em;
  max-width: 66%;              /* stay within the same column as the heading */
}

/* Both panels share the same heading size (defined on .gateway-label h2 above) */

/* Homepage page background = the navy we use on the footer, so nothing shows white below it */
html.page-gateway, body.page-gateway { background: var(--navy); }
body.page-gateway { min-height: 100vh; }

/* 50% navy tint over every square; lifts when you roll over the block.
   Squares 4 & 5 keep their heavier text mask (the ::before) underneath. */
.s-gateway-hero .gateway-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 40, 0.50);
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.s-gateway-hero .gateway-panel:hover::after { opacity: 0; }

/* Stack panels vertically on mobile (720px breakpoint) */
@media (max-width: 720px) {
  .s-gateway-hero .wrap { padding: 24px 0; }
  .s-gateway-hero .gateway-grid { grid-template-columns: 1fr; gap: 16px; }
  /* Collapse each square to a short banner: heading height with a single 1x3 image strip behind it */
  .s-gateway-hero .gateway-panel { aspect-ratio: auto; }
  .s-gateway-hero .gateway-montage { grid-template-rows: 1fr; }
  .s-gateway-hero .gateway-montage img:nth-child(n+4) { display: none; }
  /* blue tint over the two cells (1 & 2) the heading sits on, full banner height */
  .s-gateway-hero .gateway-panel::before { top: 0; height: 100%; width: 66.667%; }
  .s-gateway-hero .gateway-label {
    position: relative;
    top: auto;
    transform: none;
    padding: 32px 28px; /* 28px sides: more breathing room than 24px; still compact */
  }
  .s-gateway-hero .gateway-label h2 { font-size: 30px; max-width: 78%; }
  /* CTA stays constrained within the label on mobile too */
  .s-gateway-hero .gateway-label .gateway-cta {
    font-size: 13px;
    max-width: 78%; /* matches heading column */
  }
}

/* Equal-height panels on narrow phones: both headings forced to two lines
   so neither panel collapses shorter than its sibling.
   Applies only below 440px where "Or get personal?" wraps to 1 line
   while the business heading already wraps to 2. */
@media (max-width: 440px) {
  .s-gateway-hero .gateway-label h2 { max-width: 58%; }
}