/* ═══════════════════════════════════════════════════════════════
   HARMONY - Homepage body sections (below hero)
   Editorial / Berkshire Hathaway × early Apple
   ═══════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

/* ─── Section shell ─── */
.sxn {
  position: relative;
  padding: var(--space-30) var(--space-12);
  background: var(--parchment);
  border-top: 1px solid var(--border-soft);
}
.sxn-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.sxn.dark {
  background: var(--deep);
  color: var(--fg-on-dark);
  border-top-color: rgba(255,255,255,0.08);
}
.sxn.dark h2, .sxn.dark h3, .sxn.dark h4 { color: var(--fg-on-dark); }
.sxn.dark p { color: var(--fg-on-dark-muted); }

@media (max-width: 768px) {
  .sxn { padding: var(--space-24) var(--space-6); }
}

/* ─── Kicker (mono eyebrow) ─── */
.kicker {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--letter-tracked);
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-8);
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--ink);
}
.sxn.dark .kicker { color: var(--blueprint-soft); }
.sxn.dark .kicker::before { background: var(--blueprint-soft); }

/* ─── Display types (section heads) ─── */
.sxn-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--space-8);
  max-width: 900px;
  text-wrap: balance;
}
.sxn-display em { font-style: italic; }
.sxn-display .line { display: block; }

.sxn-lede {
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 0 var(--space-16);
  text-wrap: pretty;
}

/* ─── Buttons (reuse .btn from hero, add pill + primary on dark) ─── */
.sxn .btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: var(--space-8); }
.sxn.dark .btn {
  color: var(--fg-on-dark);
  border-color: rgba(255,255,255,0.25);
}
.sxn.dark .btn:hover { background: rgba(255,255,255,0.04); border-color: var(--fg-on-dark); }
.sxn.dark .btn.primary {
  background: var(--fg-on-dark); color: var(--ink); border-color: var(--fg-on-dark);
}
.sxn.dark .btn.primary:hover { background: var(--stone); }

/* ═══════════════════════════════════════════════════════════════
   PLATE (illustration slot)
   ═══════════════════════════════════════════════════════════════ */
.plate-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--parchment);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plate-slot::before {
  /* Blueprint grid */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(16,25,43,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,25,43,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.plate-slot::after {
  content: "";
  position: absolute; inset: 16px;
  border: 1px dashed rgba(16,25,43,0.18);
  pointer-events: none;
}
.plate-slot .plate-label {
  position: relative;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
  padding: 6px 12px;
  background: var(--parchment);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  z-index: 2;
}
.plate-slot.square { aspect-ratio: 4 / 3; }
.plate-slot.wide { aspect-ratio: 21 / 9; }

.plate-caption {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gravel);
  margin-top: var(--space-4);
  display: block;
}
.sxn.dark .plate-caption { color: rgba(255,255,255,0.55); }

/* ═══════════════════════════════════════════════════════════════
   02-B  HERO PLATE (between hero & platform)
   ═══════════════════════════════════════════════════════════════ */
.hero-plate-band {
  padding: var(--space-12) 0 var(--space-24);
  background: var(--parchment);
}
.hero-plate-band .plate-slot { aspect-ratio: 1200 / 580; }
.hero-plate-band .plate-caption {
  text-align: center;
  margin-top: var(--space-5);
}
@media (max-width: 768px) {
  .hero-plate-band { padding: var(--space-6) var(--space-4) var(--space-16); }
  .hero-plate-band .plate-slot { aspect-ratio: 4 / 3; }
}

/* ── Hero stage (full-bleed animated scene) ── */
.hero-stage {
  max-width: none;       /* let it stretch edge to edge */
  margin: 0 auto;
  padding: 0 var(--space-4);
  position: relative;
}
@media (min-width: 1400px) {
  .hero-stage { padding: 0 var(--space-6); }
}

.hero-stage-plate {
  aspect-ratio: 1200 / 580;
  background: var(--parchment);
  border: 1px solid rgba(16,25,43,0.1);
  border-radius: 3px;
  padding: 10px;
  box-shadow:
    0 1px 0 rgba(16,25,43,0.04),
    0 20px 60px -20px rgba(16,25,43,0.14);
  overflow: hidden;
  position: relative;
}
.hero-stage-plate::before,
.hero-stage-plate::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border: 1px solid rgba(30,58,138,0.3); pointer-events: none; z-index: 2;
}
.hero-stage-plate::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.hero-stage-plate::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }

.hero-stage .hero-svg { width: 100%; height: 100%; display: block; }

/* ── Progressive per-line drafting ──────────────────────────
   Each line/path/rect in the hero SVG uses an inline <animate>
   on stroke-dashoffset, so it literally draws itself in real time.
   No clip-path wipe - the marks appear as the "pen" traces them.
   ─────────────────────────────────────────────────────── */
.hero-stage .hero-svg .d {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.hero-stage .hero-svg .fo { fill-opacity: 0; }
.hero-stage .hero-svg .op { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-stage .hero-svg .d { stroke-dashoffset: 0; }
  .hero-stage .hero-svg .fo { fill-opacity: 1; }
  .hero-stage .hero-svg .op { opacity: 1; }
  .hero-stage .hero-svg animate,
  .hero-stage .hero-svg animateTransform,
  .hero-stage .hero-svg animateMotion { display: none; }
}

@media (max-width: 640px) {
  .hero-stage-plate { padding: 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   03  PLATFORM - 4 alternating capability blocks
   ═══════════════════════════════════════════════════════════════ */
.cap-grid { display: grid; gap: var(--space-24); margin-top: var(--space-16); }

.cap-block {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-16);
  align-items: center;
}
.cap-block .plate-slot { aspect-ratio: 16 / 10; }
.cap-block:nth-child(even) .cap-copy { order: 2; }
.cap-block:nth-child(even) .plate-slot { order: 1; }

.cap-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--rust);
  margin-bottom: var(--space-3);
  display: block;
}
.cap-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 var(--space-5);
}
.cap-title em { font-style: italic; }
.cap-body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 var(--space-5);
  max-width: 520px;
}
.cap-caption {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gravel);
  display: block;
}

@media (max-width: 768px) {
  .cap-block { grid-template-columns: 1fr; gap: var(--space-8); }
  .cap-block:nth-child(even) .cap-copy,
  .cap-block:nth-child(even) .plate-slot { order: unset; }
  .cap-grid { gap: var(--space-16); }
}

/* ═══════════════════════════════════════════════════════════════
   04  ON THE FLOOR - customer grid
   ═══════════════════════════════════════════════════════════════ */
.cust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
  margin-top: var(--space-12);
}
.cust-card {
  padding: var(--space-10) 0 0;
  border-top: 1px solid var(--ink);
}
.cust-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 2.8vw, 42px);
  line-height: 1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 var(--space-5);
}
.cust-body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 var(--space-6);
}
.cust-caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gravel);
}

@media (max-width: 900px) {
  .cust-grid { grid-template-columns: 1fr; gap: var(--space-10); }
}

/* ═══════════════════════════════════════════════════════════════
   05  HOW WE WORK - P0–P5 phase grid
   ═══════════════════════════════════════════════════════════════ */
/* legacy phase-grid kept for fallback if used elsewhere; new theatre below supersedes it */
.phase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
  margin-top: var(--space-12);
  margin-bottom: var(--space-16);
}
.phase-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.phase-card .plate-slot { aspect-ratio: 4 / 3; }
.phase-id {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--rust);
  display: block;
  margin-top: var(--space-3);
}
.phase-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 2px 0 2px;
}
.phase-caption {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .phase-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .phase-grid { grid-template-columns: 1fr; }
}

