/* =============================================================
   EBB SYSTEMS — MAIN STYLESHEET
   engineeredbybytes.com
   ============================================================= */

/* ------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------ */
:root {
  /* Brand colours */
  --navy:      #0D2240;
  --crimson:   #8B1A1A;
  --cream:     #F8F6F1;
  --stone:     #EAE6DF;
  --muted:     #666666;
  --white:     #FFFFFF;

  /* Text */
  --text-body:    #333333;
  --text-dark:    #1C1C1C;
  --text-muted:   #666666;
  --text-faint:   #999999;

  /* Fonts */
  --font-display: 'Libre Baskerville', Georgia, serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --content-width: 1200px;
  --section-pad-v: 96px;
  --section-pad-v-sm: 64px;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --speed: 220ms;

  /* Shadows */
  --shadow-card: 0 2px 12px rgba(13, 34, 64, 0.08);
  --shadow-card-hover: 0 8px 32px rgba(13, 34, 64, 0.14);
}


/* ------------------------------------------------------------
   2. RESET + BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }


/* ------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}

h1 { font-size: clamp(32px, 5vw, 56px); }
h2 { font-size: clamp(26px, 4vw, 42px); }
h3 { font-size: clamp(20px, 2.5vw, 28px); }
h4 { font-size: 20px; }
h5 { font-size: 17px; }

p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-body);
}

.lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-body);
}

/* Eyebrow / overline label */
.eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
  display: block;
  margin-bottom: 14px;
}

/* Section heading block */
.section-heading {
  margin-bottom: 48px;
}
.section-heading h2 {
  margin-bottom: 16px;
}
.section-heading p {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 620px;
}
.section-heading--center {
  text-align: center;
}
.section-heading--center p {
  margin: 0 auto;
}

/* Crimson rule under headings */
.heading-rule {
  width: 48px;
  height: 3px;
  background: var(--crimson);
  margin: 16px 0 0;
  flex-shrink: 0;
}
.section-heading--center .heading-rule {
  margin: 16px auto 0;
}


/* ------------------------------------------------------------
   4. LAYOUT + CONTAINER
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 40px;
}

.section {
  padding: var(--section-pad-v) 0;
}

.section--cream {
  background: var(--cream);
}

.section--navy {
  background: var(--navy);
}

.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 {
  color: var(--white);
}

.section--navy p,
.section--navy .lead {
  color: rgba(255, 255, 255, 0.72);
}

.section--navy .eyebrow {
  color: var(--crimson);
  opacity: 0.9;
}

/* Two-column split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.split--3-2 {
  grid-template-columns: 3fr 2fr;
}

/* Grid layouts */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }


/* ------------------------------------------------------------
   5. NAVBAR
   ------------------------------------------------------------ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 72px;
  display: flex;
  align-items: center;
  transition: background var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}

.navbar--transparent {
  background: transparent;
}

.navbar--solid {
  background: var(--navy);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.18);
}

/* Dark-page nav — transparent over dark hero, subtle white separator */
.navbar--dark-page.navbar--transparent {
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* Light-page nav — frosted cream, hairline border, links dark */
.navbar--light-page.navbar--transparent {
  background: rgba(248, 246, 241, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(13, 34, 64, 0.08);
}

.navbar--light-page.navbar--transparent .navbar__link {
  color: rgba(13, 34, 64, 0.62);
}
.navbar--light-page.navbar--transparent .navbar__link:hover,
.navbar--light-page.navbar--transparent .navbar__link.active {
  color: var(--navy);
}
.navbar--light-page.navbar--transparent .navbar__cta {
  border-color: rgba(13, 34, 64, 0.28);
  color: var(--navy);
}
.navbar--light-page.navbar--transparent .navbar__cta:hover {
  background: var(--crimson);
  border-color: var(--crimson);
  color: var(--white);
}
.navbar--light-page.navbar--transparent .navbar__hamburger span {
  background: var(--navy);
}

.navbar__inner {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar__inner--no-logo {
  justify-content: flex-end;
}

/* Logo mark in nav */
.navbar__logo {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-decoration: none;
  flex-shrink: 0;
}

.navbar__logo-rule {
  width: 22px;
  height: 2px;
  background: var(--crimson);
  margin-bottom: 5px;
}

.navbar__logo-ebb {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--white);
  letter-spacing: 0.02em;
  line-height: 1;
}

.navbar__logo-systems {
  font-family: var(--font-display);
  font-size: 6px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-top: 3px;
}

/* Nav links */
.navbar__links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.navbar__link {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.02em;
  transition: color var(--speed) var(--ease);
  position: relative;
  text-decoration: none;
}

.navbar__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--speed) var(--ease);
}

.navbar__link:hover,
.navbar__link.active {
  color: var(--white);
}

.navbar__link:hover::after,
.navbar__link.active::after {
  transform: scaleX(1);
}

/* Contact CTA in nav */
.navbar__cta {
  font-size: 13px;
  font-weight: 600;
  padding: 9px 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
  border-radius: 2px;
  transition: background var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
  text-decoration: none;
}

.navbar__cta:hover {
  background: var(--crimson);
  border-color: var(--crimson);
}

/* Hamburger (mobile) */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}

.navbar__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: transform var(--speed) var(--ease),
              opacity var(--speed) var(--ease);
}

.navbar__hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar__hamburger.open span:nth-child(2) {
  opacity: 0;
}
.navbar__hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.navbar__mobile {
  display: none;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  background: var(--navy);
  padding: 24px 40px 32px;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  /* Above the hero and any scroll-revealed sections */
  z-index: 950;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}

.navbar__mobile.open {
  display: flex;
}

.navbar__mobile-link {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: color var(--speed) var(--ease);
  text-decoration: none;
}

.navbar__mobile-link:last-child {
  border-bottom: none;
}

.navbar__mobile-link:hover,
.navbar__mobile-link.active {
  color: var(--white);
}

/* Page offset for fixed nav */
.nav-offset {
  height: 72px;
}


/* ------------------------------------------------------------
   6. HERO SECTION
   ------------------------------------------------------------ */
.hero {
  position: relative;
  background: var(--navy);
  padding: 120px 0 100px;
  overflow: hidden;
}

/* Subtle geometric background accent */
.hero::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 600px;
  height: 600px;
  border: 1px solid rgba(139, 26, 26, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -200px;
  right: 100px;
  width: 400px;
  height: 400px;
  border: 1px solid rgba(139, 26, 26, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--crimson);
  display: block;
  margin-bottom: 20px;
}

.hero__title {
  color: var(--white);
  margin-bottom: 24px;
  max-width: 760px;
}

.hero__title em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.72);
}

.hero__lead {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68);
  max-width: 560px;
  margin-bottom: 44px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero__rule {
  width: 48px;
  height: 3px;
  background: var(--crimson);
  margin-bottom: 28px;
}

/* Page hero (inner pages — smaller than homepage hero) */
.page-hero {
  background: var(--navy);
  padding: 72px 0 40px;
  position: relative;
  overflow: hidden;
}

/* When hero + a section together fill the viewport */
.above-fold {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.above-fold > .page-hero {
  flex: 1;
}

.page-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -60px;
  width: 400px;
  height: 400px;
  border: 1px solid rgba(139, 26, 26, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.page-hero__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
  display: block;
  margin-bottom: 10px;
}

.page-hero__title {
  color: var(--white);
  margin-bottom: 10px;
  max-width: 640px;
}

.page-hero__lead {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 520px;
  line-height: 1.65;
}


/* ------------------------------------------------------------
   7. BUTTONS
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: 2px;
  transition: background var(--speed) var(--ease),
              color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}

.btn--primary {
  background: var(--crimson);
  color: var(--white);
  border: 2px solid var(--crimson);
}

.btn--primary:hover {
  background: #721515;
  border-color: #721515;
  box-shadow: 0 4px 16px rgba(139, 26, 26, 0.32);
}

.btn--outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.36);
}

.btn--outline:hover {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.06);
}

.btn--outline-navy {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}

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

.btn--sm {
  font-size: 13px;
  padding: 10px 20px;
}

.btn--lg {
  font-size: 15px;
  padding: 16px 36px;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--speed) var(--ease);
}

.btn:hover svg {
  transform: translateX(3px);
}


/* ------------------------------------------------------------
   8. STAT / KPI STRIP
   ------------------------------------------------------------ */
.stat-strip {
  background: var(--navy);
  padding: 48px 0;
  border-top: 3px solid var(--crimson);
}

.stat-strip__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}

.stat-strip__item {
  text-align: center;
  padding: 0 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-strip__item:last-child {
  border-right: none;
}

.stat-strip__value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-strip__value span {
  color: var(--crimson);
}

.stat-strip__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}


/* ------------------------------------------------------------
   9. PRODUCT CARDS (Home page — large feature cards)
   ------------------------------------------------------------ */
.product-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.product-card {
  border: 1px solid var(--stone);
  border-top: 3px solid var(--crimson);
  padding: 40px 40px 36px;
  background: var(--white);
  transition: box-shadow var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}

.product-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.product-card__logo {
  height: 36px;
  width: auto;
  margin-bottom: 24px;
  object-fit: contain;
  object-position: left center;
}

.product-card__logo--text {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

.product-card__logo-rule {
  width: 22px;
  height: 2px;
  background: var(--crimson);
  margin-bottom: 5px;
}

.product-card__logo-ebb {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy);
  letter-spacing: 0.02em;
  line-height: 1;
}

.product-card__logo-systems {
  font-family: var(--font-display);
  font-size: 6px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-top: 3px;
}

.product-card__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
  background: rgba(139, 26, 26, 0.07);
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 20px;
}

.product-card__title {
  font-size: 22px;
  color: var(--navy);
  margin-bottom: 14px;
}

.product-card__desc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 28px;
}

.product-card__bullets {
  margin-bottom: 32px;
}

.product-card__bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.6;
  padding: 6px 0;
  border-bottom: 1px solid var(--stone);
}

.product-card__bullet:last-child {
  border-bottom: none;
}

.product-card__bullet::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crimson);
  flex-shrink: 0;
  margin-top: 7px;
}


/* ------------------------------------------------------------
   10. FEATURE / WHY CARDS
   ------------------------------------------------------------ */
.feature-card {
  background: var(--white);
  border: 1px solid var(--stone);
  border-left: 3px solid var(--crimson);
  padding: 28px 28px 28px 24px;
  transition: box-shadow var(--speed) var(--ease);
}

.feature-card:hover {
  box-shadow: var(--shadow-card);
}

.feature-card__num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--crimson);
  opacity: 0.55;
  margin-bottom: 10px;
}

.feature-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
  margin-bottom: 10px;
  line-height: 1.3;
}

.feature-card__body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Navy variant */
.feature-card--navy {
  background: var(--navy);
  border-color: var(--navy);
  border-left-color: var(--crimson);
}

.feature-card--navy .feature-card__title { color: var(--white); }
.feature-card--navy .feature-card__body  { color: rgba(255, 255, 255, 0.55); }
.feature-card--navy .feature-card__num   { color: rgba(255, 255, 255, 0.3); }


/* ------------------------------------------------------------
   11. INFO PANEL (left-accent accent block)
   ------------------------------------------------------------ */
.info-panel {
  border-left: 3px solid var(--crimson);
  padding-left: 20px;
}

.info-panel__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 8px;
}

.info-panel__title {
  font-size: 18px;
  color: var(--navy);
  margin-bottom: 8px;
}

.info-panel__body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}


/* ------------------------------------------------------------
   12. PILLAR CARDS (4-pillar gateway section)
   ------------------------------------------------------------ */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--stone);
}

.pillar-card {
  background: var(--white);
  padding: 36px 28px;
  transition: background var(--speed) var(--ease);
}

.pillar-card:hover {
  background: var(--cream);
}

.pillar-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(139, 26, 26, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.pillar-card__icon svg {
  width: 20px;
  height: 20px;
  color: var(--crimson);
}

.pillar-card__title {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--navy);
  margin-bottom: 12px;
}

.pillar-card__value {
  font-size: 28px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--crimson);
  line-height: 1;
  margin-bottom: 6px;
}

.pillar-card__desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
}


/* ------------------------------------------------------------
   13. NETWORK / OPERATOR GRID
   ------------------------------------------------------------ */
.operator-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.operator-card {
  background: var(--cream);
  border: 1px solid var(--stone);
  border-left: 3px solid var(--crimson);
  padding: 20px 20px 20px 18px;
  transition: box-shadow var(--speed) var(--ease);
}

.operator-card:hover {
  box-shadow: var(--shadow-card);
}

.operator-card__country {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 6px;
}

.operator-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}

/* CBS / tech tag grid */
.cbs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cbs-tag {
  background: var(--cream);
  border: 1px solid var(--stone);
  border-left: 3px solid var(--crimson);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

.cbs-tag span {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
}


/* ------------------------------------------------------------
   14. SECURITY LAYERS
   ------------------------------------------------------------ */
.security-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.security-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--stone);
}

.security-item:last-child {
  border-bottom: none;
}

.security-item__num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--stone);
  line-height: 1;
  padding-top: 3px;
}

.security-item__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 5px;
}

.security-item__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}


/* ------------------------------------------------------------
   15. PHASE / PROCESS STEPS
   ------------------------------------------------------------ */
.phase-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.phase-list::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 48px;
  right: 48px;
  height: 2px;
  background: var(--stone);
  z-index: 0;
}

.phase-item {
  position: relative;
  z-index: 1;
  padding: 0 20px;
  text-align: center;
}

.phase-item__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.phase-item__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}

.phase-item__duration {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 10px;
}

.phase-item__desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
}


/* ------------------------------------------------------------
   16. CONTACT FORM
   ------------------------------------------------------------ */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--text-dark);
  background: var(--white);
  border: 1.5px solid var(--stone);
  border-radius: 2px;
  padding: 12px 16px;
  outline: none;
  transition: border-color var(--speed) var(--ease);
  width: 100%;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--navy);
}

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

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}


/* ------------------------------------------------------------
   17. WHAT HAPPENS NEXT (3-step process)
   ------------------------------------------------------------ */
.next-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.next-step {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--stone);
}

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

.next-step__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--crimson);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.next-step__content {}

.next-step__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 5px;
}

.next-step__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}


/* ------------------------------------------------------------
   18. CTA BAND
   ------------------------------------------------------------ */
.cta-band {
  background: var(--navy);
  padding: 72px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  border: 1px solid rgba(139, 26, 26, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.cta-band h2 {
  color: var(--white);
  margin-bottom: 16px;
}

.cta-band p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.62);
  max-width: 480px;
  margin: 0 auto 36px;
}

.cta-band__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Ready-to-Build closing — two-column layout
   Left:  bold serif headline + rule + sub + CTAs (briefing style)
   Right: numbered "What happens next" panel telling the visitor
          what scheduling a briefing actually commits them to. */
.cta-band--ready {
  padding: clamp(72px, 11vh, 120px) 0;
  text-align: left;
}
.cta-band--ready::before {
  width: 720px;
  height: 720px;
  top: -180px;
  border-color: rgba(139,26,26,0.08);
}
.cta-band__layout {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

/* ── LEFT — main message ─────────────────────────── */
.cta-band__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  background: rgba(139,26,26,0.16);
  border: 1px solid rgba(139,26,26,0.32);
  padding: 7px 16px 7px 12px;
  border-radius: 100px;
  margin-bottom: 28px;
}
.cta-band__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--crimson);
  animation: ctaBandDot 2s ease-in-out infinite;
}
@keyframes ctaBandDot {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(139,26,26,0.5); }
  50%       { opacity: 0.7; transform: scale(1.4); box-shadow: 0 0 0 5px rgba(139,26,26,0); }
}
.cta-band__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 36px);
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cta-band__h2 span {
  display: block;
  white-space: nowrap;
}
.cta-band__h2 em {
  font-style: normal;
  color: var(--crimson);
}
/* Allow wrapping on narrow viewports so it doesn't overflow */
@media (max-width: 720px) {
  .cta-band__h2 span { white-space: normal; }
  .cta-band__h2 { font-size: clamp(24px, 6vw, 32px); }
}
.cta-band__rule {
  width: 48px;
  height: 2px;
  background: var(--crimson);
  margin: 0 0 22px;
}
.cta-band__sub {
  font-size: clamp(14px, 1.05vw, 16px);
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  margin: 0 0 32px;
  max-width: 480px;
}
.cta-band--ready .cta-band__actions {
  justify-content: flex-start;
}

