/* ── Homepage — hero, mission, difference, SST, signals, CTA ── */

/* ── HERO ── */
.hero {
  position: relative;
  /* svh = "small viewport height" — the visible area excluding any
     browser chrome (iOS Safari URL bar, iPad bottom tab bar). Using
     vh here causes content to be cropped behind that chrome on
     iPad / iPhone. The vh fallback keeps older browsers working. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  text-align: left;
  /* Paddings clamp with viewport width so they shrink on iPad-class
     widths (where viewport height is also tighter — especially in
     landscape at 1024px). At full desktop (≥1440px) they reach the
     original 140 / 80 values for the same spacious feel. */
  padding: clamp(96px, 10vw, 140px) 0 clamp(40px, 5vw, 80px);
  overflow: hidden;
}

/* Hero background image (1280x720 WebP) — sits behind the video on every
   viewport. Visible briefly while the MP4 buffers, then the video paints
   on top once it has enough data to play. */
.hero-bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* Hero background video — plays on all viewports; layered above the picture. */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to top,
      rgba(16, 32, 39, 0.72) 0%,
      rgba(16, 32, 39, 0.36) 40%,
      rgba(16, 32, 39, 0.00) 65%),
    linear-gradient(to top right,
      rgba(16, 32, 39, 0.95) 0%,
      rgba(16, 32, 39, 0.68) 28%,
      rgba(16, 32, 39, 0.25) 60%,
      rgba(16, 32, 39, 0.05) 100%);
  z-index: 1;
}

/* Hero content — same max-width/padding as nav-inner so logo & h1 align */
.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 100%;
  margin: 0;
  /* max() with env() keeps the headline + sub copy clear of the
     iPhone Dynamic Island when the page is viewed in landscape
     (viewport-fit=cover lets the body extend to the screen edges,
     so the design's --edge-pad alone can place text under the
     island). env() resolves to 0 on devices without a notch. */
  padding-left: max(var(--edge-pad), env(safe-area-inset-left));
  padding-right: max(var(--edge-pad), env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero h1 {
  font-size: clamp(36px, 5.5vw, 92px);
  font-weight: 700;
  /* Loosened from 1.02 / -0.03em / -0.08em — those values jammed
     letters and (especially) words together. Now natural tracking
     with a touch of word-spacing for openness. */
  line-height: 1.05;
  letter-spacing: 0;
  word-spacing: 0.04em;
  max-width: 1100px;
  margin: 0 0 28px 0;
  color: var(--white);
  text-shadow:
    0 2px 48px rgba(0, 0, 0, 0.35),
    0 1px 4px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(22px);
  animation: chFadeUp 1s ease forwards 0.2s;
  will-change: transform, opacity;
}

.hero-sub {
  font-size: clamp(18px, 1.6vw, 22px);
  color: rgba(255,255,255,0.88);
  max-width: 600px;
  line-height: 1.3;
  margin: 0 0 52px 0;
  font-weight: 400;
  letter-spacing: -0.2px;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(16px);
  animation: chFadeUp 0.8s ease forwards 0.5s;
  will-change: transform, opacity;
}
.hero-sub-strong {
  color: var(--white);
  font-weight: 500;
}
.hero-sub-light {
  font-weight: 400;
  color: rgba(255,255,255,0.78);
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(12px);
  animation: chFadeUp 0.8s ease forwards 0.7s;
  will-change: transform, opacity;
}

.btn-primary {
  background: var(--gold);
  color: var(--nav-bg);
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 0;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--gold-hover); }

.btn-secondary {
  border: 1px solid var(--border);
  color: var(--white);
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 0;
  font-size: 15px;
  font-weight: 400;
  transition: all 0.2s;
  backdrop-filter: blur(10px);
}
.btn-secondary:hover {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
}