/* Below-phase full-bleed plate */
.phase-footer-plate { margin-top: var(--space-12); }
.phase-footer-plate .plate-slot { aspect-ratio: 21 / 9; }
.phase-footer-plate .plate-caption { margin-top: var(--space-4); text-align: center; }
.phase-footer-cta { margin-top: var(--space-10); display: flex; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════
   06  WHO WE ARE - editorial three paragraphs
   ═══════════════════════════════════════════════════════════════ */
.identity-prose {
  display: grid;
  gap: var(--space-10);
  max-width: 960px;
  margin-top: var(--space-10);
}
.identity-prose p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}

.coords {
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid var(--border);
  display: grid;
  gap: var(--space-3);
  max-width: 520px;
}
.coord-row {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .coord-row { flex-direction: column; gap: 4px; }
  .coord-pair { gap: 14px; }
}
.coord-row .place {
  color: var(--gravel);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 10.5px;
}
/* Directional coord pair: "N 35.0308613   W 85.2954934" */
.coord-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 18px;
  font-variant-numeric: tabular-nums;
}
.coord-axis {
  display: inline-block;
  min-width: 1em;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.12em;
  margin-right: 2px;
}
.coord-sep { display: inline-block; width: 0; }

/* ═══════════════════════════════════════════════════════════════
   07  CLOSING CTA - parchment full-bleed
   ═══════════════════════════════════════════════════════════════ */
.close-sxn {
  padding: var(--space-30) var(--space-12);
  background: var(--stone);
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.close-sxn .sxn-display {
  margin: 0 auto var(--space-10);
  max-width: 820px;
}
.close-sxn .btn-row { justify-content: center; gap: 16px; }
/* Slightly larger close-section CTAs — matches the more-prominent
   scale of .floor-btn. */
.close-sxn .btn {
  height: 50px;
  padding: 0 28px;
  font-size: 14.5px;
  border-radius: 999px;
}
@media (max-width: 768px) {
  .close-sxn { padding: var(--space-24) var(--space-6); }
  /* On mobile the two CTAs stack vertically. Bump the gap so
     they're not crammed against each other, each button gets real
     tap-target breathing room. */
  .close-sxn .btn-row { gap: var(--space-5); }
}

/* ═══════════════════════════════════════════════════════════════
   08  FOOTER
   ═══════════════════════════════════════════════════════════════ */
.footer {
  background: var(--deep);
  color: var(--fg-on-dark);
  padding: var(--space-24) var(--space-12) var(--space-10);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-inner { max-width: 1280px; margin: 0 auto; }

/* Top lede — brand statement + primary CTAs */
.footer-lede {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: var(--space-16);
  align-items: end;
  margin-bottom: var(--space-12);
}
.footer-lede-brand .footer-brand-logo {
  height: 34px;
  width: auto;
  display: block;
  margin-bottom: var(--space-5);
}
.footer-lede-tag {
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.88);
  margin: 0;
  max-width: 48ch;
}
.footer-lede-cta {
  display: inline-flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Pill CTAs that match .floor-btn pattern, adapted for the dark footer. */
.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}
.footer-cta-btn-pri {
  background: var(--fg-on-dark);
  color: var(--ink);
  border-color: var(--fg-on-dark);
}
.footer-cta-btn-pri:hover {
  background: rgba(255,255,255,0.92);
  transform: translateY(-1px);
}
.footer-cta-btn-sec {
  background: transparent;
  color: var(--fg-on-dark);
  border-color: rgba(255,255,255,0.30);
}
.footer-cta-btn-sec:hover {
  border-color: rgba(255,255,255,0.60);
  background: rgba(255,255,255,0.05);
  transform: translateY(-1px);
}

/* Rule variants */
.footer-rule {
  height: 1px; background: rgba(255,255,255,0.12);
  margin: var(--space-16) 0 var(--space-10);
}
.footer-rule-top {
  margin: 0 0 var(--space-16);
  background: rgba(255,255,255,0.08);
}

/* Nav grid: brand meta + 3 link columns */
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: var(--space-14);
  align-items: start;
}
.footer-col h5 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin: 0 0 var(--space-5);
  font-weight: 500;
}
.footer-col a, .footer-col span {
  font-family: var(--sans);
  font-size: 14.5px;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  border-bottom: 0;
  display: block;
  width: fit-content;
  line-height: 1.85;
  transition: color 0.25s ease;
}
.footer-col a:hover { color: var(--fg-on-dark); opacity: 1; }
.footer-col a { position: relative; }
.footer-col a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 2px;
  height: 1px; width: 0;
  background: currentColor;
  transition: width 0.3s cubic-bezier(.2,.7,.2,1);
}
.footer-col a:hover::after { width: 100%; }
.footer-col .mono-line {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.72);
  line-height: 1.9;
}
.footer-col-brand .footer-coord { color: rgba(255,255,255,0.88); font-variant-numeric: tabular-nums; }
.footer-col-brand .footer-coord .coord-axis {
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  letter-spacing: 0.14em;
  margin-right: 4px;
}
.footer-col-brand .footer-est {
  color: rgba(255,255,255,0.42);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.08);
  max-width: 240px;
}

/* Bottom strip — extra vertical breathing room */
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-8);
  padding: var(--space-4) 0 var(--space-8);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.footer-bottom-left { display: inline-flex; align-items: center; gap: var(--space-4); }
.footer-bottom .footer-logo { height: 18px; width: auto; opacity: 0.6; }
.footer-legal { display: inline-flex; gap: var(--space-5); }
.footer-legal a {
  color: inherit; border-bottom: 0; text-decoration: none;
  transition: color 0.25s ease;
}
.footer-legal a:hover { color: var(--fg-on-dark); }

@media (max-width: 980px) {
  .footer-lede { grid-template-columns: 1fr; gap: var(--space-8); align-items: start; }
  .footer-lede-cta { justify-content: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
}
@media (max-width: 640px) {
  .footer { padding: 44px 20px 28px; }
  .footer-inner { max-width: 100%; }

  .footer-lede { grid-template-columns: 1fr; gap: 18px; align-items: start; margin-bottom: 28px; }
  .footer-lede-brand .footer-brand-logo { height: 28px; margin-bottom: 12px; }
  .footer-lede-tag { font-size: 16.5px; line-height: 1.4; max-width: 100%; }
  /* Hide the footer CTA buttons ("Book a Demo" + "See the Platform") on
     mobile — users have these in the hero and the menu, they don't need
     to appear again at the bottom of the footer. */
  .footer-lede-cta { display: none !important; }

  .footer-rule { margin: 24px 0 18px; }
  .footer-rule-top { margin: 0 0 24px; }

  /* Two-column stack on phones: Product + Company, Connect below */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .footer-col-brand { grid-column: 1 / -1; margin-bottom: 4px; }
  .footer-col:nth-of-type(4) { grid-column: 1 / -1; }   /* Connect spans full width */
  .footer-col h5 { margin-bottom: 10px; font-size: 9.5px; }
  .footer-col a, .footer-col span { font-size: 14px; line-height: 1.8; }
  .footer-col-brand .footer-est { max-width: 100%; }

  .footer-bottom {
    flex-direction: column; gap: 14px; text-align: center; align-items: center; justify-content: center;
    font-size: 9.5px;
    padding: 14px 0 22px;
  }
  .footer-bottom-left { flex-direction: column; gap: 8px; justify-content: center; }
  .footer-bottom .footer-logo { height: 16px; }
  .footer-legal { justify-content: center; flex-wrap: wrap; gap: 18px; }
  .footer-rule { margin: 24px 0 16px; }
}


/* ═══════════════════════════════════════════════════════════════
   05B  PHASE THEATRE - scroll-pinned, phase-by-phase walkthrough
   ═══════════════════════════════════════════════════════════════ */
.phase-theatre {
  position: relative;
  /* tall scroll container - 6 phases × ~44vh each. Deliberate pace through 00→05. */
  height: calc(100vh + 5 * 44vh);
  margin-top: var(--space-8);
  margin-bottom: var(--space-6);
}
/* Tighten the vertical padding on the How-we-work section specifically
   so the section header and scroll-pinned theatre feel like one unit. */
#platform.sxn {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.theatre-stage {
  position: sticky;
  top: 56px;                /* clears masthead */
  height: calc(100vh - 64px);
  min-height: 620px;
  display: flex;
  align-items: center;
  background: var(--parchment);
  z-index: 1;
  padding: 0 var(--space-4);   /* inner gutter so content doesn't kiss the section edge */
}
.theatre-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
  gap: var(--space-12);
  width: 100%;
  height: 100%;
  align-items: stretch;
  padding: var(--space-8) 0 var(--space-10);
  min-width: 0;
  position: relative;
}

