/* ═══════════════════════════════════════════════════════════════
   TRM SOLUTIONS, PREMIUM LANDING PAGE
   Aesthetic: Institutional Luxury meets Cybersecurity
   Typography: Instrument Serif (display) + Satoshi (body) + IBM Plex Mono (technical)
   Palette: Deep midnight navy with electric blue + warm white
   ═══════════════════════════════════════════════════════════════ */

/* Design tokens now live in css/tokens.css, loaded first on every page. */


*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }


body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


::selection { background: var(--blue); color: var(--midnight); }


/* Display serif carries the brand: all headlines */
h1, h2, h3, h4, .sec-heading {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.14;
}


/* Utility monospace layer — eyebrows, labels, timing markers, footnotes */
.sec-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}


/* Constrain body copy to a comfortable measure */
.sec-subtext, .hero-description { max-width: var(--measure); }


/* Accessibility: visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none !important; }
}


/* ── Animated grid background ── */
.grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.grid-bg::before {
  content: '';
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(rgba(59,139,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,139,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.grid-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, var(--midnight) 70%);
}
/* Grain overlay */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
}


/* ── Container ── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  position: relative;
  z-index: 2;
}


/* ══════════════════════ NAV ══════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
}

.nav.scrolled {
  background: rgba(3,8,22,0.88);
  backdrop-filter: blur(32px) saturate(1.6);
  border-bottom: 1px solid var(--blue-border);
}

.nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.logo-text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 5px;
  color: var(--white);
  text-transform: uppercase;
}

.logo-dot {
  width: 8px; height: 8px;
  background: var(--blue);
  border-radius: 50%;
  margin-left: 2px;
  box-shadow: 0 0 12px var(--blue-glow);
  animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { box-shadow: 0 0 12px var(--blue-glow); }
  50% { box-shadow: 0 0 24px var(--blue-glow), 0 0 48px rgba(59,139,255,0.1); }
}


.nav-center { display: flex; gap: 40px; }

.nav-center a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: color var(--motion-duration) var(--motion-ease);
}

.nav-center a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; width: 0; height: 1.5px;
  background: var(--blue);
  transition: width 0.3s, left 0.3s;
}

.nav-center a:hover { color: var(--white); }

.nav-center a:hover::after { width: 100%; left: 0; }


.nav-cta {
  padding: 12px 32px;
  background: var(--blue);
  color: var(--midnight) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color var(--motion-duration) var(--motion-ease);
  box-shadow: none;
}

.nav-cta:hover {
  background: var(--blue-bright);
}


/* ══════════════════════ HERO ══════════════════════ */
.hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
  position: relative;
  /* The orb that needed clipping is not painted. Hidden overflow was cutting
     the snapshot whenever the row was wider than the window. */
  overflow: visible;
}

/* Subtle dot grid — barely visible technical texture, fades at edges */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(59,139,255,0.18) 1px, transparent 1.5px);
  background-size: 26px 26px;
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, #000 30%, transparent 85%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* Hero content needs to sit above the dot grid */
.hero .container { position: relative; z-index: 2; }


/* Single subtle radial glow - restraint over visual noise */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 1;
}

.hero-orb--1 {
  width: 620px; height: 620px;
  top: -20%; right: -12%;
  background: radial-gradient(circle, rgba(59,139,255,0.06), transparent 65%);
  animation: orbFloat 28s ease-in-out infinite;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -20px); }
}


.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 100px;
  align-items: center;
}

/* Ensure grid children can shrink below content width — prevents mobile overflow */
.hero-layout > * { min-width: 0; }

.hero-layout h1, .hero-layout p, .hero-layout ul, .hero-layout li {
  overflow-wrap: break-word;
  word-wrap: break-word;
}


.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(52px, 5.6vw, 80px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 32px;
  letter-spacing: -1.5px;
  max-width: 580px;
  opacity: 1;
}

.hero h1 .gradient-text {
  background: linear-gradient(135deg, var(--blue-bright), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
}


.hero-description {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 520px;
  line-height: 1.7;
  font-weight: 400;
  margin-bottom: 40px;
  opacity: 1;
}


.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 1;
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 40px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
}

.btn-hero--primary {
  background: linear-gradient(135deg, var(--blue), #2468d6);
  color: #fff;
  box-shadow: 0 4px 24px rgba(59,139,255,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}

.btn-hero--primary:hover {
  background: var(--blue-bright);
}

.btn-hero--primary .btn-arrow {
  transition: transform var(--motion-duration) var(--motion-ease);
}

.btn-hero--primary:hover .btn-arrow { transform: translateX(var(--motion-arrow)); }

.btn-hero--outline {
  background: transparent;
  color: var(--white);
  border: 1.5px solid var(--blue-border-hover);
}

.btn-hero--outline:hover {
  border-color: var(--blue);
  background: var(--blue-dim);
}


/* Hero right side — readiness snapshot card */
.hero-snapshot {
  min-width: 0;
  max-width: 100%;
  opacity: 1;
}

.snap-card {
  background: rgba(10, 22, 48, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid var(--blue-border);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  max-width: 100%;
  min-width: 0;
}

.snap-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  opacity: 0.5;
  pointer-events: none;
}


/* Card header — title + badge */
.snap-header {
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--blue-border);
}

.snap-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.25;
  letter-spacing: -0.2px;
  margin-bottom: 10px;
  overflow-wrap: break-word;
}

.snap-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--blue-bright);
  background: rgba(59,139,255,0.08);
  border: 1px solid rgba(59,139,255,0.2);
  border-radius: 4px;
  padding: 3px 9px;
}


/* Body description */
.snap-body {
  padding: 16px 28px 4px;
}

.snap-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.65;
}


/* Score ring + domain rows */
.snap-score-section {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  padding: 16px 28px 14px;
  align-items: start;
}

.snap-score-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.snap-score-ring {
  position: relative;
  width: 78px;
  height: 78px;
}

.snap-ring-svg {
  width: 78px;
  height: 78px;
  transform: rotate(-90deg);
}

.snap-ring-track {
  fill: none;
  stroke: rgba(59,139,255,0.12);
  stroke-width: 5;
}

.snap-ring-fill {
  fill: none;
  stroke: var(--blue);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 175.93 175.93;
  /* 72 of 100, painted with the card. Not drawn in after load. */
  stroke-dashoffset: 49.26;
  filter: none;
}

.snap-score-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--white);
  letter-spacing: -0.5px;
}

.snap-score-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--blue-bright);
  text-align: center;
  line-height: 1.35;
}


/* Domain rows */
.snap-domains {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.snap-domain {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 5px;
  gap: 4px 8px;
}

.snap-domain-label {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.2;
  grid-column: 1;
  grid-row: 1;
}

.snap-domain-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  grid-column: 2;
  grid-row: 1;
}

.snap-domain-bar {
  height: 5px;
  background: rgba(59,139,255,0.1);
  border-radius: 3px;
  overflow: hidden;
  grid-column: 1 / 3;
  grid-row: 2;
}

.snap-domain-fill {
  height: 100%;
  width: var(--pct);
  border-radius: 3px;
  background: var(--blue);
}

.snap-domain:nth-child(2) .snap-domain-fill { background: rgba(249,115,22,0.85); }

.snap-domain:nth-child(3) .snap-domain-fill { background: linear-gradient(90deg, var(--blue), var(--cyan)); }

.snap-domain:nth-child(4) .snap-domain-fill { background: rgba(59,139,255,0.7); }
/* Identify and Recover. The card previously showed four of the six functions,
   which is a poor look on the card whose job is to establish framework fluency. */
