/* ============================================
   STRUCTURAL FORCES — Design System
   Blueprint / Structural Engineering Aesthetic
   ============================================ */

/* --- CSS Variables --- */
:root {
  /* Core palette */
  --navy: #0f172a;
  --steel: #334155;
  --steel-light: #475569;
  --blueprint: #3b82f6;
  --blueprint-light: #60a5fa;
  --blueprint-dark: #1d4ed8;
  --warm-white: #f8fafc;
  --warm-white-dim: #f1f5f9;
  --rust: #d97706;
  --rust-light: #f59e0b;
  --rust-dark: #b45309;
  --concrete: #e2e8f0;
  --concrete-dark: #cbd5e1;
  --success: #22c55e;
  --danger: #ef4444;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-heading: 'Plus Jakarta Sans', var(--font-sans);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Sizing */
  --max-width: 1200px;
  --nav-height: 64px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--navy);
  background: var(--warm-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

a {
  color: var(--blueprint);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--blueprint-light);
}

ul { list-style: none; }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-bottom: var(--space-lg);
}

h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-bottom: var(--space-md);
}

h4 {
  font-size: 1.125rem;
  margin-bottom: var(--space-sm);
}

p {
  margin-bottom: var(--space-md);
  max-width: 70ch;
}

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

.text-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.text-sm {
  font-size: 0.875rem;
}

.text-lg {
  font-size: 1.125rem;
}

.text-center {
  text-align: center;
}

/* --- Blueprint Grid Background --- */
.blueprint-bg {
  position: relative;
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

.blueprint-bg-light {
  position: relative;
  background-color: var(--warm-white);
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* --- Blueprint border accent --- */
.blueprint-border {
  border: 1px solid rgba(59, 130, 246, 0.2);
  position: relative;
}

.blueprint-border::before,
.blueprint-border::after {
  content: '';
  position: absolute;
  background: var(--blueprint);
  opacity: 0.3;
}

.blueprint-border::before {
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-top: 2px solid var(--blueprint);
  border-left: 2px solid var(--blueprint);
}

.blueprint-border::after {
  bottom: 0; right: 0;
  width: 12px; height: 12px;
  border-bottom: 2px solid var(--blueprint);
  border-right: 2px solid var(--blueprint);
}

/* --- Navigation --- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid rgba(59, 130, 246, 0.15);
  height: var(--nav-height);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--warm-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.nav-logo:hover {
  color: var(--blueprint);
}

.nav-logo .logo-icon {
  font-size: 1.5rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav-links a {
  color: var(--concrete);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--warm-white);
  background: rgba(59, 130, 246, 0.1);
}

.nav-cta {
  background: var(--rust) !important;
  color: var(--warm-white) !important;
  padding: var(--space-sm) var(--space-lg) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
}

.nav-cta:hover {
  background: var(--rust-dark) !important;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--warm-white);
  border-radius: 1px;
  transition: all 0.3s;
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--navy);
    flex-direction: column;
    padding: var(--space-lg);
    gap: var(--space-sm);
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
  }

  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  .nav-links a {
    width: 100%;
    text-align: center;
    padding: var(--space-md);
  }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--rust);
  color: var(--warm-white);
  border-color: var(--rust);
}

.btn-primary:hover {
  background: var(--rust-dark);
  border-color: var(--rust-dark);
  color: var(--warm-white);
}

.btn-secondary {
  background: transparent;
  color: var(--blueprint);
  border-color: var(--blueprint);
}

.btn-secondary:hover {
  background: var(--blueprint);
  color: var(--warm-white);
}

.btn-light {
  background: var(--warm-white);
  color: var(--navy);
  border-color: var(--warm-white);
}

.btn-light:hover {
  background: var(--concrete);
  border-color: var(--concrete);
}

.btn-outline-light {
  background: transparent;
  color: var(--warm-white);
  border-color: var(--warm-white);
}

.btn-outline-light:hover {
  background: var(--warm-white);
  color: var(--navy);
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.0625rem;
}

/* --- Container --- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* --- Sections --- */
.section {
  padding: var(--space-4xl) 0;
}

.section-sm {
  padding: var(--space-2xl) 0;
}

.section-dark {
  background: var(--navy);
  color: var(--warm-white);
}

.section-light {
  background: var(--warm-white);
}

.section-concrete {
  background: var(--warm-white-dim);
}

.section-blueprint {
  background: var(--navy);
  color: var(--warm-white);
  position: relative;
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* --- SVG Icon Integration --- */
.sf-icon {
  width: 48px;
  height: 48px;
  display: inline-block;
  vertical-align: middle;
}
.sf-icon use {
  stroke: currentColor;
}

/* --- Hero --- */
.hero {
  padding: var(--space-4xl) 0 var(--space-3xl);
  min-height: 70vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0.4) 0%, var(--navy) 100%),
              radial-gradient(ellipse at 20% 50%, rgba(59,130,246,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
/* Blueprint corner markers on hero */
.hero .corner-tl,
.hero .corner-tr,
.hero .corner-bl,
.hero .corner-br {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--blueprint);
  opacity: 0.25;
  z-index: 1;
}
.hero .corner-tl { top: var(--space-lg); left: var(--space-lg); border-top: 2px solid; border-left: 2px solid; }
.hero .corner-tr { top: var(--space-lg); right: var(--space-lg); border-top: 2px solid; border-right: 2px solid; }
.hero .corner-bl { bottom: var(--space-lg); left: var(--space-lg); border-bottom: 2px solid; border-left: 2px solid; }
.hero .corner-br { bottom: var(--space-lg); right: var(--space-lg); border-bottom: 2px solid; border-right: 2px solid; }
.hero .hero-content {
  position: relative;
  z-index: 2;
}

.hero-content {
  max-width: 800px;
}

.hero h1 {
  color: var(--warm-white);
  margin-bottom: var(--space-lg);
}

.hero h1 .highlight {
  color: var(--blueprint);
}

.hero h1 .accent {
  color: var(--rust);
}

.hero p {
  color: var(--concrete);
  font-size: 1.125rem;
  line-height: 1.7;
  margin-bottom: var(--space-xl);
  max-width: 65ch;
}

.hero-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md)
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: var(--space-2xl) 0;
  }
}