/* LEFT column ─────────────────────────────────────────────── */
.theatre-copy {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  /* clear the progress rail sitting to the left: rail width + gap */
  padding-left: 180px;
}

/* Vertical progress rail - pulled OUT of the copy column and anchored
   to the extreme left of the viewport. The stage is sticky inside
   .phase-theatre, so we use position:fixed-like trickery: anchor to
   .theatre-stage which is sticky and spans the full section width. */
.theatre-progress {
  position: absolute;
  top: var(--space-8);
  bottom: var(--space-10);
  transform: none;
  /* Anchor the rail near the sxn-inner left edge (max-width 1280px, centered).
     On wide viewports it aligns just inside the content column; on narrow
     viewports it falls back to a sane gutter. */
  left: -24px;
  height: auto;
  max-height: none;
  width: 156px;
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: var(--space-2);
  align-items: stretch;
  padding-left: 2px;
  overflow: visible;
  z-index: 2;
}
.prog-track {
  position: relative;
  width: 1.5px;
  background: var(--border);
  margin: 6px 0 6px 5px;
  border-radius: 1px;
}
.prog-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--ink);
  height: 0%;
  transition: height 0.22s cubic-bezier(.2,.7,.2,1);
}
.prog-steps {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: 0;
  align-items: center;
}
.prog-step {
  background: transparent;
  border: 0;
  text-align: left;
  padding: 4px 0 4px 2px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  color: var(--graphite);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.18s ease;
  position: relative;
}
.prog-step::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--parchment);
  border: 1.5px solid var(--border);
  transform: translateY(-50%);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.2s cubic-bezier(.2,.7,.2,1);
}
.prog-step em {
  font-style: normal;
  font-size: 9.5px;
  color: var(--rust);
  font-weight: 600;
}
.prog-step span { font-size: 10.5px; color: inherit; white-space: nowrap; }
.prog-step.is-active { color: var(--ink); }
.prog-step.is-active::before {
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-50%) scale(1.25);
}
.prog-step.is-done { color: var(--ink-soft); }
.prog-step.is-done::before { background: var(--ink-soft); border-color: var(--ink-soft); }

/* Cross-fading text cards */
.theatre-text {
  position: relative;
  min-height: 420px;
  min-width: 0;
  width: 100%;
  max-width: none;
  padding-right: var(--space-4);
}
.t-card {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.26s ease, transform 0.32s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.t-card.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.t-id {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rust);
  display: block;
  margin-bottom: var(--space-5);
}
.t-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 var(--space-6);
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
.t-body {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 var(--space-7);
  max-width: 52ch;
  text-wrap: pretty;
}
/* Emphasis inside phase body copy, used sparingly for key phrases
   like "data gaps" on Phase 0. Deeper ink color + medium weight so
   the phrase reads visually stronger than surrounding sans body. */
.t-body strong {
  color: var(--ink);
  font-weight: 500;
}
.t-cap {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gravel);
  display: block;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  max-width: 52ch;
}
/* Matching emphasis for the caption's mono row, rust keyword pulled
   out of the gravel-colored list so the highlighted term reads as
   the "so what" of the phase. */
.t-cap strong {
  color: var(--rust);
  font-weight: 500;
  letter-spacing: 0.24em;
}

/* RIGHT column - visual stage ────────────────────────────────── */
.theatre-visual {
  position: relative;
  height: 100%;
  min-height: 560px;
  border: 1px solid var(--border);
  background: var(--parchment);
  overflow: hidden;
}
.theatre-visual::before,
.theatre-visual::after {
  /* corner ticks like the plates */
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 0 solid var(--ink);
  opacity: 0.45;
}
.theatre-visual::before { top: 10px; left: 10px; border-top-width: 1px; border-left-width: 1px; }
.theatre-visual::after { bottom: 10px; right: 10px; border-bottom-width: 1px; border-right-width: 1px; }

.t-vis {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 0.3s ease, transform 0.38s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.t-vis.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.t-vis .plate-slot {
  width: 100%;
  height: 100%;
  border: 0;          /* outer frame already there */
}
/* Strip the dashed placeholder border on theatre plates only */
.t-vis .plate-slot::after { display: none; }
.t-vis .plate-slot::before { opacity: 0.35; }

/* Stage caption (phase x of 5) */
.theatre-stage::after {
  content: "SCROLL · PHASE " attr(data-current) " / 5";
  position: absolute;
  bottom: 18px; right: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--graphite);
  pointer-events: none;
}

/* Reduced motion: collapse theatre to a flat stack */
@media (prefers-reduced-motion: reduce) {
  .phase-theatre { height: auto; }
  .theatre-stage { position: static; height: auto; min-height: 0; padding: var(--space-12) 0; }
  .t-card, .t-vis { position: static; opacity: 1; transform: none; pointer-events: auto; }
  .theatre-text, .theatre-visual { min-height: 0; }
  .theatre-grid { grid-template-columns: 1fr; }
}

/* Tablet - collapse columns, keep pin.
   Key fix: put the progress rail on its OWN row above the text so the
   absolute-positioned .t-cards never overlap the progress labels. */
@media (max-width: 980px) {
  .theatre-stage { padding: 0 var(--space-5); min-height: auto; height: calc(100vh - 80px); }
  .theatre-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    padding: var(--space-8) 0;
  }
  .theatre-copy {
    padding-left: 0;
  }
  .theatre-progress {
    position: static;
    transform: none;
    width: 100%;
    max-height: none;
    height: auto;
    grid-template-columns: 1fr;    /* horizontal progress on tablet */
    gap: var(--space-3);
    padding-left: 0;
  }
  /* Horizontal track on tablet */
  .prog-track {
    width: 100%;
    height: 2px;
    margin: 12px 0;
  }
  .prog-fill {
    top: 0; bottom: 0; left: 0; right: auto;
    width: 0%; height: 100%;
    transition: width 0.4s cubic-bezier(.2,.7,.2,1);
  }
  .prog-steps {
    grid-template-rows: auto;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
  }
  .prog-step { padding: 4px 0 0; flex-direction: column; align-items: flex-start; gap: 2px; }
  .prog-step::before {
    left: 0;
    top: -14px;
    transform: translate(0, 0);
  }
  .prog-step.is-active::before { transform: scale(1.3); }
  .prog-step span { font-size: 11px; }

  .theatre-text { min-height: 280px; max-width: 100%; }
  .theatre-visual { min-height: 340px; }
  .phase-theatre { height: calc(100vh + 5 * 180vh); }
}

/* Phone — visual-first pinned stage.  Pin engages as soon as the
   section becomes the focus (header is tiny); the only phase indicator
   is a "Phase N" rectangle in the top-right of each visual.  Copy
   compact below.  Zero dead space. */