.snap-domain:nth-child(5) .snap-domain-fill { background: rgba(249,115,22,0.85); }
.snap-domain:nth-child(6) .snap-domain-fill { background: linear-gradient(90deg, var(--blue), var(--cyan)); }


/* Recommended next step box */
.snap-rec {
  margin: 0 28px 16px;
  padding: 12px 16px;
  background: rgba(59,139,255,0.04);
  border: 1px solid rgba(59,139,255,0.14);
  border-left: 3px solid rgba(249,115,22,0.7);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.snap-rec-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(249,115,22,0.85);
}

.snap-rec-text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.6;
}


/* CTA button row */
.snap-cta-wrap {
  padding: 0 28px 14px;
}

.snap-cta {
  width: 100%;
  display: block;
  text-align: center;
  box-sizing: border-box;
}


/* Disclaimer footnote */
.snap-footnote {
  padding: 0 28px 20px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
  .snap-ring-fill { stroke-dashoffset: 49.26; }
  .snap-domain-fill { width: var(--pct); }
}


/* ══════════════════════ TRUST MARQUEE ══════════════════════ */
.trust-section {
  padding: 56px 0;
  border-top: 1px solid var(--blue-border);
  border-bottom: 1px solid var(--blue-border);
  background: var(--navy-deep);
  overflow: hidden;
}

.trust-label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.trust-affiliation-note {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.7;
  margin: 18px auto 0;
  max-width: 620px;
  padding: 0 16px;
  line-height: 1.6;
}

.marquee-track {
  display: flex;
  animation: marqueeScroll 30s linear infinite;
  width: max-content;
}

.marquee-track:hover { animation-play-state: paused; }

.marquee-item {
  flex-shrink: 0;
  padding: 0 48px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.3s;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 48px;
}

.marquee-item::after {
  content: '·';
  color: var(--text-faint);
  font-size: 32px;
}

.marquee-item:hover { color: var(--text-secondary); }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* ══════════════════════ SECTION SHARED ══════════════════════ */
section { padding: var(--section-pad) 0; position: relative; }


.sec-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 20px;
}

.sec-label::before {
  content: '';
  width: 32px; height: 1px;
  background: linear-gradient(90deg, var(--blue), transparent);
}

.sec-heading {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.5vw, 62px);
  font-weight: 400;
  line-height: 1.08;
  color: var(--white);
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

.sec-subtext {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 600px;
  line-height: 1.85;
  margin-bottom: 64px;
}


/* ══════════════════════ EXPANDABLE SERVICE CARDS ══════════════════════ */
#services { background: var(--midnight); }


.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}


.svc-card {
  background: var(--navy-deep);
  border: 1px solid var(--blue-border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.4s, box-shadow 0.4s;
  cursor: pointer;
  position: relative;
}

.svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}

.svc-card:hover {
  border-color: var(--blue-border-hover);
  box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 0 30px rgba(59,139,255,0.04);
}

.svc-card:hover::before { opacity: 1; }

.svc-card.expanded {
  border-color: var(--blue-border-hover);
  box-shadow: 0 12px 60px rgba(0,0,0,0.4), 0 0 40px rgba(59,139,255,0.06);
}


.svc-header {
  padding: 36px 36px 32px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.svc-icon-wrap {
  width: 56px; height: 56px; min-width: 56px;
  background: linear-gradient(135deg, var(--blue-dim), var(--cyan-dim));
  border: 1px solid var(--blue-border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svc-icon-wrap svg {
  width: 24px; height: 24px;
  stroke: var(--blue-bright);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svc-content { flex: 1; }

.svc-content h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1.2;
}

.svc-content .svc-brief {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.svc-toggle {
  width: 40px; height: 40px; min-width: 40px;
  border-radius: 50%;
  border: 1px solid var(--blue-border);
  background: var(--blue-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
  align-self: center;
}

.svc-toggle svg {
  width: 18px; height: 18px;
  stroke: var(--blue-bright);
  fill: none;
  stroke-width: 2;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

.svc-card.expanded .svc-toggle {
  background: var(--blue);
  border-color: var(--blue);
}

.svc-card.expanded .svc-toggle svg {
  stroke: var(--midnight);
  transform: rotate(45deg);
}


.svc-expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.16,1,0.3,1), padding 0.4s;
}

.svc-card.expanded .svc-expand {
  max-height: 600px;
}

.svc-expand-inner {
  padding: 0 36px 36px;
  border-top: 1px solid var(--blue-border);
  padding-top: 28px;
}

.svc-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.svc-detail-item h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}

.svc-detail-item p {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.7;
}

.svc-detail-item ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.svc-detail-item ul li {
  font-size: 13px;
  color: var(--text-primary);
  padding-left: 16px;
  position: relative;
}

.svc-detail-item ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--blue);
  font-size: 11px;
}

.svc-pricing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--blue-dim);
  border: 1px solid var(--blue-border);
  border-radius: 12px;
}

.svc-pricing-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.svc-pricing-amount {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  color: var(--white);
  white-space: nowrap;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.svc-pricing-amount span {
  font-size: 12px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  white-space: nowrap;
  margin-left: 4px;
  font-weight: 400;
}


/* ══════════════════════ QUICK-START SERVICES ══════════════════════ */
#quickstart {
  background: var(--navy-deep);
  border-top: 1px solid var(--blue-border);
  overflow: hidden;
}

.qs-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 64px;
}

.qs-intro-right {
  text-align: right;
}

.qs-price-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: linear-gradient(135deg, rgba(0,232,123,0.08), rgba(50,220,232,0.06));
  border: 1px solid rgba(0,232,123,0.2);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: #00e87b;
  letter-spacing: 0.5px;
}

.qs-price-badge::before {
  content: '';
  font-size: 14px;
}


/* Horizontal scrolling carousel */
.qs-carousel-wrap {
  position: relative;
  counter-reset: qscard;
}

.qs-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.qs-carousel::-webkit-scrollbar { display: none; }


.qs-card {
  flex: 0 0 380px;
  scroll-snap-align: start;
  background: var(--navy);
  border: 1px solid var(--blue-border);
  border-radius: 16px;
  padding: 36px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
  cursor: default;
}

.qs-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}

.qs-card:hover {
  border-color: var(--blue-border-hover);
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 40px rgba(59,139,255,0.05);
}

.qs-card:hover::before { transform: scaleX(1); }


.qs-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.qs-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--blue-dim), var(--cyan-dim));
  border: 1px solid var(--blue-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.qs-turnaround {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 5px 12px;
  background: var(--cyan-dim);
  border: 1px solid rgba(50,220,232,0.15);
  border-radius: 100px;
}


.qs-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.2;
}

.qs-card > p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 20px;
}


.qs-documents {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--blue-border);
}

.qs-documents li {
  font-size: 13px;
  color: var(--text-primary);
  padding-left: 20px;
  position: relative;
  line-height: 1.6;
}

.qs-documents li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
}


.qs-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--blue-border);
  gap: 16px;
}

.qs-price {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--white);
  line-height: 1.2;
  white-space: nowrap;
  min-width: 0;
}

.qs-price span {
  font-size: 11px;
  font-family: var(--font-body);
  color: var(--text-secondary);
  white-space: nowrap;
  margin-left: 3px;
}

.qs-cta-link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blue-bright);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s, background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  /* Tap-target compliance (Apple HIG 44×44, WCAG 2.5.5) */
  min-height: 44px;
  padding: 8px 12px;
  margin: -8px -12px;
  border-radius: 8px;
}

.qs-cta-link:hover { gap: 10px; background: rgba(59,139,255,0.08); }


/* Carousel navigation arrows */
.qs-nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
}

.qs-nav-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--blue-border);
  background: var(--navy);
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.qs-nav-btn:hover {
  border-color: var(--blue);
  background: var(--blue-dim);
  color: var(--blue-bright);
  transform: scale(1.08);
}