/* ── Mobile: center hero buttons ──
   Buttons stack vertically and the .hero-actions container centers
   itself horizontally inside the (left-aligned) .hero-content via
   margin auto, so the CTA block sits in the middle of the screen
   regardless of the buttons' actual width. */
@media (max-width: 600px), (max-height: 500px) {
  /* Hero re-sized to fit within a phone viewport.
     - Switch to 100svh so iOS Safari's URL bar doesn't make the
       section taller than the visible area.
     - Drop the heavy 140/80 desktop paddings — with the half-height
       mobile navbar (56px), the hero now only needs ~80px top safe
       room and a tighter bottom.
     - Tighten the gap between sub copy and the CTA stack so all
       four content blocks (h1, sub, primary, secondary) sit within
       a single viewport on iPhone-class screens. */
  .hero {
    min-height: 100svh;
    padding: 80px 0 32px;
  }
  .hero h1 { margin-bottom: 18px; }
  .hero-sub { margin-bottom: 28px; }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    /* width: 100% is needed because .hero-content has align-items:
       flex-start — without it, .hero-actions shrinks to its content
       width and the max-width cap is never reached in the 481–600px
       range. base.css adds width: 100% at ≤480px, which is why
       smaller viewports stretch correctly already. */
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    gap: 12px;
  }
  /* Wider cap than base.css's 320px so the stacked CTAs fill more of
     the row. Below 480px, the buttons go width: 100% (base.css) within
     this 480px cap, so they shrink naturally with the viewport. */
  .btn-primary,
  .btn-secondary {
    width: 100%;
    max-width: 480px;
    text-align: center;
    padding: 12px 28px;
  }
}

/* ── Large displays: bigger hero text with room to breathe ── */
@media (min-width: 1800px) {
  .hero {
    padding-bottom: 140px;
  }
  .hero h1 {
    font-size: 108px;
    max-width: 1400px;
  }
}

/* ── PROBLEM SECTION ── */
.mission {
  background: var(--cream);
  padding: clamp(96px, 12vw, 180px) 0 clamp(80px, 10vw, 180px);
  position: relative;
  overflow: hidden;
}

.mission-inner {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 var(--edge-pad);
}

/* ── Split grid: text + video ──
   Grid tilts slightly toward text (1.1fr / 0.9fr) and centers the
   columns vertically against the photo for better optical balance. */
.problem-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
.problem-text {
  min-width: 0;
  padding-top: 0;
}

/* ── Headline — setup → payoff hierarchy ──
   Line 1 is a smaller setup (medium weight, muted). Line 2 is the
   real headline (large, bold, deep). Size + weight do the work, so
   the relationship between the two beats is unambiguous. */
.mission-headline {
  color: var(--deep);
  margin: 0;
}
.mission-strong,
.mission-mid {
  display: block;
}
.mission-strong {
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: #3c4148;
  margin: 0 0 0.7em;
}
.mission-mid {
  font-size: clamp(32px, 4.2vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--deep);
  margin: 0;
}
/* ── Supporting text with gold accent bar ── */
.mission-sub {
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 400;
  /* Was #5c6068 — darkened to #3c4148 for confident readability
     while staying clearly lighter than the headline. */
  color: #3c4148;
  line-height: 1.65;
  letter-spacing: -0.005em;
  max-width: 100%;
  margin-top: clamp(28px, 3.5vw, 48px);
  margin-bottom: 0;
  padding-left: 20px;
  border-left: 3px solid var(--gold);
}

/* ── Video — cinematic inset ── */
.problem-media {
  position: relative;
  border-radius: var(--radius-img-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.15),
    0 8px 24px rgba(0,0,0,0.08),
    0 0 0 1px rgba(0,0,0,0.04);
  align-self: center;
}
.problem-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Subtle top/bottom vignette on video */
.problem-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.12) 100%);
  pointer-events: none;
  border-radius: inherit;
}

/* ── Tablet: asymmetric split ── */
@media (max-width: 1200px) {
  .problem-split {
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(32px, 4vw, 64px);
  }
}