/* --- Cards Grid --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .card-grid-3,
  .card-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* --- Force Card --- */
.force-card {
  background: var(--warm-white);
  border: 1px solid var(--concrete-dark);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.force-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.force-card:nth-child(1)::before { background: var(--blueprint); }
.force-card:nth-child(2)::before { background: var(--rust); }
.force-card:nth-child(3)::before { background: #8b5cf6; }
.force-card:nth-child(4)::before { background: var(--danger); }
.force-card:nth-child(5)::before { background: var(--success); }

.force-card:hover {
  border-color: var(--blueprint);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
  transform: translateY(-2px);
}

.force-card .force-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
}

.force-card h3 {
  font-size: 1.125rem;
  margin-bottom: var(--space-xs);
}

.force-card .force-subtitle {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--steel-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
}

.force-card p {
  font-size: 0.9375rem;
  color: var(--steel);
  margin-bottom: 0;
}

/* --- Content Cards --- */
.content-card {
  background: var(--warm-white);
  border: 1px solid var(--concrete);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}

/* Contact page next-steps cards: subtle top accent to signal rising commitment */
.next-steps-grid .content-card {
  border-top: 3px solid var(--concrete-dark);
}

.next-steps-grid .content-card:nth-child(2) {
  border-top-color: var(--blueprint-light);
}

.next-steps-grid .content-card:nth-child(3) {
  border-top-color: var(--blueprint);
}

.content-card-dark {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  color: var(--warm-white);
}

.pricing-card {
  background: var(--warm-white);
  border: 1px solid var(--concrete-dark);
  border-radius: var(--radius-md);
  padding: var(--space-2xl);
  text-align: center;
  transition: all 0.3s;
  position: relative;
}

.pricing-card.featured {
  border-color: var(--rust);
  transform: scale(1.02);
  box-shadow: 0 4px 24px rgba(217, 119, 6, 0.15);
}

.pricing-card.featured::before {
  content: '⭐ MOST POPULAR';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--rust);
  color: var(--warm-white);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.375rem;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.pricing-card:hover {
  border-color: var(--blueprint);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
}

.pricing-name {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--steel-light);
  margin-bottom: var(--space-sm);
}

.pricing-price {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--space-xs);
}

.pricing-range {
  font-size: 0.875rem;
  color: var(--steel-light);
  margin-bottom: var(--space-lg);
}

.pricing-features {
  text-align: left;
  margin-bottom: var(--space-xl);
}

.pricing-features li {
  padding: var(--space-sm) 0;
  font-size: 0.9375rem;
  color: var(--steel);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.pricing-features li::before {
  content: '✓';
  color: var(--success);
  font-weight: 700;
  flex-shrink: 0;
}

/* --- Force Detail Section --- */
.force-detail {
  padding: var(--space-2xl) 0;
  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.force-detail:last-child {
  border-bottom: none;
}

.force-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.force-detail-number {
  font-family: var(--font-mono);
  font-size: 3rem;
  font-weight: 700;
  color: var(--blueprint);
  opacity: 0.3;
  line-height: 1;
}

.force-detail-icon {
  font-size: 2rem;
}

.force-detail h3 {
  margin-bottom: 0;
}

.force-analogy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (max-width: 768px) {
  .force-analogy {
    grid-template-columns: 1fr;
  }
}

.force-analogy-box {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
}

.force-analogy-box h4 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--steel-light);
  margin-bottom: var(--space-sm);
}

.force-stat {
  display: inline-block;
  background: var(--rust);
  color: var(--warm-white);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

/* --- Failure Patterns Table --- */
.failure-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.failure-table th,
.failure-table td {
  padding: var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--concrete);
}

.failure-table th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--steel-light);
  background: var(--warm-white-dim);
}

.failure-table tr:hover td {
  background: rgba(59, 130, 246, 0.03);
}

@media (max-width: 768px) {
  .failure-table {
    font-size: 0.8125rem;
  }
  .failure-table th,
  .failure-table td {
    padding: var(--space-sm);
  }
}

/* --- Survey Steps --- */
.survey-step {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--concrete);
}

.survey-step:last-child {
  border-bottom: none;
}

.survey-step-number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blueprint);
  color: var(--warm-white);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.125rem;
  border-radius: var(--radius-sm);
}

/* --- Contact Form --- */
.form-group {
  margin-bottom: var(--space-lg);
}

.form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--steel-light);
  margin-bottom: var(--space-sm);
  font-weight: 600;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  border: 1px solid var(--concrete-dark);
  border-radius: var(--radius-sm);
  background: var(--warm-white);
  color: var(--navy);
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--blueprint);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