/* Scroll indicator bar */
.qs-scroll-track {
  width: 100%;
  height: 2px;
  background: var(--blue-border);
  border-radius: 2px;
  margin-top: 24px;
  position: relative;
  overflow: hidden;
}

.qs-scroll-thumb {
  height: 100%;
  width: 16%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  border-radius: 2px;
  transition: left 0.15s;
  position: absolute;
  left: 0;
}
@media (max-width: 1100px) {
  .qs-intro { grid-template-columns: 1fr; gap: 20px; }
  .qs-intro-right { text-align: left; }
}
@media (max-width: 768px) {
  .qs-card { flex: 0 0 320px; padding: 28px; }
}


/* ══════════════════════ TEMPLATES & TOOLS ══════════════════════ */
#templates {
  padding: 130px 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--navy-deep) 100%);
  position: relative;
  overflow: hidden;
}

#templates::before {
  content: "";
  position: absolute;
  top: 10%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(50, 220, 232, 0.04), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
@media (max-width: 768px) {
  .tmpl-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════ LEGAL MODAL ══════════════════════ */
.legal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(2, 6, 18, 0.88);
  backdrop-filter: blur(10px);
  z-index: 1100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}

.legal-overlay.open { display: flex; }

.legal-modal {
  width: 100%;
  max-width: 780px;
  background: var(--navy);
  border: 1px solid var(--blue-border-hover);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  margin: 20px 0 60px;
}

.legal-modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 20px 32px;
  background: var(--navy);
  border-bottom: 1px solid var(--blue-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.legal-modal-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.legal-modal-header h2 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--white);
}

.legal-modal-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--blue-border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.legal-modal-close:hover {
  border-color: var(--blue);
  color: var(--white);
}

.legal-modal-body {
  padding: 32px;
  max-height: 70vh;
  overflow-y: auto;
}

.legal-modal-body h2 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--white);
  margin-top: 36px;
  margin-bottom: 12px;
  line-height: 1.3;
}

.legal-modal-body h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  margin-top: 24px;
  margin-bottom: 8px;
}

.legal-modal-body p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.legal-modal-body ul, .legal-modal-body ol {
  margin: 10px 0 16px 20px;
}

.legal-modal-body li {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.legal-modal-body strong { color: var(--white); }

.legal-modal-body a {
  color: var(--blue-bright);
  text-decoration: none;
}

.legal-modal-body .legal-callout {
  padding: 20px 24px;
  background: rgba(59, 139, 255, 0.05);
  border: 1px solid var(--blue-border);
  border-left: 3px solid var(--blue);
  border-radius: 10px;
  margin: 24px 0;
  font-size: 13px;
  line-height: 1.8;
}

.legal-modal-body .legal-callout.warning {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.04);
  border-color: rgba(245, 158, 11, 0.15);
}

.legal-modal-body .legal-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--blue-border);
}
@media (max-width: 768px) {
  .legal-overlay { padding: 10px; }
  .legal-modal { border-radius: 14px; }
  .legal-modal-header { padding: 16px 22px; }
  .legal-modal-header h2 { font-size: 18px; }
  .legal-modal-body { padding: 22px; max-height: 75vh; }
  .legal-modal-body h2 { font-size: 20px; }
}


/* ══════════════════════ APPROACH / METHODOLOGY ══════════════════════ */
#approach {
  background: var(--navy-deep);
  overflow: hidden;
}

.approach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--blue-border);
}

.approach-step {
  background: var(--navy);
  padding: 48px 32px;
  position: relative;
  transition: background 0.4s;
  counter-increment: approach;
}

.approach-step:hover { background: var(--navy-mid); }

.approach-num {
  font-family: var(--font-display);
  font-size: 72px;
  color: rgba(59,139,255,0.06);
  line-height: 1;
  margin-bottom: 20px;
  font-style: italic;
}

.approach-step h3 {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--white);
  margin-bottom: 12px;
}

.approach-step p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
}

.approach-duration {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--blue);
  letter-spacing: 1px;
}


/* ══════════════════════ CASE STUDIES ══════════════════════ */
#casestudies {
  background: var(--navy-deep);
  border-top: 1px solid var(--blue-border);
  position: relative;
  overflow: hidden;
}

#casestudies::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(50, 220, 232, 0.03), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
  position: relative;
  z-index: 2;
}

.cs-card {
  background: var(--navy);
  border: 1px solid var(--blue-border);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.4s, transform 0.4s;
}

.cs-card:hover {
  border-color: var(--blue-border-hover);
  transform: translateY(-4px);
}

.cs-client-pill {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 12px;
  background: rgba(59, 139, 255, 0.08);
  border: 1px solid var(--blue-border);
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 20px;
}

.cs-challenge {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.3;
  color: var(--white);
  margin-bottom: 24px;
  font-weight: 500;
}

.cs-sections {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
  flex-grow: 1;
}

.cs-block-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
  font-weight: 500;
}

.cs-block-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.cs-outcome {
  padding: 14px 16px;
  background: rgba(0, 232, 123, 0.04);
  border-left: 2px solid var(--green);
  border-radius: 4px;
}

.cs-outcome .cs-block-label {
  color: var(--green);
}

.cs-outcome .cs-block-text {
  color: var(--text-primary);
  font-weight: 500;
}

.cs-quote {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--blue-border);
}

.cs-quote-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.cs-quote-text::before {
  content: '"';
  color: var(--blue);
  margin-right: 2px;
}

.cs-quote-text::after {
  content: '"';
  color: var(--blue);
  margin-left: 2px;
}

.cs-quote-attrib {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

.cs-quote-attrib strong {
  color: var(--text-primary);
  font-weight: 600;
}
@media (max-width: 1100px) {
  .cs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .cs-grid { grid-template-columns: 1fr; gap: 16px; }
  .cs-card { padding: 28px 24px; }
  .cs-challenge { font-size: 20px; }
}


/* ══════════════════════ WHY IT MATTERS / FAQ ══════════════════════ */
#whymatters { background: var(--midnight); border-top: 1px solid var(--blue-border); }

.wm-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 64px;
  align-items: start;
}

.wm-sticky { position: sticky; top: 120px; }

.wm-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}

.wm-stat {
  padding: 20px;
  background: var(--navy);
  border: 1px solid var(--blue-border);
  border-radius: 12px;
}

.wm-stat-num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 4px;
}

.wm-stat-label { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }


.faq-list { display: flex; flex-direction: column; gap: 12px; }

.faq-card {
  background: var(--navy-deep);
  border: 1px solid var(--blue-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.3s;
  cursor: pointer;
}

.faq-card:hover { border-color: var(--blue-border-hover); }

.faq-card.open { border-color: var(--blue-border-hover); }

.faq-header {
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.faq-icon {
  width: 40px; height: 40px; min-width: 40px;
  background: var(--blue-dim);
  border: 1px solid var(--blue-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.faq-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  flex: 1;
  line-height: 1.35;
}

.faq-toggle {
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 50%;
  border: 1px solid var(--blue-border);
  background: var(--blue-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--blue-bright);
  transition: all 0.3s;
  flex-shrink: 0;
}

.faq-card.open .faq-toggle {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--midnight);
  transform: rotate(45deg);
}

.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.16,1,0.3,1);
}

.faq-card.open .faq-body { max-height: 1000px; }

.faq-body-inner {
  padding: 20px 28px 28px;
  margin: 0 24px 0 80px;
  border-top: 1px solid var(--blue-border);
}

.faq-body-inner p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 14px;
}

.faq-body-inner p:last-child { margin-bottom: 0; }

.faq-body-inner strong { color: var(--text-primary); }