@media (max-width: 720px) {
  /* The outer kicker + h2 are hidden on mobile — an identical pair lives
     inside .theatre-stage (see .theatre-mobile-head) so the headline is
     always visible WITH the pinned visual.  M10 pattern. */
  #platform.sxn {
    padding: 0 !important;
    margin-top: 56px !important;     /* breathing room above the section */
  }
  #platform .sxn-inner > .kicker,
  #platform .sxn-inner > .sxn-display,
  #platform .sxn-inner > .sxn-lede { display: none !important; }

  /* In-stage header (mobile only).  Extra bottom padding so there's
     clear breathing room between the title and the visual below it. */
  .theatre-mobile-head {
    display: block !important;
    padding: 4px 16px 18px !important;
    margin-bottom: 18px !important;
    background: var(--parchment);
    position: relative;
    z-index: 3;
    border-bottom: 1px solid rgba(16,25,43,0.14) !important;
  }
  .theatre-mobile-head .kicker {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--rust);
    margin: 0 0 4px;
  }
  .theatre-mobile-display {
    font-family: var(--serif);
    font-size: 26px;
    line-height: 1.06;
    letter-spacing: -0.018em;
    margin: 0;
    color: var(--ink);
  }
  .theatre-mobile-display em { font-style: italic; }
  .theatre-mobile-display .line {
    display: inline;
    font-size: 26px;
    line-height: 1.06;
  }
  .theatre-mobile-display .line + .line::before { content: " "; }

  .phase-theatre {
    /* Match Features & Use Cases: 120vh per step so phases advance at
       the same cadence as the module scroll.  Total = 100vh + 5*120vh
       = 700vh of scroll range. */
    height: calc(100vh + 5 * 120vh);
    margin-top: 0 !important;
    margin-bottom: 48px !important;   /* tight — no random blank space before Ch02 */
  }
  /* Mobile theatre: single sticky pinned block.  Simple block layout
     (not grid / flex) so the structure is rock-solid:
       [mobile-head]  — natural height, top of stage
       [visual]       — fixed 40vh, explicit dimensions
       [copy]         — natural height, below visual
     Sticky top: 25vh / height: 75vh matches Features' mod-stage. */
  .theatre-stage {
    position: sticky;
    top: 25vh !important;
    height: 75vh !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    background: var(--parchment);
    z-index: 2;
    align-items: initial !important;   /* override desktop center-align */
  }
  .theatre-stage::after { display: none !important; content: none !important; }

  .theatre-grid {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  /* Hide every "Phase N" button / label above the section titles on
     mobile — the progress rail (.prog-step pills "Phase 1 Digitize"
     etc.), the per-card .t-id label, and the prog-track.  Only the
     actual section title inside each .t-card + the Phase-N rectangle
     inside the visual remain. */
  .theatre-progress,
  .prog-track,
  .prog-fill,
  .prog-steps,
  .prog-step { display: none !important; }

  /* Visual — fixed 40vh so the box is reliable regardless of SVG
     aspect ratio.  Strip desktop 1px border + corner-tick pseudos. */
  .theatre-visual {
    order: unset !important;
    display: block !important;
    position: relative !important;
    width: auto !important;
    height: 40vh !important;
    min-height: 0 !important;
    max-height: 40vh !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    margin: 8px 12px 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .theatre-visual::before,
  .theatre-visual::after {
    display: none !important;
    content: none !important;
  }
  .t-vis {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  .t-vis.is-active { opacity: 1; pointer-events: auto; }
  .t-vis .plate-slot { width: 100% !important; height: 100% !important; }
  /* Maximize SVG drawing inside the plate on mobile */
  .t-vis .plate-slot.phase-drawing .plate-illo { padding: 4px !important; }
  .t-vis .plate-slot.phase-drawing .plate-illo > svg.bp-svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  /* Strip every desktop chrome element from the plate on mobile:
     - in-plate stamp (top-right PHASE label)
     - corner ticks at all 4 corners (the 14px L-shaped marks)
     - plate-slot ::before blueprint grid (1px horizontal/vertical
       lines at 48px intervals — THIS is what was rendering as a
       "gray bar" above the phase badge on specific phases)
     - plate-slot ::after inner dashed border */
  .t-vis .plate-stamp,
  .t-vis .corner-tick { display: none !important; }
  .t-vis .plate-slot::before,
  .t-vis .plate-slot.phase-drawing::before,
  .t-vis .plate-slot::after,
  .t-vis .plate-slot.has-illo::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
    border: 0 !important;
    opacity: 0 !important;
  }

  /* In-visual phase-label removed on mobile — replaced by the
     in-card .phase-badge above each section title (see below). */
  .t-vis .phase-label { display: none !important; }

  /* Phase badge — small rust-tinted rectangle sitting RIGHT ABOVE each
     t-title.  Consistent across every phase (0-5), cleaner than the
     old in-visual top-right label. */
  .t-card .phase-badge {
    display: inline-block !important;
    padding: 4px 10px !important;
    margin: 0 0 10px !important;
    font-family: var(--mono) !important;
    font-weight: 400 !important;
    font-size: 9.5px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--rust) !important;
    background: rgba(194, 87, 45, 0.08) !important;
    border: 1px solid rgba(194, 87, 45, 0.22) !important;
    border-radius: 3px !important;
    line-height: 1 !important;
    align-self: flex-start;
    box-shadow: none !important;
  }

  /* Belt-and-suspenders: guarantee nothing renders as a stray gray
     line above the phase-badge or the caption on any phase.
     .t-cap has a desktop `border-top: 1px solid var(--border)` that
     sits right above each caption — on mobile that reads as a thin
     gray bar underneath the body copy, which is what users reported
     on Phase 1 and Phase 5 (where body copy is shorter so the line
     sits higher in the cell). Strip it here along with any other
     stray borders on theatre chrome. */
  .t-card,
  .t-card .t-cap,
  .theatre-text,
  .theatre-copy {
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }
  .t-card {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .t-card .t-cap {
    padding-top: 0 !important;
  }
  .t-card > *:first-child { margin-top: 0 !important; }
  /* And make absolutely sure no leftover prog-track 1-2px line can
     render on mobile (the desktop-only track is already display:none,
     this is defensive). */
  .theatre-copy .prog-track,
  .theatre-copy .prog-steps,
  .theatre-copy .prog-step,
  .theatre-copy .theatre-progress,
  .theatre-copy > *:not(.theatre-text) {
    display: none !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* Safety: clip any scaled SVG in phases 2/4 so it can't overflow
     past the visual's bounds and cover the phase label. */
  .t-vis { overflow: hidden !important; }
  .theatre-visual { overflow: hidden !important; }

  /* Copy — block below the fixed-height visual.  All t-cards stack
     in one grid-area inside .theatre-text so the cell auto-sizes
     to the tallest card and cross-fade still works. */
  .theatre-copy {
    padding: 0 18px 12px !important;
    display: block !important;
    order: unset !important;
    position: relative;
    z-index: 3;
    background: var(--parchment);
    min-height: 0 !important;
    width: auto !important;
  }
  .theatre-text {
    position: relative;
    display: grid !important;
    grid-template-areas: "card";
    max-width: 100%;
  }
  .t-card {
    grid-area: card;
    position: relative;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  .t-card.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
  /* The small "Phase N · Name" label above each section title was
     rendering inconsistently across phases on mobile (some hidden, some
     cut off).  Remove it entirely on mobile — the section title alone
     carries the meaning, and the Phase-N rectangle in the visual's
     top-right already serves as the phase indicator. */
  .t-id { display: none !important; }
  .t-title {
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.08 !important;
    margin-bottom: 4px !important;
  }
  .t-body {
    font-size: 12.5px !important;
    line-height: 1.38 !important;
  }
  /* Caption — allow wrapping so dot-separated terms never clip. */
  .t-cap {
    font-size: 9px !important;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    margin-top: 6px !important;
    display: block;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.5;
  }
}


/* ═══════════════════════════════════════════════════════════════
   05C  PHASE DRAWING - attached-file SVGs injected into t-vis plates
   ═══════════════════════════════════════════════════════════════ */
/* The phase SVGs come from the harmony_pN_drawn_v7.html files. They
   declare .bp-svg and their own viewBox - we only need to center and
   scale them inside the plate-illo wrapper without touching their
   internal geometry (the drawings' coordinates are relative to their
   own viewBox). */
.t-vis .plate-slot.phase-drawing .plate-illo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2.2vw, 32px);
  box-sizing: border-box;
}
.t-vis .plate-slot.phase-drawing .plate-illo > svg.bp-svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
}
/* Phases 02–05 use wide viewBoxes (2–2.5:1). The stage frame is taller
   than that, so aspect-preserved fitting leaves vertical gaps. Tighten
   the padding so the drawing scales up but still fits fully inside the
   blueprint frame - no clipping at the edges. */