/* ── RIGHT — what happens next panel ──────────────── */
.cta-band__aside {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 28px 30px;
  position: relative;
}
.cta-band__aside::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--crimson) 0%,
    rgba(139,26,26,0.6) 50%,
    rgba(139,26,26,0.2) 100%);
  border-radius: 14px 14px 0 0;
}
.cta-band__aside-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cta-band__aside-head span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d64a4a;                /* brighter crimson — visible on dark */
  text-shadow: 0 0 18px rgba(214, 74, 74, 0.25);
}
.cta-band__aside-head em {
  font-style: italic;
  font-family: var(--font-display);
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}

.cta-band__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cta-band__steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cta-band__steps li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.cta-band__step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--crimson);
  line-height: 1;
  letter-spacing: -0.005em;
  flex-shrink: 0;
  padding-top: 2px;
  min-width: 26px;
}
.cta-band__step-body { min-width: 0; }
.cta-band__step-body strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--white);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.cta-band__step-body p {
  font-size: 12.5px;
  color: rgba(255,255,255,0.52);
  line-height: 1.55;
  margin: 0;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 980px) {
  .cta-band__layout { grid-template-columns: 1fr; gap: 40px; }
  .cta-band__aside { padding: 24px 24px; }
}
@media (max-width: 640px) {
  .cta-band--ready { padding: 56px 0; }
  .cta-band__h2 { font-size: clamp(24px, 6.5vw, 34px); }
}


/* ------------------------------------------------------------
   19. SITE FOOTER
   ------------------------------------------------------------ */
.site-footer {
  background: var(--cream);
  border-top: 3px solid var(--crimson);
  padding: 60px 0 0;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}

.site-footer__brand {}

.site-footer__logo {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.site-footer__logo-rule {
  width: 22px;
  height: 2px;
  background: var(--crimson);
  margin-bottom: 5px;
}

.site-footer__logo-ebb {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy);
  letter-spacing: 0.02em;
  line-height: 1;
}

.site-footer__logo-systems {
  font-family: var(--font-display);
  font-size: 6px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-top: 3px;
}

.site-footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  line-height: 1.6;
}

.site-footer__contact a {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
  transition: color var(--speed) var(--ease);
  text-decoration: none;
}

.site-footer__contact a:hover {
  color: var(--navy);
}

.site-footer__col h4 {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 20px;
}

.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer__col ul li a {
  font-size: 14px;
  color: var(--text-muted);
  transition: color var(--speed) var(--ease);
  text-decoration: none;
}

.site-footer__col ul li a:hover {
  color: var(--navy);
}

.site-footer__bottom {
  border-top: 1px solid var(--stone);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-footer__copy {
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

.site-footer__location {
  font-size: 12px;
  color: var(--text-faint);
}


/* ------------------------------------------------------------
   20. UTILITIES
   ------------------------------------------------------------ */
.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); }
.text-crimson { color: var(--crimson); }
.text-white  { color: var(--white); }
.text-navy   { color: var(--navy); }

.mt-8  { margin-top:  8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mt-64 { margin-top: 64px; }

.mb-8  { margin-bottom:  8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }

/* Scroll-reveal — applied via JS */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease),
              transform 0.5s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s var(--ease),
              transform 0.45s var(--ease);
}

.reveal-stagger.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
.reveal-stagger.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 80ms; }
.reveal-stagger.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 160ms; }
.reveal-stagger.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 240ms; }
.reveal-stagger.visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 320ms; }
.reveal-stagger.visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 400ms; }


/* ------------------------------------------------------------
   21. WIZARDCD LOGO (CSS WORDMARK)
   Logo anatomy: "Wizard" (navy) + "CD" (crimson), Libre Baskerville Bold,
   1px crimson rule underneath — width = wordmark width exactly.
   CRITICAL: wrapper must be display:inline-flex (not flex) so the
   rule shrink-wraps to text width, never the container width.
   ------------------------------------------------------------ */
.wcd-logo {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
}

.wcd-logo__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--navy);
  white-space: nowrap;
  font-style: normal;
}

.wcd-logo__wordmark em {
  color: var(--crimson);
  font-style: normal;
}

.wcd-logo__rule {
  height: 1px;
  background: var(--crimson);
  width: 100%; /* resolves to wordmark width because of inline-flex */
}

/* Size variants */
.wcd-logo--nav .wcd-logo__wordmark   { font-size: 18px; }
.wcd-logo--nav .wcd-logo__rule       { margin-top: 3px; }

.wcd-logo--mid .wcd-logo__wordmark   { font-size: 36px; }
.wcd-logo--mid .wcd-logo__rule       { margin-top: 6px; }

.wcd-logo--hero .wcd-logo__wordmark  { font-size: 56px; }
.wcd-logo--hero .wcd-logo__rule      { margin-top: 9px; }

/* Dark surface variant — "CD" and rule use brighter crimson (#D44040)
   for contrast; "Wizard" turns white. Never use #8B1A1A on navy bg. */
.wcd-logo--dark .wcd-logo__wordmark       { color: var(--white); }
.wcd-logo--dark .wcd-logo__wordmark em    { color: #D44040; }
.wcd-logo--dark .wcd-logo__rule           { background: #D44040; }


/* ------------------------------------------------------------
   22. RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------ */

/* 1024px — tablet landscape */
@media (max-width: 1024px) {
  :root {
    --section-pad-v: 72px;
  }

  .container {
    padding: 0 32px;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .phase-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .phase-list::before {
    display: none;
  }

  .stat-strip__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }

  .stat-strip__item:nth-child(3) {
    border-right: none;
  }

  .stat-strip__item:nth-child(4) {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .stat-strip__item:nth-child(5) {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .split {
    gap: 48px;
  }
}

/* 768px — tablet portrait */
@media (max-width: 768px) {
  :root {
    --section-pad-v: 56px;
  }

  .container {
    padding: 0 24px;
  }

  /* Nav — show hamburger, hide links */
  .navbar__links,
  .navbar__cta {
    display: none;
  }

  .navbar__hamburger {
    display: flex;
  }

  /* Hero */
  .hero {
    padding: 80px 0 72px;
  }

  .hero__lead {
    font-size: 16px;
  }

  /* Grids collapse to 1 or 2 col */
  .grid-2,
  .grid-3,
  .split {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .product-cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .operator-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .phase-list {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .stat-strip__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-strip__item:nth-child(3) {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .stat-strip__item:nth-child(5) {
    grid-column: span 2;
    border-right: none;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .site-footer__bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .pillar-grid {
    grid-template-columns: 1fr;
  }

  .cta-band__actions {
    flex-direction: column;
    align-items: center;
  }

  .page-hero {
    padding: 72px 0 28px;
  }
}

/* ------------------------------------------------------------
   23. PAGE-SPECIFIC COMPONENTS
   (section-head, split-layout, stat blocks, security layers,
    speed-versus, metric-strip, track record, VMV, etc.)
   ------------------------------------------------------------ */

/* Credibility ribbon — compact navy band */
.cred-bar {
  background: var(--navy);
  border-bottom: 3px solid var(--crimson);
  padding: 20px 0;
}

.cred-bar__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 660px;
  margin: 0 auto;
}

.cred-bar__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 0 32px;
  position: relative;
}

/* Left-aligned crimson accent rule */
.cred-bar__item::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--crimson);
  margin-bottom: 10px;
}

/* Visible pipe divider */
.cred-bar__item + .cred-bar__item {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.cred-bar__value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.cred-bar__value span {
  color: var(--crimson);
  font-size: 24px;
  font-weight: 700;
}

.cred-bar__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
  max-width: 130px;
}

/* Home product cards — teaser only, full-card links */
.home-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--stone);
}

.home-product-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  padding: 48px 44px 40px;
  text-decoration: none;
  border-top: 3px solid transparent;
  transition: border-color var(--speed) var(--ease),
              background var(--speed) var(--ease);
}

.home-product-card:hover {
  border-top-color: var(--crimson);
  background: var(--cream);
}

.home-product-card--alt {
  background: var(--cream);
}

.home-product-card--alt:hover {
  background: var(--white);
  border-top-color: var(--crimson);
}

.home-product-card__logo {
  display: flex;
  flex-direction: column;
  margin-bottom: 28px;
}

.home-product-card__logo-rule {
  width: 22px;
  height: 2px;
  background: var(--crimson);
  margin-bottom: 5px;
}

.home-product-card__logo-ebb {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy);
  letter-spacing: 0.02em;
  line-height: 1;
}

.home-product-card__logo-systems {
  font-family: var(--font-display);
  font-size: 6px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-top: 3px;
}

.home-product-card__wcd-logo {
  margin-bottom: 28px;
}

.home-product-card__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 18px;
}

.home-product-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 16px;
}

.home-product-card__desc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
  flex: 1;
  margin-bottom: 36px;
}

.home-product-card__link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--crimson);
  letter-spacing: 0.02em;
  transition: gap var(--speed) var(--ease);
}

.home-product-card__link svg {
  width: 15px;
  height: 15px;
  transition: transform var(--speed) var(--ease);
}

.home-product-card:hover .home-product-card__link svg {
  transform: translateX(4px);
}

/* Three differentiators — home page */
.diff-trio {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

.diff-trio__head h2 {
  margin-top: 10px;
}

.diff-trio__points {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.diff-point {
  padding: 28px 0;
  border-bottom: 1px solid var(--stone);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 20px;
  align-items: start;
}

.diff-point:first-child {
  padding-top: 0;
}

.diff-point:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.diff-point__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--crimson);
  opacity: 0.5;
  padding-top: 4px;
}

.diff-point__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}

.diff-point__body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.75;
}

/* ----------------------------------------------------------
   SINGLE-PAGE SECTIONS (index.html)
   ---------------------------------------------------------- */

/* Hero full-viewport variant */
.hero--full {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 120px;
}

/* Brand First hero — cream, centered, editorial */
.hero--brand-first {
  background: var(--cream);
  min-height: 100vh;
  padding: 80px 0 72px;
}

.hero--brand-first::before,
.hero--brand-first::after {
  display: none;
}

/* ── Hero inline proof strip ───────────────────────────────── */
.hero__proof {
  width: 100%;
  border-top: 1px solid rgba(13, 34, 64, 0.12);
  padding-top: 8px;
}

.hero__proof-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 0 0;
}

.hero__proof-item {
  flex: 1;
  text-align: center;
}

.hero__proof-divider {
  width: 1px;
  height: 30px;
  background: rgba(13, 34, 64, 0.14);
  flex-shrink: 0;
}

.hero__proof-val {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 5px;
}

.hero__proof-val span {
  font-size: 13px;
  font-weight: 700;
  color: var(--crimson);
  margin-left: 1px;
}

.hero__proof-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hero__brand-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
}

/* Logo block — internally left-aligned, matching the actual PNG mark */
.hero__brand-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* rule + SYSTEMS hug the left edge of EBB */
}

.hero__brand-rule {
  width: 48px;
  height: 3px;
  background: var(--crimson);
  margin-bottom: 12px;
}

.hero__brand-ebb {
  font-family: var(--font-display);
  font-size: clamp(72px, 11vw, 112px);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.05em;
  line-height: 1;
}

.hero__brand-systems {
  font-family: var(--font-display);
  font-size: clamp(10px, 1.15vw, 14px);
  font-weight: 400;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-top: 8px;
}

.hero__brand-tagline {
  font-size: clamp(24px, 3.4vw, 42px);
  font-weight: 700;
  color: var(--navy);
  max-width: 620px;
  line-height: 1.22;
  margin: 0;
}

.hero__brand-tagline em {
  font-style: italic;
  font-weight: 400;
  color: var(--navy);
}

.hero__brand-lead {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 460px;
  line-height: 1.75;
  margin: 0;
}

.hero__actions--center {
  justify-content: center;
}

/* Inline stats row — part of Brand First hero */
.hero__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(13, 34, 64, 0.12);
  width: 100%;
  max-width: 560px;
}

.hero__stat {
  flex: 1;
  text-align: center;
  padding: 0 28px;
}

.hero__stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(13, 34, 64, 0.14);
  flex-shrink: 0;
}

.hero__stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 6px;
}

.hero__stat-value span {
  color: var(--crimson);
  font-size: 20px;
}

.hero__stat-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Dark scroll-line for light hero backgrounds */
.hero__scroll-line--dark {
  background: linear-gradient(to bottom, rgba(13, 34, 64, 0.3), transparent);
}

/* Scroll hint — animated line */
.hero__scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50%  { opacity: 1; transform: scaleY(1); transform-origin: top; }
  100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
}

/* How It Works */
.sp-how__head {
  margin-bottom: 64px;
}

.sp-how__head h2 {
  margin-top: 10px;
}

.sp-how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}

/* Horizontal connector line behind the step bars */
.sp-how__steps::before {
  content: '';
  position: absolute;
  top: 24px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 1px;
  background: var(--stone);
  z-index: 0;
}

.sp-step {
  padding: 0 36px 0 0;
  position: relative;
  z-index: 1;
}

.sp-step:last-child {
  padding-right: 0;
}

.sp-step__num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  background: var(--navy);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
  position: relative;
  z-index: 2;
}

.sp-step__bar {
  width: 32px;
  height: 3px;
  background: var(--crimson);
  margin-bottom: 18px;
}

.sp-step__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  line-height: 1.3;
}

.sp-step__body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.75;
}

/* Payment Gateway section */
.sp-gateway__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.sp-gateway__left h2 {
  margin-top: 10px;
  margin-bottom: 20px;
}

.sp-gateway__lead {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 40px;
}

.sp-gateway__kpis {
  display: flex;
  gap: 0;
  border: 1px solid var(--stone);
  border-top: 3px solid var(--crimson);
  margin-bottom: 36px;
}

.sp-kpi {
  flex: 1;
  padding: 20px 18px;
  border-right: 1px solid var(--stone);
  text-align: center;
}

.sp-kpi:last-child {
  border-right: none;
}

.sp-kpi__val {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 6px;
}

.sp-kpi__val span {
  color: var(--crimson);
  font-size: 18px;
}

.sp-kpi__lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.sp-gateway__points {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--stone);
  background: var(--white);
}

.sp-gpoint {
  padding: 28px 28px;
  border-bottom: 1px solid var(--stone);
}

.sp-gpoint:last-child {
  border-bottom: none;
}

.sp-gpoint__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.sp-gpoint__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(139, 26, 26, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sp-gpoint__icon svg {
  width: 16px;
  height: 16px;
  color: var(--crimson);
}

.sp-gpoint__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}

.sp-gpoint__body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

.sp-gateway__cta {
  display: inline-flex;
}

/* WizardCd section */
.sp-wcd {
  background: var(--navy);
  padding: 120px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sp-wcd::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  border: 1px solid rgba(139, 26, 26, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.sp-wcd::after {
  content: '';
  position: absolute;
  bottom: -250px;
  right: -100px;
  width: 500px;
  height: 500px;
  border: 1px solid rgba(139, 26, 26, 0.06);
  border-radius: 50%;
  pointer-events: none;
}

.sp-wcd__inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}

.sp-wcd__logo {
  display: inline-flex;
  margin-bottom: 32px;
}

.sp-wcd__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 24px;
}

.sp-wcd__headline {
  color: var(--white);
  margin-bottom: 28px;
  font-size: clamp(28px, 4vw, 44px);
}

.sp-wcd__body {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.8;
  margin-bottom: 44px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.sp-wcd__btn svg {
  width: 15px;
  height: 15px;
}

/* ----------------------------------------------------------
   PLATFORM INTRO
   ---------------------------------------------------------- */
.sp-platform {
  background: var(--white);
  padding: 80px 0;
}

.sp-platform__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  /* Center the Mission/Vision column vertically against the taller
     Who We Are column — visually balanced, no top dead-space */
  align-items: center;
}

.sp-platform__body h2 {
  margin: 12px 0 20px;
}

.sp-platform__lead {
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-muted);
}

.sp-platform__mission {
  padding-left: 36px;
  border-left: 3px solid var(--crimson);
}

/* Stacked Mission + Vision blocks within the right column */
.sp-platform__mv-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sp-platform__mv-divider {
  height: 1px;
  background: linear-gradient(90deg,
    rgba(13,34,64,0.2) 0%,
    rgba(139,26,26,0.4) 50%,
    rgba(13,34,64,0.2) 100%);
  margin: 28px 0;
  max-width: 200px;
  opacity: 0.6;
}