.faq-body-inner em { color: var(--text-primary); font-style: italic; }

.faq-highlight {
  padding: 16px 20px;
  background: rgba(243,159,11,0.06);
  border: 1px solid rgba(243,159,11,0.15);
  border-left: 3px solid #f59e0b;
  border-radius: 8px;
  margin-top: 16px;
}

.faq-highlight p { font-size: 14px; color: var(--text-primary); margin-bottom: 0; line-height: 1.7; }
@media (max-width: 1100px) {
  .wm-layout { grid-template-columns: 1fr; gap: 40px; }
  .wm-sticky { position: static; }
  .faq-body-inner { margin-left: 0; padding: 18px 20px 24px; }
}

/* ══════════════════════ CONTACT ══════════════════════ */
#contact {
  background: var(--navy-deep);
  border-top: 1px solid var(--blue-border);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}

.contact-info h3 {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--white);
  margin-bottom: 20px;
  line-height: 1.15;
}

.contact-info > p {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 40px;
}

.contact-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--blue-border);
}

.contact-detail-row:last-of-type { border-bottom: 1px solid var(--blue-border); }

.cd-icon {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 12px;
  background: var(--blue-dim);
  border: 1px solid var(--blue-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-icon svg { width: 18px; height: 18px; stroke: var(--blue); fill: none; stroke-width: 1.5; }

.cd-text strong { display: block; font-size: 13px; font-weight: 600; color: var(--white); margin-bottom: 2px; }

.cd-text span { font-size: 14px; color: var(--text-secondary); }


/* Form card */
.form-card {
  background: var(--navy);
  border: 1px solid var(--blue-border);
  border-radius: 20px;
  padding: 48px;
  position: relative;
  overflow: hidden;
}

.form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-bright), transparent);
  opacity: 0.3;
}

.form-stack { display: flex; flex-direction: column; gap: 20px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 15px 18px;
  background: var(--navy-deep);
  border: 1px solid var(--blue-border);
  border-radius: 10px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: all 0.3s;
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-muted); }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim), 0 0 20px rgba(59,139,255,0.05);
}

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

.form-field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237688a8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

.form-field select option { background: var(--navy); }


.form-submit {
  /* .form-stack is a flex column with gap:20px, where sibling margins do not
     collapse -- they add. The gap before this button was 20 + 4 (an inline
     margin-bottom on the note above) + 8 here = 32px: a value nobody chose,
     made of three rules. The note's margin is gone and this carries the whole
     deliberate step away from the field rhythm, so the 32px is now one
     decision on top of the container's 20. */
  margin-top: 12px;
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, var(--blue), #2468d6);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.35s;
  box-shadow: 0 4px 20px rgba(59,139,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.form-submit:hover {
  background: var(--blue-bright);
}


/* ══════════════════════ INTAKE PROMO ══════════════════════ */
.intake-promo {
  background: linear-gradient(165deg, var(--navy-mid), var(--navy));
  border: 1px solid var(--blue-border-hover);
  border-radius: 16px;
  padding: 36px;
  position: relative;
  overflow: hidden;
}

.intake-promo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.intake-promo-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 5px 14px;
  background: var(--cyan-dim);
  border: 1px solid rgba(50,220,232,0.15);
  border-radius: 100px;
  margin-bottom: 20px;
}

.intake-promo h3 {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.2;
}

.intake-promo > p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 20px;
}

.intake-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.intake-benefits li {
  font-size: 13px;
  color: var(--text-primary);
  padding-left: 24px;
  position: relative;
  line-height: 1.5;
}

.intake-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #00e87b;
  font-weight: 700;
  font-size: 12px;
}

.intake-launch-btn {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, var(--blue), #2468d6);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.35s;
  box-shadow: 0 4px 24px rgba(59,139,255,0.3);
}

.intake-launch-btn:hover {
  background: var(--blue-bright);
}


/* ══════════════════════ SCORECARD TIER 2 PROMO CARD ══════════════════════ */
.scorecard-promo {
  background: linear-gradient(165deg, #0f1a38, #050e24);
  border: 1px solid rgba(50,220,232,0.25);
  border-radius: 16px;
  padding: 36px;
  margin-top: 24px;
  position: relative;
  overflow: hidden;
}

.scorecard-promo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), #a855f7);
}

.scorecard-promo::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(50,220,232,0.08), transparent 60%);
  pointer-events: none;
}

.scorecard-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.scorecard-promo h3 {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

.scorecard-promo h3 em {
  font-style: italic;
  color: var(--cyan);
}

.scorecard-promo > p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.scorecard-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.scorecard-benefits li {
  font-size: 13px;
  color: var(--text-primary);
  padding-left: 24px;
  position: relative;
  line-height: 1.55;
}

.scorecard-benefits li strong {
  color: var(--white);
}

.scorecard-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--cyan);
  font-weight: 700;
  font-size: 12px;
}

.scorecard-launch-btn {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, var(--cyan) 0%, #1e90c8 100%);
  color: var(--midnight);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.35s;
  box-shadow: 0 4px 24px rgba(50,220,232,0.3);
  position: relative;
  z-index: 1;
}

.scorecard-launch-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(50,220,232,0.45);
}

.scorecard-guarantee {
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}


/* ══════════════════════ RESULTS SCREEN SCORECARD UPSELL ══════════════════════ */
.results-scorecard-upsell {
  margin-bottom: 24px;
  padding: 32px 36px;
  border-radius: 14px;
  background: linear-gradient(165deg, #0f1a38, #050e24);
  border: 1px solid rgba(50,220,232,0.3);
  position: relative;
  overflow: hidden;
}

.results-scorecard-upsell::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), #a855f7);
}

.results-scorecard-upsell::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(50,220,232,0.08), transparent 60%);
  pointer-events: none;
}

.rsu-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--cyan);
  padding: 5px 12px;
  background: var(--cyan-dim);
  border: 1px solid rgba(50,220,232,0.25);
  border-radius: 100px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.results-scorecard-upsell h3 {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--white);
  margin: 0 0 14px;
  line-height: 1.25;
  position: relative;
  z-index: 1;
}

.results-scorecard-upsell h3 em {
  font-style: italic;
  color: var(--cyan);
}

.results-scorecard-upsell > p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.results-scorecard-upsell > p strong {
  color: var(--white);
}

.rsu-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}

.rsu-feature {
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.rsu-check {
  color: var(--cyan);
  font-weight: 700;
  flex-shrink: 0;
}

.rsu-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--cyan) 0%, #1e90c8 100%);
  color: var(--midnight);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.35s;
  box-shadow: 0 4px 24px rgba(50,220,232,0.3);
  position: relative;
  z-index: 1;
}

.rsu-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(50,220,232,0.45);
}