/* ── Mobile: stack vertically ── */
@media (max-width: 900px) {
  .mission {
    padding: clamp(72px, 10vw, 120px) 0 clamp(36px, 4vw, 56px);
  }
  .problem-split {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .problem-text {
    padding-top: 0;
  }
  .problem-media {
    margin-top: clamp(40px, 6vw, 64px);
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    box-shadow:
      0 6px 20px rgba(0,0,0,0.10),
      0 2px 8px rgba(0,0,0,0.06),
      0 0 0 1px rgba(0,0,0,0.04);
  }
  /* Scale the payoff line down on small screens (size lives on the
     span now, since .mission-headline no longer carries font-size). */
  .mission-mid {
    font-size: clamp(28px, 7vw, 44px);
  }
}

/* Note: previous full-bleed override at <=480px was removed so the
   Problem video stays boxed (matching the SST drone treatment) at
   every mobile width. The 900px-breakpoint rule above is now the
   single source of truth on mobile. */


/* ── MISSION SPLIT LAYOUT ── */
/* ── THE AMPERESAND DIFFERENCE ── */
/* ══════════════════════════════════════════════
   DIFFERENCE V2 — Premium redesign
   ══════════════════════════════════════════════ */

.difference {
  background: var(--cream);
  color: var(--charcoal);
}

.difference--v2 {
  padding: clamp(48px, 5vw, 72px) 0 clamp(96px, 12vw, 180px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.difference--v2 .difference-inner {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 var(--edge-pad);
}

/* ── Intro ── */
.diff-v2-intro {
  margin-bottom: clamp(56px, 7vw, 96px);
}

.diff-v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: clamp(16px, 2vw, 24px);
}
.diff-v2-eyebrow::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--gold-dark);
  flex-shrink: 0;
}

.diff-v2-headline {
  font-size: clamp(36px, 5.5vw, 88px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
  color: var(--deep);
  max-width: 12ch;
}

/* ── Stats row — the hero moment ── */
.diff-v2-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1.5px solid rgba(12, 18, 24, 0.12);
  border-bottom: 1.5px solid rgba(12, 18, 24, 0.12);
  margin-bottom: clamp(64px, 8vw, 112px);
}

.diff-v2-stat {
  padding: clamp(28px, 3.5vw, 48px) clamp(16px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vw, 12px);
  border-right: 1px solid rgba(12, 18, 24, 0.08);
  /* Reveal animation */
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.diff-v2-stat:first-child {
  padding-left: 0;
}
.diff-v2-stat:last-child {
  border-right: none;
  padding-right: 0;
}
.diff-v2-stat.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.diff-v2-stat-num {
  font-size: clamp(36px, 4.5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--deep);
}

.diff-v2-stat-label {
  font-size: clamp(13px, 1.05vw, 16px);
  /* Aeonik ships as a static font at 400/500/700 only — there is no 450
     weight glyph file, so the browser silently falls back to 400. Match
     what's actually rendering today by writing 400 explicitly. If you
     want a touch more emphasis later, bump to 500. */
  font-weight: 400;
  color: #5c6068;
  line-height: 1.4;
  max-width: 18ch;
}

/* ── Features: 4-column card row ──
   Bordered-cell treatment mirrors the stats row directly above AND
   the dark-section spec columns across the page. Each card now reads
   as: title (dark bold anchor) → lead (bold claim) → descriptor (dim
   supporting line), the same rhythm as the dark section bullets. */
.diff-v2-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1.5px solid rgba(12, 18, 24, 0.12);
  border-bottom: 1.5px solid rgba(12, 18, 24, 0.12);
  margin-bottom: clamp(48px, 6vw, 80px);
}