.t-vis[data-phase="2"] .plate-slot.phase-drawing .plate-illo,
.t-vis[data-phase="4"] .plate-slot.phase-drawing .plate-illo {
  padding: clamp(2px, 0.3vw, 6px);
}
.t-vis[data-phase="2"] .plate-slot.phase-drawing .plate-illo > svg.bp-svg,
.t-vis[data-phase="4"] .plate-slot.phase-drawing .plate-illo > svg.bp-svg {
  transform: scale(1.08);
  transform-origin: center;
}
.t-vis[data-phase="3"] .plate-slot.phase-drawing .plate-illo,
.t-vis[data-phase="5"] .plate-slot.phase-drawing .plate-illo {
  padding: clamp(8px, 1vw, 14px);
}
/* Keep the blueprint grid visible behind the drawings, but soften it
   so it doesn't compete with the drawn linework. */
.t-vis .plate-slot.phase-drawing::before { opacity: 0.55; }
/* Phase-label (in-visual, top-right) — no longer used on mobile or
   desktop (the in-card .phase-badge handles phase ID instead). */
.t-vis .phase-label { display: none; }
/* Phase-badge (in-card, above title) — hidden on desktop, shown only
   on mobile inside each .t-card. */
.t-card .phase-badge { display: none; }

/* Mobile-only persistent phase pill (see Homepage.html for the DOM
   element, and responsive.css for the mobile styling).  Hidden on
   desktop — the desktop prog-step rail plus .t-id handle phase
   identification on larger viewports. */
.mobile-phase-pill { display: none; }

/* Mobile-only in-stage headers — hidden on desktop (the regular
   .sxn-inner kicker + h2 / features-head handle desktop).  Mobile
   media query below shows them. */
.theatre-mobile-head,
.mod-mobile-head { display: none; }

/* Stamp in the top-right corner - tiny mono caption */
.t-vis .plate-slot.phase-drawing .plate-stamp {
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--graphite);
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
}


/* ═══════════════════════════════════════════════════════════════
   Transition bridge - hero → "How it works"
   An architectural interlude: twin rules with tick marks, a phase
   ladder (00 → 05) that scans left-to-right, and a mono caption.
   Draws itself in when it enters the viewport.
   ═══════════════════════════════════════════════════════════════ */
.transition-bridge {
  position: relative;
  background: transparent;
  padding: var(--space-16) 0 var(--space-20);
  overflow: hidden;
}
/* Chapter 03, 04, 05 MUST share the exact tan used behind
   "Running on American plants today." (.floor-sxn bg = #F5EDE5).
   Forced with !important and re-asserted at every breakpoint so the
   color never drifts back to parchment on mobile or tablet. */
.transition-bridge.tb-chapter-03,
.transition-bridge.tb-chapter-04,
.transition-bridge.tb-chapter-05,
div.transition-bridge.tb-chapter-03,
div.transition-bridge.tb-chapter-04,
div.transition-bridge.tb-chapter-05 {
  background: #F5EDE5 !important;
  background-color: #F5EDE5 !important;
}
.tb-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-12);
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: var(--space-6);
  align-items: center;
  justify-items: center;
  text-align: center;
}
.tb-rule {
  position: relative;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0,
    var(--border) 12%,
    var(--border) 88%,
    transparent 100%
  );
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.tb-rule-flipped {
  background: linear-gradient(
    to right,
    transparent 0,
    var(--border) 12%,
    var(--border) 88%,
    transparent 100%
  );
}
.tb-tick {
  position: absolute;
  left: 50%;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--ink);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  transition: transform 0.5s ease 0.8s;
}
.tb-meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--graphite);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.7s ease 0.35s, transform 0.8s cubic-bezier(.2,.7,.2,1) 0.35s;
}
.tb-label-em { color: var(--ink); }
.tb-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--rust); opacity: 0.7;
}
.tb-phases {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-6);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--graphite);
}
.tb-ph {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s ease, transform 0.6s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(0.45s + var(--i) * 0.08s);
}
.tb-ph:last-child { color: var(--rust); font-weight: 600; }

/* Active state - triggered by IntersectionObserver */
.transition-bridge.is-in .tb-rule { transform: scaleX(1); }
.transition-bridge.is-in .tb-tick { transform: translateX(-50%) scaleY(1); }
.transition-bridge.is-in .tb-meta {
  opacity: 1; transform: translateY(0);
}
.transition-bridge.is-in .tb-ph {
  opacity: 1; transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   Generic reveal - kicker / display / lede staggered fade-in
   Elements inside .reveal-sxn start hidden; IntersectionObserver
   adds .is-in to the section which releases them via a delay var.
   ═══════════════════════════════════════════════════════════════ */
.reveal-sxn .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.8s cubic-bezier(.2,.7,.2,1),
    transform 0.9s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-sxn.is-in .reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Faster reveal for the How We Work heading + subtext so they
   arrive snappier on first viewport entry. Paired with a dedicated
   pre-fire IntersectionObserver in Homepage.html (see the script
   block that targets .platform-fast-reveal) which triggers the
   .is-in class well before the section hits the viewport, so by
   the time the user scrolls to it the content is already settled
   in. */
.platform-fast-reveal .reveal {
  transition:
    opacity 0.32s cubic-bezier(.2,.7,.2,1),
    transform 0.36s cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  .tb-rule, .tb-tick, .tb-meta, .tb-ph,
  .reveal-sxn .reveal {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .tb-rule { transform: scaleX(1) !important; }
}

@media (max-width: 768px) {
  .transition-bridge { padding: var(--space-12) 0 var(--space-14); }
  .tb-inner { padding: 0 var(--space-6); gap: var(--space-5); }
  .tb-phases { gap: var(--space-4); font-size: 10px; }
  .tb-meta { font-size: 10px; gap: 10px; }
}


/* ═══════════════════════════════════════════════════════════════
   TRANSITION · HOW IT WORKS → ON THE FLOOR
   A soft "curtain lift" - the dark section rises from below with
   rounded top corners, preceded by a chapter marker with a floor-plan
   tick sequence that animates across as it enters view.
   ═══════════════════════════════════════════════════════════════ */

.floor-bridge {
  position: relative;
  padding: 0 0 120px;
  margin-top: 0;
  background: var(--parchment);
  overflow: hidden;
}
#platform { padding-bottom: 0; }

.floor-bridge .fb-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* Horizontal surveyor rule with center tick */
.floor-bridge .fb-rule {
  position: relative;
  width: min(640px, 88%);
  height: 1px;
  background: var(--ink);
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.floor-bridge .fb-rule .fb-tick {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 1px;
  height: 11px;
  background: var(--rust);
  transform: translateX(-50%) scaleY(0);
  transform-origin: center top;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1) 0.6s;
}

/* Chapter label row */
.floor-bridge .fb-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease 0.9s, transform 0.6s cubic-bezier(.2,.7,.2,1) 0.9s;
}
.floor-bridge .fb-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--graphite);
}
.floor-bridge .fb-label-em {
  color: var(--ink);
  font-weight: 500;
}
.floor-bridge .fb-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--graphite); opacity: 0.5;
}