/* --- Guarantee Badge --- */
.guarantee-badge {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
}

.guarantee-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.guarantee-text h4 {
  color: var(--success);
  margin-bottom: var(--space-xs);
}

.guarantee-text p {
  font-size: 0.875rem;
  color: var(--steel);
  margin-bottom: 0;
}

/* --- Social Proof Bar --- */
.proof-bar {
  padding: var(--space-lg) 0;
  border-top: 1px solid rgba(59, 130, 246, 0.1);
  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.proof-bar p {
  font-size: 0.9375rem;
  color: var(--concrete);
  margin-bottom: 0;
  max-width: 100%;
}

.proof-bar strong {
  color: var(--blueprint);
}

/* --- The Math Section --- */
.math-block {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-2xl);
  font-family: var(--font-mono);
}

.math-block .math-line {
  padding: var(--space-sm) 0;
  color: var(--steel);
}

.math-block .math-result {
  padding: var(--space-md) 0 var(--space-sm);
  color: var(--success);
  font-weight: 700;
  font-size: 1.125rem;
  border-top: 1px dashed var(--concrete-dark);
  margin-top: var(--space-sm);
}

/* --- "Builders Like You" Modal --- */
.blu-wrap {
  position: relative;
  display: inline-block;
}

.blu-trigger {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}

.blu-trigger:hover,
.blu-trigger:focus-visible {
  color: var(--blueprint);
}

.blu-modal {
  position: absolute;
  bottom: calc(100% + var(--space-sm));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 280px;
  background: var(--navy);
  color: var(--warm-white);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  font-size: 0.875rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35);
  z-index: 10;
}

.blu-modal[hidden] {
  display: none;
}

.blu-modal-title {
  display: block;
  font-family: var(--font-heading);
  margin-bottom: var(--space-sm);
}

.blu-modal-list li {
  position: relative;
  padding-left: var(--space-md);
  margin-bottom: var(--space-xs);
  color: var(--concrete);
}

.blu-modal-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--blueprint-light);
}

.blu-modal-footer {
  display: block;
  margin-top: var(--space-sm);
  font-weight: 600;
}

@media (max-width: 480px) {
  .blu-modal {
    max-width: 220px;
  }
}

/* --- Footer --- */
.site-footer {
  background: var(--navy);
  color: var(--steel-light);
  padding: var(--space-2xl) 0;
  border-top: 1px solid rgba(59, 130, 246, 0.1);
  margin-top: auto;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-inner p {
  font-size: 0.8125rem;
  margin-bottom: 0;
}

.footer-links {
  display: flex;
  gap: var(--space-lg);
}

.footer-links a {
  font-size: 0.8125rem;
  color: var(--steel-light);
}

.footer-links a:hover {
  color: var(--blueprint);
}

.footer-attribution {
  max-width: var(--max-width);
  margin: var(--space-sm) auto 0;
  padding: 0 var(--space-lg);
  font-size: 0.6875rem;
  color: inherit;
  opacity: 0.6;
}

.footer-attribution a {
  color: inherit;
  text-decoration: underline;
}

/* --- Section Headers --- */
.section-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blueprint);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.section-heading {
  margin-bottom: var(--space-sm);
}

.section-subheading {
  font-size: 1.125rem;
  color: var(--steel-light);
  max-width: 60ch;
  margin-bottom: var(--space-xl);
}

/* --- Blueprint Corner Decorations --- */
.blueprint-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--blueprint);
  opacity: 0.2;
}

.blueprint-corner-tl {
  top: 8px; left: 8px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.blueprint-corner-tr {
  top: 8px; right: 8px;
  border-top: 2px solid;
  border-right: 2px solid;
}

.blueprint-corner-bl {
  bottom: 8px; left: 8px;
  border-bottom: 2px solid;
  border-left: 2px solid;
}

.blueprint-corner-br {
  bottom: 8px; right: 8px;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

/* --- Utility --- */
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.gap-lg { gap: var(--space-lg); }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.inline-block { display: inline-block; }

/* --- Team Section --- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);
}

.team-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Placeholder initials avatar — swap for a real headshot <img> when photo assets exist */
.team-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blueprint);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

.team-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--navy);
}

.team-role {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blueprint);
}

/* --- Experience Map --- */
.experience-map {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

@media (min-width: 768px) {
  .experience-map {
    /* Fixed 50/50 split — matches the Our Philosophy / Our Story sections' layout intent */
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.map-column {
  /* align-self:start (not stretch) so the map keeps its own aspect ratio instead of
     being force-stretched to match the story well's (variable-height) content */
  align-self: start;
  width: 100%;
}

.map-container {
  position: relative;
  width: 100%;
  aspect-ratio: 959 / 593;
}

@media (max-width: 767px) {
  .map-container {
    max-width: 320px;
    margin: 0 auto;
  }
}

.map-svg-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-pin-dot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--blueprint);
  border: 2px solid var(--warm-white);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3);
  transition: background 0.3s, transform 0.2s;
}

.map-pin:hover .map-pin-dot,
.map-pin:focus-visible .map-pin-dot {
  transform: scale(1.3);
}

.map-pin--selected .map-pin-dot {
  background: var(--success);
  transform: scale(1.4);
}

/* Mobile: the visible dot stays small (a light, not a button), but the tappable
   area around it is enlarged to a touch-friendly 32x32px hit target — the dot
   is centered inside via the flex rule on .map-pin above. Swipe remains the
   primary way to browse, but pins are real tap targets too. */