.diff-v2-card {
  position: relative;
  padding: clamp(36px, 3.2vw, 52px) clamp(20px, 2vw, 32px);
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-right: 1px solid rgba(12, 18, 24, 0.08);
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  /* Reveal animation */
  opacity: 0;
  transform: translateY(14px);
}
.diff-v2-card:first-child { padding-left: 0; }
.diff-v2-card:last-child {
  border-right: none;
  padding-right: 0;
}
.diff-v2-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.diff-v2-card h3 {
  /* Eyebrow-style label — same register as the section eyebrows
     ("WHAT SETS US APART" / "THE AMPERESAND DIFFERENCE"). Drops the
     visual competition with the navy bold lead below and lets the
     lead become the dominant scan anchor. */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  line-height: 1.4;
  margin: 0 0 clamp(20px, 2vw, 28px) 0;
}

/* Lead — bold dark claim phrase (the scan anchor) */
.diff-v2-card-lead {
  font-size: clamp(16px, 1.15vw, 18px);
  font-weight: 700;
  color: var(--nav-bg);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 6px 0;
}

/* Descriptor — small dim supporting line */
.diff-v2-card-desc {
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 400;
  color: #5c6068;
  line-height: 1.55;
  margin: 0;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .diff-v2-stat,
  .diff-v2-card {
    transform: none !important;
    transition: opacity 300ms ease !important;
  }
}

/* ── Responsive: tablet ── */
@media (max-width: 1024px) {
  .diff-v2-features {
    grid-template-columns: 1fr 1fr;
  }
  /* 2x2 grid — second card on top row drops its right border,
     bottom row gets a top separator. */
  .diff-v2-card:nth-child(2) {
    border-right: none;
    padding-right: 0;
  }
  .diff-v2-card:nth-child(3) {
    padding-left: 0;
  }
  .diff-v2-card:nth-child(3),
  .diff-v2-card:nth-child(4) {
    border-top: 1px solid rgba(12, 18, 24, 0.08);
  }
}