/* Plant-map sequence of tick marks (architectural) */
.floor-bridge .fb-marks {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 0;
}
.floor-bridge .fb-mark {
  width: 1px;
  height: 14px;
  background: var(--ink);
  opacity: 0.35;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(1.1s + var(--i) * 0.06s);
}
.floor-bridge .fb-mark-x {
  height: 22px;
  opacity: 1;
  background: var(--rust);
  width: 2px;
}

/* Scroll cue */
.floor-bridge .fb-cue {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.6s ease 1.9s, transform 0.8s cubic-bezier(.2,.7,.2,1) 1.9s;
}
.floor-bridge .fb-arrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--rust);
  animation: fb-bob 2.4s ease-in-out infinite;
}
.floor-bridge .fb-cue-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--graphite);
}
@keyframes fb-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Reveal states */
.floor-bridge.is-in .fb-rule { transform: scaleX(1); }
.floor-bridge.is-in .fb-rule .fb-tick { transform: translateX(-50%) scaleY(1); }
.floor-bridge.is-in .fb-meta { opacity: 1; transform: translateY(0); }
.floor-bridge.is-in .fb-mark { transform: scaleY(1); }
.floor-bridge.is-in .fb-cue { opacity: 1; transform: translateY(0); }

/* Warm cream lifted plate with rounded top corners - matches reference */
.floor-sxn {
  position: relative;
  background: #F5EDE5;
  color: var(--ink);
  border-top: none;
  border-radius: 32px 32px 0 0;
  margin-top: 0;
  padding-top: 0;
  transform: translateY(32px);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity 0.9s ease;
  box-shadow: 0 -18px 40px -28px rgba(16,25,43,0.18);
}
.floor-sxn.is-in {
  transform: translateY(0);
  opacity: 1;
}
.floor-sxn .kicker { color: var(--rust); }
.floor-sxn .sxn-display { color: var(--ink); }
.floor-sxn .sxn-display em { font-style: italic; color: var(--ink); }

/* Subtle inner top-edge highlight to emphasize the "lift" */
.floor-sxn::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.55) 25%,
    rgba(255,255,255,0.75) 50%,
    rgba(255,255,255,0.55) 75%,
    transparent 100%);
  pointer-events: none;
  border-radius: 32px 32px 0 0;
}

/* Decorative curtain that sits at the top edge on reveal */
.floor-curtain {
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 80px;
  pointer-events: none;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(255,255,255,0.35) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 1.4s ease 0.3s;
}
.floor-sxn.is-in .floor-curtain { opacity: 1; }

/* Customer cards read on warm cream - subtle ink strokes */
.floor-sxn .cust-card {
  border-top-color: rgba(16,25,43,0.35);
}
.floor-sxn .cust-name,
.floor-sxn .cust-body,
.floor-sxn .cust-caption { color: inherit; }

/* Mobile: less aggressive transitions */
@media (max-width: 720px) {
  .floor-bridge { padding: var(--space-12) 0 var(--space-8); }
  .floor-bridge .fb-marks { gap: 10px; }
  .floor-sxn { border-radius: 22px 22px 0 0; margin-top: -14px; }
  .floor-sxn::before { border-radius: 22px 22px 0 0; }
}


/* ═══════════════════════════════════════════════════════════════
   FLOOR SECTION - reference layout (warm cream panel + dark tiles)
   ═══════════════════════════════════════════════════════════════ */

.floor-sxn .floor-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 140px var(--space-12) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

/* Rhythm inside the cream panel */
.floor-sxn .kicker { margin-bottom: 56px; }
.floor-display { margin-top: 0; }
.floor-lede { margin: 48px 0 0; }
.floor-ctas { margin-top: 56px; margin-bottom: 60px; }

/* Kicker centered and small above headline */
.floor-sxn .kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--rust);
  margin-bottom: var(--space-2);
}
.floor-sxn .kicker::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--rust);
  display: inline-block;
}

/* Display headline */
.floor-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 5.6vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: var(--space-3) 0 0;
  max-width: 20ch;
}

/* Sub lede */
.floor-lede {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--graphite);
  margin: var(--space-5) 0 var(--space-2);
  max-width: 48ch;
}

/* CTA row */
.floor-ctas {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
}
.floor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.floor-btn-pri {
  background: var(--ink);
  color: var(--parchment);
}
.floor-btn-pri:hover {
  transform: translateY(-1px);
  background: #1a2236;
}
.floor-btn-sec {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(16,25,43,0.3);
}
.floor-btn-sec:hover {
  background: rgba(16,25,43,0.05);
  border-color: rgba(16,25,43,0.5);
}

/* Rounded-rectangle tiles - horizontal scroll strip, 2.5 visible */
.floor-tiles {
  display: flex;
  gap: 20px;
  padding: 0 0 0 5vw;
  margin-top: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.floor-tiles::-webkit-scrollbar { display: none; }
.floor-tile {
  position: relative;
  flex: 0 0 45%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 22px;
  background: var(--ink);
  scroll-snap-align: start;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(.2,.7,.2,1), opacity 0.6s ease;
}
.floor-tile:last-child {
  margin-right: 5vw;
}

/* === CTA tile === */
.floor-tile-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 40px 40px;
  background: linear-gradient(135deg, #F0E4C8 0%, #E8D6A8 100%);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 20px 40px -22px rgba(8, 12, 22, 0.35);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.8s cubic-bezier(.2,.7,.2,1), opacity 0.6s ease,
              box-shadow 0.5s ease;
}
.floor-tile-cta::after { display: none; }
.floor-tile-cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 38px 60px -22px rgba(8, 12, 22, 0.5);
}

/* Decorative parallel lines (blueprint/ledger motif) */
.floor-tile-cta .cta-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  opacity: 0.14;
}
.floor-tile-cta .cta-lines span {
  display: block;
  height: 1px;
  background: var(--ink);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.floor-sxn.is-in .floor-tile-cta .cta-lines span { transform: scaleX(1); }
.floor-sxn.is-in .floor-tile-cta .cta-lines span:nth-child(1) { transition-delay: 0.55s; }
.floor-sxn.is-in .floor-tile-cta .cta-lines span:nth-child(2) { transition-delay: 0.65s; }
.floor-sxn.is-in .floor-tile-cta .cta-lines span:nth-child(3) { transition-delay: 0.75s; }
.floor-sxn.is-in .floor-tile-cta .cta-lines span:nth-child(4) { transition-delay: 0.85s; }
.floor-sxn.is-in .floor-tile-cta .cta-lines span:nth-child(5) { transition-delay: 0.95s; }

.floor-tile-cta .cta-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.floor-tile-cta .cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
}
.floor-tile-cta .cta-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rust);
  box-shadow: 0 0 0 4px rgba(200, 90, 46, 0.18);
  animation: cta-pulse 2.4s ease-in-out infinite;
}
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(200, 90, 46, 0.18); }
  50% { box-shadow: 0 0 0 8px rgba(200, 90, 46, 0.0); }
}