.sp-platform__mission-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--text-body);
  line-height: 1.75;
  margin-bottom: 0;
}

.sp-platform__more {
  display: inline-block;
  margin-top: 28px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: color var(--speed) var(--ease);
}

.sp-platform__more:hover {
  color: var(--crimson);
}

/* Two instances of the trigger: one inside the body (desktop), one after
   mission/vision (mobile). Show only one at a time per breakpoint. */
.sp-platform__more--mobile {
  display: none;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(13, 34, 64, 0.08);
}

@media (max-width: 768px) {
  .sp-platform__more--desktop { display: none; }
  .sp-platform__more--mobile  { display: inline-block; }
}

/* ----------------------------------------------------------
   SOLUTIONS GRID
   ---------------------------------------------------------- */
.sp-solutions {
  position: relative;
}

.sp-solutions::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background: var(--crimson);
}

.sp-solutions__head {
  margin-bottom: 48px;
}

.sp-solutions__head h2 {
  margin-top: 12px;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.sol-card {
  background: var(--white);
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 6px;
  border: 1px solid rgba(13, 34, 64, 0.09);
  box-shadow: 0 2px 8px rgba(13, 34, 64, 0.04);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease,
              border-color 0.25s ease, background 0.25s ease;
}

.sol-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(13, 34, 64, 0.12);
  border-color: var(--crimson);
  background: var(--cream);
}

.sol-card--link { cursor: pointer; }

.sol-card--future {
  background: var(--cream);
  border-style: dashed;
}

.sol-card__icon {
  width: 28px;
  height: 28px;
  color: var(--crimson);
  margin-bottom: 10px;
  transition: transform 0.25s ease;
}

.sol-card:hover .sol-card__icon {
  transform: scale(1.15);
}

.sol-card__icon svg {
  width: 100%;
  height: 100%;
}

.sol-card__tag {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
}

.sol-card__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin: 0;
}

.sol-card__body {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  flex: 1;
}

.sol-card__cta {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  margin-top: 8px;
  display: inline-block;
  text-decoration: none;
  transition: color 0.2s ease;
}

.sol-card:hover .sol-card__cta {
  color: var(--crimson);
}

/* ----------------------------------------------------------
   MISSION & VISION
   ---------------------------------------------------------- */
.sp-mission {
  background: var(--navy);
  padding: 72px 0;
}

.sp-mission__inner {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 80px;
  align-items: start;
}

.sp-mission__quote {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-style: italic;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.65;
  margin-top: 16px;
}

.sp-mission__vision-text {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 16px;
}

/* Network section */
/* Network section — white bg (distinct from solutions' cream) + crimson chapter rule */
.sp-network {
  background: var(--white);
  position: relative;
}

.sp-network::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background: var(--crimson);
}

.sp-network__head {
  margin-bottom: 56px;
}

.sp-network__head h2 {
  margin-top: 10px;
  margin-bottom: 12px;
}

.sp-network__sub {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 520px;
}

.sp-network__table {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(13, 34, 64, 0.08);
}

.sp-netrow {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid rgba(13, 34, 64, 0.08);
}

.sp-netrow:last-child {
  border-bottom: 1px solid rgba(13, 34, 64, 0.08);
}

.sp-netrow__cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.sp-netrow__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sp-netrow__chip {
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  background: rgba(13, 34, 64, 0.04);
  border: 1px solid rgba(13, 34, 64, 0.10);
  padding: 5px 13px;
  border-radius: 3px;
  letter-spacing: 0.01em;
}

.sp-network__foot {
  margin-top: 20px;
  text-align: left;
  position: relative;
  z-index: 1;
  padding-top: 18px;
  border-top: 1px solid rgba(13,34,64,0.08);
}

/* Contact section */
.sp-contact {
  background: var(--navy);
  padding: var(--section-pad-v) 0;
  position: relative;
  overflow: hidden;
}

.sp-contact::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 500px;
  height: 500px;
  border: 1px solid rgba(139, 26, 26, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.sp-contact__layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.sp-contact__headline {
  color: var(--white);
  margin-top: 10px;
  margin-bottom: 20px;
}

.sp-contact__sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.75;
  margin-bottom: 36px;
}

.sp-contact__details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sp-contact__link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color var(--speed) var(--ease);
}

.sp-contact__link:hover {
  color: var(--white);
}

.sp-contact__link--plain {
  cursor: default;
}

.sp-contact__link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--crimson);
}

/* Contact form on dark bg */
.sp-contact__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group--light label {
  color: rgba(255, 255, 255, 0.55);
}

.form-group--light input,
.form-group--light textarea {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--white);
}

.form-group--light input::placeholder,
.form-group--light textarea::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.form-group--light input:focus,
.form-group--light textarea:focus {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.09);
  outline: none;
}

/* ----------------------------------------------------------
   ABOUT PAGE
   ---------------------------------------------------------- */
.about-body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 80px;
  align-items: start;
}

.about-body__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-body__text .lead {
  color: var(--navy);
}

.about-body__text p {
  color: var(--text-muted);
}

.about-body__values {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--stone);
  border-top: 3px solid var(--crimson);
}

.about-value {
  padding: 24px 24px;
  border-bottom: 1px solid var(--stone);
}

.about-value:last-child {
  border-bottom: none;
}

.about-value__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 6px;
}

.about-value__desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* Product link rows — about page */
.about-products {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.about-product-link {
  display: grid;
  grid-template-columns: 80px 1fr 32px;
  gap: 28px;
  align-items: center;
  background: var(--white);
  padding: 28px 32px;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: border-color var(--speed) var(--ease),
              background var(--speed) var(--ease);
}

.about-product-link:hover {
  border-left-color: var(--crimson);
  background: var(--cream);
}

.about-product-link__logo {
  display: flex;
  flex-direction: column;
}

.about-product-link__rule {
  width: 18px;
  height: 2px;
  background: var(--crimson);
  margin-bottom: 4px;
}

.about-product-link__ebb {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
  letter-spacing: 0.02em;
  line-height: 1;
}

.about-product-link__sys {
  font-family: var(--font-display);
  font-size: 5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-top: 2px;
}

.about-product-link__wcd {
  /* wcd-logo--nav already sized correctly */
}

.about-product-link__plain-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--navy);
  opacity: 0.4;
}

.about-product-link__content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.about-product-link__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
}

.about-product-link__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}

.about-product-link__arrow {
  color: var(--stone);
  transition: color var(--speed) var(--ease),
              transform var(--speed) var(--ease);
  display: flex;
  align-items: center;
}

.about-product-link__arrow svg {
  width: 20px;
  height: 20px;
}

.about-product-link:hover .about-product-link__arrow {
  color: var(--crimson);
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .about-body {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 768px) {
  .about-product-link {
    grid-template-columns: 60px 1fr 24px;
    gap: 16px;
    padding: 20px 20px;
  }
}

/* Section head — centerable heading block */
.section-head {
  margin-bottom: 56px;
}
.section-head h2 {
  margin-bottom: 16px;
  margin-top: 10px;
}
.section-head.text-center p {
  margin-left: auto;
  margin-right: auto;
}

/* Section lead text */
.section-lead {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 620px;
  line-height: 1.75;
  margin-top: 12px;
}

/* Extra margin utilities */
.mt-40 { margin-top: 40px; }

/* Split layout (3fr / 2fr, items centered) */
.split-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 80px;
  align-items: start;
}

.split-layout__text {}
.split-layout__aside {}

/* Aside stat block */
.aside-stat-block {
  background: var(--cream);
  border: 1px solid var(--stone);
  border-top: 3px solid var(--crimson);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.asb-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--stone);
}

.asb-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.asb-item:first-child {
  padding-top: 0;
}

.asb-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 8px;
}

.asb-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* Network stat block (home page right column) */
.network-stat-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--stone);
}

.nsb-item {
  background: var(--white);
  padding: 28px 24px;
  text-align: center;
}

.nsb-value {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 8px;
}

.nsb-value span {
  color: var(--crimson);
}

.nsb-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Speed-versus comparison (gateway page) */
.speed-versus {
  padding: 28px 24px;
  background: var(--cream);
  border: 1px solid var(--stone);
}

.sv-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sv-bar {
  flex: 1;
  height: 8px;
  border-radius: 2px;
  background: var(--stone);
  overflow: hidden;
}

.sv-bar--ours .sv-fill {
  width: 20%;
  height: 100%;
  background: var(--crimson);
}

.sv-bar--industry .sv-fill {
  width: 85%;
  height: 100%;
  background: var(--stone);
  border: 1px solid var(--muted);
}

.sv-detail {
  min-width: 100px;
  text-align: right;
}

.sv-time {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}

.sv-time--muted {
  color: var(--text-muted);
}

.sv-who {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crimson);
}

.sv-who--muted {
  color: var(--text-faint);
}

/* Metric strip (gateway throughput) */
.metric-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--stone);
  margin-top: 40px;
}

.metric-strip__item {
  background: var(--white);
  padding: 36px 28px;
}

.metric-strip__value {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 12px;
}

.metric-strip__value span {
  color: var(--crimson);
}

.metric-strip__label {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Security layers (gateway — badge style) */
.security-layers {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--stone);
  margin-top: 40px;
}

.sec-layer {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--stone);
}

.sec-layer:last-child {
  border-bottom: none;
}

.sec-layer__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  writing-mode: horizontal-tb;
  padding: 20px 8px;
  flex-shrink: 0;
}

.sec-layer__content {
  padding: 24px 28px;
}

.sec-layer__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}

.sec-layer__body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Reliability items (gateway) */
.reliability-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rel-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--stone);
}

.rel-item:last-child {
  border-bottom: none;
}

.rel-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--crimson);
  flex-shrink: 0;
  margin-top: 7px;
}

.rel-item__text {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.7;
}

/* Differentiator panel (gateway — dark) */
.differentiator-panel {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 3px solid var(--crimson);
  padding: 28px 32px;
}

.diff-panel__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 12px;
}

.diff-panel__body {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.75;
}

.diff-panel__body strong {
  color: var(--white);
  font-weight: 600;
}

/* CBS tag with named children */
.cbs-tag__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  display: block;
}

.cbs-tag__vendor {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  display: block;
  margin-top: 3px;
}

.cbs-tag--muted {
  border-left-color: var(--stone);
  opacity: 0.7;
}

/* Track record grid (about page) */
.track-record-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--stone);
  margin-top: 48px;
}

.tr-card {
  background: var(--white);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tr-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(139, 26, 26, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tr-card__icon svg {
  width: 20px;
  height: 20px;
  color: var(--crimson);
}

.tr-card__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin: 0;
}

.tr-card__body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
  flex: 1;
}

.tr-card--note {
  background: var(--navy);
  justify-content: center;
}

.tr-card--note p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
}

/* VMV layout (about page — vision / mission / values) */
.vmv-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.vmv-left {}

.vmv-left h2 {
  font-style: italic;
  margin-top: 10px;
}

.vmv-right {}

.vmv-mission__text {
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.8;
  margin-top: 12px;
}

/* Values list (about page) */
.values-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.value-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--stone);
}

.value-row:last-child {
  border-bottom: none;
}

.value-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--crimson);
  flex-shrink: 0;
  margin-top: 6px;
}

.value-row__name {
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 2px;
}

.value-row__desc {
  font-size: 13px;
  color: var(--text-muted);
}

/* WizardCd product card logo spacing fix */
.product-card .wcd-logo {
  margin-bottom: 24px;
}


/* ---- Responsive additions for new components ---- */
@media (max-width: 1024px) {
  .sp-how__steps {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .sp-how__steps::before { display: none; }

  .sp-gateway__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .sp-platform__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sp-platform__mission {
    padding-left: 24px;
  }

  .sp-netrow {
    grid-template-columns: 160px 1fr;
    padding: 18px 20px;
  }

  .sp-contact__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .diff-trio {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .split-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .metric-strip {
    grid-template-columns: 1fr 1fr;
  }

  .track-record-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vmv-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 768px) {
  .hero--full {
    /* Full-viewport hero, content centered with balanced breathing room
       on top and bottom. Equal vertical padding ensures any leftover
       space distributes evenly above and below the brand block rather
       than piling up at one end. */
    min-height: 100dvh;
    min-height: 100vh; /* fallback for older browsers */
    padding: 56px 0;
    align-items: center;
  }

  /* Tighten internal spacing of the centered brand block on mobile */
  .hero__brand-center {
    gap: 22px;
  }

  .sp-wcd {
    padding: 80px 0;
  }

  .sp-netrow {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sp-gateway__kpis {
    flex-direction: column;
  }

  .sp-kpi {
    border-right: none;
    border-bottom: 1px solid var(--stone);
  }

  .sp-kpi:last-child {
    border-bottom: none;
  }

  .home-products {
    grid-template-columns: 1fr;
  }

  .cred-bar__grid {
    grid-template-columns: 1fr;
    max-width: 320px;
  }

  .cred-bar__item {
    padding: 20px 0;
    border-left: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .cred-bar__item + .cred-bar__item {
    border-left: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .cred-bar__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .cred-bar__value {
    font-size: 32px;
  }

  .split-layout {
    gap: 32px;
  }

  .metric-strip {
    grid-template-columns: 1fr;
  }

  .track-record-grid {
    grid-template-columns: 1fr;
  }

  .sec-layer {
    grid-template-columns: 48px 1fr;
  }

  .network-stat-block {
    grid-template-columns: 1fr 1fr;
  }

  /* Solutions cards stack on phones — was only collapsing at <480px
     which left a broken 3-col layout between 480px-768px. */
  .solutions-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .sol-card {
    padding: 24px 22px 22px;
  }
}


/* 480px — large phone */
@media (max-width: 480px) {
  .container {
    padding: 0 20px;
  }

  h1 { font-size: 28px; }
  h2 { font-size: 24px; }

  .operator-grid {
    grid-template-columns: 1fr;
  }

  .stat-strip__grid {
    grid-template-columns: 1fr;
  }

  .stat-strip__item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 24px;
  }

  .stat-strip__item:last-child {
    border-bottom: none;
  }

  .hero__actions {
    /* Grid (one column, two rows) guarantees children are pixel-identical
       in width regardless of label length, padding, or border style. */
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    align-items: stretch;
  }

  .hero__actions .btn,
  .hero__actions .btn--lg {
    /* Buttons inherit the grid-cell width — no need for width:100% but
       harmless. Center the label since the cell is wider than the text. */
    width: 100%;
    justify-content: center;
    text-align: center;
    /* Equalise vertical mass between filled (primary) and outline buttons */
    padding: 14px 24px;
    min-height: 48px;
  }

  .product-card {
    padding: 28px 24px;
  }

  /* Solutions grid — mobile */
  .solutions-grid {
    grid-template-columns: 1fr;
  }

  .sp-mission__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero__brand-ebb {
    font-size: clamp(56px, 18vw, 80px);
  }

  .hero__actions--center {
    /* Reinforce grid for the centered variant + cap width so buttons
       don't stretch edge-to-edge on small screens. */
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero__proof-grid {
    max-width: 100%;
    padding: 14px 20px 18px;
  }

  .hero__proof-val {
    font-size: 22px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sp-mission__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}


/* ============================================================
   ABOUT PAGE — specific components
   ============================================================ */

/* Taller page hero for about.html */
.page-hero--tall {
  padding: 96px 0 88px;
}

/* ── Who We Are split layout ──────────────────────────────── */
.about-body-section {
  background: var(--white);
}

.about-split {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 80px;
  align-items: start;
}

.about-split__text h2 {
  margin-top: 12px;
  margin-bottom: 0;
}

.about-split__text p {
  margin-top: 16px;
}

/* Proof stats box */
.about-proof {
  background: var(--navy);
  border-top: 3px solid var(--crimson);
  padding: 40px 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.about-proof__stat {
  padding: 28px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.about-proof__stat:nth-child(2n) {
  border-right: none;
}

.about-proof__stat:nth-last-child(-n+2) {
  border-bottom: none;
}

.about-proof__val {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  margin-bottom: 8px;
}

.about-proof__val span {
  font-size: 20px;
  color: var(--crimson);
  margin-left: 2px;
}

.about-proof__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  text-transform: uppercase;
}

/* ── Mission & Vision ─────────────────────────────────────── */
.about-mv {
  background: var(--navy);
}

.about-mv__inner {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 80px;
  align-items: start;
}

.about-mv__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16px, 1.8vw, 20px);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.65;
  margin-top: 16px;
}

.about-mv__vision-text {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
  margin-top: 16px;
}

/* ── Core Values grid ─────────────────────────────────────── */
.about-values-section {
  background: var(--cream);
}

.about-values-section h2 {
  margin-top: 12px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.value-card {
  background: var(--white);
  border: 1px solid var(--stone);
  border-top: 3px solid var(--crimson);
  padding: 36px 32px;
  transition: box-shadow var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}

.value-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.value-card__icon {
  width: 40px;
  height: 40px;
  color: var(--crimson);
  margin-bottom: 20px;
}

.value-card__icon svg {
  width: 100%;
  height: 100%;
}

.value-card__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}

.value-card__desc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ── Solutions overview ───────────────────────────────────── */
.about-solutions-section {
  background: var(--white);
}

.about-solutions-section h2 {
  margin-top: 12px;
  margin-bottom: 0;
}

.about-solutions-lead {
  margin-top: 12px;
  font-size: 16px;
  color: var(--text-muted);
  max-width: 560px;
}

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

/* Last item centred when 5 items in 3-col grid */
.about-sol-grid > .about-sol-item:nth-child(3n+1):last-child {
  grid-column: 1 / -1;
  max-width: calc(33.333% - 16px);
}

.about-sol-item {
  background: var(--cream);
  border: 1px solid var(--stone);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.about-sol-item:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--crimson);
}

.about-sol-item__icon {
  width: 36px;
  height: 36px;
  color: var(--crimson);
  margin-bottom: 16px;
}

.about-sol-item__icon svg {
  width: 100%;
  height: 100%;
}

.about-sol-item__tag {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 10px;
}

.about-sol-item__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  flex: 1;
}

.about-sol-item__link {
  display: inline-block;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--crimson);
  letter-spacing: 0.02em;
  transition: color var(--speed) var(--ease);
}

.about-sol-item__link:hover {
  color: var(--navy);
}

/* ── How We Work ──────────────────────────────────────────── */
.about-how-section {
  background: var(--stone);
}

.about-how-section h2 {
  margin-top: 12px;
}

.about-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(0,0,0,0.06);
  margin-top: 56px;
  border-top: 3px solid var(--crimson);
}

.about-how-item {
  background: var(--white);
  padding: 40px 36px;
}

.about-how-item__num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--crimson);
  margin-bottom: 20px;
}