/* ── Responsive: mobile ── */
@media (max-width: 900px) {
  .diff-v2-stats {
    grid-template-columns: 1fr 1fr;
  }
  .diff-v2-stat:nth-child(2) {
    border-right: none;
  }
  .diff-v2-stat:nth-child(3),
  .diff-v2-stat:nth-child(4) {
    border-top: 1px solid rgba(12, 18, 24, 0.08);
  }
  .diff-v2-headline {
    font-size: clamp(32px, 8vw, 56px);
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .diff-v2-features {
    grid-template-columns: 1fr;
    /* Drop the top divider on mobile — visually noisy directly under
       the "What sets us apart" eyebrow when the cards are stacked. */
    border-top: none;
  }
  /* Single column — drop all vertical separators, add top borders
     between cards so they stack as a frame-bounded list. */
  .diff-v2-card,
  .diff-v2-card:nth-child(2),
  .diff-v2-card:nth-child(3),
  .diff-v2-card:nth-child(4) {
    border-right: none;
    padding-left: 0;
    padding-right: 0;
  }
  .diff-v2-card:not(:first-child) {
    border-top: 1px solid rgba(12, 18, 24, 0.08);
  }
  .diff-v2-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .diff-v2-stats {
    grid-template-columns: 1fr;
  }
  .diff-v2-stat {
    border-right: none;
    border-bottom: 1px solid rgba(12, 18, 24, 0.08);
    padding-left: 0;
  }
  .diff-v2-stat:last-child {
    border-bottom: none;
  }
  .diff-v2-stat:nth-child(3),
  .diff-v2-stat:nth-child(4) {
    border-top: none;
  }
}


/* ── PRODUCT ── */
/* ── CTA ── */
/* ── SST PRODUCT ── */
.sst {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #102027;
}

/* ─ Symmetric hero: image left, headline right ─ */
.sst-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  position: relative;
  z-index: 2;
  flex: 1;
}
.sst-img-col {
  /* Top padding bumped to give the SST product image more breathing
     room from the top of the section. Other paddings kept as-is. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(140px, 13vw, 200px) clamp(20px, 2vw, 40px) clamp(16px, 2vw, 28px) var(--edge-pad);
}

.sst-product-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
  height: auto;
  display: block;
}
.sst-text-col {
  /* Matched to .sst-img-col so the headline and image both sit at
     the same vertical offset from the top of the section. */
  padding: clamp(140px, 13vw, 200px) var(--edge-pad) clamp(16px, 2vw, 28px) clamp(20px, 2vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Eyebrow */
.sst-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.sst-eyebrow-rule {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  opacity: 0.65;
  flex-shrink: 0;
}

/* Headline */
.sst-title {
  font-size: clamp(32px, 4vw, 60px);
  font-weight: 700;
  /* Natural tracking — letters sit at their default spacing for
     a looser, more open headline (matches reference type). */
  line-height: 1.0;
  letter-spacing: 0;
  word-spacing: 0.04em;
  margin: 0 0 clamp(24px, 3vw, 36px);
  background: linear-gradient(
    180deg,
    #FFFFFF 0%,
    #F2EFE9 12%,
    #E4E0D9 52%,
    #BDC3CB 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter:
    drop-shadow(0 0 36px rgba(160, 205, 240, 0.07))
    drop-shadow(0 2px 14px rgba(0, 0, 0, 0.13));
}
.sst-title-em {
  font-style: normal;
  background: linear-gradient(135deg, #cead74 0%, #b7965d 50%, #9c7a3f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Lead */
.sst-subtitle {
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.52);
  line-height: 1.7;
  max-width: 46ch;
}

/* ─ Spec columns ─
   Mirrors the bordered-cell rhythm of the light "One platform. Every advantage."
   row. Each column now sits inside a framed cell with a promoted gold label
   and stacked lead/descriptor bullets — the lead phrase is the scan anchor,
   the descriptor is supporting context. */
.sst-columns-wrap {
  /* Top padding halved (was clamp 120-200) so the combined row 2 → row 3
     gap (.sstx-split bottom + this top) lands at ~120-200px, matching the
     row 1 → row 2 gap and making all three SST rows feel balanced.
     Bottom kept large to preserve the buffer before the next section. */
  position: relative;
  z-index: 2;
  padding: clamp(60px, 6vw, 100px) var(--edge-pad) clamp(120px, 12vw, 200px);
}

/* section intro */
.sst-columns-intro {
  margin-bottom: clamp(48px, 5vw, 72px);
}
.sst-columns-heading {
  /* Promoted to clearly dominate the 26px column labels below.
     Heavier weight + tighter tracking give it the authority of a
     real section header. */
  font-size: clamp(36px, 3.6vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 14px 0;
  max-width: 18ch;
}
.sst-columns-sub {
  /* Lifted off the cell-descriptor color band so it reads as a tier
     above the in-cell supporting copy, not adjacent to it. */
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  margin: 0;
  max-width: 50ch;
}

/* Cell frame — top + bottom horizontal rules with vertical separators */
.sst-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1.5px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.12);
}
.sst-col {
  padding: clamp(32px, 3.5vw, 48px) clamp(20px, 2.4vw, 36px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(12px);
  animation: sstColIn 0.6s ease forwards;
}
.sst-col:first-child {
  padding-left: 0;
  animation-delay: 0s;
}
.sst-col:nth-child(2) { animation-delay: 0.12s; }
.sst-col:last-child {
  border-right: none;
  padding-right: 0;
  animation-delay: 0.24s;
}

@keyframes sstColIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Promoted column label — the gold anchor at the top of each cell */
.sst-col-label {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 600;
  color: var(--gold-bright, #d4b87a);
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 clamp(28px, 2.6vw, 36px) 0;
}

/* Legacy single-line list (kept for backward compat if reused elsewhere) */
.sst-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.2vw, 16px);
}

/* ── Stacked variant — lead/descriptor mini-stat per bullet ── */
.sst-list--stacked {
  gap: clamp(20px, 2vw, 28px);
}
.sst-list--stacked .sst-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
}
.sst-list--stacked .sst-item::before {
  content: none;
}
.sst-item-lead {
  font-size: clamp(16px, 1.15vw, 18px);
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.sst-item-desc {
  font-size: clamp(13px, 0.95vw, 15px);
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.45;
}

/* Brand gold-bright fallback if the variable isn't defined globally */
:root { --gold-bright: #d4b87a; }


/* ══════════════════════════════════
   CUSTOMER SIGNALS
   ══════════════════════════════════ */
.signals {
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(48px, 5vw, 80px) 0;
  overflow: hidden;
  box-sizing: border-box;
}
.signals-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
}

/* ── Top row: headline left, body right ── */
.signals-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.signals-intro {
  max-width: 620px;
}

.signals-body-col {
  display: flex;
  align-items: center;
}

/* ── 3-column sector cards ── */
.signals-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}

.signals-card {
  display: flex;
  flex-direction: column;
}

.signals-card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: clamp(16px, 2vw, 24px);
  display: block;
}

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

.signals-card-title {
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 600;
  color: #0c1a20;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.signals-card-desc {
  font-size: clamp(14px, 1vw, 16px);
  /* 0.72 alpha on var(--cream) #e9e5e2 ≈ #4A5356, ratio ~6:1 — passes WCAG AA. */
  color: rgba(12, 26, 32, 0.72);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .signals-cards {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 48px);
  }
}