@media (max-width: 767px) {
  .map-pin {
    width: 32px;
    height: 32px;
  }

  .map-pin-dot {
    width: 8px;
    height: 8px;
    border: none;
    box-shadow: none;
  }

  .map-pin:hover .map-pin-dot,
  .map-pin:focus-visible .map-pin-dot {
    transform: none;
  }

  .map-pin--selected .map-pin-dot {
    transform: scale(1.3);
  }
}

.story-well-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.story-well {
  position: relative;
  background: var(--warm-white);
  border: 1px solid var(--concrete-dark);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  touch-action: pan-y;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  min-width: 0;
  /* A real fixed height, not min-height: with 29 pins of very uneven story
     length, letting the box grow to fit content is exactly what caused the
     visible shift (nav buttons, and the section itself, jumping every time a
     shorter/longer story loads). 360px covers the actual desktop card width
     (~343px tall content) with room to spare; the rare outlier that's still
     too tall scrolls internally (overflow-y: auto) instead of clipping. */
  height: 360px;
}

@media (max-width: 767px) {
  .story-well {
    /* Mobile cards are narrower, so the same story wraps across more lines —
       measured up to ~426px tall at common phone widths (390px), vs ~343px on
       desktop. */
    height: 440px;
  }
}

.story-nav-btn {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--concrete-dark);
  background: var(--warm-white);
  color: var(--navy);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.story-nav-btn:hover,
.story-nav-btn:focus-visible {
  border-color: var(--blueprint);
  color: var(--blueprint);
}

.story-nav-btn .sf-icon {
  width: 20px;
  height: 20px;
}
.story-nav-btn .sf-icon use {
  stroke-width: 2.25;
}

@media (min-width: 768px) {
  .story-nav-btn {
    display: inline-flex;
  }
}

/* Mobile: buttons can't flank the story well (no room), so they drop to their own
   row instead. That row goes *above* the card, right after the map, rather than
   below it — the map is the first thing in view when scrolling into the section,
   and putting the arrows immediately after it (with the hint explaining them)
   makes them discoverable without scrolling past the whole story card first.
   Achieved by wrapping the flex row and forcing the story well onto its own
   full-width line via `order` + `flex-basis: 100%`, then ordering the two buttons
   and the hint ahead of it — no markup duplication needed for the two layouts. */
@media (max-width: 767px) {
  .story-well-wrap {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-sm);
  }

  .story-nav-btn {
    display: inline-flex;
  }

  .story-nav-prev {
    order: 1;
  }

  .story-nav-next {
    order: 2;
  }

  .story-well-wrap .story-swipe-hint {
    order: 3;
    flex-basis: 100%;
  }

  .story-well-wrap .story-well {
    order: 4;
    flex-basis: 100%;
  }
}

.story-well-content {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.story-well-content.story-swipe-out-prev {
  transform: translateX(24px);
  opacity: 0;
}

.story-well-content.story-swipe-out-next {
  transform: translateX(-24px);
  opacity: 0;
}

.story-region {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blueprint);
  margin-bottom: var(--space-sm);
}

.story-headline {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  margin-bottom: var(--space-md);
}

.story-description {
  font-family: var(--font-sans);
  color: var(--steel);
  margin-bottom: 0;
}

.story-swipe-hint {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--steel-light);
  margin-top: var(--space-md);
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .story-swipe-hint {
    display: block;
    text-align: center;
    width: 100%;
  }
}

/* --- Responsive --- */
@media (max-width: 480px) {
  :root {
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 3rem;
    --space-4xl: 4rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .nav-inner {
    padding: 0 var(--space-md);
  }
}

/* --- Common Failure Patterns: real client stories (wayfinder #102) --- */
.failure-stories {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(59, 130, 246, 0.15);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.failure-story {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  /* Solid, not translucent: this was rgba(15,23,42,0.6), tuned to blend with the dark
     section-blueprint page background it used to sit on, landing near-black. On the
     section-light background (wayfinder #126) that same 60%-opacity navy blends toward
     a medium slate gray instead, and the white/light text loses real contrast against
     it. Solid navy keeps the card's own contrast fixed regardless of what's behind it. */
  background: var(--navy);
  padding: var(--space-lg) var(--space-xl);
}

.failure-story-num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--blueprint);
  padding-top: 0.2rem;
}

/* Without flex:1 this wrapper only sizes to its content's intrinsic width, leaving a
   dead gap between the copy and the row's right edge on wide viewports. */
.failure-story-body {
  flex: 1 1 auto;
  min-width: 0;
}

.failure-story h3 {
  color: var(--warm-white);
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
}

.failure-story-forces {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blueprint);
  margin-bottom: 0.5rem;
}

.failure-story p {
  color: var(--concrete);
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  /* Overrides the global `p { max-width: 70ch }` reset, which was capping this
     narrower than the row actually has room for and leaving the row's right side
     empty on wide viewports. */
  max-width: none;
}

@media (max-width: 640px) {
  .failure-story {
    flex-direction: column;
    gap: 0.5rem;
    padding: var(--space-md) var(--space-lg);
  }
}