.about-how-item__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
  margin-bottom: 16px;
}

.about-how-item__body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.75;
}

/* ── What We Offer — reference index ─────────────────────── */
.about-index-section {
  background: var(--white);
}

.about-index-section h2 {
  margin-top: 12px;
}

.about-index {
  margin-top: 48px;
  border-top: 1px solid #D8D4CC;
}

.about-index__row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: 40px;
  padding: 24px 0;
  border-bottom: 1px solid #D8D4CC;
  transition: background var(--speed) var(--ease);
}

.about-index__row:hover {
  background: rgba(139, 26, 26, 0.03);
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
}

.about-index__name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}

.about-index__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}

.about-index__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--crimson);
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: color var(--speed) var(--ease);
}

.about-index__link:hover {
  color: var(--navy);
}

/* ── About page responsive ────────────────────────────────── */
@media (max-width: 1024px) {
  .about-split {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-proof {
    max-width: 480px;
  }

  .about-mv__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-how-grid {
    grid-template-columns: 1fr;
  }

  .about-index__row {
    grid-template-columns: 180px 1fr auto;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .page-hero--tall {
    padding: 72px 0 64px;
  }

  .about-proof {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }

  .values-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 40px;
  }

  .about-index__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }

  .about-index__row:hover {
    margin: 0;
    padding: 20px 0;
  }

  .about-index__name {
    margin-bottom: 4px;
  }

  .about-index__link {
    margin-top: 4px;
  }
}

@media (max-width: 480px) {
  .about-proof {
    grid-template-columns: 1fr;
  }

  .about-proof__stat {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .about-proof__stat:nth-last-child(-n+2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .about-proof__stat:last-child {
    border-bottom: none;
  }

  .about-how-item {
    padding: 32px 24px;
  }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* ── About hero — light cream variant ── */
.ab-hero {
  background: var(--cream);
}

.ab-hero .page-hero__title {
  color: var(--navy);
  font-size: clamp(28px, 3.8vw, 48px);
}

.ab-hero .page-hero__lead {
  color: var(--text-muted);
}

.ab-hero .page-hero__eyebrow {
  color: var(--crimson);
}

.ab-hero::before {
  display: none;
}

/* ── Identity: Mission + Vision ── */
.ab-identity {
  position: relative;
  border-top: 1px solid rgba(13, 34, 64, 0.08);
}

.ab-mv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
  margin-bottom: 56px;
}

.ab-mv::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 5%;
  height: 90%;
  width: 2px;
  background: var(--crimson);
  transform: translateX(-50%);
  opacity: 0.35;
}

.ab-mv__col:first-child  { padding-right: 56px; }
.ab-mv__col:last-child   { padding-left: 56px; }

.ab-mv__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.65;
  color: var(--text-body);
  margin-top: 16px;
}

.ab-mv__vision-text {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.8;
  margin-top: 16px;
}

/* ── Core Values ── */
.ab-values__label {
  display: block;
  margin-bottom: 18px;
}

.ab-values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.ab-value {
  background: var(--white);
  border: 1px solid rgba(13, 34, 64, 0.07);
  border-radius: 4px;
  padding: 24px 20px;
  box-shadow: 0 1px 6px rgba(13, 34, 64, 0.05);
}

.ab-value__icon {
  color: var(--crimson);
  line-height: 1;
  margin-bottom: 14px;
}

.ab-value__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}

.ab-value__desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ── How We Work ── */
.ab-process {
  background: var(--white);
  position: relative;
}

.ab-process::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background: var(--crimson);
}

.ab-process h2 {
  margin: 10px 0 40px;
}

.ab-process__track {
  border-top: 1px solid rgba(13, 34, 64, 0.08);
}

.ab-process__step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding: 40px 0;
  border-bottom: 1px solid rgba(13, 34, 64, 0.08);
  align-items: start;
}

.ab-process__num {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--crimson);
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}

.ab-process__step-left h3 {
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin: 0;
}

.ab-process__step-right p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.8;
  margin: 28px 0 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .ab-mv {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ab-mv::after { display: none; }
  .ab-mv__col:first-child,
  .ab-mv__col:last-child { padding: 0; }

  .ab-values__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ab-process__step {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ab-process__step-right p {
    margin-top: 8px;
  }
}

/* old sp-about-* rules removed — page uses ab-* classes now */
.sp-about-track__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 80px;
  align-items: start;
}

.sp-about-track__text h2 {
  margin: 12px 0 20px;
}

.sp-about-track__text p + p {
  margin-top: 16px;
}

.sp-about-track__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(13, 34, 64, 0.10);
  border-radius: 3px;
  overflow: hidden;
  position: sticky;
  top: 100px;
}

.sp-about-stat {
  padding: 28px 22px;
  border-right: 1px solid rgba(13, 34, 64, 0.10);
  border-bottom: 1px solid rgba(13, 34, 64, 0.10);
}

.sp-about-stat:nth-child(2n) {
  border-right: none;
}

.sp-about-stat:nth-last-child(-n+2) {
  border-bottom: none;
}

.sp-about-stat__val {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 8px;
}

.sp-about-stat__val span {
  font-size: 16px;
  color: var(--crimson);
  margin-left: 2px;
}

.sp-about-stat__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1.4;
}

/* 2-col override for core values on about page */
.solutions-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

/* Mission & Vision */
.sp-about-mv {
  background: var(--cream);
  position: relative;
}

.sp-about-mv::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background: var(--crimson);
}

.sp-about-mv__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
  position: relative;
}

.sp-about-mv__inner::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--crimson);
  transform: translateX(-50%);
}

.sp-about-mv .sp-platform__mission {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  padding-right: 64px;
}

.sp-about-mv .sp-about-values {
  padding-left: 64px;
}

.sp-about-mv .eyebrow {
  display: block;
  margin-bottom: 20px;
}

.sp-about-values {
  display: flex;
  flex-direction: column;
}

.sp-about-value {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid rgba(13, 34, 64, 0.08);
}

.sp-about-value:first-of-type {
  border-top: 1px solid rgba(13, 34, 64, 0.08);
}

.sp-about-value__name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}

.sp-about-value__desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

.sp-about-vision .eyebrow {
  display: block;
  margin-bottom: 20px;
}

.sp-about-vision__text {
  font-size: 17px;
  color: var(--text-body);
  line-height: 1.75;
}

/* How We Work */
.sp-about-how {
  background: var(--white);
  position: relative;
}

.sp-about-how::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background: var(--crimson);
}

.sp-about-how h2 {
  margin: 10px 0 48px;
}

.sp-about-how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(13, 34, 64, 0.08);
  border-top: 1px solid rgba(13, 34, 64, 0.08);
}

.sp-about-how__step {
  background: var(--cream);
  padding: 36px 32px;
}

.sp-about-how__num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--crimson);
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.sp-about-how__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
  margin-bottom: 14px;
}

.sp-about-how__body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.75;
}

/* What We Offer */
.sp-about-offer {
  background: var(--white);
  position: relative;
  padding: 28px 0 36px;
}

.sp-about-offer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background: var(--crimson);
}

.sp-about-offer h2 {
  margin: 6px 0 0;
  font-size: clamp(22px, 3vw, 30px);
}

.sp-offer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.sp-offer-card {
  padding: 22px 18px 20px;
  border-radius: 5px;
  border: 1px solid rgba(13, 34, 64, 0.08);
  box-shadow: 0 2px 8px rgba(13, 34, 64, 0.06), 0 1px 2px rgba(13, 34, 64, 0.04);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.sp-offer-card:hover {
  box-shadow: 0 10px 28px rgba(13, 34, 64, 0.13), 0 3px 8px rgba(13, 34, 64, 0.06);
  transform: translateY(-3px);
}

.sp-offer-card__icon {
  color: var(--crimson);
  line-height: 1;
  margin-bottom: 14px;
}

.sp-offer-card__name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
}

.sp-offer-card__desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  flex: 1;
  margin: 0 0 14px;
}

.sp-offer-card__cta {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--crimson);
  letter-spacing: 0.02em;
}

/* Responsive */
@media (max-width: 900px) {
  .sp-about-track__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .sp-about-track__stats {
    position: static;
    max-width: 400px;
  }

  .sp-about-mv__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .sp-about-how__grid {
    grid-template-columns: 1fr;
  }

  .sp-about-offer__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}


/* =============================================================
   NETWORK — CLEAN GRID
   ============================================================= */

.sp-network__grid {
  margin-top: 40px;
  border-top: 1px solid rgba(13, 34, 64, 0.08);
}

.sp-net-cat {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: start;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(13, 34, 64, 0.08);
}

.sp-net-cat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}

.sp-net-cat__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}

.sp-net-cat__count {
  font-size: 10px;
  font-weight: 700;
  color: var(--crimson);
  background: rgba(163, 28, 28, 0.08);
  border-radius: 10px;
  padding: 2px 7px;
}

.sp-net-cat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Badge */
.sp-net-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid rgba(13, 34, 64, 0.12);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  white-space: nowrap;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(13, 34, 64, 0.05);
  transition: border-color 0.2s, box-shadow 0.2s, color 0.2s, transform 0.2s;
  cursor: default;
  opacity: 0;
  transform: translateY(8px);
}

.sp-net-badge.badge-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.sp-net-badge:hover {
  border-color: var(--crimson);
  color: var(--crimson);
  box-shadow: 0 4px 14px rgba(163, 28, 28, 0.1);
  transform: translateY(-2px);
}

/* =============================================================
   NETWORK DRAWER — LIGHT THEME
   ============================================================= */

.net-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 20, 40, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.net-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

.net-drawer {
  position: fixed;
  top: 0;
  right: 0;
  /* Use dvh so mobile Chrome's collapsing URL bar doesn't clip the panel.
     Fallback height + max-height for older engines. */
  height: 100dvh;
  height: 100vh;
  max-height: 100vh;
  width: 700px;
  max-width: 100vw;
  background: var(--white);
  z-index: 901;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -8px 0 48px rgba(8, 20, 40, 0.18);
  overflow: hidden;
}

.net-drawer.is-open {
  transform: translateX(0);
}

.net-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid rgba(13, 34, 64, 0.08);
  flex-shrink: 0;
  background: var(--navy);
}

.net-drawer__header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.net-drawer__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: livePulse 2s ease-out infinite;
}

@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.net-drawer__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.net-drawer__close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.18s, background 0.18s;
}

.net-drawer__close:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}

.net-drawer__body {
  /* Be a flex CHILD of .net-drawer (so it fills the remaining height),
     but use a BLOCK layout internally — Chrome Android can get confused
     by overflow:auto on a flex column container, sometimes refusing to
     paint the bottom region. Block layout makes scrolling predictable. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 20px 28px calc(80px + env(safe-area-inset-bottom, 0px));
}

/* Re-apply former gap manually for direct children that need spacing */
.net-drawer__body > * + * {
  margin-top: 0;
}

/* Stats */
.net-drawer__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(13, 34, 64, 0.08);
  border: 1px solid rgba(13, 34, 64, 0.08);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
}

.net-drawer__stat {
  background: var(--cream);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.net-drawer__stat-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}

.net-drawer__stat-num em {
  font-style: normal;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
}

.net-drawer__stat-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Groups */
.net-drawer__group {
  padding: 16px 0;
  border-bottom: 1px solid rgba(13, 34, 64, 0.08);
}

.net-drawer__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.net-drawer__cat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
}

.net-drawer__cat-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(13, 34, 64, 0.06);
  border-radius: 10px;
  padding: 2px 8px;
}

.net-drawer__desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 12px;
}

.net-drawer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.net-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid rgba(13, 34, 64, 0.12);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  background: var(--cream);
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.net-chip:hover {
  border-color: var(--crimson);
  color: var(--crimson);
  background: rgba(163, 28, 28, 0.04);
}

.net-drawer__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 13px 24px;
  background: var(--crimson);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 3px;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.15s;
}

.net-drawer__cta-btn:hover {
  background: #8b1a1a;
  transform: translateY(-1px);
}

@media (max-width: 700px) {
  .net-drawer { width: 100vw; }
  .sp-net-cat { grid-template-columns: 1fr; gap: 12px; }

  /* CTA spans the body width on mobile — feels like a clear section
     terminator and gives a larger tap target than the desktop pill. */
  .net-drawer__cta-btn {
    display: flex;
    width: 100%;
    padding: 15px 24px;
    margin-top: 28px;
    font-size: 14px;
  }
}

/* =============================================================
   HOW WE WORK — ACCORDION
   ============================================================= */

.ab-accordion {
  margin-top: 40px;
  border-top: 1px solid rgba(13, 34, 64, 0.1);
}

.ab-accordion__item {
  border-bottom: 1px solid rgba(13, 34, 64, 0.1);
  border-left: 3px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.ab-accordion__item.is-active {
  border-left-color: var(--crimson);
  background: rgba(13, 34, 64, 0.025);
}

.ab-accordion__trigger {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 24px;
  text-align: left;
}

.ab-accordion__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--crimson);
  flex-shrink: 0;
  width: 24px;
  transition: opacity 0.2s;
}

.ab-accordion__item:not(.is-active) .ab-accordion__num {
  opacity: 0.45;
}

.ab-accordion__title {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 700;
  color: var(--navy);
  transition: opacity 0.2s;
}

.ab-accordion__item:not(.is-active) .ab-accordion__title {
  opacity: 0.5;
  font-weight: 400;
}

.ab-accordion__chevron {
  flex-shrink: 0;
  color: var(--crimson);
  opacity: 0;
  transform: rotate(0deg);
  transition: transform 0.3s ease, opacity 0.2s;
}

.ab-accordion__item.is-active .ab-accordion__chevron {
  opacity: 1;
  transform: rotate(180deg);
}

.ab-accordion__trigger:hover .ab-accordion__chevron {
  opacity: 0.4;
}

.ab-accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.ab-accordion__body p {
  padding: 0 24px 28px calc(24px + 44px);
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 600px) {
  .ab-accordion__trigger { padding: 22px 16px; gap: 14px; }
  .ab-accordion__body p  { padding: 0 16px 22px calc(16px + 38px); }
}