.signals-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(138, 115, 70, 0.7);
  margin-bottom: clamp(20px, 2.5vw, 32px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.signals-label::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: rgba(138, 115, 70, 0.5);
  flex-shrink: 0;
}

.signals-headline {
  font-size: clamp(32px, 3.8vw, 56px);
  font-weight: 700;
  color: var(--nav-bg);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.signals-body {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  font-weight: 500;
  color: var(--nav-bg);
  max-width: 60ch;
}

/* ── Scroll reveal ── */
.signals-top {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.signals.signals-visible .signals-top {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .signals-top {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .signals {
    height: auto;
    max-height: none;
    overflow: visible;
    padding: clamp(48px, 8vw, 80px) 0;
  }
  .signals-top {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 48px);
  }
  .signals-headline {
    font-size: clamp(26px, 7vw, 40px);
  }
}

/* ── Tablet portrait (iPad portrait) ──
   The base .signals rule sets min-height: 100vh so the section behaves like
   a hero on landscape desktops/iPads. In portrait orientation on iPads the
   viewport is very tall, so that 100vh forces a huge empty band above the
   centered content. Drop the min-height for portrait tablets only — phones
   already get height: auto via the (max-width: 768px) block above, and
   landscape iPads and desktops are left untouched. */
@media (orientation: portrait) and (min-width: 769px) and (max-width: 1180px) {
  .signals {
    min-height: 0;
    padding: clamp(64px, 7vw, 96px) 0;
  }
}


/* ── CTA EXPERIMENT — video background variant ── */
.cta-experiment {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  text-align: center;
  overflow: hidden;
}
.cta-experiment-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-experiment-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-experiment-overlay {
  position: absolute;
  inset: 0;
  /* Scrim tint: deep teal (#09151A) in the brand hue (~198°), matching the
     navbar (#102027) and footer (#0C181D) rather than the old navy (#060A12,
     hue ~220°) which read as a blue cast against the brand. */
  background:
    linear-gradient(180deg,
      rgba(9, 21, 26, 0.86) 0%,
      rgba(9, 21, 26, 0.74) 35%,
      rgba(9, 21, 26, 0.7) 65%,
      rgba(9, 21, 26, 0.92) 100%),
    radial-gradient(ellipse at 50% 35%,
      rgba(9, 21, 26, 0.1) 0%,
      rgba(9, 21, 26, 0.45) 70%,
      rgba(9, 21, 26, 0.65) 100%);
  z-index: 1;
}
.cta-experiment .cta-final-inner {
  position: relative;
  z-index: 2;
}
.cta-experiment .cta-final-label,
.cta-experiment .cta-final-headline,
.cta-experiment .cta-final-body,
.cta-experiment .cta-final-buttons {
  opacity: 1;
  transform: none;
  animation: none;
}
/* WCAG AA overrides — scoped to experiment section only */
.cta-experiment .cta-final-label {
  color: rgb(200, 170, 110);
  font-size: 12px;
}
.cta-experiment .cta-final-body {
  color: rgba(240, 237, 232, 0.65);
}
/* ══════════════════════════════════════════════════════════
   SST — REDESIGN EXPERIMENT  (.sst--x)
   All rules scoped to .sst--x to leave original untouched.

   Design token system (WCAG AA compliant):
     Text:   T1 #ffffff      — headlines only
             T2 .76 opacity  — primary content
             T3 .52 opacity  — descriptors, supporting (WCAG AA min)
     Gold:   G1 var(--gold)  — all gold text (full opacity for AA)
     Border: B1 .08 opacity  — all containers
     Bg:     BG .03 opacity  — all container fills
     Scale:  8pt base (8, 16, 24, 32, 40, 48, 64, 80, 96)
══════════════════════════════════════════════════════════ */

/* ── Deploy badge ── */
.sst--x .sstx-deploy-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: clamp(14px, 1.5vw, 20px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.005em;
  width: fit-content;
  white-space: nowrap;
}

.sst--x .sstx-deploy-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--gold);
}