/* --- Five Forces filmstrip carousel (wayfinder #96 — winning "B3" prototype variant) --- */
.ff-carousel-section {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.ff-carousel {
  position: relative;
}

.ff-track {
  position: relative;
  height: min(76vh, 700px);
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ff-card {
  position: absolute;
  width: min(74vw, 640px);
  height: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Solid wrapper matching the section's own background. It stays at full opacity
     always — the reduced-opacity "peeking" treatment lives on .ff-card-surface,
     the inner layer, so a dimmed card fades toward the page background instead of
     letting the card(s) behind it show through. */
  background: var(--warm-white-dim);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  cursor: pointer;
}

.ff-card-surface {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #0f172a;
  transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ff-card.center {
  z-index: 5;
  transform: translateX(0) scale(1);
  cursor: default;
}

.ff-card.center .ff-card-surface {
  opacity: 1;
}

.ff-card.left1 {
  z-index: 4;
  transform: translateX(-72%) scale(0.84);
}

.ff-card.right1 {
  z-index: 4;
  transform: translateX(72%) scale(0.84);
}

.ff-card.left1 .ff-card-surface,
.ff-card.right1 .ff-card-surface {
  opacity: 0.55;
}

.ff-card.left2 {
  z-index: 3;
  transform: translateX(-128%) scale(0.7);
}

.ff-card.right2 {
  z-index: 3;
  transform: translateX(128%) scale(0.7);
}

.ff-card.left2 .ff-card-surface,
.ff-card.right2 .ff-card-surface {
  opacity: 0.22;
}

.ff-card.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Cover: backdrop photo + caption. Fills the whole card unless it's centered, in which
   case it shrinks to a header and the scrollable content panel takes the rest. */
.ff-cover {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  /* Peeking state: cover fills the whole card, caption sits near the bottom edge.
     Going active shrinks the cover's flex-basis, so the photo (and the caption
     riding its bottom edge) appears to slide up as the detail panel below grows
     to fill the space it gives up — see .ff-content. */
  transition: flex-basis 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ff-card.center .ff-cover {
  flex: 0 0 34%;
}

.ff-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0f172a;
}

.ff-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
  animation: ffKenBurns 9s ease-in-out infinite alternate;
  /* Unifies photos pulled from different sources/color casts into one
     monochrome-amber treatment matching the site's locked photography style. */
  filter: grayscale(0.6) sepia(0.25) contrast(1.05) brightness(0.85);
}

.ff-bg-img.show {
  opacity: 1;
}

@keyframes ffKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

.ff-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.88) 100%);
}

.ff-cover-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}

.ff-cover-caption h3 {
  margin: 0 0 0.15rem;
}

/* Content panel: full force-detail copy. Collapsed (zero height, invisible) while
   peeking; when a card becomes active it grows to roughly the bottom two-thirds of
   the card as the cover shrinks above it (see .ff-cover), then gets its own
   scrollbar if the copy runs taller than that space. */
.ff-content {
  flex: 0 0 0%;
  overflow: hidden;
  opacity: 0;
  background: var(--warm-white);
  transition: flex-basis 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease;
}

.ff-card.center .ff-content {
  flex: 1 1 auto;
  overflow-y: auto;
  opacity: 1;
  transition: flex-basis 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease 0.15s;
}

.ff-content-inner {
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
}

.ff-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: var(--space-lg);
}

.ff-nav-btn {
  background: var(--warm-white);
  border: 1px solid var(--concrete);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  color: var(--steel);
  transition: border-color 0.2s, color 0.2s;
}

.ff-nav-btn:hover {
  border-color: var(--blueprint);
  color: var(--blueprint);
}

.ff-dots {
  display: flex;
  gap: 0.5rem;
}

.ff-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: none;
  background: var(--concrete);
  cursor: pointer;
  padding: 0;
}

.ff-dot.active {
  background: var(--blueprint);
  width: 1.5rem;
  border-radius: 999px;
}

@media (max-width: 767px) {
  .ff-track {
    height: min(82vh, 680px);
    min-height: 560px;
  }

  .ff-card {
    width: min(86vw, 420px);
  }

  .ff-card.left1 {
    transform: translateX(-62%) scale(0.8);
  }

  .ff-card.right1 {
    transform: translateX(62%) scale(0.8);
  }

  .ff-card.left2,
  .ff-card.right2 {
    opacity: 0;
    pointer-events: none;
  }

  .ff-content-inner {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
  }

  .ff-cover-caption {
    padding: 1rem;
  }

  .ff-cover-caption h3 {
    font-size: 1.125rem;
  }
}

/* ============================================
   PAS Section — "Big Pinned Backdrop" (wayfinder #99)
   Full-bleed photo backdrop pinned beside the copy, crossfading between two images per
   beat as the reader scrolls; beat name and pull-quote overlay the backdrop. Folded in
   from the winning prototype variant on branch prototype/pas-scroll-reveal-99.
   ============================================ */
.pas-section {
  background: var(--warm-white);
  padding-top: 0;
}

/* Full-width covers — intro, closing, and the finish panel all share this: a full-bleed sticky
   layer spanning both grid columns, pinned in the same frame as .pas-pin-col/.pas-steps rather
   than a separate section the reader scrolls past. Explicit grid placement (below) means all
   three overlap .pas-pin-col and .pas-steps regardless of source order, so paint order (which
   one's on top) is controlled by z-index alone. */
.pas-full-cover {
  grid-column: 1 / -1;
  grid-row: 1;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: opacity;
}

/* Inner wrapper that JS actually scales/translates during the peel animation. Keeping the
   transform off the outer .pas-full-cover matters: that box spans the full page width, so
   scaling it directly would bleed the scaled box past the viewport edges — its own
   overflow:hidden only clips children, not its own transform — and cause horizontal scroll.
   This wrapper is a child the outer box's overflow:hidden *does* clip. */