/* =============================================================
   PROFILE DRAWER
   ============================================================= */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 20, 40, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

.profile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 700px;
  max-width: 100vw;
  background: var(--white);
  z-index: 901;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -8px 0 48px rgba(8, 20, 40, 0.18);
}

.profile-drawer.is-open {
  transform: translateX(0);
}

/* Header */
.profile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid rgba(13, 34, 64, 0.08);
  flex-shrink: 0;
  background: var(--navy);
}

.profile-drawer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-drawer__logo-rule {
  width: 3px;
  height: 28px;
  background: var(--crimson);
  border-radius: 2px;
}

.profile-drawer__logo-ebb {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.06em;
}

.profile-drawer__logo-systems {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 1px;
}

.profile-drawer__close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.18s, background 0.18s;
}

.profile-drawer__close:hover {
  color: var(--white);
  background: rgba(255,255,255,0.1);
}

/* Scrollable body */
.profile-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Mission + Vision block */
.profile-drawer__mv {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.profile-drawer__mv-block {
  padding: 14px 0;
}

.profile-drawer__mv-block:first-child {
  padding-top: 0;
}

.profile-drawer__divider {
  height: 1px;
  background: linear-gradient(to right, var(--crimson), transparent);
  opacity: 0.4;
}

.profile-drawer__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 10px;
}

.profile-drawer__quote {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-body);
  margin: 0;
}

.profile-drawer__vision {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0;
}

/* Section wrapper */
.profile-drawer__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Values grid */
.profile-drawer__values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.profile-drawer__value {
  background: var(--cream);
  border: 1px solid rgba(13, 34, 64, 0.07);
  border-radius: 6px;
  padding: 14px 14px;
  transition: box-shadow 0.2s;
}

.profile-drawer__value:hover {
  box-shadow: 0 4px 16px rgba(13, 34, 64, 0.08);
}

.profile-drawer__value-icon {
  color: var(--crimson);
  margin-bottom: 10px;
}

.profile-drawer__value h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 5px;
  letter-spacing: 0.02em;
}

.profile-drawer__value p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* How We Work steps */
.profile-drawer__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(13, 34, 64, 0.08);
}

.profile-drawer__step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(13, 34, 64, 0.08);
}

.profile-drawer__step-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--crimson);
  flex-shrink: 0;
  margin-top: 3px;
  width: 20px;
}

.profile-drawer__step h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 5px;
}

.profile-drawer__step p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

/* Footer */
.profile-drawer__footer {
  padding-top: 8px;
  border-top: 1px solid rgba(13, 34, 64, 0.08);
}

.profile-drawer__full-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.18s;
}

.profile-drawer__full-link:hover {
  color: var(--crimson);
}

/* ============================================================
   GATEWAY PAGE — gw-*
   ============================================================ */

/* ── Keyframes ──────────────────────────────────────── */
@keyframes gwGlowPulse {
  0%, 100% { opacity: 0.28; transform: scale(1); }
  50%       { opacity: 0.42; transform: scale(1.08); }
}
@keyframes gwScrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%       { transform: translateY(8px); opacity: 1; }
}

/* ── Top bar (product page) ───────────────────────── */
.gw-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 36px;
  height: 64px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(13,34,64,0.08);
}
.gw-topbar__left {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.gw-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.gw-back:hover { color: var(--navy); }
.gw-back svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s; }
.gw-back:hover svg { transform: translateX(-3px); }
.gw-topbar__sep {
  width: 1px;
  height: 22px;
  background: rgba(13,34,64,0.12);
  flex-shrink: 0;
}
.gw-topbar__crumb {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.gw-topbar__crumb-kicker {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 3px;
}
.gw-topbar__crumb-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  letter-spacing: -0.005em;
}
.gw-topbar__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.gw-topbar__nav a {
  position: relative;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 10px 12px 12px;
  border-radius: 6px 6px 0 0;
  transition: color 0.18s, background 0.18s;
}
.gw-topbar__nav a:hover {
  color: var(--navy);
  background: rgba(13,34,64,0.04);
}
.gw-topbar__nav a::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--crimson);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(.4,1.1,.5,1), opacity 0.2s;
  opacity: 0;
}
.gw-topbar__nav a.is-active {
  color: var(--navy);
  font-weight: 600;
}
.gw-topbar__nav a.is-active::after {
  transform: scaleX(1);
  opacity: 1;
}
/* Anchor scroll offset so sections don't hide behind sticky topbar */
section[id] { scroll-margin-top: 80px; }
html { scroll-behavior: smooth; }
.gw-topbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  background: var(--navy);
  padding: 9px 18px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.gw-topbar__cta:hover { background: var(--crimson); transform: translateY(-1px); }

/* ── Hero — compact product-intro panel ──────────── */
.gw-hero {
  position: relative;
  background: linear-gradient(180deg, #07101f 0%, #0b1a31 100%);
  overflow: hidden;
  padding: clamp(56px, 9vh, 96px) 0 clamp(48px, 7vh, 72px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.gw-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.gw-hero__orb {
  position: absolute;
  top: -160px;
  right: -120px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,26,26,0.22) 0%, transparent 65%);
  animation: gwOrbFloat 12s ease-in-out infinite;
}
.gw-hero__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%);
}
@keyframes gwOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(-20px, 30px) scale(1.04); }
}

.gw-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(28px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(32px, 5vw, 72px);
}

.gw-hero__intro { min-width: 0; }
.gw-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  background: rgba(139,26,26,0.14);
  border: 1px solid rgba(139,26,26,0.3);
  padding: 7px 14px 7px 11px;
  border-radius: 100px;
  margin-bottom: 26px;
}
.gw-hero__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--crimson);
  animation: gwDotPulse 2s ease-in-out infinite;
}
@keyframes gwDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(139,26,26,0.5); }
  50%       { opacity: 0.7; transform: scale(1.4); box-shadow: 0 0 0 5px rgba(139,26,26,0); }
}
.gw-hero__h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 50px);
  color: var(--white);
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 0 0 18px;
  max-width: 720px;
}
.gw-hero__sub {
  font-size: clamp(14px, 1.1vw, 16px);
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  max-width: 580px;
  margin: 0;
}

/* Inline stat strip — right side */
.gw-hero__stats {
  list-style: none;
  margin: 0;
  padding: 22px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
}
.gw-hero__stats > li {
  background: #07101f;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gw-hero__stats strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.01em;
}
.gw-hero__stats strong em {
  font-style: normal;
  font-size: 0.55em;
  color: var(--crimson);
  font-weight: 700;
  margin-left: 2px;
}
.gw-hero__stats strong > span { color: inherit; }
.gw-hero__stats > li > span {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Capabilities section ─────────────────────────── */
.gw-cap-head {
  max-width: 720px;
  margin-bottom: clamp(36px, 5vh, 56px);
}
.gw-cap-head .gw-section-h2 { margin-top: 14px; }
.gw-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.gw-cap-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(13,34,64,0.12);
  border-radius: 12px;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  /* Permanent floating drop shadow */
  box-shadow:
    0 1px 0 rgba(13,34,64,0.02),
    0 4px 14px -6px rgba(13,34,64,0.08),
    0 10px 24px -16px rgba(13,34,64,0.12);
  transition: transform 0.35s cubic-bezier(.4,1.1,.5,1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

/* Top scan-line that sweeps left → right on hover */
.gw-cap-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--crimson) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.8s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.gw-cap-card:hover::after { transform: translateX(100%); }

.gw-cap-card:hover {
  transform: translateY(-5px);
  border-color: rgba(139,26,26,0.28);
  box-shadow:
    0 1px 0 rgba(13,34,64,0.02),
    0 12px 28px -10px rgba(13,34,64,0.18),
    0 22px 44px -22px rgba(139,26,26,0.18);
}

/* Icon — micro-animation on card hover */
.gw-cap-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(139,26,26,0.08);
  color: var(--crimson);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.45s cubic-bezier(.4,1.6,.5,1),
              background 0.3s,
              box-shadow 0.3s;
}
.gw-cap-card__icon svg { width: 22px; height: 22px; }
.gw-cap-card:hover .gw-cap-card__icon {
  transform: scale(1.08) rotate(-5deg);
  background: rgba(139,26,26,0.14);
  box-shadow: 0 10px 24px -10px rgba(139,26,26,0.4);
}

.gw-cap-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.005em;
  transition: color 0.25s;
}
.gw-cap-card:hover .gw-cap-card__title { color: var(--crimson); }

.gw-cap-card__body {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

/* Chips — anchored to bottom of every card so rows align */
.gw-cap-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 18px;
}
.gw-cap-card__chips span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(13,34,64,0.04);
  border: 1px solid rgba(13,34,64,0.08);
  padding: 6px 11px;
  border-radius: 100px;
  transition: transform 0.25s ease, background 0.25s, color 0.25s, border-color 0.25s;
  cursor: default;
}
.gw-cap-card:hover .gw-cap-card__chips span {
  background: rgba(139,26,26,0.04);
  border-color: rgba(139,26,26,0.18);
}
.gw-cap-card__chips span:hover {
  transform: translateY(-2px);
  background: rgba(139,26,26,0.1);
  border-color: rgba(139,26,26,0.4);
  color: var(--crimson);
}

@media (prefers-reduced-motion: reduce) {
  .gw-cap-card,
  .gw-cap-card::after,
  .gw-cap-card__icon,
  .gw-cap-card__chips span { animation: none; transition: none; }
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
  .gw-topbar__nav { display: none; }
  .gw-hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .gw-cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gw-topbar { padding: 0 18px; height: 58px; gap: 12px; }
  .gw-topbar__crumb-name { font-size: 14px; }
  .gw-topbar__cta { padding: 8px 14px; font-size: 12px; }
  .gw-hero { padding: 48px 0 40px; }
  .gw-hero__h1 { font-size: 28px; }
  .gw-hero__stats { grid-template-columns: 1fr 1fr; }
  .gw-cap-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Full-viewport hero ─────────────────────────────── */
.gw-hero-full {
  min-height: 100vh;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.gw-hero-full__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}
.gw-hero-full__glow {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,26,26,0.35) 0%, transparent 70%);
  animation: gwGlowPulse 7s ease-in-out infinite;
  pointer-events: none;
}
.gw-hero-full__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 96px;
  padding-bottom: 56px;
  position: relative;
  z-index: 1;
}
.gw-hero-full__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
  display: block;
  margin-bottom: 28px;
}
.gw-hero-full__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 76px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.05;
  max-width: 720px;
  margin-bottom: 28px;
  letter-spacing: -0.01em;
}
.gw-hero-full__lead {
  font-size: 18px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  max-width: 380px;
  margin-bottom: 64px;
}
.gw-hero-full__scroll {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.gw-hero-full__scroll span {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
.gw-hero-full__scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.25), transparent);
  margin-top: 10px;
  animation: gwScrollBounce 2.2s ease-in-out infinite;
}

/* ── Hero pillars strip ─────────────────────────────── */
.gw-hero-full__pillars {
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
  position: relative;
  z-index: 1;
}
.gw-pillars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.gw-pillar {
  padding: 22px 16px 20px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.07);
  transition: background 0.25s;
}
.gw-pillar:last-child { border-right: none; }
.gw-pillar:hover { background: rgba(255,255,255,0.04); }
.gw-pillar__value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  margin-bottom: 6px;
}
.gw-pillar__value em {
  font-style: normal;
  font-size: 16px;
  color: var(--crimson);
  margin-left: 1px;
}
.gw-pillar__label {
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  line-height: 1.4;
}

/* ── Shared section typography ──────────────────────── */
.gw-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
  display: block;
  margin-bottom: 16px;
}
.gw-section-h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 52px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
  margin-bottom: 40px;
  letter-spacing: -0.01em;
}

/* ── Problem cards — independent floating tiles ────────
   Brand signature: thin crimson top accent, always visible.
   Hover: card lifts, number nudges right, title shifts to crimson.
   Cost block: vertical crimson rule on the left (architectural,
   no horizontal noise).
   ───────────────────────────────────────────────────────── */
.gw-prob-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.gw-prob-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(13,34,64,0.08);
  border-radius: 14px;
  padding: 32px 30px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(13,34,64,0.02),
    0 4px 14px -6px rgba(13,34,64,0.08),
    0 14px 30px -18px rgba(13,34,64,0.14);
  transition: transform 0.35s cubic-bezier(.4,1.1,.5,1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

/* Always-visible crimson top accent — brand signature.
   Right-side opacity raised from 0.15 → 0.3 so the line stays
   visibly anchored across the full card width. */
.gw-prob-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--crimson) 0%,
    var(--crimson) 35%,
    rgba(139,26,26,0.65) 60%,
    rgba(139,26,26,0.3) 100%);
  border-radius: 14px 14px 0 0;
  transition: height 0.3s ease;
}

.gw-prob-card:hover {
  transform: translateY(-5px);
  border-color: rgba(139,26,26,0.28);
  box-shadow:
    0 1px 0 rgba(13,34,64,0.02),
    0 14px 30px -10px rgba(13,34,64,0.18),
    0 26px 48px -24px rgba(139,26,26,0.18);
}
.gw-prob-card:hover::before { height: 4px; }

/* Number — chapter marker, nudges right on hover */
.gw-prob-card__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  color: var(--crimson);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  transition: transform 0.35s cubic-bezier(.4,1.4,.5,1);
}
.gw-prob-card:hover .gw-prob-card__num { transform: translateX(5px); }

/* Title — shifts to crimson on card hover */
.gw-prob-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--navy);
  line-height: 1.28;
  letter-spacing: -0.005em;
  margin: 0;
  transition: color 0.3s ease;
}
.gw-prob-card:hover .gw-prob-card__title { color: var(--crimson); }

.gw-prob-card__body {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

/* Cost block — vertical crimson rule + label + value */
.gw-prob-card__cost {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 12px;
  padding: 4px 0 4px 14px;
  border-left: 2px solid var(--crimson);
  position: relative;
}
.gw-prob-card__cost-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}
.gw-prob-card__cost-value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--crimson);
  letter-spacing: -0.005em;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .gw-prob-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .gw-prob-card,
  .gw-prob-card::before,
  .gw-prob-card__num,
  .gw-prob-card__title { transition: none; }
}