.rsu-guarantee {
  margin-top: 12px;
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}
@media (max-width: 640px) {
  .rsu-features { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .sc-paywall-bullets ul { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 540px) {
  .sc-paywall-summary ul { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 640px) {
  .sc-welcome-title { font-size: 30px; }
  .sc-welcome-meta { grid-template-columns: 1fr; }
  .sc-cat-grid { grid-template-columns: 1fr; }
  .sc-pick-grid { grid-template-columns: 1fr; }
  .sc-pick-grid-size { grid-template-columns: repeat(2, 1fr); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .sc-body { padding: 24px 20px; }
  .sc-q-text { font-size: 22px; }
  .sc-results-title { font-size: 24px; }
  .sc-score-number { font-size: 72px; }
  .sc-paywall-amount { font-size: 56px; }
  .sc-paywall-row { grid-template-columns: 1fr; }
  .sc-bench-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .sc-bench-label { width: auto; }
  .sc-cat-row { grid-template-columns: 1fr 50px; }
  .sc-cat-bar-wrap { grid-column: 1 / -1; }
}


/* ══════════════════════ INTAKE MODAL ══════════════════════ */
.intake-overlay {
  position: fixed;
  inset: 0;
  /* A blur on the same element as the dialog was leaving the panel painted
     and the type invisible: the question was in the DOM, the screen was the
     page color. The scrim is the page color at 0.94, darker than the card,
     so the type on the card keeps its contrast. */
  background: rgba(3, 8, 22, 0.94);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}

.intake-overlay.open {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.intake-modal {
  width: 94vw;
  max-width: 820px;
  height: 90vh;
  max-height: 900px;
  background: var(--navy-deep);
  border: 1px solid var(--blue-border-hover);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
  transform: none;
  opacity: 1;
}

.intake-overlay.open .intake-modal {
  transform: none;
}

.intake-header {
  padding: 20px 32px;
  border-bottom: 1px solid var(--blue-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  background: var(--navy);
}

.intake-step-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.intake-progress-bar {
  width: 120px;
  height: 3px;
  background: var(--blue-border);
  border-radius: 3px;
  overflow: hidden;
}

.intake-progress-fill {
  height: 100%;
  width: 12.5%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.16,1,0.3,1);
}

.intake-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(242, 246, 255, 0.35);
  background: transparent;
  color: var(--white);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  /* The visible circle stays 36px (34px on small screens); the touch target is
     grown to 44px with a transparent ::after so the tap area meets the minimum
     without changing the design. This is the close control on the assessment,
     which is the most-used flow on a phone. */
  position: relative;
}
.intake-close::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 50%;
}

.intake-close:hover {
  border-color: var(--blue);
  color: var(--white);
  background: var(--blue-dim);
}

.intake-steps-bar {
  padding: 12px 32px;
  border-bottom: 1px solid var(--blue-border);
  display: flex;
  gap: 4px;
  overflow-x: auto;
  flex-shrink: 0;
  background: rgba(10,22,48,0.5);
}

.intake-step-pill {
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  font-family: var(--font-body);
}

.intake-step-pill.active { background: rgba(59,139,255,0.12); color: var(--blue-bright); }

.intake-step-pill.done { background: transparent; color: var(--text-secondary); }

.intake-step-pill.future { background: transparent; color: var(--text-faint); cursor: default; }


.intake-body {
  flex: 1;
  overflow-y: auto;
  padding: 40px 40px 32px;
  color: var(--text-primary);
}

/* The intro used a clipped gradient with a transparent fill. When the fill
   won and the gradient did not, the question was in the DOM and invisible.
   Headings and choices stay on the same type colors as the rest of the site. */
.intake-body h2,
.intake-body h2 em {
  color: var(--white);
  -webkit-text-fill-color: currentColor;
  background: none;
}

.intake-body::-webkit-scrollbar { width: 4px; }

.intake-body::-webkit-scrollbar-track { background: transparent; }

.intake-body::-webkit-scrollbar-thumb { background: var(--blue-border); border-radius: 4px; }


.intake-footer {
  padding: 20px 32px;
  border-top: 1px solid var(--blue-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  background: var(--navy);
}

.intake-btn-back {
  padding: 14px 28px;
  border-radius: 8px;
  border: 1px solid var(--blue-border);
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.3s;
}

.intake-btn-back:hover { border-color: var(--blue-border-hover); }

.intake-btn-back.hidden { opacity: 0.2; pointer-events: none; }

.intake-btn-next {
  padding: 14px 32px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, var(--blue), #2468d6);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  box-shadow: 0 4px 20px rgba(59,139,255,0.25);
  transition: all 0.35s;
}

.intake-btn-next:hover {
  background: var(--blue-bright);
}

.intake-btn-next.disabled { background: var(--navy-light); color: var(--text-muted); box-shadow: none; pointer-events: none; }


/* Intake form elements */
.ifield { margin-bottom: 22px; }

.ifield label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.ifield label .req { color: var(--blue); margin-left: 3px; }

/* Says which required fields are still blank. The submit control was already
   disabled when any was empty, but a greyed-out button does not tell a buyer
   why, and the two easiest to skip -- industry and employee count -- are the
   two that change the generated document most. */
.tmpl-required-note {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: var(--amber);
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
}

.ifield input, .ifield select, .ifield textarea {
  width: 100%;
  padding: 14px 18px;
  background: var(--navy);
  border: 1px solid var(--blue-border);
  border-radius: 10px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.ifield input::placeholder, .ifield textarea::placeholder { color: var(--text-muted); }

.ifield input:focus, .ifield select:focus, .ifield textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim);
}

.ifield textarea { min-height: 90px; resize: vertical; }

.ifield select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237688a8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }

.ifield select option { background: var(--navy); }

.irow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.ihint { font-size: 12px; color: var(--text-muted); margin-top: 5px; }


.itag-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.itag {
  padding: 8px 16px;
  border-radius: 100px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--blue-border);
  background: transparent;
  color: var(--text-secondary);
  transition: all 0.25s;
  font-family: var(--font-body);
}

.itag.on {
  border-color: var(--blue);
  background: rgba(59,139,255,0.12);
  color: var(--blue-bright);
}

.iradio-grid { display: grid; gap: 8px; }

.iradio {
  padding: 14px 18px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  border: 1px solid var(--blue-border);
  background: var(--navy);
  color: var(--text-primary);
  transition: all 0.25s;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
}

.iradio.on { border-color: var(--blue); background: rgba(59,139,255,0.06); color: var(--white); }

.iradio-dot {
  width: 18px; height: 18px; min-width: 18px;
  border-radius: 50%;
  border: 2px solid var(--blue-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
}

.iradio.on .iradio-dot { border-color: var(--blue); background: var(--blue); }

.iradio.on .iradio-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }


.isvc-grid { display: flex; flex-direction: column; gap: 10px; }

.isvc-group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 4px;
  margin-top: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--blue-border);
}

.isvc-group-label:first-child { margin-top: 0; }

.isvc-card {
  padding: 0;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid var(--blue-border);
  background: var(--navy);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
  display: grid;
  grid-template-columns: 52px 1fr auto auto;
  align-items: center;
  font-family: var(--font-body);
  overflow: hidden;
  min-height: 58px;
}

.isvc-card:hover { border-color: var(--blue-border-hover); background: var(--navy-mid); }

.isvc-card.on {
  border-color: var(--blue);
  background: rgba(59,139,255,0.06);
  box-shadow: 0 0 0 1px var(--blue), inset 0 0 20px rgba(59,139,255,0.03);
}

.isvc-icon-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  height: 100%;
  background: rgba(59,139,255,0.03);
  border-right: 1px solid var(--blue-border);
}

.isvc-card.on .isvc-icon-cell { background: rgba(59,139,255,0.06); }

.isvc-card .isvc-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  padding: 0 16px;
}

.isvc-card.on .isvc-name { color: var(--white); font-weight: 600; }

.isvc-card .isvc-price {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  padding-right: 16px;
  white-space: nowrap;
}

.isvc-card.on .isvc-price { color: var(--blue-bright); }

.isvc-check {
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--blue);
  opacity: 0;
  transition: opacity 0.25s;
  padding-right: 14px;
}

.isvc-card.on .isvc-check { opacity: 1; }

.isvc-selected-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(0,232,123,0.06);
  border: 1px solid rgba(0,232,123,0.15);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: #00e87b;
  margin-top: 16px;
}
@media (max-width: 768px) {
  .isvc-card { grid-template-columns: 44px 1fr auto; }
  .isvc-price { display: none; }
}


.ioutput-box {
  background: var(--navy);
  border: 1px solid var(--blue-border);
  border-radius: 12px;
  overflow: hidden;
}