.pas-cover-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

/* Intro cover: opaque by default (JS drives it to 0 as the reader scrolls through
   .pas-intro-spacer), sitting above everything else so it's the first thing seen. */
.pas-intro-cover {
  z-index: 5;
}

/* Closing cover: starts hidden — JS brings it in over .pas-closing-appear once the Solution
   beat's copy finishes, then peels it away over .pas-closing-reveal to show the finish panel. */
.pas-closing-cover {
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}

/* Finish panel ("strong finish" CTA): sits underneath the closing cover the whole time, only
   becoming interactive once the cover has peeled away. */
.pas-finish-panel {
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}

/* Scroll room for the intro cover's reveal. The pinned frame is already showing the Challenge
   beat underneath for this whole range — it isn't arriving once this spacer ends. Sized tall
   on purpose: the JS reads this in three phases (hold fully opaque / peel / hold fully clear)
   so a small scroll doesn't immediately start the transition, and the peel finishes with room
   to spare before the Challenge beat's own copy starts moving. */
.pas-intro-spacer {
  height: 240vh;
}

/* Scroll room for the closing sequence: appear brings the cover in over the Solution beat,
   hold gives it a beat to actually be read before anything moves again, reveal peels it away
   (also hold-then-peel, same as the intro) to show the finish panel, and finish-hold gives that
   CTA real dwell time before the pinned frame finally releases into "How It Works." */
.pas-closing-appear {
  height: 90vh;
}

.pas-closing-hold {
  height: 60vh;
}

.pas-closing-reveal {
  height: 180vh;
}

.pas-finish-hold {
  height: 160vh;
}

.pas-intro-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pas-intro-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.4) 50%, rgba(15, 23, 42, 0.65) 100%);
}

.pas-intro-content {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  text-align: center;
  color: var(--warm-white);
}

.pas-intro-eyebrow {
  color: rgba(255, 255, 255, 0.8) !important;
}

.pas-intro-heading {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--warm-white);
  margin: var(--space-sm) 0 0;
}

/* Supporting paragraphs on a cover slide (intro/closing) — left-aligned within the centered
   block, since a wall of centered body copy is hard to read. */
.pas-intro-cover-p {
  position: relative;
  z-index: 2;
  text-align: left;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.0625rem;
  line-height: 1.75;
  margin: var(--space-md) 0 0;
}

.pas-intro-cover-p strong {
  color: var(--warm-white);
  font-weight: 700;
}

.pas-finish-detail {
  position: relative;
  z-index: 2;
  margin: var(--space-md) 0 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
}

/* .btn has no top margin of its own (shared by buttons that sit flush against other layout,
   e.g. inline in nav), and .pas-intro-heading has no bottom margin — so the finish panel's
   "Book a Call" button was landing flush against the heading text above it, on both mobile
   and desktop. */
.pas-finish-panel .btn {
  margin-top: var(--space-lg);
}

/* Floating back/next nav — fixed above everything in the section (higher than the intro
   cover's z-index:5), only shown while the reader is scrolled through .pas-section. */
.pas-nav {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.pas-nav.visible {
  opacity: 1;
  pointer-events: auto;
}

.pas-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: rgba(15, 23, 42, 0.45);
  color: var(--warm-white);
  cursor: pointer;
  padding: 0;
  backdrop-filter: blur(2px);
  transition: border-color 0.2s, background 0.2s, transform 0.15s, opacity 0.2s;
}

.pas-nav-btn:hover,
.pas-nav-btn:focus-visible {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(15, 23, 42, 0.65);
}

.pas-nav-btn:active {
  transform: scale(0.94);
}

.pas-nav-btn:disabled {
  opacity: 0;
  pointer-events: none;
}

.pas-nav-btn .sf-icon {
  width: 22px;
  height: 22px;
}

/* Both buttons reuse the same chevron-right icon, just rotated. */
.pas-nav-back .sf-icon {
  transform: rotate(-90deg);
}

.pas-nav-next .sf-icon {
  transform: rotate(90deg);
}

@media (max-width: 900px) {
  .pas-nav {
    display: none;
  }
}

/* PROTOTYPE — wayfinder issue #116. Persistent "Book a Call" while scrolled through the PAS
   section — desktop and mobile both — instead of the ask only showing up once, at the very
   end. Visibility is driven by JS (IntersectionObserver on #pasSection), not a breakpoint, so
   the same element and logic cover both layouts. */
.pas-floating-cta {
  position: fixed;
  right: 1.25rem;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
  z-index: 40;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.3);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}

.pas-floating-cta.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.pas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}

.pas-pin-col {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.pas-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
  animation: pasKenBurns 10s ease-in-out infinite alternate;
}

.pas-bg-img.show {
  opacity: 1;
}

@keyframes pasKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

.pas-pin-col::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0.75) 100%);
}

.pas-pin-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: var(--warm-white);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-lg);
  padding: 2.25rem 2.5rem 2.5rem;
}

/* Persistent section identity — stays on screen the whole time the reader is scrolling
   through the pinned beats below, so the section's context never disappears. */
.pas-pin-identity {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.pas-pin-identity-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 0.35rem;
}

.pas-pin-identity-heading {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.9);
  max-width: 34ch;
  margin: 0;
}

/* Per-beat content — vertically centered in the pinned frame rather than tucked in a bottom
   corner, with the tagline now the prominent heading and the beat name a small eyebrow above it. */