/* ── Speed section ──────────────────────────────────── */
.gw-speed-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.gw-speed-left .gw-section-h2 { margin-bottom: 20px; }
.gw-speed-copy {
  font-size: 15px;
  color: #5a5a5a;
  line-height: 1.75;
  margin-bottom: 28px;
}
.gw-speed-facts { display: flex; flex-direction: column; gap: 12px; }
.gw-speed-fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--navy);
  font-weight: 500;
  line-height: 1.5;
}
.gw-speed-fact__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crimson);
  flex-shrink: 0;
  margin-top: 7px;
}
.gw-speed-compare { display: flex; flex-direction: column; gap: 36px; }
.gw-speed-row__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.gw-speed-row__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}
.gw-speed-row__label--muted { color: var(--muted); font-weight: 400; }
.gw-speed-row__time {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
}
.gw-speed-row__time--muted { color: var(--muted); font-size: 18px; font-weight: 400; }
.gw-speed-row__track {
  height: 14px;
  background: rgba(13,34,64,0.08);
  border-radius: 7px;
  overflow: hidden;
}
.gw-speed-row__fill {
  height: 100%;
  border-radius: 7px;
  width: 0;
  transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.gw-speed-row__fill--ours     { background: var(--crimson); transition-delay: 0.15s; }
.gw-speed-row__fill--industry { background: rgba(13,34,64,0.22); transition-delay: 0.4s; }
.gw-speed-row__fill--ours.animate     { width: 10%; }
.gw-speed-row__fill--industry.animate { width: 100%; }
.gw-speed-note {
  margin-top: 28px;
  padding: 18px 20px;
  border-left: 3px solid var(--crimson);
  background: rgba(139,26,26,0.04);
  font-size: 13.5px;
  color: #5a5a5a;
  line-height: 1.68;
}

/* ── Security dark section ──────────────────────────── */
.gw-sec-section {
  background: var(--navy);
  padding: 88px 0 72px;
  position: relative;
  overflow: hidden;
}
.gw-sec-section::before {
  content: '';
  position: absolute;
  bottom: -200px;
  left: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,26,26,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.gw-sec-intro { margin-bottom: 52px; }
.gw-sec-intro .gw-section-h2 { margin-bottom: 16px; }
.gw-sec-intro__lead {
  font-size: 15px;
  color: rgba(255,255,255,0.45);
  max-width: 500px;
  line-height: 1.7;
}
.gw-sec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
}
.gw-sec-tile {
  background: var(--navy);
  padding: 36px 32px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s ease, transform 0.45s ease, background 0.25s;
}
.gw-sec-tile.visible { opacity: 1; transform: translateY(0); }
.gw-sec-tile:hover { background: rgba(255,255,255,0.04); }
.gw-sec-tile__code {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--crimson);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.gw-sec-tile__code::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(139,26,26,0.3);
}
.gw-sec-tile__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.2;
}
.gw-sec-tile__body {
  font-size: 13.5px;
  color: rgba(255,255,255,0.42);
  line-height: 1.72;
}
.gw-sec-footer {
  display: flex;
  align-items: center;
  margin-top: 1px;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.gw-sec-footer__stat {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 28px 32px;
}
.gw-sec-footer__val {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}
.gw-sec-footer__lbl {
  font-size: 13px;
  color: rgba(255,255,255,0.38);
  line-height: 1.5;
}
.gw-sec-footer__rule {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

/* ── Performance numbers ────────────────────────────── */
.gw-perf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 16px;
}
.gw-perf-card {
  padding: 48px 32px 40px;
  border: 1px solid rgba(13,34,64,0.08);
  border-top: 3px solid rgba(13,34,64,0.08);
  transition: border-top-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.gw-perf-card:hover {
  border-top-color: var(--crimson);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13,34,64,0.08);
}
.gw-perf-card__value {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 16px;
}
.gw-perf-card__value sup {
  font-size: 24px;
  color: var(--crimson);
  vertical-align: super;
}
.gw-perf-card__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.gw-perf-card__note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

/* ── Differentiator dark section ────────────────────── */
.gw-diff-section {
  background: var(--navy);
  padding: 88px 0;
}
.gw-diff-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.gw-diff-left .gw-section-h2 { margin-bottom: 20px; }
.gw-diff-body {
  font-size: 15px;
  color: rgba(255,255,255,0.45);
  line-height: 1.75;
  max-width: 380px;
}
.gw-diff-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.gw-diff-col { padding: 32px 28px; }
.gw-diff-col--before {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.gw-diff-col--after {
  background: rgba(139,26,26,0.12);
  border: 1px solid rgba(139,26,26,0.2);
}
.gw-diff-col__head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gw-diff-col--after .gw-diff-col__head {
  color: rgba(255,255,255,0.6);
  border-color: rgba(255,255,255,0.12);
}
.gw-diff-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gw-diff-list li {
  font-size: 13.5px;
  color: rgba(255,255,255,0.38);
  line-height: 1.55;
  padding-left: 16px;
  position: relative;
}
.gw-diff-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
}
.gw-diff-col--after .gw-diff-list li { color: rgba(255,255,255,0.75); }
.gw-diff-col--after .gw-diff-list li::before { background: var(--crimson); }

/* ── Live footprint ─────────────────────────────────── */
.gw-footprint-lead {
  font-size: 15px;
  color: #5a5a5a;
  line-height: 1.7;
  max-width: 560px;
  margin-top: -8px;
  margin-bottom: 48px;
}
.gw-footprint-board {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-top: 36px;
  border-top: 1px solid rgba(13,34,64,0.08);
}
.gw-footprint-group__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 14px;
}
.gw-footprint-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gw-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--white);
  border: 1px solid rgba(13,34,64,0.12);
  padding: 8px 16px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  cursor: default;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.gw-chip:hover {
  border-color: var(--crimson);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(13,34,64,0.08);
}
.gw-chip small { font-size: 11px; font-weight: 400; color: var(--muted); }
.gw-chip--muted { opacity: 0.55; border-style: dashed; }
.gw-chip--market {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.gw-chip--market:hover { border-color: var(--crimson); background: var(--crimson); }

/* ── Engagement timeline ────────────────────────────── */
.gw-timeline-wrap { margin-top: 16px; }
.gw-tl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}
.gw-tl::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  height: 2px;
  background: linear-gradient(to right, var(--crimson), rgba(13,34,64,0.15));
  z-index: 0;
}
.gw-tl__step {
  position: relative;
  z-index: 1;
  padding: 0 24px 0 0;
}
.gw-tl__step--last { padding-right: 0; }
.gw-tl__dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 3px solid var(--white);
  transition: background 0.25s;
}
.gw-tl__step:hover .gw-tl__dot { background: var(--crimson); }
.gw-tl__dot span { font-size: 11px; font-weight: 700; color: var(--white); letter-spacing: 0.06em; }
.gw-tl__dot--ongoing { background: rgba(13,34,64,0.4); }
.gw-tl__weeks {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 10px;
}
.gw-tl__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
  line-height: 1.2;
}
.gw-tl__body {
  font-size: 13.5px;
  color: #5a5a5a;
  line-height: 1.72;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .gw-perf-grid { grid-template-columns: repeat(2, 1fr); }
  .gw-diff-wrap { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 900px) {
  .gw-pillars { grid-template-columns: repeat(3, 1fr); }
  .gw-prob-grid { grid-template-columns: 1fr; }
  .gw-speed-wrap { grid-template-columns: 1fr; gap: 48px; }
  .gw-sec-grid { grid-template-columns: repeat(2, 1fr); }
  .gw-tl { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .gw-tl::before { display: none; }
  .gw-sec-footer { flex-direction: column; }
  .gw-sec-footer__rule { width: 100%; height: 1px; }
}
@media (max-width: 640px) {
  .gw-pillars { grid-template-columns: repeat(2, 1fr); }
  .gw-perf-grid { grid-template-columns: 1fr; }
  .gw-sec-grid { grid-template-columns: 1fr; }
  .gw-tl { grid-template-columns: 1fr; }
  .gw-diff-compare { grid-template-columns: 1fr; }
  .gw-section-h2 { font-size: 28px; }
  .gw-perf-card__value { font-size: 40px; }
}


/* Legacy id-based button reset removed — both drawer triggers now inherit
   the full styling (incl. navy → crimson hover) from .sp-platform__more. */

/* Responsive */
@media (max-width: 560px) {
  .profile-drawer {
    width: 100vw;
  }

  .profile-drawer__values {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   GATEWAY PAGE — ACT-BASED RESTRUCTURE
   New components: gw-act-head, gw-arch, gw-trust-band,
   gw-rel-*, gw-ch-*, gw-comm-*
   ============================================================ */

/* ── Shared section header (Problem / Solution / Capabilities / Channels)
   Left-aligned to match the hero. Modern fintech product pages commit
   to one alignment throughout — switching breaks the eye's rhythm.
   ──────────────────────────────────────────────────────── */
.gw-act-head {
  max-width: 760px;
  margin: 0 0 clamp(36px, 5vh, 56px);
  text-align: left;
}
.gw-act-head .gw-section-label { margin-bottom: 14px; }
.gw-act-head .gw-section-h2    { margin: 0 0 18px; }
.gw-act-head__lead {
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
  max-width: 640px;
}

/* Split variant — eyebrow on top spanning full width, then a
   2-column grid for title + description below. This guarantees
   the title and description anchor at the SAME baseline (their
   own top edge), not at the eyebrow.
   A faded vertical separator (navy → crimson → navy) sits in the
   gap so the right column reads as a continuation of the title,
   not as a floating sidebar. */
.gw-act-head--split {
  max-width: none;
}
.gw-act-head--split .gw-section-label {
  margin-bottom: 18px;
}
.gw-act-head--split .gw-act-head__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.gw-act-head--split .gw-section-h2 {
  margin-bottom: 0;
  font-size: clamp(28px, 2.8vw, 42px);
}
.gw-act-head--split .gw-act-head__lead {
  max-width: 480px;
  padding-top: 8px; /* optical baseline alignment with title cap-height */
  position: relative;
  margin: 0;
}
.gw-act-head--split .gw-act-head__lead::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(18px, 2.5vw, 40px));
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(13,34,64,0.18) 15%,
    rgba(139,26,26,0.4) 50%,
    rgba(13,34,64,0.18) 85%,
    transparent 100%);
}
@media (max-width: 900px) {
  .gw-act-head--split .gw-act-head__cols {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .gw-act-head--split .gw-act-head__lead { padding-top: 0; }
  .gw-act-head--split .gw-act-head__lead::before { display: none; }
}

/* ── ACT 3 · Architecture diagram ───────────────────────── */
/* Diagram frame — subtle backdrop that wraps the architecture
   so it reads as one composed system, not three loose columns */
.gw-arch-frame {
  position: relative;
  margin-top: 20px;
  padding: clamp(36px, 5vh, 64px) clamp(24px, 4vw, 56px);
  background: linear-gradient(180deg,
    rgba(13,34,64,0.025) 0%,
    rgba(13,34,64,0.04) 100%);
  border: 1px solid rgba(13,34,64,0.06);
  border-radius: 18px;
  overflow: hidden;
}
.gw-arch-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(13,34,64,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.5;
  pointer-events: none;
}
.gw-arch-frame__caption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.gw-arch-frame__caption span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
}
.gw-arch-frame__caption em {
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
}
.gw-arch-frame__caption::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(13,34,64,0.12) 0%, transparent 100%);
}

.gw-arch {
  display: grid;
  grid-template-columns: 1fr auto 1.15fr auto 1fr;
  align-items: stretch;
  gap: 0;
  position: relative;
  z-index: 1;
}
.gw-arch__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 8px;
  /* Distribute label → node → pill so each card centers in its
     column vertically. This way every card's middle lines up with
     the bridge connector (which is centered in the grid row) and
     the three columns feel balanced regardless of content height. */
  justify-content: space-between;
}
.gw-arch__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.gw-arch__node {
  width: 100%;
  background: var(--white);
  border: 1px solid rgba(13,34,64,0.14);
  border-radius: 12px;
  padding: 22px 20px;
  box-shadow: 0 1px 0 rgba(13,34,64,0.02),
              0 8px 22px -14px rgba(13,34,64,0.18);
  text-align: left;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.gw-arch__node:hover {
  transform: translateY(-2px);
  border-color: rgba(139,26,26,0.28);
  box-shadow: 0 14px 32px -16px rgba(13,34,64,0.22);
}
/* Icon at top of a regular (light) node */
.gw-arch__node-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(13,34,64,0.05);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition: background 0.3s, color 0.3s;
}
.gw-arch__node-icon svg { width: 20px; height: 20px; }
.gw-arch__node:hover .gw-arch__node-icon {
  background: rgba(139,26,26,0.1);
  color: var(--crimson);
}

.gw-arch__node-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.gw-arch__node-sub {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
}

/* EBB marker inside the gateway card — small brand stamp */
.gw-arch__node-marker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gw-arch__node-marker-rule {
  width: 24px;
  height: 2px;
  background: var(--crimson);
}
.gw-arch__node-marker-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
}
.gw-arch__node--accent {
  background: var(--navy);
  border-color: var(--navy);
  background-image:
    radial-gradient(circle at top right, rgba(139,26,26,0.22) 0%, transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, #091b35 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04),
              0 18px 36px -16px rgba(13,34,64,0.4),
              0 0 0 1px rgba(255,255,255,0.04) inset;
}
.gw-arch__node--accent .gw-arch__node-title { color: var(--white); }
.gw-arch__props {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.gw-arch__props li {
  font-size: 11.5px;
  color: rgba(255,255,255,0.7);
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.01em;
}
.gw-arch__props li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--crimson);
  flex-shrink: 0;
}
.gw-arch__props li span { color: inherit; }

.gw-arch__pill {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(13,34,64,0.05);
  border: 1px solid rgba(13,34,64,0.12);
  padding: 6px 14px;
  border-radius: 100px;
}
.gw-arch__pill--accent {
  color: var(--crimson);
  background: rgba(139,26,26,0.08);
  border-color: rgba(139,26,26,0.3);
}

/* Bridge / connector with animated pulse — centered in its row */
.gw-arch__bridge {
  position: relative;
  width: 80px;
  height: 2px;
  align-self: center;
}
.gw-arch__line {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(13,34,64,0.14) 0%,
    rgba(139,26,26,0.45) 50%,
    rgba(13,34,64,0.14) 100%);
}
.gw-arch__pulse {
  position: absolute;
  top: -2px;
  left: 0;
  width: 14px;
  height: 6px;
  border-radius: 3px;
  background: var(--crimson);
  filter: blur(1px);
  box-shadow: 0 0 12px rgba(139,26,26,0.5);
  animation: gwArchPulse 2.4s linear infinite;
}
.gw-arch__pulse--reverse { animation-direction: reverse; animation-delay: 0.6s; }
/* Second pulse on the same bridge — denser flow */
.gw-arch__pulse--delay { animation-delay: 1.2s; }
.gw-arch__pulse--reverse.gw-arch__pulse--delay { animation-delay: 1.8s; }
@keyframes gwArchPulse {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(66px); opacity: 0; }
}

/* Networks side — stacked chips */
.gw-arch__stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.gw-arch__chip {
  width: 100%;
  background: var(--white);
  border: 1px solid rgba(13,34,64,0.12);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  box-shadow: 0 1px 0 rgba(13,34,64,0.02);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.gw-arch__chip-icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
  transition: color 0.25s;
}
.gw-arch__chip:hover {
  transform: translateX(2px);
  border-color: rgba(139,26,26,0.28);
  box-shadow: 0 6px 18px -10px rgba(13,34,64,0.18);
}
.gw-arch__chip:hover .gw-arch__chip-icon { color: var(--crimson); }
.gw-arch__chip--muted {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
  font-style: italic;
  font-weight: 500;
}
.gw-arch__chip--muted .gw-arch__chip-icon { color: rgba(13,34,64,0.3); }

@media (max-width: 980px) {
  .gw-arch { grid-template-columns: 1fr; gap: 24px; }
  .gw-arch__bridge {
    width: 2px; height: 40px; margin: 0 auto;
    background: linear-gradient(180deg, rgba(13,34,64,0.14), rgba(139,26,26,0.45), rgba(13,34,64,0.14));
  }
  .gw-arch__line, .gw-arch__pulse { display: none; }
}

/* ── ACT 5 · Engineered for Trust — intro band ───────── */
.gw-trust-band {
  background: var(--white);
  padding-top: clamp(64px, 9vh, 96px);
  padding-bottom: clamp(40px, 6vh, 56px);
  border-top: 1px solid rgba(13,34,64,0.06);
}
.gw-trust-intro {
  text-align: left;
  max-width: 780px;
  margin: 0;
}
.gw-trust-intro .gw-section-label {
  color: var(--crimson);
  margin-bottom: 16px;
}
.gw-trust-intro__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--navy);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}
.gw-trust-intro__sub {
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 32px;
}
.gw-trust-intro__rail {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding: 14px 26px;
  border-top: 1px solid rgba(13,34,64,0.08);
  border-bottom: 1px solid rgba(13,34,64,0.08);
}
.gw-trust-intro__rail span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
}
.gw-trust-intro__rail span i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--crimson);
  display: inline-block;
}
.gw-trust-intro__rail em {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  margin-right: 12px;
}

/* ── 5c · Reliability section ────────────────────────── */
.gw-rel-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
.gw-rel-left { padding-top: 8px; }
.gw-rel-lead {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.75;
  margin: 18px 0 0;
}
.gw-rel-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gw-rel-card {
  background: var(--white);
  border: 1px solid rgba(13,34,64,0.12);
  border-radius: 12px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px 20px;
  align-items: start;
  box-shadow: 0 1px 0 rgba(13,34,64,0.02),
              0 6px 18px -10px rgba(13,34,64,0.12);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.gw-rel-card:hover {
  transform: translateY(-3px);
  border-color: rgba(139,26,26,0.28);
  box-shadow: 0 14px 32px -14px rgba(13,34,64,0.18);
}
.gw-rel-card__mark {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(139,26,26,0.08);
  color: var(--crimson);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gw-rel-card__mark svg { width: 22px; height: 22px; }
.gw-rel-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  margin: 4px 0 0;
  letter-spacing: -0.005em;
}
.gw-rel-card__body {
  grid-column: 2;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 900px) {
  .gw-rel-wrap { grid-template-columns: 1fr; gap: 32px; }
}

/* ── ACT 6 · Channels — floating cards with chips
   Brand signature: thin crimson top stripe always visible.
   Each card: icon top-left + serif number top-right, then title,
   body, and a chip row at the bottom listing concrete features. */
.gw-ch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.gw-ch-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(13,34,64,0.1);
  border-radius: 14px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(13,34,64,0.02),
    0 4px 14px -6px rgba(13,34,64,0.08),
    0 14px 30px -18px rgba(13,34,64,0.14);
  transition: transform 0.35s cubic-bezier(.4,1.1,.5,1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

/* Always-visible crimson top stripe — brand signature
   (same pattern as Problem cards) */
.gw-ch-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--crimson) 0%,
    var(--crimson) 35%,
    rgba(139,26,26,0.65) 60%,
    rgba(139,26,26,0.3) 100%);
  border-radius: 14px 14px 0 0;
  transition: height 0.3s ease;
}
.gw-ch-card:hover {
  transform: translateY(-5px);
  border-color: rgba(139,26,26,0.28);
  box-shadow:
    0 1px 0 rgba(13,34,64,0.02),
    0 14px 30px -10px rgba(13,34,64,0.18),
    0 26px 48px -24px rgba(139,26,26,0.18);
}
.gw-ch-card:hover::before { height: 4px; }