.ioutput-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--blue-border);
}

.ioutput-pre {
  padding: 20px;
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-primary);
  font-family: var(--font-mono);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow-y: auto;
}

.icopy-btn {
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid var(--blue-border-hover);
  background: var(--blue-dim);
  color: var(--blue-bright);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.3s;
}

.icopy-btn:hover { background: rgba(59,139,255,0.15); }
@media (max-width: 768px) {
  .intake-modal { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .intake-body { padding: 24px 20px 20px; }
  .isvc-grid { gap: 8px; }
  .irow { grid-template-columns: 1fr; }
}


/* Footer layout is in css/chrome.css. */

/* ══════════════════════ SCROLL REVEAL ══════════════════════ */
.reveal {
  opacity: 1;
  transform: none;
}

.reveal.vis { opacity: 1; transform: none; }

.reveal-delay-1 { transition-delay: 0.1s; }

.reveal-delay-2 { transition-delay: 0.2s; }

.reveal-delay-3 { transition-delay: 0.3s; }

.reveal-delay-4 { transition-delay: 0.4s; }
@media (max-width: 1100px) {
  .hero-layout { gap: 60px; }
  .svc-grid { grid-template-columns: 1fr; }
  .approach-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}
/* The link row folds at 1199. Below that the snapshot was still a second
   column, and its right edge sat past the window on the widths where the
   header control had moved inward. Stack here so the card is the full
   column and nothing is cut off. */
@media (max-width: 1199px) {
  .hero-layout { grid-template-columns: 1fr; gap: 56px; }
  .hero h1 { max-width: none; }
  .hero-description { max-width: 620px; }
}
@media (max-width: 1024px) {
  .nav-inner { padding: 0 24px; }
  .nav-center { gap: 24px; }
  .nav-center a { font-size: 12px; letter-spacing: 0.5px; }
  .nav-cta { padding: 10px 20px; font-size: 11px; letter-spacing: 1px; }
  .logo-text { font-size: 20px; letter-spacing: 3px; }
}
@media (max-width: 900px) {
  .nav-center { gap: 18px; }
  .nav-center a { font-size: 11px; }
  .nav-cta { padding: 9px 16px; font-size: 10px; }
}


/* ══ MOBILE NAV HAMBURGER ══ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--blue-border);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s;
}

.nav-hamburger:hover { border-color: var(--blue-border-hover); }

.nav-hamburger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}

.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }

.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


.mobile-drawer {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99;
  background: rgba(3,8,22,0.97);
  backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16,1,0.3,1);
}

.mobile-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
  padding: 80px 24px 40px;
}

.mobile-drawer-inner a {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 8px;
  width: 100%;
  max-width: 280px;
  text-align: center;
  transition: color 0.2s, background 0.2s;
}

.mobile-drawer-inner a:hover { color: var(--white); background: rgba(59,139,255,0.08); }

.mobile-drawer-cta {
  margin-top: 16px;
  background: linear-gradient(135deg, var(--blue), #2468d6) !important;
  color: white !important;
  box-shadow: 0 4px 20px rgba(59,139,255,0.35);
  font-size: 16px !important;
}
@media (max-width: 768px) {
  /* The mobile section rhythm lives in css/chrome.css so every page shares it;
     this file used to set 80px here, which RAISED the padding above the clamp's
     own 60px floor and produced roughly a full viewport of dead space between
     sections at 390px. */
  .nav-inner { padding: 0 20px; }
  .nav-center { display: none; }
  .nav-hamburger { display: flex; }
  .mobile-drawer { display: block; }
  .hero { padding: 120px 0 60px; }
  .hero h1 { font-size: 40px; }
  .approach-grid { grid-template-columns: 1fr; }
  .svc-header { padding: 24px; gap: 16px; flex-wrap: wrap; }
  .svc-icon-wrap { width: 44px; height: 44px; min-width: 44px; border-radius: 10px; }
  .svc-icon-wrap svg { width: 20px; height: 20px; }
  .svc-content { flex: 1 1 100%; min-width: 0; }
  .svc-content h3 { font-size: 22px; line-height: 1.25; }
  .svc-content .svc-brief { font-size: 14px; }
  .svc-toggle { width: 36px; height: 36px; min-width: 36px; position: absolute; top: 20px; right: 20px; }
  .svc-card { position: relative; }
  .svc-expand-inner { padding: 0 24px 24px; padding-top: 20px; }
  .svc-details { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 28px; }

  /* Section headings scale down */
  .sec-heading { font-size: 32px !important; line-height: 1.15 !important; }
  .sec-subtext { font-size: 15px !important; }

  /* Hero buttons — full width on mobile */
  .hero-actions { flex-direction: column; }
  .hero-actions .btn-hero { width: 100%; justify-content: center; box-sizing: border-box; }

  /* Templates section */
  #templates { padding: 80px 0; }
  .tmpl-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
  .tmpl-card { padding: 28px 24px; }
  .tmpl-card h3 { font-size: 22px; }
  .tmpl-includes { grid-template-columns: 1fr; gap: 6px 0; }

  /* Template customizer modal */
  .tmpl-modal { max-height: 94vh; border-radius: 14px; }
  .tmpl-modal-header { padding: 18px 22px; }
  .tmpl-modal-header h2 { font-size: 18px; }
  .tmpl-modal-body { padding: 22px; }
  .tmpl-modal-footer { padding: 14px 22px; flex-direction: column; align-items: stretch; gap: 10px; }
  .tmpl-modal-meta { text-align: center; font-size: 11px; }
  .tmpl-submit { width: 100%; justify-content: center; }
  .tmpl-field-row { grid-template-columns: 1fr; gap: 0; }
  .tmpl-field-row .tmpl-field { margin-bottom: 16px; }
  .tmpl-checkbox-grid { grid-template-columns: 1fr; }
  .tmpl-overlay { padding: 10px; }

  /* Assessment modal — results page fixes */
  #assessOverlay .doc-page,
  #assessOverlay [style*="grid-template-columns:1fr 1fr"],
  #assessOverlay [style*="grid-template-columns: 1fr 1fr"] {
    /* Handled inline in the component rendering */
  }

  /* FAQ typography */
  .faq-q { font-size: 15px; padding: 20px 22px; }
  .faq-a { padding: 0 22px 20px; font-size: 14px; }


  /* Quick-start carousel */
  .qs-card { flex: 0 0 300px !important; padding: 24px !important; }
  .qs-card h3 { font-size: 20px; }
  .qs-intro-right { text-align: left !important; }
  .qs-price-badge { font-size: 12px; padding: 8px 14px; }

  /* Why TRM section */
  .why-pillar { padding: 24px; }

  /* Contact form */
  .contact-card { padding: 28px 24px; }

  /* WhyMatters section */
  #whymatters .container > div { padding: 32px 24px !important; }

  /* Nav mobile hamburger hint */
  .nav-cta { padding: 10px 16px !important; font-size: 12px !important; }

  /* Readability tweaks for small caps / eyebrow text */
  .trust-label { font-size: 12px; letter-spacing: 2px; line-height: 1.5; }

  /* Assessment results — mobile fixes for inline grids */
  .assess-gaps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}


/* Assessment priority gaps. One column: each card carries the weakest
   answers, why a reviewer asks, and one first move. Three across left
   each card too narrow for that sentence. */
.assess-gaps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}


/* ══════════════════════ ABOUT SECTION ══════════════════════ */
.about-section {
  padding: var(--section-pad) 0;
  background: var(--navy-deep);
  position: relative;
}

.about-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-border), transparent);
}

.about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 72px;
  align-items: start;
}

.about-main .sec-heading {
  margin-bottom: 32px;
  max-width: 540px;
}