.floor-tile-cta .cta-headline {
  font-family: var(--serif);
  font-size: clamp(52px, 5vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 28px 0 24px;
  font-weight: 400;
}
.floor-tile-cta .cta-headline br + * { font-style: italic; }
.floor-tile-cta .cta-body {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  opacity: 0.76;
  max-width: 32ch;
  margin-bottom: 28px;
  text-wrap: pretty;
}
.floor-tile-cta .cta-arrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid rgba(8, 12, 22, 0.18);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.floor-tile-cta .cta-arrow {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  transition: transform 0.5s cubic-bezier(.4,0,.2,1);
}
.floor-tile-cta:hover .cta-arrow {
  transform: translateX(8px);
}

/* CTA tile doesn't need the image-scale/vignette hover behaviors */
.floor-tile-cta:hover .floor-tile-art img,
.floor-tile-cta:hover::after {
  transform: none;
  filter: none;
}
.floor-sxn.is-in .floor-tile { transform: translateY(0); opacity: 1; }
.floor-sxn.is-in .floor-tile:nth-child(1) { transition-delay: 0.15s; }
.floor-sxn.is-in .floor-tile:nth-child(2) { transition-delay: 0.28s; }
.floor-sxn.is-in .floor-tile:nth-child(3) { transition-delay: 0.41s; }

.floor-tile-art {
  position: absolute;
  inset: 0;
}
.floor-tile-art svg,
.floor-tile-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Dimming vignette at top for label legibility */
.floor-tile::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(0deg, rgba(8,12,22,0.65) 0%, transparent 100%);
  pointer-events: none;
  transition: opacity 0.5s ease, height 0.5s ease;
  z-index: 1;
}

/* Real 'Tap for Details' pill element — hidden on desktop (hover reveals info
   via .floor-tile-info instead).  Shown at ≤900px from the mobile block. */
.floor-tile .tap-hint { display: none; }

/* Hover: image subtly scales + darkens; border highlights */
.floor-tile {
  cursor: pointer;
  box-shadow: 0 20px 40px -22px rgba(8, 12, 22, 0.35);
  transition: transform 0.8s cubic-bezier(.2,.7,.2,1), opacity 0.6s ease,
              box-shadow 0.5s ease, outline-color 0.4s ease;
  outline: 1px solid transparent;
  outline-offset: -1px;
}
.floor-tile:hover {
  box-shadow: 0 30px 60px -20px rgba(8, 12, 22, 0.55);
  outline-color: rgba(246, 239, 225, 0.18);
}
.floor-tile .floor-tile-art img {
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter 0.5s ease;
}
.floor-tile:hover .floor-tile-art img {
  transform: scale(1.04);
  filter: brightness(0.72);
}
.floor-tile:hover::after {
  height: 100%;
  background: linear-gradient(0deg, rgba(8,12,22,0.88) 0%, rgba(8,12,22,0.55) 55%, rgba(8,12,22,0.25) 100%);
}

/* Info panel revealed on hover */
.floor-tile-info {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 40px;
  z-index: 4;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease 0.05s, transform 0.6s cubic-bezier(.2,.7,.2,1) 0.05s;
  pointer-events: none;
  color: var(--parchment);
}
.floor-tile:hover .floor-tile-info {
  opacity: 1;
  transform: translateY(0);
}
/* Logo shrinks + moves up on hover, making room for description */
.floor-tile:hover .floor-tile-logo-legacy {
  /* legacy - disabled in favor of dock-to-top */
}
.floor-tile-info-meta {
  display: flex;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 239, 225, 0.72);
  margin-bottom: 14px;
}
.floor-tile-info-meta .dot { opacity: 0.5; }
.floor-tile-info-body {
  font-family: var(--serif);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.42;
  letter-spacing: -0.005em;
  color: rgba(246, 239, 225, 0.96);
  text-wrap: pretty;
  max-width: 48ch;
}
.floor-tile-info-clients {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(246, 239, 225, 0.18);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(246, 239, 225, 0.7);
  line-height: 1.6;
}
.floor-tile-info-clients .clients-label {
  display: block;
  text-transform: uppercase;
  color: rgba(246, 239, 225, 0.5);
  letter-spacing: 0.18em;
  font-size: 10px;
  margin-bottom: 4px;
}
.floor-tile-info-clients .clients-list {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0;
  color: rgba(246, 239, 225, 0.92);
  font-style: italic;
}

.floor-tile-label {
  position: absolute;
  top: var(--space-5);
  left: var(--space-6);
  right: var(--space-6);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--parchment);
  z-index: 2;
}

/* Brand logo overlay on tiles - uniform baseline across all tiles */
.floor-tile-logo {
  position: absolute;
  bottom: 76px;
  left: 36px;
  height: 72px;
  width: auto;
  max-width: 65%;
  object-fit: contain;
  object-position: left bottom;
  z-index: 3;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,0.4));
  transition: opacity 0.6s cubic-bezier(.4,0,.2,1),
              transform 0.7s cubic-bezier(.4,0,.2,1),
              height 0.7s cubic-bezier(.4,0,.2,1),
              bottom 0.7s cubic-bezier(.4,0,.2,1),
              top 0.7s cubic-bezier(.4,0,.2,1),
              left 0.7s cubic-bezier(.4,0,.2,1);
  transform-origin: top left;
  will-change: transform, height, top, bottom;
}
/* Mossberg wordmark - bigger and sits lower */
.floor-tile[data-tile="mossberg"] .floor-tile-logo {
  height: 72px;
  bottom: 76px;
  max-width: 70%;
}
/* ICC logo now lives on middle tile (data-tile="icc") */
.floor-tile[data-tile="icc"] .floor-tile-logo {
  height: 92px;
  bottom: 70px;
}
/* Right tile is no longer truly last - CTA is. Keep CLS logo sizing via data-tile selector */
.floor-tile[data-tile="cls"] .floor-tile-logo {
  height: 76px;
  bottom: 74px;
}
.floor-tile-cta {
  margin-right: 5vw;
}

/* Small meta tag under each logo at rest */
.floor-tile-tag {
  position: absolute;
  left: 36px;
  bottom: 34px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 13px;
  background: rgba(8, 12, 22, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(246, 239, 225, 0.22);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 239, 225, 0.92);
  white-space: nowrap;
  z-index: 3;
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(.4,0,.2,1);
}
.floor-tile-tag .tag-cat {
  color: var(--parchment);
  font-weight: 500;
}
.floor-tile-tag .tag-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(246, 239, 225, 0.5);
  display: inline-block;
}
/* Tag fades on hover (info panel takes over) */
.floor-tile:hover .floor-tile-tag {
  opacity: 0;
  transform: translateY(6px);
}

/* Hover: logos dock to top-left as small brand tag, no overlap with info */
.floor-tile:hover .floor-tile-logo {
  bottom: auto;
  top: 22px;
  left: 26px;
  height: 48px;
  max-width: 42%;
  opacity: 0.85;
}

@media (max-width: 900px) {
  .floor-tile-logo { bottom: 24px; left: 24px; height: 92px; }
  .floor-tile-logo-mossberg { height: 220px; bottom: -56px; left: -10px; }
  .floor-tiles { padding: 0 0 0 6vw; }
  .floor-tile { flex-basis: 78%; }
  .floor-tile-info { left: 24px; right: 24px; bottom: 24px; }
  .floor-tile-info-body { font-size: 15px; }
}

/* Mobile tweaks */
@media (max-width: 900px) {
  .floor-tiles { grid-template-columns: 1fr; }
  .floor-tile { aspect-ratio: 16/9; border-radius: 14px 14px 0 0; }
  .floor-sxn .floor-inner { padding: var(--space-18) var(--space-8) var(--space-14); }
}

/* ──────────────────────────────────────────────────────────────
   Join tile: dark closing card, right of the 3 customer tiles.
   Mirrors the dark-hover aesthetic used on customer tiles.
   ─────────────────────────────────────────────────────────── */