.pas-pin-beat {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pas-pin-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 var(--space-sm);
  transition: opacity 0.4s ease;
}

.pas-pin-heading {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  max-width: 20ch;
  transition: opacity 0.4s ease;
}

/* Condensed skim version of the beat, for readers not scrolling through the full paragraphs
   on the right. The big heading is the headline; this is the one supporting sentence. */
.pas-pin-subheading {
  font-size: clamp(1.375rem, 3.2vw, 1.875rem);
  font-weight: 700;
  line-height: 1.3;
  max-width: 36ch;
  color: rgba(255, 255, 255, 0.97);
  margin: var(--space-md) 0 0;
  transition: opacity 0.4s ease;
}

/* Progress indicator — dots instead of "X of Y" text. */
.pas-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pas-progress-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
}

.pas-progress-dot.active {
  background: var(--warm-white);
  width: 1.5rem;
  border-radius: 0.25rem;
}

.pas-steps {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
}

.pas-step {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-3xl) 3.5rem;
}

/* Challenge is the first .pas-step, but not the first child of .pas-steps anymore — the intro
   spacer precedes it — so target it by beat rather than :first-child. */
.pas-step[data-beat="challenge"] {
  min-height: 70vh;
}

.pas-step-inner {
  opacity: 0.25;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  max-width: 56ch;
}

.pas-step.in-view .pas-step-inner {
  opacity: 1;
  transform: translateY(0);
}

.pas-step-inner p {
  color: var(--steel);
  margin: 0 0 1.85rem;
  font-size: 1.0625rem;
  line-height: 1.75;
}

.pas-step-inner p strong {
  color: var(--navy);
  font-weight: 700;
}

/* Paragraph-level scroll beats — each paragraph fades/lifts into place as it scrolls into
   view, instead of the whole block appearing at once under the heading. */
.pas-fade-p {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.pas-fade-p.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .pas-grid {
    grid-template-columns: 1fr;
  }

  /* position:relative (not static), same reasoning as .pas-full-cover below — .pas-bg-img
     and .pas-pin-overlay are position:absolute; inset:0 and need this box as their
     containing block, or they render pinned to the document root instead of in place. */
  .pas-pin-col {
    grid-column: auto;
    grid-row: auto;
    position: relative;
    height: 56vh;
  }

  .pas-steps {
    grid-column: auto;
    grid-row: auto;
  }

  /* The pinned-frame illusion only works with position:sticky; on narrow screens everything
     just stacks in source order instead (intro cover, beats, closing cover, finish panel).
     Stays position:relative (not static) so .pas-cover-zoom's position:absolute; inset:0
     still sizes against this box instead of falling back to the document root — static
     would leave the photo/heading rendered miles off-screen at the top of the page. */
  .pas-full-cover {
    grid-column: auto;
    grid-row: auto;
    position: relative;
    height: auto;
    min-height: 60vh;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .pas-intro-cover-p {
    text-align: center;
  }

  /* No pin to scroll-link against on mobile, so the reveal spacers would just be blank gaps. */
  .pas-intro-spacer,
  .pas-closing-appear,
  .pas-closing-hold,
  .pas-closing-reveal,
  .pas-finish-hold {
    display: none;
  }

  .pas-pin-overlay {
    padding: 1.5rem 1.5rem 1.75rem;
    gap: var(--space-md);
  }

  .pas-pin-identity-heading {
    max-width: none;
    font-size: 0.9375rem;
  }

  .pas-pin-heading {
    font-size: clamp(1.5rem, 7vw, 2rem);
    max-width: none;
  }

  .pas-pin-subheading {
    max-width: none;
    font-size: 1.25rem;
  }

  .pas-step {
    min-height: 0;
    padding: var(--space-2xl) var(--space-md);
  }

  .pas-step[data-beat="challenge"] {
    min-height: 0;
  }

}

/* ===== PROTOTYPE — wayfinder issue #116 — PAS mobile "stories" treatment =====
   Instagram/TikTok-Stories-style: one full-viewport slide at a time, scroll-snap + tap to
   advance, long beat copy hidden behind a "read more" sheet rather than shown inline (this
   is the direction locked in after comparing it against a scroll-through-the-page mechanic
   and two other ways of handling the long paragraphs — see issue #116 for the history).
   JS builds the deck from the real DOM (BEATS + each beat's existing .pas-fade-p paragraphs)
   and marks html[data-pas-stories] once it succeeds — the fallback below (the position/fade
   fixes) is what a no-JS reader still gets. Hidden by default; only shown below 900px once
   the deck has actually built. Throwaway — delete this whole block (and the matching script
   in index.html) once #116 resolves and this is folded into the real implementation. */
.pas-stories-wrap {
  display: none;
}

@media (max-width: 900px) {
  html[data-pas-stories] .pas-grid,
  html[data-pas-stories] .pas-nav {
    display: none;
  }

  html[data-pas-stories] .pas-stories-wrap {
    display: block;
  }

  /* In-page, not a full-screen takeover — this scrolls into and out of the normal page flow
     the same way the rest of the PAS section always did. scroll-snap-type lives on the page's
     own scrolling element (html), not a nested overflow:auto box, so there's exactly one
     scroll happening at a time: it snaps slide-to-slide only while those slides are the
     nearest snap points, then releases into ordinary scrolling once you pass the last one.
     proximity, not mandatory — mandatory (paired with scroll-snap-stop:always below) could
     trap a real scroll/swipe at the last slide instead of releasing into "How It Works"
     beneath it. proximity still pulls you onto a slide when you land close to one, but never
     fights a scroll that's clearly continuing past it. */
  html[data-pas-stories] {
    scroll-snap-type: y proximity;
  }

  /* Sticky, not fixed — pins below the site nav only while the deck itself is scrolled into
     view, then scrolls away with the rest of the section like any other in-page element.
     top/z-index account for the site nav (position:sticky, z-index:100, ~64px tall) — at
     z-index:2 and top:~10px this was rendering directly underneath the nav, invisible. */
  .pas-story-progress {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 64px + 0.6rem);
    z-index: 110;
    margin: 0 0.75rem;
    display: flex;
    gap: 0.3rem;
  }

  .pas-story-slide {
    position: relative;
    height: 100dvh;
    overflow: hidden;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--warm-white);
  }

  .pas-story-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .pas-story-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0.88) 100%);
  }

  /* Bottom padding well beyond --space-2xl — content anchored via justify-content:flex-end on
     the slide was landing right at (or under) the home-indicator / gesture-nav safe area on
     real phones, with the "Read the full story" pill practically unreachable. */
  /* Even top/bottom padding, not bottom-heavy — the content block is vertically centered in
     the slide now (was bottom-anchored, hence the old lopsided safe-area padding below). */
  .pas-story-content {
    position: relative;
    z-index: 1;
    padding: var(--space-xl) var(--space-md);
  }

  .pas-story-eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 0.5rem;
  }

  .pas-story-heading {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    font-weight: 800;
    line-height: 1.12;
    margin: 0;
  }

  .pas-story-sub {
    font-size: clamp(1.0625rem, 4.5vw, 1.25rem);
    line-height: 1.5;
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.95);
  }

  .pas-story-progress-seg {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
  }

  .pas-story-progress-seg.done {
    background: rgba(255, 255, 255, 0.9);
  }

  .pas-story-progress-seg.current {
    background: rgba(255, 255, 255, 0.6);
  }

  .pas-story-chevron {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0.85;
    animation: pasStoryBounce 1.6s ease-in-out infinite;
  }

  @keyframes pasStoryBounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 6px); }
  }

  /* T2 — one door out to the full argument, not one per beat. The story slides hit the
     highlights (headline + subheading only); this teaser card is the single link to the
     full-length piece (a real, separate page — see pas-full-story.html) for anyone who
     wants the whole case made, not just the skim version. Styled like an article teaser
     (title + kicker), not a plain "read more" link, so it reads as leading to a real piece
     of writing rather than unfolding more of the same slide. */
  .pas-story-readmore {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    max-width: 30rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
    color: #fff;
    text-decoration: none;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
  }

  .pas-story-readmore span {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
  }
}