/* Top row — icon left, large serif number right */
.gw-ch-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gw-ch-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(13,34,64,0.05);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(.4,1.6,.5,1),
              background 0.3s, color 0.3s;
}
.gw-ch-card__icon svg { width: 22px; height: 22px; }
.gw-ch-card:hover .gw-ch-card__icon {
  transform: scale(1.08) rotate(-5deg);
  background: rgba(139,26,26,0.1);
  color: var(--crimson);
}
.gw-ch-card__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  color: var(--crimson);
  line-height: 1;
  letter-spacing: -0.01em;
  transition: transform 0.35s cubic-bezier(.4,1.4,.5,1);
}
.gw-ch-card:hover .gw-ch-card__num { transform: translateX(-5px); }

.gw-ch-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--navy);
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0;
  transition: color 0.3s;
}
.gw-ch-card:hover .gw-ch-card__title { color: var(--crimson); }

.gw-ch-card__body {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

/* Chips at the bottom — concrete features per channel */
.gw-ch-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(13,34,64,0.08);
}
.gw-ch-card__chips span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(13,34,64,0.04);
  border: 1px solid rgba(13,34,64,0.08);
  padding: 6px 11px;
  border-radius: 100px;
  transition: transform 0.25s ease, background 0.25s, color 0.25s, border-color 0.25s;
}
.gw-ch-card:hover .gw-ch-card__chips span {
  background: rgba(139,26,26,0.04);
  border-color: rgba(139,26,26,0.18);
}
.gw-ch-card__chips span:hover {
  transform: translateY(-2px);
  background: rgba(139,26,26,0.1);
  border-color: rgba(139,26,26,0.4);
  color: var(--crimson);
}

@media (max-width: 720px) {
  .gw-ch-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .gw-ch-card,
  .gw-ch-card::before,
  .gw-ch-card__icon,
  .gw-ch-card__num,
  .gw-ch-card__title,
  .gw-ch-card__chips span { transition: none; }
}

/* ── ACT 7c · Commercial Case (dark) ─────────────────── */
.gw-comm-section {
  position: relative;
  background: var(--navy);
  padding: clamp(72px, 10vh, 120px) 0;
  overflow: hidden;
}
.gw-comm-section::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,26,26,0.22) 0%, transparent 65%);
  pointer-events: none;
}
.gw-comm-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: 0.6;
}
.gw-comm-section .container { position: relative; z-index: 1; }
.gw-comm-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
.gw-comm-body {
  font-size: 14.5px;
  color: rgba(255,255,255,0.62);
  line-height: 1.75;
  margin: 18px 0 0;
  max-width: 480px;
}
.gw-comm-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.gw-comm-col {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 22px 20px;
}
.gw-comm-col--after {
  background: rgba(139,26,26,0.12);
  border-color: rgba(139,26,26,0.35);
}
.gw-comm-col__head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gw-comm-col--after .gw-comm-col__head { color: var(--crimson); }
.gw-comm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gw-comm-list li {
  font-size: 12.5px;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  padding-left: 18px;
  position: relative;
}
.gw-comm-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 1px;
  background: rgba(255,255,255,0.3);
}
.gw-comm-col--after .gw-comm-list li::before {
  background: var(--crimson);
  width: 10px;
}

@media (max-width: 900px) {
  .gw-comm-wrap { grid-template-columns: 1fr; gap: 36px; }
  .gw-comm-compare { grid-template-columns: 1fr; }
}


/* ============================================================
   CAPABILITIES — refined beats with distinct visual logics
   ============================================================ */

/* Tighter typography + spacing for capability sub-beats.
   These are sub-sections, not heroes — type should support
   the message, not dominate it. */
.gw-cap-beat { padding-top: clamp(64px, 9vh, 96px); padding-bottom: clamp(64px, 9vh, 96px); }
.gw-cap-beat__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 38px);
  color: var(--navy);
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 12px 0 16px;
  max-width: 720px;
}
.gw-cap-beat__lead {
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--muted);
  line-height: 1.7;
  max-width: 640px;
  margin: 0;
}

/* Make the rail interactive (was static label) */
.gw-trust-intro__rail {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  border: none;
}
.gw-trust-intro__rail a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid rgba(13,34,64,0.1);
  border-right: none;
  text-decoration: none;
  background: var(--white);
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.gw-trust-intro__rail a:first-child { border-radius: 100px 0 0 100px; padding-left: 24px; }
.gw-trust-intro__rail a:last-child  { border-radius: 0 100px 100px 0; border-right: 1px solid rgba(13,34,64,0.1); padding-right: 26px; }
.gw-trust-intro__rail a i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--crimson);
  display: inline-block;
  transition: transform 0.3s;
}
.gw-trust-intro__rail a span {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
}
.gw-trust-intro__rail a em {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  letter-spacing: -0.005em;
}
.gw-trust-intro__rail a:hover {
  background: rgba(139,26,26,0.04);
  border-color: rgba(139,26,26,0.25);
}
.gw-trust-intro__rail a:hover i { transform: scale(1.4); }

/* ── 02 Throughput — dashboard layout ───────────────── */
.gw-tput-head { max-width: 820px; margin-bottom: clamp(36px, 5vh, 56px); }
.gw-tput-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(13,34,64,0.1);
  border: 1px solid rgba(13,34,64,0.1);
  border-radius: 14px;
  overflow: hidden;
}
.gw-tput-cell {
  background: var(--white);
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.3s;
}
.gw-tput-cell:hover { background: rgba(139,26,26,0.02); }
.gw-tput-cell__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(13,34,64,0.08);
}
.gw-tput-cell__tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
}
/* Sparkline mini-chart */
.gw-tput-cell__spark {
  width: 80px;
  height: 22px;
  color: var(--crimson);
}
/* Concurrency bars */
.gw-tput-cell__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
}
.gw-tput-cell__bars i {
  width: 3px;
  background: var(--crimson);
  opacity: 0.85;
  border-radius: 1px;
  animation: gwBarFlicker 1.6s ease-in-out infinite;
}
.gw-tput-cell__bars i:nth-child(1)  { height: 30%; animation-delay: 0s; }
.gw-tput-cell__bars i:nth-child(2)  { height: 70%; animation-delay: .05s; }
.gw-tput-cell__bars i:nth-child(3)  { height: 50%; animation-delay: .1s; }
.gw-tput-cell__bars i:nth-child(4)  { height: 90%; animation-delay: .15s; }
.gw-tput-cell__bars i:nth-child(5)  { height: 40%; animation-delay: .2s; }
.gw-tput-cell__bars i:nth-child(6)  { height: 80%; animation-delay: .25s; }
.gw-tput-cell__bars i:nth-child(7)  { height: 60%; animation-delay: .3s; }
.gw-tput-cell__bars i:nth-child(8)  { height: 100%; animation-delay: .35s; }
.gw-tput-cell__bars i:nth-child(9)  { height: 45%; animation-delay: .4s; }
.gw-tput-cell__bars i:nth-child(10) { height: 75%; animation-delay: .45s; }
.gw-tput-cell__bars i:nth-child(11) { height: 55%; animation-delay: .5s; }
.gw-tput-cell__bars i:nth-child(12) { height: 88%; animation-delay: .55s; }
@keyframes gwBarFlicker {
  0%, 100% { opacity: 0.85; transform: scaleY(1); }
  50%      { opacity: 1;    transform: scaleY(1.05); }
}
/* Pulse dots */
.gw-tput-cell__pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
}
.gw-tput-cell__pulse i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--crimson);
  animation: gwPulseFade 1.5s ease-in-out infinite;
}
.gw-tput-cell__pulse i:nth-child(2) { animation-delay: 0.2s; }
.gw-tput-cell__pulse i:nth-child(3) { animation-delay: 0.4s; }
@keyframes gwPulseFade {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
.gw-tput-cell__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.gw-tput-cell__body {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 900px) {
  .gw-tput-board { grid-template-columns: 1fr; gap: 1px; }
}

/* ── 04 Reliability — horizontal flow layout ───────── */
.gw-rel-head { max-width: 820px; margin-bottom: clamp(36px, 5vh, 56px); }
.gw-rel-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
}
.gw-rel-stage {
  background: var(--white);
  border: 1px solid rgba(13,34,64,0.1);
  border-radius: 12px;
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 0 rgba(13,34,64,0.02),
              0 6px 18px -10px rgba(13,34,64,0.1);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.gw-rel-stage:hover {
  transform: translateY(-3px);
  border-color: rgba(139,26,26,0.25);
  box-shadow: 0 1px 0 rgba(13,34,64,0.02),
              0 12px 24px -10px rgba(13,34,64,0.16),
              0 18px 32px -22px rgba(139,26,26,0.18);
}
.gw-rel-stage__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(13,34,64,0.08);
}
.gw-rel-stage__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--crimson);
  line-height: 1;
  letter-spacing: -0.01em;
}
.gw-rel-stage__icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: rgba(139,26,26,0.08);
  color: var(--crimson);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gw-rel-stage__icon svg { width: 20px; height: 20px; }
.gw-rel-stage__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--navy);
  margin: 4px 0 0;
  letter-spacing: -0.005em;
}
.gw-rel-stage__body {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
.gw-rel-flow__arrow {
  align-self: center;
  width: 60px;
  height: 12px;
  color: rgba(139,26,26,0.5);
  padding: 0 8px;
}
.gw-rel-flow__arrow svg { width: 100%; height: 100%; }

@media (max-width: 900px) {
  .gw-rel-flow { grid-template-columns: 1fr; gap: 14px; }
  .gw-rel-flow__arrow { width: 12px; height: 28px; transform: rotate(90deg); margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .gw-tput-cell__bars i,
  .gw-tput-cell__pulse i,
  .gw-rel-stage { animation: none; transition: none; }
}


/* ============================================================
   CAPABILITIES — Option A: framed 2×2 quadrant matrix
   Mirrors the Solution section's framed pattern. One composed
   unit, four quadrants, each with title + body + visualization.
   ============================================================ */

/* Outer frame (same visual logic as gw-arch-frame) */
.gw-caps-frame {
  position: relative;
  margin-top: 24px;
  padding: clamp(28px, 4vw, 44px);
  background: linear-gradient(180deg, rgba(13,34,64,0.025) 0%, rgba(13,34,64,0.04) 100%);
  border: 1px solid rgba(13,34,64,0.06);
  border-radius: 18px;
  overflow: hidden;
}
.gw-caps-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(13,34,64,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.5;
  pointer-events: none;
}
.gw-caps-frame__caption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.gw-caps-frame__caption span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
}
.gw-caps-frame__caption em {
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
}
.gw-caps-frame__caption::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(13,34,64,0.12) 0%, transparent 100%);
}

/* 2×2 grid */
.gw-caps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  position: relative;
  z-index: 1;
}

/* Individual quadrant tiles */
.gw-cap-tile {
  background: var(--white);
  border: 1px solid rgba(13,34,64,0.1);
  border-radius: 12px;
  padding: 24px 26px 22px;
  box-shadow: 0 1px 0 rgba(13,34,64,0.02),
              0 8px 22px -14px rgba(13,34,64,0.14);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}
.gw-cap-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(139,26,26,0.25);
  box-shadow: 0 12px 28px -14px rgba(13,34,64,0.2);
}
.gw-cap-tile__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(13,34,64,0.08);
}
.gw-cap-tile__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  color: var(--crimson);
  line-height: 1;
  letter-spacing: -0.01em;
}
.gw-cap-tile__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.005em;
}
.gw-cap-tile__body {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 18px;
}
.gw-cap-tile__viz {
  margin-top: auto;
}

/* ── Quadrant 01 · Speed — comparison bars (refined typography) ── */
.gw-cap-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gw-cap-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gw-cap-bar__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.gw-cap-bar__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.gw-cap-bar__time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.005em;
}
.gw-cap-bar__time em {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  margin-left: 4px;
  opacity: 0.7;
}
.gw-cap-bar--ours .gw-cap-bar__label,
.gw-cap-bar--ours .gw-cap-bar__time { color: var(--crimson); }
.gw-cap-bar--ind  .gw-cap-bar__label,
.gw-cap-bar--ind  .gw-cap-bar__time { color: rgba(13,34,64,0.5); }
.gw-cap-bar__track {
  width: 100%;
  height: 8px;
  background: rgba(13,34,64,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.gw-cap-bar__fill {
  height: 100%;
  border-radius: 4px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(.4,0,.2,1);
}
.gw-cap-bar__fill--ours { background: var(--crimson); width: 22%; }
.gw-cap-bar__fill--ind  { background: rgba(13,34,64,0.25); width: 92%; }
.gw-cap-tile.is-visible .gw-cap-bar__fill,
.gw-caps-frame .gw-cap-bar__fill { transform: scaleX(1); }

/* ── Quadrant 02 · Throughput — live flicker bars ──── */
.gw-cap-tput {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 44px;
  width: 100%;
  padding-top: 8px;
  border-top: 1px solid rgba(13,34,64,0.06);
}
.gw-cap-tput i {
  flex: 1;
  background: var(--crimson);
  opacity: 0.85;
  border-radius: 1px;
  animation: gwCapTputFlicker 1.6s ease-in-out infinite;
}
.gw-cap-tput i:nth-child(1)  { height: 30%; animation-delay: 0s; }
.gw-cap-tput i:nth-child(2)  { height: 60%; animation-delay: .04s; }
.gw-cap-tput i:nth-child(3)  { height: 45%; animation-delay: .08s; }
.gw-cap-tput i:nth-child(4)  { height: 80%; animation-delay: .12s; }
.gw-cap-tput i:nth-child(5)  { height: 55%; animation-delay: .16s; }
.gw-cap-tput i:nth-child(6)  { height: 90%; animation-delay: .20s; }
.gw-cap-tput i:nth-child(7)  { height: 70%; animation-delay: .24s; }
.gw-cap-tput i:nth-child(8)  { height: 100%; animation-delay: .28s; }
.gw-cap-tput i:nth-child(9)  { height: 50%; animation-delay: .32s; }
.gw-cap-tput i:nth-child(10) { height: 78%; animation-delay: .36s; }
.gw-cap-tput i:nth-child(11) { height: 62%; animation-delay: .40s; }
.gw-cap-tput i:nth-child(12) { height: 85%; animation-delay: .44s; }
.gw-cap-tput i:nth-child(13) { height: 40%; animation-delay: .48s; }
.gw-cap-tput i:nth-child(14) { height: 72%; animation-delay: .52s; }
.gw-cap-tput i:nth-child(15) { height: 95%; animation-delay: .56s; }
@keyframes gwCapTputFlicker {
  0%, 100% { opacity: 0.85; transform: scaleY(1); }
  50%      { opacity: 1;    transform: scaleY(1.06); }
}

/* ── Quadrant 03 · Security — stacked numbered layers
   Distinct visual language from Reliability's bullet-card list.
   Here the layers stack inside a single container (table-like),
   with numbered rows separated by horizontal rules — visually
   reinforcing the "six layers" framing. */
.gw-cap-layers {
  list-style: none;
  margin: 0;
  padding: 0;
  background: rgba(139,26,26,0.03);
  border: 1px solid rgba(139,26,26,0.18);
  border-radius: 8px;
  overflow: hidden;
}
.gw-cap-layer {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(139,26,26,0.13);
  transition: background 0.2s;
}
.gw-cap-layer:last-child { border-bottom: none; }
.gw-cap-layer:hover { background: rgba(139,26,26,0.07); }

.gw-cap-layer__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--crimson);
  letter-spacing: -0.005em;
  flex-shrink: 0;
  padding-top: 2px;
  min-width: 18px;
}
.gw-cap-layer__body {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.gw-cap-layer__body strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--navy);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.gw-cap-layer__body span {
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* ── Quadrant 04 · Reliability — three independent properties ──
   Not a workflow. These three apply in parallel — listed as a
   checklist so each property reads as its own structural fact. */
.gw-cap-reli {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gw-cap-reli__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(139,26,26,0.04);
  border-left: 2px solid var(--crimson);
  border-radius: 0 7px 7px 0;
  transition: background 0.2s, transform 0.2s;
}
.gw-cap-reli__item:hover {
  background: rgba(139,26,26,0.08);
  transform: translateX(2px);
}
.gw-cap-reli__mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--crimson);
  box-shadow: 0 0 0 3px rgba(139,26,26,0.14);
  margin-top: 7px;
  flex-shrink: 0;
}
.gw-cap-reli__copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.gw-cap-reli__copy strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.gw-cap-reli__copy span {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .gw-caps-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .gw-cap-tput i,
  .gw-cap-bar__fill { animation: none; transition: none; }
}