.about-bio {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.about-bio p {
  margin-bottom: 20px;
}

.about-bio p:last-child {
  margin-bottom: 0;
}

.about-bio strong {
  color: var(--white);
  font-weight: 600;
}

.about-cta-row {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}

.about-link {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue-bright);
  text-decoration: none;
  transition: all 0.2s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
}

.about-link:hover { color: var(--cyan); }

.about-link--secondary { color: var(--text-secondary); }

.about-link--secondary:hover { color: var(--white); }


.about-sidebar {
  position: sticky;
  top: 100px;
}

.about-card {
  background: var(--midnight);
  border: 1px solid var(--blue-border);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}

.about-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.about-card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.about-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-card-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--blue-border);
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
}

.about-card-list li:last-child { border-bottom: none; }

.about-card-list li strong {
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
  display: block;
  margin-bottom: 2px;
}

.about-card-list li span {
  color: var(--text-muted);
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

.about-card-divider {
  height: 1px;
  background: var(--blue-border);
  margin: 20px 0;
}

.about-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-card-tags li {
  font-size: 11px;
  font-weight: 500;
  padding: 6px 11px;
  background: rgba(59,139,255,0.08);
  border: 1px solid var(--blue-border);
  border-radius: 6px;
  color: var(--text-primary);
}

.about-card-location {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-sidebar { position: static; }
}
@media (max-width: 640px) {
  .about-card { padding: 24px; }
  .about-cta-row { gap: 20px; flex-direction: column; align-items: flex-start; }
  .about-link { padding: 10px 0; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 32px; }
  .hero-tagline { font-size: 18px; }
  .sec-heading { font-size: 26px !important; }
  .doc h1 { font-size: 34px; }
  .snap-card { padding: 0; }
  .snap-header { padding: 20px 20px 16px; }
  .snap-body { padding: 14px 20px 4px; }
  .snap-score-section { padding: 14px 20px 12px; grid-template-columns: 82px 1fr; gap: 12px; }
  .snap-rec { margin: 0 20px 14px; }
  .snap-cta-wrap { padding: 0 20px 12px; }
  .snap-footnote { padding: 0 20px 18px; }
  .tmpl-card { padding: 22px 20px; }
  .tmpl-card h3 { font-size: 20px; }
  .tmpl-badge { font-size: 10px; padding: 3px 10px; }
  .btn-hero { font-size: 13px !important; padding: 14px 22px !important; }
}


/* ══════════════════════ CUSTOM EFFECTS ══════════════════════ */

/* ── Animated gradient border on snapshot card ── */
.snap-card {
  position: relative;
  background: linear-gradient(170deg, var(--navy-mid), var(--navy-deep));
}

.snap-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(59,139,255,0.3), transparent 40%, transparent 60%, rgba(50,220,232,0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@keyframes borderRotate {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}


/* ── Shimmer effect on section labels ── */
.sec-label {
  position: relative;
  overflow: hidden;
}

.sec-label::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59,139,255,0.15), transparent);
  animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { left: -100%; }
  50% { left: 150%; }
}





/* ── Gradient text shimmer on hero heading ── */
.hero h1 .gradient-text {
  background-size: 200% auto;
  animation: gradientShift 4s ease-in-out infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}


/* ── Animated border-bottom on section headings ── */
.sec-heading {
  position: relative;
  display: block;
}

.sec-heading::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 0;
  width: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
}

.sec-heading:hover::after {
  width: 80px;
}


/* ── Card shine sweep on hover ── */
.svc-card, .qs-card, .faq-card {
  position: relative;
  overflow: hidden;
}

.svc-card::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(59,139,255,0.03) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  transform: translate(var(--mouse-x, 0), var(--mouse-y, 0));
}

.svc-card:hover::after {
  opacity: 1;
}


/* ── Staggered entrance for service grid ── */
.svc-grid .svc-card:nth-child(1) { transition-delay: 0s; }

.svc-grid .svc-card:nth-child(2) { transition-delay: 0.05s; }

.svc-grid .svc-card:nth-child(3) { transition-delay: 0.1s; }

.svc-grid .svc-card:nth-child(4) { transition-delay: 0.15s; }

.svc-grid .svc-card:nth-child(5) { transition-delay: 0.2s; }

.svc-grid .svc-card:nth-child(6) { transition-delay: 0.25s; }



/* ── Approach step counter glow on hover ── */
.approach-step:hover .approach-num {
  color: rgba(59,139,255,0.15);
  text-shadow: 0 0 40px rgba(59,139,255,0.08);
  transition: all 0.4s;
}


/* ── FAQ icon pulse on card hover ── */
.faq-card:hover .faq-icon {
  animation: iconPop 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes iconPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}


/* ── Stats counter glow ── */
.wm-stat-num {
  text-shadow: 0 0 20px currentColor;
  transition: text-shadow 0.3s;
}

.wm-stat:hover .wm-stat-num {
  text-shadow: 0 0 30px currentColor, 0 0 60px currentColor;
}


/* ── Smooth underline on nav links ── */
.nav-center a {
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.4s cubic-bezier(0.16,1,0.3,1), color 0.3s;
}

.nav-center a:hover {
  background-size: 100% 1.5px;
}

.nav-center a::after { display: none; }


.btn-arrow {
  display: inline-block;
  transition: transform var(--motion-duration) var(--motion-ease);
}

.btn-hero:hover .btn-arrow,
.btn-solid:hover .btn-arrow,
.form-submit:hover .btn-arrow,
.intake-launch-btn:hover span {
  transform: translateX(var(--motion-arrow));
}


/* ── Trust marquee item separator pulse ── */
.marquee-item::after {
  animation: separatorPulse 3s ease-in-out infinite;
}
@keyframes separatorPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 6px; }

::-webkit-scrollbar-track { background: var(--midnight); }

::-webkit-scrollbar-thumb { background: var(--navy-light); border-radius: 3px; }

::-webkit-scrollbar-thumb:hover { background: var(--blue); }


/* ── Quick-start card number badge ── */
.qs-card {
  counter-increment: qscard;
}

.qs-card::after {
  content: counter(qscard, decimal-leading-zero);
  position: absolute;
  top: 16px; right: 16px;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 400;
  color: rgba(59,139,255,0.04);
  pointer-events: none;
  line-height: 1;
  z-index: 0;
}

.qs-card:hover::after {
  color: rgba(59,139,255,0.08);
  transition: color 0.4s;
}


/* ── Contact form field animated label ── */
.form-field input:focus + .field-highlight,
.form-field select:focus + .field-highlight,
.form-field textarea:focus + .field-highlight {
  opacity: 1;
}


/* ══ TWO WAYS SECTION ══ */
#two-ways {
  padding: var(--section-pad) 0;
}

.two-ways-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}

.tw-card {
  padding: 36px 32px;
  border: 1px solid var(--blue-border);
  border-radius: 16px;
  background: var(--navy);
  position: relative;
  transition: border-color 0.3s, transform 0.3s;
}

.tw-card:hover {
  border-color: var(--blue-border-hover);
  transform: translateY(-2px);
}

.tw-card--primary {
  border-color: rgba(59,139,255,0.25);
  background: linear-gradient(135deg, var(--navy) 0%, rgba(59,139,255,0.06) 100%);
}

.tw-card--primary:hover { border-color: rgba(59,139,255,0.5); }

.tw-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}

.tw-label--advisory { color: var(--cyan); }

.tw-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--blue-dim);
  border: 1px solid var(--blue-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 22px;
}

.tw-card h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.25;
}

.tw-card p {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.75;
  margin-bottom: 24px;
}