/* ===== PROTOTYPE — wayfinder issue #116 — full-story page (your-work-speaks-for-itself.html)
   sticky mini-headers. Reuses the "Compact Sticky Mini-Header" mechanic from the earlier M2
   mobile prototype (photo + eyebrow + heading pins while that section's copy scrolls under
   it, then hands off to the next section's header) — Greg's call that it was the best way to
   present the full PAS copy on one page. Pure CSS (position:sticky) — the original M2 needed
   JS only because it was injecting headers into index.html's shared DOM; this page owns its
   own markup, so no JS is needed here at all. New class names (fs-*) to avoid colliding with
   the unrelated .pas-step-* rules index.html's own PAS section still uses. */
.fs-step {
  margin-bottom: var(--space-2xl);
}

/* top/margin both include the gap (not just top) so the same gap exists both while a header
   is stuck AND during the moment it's scrolling up to meet the nav — without it, the header
   sat flush against the nav with zero breathing room, and the previous section's body text
   was visible for a beat right at that seam during the handoff to the next header. */
.fs-step-header {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-md));
  margin-top: var(--space-md);
  z-index: 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 220px;
  padding: var(--space-xl) var(--space-lg);
  color: var(--warm-white);
  margin-bottom: var(--space-lg);
}

/* The hero variant (first section only): full-bleed like a real hero, not constrained to the
   article's reading column, and not sticky — a hero sits at the top of the page once, it
   doesn't need to pin. Breaks out of .container with the standard full-bleed trick. */
.fs-step--hero .fs-step-header {
  /* relative, not static — this box is still the containing block for the absolutely
     positioned img and ::after scrim; static breaks that exactly like the position:static
     bug fixed earlier on the PAS section (they escape to the document root instead). */
  position: relative;
  top: auto;
  margin: 0 0 var(--space-xl);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  min-height: 340px;
  padding: var(--space-2xl) var(--space-lg);
}

.fs-step--hero .fs-step-heading {
  font-size: clamp(2rem, 5vw, 3rem);
  max-width: 32ch;
}

.fs-step-header img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fs-step-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.85) 100%);
}

.fs-step-eyebrow,
.fs-step-heading,
.fs-step-sub {
  position: relative;
  z-index: 1;
}

.fs-step-eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 0.35rem;
}

.fs-step-heading {
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
}

.fs-step-sub {
  font-size: clamp(1.0625rem, 2.5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.92);
  margin: 0.6rem 0 0;
}

.fs-step-body p {
  margin: 0 0 1.25rem;
  color: var(--steel);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.fs-step-body p strong {
  color: var(--navy);
  font-weight: 700;
}