/* ── 50/50 split: One unit card + drone video ── */
.sstx-split {
  /* Asymmetric vertical padding — top kept large to preserve the
     row 1 → row 2 gap; bottom halved so the row 2 → row 3 gap reads
     in balance with row 1 → row 2 rather than ~2× larger. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: clamp(120px, 12vw, 200px) var(--edge-pad) clamp(60px, 6vw, 100px);
  align-items: center;
}

.sstx-split-left {
  display: flex;
  flex-direction: column;
  padding-right: clamp(32px, 4vw, 64px);
}

.sstx-split-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: clamp(32px, 4vw, 64px);
}

.sstx-drone-figure {
  width: 100%;
  margin: 0;
}

.sstx-drone-video {
  width: 100%;
  /* 4:3 ratio locks the photo's height to its width, so it stays
     proportional regardless of viewport and feels intentional rather
     than capped. Tighter than the old max-height: 480px, less dominant. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Caption row: caption text on the left, locale label on the right. */
.sstx-drone-caption-row {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.sstx-drone-caption {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.sstx-drone-locale {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d4b87a;
  white-space: nowrap;
}

/* ── Scale up left-panel content for full half-column presence ── */
.sstx-split-left .sstx-amp-unit {
  padding: 0;
  border-top: none;
  justify-content: flex-start;
}

.sstx-split-left .sstx-amp-unit-top {
  gap: 24px;
  padding-bottom: 36px;
}

/* Larger eyebrow chip in the split-left context only — the base
   .sstx-amp-tag rule (13px) still applies in the "What we replace"
   side-by-side below, so this override is scoped. */
.sstx-split-left .sstx-amp-tag {
  font-size: 16px;
}

.sstx-split-left .sstx-amp-name {
  /* Bumped from clamp(36px, 4.5vw, 60px) for more presence against
     the right-column photo. Leading tightened from 1.05 to 1.0 so the
     two-line "One unit. / Factory-built." reads as a confident block. */
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1.0;
}

.sstx-split-left .sstx-amp-descriptor {
  font-size: clamp(17px, 1.4vw, 20px);
  max-width: 44ch;
  margin-top: 0;
}

.sstx-split-left .sstx-amp-footer {
  padding-top: 32px;
  margin-top: 8px;
  gap: 14px;
}

.sstx-split-left .sstx-amp-vendors,
.sstx-split-left .sstx-amp-dot-sep {
  font-size: 20px;
}

@media (max-width: 900px) {
  .sstx-split {
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 60px);
    /* Vertical padding tightened on mobile — the desktop clamp
       resolves to its 120px floor on small viewports, which combined
       with .sst-columns-wrap's matching padding below totals ~240px
       of dead space between rows. Halve it. */
    padding-top: clamp(48px, 10vw, 80px);
    padding-bottom: clamp(48px, 10vw, 80px);
  }
  .sstx-split-left {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: clamp(40px, 6vw, 60px);
  }
  .sstx-split-right {
    padding-left: 0;
  }
  .sstx-drone-video {
    max-height: 320px;
  }
  .sstx-split-left .sstx-amp-footer {
    justify-content: center;
    border-top: none;
    padding-top: 12px;
    margin-top: 0;
  }
  /* Match the SST spec columns row to the same tightened mobile
     padding so the gap between rows 2 and 3 is symmetric and small. */
  .sst-columns-wrap {
    padding-top: clamp(48px, 10vw, 80px);
    padding-bottom: clamp(48px, 10vw, 80px);
  }
}

/* Uppercase label treatment */
.sstx-amp-tag {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1;
}

.sstx-amp-unit {
  /* Editorial column (no card chrome). Stretches to match the left
     list's full height; tag/headline/descriptor stack at the top,
     footer pins to the bottom, extra height becomes the gap between. */
  padding: 22px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  width: 100%;
  flex: 1;
}

.sstx-amp-unit-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 22px;
}

.sstx-amp-tag {
  color: #d4b87a;
  display: block;
}

.sstx-amp-name {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #ffffff;
  line-height: 1.08;
  margin: 0;
}

.sstx-amp-descriptor {
  /* Bumped from 15px → 17px for more presence. The right column
     uses space-between flex distribution, so the footer stays
     pinned to the bottom regardless of this text's size — the gap
     above it just absorbs the change. */
  font-size: 17px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
  font-weight: 400;
  margin: 12px 0 0;
  max-width: 34ch;
}

.sstx-amp-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.sstx-amp-vendors {
  /* Bumped from 13px → 15px to match the left side's total-time
     ("Up to 36 months · 4 vendors") and feel more substantial. */
  font-size: 15px;
  font-weight: 400;
  color: #d4b87a;
  letter-spacing: 0;
}

.sstx-amp-dot-sep {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
}

/* ── SST wide-screen override: prevent 16vw edge-pad from squeezing the image ── */
@media (min-width: 1920px) {
  .sst-img-col {
    padding-left: 100px;
    padding-right: 40px;
  }
  .sst-product-img {
    max-width: 960px;
  }
  .sst-text-col {
    padding-left: 60px;
    padding-right: 100px;
  }
}

/* ── SST mobile overrides (must follow desktop rules in this file) ── */
@media (max-width: 1024px) {
  .sst-hero { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .sst-hero { grid-template-columns: 1fr; min-height: auto; }
  .sst-img-col { padding: clamp(80px, 10vw, 120px) var(--edge-pad) 0; justify-content: center; }
  .sst-product-img { max-width: 100%; transform: none; }
  .sst-text-col { padding: clamp(40px, 5vw, 56px) var(--edge-pad); align-items: center; text-align: center; }
  .sst-eyebrow { justify-content: center; }
  .sst-subtitle { max-width: 100%; }
  .sst-columns {
    grid-template-columns: 1fr;
    border-top: 1.5px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.12);
  }
  .sst-col,
  .sst-col:first-child,
  .sst-col:last-child {
    padding: clamp(28px, 5vw, 40px) 0;
    border-right: none;
  }
  .sst-col:not(:first-child) {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .sst-columns-intro { max-width: 100%; }
}