.floor-tile.floor-tile-join {
  background: var(--ink);
  color: var(--parchment);
  overflow: hidden;
  position: relative;
}
.floor-tile.floor-tile-join::before {
  /* faint blueprint grid underlay */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(246,239,225,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,239,225,0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}
.floor-tile.floor-tile-join::after {
  /* soft inner vignette */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(76,111,184,0.18) 0%, transparent 55%),
    linear-gradient(180deg, rgba(11,26,46,0) 0%, rgba(11,26,46,0.6) 100%);
  pointer-events: none;
}
.floor-tile-join-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: clamp(24px, 4cqw, 44px) clamp(22px, 4cqw, 40px) clamp(24px, 4cqw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(16px, 3cqw, 32px);
  container-type: inline-size;
}
.floor-tile-join-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--mono);
  font-size: clamp(9.5px, 2.2cqw, 11px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.6);
  margin-bottom: clamp(12px, 3cqw, 22px);
}
.floor-tile-join-meta .dot { opacity: 0.5; }
.floor-tile-join-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 11cqw, 60px);
  line-height: 0.98;
  letter-spacing: -0.028em;
  color: var(--parchment);
  margin: 0;
  text-wrap: balance;
}
.floor-tile-join-title em {
  font-style: italic;
  color: rgba(246,239,225,0.78);
}
.floor-tile-join-body {
  font-family: var(--serif);
  font-size: clamp(13px, 3.2cqw, 17px);
  line-height: 1.45;
  color: rgba(246,239,225,0.78);
  max-width: 36ch;
  margin: clamp(10px, 2cqw, 20px) 0 0;
  text-wrap: pretty;
}
.floor-tile-join-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
.floor-join-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(11px, 2.4cqw, 15px) clamp(14px, 3.2cqw, 20px);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: clamp(12px, 2.8cqw, 14px);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s ease, color .3s ease, border-color .3s ease;
}
.floor-join-btn::after {
  content: "→";
  font-family: var(--mono);
  font-weight: 400;
  opacity: 0.75;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.floor-join-btn:hover { transform: translateY(-1px); }
.floor-join-btn:hover::after { transform: translateX(3px); }
.floor-join-btn-pri {
  background: var(--parchment);
  color: var(--ink);
  border: 1px solid var(--parchment);
}
.floor-join-btn-pri:hover {
  background: var(--chalk);
  border-color: var(--chalk);
}
.floor-join-btn-sec {
  background: transparent;
  color: var(--parchment);
  border: 1px solid rgba(246,239,225,0.28);
}
.floor-join-btn-sec:hover {
  border-color: rgba(246,239,225,0.7);
  background: rgba(246,239,225,0.04);
}


/* ═══════════════════════════════════════════════════════════════
   FEATURES & USE CASES - 3-col card grid, blueprint visuals
   (matches phase-card format)
   ═══════════════════════════════════════════════════════════════ */

.features-sxn {
  background: #F5EDE5;
  color: var(--ink);
  border-top: 1px solid rgba(16,25,43,0.08);
  padding: var(--space-18) var(--space-12) var(--space-18);
}
.features-sxn .kicker { color: var(--rust); }

.features-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-12);
  align-items: end;
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(16,25,43,0.14);
}
.features-sxn .sxn-display { font-size: 44px; line-height: 1.04; }

/* How We Work — match the Features title size and add a separator
   line under the head block, so the title visually hands off to the
   phase theatre the same way .features-head hands off to the grid. */
#platform .sxn-inner > .sxn-display { font-size: 44px; line-height: 1.04; }
#platform .sxn-inner > .sxn-lede {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(16,25,43,0.14);
  margin-bottom: var(--space-10);
}
.features-lede {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 44ch;
  justify-self: end;
  margin: 0;
}

/* ─── Grid: 3 columns, even cards ─── */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10) var(--space-8);
}
.feat-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Visual frame - dark hover reveal matching the client-tile language */
.feat-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #F5EDE5;
  border: 1px solid rgba(16,25,43,0.22);
  border-radius: 6px;
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  overflow: hidden;
  transition: border-color 320ms ease, box-shadow 320ms ease;
}
.feat-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(16,25,43,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,25,43,0.06) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}
.feat-frame-viz {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  transition: opacity 0.5s ease, filter 0.5s ease;
}
.feat-frame-viz svg,
.feat-frame svg {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

/* Dark ink curtain - rises on hover */
.feat-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,26,46,0.82) 0%, var(--ink) 100%);
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: 3;
  pointer-events: none;
}

/* Description panel - parchment text, mono meta, serif body - matches floor-tile-info */
.feat-frame-overlay {
  position: absolute;
  left: var(--space-5);
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 4;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease 0.05s, transform 0.6s cubic-bezier(.2,.7,.2,1) 0.05s;
  pointer-events: none;
  color: var(--parchment);
}
.feat-frame-overlay::before {
  /* mono meta line */
  content: attr(data-meta);
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,239,225,0.68);
  margin-bottom: 10px;
}
.feat-frame-overlay::after {
  /* hairline separator under the description */
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: rgba(246,239,225,0.28);
  margin-top: 12px;
}
.feat-frame-overlay .feat-body {
  font-family: var(--serif);
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.42;
  letter-spacing: -0.005em;
  color: rgba(246,239,225,0.96);
  margin: 0;
  max-width: none;
  text-transform: none;
  text-wrap: pretty;
}

/* Hover activation */
.feat-card:hover .feat-frame,
.feat-card:focus-within .feat-frame {
  border-color: rgba(16,25,43,0.5);
  box-shadow: 0 18px 34px -22px rgba(16,25,43,0.35);
}
.feat-card:hover .feat-frame::after,
.feat-card:focus-within .feat-frame::after {
  opacity: 1;
}
.feat-card:hover .feat-frame-viz,
.feat-card:focus-within .feat-frame-viz {
  opacity: 0.22;
  filter: saturate(0%) brightness(1.4);
}
.feat-card:hover .feat-frame-overlay,
.feat-card:focus-within .feat-frame-overlay {
  opacity: 1;
  transform: translateY(0);
}

.feat-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: var(--letter-tracked);
  text-transform: uppercase;
  color: var(--rust);
  margin-top: 2px;
}
.feat-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 2px 0 3px;
}
.feat-body {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 4px;
  max-width: 44ch;
}
.feat-cap {
  margin-top: auto;
  padding-top: var(--space-2);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: var(--letter-tracked);
  text-transform: uppercase;
  color: var(--graphite);
}

/* Foot */
.features-foot {
  margin-top: var(--space-12);
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}
.features-foot-rule {
  flex: 0 0 48px;
  height: 1px;
  background: var(--ink);
  margin-top: 12px;
}
.features-foot-text {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: var(--letter-tracked);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.features-foot-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 68ch;
}
.features-foot-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
}
.features-foot-body {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

/* Tablet - 2 columns */
@media (max-width: 1100px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .feat-title { font-size: 19px; }
}

/* Mobile - 1 column */
@media (max-width: 700px) {
  .features-head { grid-template-columns: 1fr; gap: var(--space-6); }
  .features-lede { justify-self: start; }
  .feat-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .feat-title { font-size: 20px; }
}


/* ──────────────────────────────────────────────────────────────
   From "Running on American plants today" section downward,
   the page sits on a unified cream ground (#F5EDE5).
   ─────────────────────────────────────────────────────────── */
#who-we-are.sxn { background: #F5EDE5; border-top-color: rgba(16,25,43,0.08); }
.close-sxn { background: #F5EDE5; border-top-color: rgba(16,25,43,0.08); border-bottom-color: rgba(16,25,43,0.08); }

/* Footer logo (bottom-left) */
.footer-bottom-left {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.footer-logo {
  display: block;
  height: 22px;
  width: auto;
  opacity: 0.95;
}
.footer-copy {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
@media (max-width: 768px) {
  .footer-bottom-left { flex-direction: column; gap: 10px; text-align: center; }
}

/* Footer brand logo (above the tagline) */
.footer-brand-logo {
  display: block;
  height: 32px;
  width: auto;
  margin-bottom: 14px;
}