.tw-price {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  padding: 10px 14px;
  background: var(--blue-dim);
  border-radius: 8px;
  border: 1px solid var(--blue-border);
}

.tw-price strong { color: var(--white); }

.tw-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}

.tw-list li {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 7px 0;
  border-bottom: 1px solid var(--blue-border);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.tw-list li:last-child { border-bottom: none; }

.tw-list li::before {
  content: "→";
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 1px;
}

.tw-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.25s;
  font-family: var(--font-body);
}

.tw-bridge {
  margin-top: 40px;
  padding: 28px 36px;
  background: rgba(59,139,255,0.05);
  border: 1px solid var(--blue-border);
  border-radius: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.tw-bridge p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
  max-width: 560px;
}

.tw-bridge-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--blue), #2468d6);
  color: white;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s;
}

.tw-bridge-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59,139,255,0.4); }

.tw-cta--primary {
  background: linear-gradient(135deg, var(--blue), #2468d6);
  color: white;
  box-shadow: 0 4px 20px rgba(59,139,255,0.35);
}

.tw-cta--primary:hover { box-shadow: 0 6px 28px rgba(59,139,255,0.55); transform: translateY(-1px); }

.tw-cta--outline {
  background: transparent;
  color: var(--text-bright);
  border: 1px solid var(--blue-border-hover);
}

.tw-cta--outline:hover { border-color: var(--blue); color: var(--white); background: var(--blue-dim); }
@media (max-width: 860px) {
  .two-ways-grid { grid-template-columns: 1fr; }
}


/* ══ PRICING SECTION ══ */
#pricing {
  padding: var(--section-pad) 0;
  background: var(--bg);
  border-top: 1px solid var(--blue-border);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  align-items: start;
}

.pricing-card {
  background: rgba(5,10,24,0.6);
  border: 1px solid var(--blue-border);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.pricing-card:hover {
  border-color: var(--blue-border-hover);
  box-shadow: 0 8px 40px rgba(59,139,255,0.08);
}

.pricing-card--featured {
  background: linear-gradient(160deg, rgba(59,139,255,0.12), rgba(59,139,255,0.04));
  border-color: var(--blue);
  box-shadow: 0 4px 40px rgba(59,139,255,0.15);
  position: relative;
}

.pricing-card--featured::before {
  content: "Most Popular";
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: white;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
}

.pricing-tier {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.pricing-range {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1.1;
  margin-bottom: 12px;
  font-family: var(--font-body);
}

.pricing-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--blue-border);
  padding-bottom: 20px;
}

.pricing-includes {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pricing-includes li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
}

.pricing-includes li::before {
  content: "✓";
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

.pricing-cta {
  display: block;
  text-align: center;
  padding: 13px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  margin-top: auto;
}

.pricing-cta--primary {
  background: linear-gradient(135deg, var(--blue), #2468d6);
  color: white;
  box-shadow: 0 4px 20px rgba(59,139,255,0.35);
}

.pricing-cta--primary:hover { box-shadow: 0 6px 28px rgba(59,139,255,0.55); transform: translateY(-1px); }

.pricing-cta--outline {
  background: transparent;
  color: var(--text-bright);
  border: 1px solid var(--blue-border-hover);
}

.pricing-cta--outline:hover { border-color: var(--blue); color: var(--white); background: var(--blue-dim); }

.pricing-note {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 36px;
  line-height: 1.7;
}


.pricing-note a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .pricing-card--featured::before { top: -13px; }
}


/* Who we serve uses the same hairline grid as Who is asking.
   The navy band and translucent cards read as an overlay between sections.
   The practice line sits in the same 15px body as that grid. text-wrap:balance
   keeps the two sentences from leaving a one-word last line in a 307px column.
   The arrow is pinned to the bottom of the row so three cards of unequal
   wrap still share a baseline. padding-top, not margin-top: an auto margin
   absorbs spare row height and would otherwise eat the 18px gap. */
a.who-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
a.who-col p {
  margin: 0;
  min-width: 0;
  text-wrap: balance;
}
a.who-col {
  transition: background-color var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease);
}
a.who-col:hover {
  background: var(--navy);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
a.who-col:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: -3px;
}
.serve-go {
  display: inline-block;
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-mono);
  font-size: var(--t-12);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-bright);
}

/* ══ TRUST SECTION ══ */

#why-trust {
  padding: var(--section-pad) 0;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.trust-card {
  padding: 32px 28px;
  border: 1px solid var(--blue-border);
  border-radius: 14px;
  background: var(--navy);
  transition: border-color 0.3s;
}

.trust-card:hover { border-color: var(--blue-border-hover); }

.trust-card-icon {
  font-size: 32px;
  margin-bottom: 18px;
  display: block;
}

.trust-card h4 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.3;
}

.trust-card p {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.75;
  margin: 0;
}
@media (max-width: 900px) {
  .trust-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .trust-grid { grid-template-columns: 1fr; }
}


/* ══ WHAT YOU WALK AWAY WITH ══ */
#walkaway {
  padding: var(--section-pad) 0;
  background: var(--navy);
  border-top: 1px solid var(--blue-border);
  border-bottom: 1px solid var(--blue-border);
}

.walkaway-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.walkaway-item {
  display: flex;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--blue-border);
  border-radius: 12px;
  background: rgba(5,10,24,0.5);
  align-items: flex-start;
  transition: border-color 0.3s;
}

.walkaway-item:hover { border-color: var(--blue-border-hover); }

.walkaway-num {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--blue);
  flex-shrink: 0;
  line-height: 1;
  padding-top: 2px;
}

.walkaway-item h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.walkaway-item p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 720px) {
  .walkaway-grid { grid-template-columns: 1fr; }
}


/* ══ AI CHAT DISCLAIMER ══ */
.chat-disclaimer {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  padding: 8px 16px;
  border-top: 1px solid var(--blue-border);
  line-height: 1.5;
}


/* ═══════════════════════════════════
   WHERE TRM HELPS SECTION
   ═══════════════════════════════════ */
#where-trm-helps { padding: 100px 0 80px; }


.wth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 52px;
}


.wth-card {
  background: linear-gradient(145deg, var(--navy-mid) 0%, var(--navy-deep) 100%);
  border: 1px solid var(--blue-border);
  border-radius: 16px;
  padding: 32px 34px;
  position: relative;
  transition: border-color 0.25s;
}

.wth-card:hover { border-color: rgba(59,139,255,0.28); }


.wth-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, transparent 5%, rgba(59,139,255,0.35) 50%, transparent 95%);
}


.wth-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue-bright);
  opacity: 0.85;
  margin-bottom: 14px;
}


.wth-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--white);
  letter-spacing: -0.3px;
  line-height: 1.25;
  margin-bottom: 12px;
}


.wth-card p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.72;
}


/* ── Availability badge (pulsing cyan dot) ── */
.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(50,220,232,0.88);
  background: rgba(50,220,232,0.06);
  border: 1px solid rgba(50,220,232,0.22);
  border-radius: 100px;
  padding: 5px 14px 5px 10px;
}


.availability-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #32dce8;
  box-shadow: 0 0 6px rgba(50,220,232,0.8);
  flex-shrink: 0;
  animation: avail-pulse 2.5s ease-in-out infinite;
}
@keyframes avail-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.75); }
}


/* ── Practitioner stat pills in about sidebar ── */
.about-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}


.about-card-stat {
  padding: 12px 10px;
  background: rgba(59,139,255,0.05);
  border: 1px solid var(--blue-border);
  border-radius: 10px;
  text-align: center;
}


.about-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--white);
  letter-spacing: -0.5px;
  line-height: 1.1;
}


.about-stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 5px;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .wth-grid { grid-template-columns: 1fr; }
}
@keyframes fb-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}