/* ============================================================
   ENGAGE — unified framed unit (path + proof + compounding value)
   ============================================================ */

/* Outer frame — same visual language as Capabilities frame */
.gw-eng-frame {
  position: relative;
  margin-top: 24px;
  padding: clamp(28px, 4vw, 44px);
  background: linear-gradient(180deg, rgba(13,34,64,0.025) 0%, rgba(13,34,64,0.04) 100%);
  border: 1px solid rgba(13,34,64,0.06);
  border-radius: 18px;
  overflow: hidden;
}
.gw-eng-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(13,34,64,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.5;
  pointer-events: none;
}
.gw-eng-frame__caption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.gw-eng-frame__caption span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
}
.gw-eng-frame__caption em {
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
}
.gw-eng-frame__caption::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(13,34,64,0.12) 0%, transparent 100%);
}

/* Each block inside the frame */
.gw-eng-block {
  position: relative;
  z-index: 1;
  background: var(--white);
  border: 1px solid rgba(13,34,64,0.1);
  border-radius: 12px;
  padding: 24px 26px;
  box-shadow: 0 1px 0 rgba(13,34,64,0.02),
              0 8px 22px -14px rgba(13,34,64,0.14);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.gw-eng-block__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(13,34,64,0.08);
}
.gw-eng-block__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--crimson);
  line-height: 1;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  min-width: 32px;
}
.gw-eng-block__head-text { min-width: 0; }
.gw-eng-block__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
  margin: 0 0 4px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.gw-eng-block__sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* Divider between rows */
.gw-eng-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(13,34,64,0.12), transparent);
  margin: 14px 0;
  position: relative;
  z-index: 1;
}

/* Pair: bottom row with Footprint + Compounding */
.gw-eng-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  position: relative;
  z-index: 1;
}

/* ── ROW 1 — Timeline ────────────────────────────── */
.gw-eng-block--timeline { gap: 22px; }
.gw-eng-tl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
}
/* Connecting line behind the dots */
.gw-eng-tl::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(139,26,26,0.45) 0%,
    rgba(139,26,26,0.45) 75%,
    rgba(13,34,64,0.15) 75%,
    rgba(13,34,64,0.15) 100%);
}
.gw-eng-tl__step {
  position: relative;
  z-index: 1;
  padding-top: 36px;
}
.gw-eng-tl__dot {
  position: absolute;
  top: 0; left: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -0.005em;
  box-shadow: 0 0 0 4px var(--white),
              0 0 0 5px rgba(13,34,64,0.1);
}
.gw-eng-tl__step:nth-child(2) .gw-eng-tl__dot { background: var(--crimson); }
.gw-eng-tl__step--ongoing .gw-eng-tl__dot { background: rgba(13,34,64,0.4); }
.gw-eng-tl__when {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 8px;
}
.gw-eng-tl__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  margin: 0 0 6px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.gw-eng-tl__body {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* ── ROW 2a — Live Footprint ──────────────────────── */
.gw-eng-fp {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gw-eng-fp__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gw-eng-fp__label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crimson);
}
.gw-eng-fp__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gw-eng-fp__chips span {
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
  background: rgba(13,34,64,0.04);
  border: 1px solid rgba(13,34,64,0.1);
  padding: 5px 10px;
  border-radius: 100px;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.gw-eng-fp__chips span:hover {
  transform: translateY(-1px);
  background: rgba(139,26,26,0.06);
  border-color: rgba(139,26,26,0.25);
  color: var(--crimson);
}
.gw-eng-fp__chip--muted {
  color: var(--muted) !important;
  font-style: italic;
  font-weight: 500 !important;
  border-style: dashed !important;
}

/* ── ROW 2b — Compounding Advantage / Comparison ──── */
.gw-eng-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.gw-eng-compare__col {
  background: rgba(13,34,64,0.03);
  border: 1px solid rgba(13,34,64,0.08);
  border-radius: 8px;
  padding: 14px 16px;
}
.gw-eng-compare__col--after {
  background: rgba(139,26,26,0.05);
  border-color: rgba(139,26,26,0.22);
}
.gw-eng-compare__head {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(13,34,64,0.08);
}
.gw-eng-compare__col--after .gw-eng-compare__head {
  color: var(--crimson);
  border-bottom-color: rgba(139,26,26,0.2);
}
.gw-eng-compare__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.gw-eng-compare__col li {
  font-size: 12px;
  color: var(--navy);
  line-height: 1.45;
  padding-left: 14px;
  position: relative;
}
.gw-eng-compare__col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 1px;
  background: rgba(13,34,64,0.3);
}
.gw-eng-compare__col--after li::before {
  background: var(--crimson);
  width: 8px;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 980px) {
  .gw-eng-tl { grid-template-columns: 1fr 1fr; }
  .gw-eng-tl::before { display: none; }
  .gw-eng-pair { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .gw-eng-tl { grid-template-columns: 1fr; }
  .gw-eng-compare { grid-template-columns: 1fr; }
}


/* ============================================================
   PROBLEM & CHANNELS — framed wrappers matching Capabilities/Engage
   Same subtle navy-tinted backdrop, dot-grid texture, rounded
   corners, and crimson eyebrow caption with horizontal rule.
   ============================================================ */

.gw-prob-frame,
.gw-ch-frame {
  position: relative;
  margin-top: 24px;
  padding: clamp(28px, 4vw, 44px);
  background: linear-gradient(180deg, rgba(13,34,64,0.025) 0%, rgba(13,34,64,0.04) 100%);
  border: 1px solid rgba(13,34,64,0.06);
  border-radius: 18px;
  overflow: hidden;
}

.gw-prob-frame::before,
.gw-ch-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(13,34,64,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.5;
  pointer-events: none;
}

.gw-prob-frame__caption,
.gw-ch-frame__caption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.gw-prob-frame__caption span,
.gw-ch-frame__caption span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
}

.gw-prob-frame__caption em,
.gw-ch-frame__caption em {
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
}

.gw-prob-frame__caption::after,
.gw-ch-frame__caption::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(13,34,64,0.12) 0%, transparent 100%);
}

/* Grids inside the frames need to be positioned above the dot-grid backdrop */
.gw-prob-frame .gw-prob-grid,
.gw-ch-frame .gw-ch-grid {
  position: relative;
  z-index: 1;
  margin-top: 0;
}


/* ============================================================
   HOME PAGE — shared frame wrapper (matches gateway page pattern)
   Wraps grids of cards/badges so they read as one composed unit
   instead of free-floating items on a section background.
   ============================================================ */
.sp-frame {
  position: relative;
  margin-top: 24px;
  padding: clamp(28px, 4vw, 44px);
  background: linear-gradient(180deg, rgba(13,34,64,0.025) 0%, rgba(13,34,64,0.04) 100%);
  border: 1px solid rgba(13,34,64,0.06);
  border-radius: 18px;
  overflow: hidden;
}
.sp-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(13,34,64,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.5;
  pointer-events: none;
}
.sp-frame__caption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.sp-frame__caption span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
}
.sp-frame__caption em {
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
}
.sp-frame__caption::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(13,34,64,0.12) 0%, transparent 100%);
}

/* Grids inside the frame need to be positioned above the dot-grid backdrop */
.sp-frame .solutions-grid,
.sp-frame .sp-network__grid,
.sp-frame .sp-platform__inner {
  position: relative;
  z-index: 1;
  margin-top: 0;
}

/* Platform/About variant — more breathing room since the
   2-column layout inside has a large display headline */
.sp-frame--platform {
  margin-top: 0;
  padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px);
}
.sp-frame--platform .sp-frame__caption { margin-bottom: 36px; }


/* ============================================================
   HOME PAGE — Network matrix (2×2 category cards)
   Each category is its own tile with icon + name + count + chips
   with live pulse indicators. Replaces the flat row layout.
   ============================================================ */
.sp-net-matrix {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.sp-net-card {
  background: var(--white);
  border: 1px solid rgba(13,34,64,0.1);
  border-radius: 12px;
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 0 rgba(13,34,64,0.02),
              0 6px 16px -12px rgba(13,34,64,0.14);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.sp-net-card:hover {
  transform: translateY(-2px);
  border-color: rgba(139,26,26,0.25);
  box-shadow: 0 10px 22px -12px rgba(13,34,64,0.2);
}

.sp-net-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(13,34,64,0.08);
}
.sp-net-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(13,34,64,0.05);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s, color 0.3s;
}
.sp-net-card__icon svg { width: 18px; height: 18px; }
.sp-net-card:hover .sp-net-card__icon {
  background: rgba(139,26,26,0.1);
  color: var(--crimson);
}
.sp-net-card__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sp-net-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.sp-net-card__count {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
}

.sp-net-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Live chip with pulsing dot indicator */
.sp-net-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  background: rgba(13,34,64,0.04);
  border: 1px solid rgba(13,34,64,0.1);
  padding: 5px 11px 5px 9px;
  border-radius: 100px;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, color 0.2s;
}
.sp-net-chip:hover {
  transform: translateY(-1px);
  background: rgba(139,26,26,0.06);
  border-color: rgba(139,26,26,0.25);
  color: var(--crimson);
}
.sp-net-chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crimson);
  flex-shrink: 0;
  animation: spNetPulse 2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(139,26,26,0.4);
}
@keyframes spNetPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(139,26,26,0.4); }
  50%       { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(139,26,26,0); }
}

/* Stagger the pulse so chips feel "live" rather than synchronized */
.sp-net-chip:nth-child(2) i { animation-delay: 0.2s; }
.sp-net-chip:nth-child(3) i { animation-delay: 0.4s; }
.sp-net-chip:nth-child(4) i { animation-delay: 0.6s; }
.sp-net-chip:nth-child(5) i { animation-delay: 0.8s; }
.sp-net-chip:nth-child(6) i { animation-delay: 1.0s; }

@media (max-width: 760px) {
  .sp-net-matrix { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-net-chip i { animation: none; }
}


/* ============================================================
   DRAWER FRAMES — same composed-unit logic as the main site,
   tuned for the narrower drawer panel scale.
   ============================================================ */
.dr-frame {
  position: relative;
  margin-top: 18px;
  padding: 22px 22px 20px;
  background: linear-gradient(180deg, rgba(13,34,64,0.025) 0%, rgba(13,34,64,0.04) 100%);
  border: 1px solid rgba(13,34,64,0.06);
  border-radius: 14px;
  overflow: hidden;
}

/* Inside the network drawer specifically, drop the overflow:hidden so the
   final chip row never gets clipped when the drawer body height is tight
   on mobile. The rounded corners stay visible because the dot-grid
   pseudo-element only fills the box and is harmless if it overflows by a
   subpixel. */
.net-drawer__body .dr-frame {
  overflow: visible;
}
.dr-frame--tight {
  margin-top: 0;
  padding: 18px 20px 16px;
}
.dr-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(13,34,64,0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.45;
  pointer-events: none;
}
.dr-frame__caption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.dr-frame__caption span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
}
.dr-frame__caption em {
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
}
.dr-frame__caption::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(13,34,64,0.12) 0%, transparent 100%);
}

/* Ensure inner drawer content sits above the dot-grid backdrop */
.dr-frame > .profile-drawer__values,
.dr-frame > .profile-drawer__steps,
.dr-frame > .net-drawer__stats,
.dr-frame > .net-drawer__group {
  position: relative;
  z-index: 1;
}

/* Reduce the top margin of category groups inside the drawer frame
   (the frame caption already provides the visual separator) */
.dr-frame > .net-drawer__group:first-of-type { margin-top: 0; }


/* ============================================================
   Contact pill badge — bookends the hero's "● IN PRODUCTION"
   ============================================================ */
.sp-contact__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  background: rgba(139,26,26,0.16);
  border: 1px solid rgba(139,26,26,0.32);
  padding: 7px 16px 7px 12px;
  border-radius: 100px;
  margin-bottom: 24px;
}
.sp-contact__pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--crimson);
  animation: spContactPill 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes spContactPill {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(139,26,26,0.5); }
  50%       { opacity: 0.7; transform: scale(1.4); box-shadow: 0 0 0 5px rgba(139,26,26,0); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-contact__pill-dot { animation: none; }
}


/* ============================================================
   LEGAL PAGES (privacy.html, terms.html)
   Minimal, readable, brand-consistent. Reuses navy/cream/crimson
   palette and existing typography tokens.
   ============================================================ */
.legal-page {
  background: var(--cream);
  color: var(--text-body);
}

.legal {
  padding: 140px 0 96px;
  background: var(--cream);
}

.legal__header {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.legal__header h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 12px 0 16px;
}

.legal__meta {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.legal__body {
  max-width: 760px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-body);
}

.legal__lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--navy);
  font-weight: 500;
  padding: 24px 28px;
  background: rgba(13, 34, 64, 0.04);
  border-left: 3px solid var(--crimson);
  border-radius: 4px;
  margin-bottom: 40px;
}

.legal__body h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  margin: 48px 0 16px;
  letter-spacing: -0.005em;
}

.legal__body h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  margin: 32px 0 12px;
}

.legal__body p {
  margin: 0 0 16px;
}

.legal__body ul {
  margin: 0 0 20px;
  padding-left: 28px;
}

.legal__body li {
  margin-bottom: 8px;
}

.legal__body a {
  color: var(--crimson);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--speed) var(--ease);
}

.legal__body a:hover {
  color: #721515;
}

.legal__body strong {
  color: var(--navy);
  font-weight: 700;
}

.legal__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  padding: 2px 6px;
  background: rgba(13, 34, 64, 0.06);
  border-radius: 3px;
  color: var(--navy);
}

/* Mobile tuning */
@media (max-width: 768px) {
  .legal {
    padding: 96px 0 64px;
  }
  .legal__header {
    margin-bottom: 36px;
  }
  .legal__lead {
    font-size: 16px;
    padding: 18px 20px;
  }
  .legal__body {
    font-size: 15px;
  }
  .legal__body h2 {
    font-size: 22px;
    margin: 36px 0 12px;
  }
  .legal__body h3 {
    font-size: 17px;
    margin: 24px 0 10px;
  }
}


/* ============================================================
   CONTACT FORM — submission status messages
   Inline feedback while the contact.js AJAX handler runs.
   ============================================================ */
.form-status {
  margin: 12px 0 8px;
  padding: 0;
  font-size: 13px;
  line-height: 1.55;
  min-height: 1.55em; /* reserve space so layout doesn't jump */
  transition: color var(--speed) var(--ease);
}

.form-status:empty {
  display: none;
}

.form-status--pending {
  color: var(--text-muted);
  font-style: italic;
}

.form-status--success {
  color: #0f5132; /* deep green — accessible on cream/white form bg */
  font-weight: 600;
  padding: 12px 14px;
  background: rgba(15, 81, 50, 0.08);
  border-left: 3px solid #0f5132;
  border-radius: 3px;
}

.form-status--error {
  color: var(--crimson);
  font-weight: 600;
  padding: 12px 14px;
  background: rgba(139, 26, 26, 0.06);
  border-left: 3px solid var(--crimson);
  border-radius: 3px;
}

/* Disabled submit button visual */
.sp-contact__form .btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}