/*
Theme Name: FASAPP
Theme URI: https://fasapp.ch/
Author: fasapp GmbH
Description: Hybrid FASAPP WordPress theme based on the approved website prototype.
Version: 4.0.0
Text Domain: fasapp
*/

/*
  CSS normalization policy

  This stylesheet remains the single shared stylesheet for all public pages.
  Equivalent layout behavior should use shared rules. Segment/page-specific
  rules are reserved for genuinely different components or visual variants.

  This cleanup intentionally preserves the current cascade and page markup.
*/

/* Global header layout foundation */
.nav-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px;
  min-height: 82px;
}

.desktop-nav {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-size: 15px;
  font-weight: 650;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 12px;
}


:root {
  --ink: #07142f;
  --ink-soft: #2b3954;
  --blue: #2463ff;
  --blue-2: #4a7dff;
  --cyan: #16a8d8;
  --teal: #27c7a1;
  --purple: #7456ff;
  --orange: #ff7948;
  --green: #29a972;
  --surface: #ffffff;
  --surface-soft: #f7f9fd;
  --line: #e3e9f3;
  --hero: #050d22;
  --hero-2: #0b1536;
  --max: 1200px;
  --radius: 22px;
  --shadow: 0 20px 60px rgba(15, 35, 75, .09);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--surface);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.container {
  width: min(calc(100% - 48px), var(--max));
  margin-inline: auto;
}

.site-header {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  right: 0;
  color: white;
  background: rgba(5, 18, 42, .88);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}


.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: max-content;
}

.brand-name {
  font-weight: 800;
  letter-spacing: .06em;
  font-size: 20px;
}

.brand-mark {
  width: 26px;
  height: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  transform: skewY(-8deg);
}

.brand-mark span {
  display: block;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
}

.brand-mark span:nth-child(1) { grid-row: 1 / span 2; }
.brand-mark span:nth-child(2) { background: linear-gradient(135deg, var(--teal), #5fe0bb); }
.brand-mark span:nth-child(3) { background: linear-gradient(135deg, var(--blue), var(--purple)); }



.brand-logo {
  display: block;
  width: auto;
  height: 50px;
  max-width: 220px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.45))
    drop-shadow(0 0 5px rgba(40, 150, 255, 0.3));
}

@media (max-width: 760px) {
  .brand-logo {
    height: 50px;
    max-width: 220px;
  }
}


.desktop-nav a {
  color: rgba(255,255,255,.82);
  transition: color .2s ease;
}

.desktop-nav a:hover { color: white; }
.nav-wrap > .button { justify-self: end; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 10px;
  font-weight: 750;
  font-size: 15px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.button:hover { transform: translateY(-1px); }

.button-small {
  min-height: 42px;
  padding-inline: 18px;
  font-size: 15px;
  line-height: 1.55;
}

.button-primary {
  background: linear-gradient(135deg, #2161ff, #395cff);
  color: white;
  box-shadow: 0 10px 30px rgba(36,99,255,.3);
}

.button-secondary-dark {
  border: 1px solid rgba(255,255,255,.28);
  color: white;
  background: rgba(255,255,255,.03);
}

.button-light {
  background: white;
  color: var(--ink);
  min-width: 150px;
}

.hero {
  min-height: 720px;
  position: relative;
  overflow: hidden;
  padding: 155px 0 112px;
  color: white;
  background:
    radial-gradient(circle at 72% 30%, rgba(46, 105, 255, .18), transparent 28%),
    radial-gradient(circle at 92% 74%, rgba(137, 61, 255, .17), transparent 24%),
    linear-gradient(118deg, var(--hero) 0%, #07132f 48%, var(--hero-2) 100%);
}

.hero::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -160px;
  height: 330px;
  border-radius: 50%;
  border-top: 1px solid rgba(67,142,255,.22);
  opacity: 0;
  transform: translateY(80px) rotate(-5deg);
  box-shadow:
    0 -25px 0 rgba(43, 110, 255, .035),
    0 -50px 0 rgba(43, 110, 255, .025),
    0 -75px 0 rgba(43, 110, 255, .018);
}

.hero-lines {
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image:
    linear-gradient(120deg, transparent 0 28%, rgba(45,108,235,.1) 28.2%, transparent 28.5%),
    linear-gradient(145deg, transparent 0 60%, rgba(126,75,255,.12) 60.2%, transparent 60.4%);
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .22;
}

.hero-glow-one { right: 9%; top: 18%; background: #265cff; }
.hero-glow-two { right: -8%; bottom: -10%; background: #7d2cff; }

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 72px;
  align-items: center;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--blue);
  margin-bottom: 18px;
}

.eyebrow-on-dark { color: #69dfc1; }

.hero h1,
.section h2,
.pilot-card h2 {
  margin: 0;
  letter-spacing: -.035em;
  line-height: 1.03;
}

.hero h1 {
  font-size: clamp(52px, 6vw, 82px);
  max-width: 680px;
  font-weight: 780;
}

.hero h1 span { color: #5bdab9; }

.hero-lead {
  margin: 28px 0 0;
  max-width: 625px;
  color: rgba(255,255,255,.84);
  font-size: 20px;
  line-height: 1.68;
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 34px;
}

.hero-principles {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 34px;
  font-size: 14px;
  color: rgba(255,255,255,.68);
}

.hero-principles span {
  position: relative;
  padding-left: 14px;
}

.hero-principles span::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  background: var(--teal);
  border-radius: 50%;
}

.hero-visual {
  position: relative;
  padding: 24px;
  border: 1px solid rgba(81,131,255,.45);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(10,27,64,.88), rgba(24,20,72,.74));
  box-shadow: 0 30px 90px rgba(0,0,0,.3);
  backdrop-filter: blur(12px);
}

.foundation-panel {
  padding: 22px;
  border: 1px solid rgba(118,151,255,.32);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}

.visual-label,
.branch-title {
  text-align: center;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 13px;
  color: rgba(255,255,255,.9);
}

.foundation-items {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.foundation-items span {
  padding: 12px 14px;
  text-align: center;
  border: 1px solid rgba(116,150,255,.28);
  border-radius: 10px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  background: rgba(5,13,34,.32);
}

.visual-arrow {
  display: grid;
  place-items: center;
  margin: 10px 0 8px;
}

.hero-flow-arrow {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: rgba(255,255,255,.68);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.production-pill {
  width: max-content;
  margin: 0 auto 16px;
  padding: 10px 16px;
  border: 1px solid rgba(91,218,185,.4);
  border-radius: 999px;
  color: #8de8d0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.visual-branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.visual-branch {
  padding: 16px;
  border-radius: 15px;
  border: 1px solid rgba(77,125,255,.36);
  background: rgba(5,13,34,.32);
}

.visual-branch:nth-child(2) { border-color: rgba(130,86,255,.42); }

.mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 12px;
}

.mini-grid div {
  min-height: 62px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(87,126,255,.4);
  font-size: 13px;
  color: rgba(255,255,255,.82);
}

.visual-branch:nth-child(2) .mini-grid div { border-color: rgba(150,92,255,.42); }

.visual-caption {
  margin-top: 16px;
  text-align: center;
  color: rgba(255,255,255,.42);
  font-size: 13px;
}

/* Hero load sequence */
.js .hero-enter,
.js .hero-stage {
  opacity: 0;
  transform: translateY(12px);
}

.js.is-ready .hero-enter-copy {
  animation: heroIn .62s ease-out forwards;
}

.js.is-ready .hero-enter-visual {
  animation: heroIn .62s .12s ease-out forwards;
}

.js.is-ready .hero-stage-1 { animation: stageIn .45s .45s ease-out forwards; }
.js.is-ready .hero-stage-2 { animation: stageIn .45s .68s ease-out forwards; }
.js.is-ready .hero-stage-3 { animation: stageIn .45s .92s ease-out forwards; }
.js.is-ready .hero-stage-4 { animation: stageIn .45s 1.15s ease-out forwards; }

.js.is-ready .hero::after {
  animation: heroRingsIn .95s .28s cubic-bezier(.22,.72,.24,1) forwards;
}

@keyframes heroRingsIn {
  from {
    opacity: 0;
    transform: translateY(80px) rotate(-5deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(-5deg);
  }
}

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

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

.section { padding: 102px 0; }

.section-heading {
  max-width: 850px;
  margin: 0 auto 54px;
}

.section-heading.centered { text-align: center; }
.section-heading.narrow { max-width: 780px; }

.section h2,
.pilot-card h2 {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 760;
}

.section-heading p,
.section-intro {
  margin: 22px auto 0;
  max-width: 730px;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.65;
}

.four-grid,
.three-grid,
.two-grid { display: grid; gap: 22px; }

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

/* Scroll reveal */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .52s ease,
    transform .52s ease;
}

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

.js .stagger-group .reveal:nth-child(2) { transition-delay: .06s; }
.js .stagger-group .reveal:nth-child(3) { transition-delay: .12s; }
.js .stagger-group .reveal:nth-child(4) { transition-delay: .18s; }

.challenge { background: white; }
.challenge-grid { margin-top: 20px; }
.challenge-item { padding: 12px 14px; }

.icon-orbit {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid #cfdafe;
  border-radius: 14px;
  color: var(--blue);
  margin-bottom: 22px;
}

.icon-orbit svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.challenge-item:nth-child(2) .icon-orbit { color: var(--purple); border-color: #ded5ff; }
.challenge-item:nth-child(3) .icon-orbit { color: var(--orange); border-color: #ffd8c9; }
.challenge-item:nth-child(4) .icon-orbit { color: var(--green); border-color: #cdebdc; }

.challenge-item h3,
.principle-card h3,
.impact-card h3,

.solution-card.providers {
  background: #fbfefd;
  border-color: #d5ebe5;
}

.solution-audience {
  margin-bottom: 18px;
  color: var(--blue);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.015em;
}

.provider-audience {
  color: #168a6f;
}

.solution-card h3 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.25;
}

.challenge-item p,
.principle-card p,
.impact-card p,
.solution-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
}

.callout {
  margin-top: 42px;
  padding: 20px 28px;
  border-radius: 14px;
  text-align: center;
  background: linear-gradient(90deg, #f4f7ff, #f7f7ff);
  border: 1px solid #e7ecfa;
  font-weight: 670;
  color: #20345e;
}

.approach {
  background: var(--surface-soft);
  border-block: 1px solid #eef2f8;
}

.principle-card {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  box-shadow: 0 15px 35px rgba(29,47,83,.04);
}


.impact { background: white; }

.impact-card {
  min-height: 270px;
  padding: 34px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #fbfcff;
  transition: transform .2s ease, box-shadow .2s ease;
}

.impact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(20,38,74,.07);
}

.impact-label {
  width: max-content;
  margin-bottom: 54px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 850;
  letter-spacing: .14em;
}

.impact-card.build { border-color: #cbd8ff; background: linear-gradient(180deg,#f8faff,#fff); }
.impact-card.change { border-color: #ddd2ff; background: linear-gradient(180deg,#fbf9ff,#fff); }
.impact-card.scale { border-color: #ffd8c9; background: linear-gradient(180deg,#fffaf7,#fff); }
.impact-card.govern { border-color: #c9eadc; background: linear-gradient(180deg,#f8fffb,#fff); }

.build .impact-label { color: var(--blue); }
.change .impact-label { color: var(--purple); }
.scale .impact-label { color: var(--orange); }
.govern .impact-label { color: var(--green); }


.solutions { background: white; }


.solution-card {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  padding: 44px;
  border-radius: 26px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 45px rgba(21,38,74,.05);
  transition: transform .22s ease, box-shadow .22s ease;
}

.solution-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(21,38,74,.07);
}


.solution-card.enterprise {
  background: #fbfcff;
  border-color: #d7e1fb;
}


.provider-kicker { color: #168a6f; }


.solution-card.providers {
  background: #fbfefd;
  border-color: #d5ebe5;
}

.solution-audience {
  margin-bottom: 18px;
  color: var(--blue);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.015em;
}

.provider-audience {
  color: #168a6f;
}

.solution-card h3 {
  max-width: 500px;
  margin-top: 0;
  font-size: 28px;
  letter-spacing: -.02em;
}

.solution-card p {
  max-width: 560px;
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.6;
}

.solution-card a {
  position: absolute;
  left: 42px;
  bottom: 38px;
  z-index: 2;
  color: var(--blue);
  font-weight: 760;
  font-size: 16px;
  line-height: 1.6;
}

.providers a { color: #168a6f; }

.pilot-wrap { padding: 0 0 92px; }

.pilot-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1.7fr auto;
  gap: 38px;
  align-items: center;
  padding: 48px;
  border-radius: 28px;
  color: white;
  background:
    radial-gradient(circle at 84% 120%, rgba(40,208,157,.35), transparent 35%),
    linear-gradient(120deg, #142779 0%, #174b90 47%, #0a665d 100%);
  box-shadow: 0 28px 70px rgba(13,45,100,.18);
}

.pilot-card::before {
  content: "";
  position: absolute;
  inset: auto -10% -120px 20%;
  height: 240px;
  border-radius: 50%;
  border-top: 1px solid rgba(255,255,255,.14);
  transform: rotate(-4deg);
}

.pilot-copy p {
  margin: 18px 0 0;
  color: rgba(255,255,255,.82);
  max-width: 430px;
  font-size: 16px;
  line-height: 1.6;
}

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

.pilot-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pilot-step > span,
.pilot-step > .pilot-step-number {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 11px;
  font-weight: 850;
}

.pilot-step strong,
.pilot-step small { display: block; }

.pilot-step .pilot-step-title,
.pilot-step .pilot-step-description,
.pilot-step > .pilot-step-number {
  margin: 0;
}

.pilot-step .pilot-step-title {
  line-height: 1;
}

.pilot-step .pilot-step-description {
  display: block;
  font-size: 13px;
}

.pilot-step strong {
  margin-bottom: 3px;
  font-size: 15px;
  line-height: 1.55;
}

.pilot-step small,
.pilot-step .pilot-step-description {
  color: rgba(255,255,255,.76);
  line-height: 1.35;
}

.pilot-action {
  position: relative;
  z-index: 2;
}

.site-footer {
  padding: 58px 0 30px;
  color: white;
  background: #061027;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr repeat(4, 1fr);
  gap: 38px;
}

.footer-brand p {
  max-width: 300px;
  margin: 20px 0 0;
  color: rgba(255,255,255,.62);
  font-size: 15px;
  line-height: 1.55;
}


.site-footer 

.site-footer h4 {
  margin: 0 0 18px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(255,255,255,.5);
}

.footer-grid > div:not(.footer-brand) a {
  display: block;
  width: max-content;
  margin: 9px 0;
  color: rgba(255,255,255,.72);
  font-size: 15px;
  line-height: 1.55;
}

.footer-grid > div:not(.footer-brand) a:hover { color: white; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.48);
  font-size: 15px;
}

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

  .nav-wrap { grid-template-columns: 1fr auto; }

  .hero { padding-top: 135px; }
  .hero-copy { max-width: 760px; }
  .hero-visual { max-width: 820px; }
  .four-grid { grid-template-columns: repeat(2, 1fr); }

  .pilot-card { grid-template-columns: 1fr; }
  .pilot-action { justify-self: start; }

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

@media (max-width: 760px) {
  .container { width: min(calc(100% - 32px), var(--max)); }

  .site-header .button { display: none; }
  .nav-wrap { min-height: 72px; }

  .hero {
    min-height: auto;
    padding: 118px 0 80px;
  }

  .hero-grid { gap: 48px; }

  .hero h1 { font-size: clamp(44px, 13vw, 64px); }
  .hero-lead { font-size: 18px; }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-principles {
    flex-direction: column;
    gap: 9px;
  }

  .visual-branches,
  .foundation-items {
    grid-template-columns: 1fr;
  }

  .mini-grid { grid-template-columns: repeat(3, 1fr); }

  .section { padding: 76px 0; }
  .section-heading { margin-bottom: 42px; }

  .section h2,
  .pilot-card h2 {
    font-size: 36px;
  }

  .four-grid,
  .three-grid,
  .two-grid,

  .challenge-item,
  .impact-card,
  .principle-card {
    min-height: auto;
  }

  .impact-label,
  .card-index {
    margin-bottom: 24px;
  }

  .solution-card a {
    left: 32px;
    bottom: 30px;
  }

  .pilot-card { padding: 34px 26px; }

  .pilot-steps { grid-template-columns: 1fr; }

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

  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }

  .footer-bottom {
    flex-direction: column;
    gap: 6px;
  }

  }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .js .hero-enter,
  .js .hero-stage,
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero::after {
    opacity: 1 !important;
    transform: rotate(-5deg) !important;
  }
}


/* Enterprise page */


.portfolio-apps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.portfolio-apps div {
  min-height: 54px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(87,126,255,.42);
  color: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 700;
}

.portfolio-section {
  background: #f7f9fd;
  border-block: 1px solid #edf1f7;
}

/* Shared Perspective section foundations */
.portfolio-layout,
.customer-delivery-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 68px;
  align-items: center;
}

.portfolio-copy h2,
.customer-delivery-copy h2 {
  margin: 0;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.portfolio-points {
  display: grid;
  gap: 18px;
  margin-top: 34px;
}

.portfolio-points > div {
  padding-left: 18px;
  border-left: 2px solid #d2defb;
}

.portfolio-points strong,
.portfolio-points span {
  display: block;
}

.portfolio-points strong {
  margin-bottom: 4px;
  font-size: 17px;
}

.portfolio-points span {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.55;
}

.portfolio-map,
.customer-delivery-map {
  padding: 34px;
  border: 1px solid #dfe6f5;
  border-radius: 24px;
  background: white;
  box-shadow: var(--shadow);
}

.portfolio-map-title {
  margin-bottom: 22px;
  text-align: center;
  color: #52627c;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.portfolio-map-foundation {
  padding: 17px;
  border: 1px solid #cad8ff;
  border-radius: 11px;
  text-align: center;
  background: #f8faff;
  color: #264475;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.portfolio-map-branch{margin:8px auto 8px;display:grid;place-items:center;}

.map-branch-svg{width:100%;height:auto;color:#9db5f3;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible;}
.map-branch-svg .map-branch-head{fill:currentColor;stroke:none;}

.portfolio-map-teams,
.portfolio-map-apps {
  display: grid;
  gap: 9px;
}

.portfolio-map-teams {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 10px;
}

.portfolio-map-apps {
  grid-template-columns: repeat(3, 1fr);
}

.portfolio-map-teams span,
.portfolio-map-apps span {
  min-height: 54px;
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 720;
}

.portfolio-map-teams span {
  border: 1px solid #c9e8df;
  background: #f7fffc;
  color: #246452;
}

.portfolio-map-apps span {
  border: 1px solid #ccd9ff;
  background: #fbfcff;
  color: #284170;
}

.portfolio-map-caption {
  margin-top: 22px;
  text-align: center;
  color: #5b6c86;
  font-size: 13px;
}

.fit-section {
  background: white;
}

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

.fit-card {
  min-height: 170px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfcff;
}

.fit-card strong,
.fit-card span {
  display: block;
}

.fit-card strong {
  margin-bottom: 10px;
  font-size: 17px;
  line-height: 1.35;
}

.fit-card span {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.55;
}

@media (max-width: 1080px) {
  .portfolio-layout {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 760px) {
  .portfolio-apps, .portfolio-map-teams, .portfolio-map-apps, .fit-grid{
    grid-template-columns: 1fr;
  }

  .portfolio-map {
    padding: 26px;
  }
}


/* v10 refinements */
.customer-grid {
  grid-template-columns: repeat(2, 1fr);
}

.enterprise-hero-text {
  min-height: 660px;
  display: flex;
  align-items: center;
}

.enterprise-hero-content {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.enterprise-hero-content h1 {
  margin: 0 auto;
  max-width: 980px;
  font-size: clamp(56px, 6.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 780;
}

.enterprise-hero-content h1 span {
  color: #5bdab9;
}

.enterprise-hero-content .hero-lead {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.enterprise-hero-actions {
  justify-content: center;
}

.enterprise-hero-principles {
  justify-content: center;
}

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

  .enterprise-hero-text {
    min-height: auto;
  }

  .enterprise-hero-content {
    text-align: left;
  }

  .enterprise-hero-content h1 {
    font-size: clamp(44px, 13vw, 64px);
  }

  .enterprise-hero-content .hero-lead {
    margin-left: 0;
    margin-right: 0;
  }

  .enterprise-hero-actions,
  .enterprise-hero-principles {
    justify-content: flex-start;
  }
}


/* v11 enterprise claims */


.promise-copy h2 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(38px, 4.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.promise-copy p {
  margin: 20px 0 0;
  max-width: 720px;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.65;
}

.promise-metric {
  padding-left: 34px;
  border-left: 1px solid #d9e3f6;
}


.promise-label {
  margin-top: 14px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 760;
}

.promise-detail {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
}

.model-note {
  max-width: 980px;
  margin: 20px auto 0;
  color: #526078;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}


.impact-model-note {
  margin-top: 30px;
}

@media (max-width: 900px) {


  .promise-metric {
    padding-left: 0;
    padding-top: 28px;
    border-left: 0;
    border-top: 1px solid #d9e3f6;
  }
}

@media (max-width: 760px) {


  .promise-copy h2 {
    font-size: 36px;
  }

  .promise-copy p {
    font-size: 17px;
  }


  .model-note {
    text-align: left;
  }


}


/* Software Provider page */
.supplier-hero {
  background:
    radial-gradient(circle at 72% 30%, rgba(34, 164, 141, .17), transparent 28%),
    radial-gradient(circle at 92% 74%, rgba(54, 117, 255, .13), transparent 24%),
    linear-gradient(118deg, var(--hero) 0%, #07162d 48%, #092c34 100%);
}

.supplier-hero-text {
  min-height: 700px;
  display: flex;
  align-items: center;
}

.supplier-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1030px;
  margin: 0 auto;
  text-align: center;
}

.supplier-hero-content h1 {
  margin: 0 auto;
  max-width: 1030px;
  font-size: clamp(54px, 6vw, 84px);
  line-height: 1.01;
  letter-spacing: -.04em;
  font-weight: 780;
}

.supplier-hero-content h1 span {
  color: #5bdab9;
}

.supplier-hero-content .hero-lead {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.supplier-hero-actions,
.supplier-hero-principles {
  justify-content: center;
}

.supplier-eyebrow {
  color: #168a6f;
}


.supplier-promise-shell {
  border-color: #d6ebe5;
  background: #fbfefd;
}

.supplier-promise-metric {
  border-left-color: #d4e9e3;
}

.supplier-promise-value {
  color: #168a6f;
}

.supplier-icon {
  color: #168a6f;
  border-color: #cde8e0;
}


.customer-delivery-section {
  background: #f7f9fd;
  border-block: 1px solid #edf1f7;
}


.supplier-points > div {
  border-left-color: #cde8df;
}


.supplier-map-foundation {
  padding: 17px;
  border: 1px solid #c5e8de;
  border-radius: 11px;
  text-align: center;
  background: #f7fffc;
  color: #246452;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.supplier-map-line {
  background: #a5d6c9;
}

.customer-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 14px;
}

.customer-row span {
  min-height: 52px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid #c7e7de;
  border-radius: 9px;
  background: #f8fffc;
  color: #286856;
  font-size: 13px;
  font-weight: 760;
}


.supplier-pilot-card {
  background:
    radial-gradient(circle at 84% 120%, rgba(64, 207, 170, .37), transparent 35%),
    linear-gradient(120deg, #12396b 0%, #0b5b69 50%, #086554 100%);
}

@media (max-width: 1080px) {
  .customer-delivery-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .supplier-hero-text {
    min-height: auto;
  }

  .supplier-hero-content {
    text-align: left;
  }

  .supplier-hero-content h1 {
    font-size: clamp(42px, 12vw, 62px);
  }

  .supplier-hero-content .hero-lead {
    margin-left: 0;
    margin-right: 0;
  }

  .supplier-hero-actions,
  .supplier-hero-principles {
    justify-content: flex-start;
  }


  .supplier-promise-metric {
    border-left: 0;
    border-top: 1px solid #d4e9e3;
  }

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

  .customer-delivery-map {
    padding: 26px;
  }
}


/* v14: segment-specific enterprise and software-provider stories */

.enterprise-reality {
  background: #ffffff;
}

.enterprise-reality-layout {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 72px;
  align-items: start;
}

.enterprise-reality-copy {
  position: static;
  top: auto;
}

.enterprise-reality-copy h2,
.supplier-hook h2,
.response-copy h2 {
  margin: 0;
  font-size: clamp(38px, 4.3vw, 56px);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.enterprise-reality-copy p,
.supplier-hook p,
.response-copy p {
  margin: 22px 0 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.65;
}

.enterprise-friction-grid {
  display: grid;
  gap: 12px;
}

.enterprise-friction {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding: 24px 26px;
  border: 1px solid #e2e8f3;
  border-radius: 16px;
  background: #fbfcff;
}

.enterprise-friction h3,
.supplier-pain h3 {
  margin: 0 0 8px;
  font-size: 19px;
}

.enterprise-friction p,
.supplier-pain p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
}

.friction-index {
  color: #5276c7;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
}

.enterprise-consequence,
.supplier-economic-consequence {
  margin-top: 48px;
  padding: 30px 34px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  align-items: center;
}

.enterprise-consequence {
  border: 1px solid #dce5f6;
  background: linear-gradient(90deg, #f5f8ff, #fbfcff);
}

.enterprise-consequence span,
.supplier-economic-consequence span {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.enterprise-consequence span {
  color: #4268b5;
}

.enterprise-consequence strong,
.supplier-economic-consequence strong {
  font-size: 21px;
  line-height: 1.45;
}

.enterprise-response,
.supplier-response {
  background: #f7f9fd;
  border-block: 1px solid #edf1f7;
}

.response-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.response-principles {
  display: grid;
  gap: 12px;
}

.response-principle {
  padding: 24px 26px;
  border: 1px solid #dce5f5;
  border-radius: 16px;
  background: #ffffff;
}

.response-principle strong {
  display: block;
  margin-bottom: 7px;
  font-size: 18px;
}

.response-principle span {
  display: block;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.55;
}

.enterprise-impact,
.supplier-impact {
  background: #ffffff;
}

.segment-impact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
  margin-top: 42px;
}

.segment-impact-card {
  min-height: 290px;
  padding: 32px;
  border: 1px solid #dfe6f2;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(20, 43, 84, .06);
}

.segment-impact-topline {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
}

.segment-impact-value {
  font-size: 50px;
  line-height: 1;
  letter-spacing: -.045em;
}

.segment-impact-card h3 {
  margin: 38px 0 12px;
  font-size: 25px;
  line-height: 1.18;
}

.segment-impact-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
}

.segment-impact-card.change {
  border-top: 4px solid #7658d7;
}

.segment-impact-card.govern {
  border-top: 4px solid #1c9a7c;
}

.segment-impact-card.build {
  border-top: 4px solid #4178df;
}

.segment-impact-card.scale {
  border-top: 4px solid #ef8a43;
}

.segment-impact-card.change .segment-impact-value { color: #7658d7; }
.segment-impact-card.govern .segment-impact-value { color: #1c9a7c; }
.segment-impact-card.build .segment-impact-value { color: #4178df; }
.segment-impact-card.scale .segment-impact-value { color: #ef8a43; }

.supplier-economics {
  background:
    radial-gradient(circle at 85% 15%, rgba(58, 184, 153, .08), transparent 26%),
    #ffffff;
}

.supplier-economics-layout {
  max-width: 1120px;
}

.supplier-hook {
  max-width: 900px;
}

.supplier-hook h2 {
  font-size: clamp(44px, 5.2vw, 68px);
  max-width: 900px;
}

.repeat-pattern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 38px 0 34px;
  padding: 18px 20px;
  border: 1px solid #d7ebe5;
  border-radius: 16px;
  background: #f8fdfb;
}

.repeat-pattern span {
  padding: 10px 14px;
  border-radius: 9px;
  background: #ffffff;
  border: 1px solid #dfece8;
  color: #28594c;
  font-size: 14px;
  font-weight: 750;
}

.repeat-pattern i {
  color: #57a793;
  font-style: normal;
}

.supplier-pain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.supplier-pain {
  padding: 26px;
  border: 1px solid #dcebe7;
  border-radius: 16px;
  background: #fbfefd;
}

.supplier-economic-consequence {
  border: 1px solid #cfe9e1;
  background: linear-gradient(90deg, #f1fbf7, #f8fdfb);
}

.supplier-economic-consequence span {
  color: #19775f;
}

.supplier-response-principle {
  border-color: #d6e9e3;
}

.customer-app-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.customer-app-columns > div {
  display: grid;
  gap: 8px;
}

.customer-app-columns span {
  min-height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid #d7e1fb;
  border-radius: 8px;
  background: #ffffff;
  color: #31476e;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .enterprise-reality-layout,
  .response-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .enterprise-reality-copy {
    position: static;
  }

  .segment-impact-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}

@media (max-width: 760px) {
  .enterprise-consequence,
  .supplier-economic-consequence {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 26px;
  }

  .supplier-pain-grid {
    grid-template-columns: 1fr;
  }

  .segment-impact-card {
    min-height: 0;
    padding: 26px;
  }

  .segment-impact-value {
    font-size: 44px;
  }

  .customer-app-columns {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .customer-app-columns span {
    min-height: 46px;
    font-size: 12px;
  }
}


/* v17: global navigation + breadcrumb + local solution navigation */
.solution-page {
  --solution-header-height: 82px;
  --solution-context-height: 58px;
  --solution-fixed-offset: calc(var(--solution-header-height) + var(--solution-context-height));
}

.solution-content {
  padding-top: var(--solution-fixed-offset);
}

/* Dark segment Heroes intentionally continue behind the fixed navigation. */
.solution-content--hero-underlay {
  padding-top: 0;
}

.solution-content--hero-underlay > .solution-hero {
  --solution-hero-top-space: 73px;
  min-height: calc(var(--solution-fixed-offset) + 618px);
  padding-top: calc(var(--solution-fixed-offset) + var(--solution-hero-top-space));
}

.solution-page .site-header {
  position: fixed;
  z-index: 40;
  background: rgba(5, 18, 42, .88);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.solution-context-bar {
  position: fixed;
  z-index: 35;
  top: var(--solution-header-height);
  left: 0;
  right: 0;
  min-height: var(--solution-context-height);
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #e2e8f2;
  box-shadow: 0 8px 24px rgba(20, 42, 79, .06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.solution-context-inner {
  min-height: var(--solution-context-content-height, var(--solution-context-height));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: #78859a;
  font-size: 13px;
  font-weight: 650;
}

.breadcrumbs a {
  color: #52627b;
}

.breadcrumbs a:hover {
  color: var(--blue);
}

.breadcrumb-current {
  color: var(--ink);
  font-weight: 760;
}

.solution-section-nav {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.solution-section-nav::-webkit-scrollbar {
  display: none;
}

.solution-section-nav a {
  position: relative;
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 8px;
  color: #596982;
  font-size: 13px;
  font-weight: 700;
  transition: color .18s ease, background .18s ease;
}

.solution-section-nav a:hover {
  color: var(--ink);
  background: #f2f5fa;
}

.solution-section-nav a.is-active {
  color: #244f9f;
  background: #edf3ff;
}

.supplier-page .solution-section-nav a.is-active {
  color: #176b58;
  background: #edf9f5;
}



.solution-page section[id] {
  scroll-margin-top: calc(var(--solution-fixed-offset) + 18px);
}

@media (max-width: 1050px) {
  .solution-page {
    --solution-context-height: 50px;
    --solution-context-content-height: 50px;
  }

  .solution-context-inner {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: var(--solution-context-height);
    padding-top: 0;
    padding-bottom: 0;
  }

  .solution-context-bar {
    min-height: var(--solution-context-height);
  }

  .breadcrumbs,
  .solution-section-nav {
    display: none;
  }
}


@media (max-width: 760px) {
  .solution-page {
    --solution-header-height: 72px;
    --solution-context-height: 50px;
    --solution-context-content-height: 50px;
  }

  .solution-page .nav-wrap {
    min-height: var(--solution-header-height);
  }

  .solution-context-inner {
    width: min(calc(100% - 28px), var(--max));
  }

  .breadcrumbs {
    font-size: 12px;
    overflow: hidden;
  }

  .breadcrumb-current {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .solution-section-nav {
    margin-inline: -4px;
    padding-inline: 4px;
  }

  .solution-section-nav a {
    padding: 7px 9px;
    font-size: 12px;
  }

  .solution-content--hero-underlay > .solution-hero {
    --solution-hero-top-space: 46px;
    min-height: auto;
  }
}


/* v18: fixed global header on the landing page as well */
body:not(.solution-page) {
  --global-header-height: 82px;
}

body:not(.solution-page) section[id] {
  scroll-margin-top: calc(var(--global-header-height) + 18px);
}

@media (max-width: 760px) {
  body:not(.solution-page) {
    --global-header-height: 72px;
  }
}


/* v19: clear active state in the fixed global header */
.site-header .desktop-nav a {
  position: relative;
}

.site-header .desktop-nav a[aria-current="page"] {
  color: #ffffff;
  font-weight: 760;
}

.site-header .desktop-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -10px;
  height: 2px;
  border-radius: 999px;
  background: rgba(125, 164, 255, .95);
}

.supplier-page .site-header .desktop-nav a[aria-current="page"]::after {
  background: rgba(91, 218, 185, .98);
}

@media (max-width: 760px) {
  .site-header .desktop-nav a[aria-current="page"]::after {
    bottom: -7px;
  }
}


/* v20: landing-page value bridge into the two sales-deck narratives */
.homepage-impact-note {
  margin-top: 30px;
  max-width: 980px;
}

.value-bridge {
  padding: 0 0 16px;
  background: #ffffff;
}

.value-bridge-shell {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 46px;
  align-items: center;
  padding: 34px 38px;
  border: 1px solid #dfe6f2;
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% 20%, rgba(67, 120, 223, .06), transparent 28%),
    linear-gradient(120deg, #fbfcff, #f8fbff);
  box-shadow: 0 16px 38px rgba(20, 43, 84, .05);
}

.value-bridge-copy h2 {
  margin: 0;
  font-size: clamp(34px, 3.8vw, 48px);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.value-bridge-copy p {
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
}

.value-bridge-links {
  display: grid;
  gap: 12px;
}

.value-bridge-link {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "audience arrow"
    "title arrow"
    "detail arrow";
  gap: 3px 18px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid #dce5f3;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.value-bridge-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(24, 48, 92, .08);
}

.value-bridge-link.enterprise-link:hover {
  border-color: #b9caef;
}

.value-bridge-link.supplier-link:hover {
  border-color: #b9ded4;
}

.value-bridge-audience {
  grid-area: audience;
  color: #617089;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.value-bridge-link strong {
  grid-area: title;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.25;
}

.value-bridge-link small {
  grid-area: detail;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.45;
}

.card-arrow-svg {
  grid-area: arrow;
  width: 34px;
  height: 18px;
  fill: none;
  stroke: #5073bd;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.value-bridge-link.supplier-link .card-arrow-svg {
  stroke: #21886f;
}

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

@media (max-width: 760px) {
  .value-bridge-shell {
    padding: 28px 24px;
  }

  .value-bridge-copy h2 {
    font-size: 34px;
  }
}


/* v21: keep the hero rings visually anchored while the hero is in view */
.hero::after {
  translate: 0 var(--hero-ring-lock, 0px);
  will-change: translate, transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .hero::after {
    translate: none !important;
  }
}


/* v22: Why this works + supplier controlled-speed hook */
.why-works {
  background: #f9fbfe;
  border-block: 1px solid #edf1f7;
}

.why-works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 42px;
}

.why-works-card {
  padding: 28px 30px;
  border: 1px solid #dde5f2;
  border-radius: 18px;
  background: #ffffff;
}

.why-works-card h3 {
  margin: 8px 0 10px;
  font-size: 21px;
  line-height: 1.2;
}

.why-works-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.62;
}

.why-works-kicker {
  display: inline-block;
  color: #4c6eb3;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .075em;
}

.supplier-why-card {
  border-color: #d8e9e4;
}

.supplier-why-card .why-works-kicker {
  color: #19775f;
}

.supplier-speed-hook {
  padding: 0;
  background: #ffffff;
}

.supplier-speed-hook-inner {
  margin-top: 24px;
  padding: 17px 22px;
  border: 1px solid #d4e9e3;
  border-radius: 14px;
  background: linear-gradient(90deg, #f5fbf9, #fbfefd);
  color: #215f50;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 760;
  text-align: center;
}


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

@media (max-width: 760px) {
  .why-works-card {
    padding: 24px;
  }

  .supplier-speed-hook-inner {
    text-align: left;
  }
}


/* v24: full-width pilot eyebrow/title, split content only below the title */
.pilot-card-wide {
  display: block;
}

.pilot-card-wide .pilot-eyebrow-row {
  position: relative;
  z-index: 2;
  width: 100%;
}

.pilot-card-wide .pilot-eyebrow-row .eyebrow {
  margin-bottom: 18px;
}

.pilot-card-wide .pilot-title-row {
  position: relative;
  z-index: 2;
  width: 100%;
}

.pilot-card-wide .pilot-title-row h2 {
  width: 100%;
  max-width: none;
}

.pilot-card-wide .pilot-content-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.48fr);
  gap: 34px;
  align-items: stretch;
  margin-top: 22px;
}

.pilot-card-wide .pilot-copy {
  min-width: 0;
}

.pilot-card-wide .pilot-copy p {
  margin-top: 0;
}

.pilot-card-wide .pilot-delivery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  min-width: 0;
}

.pilot-card-wide .pilot-steps {
  align-self: center;
}

.pilot-card-wide .pilot-action {
  align-self: center;
}

@media (max-width: 980px) {
  .pilot-card-wide .pilot-content-grid {
    grid-template-columns: 1fr;
  }

  .pilot-card-wide .pilot-delivery {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (max-width: 760px) {
  .pilot-card-wide .pilot-content-grid {
    margin-top: 20px;
  }

  .pilot-card-wide .pilot-delivery {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pilot-card-wide .pilot-action {
    justify-self: start;
  }
}


/* v25: Research & Methodology */
.methodology-link-row {
  margin-top: 14px;
  text-align: center;
}

.methodology-link-row a {
  color: var(--blue);
  font-size: 14px;
  font-weight: 760;
}

.supplier-page .methodology-link-row a {
  color: #187b64;
}

.research-hero {
  min-height: 720px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 78% 24%, rgba(81, 122, 255, .18), transparent 28%),
    radial-gradient(circle at 90% 76%, rgba(59, 205, 171, .14), transparent 28%),
    linear-gradient(118deg, #07162f 0%, #0e2a58 52%, #0a3c46 100%);
}

.research-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1050px;
  margin: 0 auto;
  text-align: center;
}

.research-hero h1 {
  max-width: 980px;
  margin: 0 auto;
  font-size: clamp(58px, 7vw, 96px);
  line-height: .98;
  letter-spacing: -.05em;
}

.research-hero h1 span {
  color: #63dcc0;
}

.research-hero .hero-lead {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.research-hero-principle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 30px;
}

.research-hero-principle strong {
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  font-size: 13px;
  font-weight: 700;
}

.research-evidence-levels {
  background: #ffffff;
}

.evidence-level-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.evidence-level-card {
  min-height: 300px;
  padding: 30px;
  border: 1px solid #dfe6f2;
  border-radius: 20px;
  background: #fbfcff;
}

.evidence-level-card.external { border-top: 4px solid #6b78a0; }
.evidence-level-card.model { border-top: 4px solid #4778df; }
.evidence-level-card.customer { border-top: 4px solid #1a9a7a; }

.evidence-type {
  display: inline-block;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .09em;
  color: #586a89;
}

.evidence-level-card h3 {
  margin: 34px 0 12px;
  font-size: 25px;
}

.evidence-level-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
}

.evidence-level-card small {
  display: block;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #e5eaf3;
  color: #58667c;
  font-size: 13px;
  line-height: 1.5;
}

.calc-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 18px;
  padding: 22px 24px;
  border: 1px solid #e1e6ef;
  border-radius: 14px;
  background: #f8fafc;
}

.calc-note p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

.research-support {
  background: #f7f9fd;
  border-block: 1px solid #edf1f7;
}

.research-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.research-topic {
  padding: 28px 30px;
  border: 1px solid #dfe6f2;
  border-radius: 18px;
  background: #ffffff;
}

.research-topic > span {
  color: #5575ba;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
}

.research-topic h3 {
  margin: 10px 0;
  font-size: 22px;
}

.research-topic p {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.62;
}

.research-topic a {
  display: inline-block;
  margin: 5px 12px 0 0;
  color: #315ea9;
  font-size: 13px;
  font-weight: 720;
}

.research-model {
  background: #ffffff;
}

.method-chain {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 44px;
  padding: 26px;
  border: 1px solid #dce5f2;
  border-radius: 20px;
  background: #fbfcff;
}

.method-chain > div {
  min-height: 170px;
  padding: 20px 16px;
  border: 1px solid #e1e7f1;
  border-radius: 14px;
  background: #ffffff;
}

.method-chain span,
.validation-flow span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf3ff;
  color: #315eaa;
  font-size: 11px;
  font-weight: 850;
}

.method-chain strong,
.method-chain small,
.validation-flow strong,
.validation-flow small {
  display: block;
}

.method-chain strong {
  margin-top: 18px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.method-chain small {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.method-chain i,
.validation-flow i {
  color: #7e90b0;
  font-style: normal;
  font-size: 22px;
}

.method-boundary {
  margin-top: 20px;
  padding: 24px 28px;
  border: 1px solid #e1e6ee;
  border-radius: 16px;
  background: #f8fafc;
}

.method-boundary strong {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
}

.method-boundary p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

.research-numbers {
  background: #f7f9fd;
  border-block: 1px solid #edf1f7;
}

.method-number-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.method-number-card {
  padding: 30px;
  border: 1px solid #dfe6f2;
  border-radius: 20px;
  background: #ffffff;
}

.method-number-card.change { border-top: 4px solid #7658d7; }
.method-number-card.build { border-top: 4px solid #4178df; }
.method-number-card.scale { border-top: 4px solid #ef8a43; }
.method-number-card.govern { border-top: 4px solid #1c9a7c; }

.method-number-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
}

.method-number-head span {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .09em;
}

.method-number-head strong {
  font-size: 50px;
  line-height: 1;
  letter-spacing: -.045em;
}

.method-number-card.change .method-number-head strong { color: #7658d7; }
.method-number-card.build .method-number-head strong { color: #4178df; }
.method-number-card.scale .method-number-head strong { color: #ef8a43; }
.method-number-card.govern .method-number-head strong { color: #1c9a7c; }

.method-number-card h3 {
  margin: 30px 0 12px;
  font-size: 24px;
}

.method-number-card p {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.63;
}

.method-number-card small {
  display: block;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e3e8f1;
  color: #5a687e;
  font-size: 13px;
  line-height: 1.55;
}

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

.numbers-interpretation > div {
  padding: 22px 24px;
  border: 1px solid #e0e6ef;
  border-radius: 14px;
  background: #fbfcfe;
}

.numbers-interpretation strong {
  display: block;
  margin-bottom: 7px;
  font-size: 15px;
}

.numbers-interpretation p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.research-validation {
  background: #ffffff;
}

.validation-layout {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 60px;
  align-items: center;
}

.validation-copy h2 {
  margin: 0;
  font-size: clamp(38px, 4.2vw, 54px);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.validation-copy p {
  margin: 20px 0 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
}

.validation-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 24px;
  border: 1px solid #dce5f2;
  border-radius: 20px;
  background: #fbfcff;
}

.validation-flow > div {
  min-height: 170px;
  padding: 18px;
  border: 1px solid #e1e7f1;
  border-radius: 13px;
  background: #ffffff;
}

.validation-flow strong {
  margin-top: 18px;
  font-size: 16px;
}

.validation-flow small {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.research-boundaries {
  background: #f7f9fd;
}

.boundaries-shell {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: 60px;
  padding: 36px 40px;
  border: 1px solid #dce5f1;
  border-radius: 22px;
  background: #ffffff;
}

.boundaries-shell h2 {
  margin: 0;
  font-size: clamp(36px, 4vw, 50px);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.boundaries-copy p {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
}

.research-references {
  background: #ffffff;
}

.research-references .section-heading {
  margin-left: 0;
}

.reference-list {
  display: grid;
  gap: 10px;
}

.reference-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid #e0e6ef;
  border-radius: 14px;
  background: #fbfcfe;
  scroll-margin-top: calc(var(--solution-fixed-offset) + 22px);
}

.reference-item > span {
  color: #5575b5;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
}

.reference-item strong {
  font-size: 15px;
}

.reference-item p {
  margin: 5px 0 7px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.reference-item a {
  color: #315ea9;
  font-size: 13px;
  font-weight: 720;
}

.research-cta {
  padding: 0 0 92px;
  background: #ffffff;
}

.research-cta-shell {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 42px 46px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 84% 120%, rgba(64, 207, 170, .32), transparent 35%),
    linear-gradient(120deg, #12396b 0%, #184c86 50%, #0a665d 100%);
  color: #ffffff;
}

.research-cta-shell h2 {
  margin: 0;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.research-cta-shell p {
  max-width: 720px;
  margin: 16px 0 0;
  color: rgba(255,255,255,.82);
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 1050px) {
  .evidence-level-grid {
    grid-template-columns: 1fr;
  }

  .method-chain {
    grid-template-columns: 1fr;
  }

  .method-chain i {
    transform: rotate(90deg);
    justify-self: center;
  }

  .validation-layout {
    grid-template-columns: 1fr;
  }

  .validation-flow {
    grid-template-columns: 1fr;
  }

  .validation-flow i {
    transform: rotate(90deg);
    justify-self: center;
  }
}

@media (max-width: 900px) {
  .research-topic-grid,
  .method-number-grid,
  .numbers-interpretation,
  .boundaries-shell {
    grid-template-columns: 1fr;
  }

  .research-cta-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .research-hero {
    min-height: auto;
  }

  .research-hero-content {
    text-align: left;
  }

  .research-hero h1 {
    font-size: clamp(46px, 13vw, 66px);
  }

  .research-hero-principle {
    justify-content: flex-start;
  }

  .calc-note {
    grid-template-columns: 1fr;
  }

  .method-number-card {
    padding: 24px;
  }

  .method-number-head strong {
    font-size: 42px;
  }

  .reference-item {
    grid-template-columns: 1fr;
  }

  .research-cta-shell {
    padding: 32px 26px;
  }
}


/* v26: structured Supplier delivery-economics process rail */
.supplier-page .repeat-pattern {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) 42px
    minmax(0, 1fr) 42px
    minmax(0, 1fr) 42px
    minmax(0, 1fr) 42px
    minmax(0, 1fr);
  gap: 0;
  align-items: center;
  margin: 40px 0 36px;
  padding: 22px;
  border: 1px solid #d7e8e6;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(49, 111, 170, .035), rgba(34, 143, 121, .055)),
    #fbfefd;
}

.supplier-page .repeat-pattern .repeat-step {
  position: relative;
  min-width: 0;
  min-height: 64px;
  display: grid;
  place-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 780;
  line-height: 1.3;
  box-shadow: 0 8px 18px rgba(29, 70, 88, .045);
}

.supplier-page .repeat-pattern .step-1 {
  color: #28587b;
  border: 1px solid #c8ddec;
  background: #f5faff;
}

.supplier-page .repeat-pattern .step-2 {
  color: #265f72;
  border: 1px solid #c5dfe6;
  background: #f4fbfc;
}

.supplier-page .repeat-pattern .step-3 {
  color: #23685f;
  border: 1px solid #c3e2da;
  background: #f3fcf9;
}

.supplier-page .repeat-pattern .step-4 {
  color: #1f705c;
  border: 1px solid #bfe4d8;
  background: #f2fcf8;
}

.supplier-page .repeat-pattern .step-5 {
  color: #17775e;
  border: 1px solid #b9e1d4;
  background: #eefaf6;
}

@media (max-width: 900px) {
  .supplier-page .repeat-pattern {
    grid-template-columns:
      minmax(0, 1fr) 32px
      minmax(0, 1fr) 32px
      minmax(0, 1fr) 32px
      minmax(0, 1fr) 32px
      minmax(0, 1fr);
    padding: 18px;
  }

  .supplier-page .repeat-pattern .repeat-step {
    min-height: 58px;
    padding: 10px 8px;
    font-size: 13px;
  }
}

@media (max-width: 680px) {
  .supplier-page .repeat-pattern {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 18px;
  }

  .supplier-page .repeat-pattern .repeat-step {
    min-height: 54px;
  }

  }


/* Header utility actions and responsive navigation */


.language-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 1180px) and (min-width: 1081px) {
  .nav-wrap {
    gap: 18px;
  }

  .desktop-nav {
    gap: 18px;
    font-size: 14px;
  }

  .button-small {
    padding-inline: 15px;
    font-size: 14px;
  }
}

@media (max-width: 1080px) {
  .nav-wrap {
    grid-template-columns: 1fr auto;
  }

  .header-actions {
    grid-column: 2;
  }
}

@media (max-width: 760px) {
  .header-actions {
    gap: 0;
  }

  }
/* Language picker */


.language-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 60;
}

.language-trigger {
  min-width: 82px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  outline: none;
  background: rgba(255,255,255,.07);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 780;
  line-height: 1;
  cursor: pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.language-trigger:hover,
.language-trigger:focus-visible,
.language-picker.is-open .language-trigger {
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.12);
}

.language-trigger:focus-visible {
  box-shadow: 0 0 0 3px rgba(87,128,255,.28);
}

.language-globe {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}

.language-code {
  min-width: 20px;
  text-align: center;
}

.language-chevron {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .8;
  transition: transform .18s ease;
}

.language-picker.is-open .language-chevron {
  transform: rotate(180deg);
}

.language-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 184px;
  padding: 8px;
  border: 1px solid #d9e2ef;
  border-radius: 13px;
  background: #ffffff;
  box-shadow:
    0 18px 48px rgba(4,18,45,.2),
    0 4px 12px rgba(4,18,45,.08);
  color: var(--ink);
}

.language-menu[hidden] {
  display: none;
}

.language-option {
  position: relative;
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 14px 0 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #20324e;
  font: inherit;
  font-size: 14px;
  font-weight: 720;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}


.language-option:hover,
.language-option:focus-visible {
  outline: none;
  background: #e9f0fb;
  border-color: #d4e0f4;
  color: #132c54;
}


.language-option[aria-checked="true"] {
  background: #e7f0ff;
  border-color: #c9d9fb;
  color: #244f9f;
}


.language-option[aria-checked="true"]:hover,
.language-option[aria-checked="true"]:focus-visible {
  background: #dce9ff;
  border-color: #bbcff9;
  color: #173f83;
}

.language-option[aria-checked="true"]::after {
  content: "✓";
  margin-left: auto;
  color: #315fae;
  font-size: 13px;
  font-weight: 850;
}

@media (max-width: 1180px) and (min-width: 1081px) {
  .language-trigger {
    min-width: 76px;
    padding-inline: 9px;
  }
}

@media (max-width: 760px) {
  .header-actions {
    gap: 8px;
  }

  .language-trigger {
    min-width: 76px;
    height: 40px;
  }

  .language-menu {
    width: 172px;
  }
}


/* Solutions navigation dropdown */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus-visible,
.nav-dropdown.is-open .nav-dropdown-trigger {
  color: #ffffff;
}

.nav-dropdown-trigger:focus-visible {
  outline: 2px solid rgba(255,255,255,.5);
  outline-offset: 5px;
  border-radius: 4px;
}

.nav-dropdown-chevron {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}

.nav-dropdown.is-open .nav-dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-trigger.is-current {
  color: #ffffff;
}

.nav-dropdown-trigger.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -13px;
  height: 2px;
  border-radius: 999px;
  background: #5f91ff;
}

.supplier-page .nav-dropdown-trigger.is-current::after {
  background: #49c8a4;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  width: min(520px, calc(100vw - 40px));
  padding: 10px;
  border: 1px solid #d8e2ef;
  border-radius: 16px;
  background: #ffffff;
  box-shadow:
    0 22px 60px rgba(4,18,45,.22),
    0 5px 16px rgba(4,18,45,.09);
  color: var(--ink);
  transform: translateX(-50%);
  z-index: 80;
}

.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  height: 20px;
}


.nav-dropdown-menu[hidden] {
  display: none;
}

.nav-dropdown-menu a {
  display: grid;
  gap: 5px;
  padding: 16px 18px 16px 20px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #20324e;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  outline: none;
  background: #eef4fb;
  border-color: #d7e2f2;
  color: #173f83;
}

.nav-dropdown-menu strong {
  font-size: 15px;
  line-height: 1.35;
}

.nav-dropdown-menu span {
  color: #66758c;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 1080px) {
  .nav-dropdown-menu {
    left: 0;
    transform: none;
  }
}


/* v39 Research & Methodology publication layout */
.research-page {
  background: #ffffff;
}

.research-page .research-publication-hero {
  display: flex;
  min-height: 430px;
  align-items: center;
  padding: 56px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid #e6ebf2;
}

.research-publication-shell {
  max-width: 1080px;
}

.research-kicker {
  margin-bottom: 18px;
  color: #52627a;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.research-publication-hero h1 {
  max-width: 850px;
  margin: 0;
  color: #10233f;
  font-size: clamp(44px, 5.8vw, 72px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.research-lead {
  max-width: 820px;
  margin: 30px 0 0;
  color: #4f6078;
  font-size: 20px;
  line-height: 1.7;
}

.research-paper-section {
  padding: 92px 0;
  background: #ffffff;
  border-bottom: 1px solid #e8edf3;
}

.research-paper-section-tinted {
  background: #f8fafc;
}

.research-section-heading {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 52px;
}

.research-section-number {
  padding-top: 4px;
  color: #8b98aa;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .08em;
}

.research-section-heading h2 {
  max-width: 820px;
  margin: 0;
  color: #132943;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.research-section-heading p {
  max-width: 820px;
  margin: 20px 0 0;
  color: #596a80;
  font-size: 17px;
  line-height: 1.7;
}

.research-finding-list {
  margin-left: 80px;
  border-top: 1px solid #dfe6ee;
}

.research-finding {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.8fr);
  gap: 46px;
  padding: 30px 0;
  border-bottom: 1px solid #dfe6ee;
}

.research-finding h3 {
  margin: 0;
  color: #1d334d;
  font-size: 19px;
  line-height: 1.35;
}

.research-finding p {
  margin: 0;
  color: #596a80;
  font-size: 16px;
  line-height: 1.7;
}

.research-citation {
  grid-column: 2;
  margin-top: -26px;
  color: #8190a3;
  font-size: 13px;
  line-height: 1.55;
}

.research-definition-table-wrap,
.research-values-table-wrap {
  margin-left: 80px;
  overflow-x: auto;
  border: 1px solid #dfe6ee;
  border-radius: 12px;
  background: #ffffff;
}

.research-definition-table,
.research-values-table {
  width: 100%;
  border-collapse: collapse;
}

.research-definition-table th,
.research-definition-table td,
.research-values-table th,
.research-values-table td {
  padding: 19px 22px;
  border-bottom: 1px solid #e5eaf0;
  text-align: left;
  vertical-align: top;
}

.research-definition-table th,
.research-values-table th {
  background: #f5f7fa;
  color: #52627a;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.research-definition-table td,
.research-values-table td {
  color: #53657c;
  font-size: 15px;
  line-height: 1.6;
}

.research-definition-table tbody tr:last-child td,
.research-values-table tbody tr:last-child td {
  border-bottom: 0;
}

.research-definition-table td:first-child {
  width: 130px;
  color: #193452;
}

.research-method-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin-left: 80px;
}

.research-method-step {
  padding: 24px;
  border: 1px solid #dfe6ee;
  border-radius: 12px;
  background: #ffffff;
}

.research-method-step > span {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border: 1px solid #ccd7e3;
  border-radius: 50%;
  color: #52627a;
  font-size: 12px;
  font-weight: 750;
}

.research-method-step strong {
  display: block;
  color: #1a334f;
  font-size: 16px;
  line-height: 1.4;
}

.research-method-step p {
  margin: 12px 0 0;
  color: #66778c;
  font-size: 14px;
  line-height: 1.6;
}



.research-ip-note {
  margin: 34px 0 0 80px;
  padding: 18px 20px;
  border-left: 3px solid #a8b6c6;
  background: #f8fafc;
  color: #617187;
  font-size: 14px;
  line-height: 1.65;
}

.research-number-type {
  margin: 0 0 16px 80px;
  color: #66778d;
  font-size: 13px;
}

.research-values-table td:first-child {
  width: 34%;
}

.research-values-table td:first-child strong {
  display: block;
  color: #17324f;
  font-size: 15px;
}

.research-values-table td:first-child span {
  display: block;
  margin-top: 4px;
  color: #8794a5;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .06em;
}

.research-values-table td:nth-child(2) {
  width: 130px;
}

.research-value {
  color: #163f78 !important;
  font-size: 26px !important;
  font-weight: 800;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.research-interpretation {
  max-width: 820px;
  margin: 32px 0 0 80px;
  padding-top: 24px;
  border-top: 1px solid #dfe6ee;
}

.research-interpretation h3 {
  margin: 0 0 10px;
  color: #1d334d;
  font-size: 17px;
}

.research-interpretation p {
  margin: 0;
  color: #617187;
  font-size: 15px;
  line-height: 1.7;
}

.research-validation-steps {
  margin: 0 0 0 80px;
  padding: 0;
  list-style: none;
  border-top: 1px solid #dfe6ee;
}

.research-validation-steps li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 22px;
  padding: 25px 0;
  border-bottom: 1px solid #dfe6ee;
}

.research-validation-steps li > span {
  color: #8997a8;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .07em;
}

.research-validation-steps strong {
  color: #1a334f;
  font-size: 17px;
}

.research-validation-steps p {
  margin: 7px 0 0;
  color: #617187;
  font-size: 15px;
  line-height: 1.65;
}

.research-pilot-link {
  margin: 28px 0 0 80px;
}

.research-references {
  background: #fbfcfd;
}

.research-reference-list {
  margin: 0 0 0 80px;
  padding: 0;
  list-style: none;
  border-top: 1px solid #dfe6ee;
  counter-reset: research-ref;
}

.research-reference-list li {
  counter-increment: research-ref;
  display: grid;
  grid-template-columns: 44px minmax(220px, .8fr) minmax(0, 1.4fr);
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid #dfe6ee;
  color: #5c6d82;
  font-size: 14px;
  line-height: 1.55;
}

.research-reference-list li::before {
  content: "[" counter(research-ref) "]";
  color: #8b98aa;
  font-size: 12px;
  font-weight: 750;
}

.research-reference-list strong {
  color: #243b56;
  font-size: 14px;
}

.research-reference-note {
  max-width: 820px;
  margin: 28px 0 0 80px;
  color: #7b899b;
  font-size: 13px;
  line-height: 1.65;
}

@media (max-width: 1080px) {
  .research-method-flow {
    grid-template-columns: 1fr;
  }

  .research-method-arrow {
    min-height: 20px;
    justify-content: center;
    transform: rotate(90deg);
  }
}

@media (max-width: 760px) {
  .research-page .research-publication-hero {
    min-height: 360px;
    padding: 48px 0;
  }

  .research-publication-hero h1 {
    font-size: clamp(40px, 12vw, 56px);
  }

  .research-lead {
    font-size: 18px;
  }

  .research-paper-section {
    padding: 68px 0;
  }

  .research-section-heading {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 36px;
  }

  .research-section-number {
    padding-top: 0;
  }

  .research-finding-list,
  .research-definition-table-wrap,
  .research-values-table-wrap,
  .research-method-flow,
  .research-ip-note,
  .research-number-type,
  .research-interpretation,
  .research-validation-steps,
  .research-pilot-link,
  .research-reference-list,
  .research-reference-note {
    margin-left: 0;
  }

  .research-finding {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .research-citation {
    grid-column: 1;
    margin-top: 4px;
  }

  .research-definition-table,
  .research-values-table {
    min-width: 720px;
  }

  .research-reference-list li {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .research-reference-list li span {
    grid-column: 2;
  }
}




/* v44: role-based Accelerator page */
.accelerator-page .site-header .desktop-nav a[aria-current="page"]::after {
  background: linear-gradient(90deg, #4a7dff, #27c7a1);
}

.accelerator-hero {
  min-height: calc(var(--solution-fixed-offset) + 610px) !important;
}

.accelerator-hero-content {
  position: relative;
  z-index: 2;
  max-width: 920px;
}

.accelerator-hero h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(50px, 6vw, 78px);
  line-height: .99;
  letter-spacing: -.05em;
}

.accelerator-hero h1 span {
  background: linear-gradient(90deg, #6f9cff, #5edfc3 60%, #9e8cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.accelerator-hero .hero-lead {
  max-width: 840px;
  margin: 28px 0 0;
  font-size: 20px;
  line-height: 1.65;
  color: rgba(231,238,255,.78);
}

.accelerator-intro,
.role-section,
.accelerator-landscape,
.accelerator-human-control,
.security-spotlight {
  padding: 96px 0;
}

.role-lens-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 46px;
}

.role-lens-card {
  min-height: 235px;
  padding: 22px;
  border: 1px solid #dfe6f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(18,43,82,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.role-lens-card:hover { transform: translateY(-3px); border-color:#c7d7f7; box-shadow:0 18px 48px rgba(18,43,82,.09); }
.role-lens-card > span { color:#3a69c8; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.role-lens-card strong { display:block; margin-top:14px; color:#132943; font-size:17px; line-height:1.4; }
.role-lens-card small { display:block; margin-top:16px; color:#718096; font-size:12.5px; line-height:1.55; }

.role-section-tinted { background:#f7f9fc; }
.role-section-layout { display:grid; gap:34px; }
.role-copy { max-width:850px; }
.role-copy h2 { max-width:820px; margin:10px 0 0; font-size:clamp(36px,4.2vw,52px); line-height:1.06; letter-spacing:-.04em; }
.role-copy > p { max-width:820px; margin:22px 0 0; color:#586a81; font-size:17px; line-height:1.72; }
.role-question { display:flex; gap:15px; align-items:baseline; margin-top:24px; padding-top:19px; border-top:1px solid #dfe6ee; color:#8491a2; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.role-question strong { color:#283d57; font-size:15px; line-height:1.5; letter-spacing:0; text-transform:none; }

.accelerator-card-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:13px; }
.accelerator-card-grid-engineer { grid-template-columns:repeat(3,minmax(0,1fr)); }
.accelerator-card { min-height:180px; padding:20px; border:1px solid #dfe6ee; border-radius:15px; background:#fff; }
.role-section-tinted .accelerator-card { background:rgba(255,255,255,.9); }
.accelerator-card h3 { margin:0; color:#1a3554; font-size:15px; line-height:1.35; }
.accelerator-card p { margin:11px 0 0; color:#64758a; font-size:13px; line-height:1.6; }

.prototype-figure { max-width: 720px; margin: 4px auto 0; }
.prototype-figure img { display:block; width:100%; height:auto; border:1px solid #dce4ef; border-radius:18px; background:#f4f7fb; box-shadow:0 24px 65px rgba(16,41,80,.11); }
.prototype-figure figcaption { margin:13px 5px 0; color:#738195; font-size:13px; line-height:1.6; }
.prototype-figure figcaption strong { color:#53657c; }

.engineer-flow,.delivery-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:12px; padding:24px; border:1px solid #dfe6ee; border-radius:18px; background:linear-gradient(135deg,#f9fbff,#f6fbfa); }
.engineer-flow > div,.delivery-flow > div { min-height:118px; padding:18px; border:1px solid #dfe6ee; border-radius:13px; background:#fff; }
.engineer-flow strong,.delivery-flow strong { display:block; margin-top:10px; color:#183451; font-size:18px; }
.engineer-flow small,.delivery-flow small { display:block; margin-top:7px; color:#68798d; font-size:12px; line-height:1.45; }
.flow-arrow { width:34px; height:18px; fill:none; stroke:#6f87a6; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; justify-self:center; flex:0 0 auto; }

.security-spotlight { background:#07142f; color:white; }
.security-spotlight-layout { display:grid; grid-template-columns:.72fr 1fr; gap:48px; align-items:center; }
.security-spotlight-copy h2 { margin:10px 0 0; font-size:clamp(36px,4vw,50px); line-height:1.06; letter-spacing:-.04em; }
.security-spotlight-copy > p { margin:22px 0 0; color:rgba(231,238,255,.74); font-size:16px; line-height:1.7; }
.security-spotlight .eyebrow { color:#79d9c4; }
.security-spotlight .prototype-figure figcaption { color:rgba(230,238,252,.64); }
.security-spotlight .prototype-figure figcaption strong { color:rgba(255,255,255,.84); }
.security-lenses { display:grid; gap:9px; margin-top:25px; }
.security-lenses span { padding:10px 12px; border:1px solid rgba(255,255,255,.10); border-radius:10px; background:rgba(255,255,255,.04); color:rgba(235,241,253,.72); font-size:13px; }
.security-lenses strong { color:#fff; margin-right:6px; }

.accelerator-landscape { background:#f8fafc; }
.landscape-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:48px; }
.landscape-group { padding:28px; border:1px solid #dfe6ee; border-radius:18px; background:#fff; box-shadow:0 15px 44px rgba(18,43,82,.045); }
.landscape-group > span { color:#3867c4; font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.landscape-group h3 { margin:10px 0 22px; color:#17324f; font-size:21px; line-height:1.35; }
.landscape-group ul { display:grid; gap:0; margin:0; padding:0; list-style:none; border-top:1px solid #e3e9f1; }
.landscape-group li { display:grid; grid-template-columns:minmax(170px,.9fr) 1.1fr; gap:18px; padding:14px 0; border-bottom:1px solid #e3e9f1; }
.landscape-group li:last-child { border-bottom:0; }
.landscape-group li strong { color:#203b58; font-size:14px; }
.landscape-group li small { color:#697a8e; font-size:13px; line-height:1.55; }

.accelerator-human-control { background:#fff; }
.human-control-card { display:grid; grid-template-columns:.85fr 1.15fr; gap:50px; align-items:center; padding:42px 46px; border:1px solid #dfe6ee; border-radius:22px; background:linear-gradient(135deg,#f8fbff,#f8fcfb); }
.human-control-card h2 { margin:9px 0 0; font-size:clamp(32px,3.6vw,46px); line-height:1.08; letter-spacing:-.035em; }
.human-control-card p { margin:0; color:#5d6f84; font-size:16px; line-height:1.75; }

@media (max-width:1080px) {
  .role-lens-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .accelerator-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .security-spotlight-layout { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  .accelerator-hero h1 { font-size:clamp(42px,12vw,58px); }
  .accelerator-hero .hero-lead { font-size:18px; }
  .accelerator-intro,.role-section,.accelerator-landscape,.accelerator-human-control,.security-spotlight { padding:68px 0; }
  .role-lens-grid,.accelerator-card-grid,.accelerator-card-grid-engineer,.landscape-grid { grid-template-columns:1fr; }
  .role-lens-card,.accelerator-card { min-height:0; }
  .engineer-flow,.delivery-flow { grid-template-columns:1fr; }
  .flow-arrow { transform:rotate(90deg); justify-self:center; }
  .landscape-group li { grid-template-columns:1fr; gap:5px; }
  .human-control-card { grid-template-columns:1fr; gap:22px; padding:30px 26px; }
  .role-question { align-items:flex-start; flex-direction:column; gap:8px; }
}


.portfolio-map-teams,
.customer-row {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .hero-branch-arrow {
    width: 100%;
  }

  .map-branch-svg {
    width: 100%;
    max-width: 320px;
  }

  .card-arrow-svg {
    width: 30px;
    height: 16px;
  }
}

.inline-arrow-svg{
  width:20px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.35;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 auto;
}

.methodology-link-row a,
.solution-card > a,
.text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.button .inline-arrow-svg{
  width:18px;
  height:13px;
}

/* Supplier repeated-delivery flow: true SVG connectors */
.supplier-page .repeat-pattern .repeat-flow-arrow{
  width:30px;
  height:18px;
  justify-self:center;
  fill:none;
  stroke:#69ad9d;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Research methodology flow: true SVG connectors */
.research-method-arrow{
  width:34px;
  height:18px;
  align-self:center;
  justify-self:center;
  fill:none;
  stroke:#8fa0b3;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (max-width:1080px){
  .research-method-arrow{
    transform:rotate(90deg);
  }
}

@media (max-width:680px){
  .supplier-page .repeat-pattern .repeat-flow-arrow{
    transform:rotate(90deg);
    width:30px;
    height:18px;
    margin:6px auto;
  }
}

.customer-delivery-map .map-branch-svg{
  color:#a5d6c9;
  stroke:currentColor;
}




/* =========================================================
   v54 - Gate 6: Emotional layer
   Targeted emphasis only. No new product claims or content.
   ========================================================= */

/* Landing page: turn the existing problem conclusion into a real pause/statement. */
.challenge .callout {
  position: relative;
  max-width: 980px;
  margin: 56px auto 0;
  padding: 34px 46px 36px;
  overflow: hidden;
  border: 1px solid #d8e2f5;
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% -40%, rgba(75,111,218,.15), transparent 42%),
    linear-gradient(135deg, #f4f7ff 0%, #fbfcff 58%, #f6f8ff 100%);
  box-shadow: 0 22px 52px rgba(24,49,95,.07);
  color: #183256;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.5;
  font-weight: 760;
  letter-spacing: -.015em;
}

.challenge .callout::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6f91e8 25%, #7e72d9 70%, transparent);
  opacity: .72;
}

/* Enterprise / Supplier: stronger consequence beats before the response. */
.enterprise-consequence,
.supplier-economic-consequence {
  position: relative;
  overflow: hidden;
  padding: 36px 40px;
  border: 0;
  box-shadow: 0 24px 60px rgba(18,43,82,.13);
}

.enterprise-consequence {
  background:
    radial-gradient(circle at 95% 140%, rgba(93,143,255,.24), transparent 42%),
    linear-gradient(120deg, #102b5d 0%, #173e75 52%, #173b69 100%);
  color: #fff;
}

.enterprise-consequence span {
  color: #93b7ff;
}

.supplier-economic-consequence {
  background:
    radial-gradient(circle at 96% 140%, rgba(83,221,183,.22), transparent 40%),
    linear-gradient(120deg, #0d3b50 0%, #0c5a5b 52%, #116b58 100%);
  color: #fff;
}

.supplier-economic-consequence span {
  color: #84dfc6;
}

.enterprise-consequence strong,
.supplier-economic-consequence strong {
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.38;
  letter-spacing: -.018em;
}

.enterprise-consequence::after,
.supplier-economic-consequence::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 170px;
  right: -90px;
  bottom: -120px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  transform: rotate(-8deg);
}

/* Accelerators: role lenses should feel distinct without becoming separate products. */
.role-section {
  --role-accent: #5579d6;
  position: relative;
  overflow: hidden;
}

#it-leadership { --role-accent: #4e77da; }
#architecture { --role-accent: #735fd4; }
#engineering-leadership { --role-accent: #2d8a83; }
#delivery-management { --role-accent: #3f7fa7; }
#engineering { --role-accent: #238b70; }

.role-copy {
  position: relative;
  padding-left: 26px;
}

.role-copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 3px;
  border-radius: 999px;
  background: var(--role-accent);
  opacity: .82;
}

.role-section .role-copy .eyebrow {
  color: var(--role-accent);
}

.role-section .role-question {
  border-top-color: color-mix(in srgb, var(--role-accent) 30%, #dfe6ee);
}

.role-section .accelerator-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.role-section .accelerator-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--role-accent) 35%, #dfe6ee);
  box-shadow: 0 16px 38px rgba(18,43,82,.075);
}

/* Give the human-control statement a little more breathing room before the pilot. */
.accelerator-human-control {
  background:
    radial-gradient(circle at 88% 130%, rgba(78,134,225,.09), transparent 34%),
    #fff;
}

.human-control-card {
  box-shadow: 0 20px 54px rgba(18,43,82,.065);
}

/* Pilot cards: retain structure, strengthen the human/final action moment subtly. */
.pilot-card {
  box-shadow: 0 32px 78px rgba(13,45,100,.22);
}

@media (max-width: 760px) {
  .challenge .callout {
    margin-top: 40px;
    padding: 28px 24px;
  }

  .enterprise-consequence,
  .supplier-economic-consequence {
    padding: 30px 26px;
  }

  .role-copy {
    padding-left: 19px;
  }
}


/* =========================================================
   v58 - Mobile primary navigation
   Desktop layout remains unchanged above 1080px.
   ========================================================= */
.mobile-nav-toggle,
.mobile-nav-panel,
.mobile-nav-backdrop {
  display: none;
}

@media (max-width: 1080px) {
  .mobile-nav-toggle {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px;
    outline: none;
    background: rgba(255,255,255,.07);
    color: #fff;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
  }

  .mobile-nav-toggle:hover,
  .mobile-nav-toggle:focus-visible,
  .mobile-nav-toggle[aria-expanded="true"] {
    border-color: rgba(255,255,255,.42);
    background: rgba(255,255,255,.12);
  }

  .mobile-nav-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(87,128,255,.28);
  }

  .mobile-nav-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-nav-icon-close { display: none; }
  .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-icon-menu { display: none; }
  .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-icon-close { display: block; }

  .mobile-nav-backdrop {
    position: fixed;
    z-index: 70;
    top: 82px;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    background: rgba(3,12,29,.46);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  .mobile-nav-panel {
    position: fixed;
    z-index: 80;
    top: 82px;
    right: 0;
    width: min(430px, 100vw);
    height: calc(100dvh - 82px);
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px;
    border-left: 1px solid #dbe3ef;
    background: #fff;
    color: var(--ink);
    box-shadow: -24px 20px 60px rgba(4,18,45,.24);
  }

  .mobile-nav-panel[hidden],
  .mobile-nav-backdrop[hidden] {
    display: none;
  }

  .mobile-nav-content {
    display: grid;
    gap: 5px;
  }

  .mobile-nav-link {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    border-radius: 10px;
    color: #20324e;
    font-size: 15px;
    font-weight: 760;
  }

  .mobile-nav-link:hover,
  .mobile-nav-link:focus-visible,
  .mobile-nav-link[aria-current="page"] {
    outline: none;
    background: #edf3ff;
    color: #244f9f;
  }

  .mobile-nav-group {
    margin: 3px 0;
    padding: 10px;
    border: 1px solid #e1e7f0;
    border-radius: 13px;
    background: #f8fafd;
  }

  .mobile-nav-group-label {
    padding: 3px 5px 8px;
    color: #617089;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .mobile-nav-group-current .mobile-nav-group-label {
    color: #315fae;
  }

  .mobile-nav-sublink {
    display: grid;
    gap: 3px;
    padding: 11px 12px;
    border-radius: 9px;
    color: #243650;
  }

  .mobile-nav-sublink:hover,
  .mobile-nav-sublink:focus-visible,
  .mobile-nav-sublink[aria-current="page"] {
    outline: none;
    background: #e9f0fc;
    color: #173f83;
  }

  .supplier-page .mobile-nav-sublink[aria-current="page"] {
    background: #eaf7f3;
    color: #176b58;
  }

  .mobile-nav-sublink strong {
    font-size: 14px;
    line-height: 1.35;
  }

  .mobile-nav-sublink span {
    color: #6a778b;
    font-size: 12px;
    font-weight: 520;
    line-height: 1.4;
  }

  .mobile-nav-pilot {
    min-height: 50px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2161ff, #395cff);
    color: #fff;
    box-shadow: 0 10px 28px rgba(36,99,255,.22);
    font-size: 14px;
    font-weight: 790;
  }

  .mobile-nav-pilot:hover,
  .mobile-nav-pilot:focus-visible {
    outline: none;
    box-shadow: 0 12px 32px rgba(36,99,255,.3);
  }

  body.mobile-nav-open {
    overflow: hidden;
  }
}

@media (max-width: 760px) {
  .mobile-nav-panel,
  .mobile-nav-backdrop {
    top: 72px;
  }

  .mobile-nav-panel {
    width: 100vw;
    height: calc(100dvh - 72px);
    padding: 12px;
    border-left: 0;
  }

  .mobile-nav-toggle {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}


/* =========================================================
   v59 - Compact mobile section navigation
   ========================================================= */
.mobile-context-nav {
  display: none;
}

@media (max-width: 1050px) {
  .mobile-context-nav {
    position: relative;
    display: block;
    min-width: 0;
  }

  .mobile-context-trigger {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #52627b;
    text-align: left;
    cursor: pointer;
  }

  .mobile-context-trigger:hover,
  .mobile-context-trigger:focus-visible,
  .mobile-context-trigger[aria-expanded="true"] {
    outline: none;
    background: #f2f5fa;
  }

  .mobile-context-trigger:focus-visible {
    box-shadow: 0 0 0 3px rgba(48,92,185,.13);
  }

  .mobile-context-page,
  .mobile-context-current {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-context-page {
    flex: 0 1 auto;
    color: #596982;
    font-size: 12px;
    font-weight: 720;
  }

  .mobile-context-separator {
    flex: 0 0 auto;
    margin: 0 5px;
    color: #a0aabd;
    font-weight: 800;
  }

  .mobile-context-current {
    flex: 0 1 auto;
    color: #18365f;
    font-size: 13px;
    font-weight: 800;
  }

  .supplier-page .mobile-context-current {
    color: #176b58;
  }

  .mobile-context-chevron {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-left: auto;
    fill: none;
    stroke: #6f7e93;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
  }

  .mobile-context-trigger[aria-expanded="true"] .mobile-context-chevron {
    transform: rotate(180deg);
  }

  .mobile-context-menu {
    position: absolute;
    z-index: 55;
    top: calc(100% + 7px);
    left: 0;
    width: min(430px, calc(100vw - 28px));
    max-height: calc(100dvh - var(--solution-fixed-offset) - 18px);
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #dce4ef;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 20px 54px rgba(20,42,79,.18);
  }

  .mobile-context-menu[hidden] {
    display: none;
  }

  .mobile-context-menu-label {
    padding: 3px 6px 8px;
    color: #7a8799;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .mobile-context-menu-list {
    display: grid;
    gap: 3px;
  }

  .mobile-context-menu-list a {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 8px;
    color: #52627b;
    font-size: 13px;
    font-weight: 720;
  }

  .mobile-context-menu-list a:hover,
  .mobile-context-menu-list a:focus-visible,
  .mobile-context-menu-list a[aria-current="location"] {
    outline: none;
    background: #edf3ff;
    color: #244f9f;
  }

  .supplier-page .mobile-context-menu-list a[aria-current="location"] {
    background: #edf9f5;
    color: #176b58;
  }
}

@media (max-width: 760px) {
  .solution-context-inner {
    width: min(calc(100% - 28px), var(--max));
  }

  .mobile-context-trigger {
    padding-inline: 6px;
  }

  .mobile-context-menu {
    width: 100%;
  }
}

@media (max-width: 1050px) and (orientation: landscape) and (max-height: 600px) {
  .mobile-context-menu-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   v62 - Prevent accidental text selection in navigation UI
   ========================================================= */
.language-picker,
.nav-dropdown,
.breadcrumbs,
.solution-section-nav,
.mobile-context-nav,
.mobile-nav-panel,
.mobile-nav-toggle {
  -webkit-user-select: none;
  user-select: none;
}


/* =========================================================
   v63 - Responsiveness pass 1: foundation + Heroes
   Scope: layout foundation and Hero sections only.
   ========================================================= */

/* Landing Hero: stack naturally in portrait / narrow layouts. */
@media (max-width: 900px) {
  body:not(.solution-page) .hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
    align-items: start;
  }

  body:not(.solution-page) .hero-copy,
  body:not(.solution-page) .hero-visual {
    width: 100%;
    max-width: 760px;
  }

  body:not(.solution-page) .hero-visual {
    justify-self: start;
  }
}

/* Mobile portrait foundation. */
@media (max-width: 760px) {
  body:not(.solution-page) .hero {
    padding: calc(var(--global-header-height) + 40px) 0 68px;
  }

  body:not(.solution-page) .hero-grid {
    gap: 38px;
  }

  .hero h1 {
    font-size: clamp(38px, 10.8vw, 50px);
    line-height: 1.02;
  }

  .hero-lead,
  .enterprise-hero-content .hero-lead,
  .supplier-hero-content .hero-lead,
  .accelerator-hero .hero-lead {
    margin-top: 24px;
    font-size: 17px;
    line-height: 1.62;
  }

  .hero-actions {
    margin-top: 28px;
  }

  .hero-principles {
    margin-top: 28px;
    font-size: 13px;
  }

  /* Keep the foundation compact; branch groups still stack below it. */
  body:not(.solution-page) .hero-visual {
    padding: 18px;
    border-radius: 20px;
  }

  body:not(.solution-page) .foundation-panel {
    padding: 17px;
  }

  body:not(.solution-page) .foundation-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body:not(.solution-page) .foundation-items span {
    padding: 10px 8px;
    font-size: 12px;
    line-height: 1.35;
  }

  body:not(.solution-page) .visual-branch {
    padding: 14px;
  }

  /* Dark solution Heroes: slightly tighter once header + context nav are fixed. */
  .solution-content--hero-underlay > .solution-hero {
    --solution-hero-top-space: 34px;
    padding-bottom: 64px;
  }

  .enterprise-hero-content h1,
  .supplier-hero-content h1 {
    font-size: clamp(38px, 10.8vw, 50px);
    line-height: 1.02;
  }

  .accelerator-hero h1 {
    font-size: clamp(38px, 10.5vw, 48px);
    line-height: 1.02;
  }

  /* Publication Hero follows the same mobile spacing rhythm. */
  .research-page .research-publication-hero {
    min-height: auto;
    padding: 42px 0 52px;
  }

  .research-publication-hero h1 {
    font-size: clamp(36px, 10.2vw, 46px);
    line-height: 1.04;
  }

  .research-lead {
    margin-top: 24px;
    font-size: 17px;
    line-height: 1.62;
  }
}

/* Very narrow phones: protect typography without shrinking body copy excessively. */
@media (max-width: 380px) {
  .container {
    width: min(calc(100% - 28px), var(--max));
  }

  .hero h1,
  .enterprise-hero-content h1,
  .supplier-hero-content h1 {
    font-size: clamp(36px, 10.7vw, 40px);
  }

  .accelerator-hero h1 {
    font-size: clamp(36px, 10.4vw, 40px);
  }

  .research-publication-hero h1 {
    font-size: clamp(34px, 9.8vw, 38px);
  }

  .hero-lead,
  .enterprise-hero-content .hero-lead,
  .supplier-hero-content .hero-lead,
  .accelerator-hero .hero-lead,
  .research-lead {
    font-size: 16.5px;
  }
}

/* Low-height landscape: use the width instead of spending it on vertical whitespace. */
@media (max-width: 1050px) and (orientation: landscape) and (max-height: 600px) {
  body:not(.solution-page) .hero {
    min-height: auto;
    padding: 112px 0 44px;
  }

  body:not(.solution-page) .hero-grid {
    grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
    gap: 34px;
    align-items: center;
  }

  body:not(.solution-page) .hero h1 {
    font-size: clamp(38px, 4.7vw, 46px);
  }

  body:not(.solution-page) .hero-lead {
    margin-top: 18px;
    font-size: 15.5px;
    line-height: 1.52;
  }

  body:not(.solution-page) .hero-actions {
    margin-top: 22px;
  }

  body:not(.solution-page) .hero-principles {
    margin-top: 22px;
    gap: 8px 18px;
    font-size: 12px;
  }

  body:not(.solution-page) .hero-visual {
    padding: 14px;
    border-radius: 18px;
  }

  body:not(.solution-page) .foundation-panel {
    padding: 14px;
  }

  body:not(.solution-page) .foundation-items {
    margin-top: 10px;
    gap: 7px;
  }

  body:not(.solution-page) .foundation-items span {
    padding: 8px 7px;
    font-size: 11px;
  }

  body:not(.solution-page) .visual-arrow {
    margin: 5px 0 4px;
  }

  body:not(.solution-page) .hero-flow-arrow {
    width: 26px;
    height: 26px;
  }

  body:not(.solution-page) .production-pill {
    margin-bottom: 10px;
    padding: 7px 12px;
    font-size: 11px;
  }

  body:not(.solution-page) .visual-branch {
    padding: 11px;
  }

  body:not(.solution-page) .visual-label,
  body:not(.solution-page) .branch-title {
    font-size: 11px;
  }

  body:not(.solution-page) .mini-grid {
    margin-top: 8px;
  }

  body:not(.solution-page) .mini-grid div {
    min-height: 44px;
    font-size: 11px;
  }

  /* Dark solution Heroes */
  .solution-content--hero-underlay > .solution-hero {
    --solution-hero-top-space: 24px;
    min-height: auto !important;
    padding-bottom: 44px;
  }

  .enterprise-hero-content h1,
  .supplier-hero-content h1,
  .accelerator-hero h1 {
    font-size: clamp(38px, 4.8vw, 46px);
    line-height: 1.02;
  }

  .enterprise-hero-content .hero-lead,
  .supplier-hero-content .hero-lead,
  .accelerator-hero .hero-lead {
    margin-top: 18px;
    font-size: 15.5px;
    line-height: 1.52;
  }

  .enterprise-hero-actions,
  .supplier-hero-actions,
  .accelerator-hero .hero-actions {
    margin-top: 22px;
  }

  .enterprise-hero-principles,
  .supplier-hero-principles,
  .accelerator-hero .hero-principles {
    margin-top: 20px;
    gap: 8px 18px;
    font-size: 12px;
  }

  .solution-hero .button {
    min-height: 44px;
    padding-inline: 18px;
    font-size: 14px;
  }

  /* Research Hero is light and starts below the fixed navigation. */
  .research-page .research-publication-hero {
    min-height: auto;
    padding: 28px 0 34px;
  }

  .research-publication-hero h1 {
    font-size: clamp(34px, 4.5vw, 42px);
    line-height: 1.04;
  }

  .research-lead {
    margin-top: 18px;
    max-width: 900px;
    font-size: 15.5px;
    line-height: 1.55;
  }

  .research-kicker {
    margin-bottom: 12px;
    font-size: 11px;
  }
}


/* =========================================================
   v65 - Responsiveness pass 2: Cards and grids
   Scope: card/grid geometry only.
   Diagrams, product visuals, pilot and footer are unchanged.
   ========================================================= */

/* Medium tablet: keep useful card density without narrow 3-column cards. */
@media (max-width: 900px) and (min-width: 681px) {
  .three-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .segment-impact-grid,
  .why-works-grid,
  .fit-grid,
  .supplier-pain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Accelerator cards: keep two columns on tablets. */
@media (max-width: 760px) and (min-width: 681px) {
  .role-lens-grid,
  .accelerator-card-grid,
  .accelerator-card-grid-engineer,
  .landscape-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .principle-card,
  .impact-card {
    padding: 28px;
  }

  .fit-card {
    min-height: 0;
    padding: 24px;
  }
}

/* Phones / narrow viewports: one readable card per row. */
@media (max-width: 680px) {
  .four-grid,
  .three-grid,
  .two-grid,
  .segment-impact-grid,
  .why-works-grid,
  .fit-grid,
  .supplier-pain-grid,
  .role-lens-grid,
  .accelerator-card-grid,
  .accelerator-card-grid-engineer,
  .landscape-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .four-grid,
  .three-grid,
  .two-grid {
    gap: 16px;
  }

  /* Landing cards */
  .principle-card,
  .impact-card {
    min-height: 0;
    padding: 26px;
    border-radius: 18px;
  }

  .impact-label {
    margin-bottom: 22px;
  }

  .solution-card {
    min-height: 0;
    padding: 28px;
    border-radius: 20px;
  }

  .solution-card h3 {
    font-size: 24px;
    line-height: 1.22;
  }

  .solution-card a {
    position: static;
    margin-top: 26px;
  }

  /* Enterprise / Software Provider cards */
  .enterprise-friction {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    padding: 21px 22px;
  }

  .response-principle,
  .supplier-pain,
  .fit-card,
  .why-works-card {
    min-height: 0;
    padding: 22px;
  }

  .segment-impact-card {
    min-height: 0;
    padding: 24px;
  }

  .segment-impact-card h3 {
    margin-top: 28px;
    font-size: 23px;
  }

  .segment-impact-value {
    font-size: 42px;
  }

  /* Accelerator cards */
  .role-lens-card,
  .accelerator-card {
    min-height: 0;
  }

  .role-lens-card {
    padding: 20px;
  }

  .accelerator-card {
    padding: 19px 20px;
  }

  .landscape-group {
    padding: 22px;
  }
}


/* =========================================================
   v66 - Responsive card density refinement
   - phones: less card padding / tighter gaps
   - low-height landscape: compressed card layout
   - FASAPP approach: 3 columns again in landscape
   ========================================================= */

/* Phone portrait / narrow mobile: retain readability, remove excess air. */
@media (max-width: 680px) {
  .four-grid,
  .three-grid,
  .two-grid,
  .segment-impact-grid,
  .why-works-grid,
  .fit-grid,
  .supplier-pain-grid,
  .role-lens-grid,
  .accelerator-card-grid,
  .accelerator-card-grid-engineer,
  .landscape-grid {
    gap: 13px;
  }

  .principle-card,
  .impact-card {
    padding: 21px;
    border-radius: 16px;
  }

  .impact-label {
    margin-bottom: 17px;
  }

  .solution-card {
    padding: 23px;
    border-radius: 18px;
  }

  .solution-card h3 {
    font-size: 23px;
  }

  .solution-card a {
    margin-top: 21px;
  }

  .enterprise-friction {
    gap: 12px;
    padding: 18px 19px;
    border-radius: 14px;
  }

  .response-principle,
  .supplier-pain,
  .fit-card,
  .why-works-card {
    padding: 19px;
    border-radius: 14px;
  }

  .segment-impact-card {
    padding: 20px;
    border-radius: 16px;
  }

  .segment-impact-card h3 {
    margin-top: 22px;
    font-size: 22px;
  }

  .segment-impact-value {
    font-size: 39px;
  }

  .role-lens-card {
    padding: 18px;
    border-radius: 15px;
  }

  .accelerator-card {
    padding: 17px 18px;
    border-radius: 13px;
  }

  .landscape-group {
    padding: 19px;
    border-radius: 15px;
  }
}

/* Low-height landscape: consciously trade whitespace for usable content density. */
@media (max-width: 1050px) and (orientation: landscape) and (max-height: 600px) {
  .section {
    padding: 52px 0;
  }

  .section-heading {
    margin-bottom: 30px;
  }

  .four-grid,
  .three-grid,
  .two-grid,
  .segment-impact-grid,
  .why-works-grid,
  .fit-grid,
  .supplier-pain-grid,
  .role-lens-grid,
  .accelerator-card-grid,
  .accelerator-card-grid-engineer,
  .landscape-grid {
    gap: 14px;
  }

  /* The FASAPP approach benefits from using the available landscape width. */
  .approach .three-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .approach .principle-card {
    min-height: 0;
    padding: 21px;
    border-radius: 15px;
  }

  .principle-card,
  .impact-card {
    min-height: 0;
    padding: 21px;
    border-radius: 15px;
  }

  .impact-label {
    margin-bottom: 18px;
  }

  .enterprise-friction {
    gap: 12px;
    padding: 18px 20px;
    border-radius: 14px;
  }

  .response-principle,
  .supplier-pain,
  .fit-card,
  .why-works-card {
    min-height: 0;
    padding: 19px 20px;
    border-radius: 14px;
  }

  .segment-impact-card {
    min-height: 0;
    padding: 21px;
    border-radius: 16px;
  }

  .segment-impact-card h3 {
    margin-top: 22px;
    font-size: 22px;
  }

  .segment-impact-value {
    font-size: 40px;
  }

  .role-lens-card,
  .accelerator-card {
    min-height: 0;
  }

  .role-lens-card {
    padding: 18px;
    border-radius: 15px;
  }

  .accelerator-card {
    padding: 17px 18px;
    border-radius: 13px;
  }

  .landscape-group {
    padding: 19px;
    border-radius: 15px;
  }
}


/* =========================================================
   v67 - Mobile card and pilot refinements
   ========================================================= */

/* Solution cards: prevent CTA overlap in low-height mobile landscape. */
@media (max-width: 1050px) and (orientation: landscape) and (max-height: 600px) {
  .solutions .two-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solution-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 22px;
    border-radius: 18px;
  }

  .solution-card h3 {
    font-size: 22px;
    line-height: 1.22;
  }

  .solution-card p {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.45;
  }

  .solution-card a {
    position: static;
    left: auto;
    bottom: auto;
    margin-top: auto;
    padding-top: 14px;
    font-size: 15px;
    line-height: 1.35;
  }
}

/* Pilot cards: centre the CTA on phone portrait. */
@media (max-width: 680px) and (orientation: portrait) {
  .pilot-action,
  .pilot-card-wide .pilot-action {
    justify-self: center;
    align-self: center;
  }
}

/* Pilot cards: restore a compact side-by-side layout for low-height mobile landscape. */
@media (max-width: 1050px) and (orientation: landscape) and (max-height: 600px) {
  .pilot-card {
    grid-template-columns: minmax(270px, .92fr) minmax(0, 1.28fr) auto;
    gap: 24px;
    align-items: center;
    padding: 30px;
    border-radius: 24px;
  }

  .pilot-card h2,
  .pilot-card-wide .pilot-title-row h2 {
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.08;
  }

  .pilot-copy {
    align-self: center;
  }

  .pilot-copy p,
  .pilot-card-wide .pilot-copy p {
    max-width: none;
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.45;
  }

  .pilot-steps {
    gap: 16px 20px;
    align-self: center;
  }

  .pilot-step strong {
    font-size: 14px;
    line-height: 1.35;
  }

  .pilot-step small,
  .pilot-step .pilot-step-description {
    font-size: 13px;
    line-height: 1.3;
  }

  .pilot-action {
    justify-self: end;
    align-self: center;
  }

  .pilot-card-wide {
    display: grid;
    grid-template-columns: minmax(270px, .92fr) minmax(0, 1.28fr) auto;
    grid-template-areas:
      "eyebrow eyebrow eyebrow"
      "title steps action"
      "copy steps action";
    gap: 10px 24px;
    align-items: center;
  }

  .pilot-card-wide .pilot-eyebrow-row {
    grid-area: eyebrow;
  }

  .pilot-card-wide .pilot-title-row {
    grid-area: title;
    align-self: end;
    margin: 0;
  }

  .pilot-card-wide .pilot-content-grid,
  .pilot-card-wide .pilot-delivery {
    display: contents;
  }

  .pilot-card-wide .pilot-copy {
    grid-area: copy;
    min-width: 0;
    align-self: start;
  }

  .pilot-card-wide .pilot-steps {
    grid-area: steps;
    align-self: center;
  }

  .pilot-card-wide .pilot-action {
    grid-area: action;
    justify-self: end;
    align-self: center;
  }
}

/* Slightly more compact landscape pilot layout for narrow phones. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 460px) {
  .pilot-card,
  .pilot-card-wide {
    grid-template-columns: minmax(230px, .9fr) minmax(0, 1.24fr) auto;
    gap: 10px 20px;
    padding: 26px;
  }

  .pilot-card h2,
  .pilot-card-wide .pilot-title-row h2 {
    font-size: clamp(22px, 3.8vw, 30px);
  }

  .pilot-copy p,
  .pilot-card-wide .pilot-copy p {
    font-size: 14px;
    line-height: 1.4;
  }

  .pilot-step > span,
  .pilot-step > .pilot-step-number {
    width: 28px;
    height: 28px;
  }

  .pilot-step strong {
    font-size: 13.5px;
  }

  .pilot-step small,
  .pilot-step .pilot-step-description {
    font-size: 12.5px;
  }
}


/* =========================================================
   v69 - Responsiveness pass 3: diagrams and abstract models
   Scope: portfolio/customer models and simple process flows.
   Product Visual screenshots remain unchanged.
   ========================================================= */

/* Preserve the semantic three-way branch on phone layouts. */
@media (max-width: 760px) {
  .portfolio-map-teams,
  .portfolio-map-apps,
  .customer-row,
  .customer-app-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portfolio-map,
  .customer-delivery-map {
    padding: 20px;
    border-radius: 18px;
  }

  .portfolio-map-title {
    margin-bottom: 16px;
    font-size: 11px;
  }

  .portfolio-map-foundation,
  .supplier-map-foundation {
    padding: 13px 10px;
    font-size: 12px;
  }

  .portfolio-map-branch {
    margin: 5px auto 6px;
  }

  .portfolio-map-teams,
  .portfolio-map-apps,
  .customer-row,
  .customer-app-columns {
    gap: 7px;
  }

  .portfolio-map-teams {
    margin-bottom: 8px;
  }

  .customer-row {
    margin-bottom: 10px;
  }

  .portfolio-map-teams span,
  .portfolio-map-apps span,
  .customer-row span,
  .customer-app-columns span {
    min-height: 44px;
    padding: 6px 4px;
    font-size: 11.5px;
  }

  .customer-app-columns > div {
    gap: 6px;
  }

  .portfolio-map-caption {
    margin-top: 16px;
    font-size: 11.5px;
    line-height: 1.45;
  }

  .engineer-flow,
  .delivery-flow {
    gap: 7px;
    padding: 16px;
    border-radius: 15px;
  }

  .engineer-flow > div,
  .delivery-flow > div {
    min-height: 0;
    padding: 13px 15px;
    border-radius: 11px;
  }

  .engineer-flow strong,
  .delivery-flow strong {
    margin-top: 0;
    font-size: 16px;
  }

  .engineer-flow small,
  .delivery-flow small {
    margin-top: 5px;
  }

  .flow-arrow {
    width: 26px;
    height: 14px;
  }

  .supplier-page .repeat-pattern {
    margin: 30px 0 30px;
    padding: 14px;
    border-radius: 15px;
  }

  .supplier-page .repeat-pattern .repeat-step {
    min-height: 46px;
    padding: 9px 10px;
  }

  .supplier-page .repeat-pattern .repeat-flow-arrow {
    margin: 3px auto;
  }
}

/* Low-height landscape: use horizontal space for models instead of stacking everything. */
@media (max-width: 1050px) and (orientation: landscape) and (max-height: 600px) {
  .portfolio-layout,
  .customer-delivery-layout {
    grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
    gap: 30px;
    align-items: center;
  }

  .portfolio-copy h2,
  .customer-delivery-copy h2 {
    font-size: clamp(28px, 3.4vw, 36px);
    line-height: 1.06;
  }

  .portfolio-copy .section-intro,
  .customer-delivery-copy .section-intro {
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.5;
  }

  .portfolio-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-top: 22px;
  }

  .portfolio-points > div {
    padding-left: 12px;
  }

  .portfolio-points strong {
    font-size: 14px;
  }

  .portfolio-points span {
    font-size: 12.5px;
    line-height: 1.4;
  }

  .portfolio-map,
  .customer-delivery-map {
    padding: 20px;
    border-radius: 18px;
  }

  .portfolio-map-title {
    margin-bottom: 14px;
    font-size: 10.5px;
  }

  .portfolio-map-foundation,
  .supplier-map-foundation {
    padding: 11px;
    font-size: 11.5px;
  }

  .portfolio-map-branch {
    margin: 4px auto 5px;
  }

  .portfolio-map-teams span,
  .portfolio-map-apps span,
  .customer-row span,
  .customer-app-columns span {
    min-height: 40px;
    font-size: 11px;
  }

  .portfolio-map-caption {
    margin-top: 13px;
    font-size: 11px;
  }

  .supplier-page .repeat-pattern {
    grid-template-columns:
      minmax(0, 1fr) 26px
      minmax(0, 1fr) 26px
      minmax(0, 1fr) 26px
      minmax(0, 1fr) 26px
      minmax(0, 1fr);
    margin: 26px 0 28px;
    padding: 14px;
    border-radius: 15px;
  }

  .supplier-page .repeat-pattern .repeat-step {
    min-height: 48px;
    padding: 8px 7px;
    font-size: 12px;
  }

  .supplier-page .repeat-pattern .repeat-flow-arrow {
    width: 24px;
    height: 14px;
    margin: 0;
    transform: none;
  }

  .engineer-flow,
  .delivery-flow {
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
    gap: 7px;
    padding: 15px;
    border-radius: 15px;
  }

  .engineer-flow > div,
  .delivery-flow > div {
    min-height: 74px;
    padding: 11px 12px;
  }

  .engineer-flow strong,
  .delivery-flow strong {
    margin-top: 0;
    font-size: 15px;
  }

  .engineer-flow small,
  .delivery-flow small {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.35;
  }

  .flow-arrow {
    width: 24px;
    height: 14px;
    transform: none;
  }
}

/* At the narrow end of phone portrait, make sure the 3-way model still fits cleanly. */
@media (max-width: 380px) {
  .portfolio-map,
  .customer-delivery-map {
    padding: 16px;
  }

  .portfolio-map-teams,
  .portfolio-map-apps,
  .customer-row,
  .customer-app-columns {
    gap: 5px;
  }

  .portfolio-map-teams span,
  .portfolio-map-apps span,
  .customer-row span,
  .customer-app-columns span {
    min-height: 41px;
    font-size: 10.5px;
  }
}


/* =========================================================
   v70 - Responsiveness pass 4: Product Visuals
   Keep product UI readable on narrow phones without page overflow.
   ========================================================= */

.prototype-scroll {
  width: 100%;
  min-width: 0;
}

@media (max-width: 680px) {
  .prototype-figure {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-top: 6px;
  }

  .prototype-scroll {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding: 0 0 10px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(84,104,137,.38) transparent;
  }

  .prototype-scroll::-webkit-scrollbar {
    height: 6px;
  }

  .prototype-scroll::-webkit-scrollbar-track {
    background: transparent;
  }

  .prototype-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(84,104,137,.32);
  }

  .prototype-scroll:focus-visible {
    outline: 3px solid rgba(48,92,185,.22);
    outline-offset: 4px;
    border-radius: 18px;
  }

  .prototype-figure img {
    width: 620px;
    max-width: none;
    height: auto;
    box-shadow: none;
  }

  .security-spotlight .prototype-scroll {
    scrollbar-color: rgba(222,232,250,.35) transparent;
  }

  .security-spotlight .prototype-scroll::-webkit-scrollbar-thumb {
    background: rgba(222,232,250,.30);
  }
}

/* Landscape has enough width: render the complete visual normally. */
@media (max-width: 1050px) and (orientation: landscape) and (max-height: 600px) {
  .prototype-figure {
    width: 100%;
    max-width: 720px;
  }

  .prototype-scroll {
    overflow: visible;
    padding-bottom: 0;
  }

  .prototype-figure img {
    width: 100%;
    max-width: 100%;
    box-shadow: 0 24px 65px rgba(16,41,80,.11);
  }
}


/* =========================================================
   v71 - Product Visual horizontal-scroll affordance
   ========================================================= */
.prototype-scroll-hint {
  display: none;
}

@media (max-width: 680px) {
  .prototype-scroll-hint {
    min-height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: -2px 0 2px;
    color: #738198;
    font-size: 11.5px;
    font-weight: 720;
    letter-spacing: .01em;
    line-height: 1;
    -webkit-user-select: none;
    user-select: none;
  }

  .prototype-scroll-cue {
    flex: 0 0 auto;
    color: #8a97aa;
    font-size: 18px;
    font-weight: 500;
    line-height: .8;
  }

  .prototype-scroll-hint.is-unneeded {
    display: none;
  }

  .security-spotlight .prototype-scroll-hint {
    color: rgba(224,233,248,.68);
  }

  .security-spotlight .prototype-scroll-cue {
    color: rgba(224,233,248,.58);
  }
}

@media (max-width: 1050px) and (orientation: landscape) and (max-height: 600px) {
  .prototype-scroll-hint {
    display: none;
  }
}


/* =========================================================
   v74 - Final responsive pass: Pilot, footer, breakpoint polish
   ========================================================= */

/* Footer: avoid tall sparse stacks on phones while preserving readable tap targets. */
@media (max-width: 680px) {
  .site-footer {
    padding-top: 38px;
    padding-bottom: 28px;
  }

  .footer-grid {
    gap: 28px;
  }

  .footer-links {
    gap: 24px;
  }

  .footer-links h4 {
    margin-bottom: 10px;
  }

  .footer-links a {
    line-height: 1.45;
  }

  .footer-bottom {
    margin-top: 28px;
    padding-top: 18px;
    gap: 10px;
  }
}

/* Very narrow phones: keep the footer information dense but not cramped. */
@media (max-width: 420px) {
  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px;
  }

  .footer-bottom {
    align-items: flex-start;
  }
}

/* Low-height landscape: use width and reduce vertical chrome. */
@media (max-width: 1050px) and (orientation: landscape) and (max-height: 600px) {
  .site-footer {
    padding-top: 34px;
    padding-bottom: 24px;
  }

  .footer-grid {
    grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
    gap: 28px;
    align-items: start;
  }

  .footer-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .footer-bottom {
    margin-top: 24px;
    padding-top: 16px;
  }

  /* The wide Pilot variants already use landscape width; tighten only the surrounding rhythm. */
  .pilot-wrap {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .pilot-card-wide .pilot-eyebrow-row .eyebrow {
    margin-bottom: 10px;
  }

  .pilot-card-wide {
    min-height: 0;
  }

  .pilot-card-wide .pilot-copy p {
    margin-top: 8px;
  }
}

/* Prevent tiny-screen button overflow while keeping buttons comfortably tappable. */
@media (max-width: 380px) {
  .button,
  .button-light {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  .pilot-action {
    width: 100%;
  }

  .pilot-action .button {
    width: min(100%, 220px);
    justify-content: center;
  }
}


/* =========================================================
   v75 - Mobile background arc refinement
   Preserve desktop-like broad ellipse geometry on narrow screens.
   ========================================================= */

@media (max-width: 1050px) {
  /* Hero ring: desktop is a very wide, shallow ellipse.
     Keep that relationship instead of letting viewport width make it circular. */
  .hero::after {
    left: calc(50% - 850px);
    right: auto;
    bottom: -160px;
    width: 1700px;
    height: 330px;
  }

  /* Pilot arc: preserve the broad desktop ellipse and its ~65% horizontal center. */
  .pilot-card::before {
    inset: auto auto -120px calc(65% - 500px);
    width: 1000px;
    height: 240px;
    border-radius: 50%;
    transform: rotate(-4deg);
  }
}

@media (max-width: 420px) {
  /* On the narrowest phones a slightly wider ellipse keeps the arc especially calm. */
  .hero::after {
    left: calc(50% - 900px);
    width: 1800px;
  }

  .pilot-card::before {
    inset: auto auto -120px calc(65% - 530px);
    width: 1060px;
  }
}


/* =========================================================
   v81 - Differentiate hover from selected state in menus
   ========================================================= */
.nav-dropdown-menu .nav-solution-link {
  position: relative;
  padding-right: 48px;
}

.nav-dropdown-menu .nav-solution-link::before,
.language-option::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: #5f91ff;
  opacity: 0;
  transform: translateY(-50%);
  transition:
    opacity .15s ease,
    width .15s ease,
    height .15s ease,
    top .15s ease,
    bottom .15s ease,
    transform .15s ease,
    border-radius .15s ease;
}

.nav-dropdown-menu .nav-solution-link:hover::before,
.nav-dropdown-menu .nav-solution-link:focus-visible::before,
.language-option:hover::before,
.language-option:focus-visible::before {
  opacity: .9;
}

.nav-dropdown-menu .nav-solution-link.is-current {
  background: #e7f0ff;
  border-color: #c9d9fb;
  color: #173f83;
}

.nav-dropdown-menu .nav-solution-link.is-current::before,
.language-option[aria-checked="true"]::before {
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  height: auto;
  border-radius: 999px;
  opacity: 1;
  transform: none;
}

.nav-dropdown-menu .nav-solution-check {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #dce9ff;
  color: #245ec7;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

.nav-dropdown-menu .nav-solution-link.is-current:hover,
.nav-dropdown-menu .nav-solution-link.is-current:focus-visible {
  background: #dce9ff;
  border-color: #bbcff9;
}

.supplier-page .nav-dropdown-menu .nav-solution-link.is-current {
  background: #e7f8f3;
  border-color: #c8eadf;
  color: #17675c;
}

.supplier-page .nav-dropdown-menu .nav-solution-link.is-current::before {
  background: #49c8a4;
}

.supplier-page .nav-dropdown-menu .nav-solution-check {
  background: #d3f1e9;
  color: #15947f;
}

.supplier-page .nav-dropdown-menu .nav-solution-link.is-current:hover,
.supplier-page .nav-dropdown-menu .nav-solution-link.is-current:focus-visible {
  background: #ddf4ee;
  border-color: #bce7da;
}

.enterprise-page .nav-dropdown-menu .nav-solution-link.is-current,
.enterprise-page .nav-dropdown-menu .nav-solution-link.is-current strong {
  color: #173f83;
}

.enterprise-page .nav-dropdown-menu .nav-solution-link.is-current span:not(.nav-solution-check) {
  color: #5f708a;
}

.nav-dropdown-menu .nav-solution-link,
.nav-dropdown-menu .nav-solution-link:first-child,
.nav-dropdown-menu .nav-solution-link + .nav-solution-link {
  border-top: 0;
  border-bottom: 0;
}

.site-header .desktop-nav .nav-dropdown-menu a[aria-current="page"]::after,
.site-header .desktop-nav .nav-dropdown-menu .nav-solution-link.is-current::after {
  content: none;
}

/* =========================================================
   v83 - Desktop nav interaction polish + keyboard focus alignment
   ========================================================= */
.site-header .desktop-nav > a,
.site-header .desktop-nav > .nav-dropdown > .nav-dropdown-trigger {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.site-header .desktop-nav > a:hover,
.site-header .desktop-nav > .nav-dropdown > .nav-dropdown-trigger:hover,
.site-header .desktop-nav > .nav-dropdown.is-open > .nav-dropdown-trigger {
  color: #ffffff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

.site-header .desktop-nav > a:focus-visible,
.site-header .desktop-nav > .nav-dropdown > .nav-dropdown-trigger:focus-visible {
  outline: none;
  color: #ffffff;
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 0 0 3px rgba(87,128,255,.28);
}

.site-header .desktop-nav > a[aria-current="page"],
.site-header .desktop-nav > .nav-dropdown > .nav-dropdown-trigger.is-current {
  color: #ffffff;
}

.site-header .desktop-nav > a[aria-current="page"]::after,
.site-header .desktop-nav > .nav-dropdown > .nav-dropdown-trigger.is-current::after {
  left: 10px;
  right: 10px;
  bottom: -10px;
}

.nav-dropdown-trigger:focus-visible {
  outline: none;
  box-shadow: none;
}

/* local section nav: use inset focus ring so it is never clipped by the scroll container */
.solution-section-nav a:focus-visible {
  outline: none;
  color: var(--ink);
  background: #f2f5fa;
  box-shadow: inset 0 0 0 2px rgba(48,92,185,.78);
}

.solution-section-nav a.is-active:focus-visible {
  color: #244f9f;
  background: #edf3ff;
  box-shadow: inset 0 0 0 2px #2f6bde;
}

.supplier-page .solution-section-nav a.is-active:focus-visible {
  color: #176b58;
  background: #edf9f5;
  box-shadow: inset 0 0 0 2px #24a07d;
}


/* =========================================================
   v84 - Legal / corporate document page foundation
   Research-publication language, reduced for linear legal content.
   ========================================================= */
.legal-page {
  background: #ffffff;
}

.legal-page .legal-context-inner {
  grid-template-columns: 1fr;
}

.legal-page .legal-publication-hero {
  min-height: 360px;
  padding: 58px 0;
}

.legal-publication-shell,
.legal-document-shell {
  max-width: 920px;
}

.legal-page .legal-publication-hero h1 {
  max-width: 760px;
}

.legal-lead {
  max-width: 700px;
}

.legal-document-section {
  padding: 88px 0 104px;
  background: #ffffff;
}

.legal-document-heading {
  max-width: 760px;
  margin-bottom: 46px;
}

.legal-document-heading h2 {
  margin: 0;
  color: #132943;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.legal-document-heading p {
  max-width: 700px;
  margin: 18px 0 0;
  color: #596a80;
  font-size: 17px;
  line-height: 1.7;
}

.legal-fact-list {
  margin: 0;
  border-top: 1px solid #dfe6ee;
}

.legal-fact-row {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  gap: 34px;
  margin: 0;
  padding: 28px 0;
  border-bottom: 1px solid #e8edf3;
}

.legal-fact-row dt,
.legal-fact-row dd {
  margin: 0;
}

.legal-fact-row dt {
  color: #586a82;
  font-size: 14px;
  font-weight: 780;
}

.legal-fact-row dd {
  color: #263a55;
  font-size: 16px;
  line-height: 1.7;
}

.legal-fact-row dd strong {
  color: #122b49;
  font-weight: 780;
}

.legal-inline-link {
  color: #245ec7;
  font-weight: 720;
  text-decoration: underline;
  text-decoration-color: rgba(36,94,199,.28);
  text-underline-offset: 4px;
  transition: color .15s ease, text-decoration-color .15s ease;
}

.legal-inline-link:hover,
.legal-inline-link:focus-visible {
  color: #173f83;
  text-decoration-color: currentColor;
}

.legal-inline-link:focus-visible {
  outline: 2px solid rgba(48,92,185,.5);
  outline-offset: 4px;
  border-radius: 3px;
}

@media (max-width: 1050px) {
  .legal-page .legal-breadcrumbs {
    display: flex;
    min-width: 0;
    overflow: hidden;
  }

  .legal-page .legal-context-inner {
    display: flex;
    align-items: center;
  }
}

@media (max-width: 760px) {
  .legal-page .legal-publication-hero {
    min-height: 300px;
    padding: 42px 0;
  }

  .legal-document-section {
    padding: 62px 0 76px;
  }

  .legal-document-heading {
    margin-bottom: 34px;
  }

  .legal-document-heading p {
    font-size: 16px;
  }

  .legal-fact-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 23px 0;
  }

  .legal-fact-row dt {
    font-size: 13px;
  }

  .legal-fact-row dd {
    font-size: 15px;
  }
}


/* =========================================================
   v87 - Long-form legal document layout
   ========================================================= */
.legal-terms-shell {
  max-width: 920px;
}

.legal-terms-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 54px;
  padding-bottom: 30px;
  border-bottom: 1px solid #dfe6ee;
}

.legal-terms-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #dbe4f0;
  border-radius: 9px;
  background: #f8fafc;
  color: #334a68;
  font-size: 13px;
  font-weight: 760;
  text-decoration: none;
}

.legal-terms-jump a:hover,
.legal-terms-jump a:focus-visible {
  outline: none;
  border-color: #b8ccee;
  background: #edf3ff;
  color: #244f9f;
}

.legal-terms-jump a:focus-visible {
  box-shadow: 0 0 0 3px rgba(48,92,185,.15);
}

.legal-terms-group {
  scroll-margin-top: calc(var(--solution-fixed-offset) + 24px);
}

.legal-terms-group + .legal-terms-group {
  margin-top: 84px;
}

.legal-terms-group-heading {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid #cfd9e6;
}

.legal-terms-group-heading > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #edf3ff;
  color: #244f9f;
  font-size: 14px;
  font-weight: 850;
}

.legal-terms-group-heading h2 {
  margin: 0;
  color: #132943;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.legal-clause {
  scroll-margin-top: calc(var(--solution-fixed-offset) + 24px);
  padding: 30px 0 34px;
  border-bottom: 1px solid #e8edf3;
}

.legal-clause h3 {
  margin: 0 0 20px;
  color: #183250;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -.01em;
}

.legal-clause h3 span {
  color: #315fae;
}

.legal-numbered-list {
  margin: 0;
  padding-left: 1.65rem;
  color: #344a65;
}

.legal-numbered-list > li {
  padding-left: .35rem;
}

.legal-numbered-list > li + li {
  margin-top: 18px;
}

.legal-numbered-list p {
  margin: 0;
  color: #344a65;
  font-size: 15.5px;
  line-height: 1.75;
}

.legal-numbered-list p + p {
  margin-top: 10px;
}

.legal-bullet-list {
  margin: 12px 0 0;
  padding-left: 1.25rem;
}

.legal-bullet-list li {
  color: #344a65;
  font-size: 15.5px;
  line-height: 1.7;
}

.legal-bullet-list li + li {
  margin-top: 8px;
}

.legal-subclause {
  margin-top: 26px;
  padding: 22px 24px;
  border: 1px solid #e1e7ef;
  border-radius: 14px;
  background: #fbfcfe;
}

.legal-subclause + .legal-subclause {
  margin-top: 16px;
}

.legal-subclause h4 {
  margin: 0 0 16px;
  color: #213b5b;
  font-size: 16px;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .legal-terms-jump {
    margin-bottom: 38px;
    padding-bottom: 24px;
  }

  .legal-terms-jump a {
    min-height: 40px;
    padding-inline: 12px;
  }

  .legal-terms-group + .legal-terms-group {
    margin-top: 62px;
  }

  .legal-terms-group-heading {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 18px;
  }

  .legal-terms-group-heading > span {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .legal-clause {
    padding: 25px 0 28px;
  }

  .legal-clause h3 {
    font-size: 18px;
  }

  .legal-numbered-list {
    padding-left: 1.45rem;
  }

  .legal-numbered-list p,
  .legal-bullet-list li {
    font-size: 15px;
    line-height: 1.7;
  }

  .legal-subclause {
    padding: 18px;
    border-radius: 12px;
  }
}


/* =========================================================
   v89 - Terms breadcrumb + section navigation
   Reuses the Research page context-navigation pattern.
   ========================================================= */
.terms-page .legal-context-inner {
  grid-template-columns: auto 1fr;
}

.terms-page .legal-section-nav {
  justify-content: flex-end;
}

.terms-page .legal-section-nav a.is-active {
  color: #244f9f;
  background: #edf3ff;
}

@media (max-width: 1050px) {
  .terms-page .legal-context-inner {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
  }

  .terms-page .legal-breadcrumbs,
  .terms-page .legal-section-nav {
    display: none;
  }

  .terms-page .mobile-context-nav {
    display: block;
  }
}


/* =========================================================
   v90 - Privacy Policy
   Long-form legal content with Research-style context navigation.
   ========================================================= */
.privacy-page .legal-context-inner {
  grid-template-columns: auto minmax(0, 1fr);
}

.privacy-page .privacy-section-nav {
  justify-content: flex-end;
}

.privacy-page .privacy-publication-hero {
  min-height: 330px;
}

.privacy-effective-date {
  margin: 20px 0 0;
  color: #617087;
  font-size: 14px;
  font-weight: 700;
}

.privacy-document-shell {
  max-width: 920px;
}

.privacy-overview {
  padding-bottom: 40px;
  border-bottom: 1px solid #dfe6ee;
}

.privacy-overview p,
.privacy-section p {
  margin: 0;
  color: #344a65;
  font-size: 15.5px;
  line-height: 1.75;
}

.privacy-overview p + p,
.privacy-section p + p {
  margin-top: 16px;
}

.privacy-section {
  scroll-margin-top: calc(var(--solution-fixed-offset) + 24px);
  padding: 36px 0 38px;
  border-bottom: 1px solid #e8edf3;
}

.privacy-section h2 {
  margin: 0 0 20px;
  color: #183250;
  font-size: 21px;
  line-height: 1.35;
  letter-spacing: -.012em;
}

.privacy-section h2 span {
  color: #315fae;
}

.privacy-section .legal-bullet-list {
  margin-top: 16px;
}

.privacy-address {
  margin: 18px 0;
  padding-left: 18px;
  border-left: 3px solid #cbd9ef;
  color: #344a65;
  font-size: 15.5px;
  font-style: normal;
  line-height: 1.75;
}

.privacy-address strong {
  color: #183250;
}

@media (max-width: 1050px) {
  .privacy-page .legal-context-inner {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
  }

  .privacy-page .legal-breadcrumbs,
  .privacy-page .privacy-section-nav {
    display: none;
  }

  .privacy-page .mobile-context-nav {
    display: block;
  }
}

@media (max-width: 760px) {
  .privacy-page .privacy-publication-hero {
    min-height: 280px;
  }

  .privacy-overview {
    padding-bottom: 30px;
  }

  .privacy-section {
    padding: 30px 0 32px;
  }

  .privacy-section h2 {
    font-size: 19px;
  }

  .privacy-overview p,
  .privacy-section p,
  .privacy-address {
    font-size: 15px;
    line-height: 1.7;
  }
}


/* =========================================================
   v93 - Automatic context-navigation compaction
   Desktop section tabs remain visible while they fit. When the
   breadcrumb + section tabs need more width than the context bar
   can provide, JS adds .is-context-compact and the same section
   selector used on mobile becomes the desktop fallback.
   ========================================================= */
@media (min-width: 1051px) {
  .solution-context-bar.is-context-compact .solution-context-inner {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 24px;
  }

  .solution-context-bar.is-context-compact .solution-section-nav {
    display: none;
  }

  .solution-context-bar.is-context-compact .mobile-context-nav {
    position: relative;
    display: block;
    justify-self: end;
    width: auto;
    min-width: 0;
  }

  .solution-context-bar.is-context-compact .mobile-context-trigger {
    width: auto;
    min-width: 154px;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 13px;
    border: 1px solid #d9e2ee;
    border-radius: 9px;
    background: #ffffff;
    color: #334a68;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
      background .15s ease,
      border-color .15s ease,
      box-shadow .15s ease,
      color .15s ease;
  }

  .solution-context-bar.is-context-compact .mobile-context-trigger:hover,
  .solution-context-bar.is-context-compact .mobile-context-trigger[aria-expanded="true"] {
    background: #f2f5fa;
    border-color: #c8d5e6;
    color: #18365f;
  }

  .solution-context-bar.is-context-compact .mobile-context-trigger:focus-visible {
    outline: none;
    background: #f2f5fa;
    border-color: #a9bfdf;
    box-shadow: 0 0 0 3px rgba(48,92,185,.13);
  }

  .solution-context-bar.is-context-compact .mobile-context-page,
  .solution-context-bar.is-context-compact .mobile-context-separator {
    display: none;
  }

  .solution-context-bar.is-context-compact .mobile-context-current {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #18365f;
    font-size: 13px;
    font-weight: 800;
  }

  .supplier-page .solution-context-bar.is-context-compact .mobile-context-current {
    color: #176b58;
  }

  .solution-context-bar.is-context-compact .mobile-context-chevron {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-left: auto;
    fill: none;
    stroke: #6f7e93;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
  }

  .solution-context-bar.is-context-compact .mobile-context-trigger[aria-expanded="true"] .mobile-context-chevron {
    transform: rotate(180deg);
  }

  .solution-context-bar.is-context-compact .mobile-context-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: 440px;
    max-width: calc(100vw - 32px);
    max-height: min(520px, calc(100dvh - var(--solution-fixed-offset) - 24px));
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #dce4ef;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 20px 54px rgba(20,42,79,.18);
  }

  .solution-context-bar.is-context-compact .mobile-context-menu[hidden] {
    display: none;
  }

  .solution-context-bar.is-context-compact .mobile-context-menu-label {
    padding: 3px 6px 8px;
    color: #7a8799;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .solution-context-bar.is-context-compact .mobile-context-menu-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
  }

  .solution-context-bar.is-context-compact .mobile-context-menu-list a {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 8px;
    color: #52627b;
    font-size: 13px;
    font-weight: 720;
  }

  .solution-context-bar.is-context-compact .mobile-context-menu-list a:hover,
  .solution-context-bar.is-context-compact .mobile-context-menu-list a:focus-visible,
  .solution-context-bar.is-context-compact .mobile-context-menu-list a[aria-current="location"] {
    outline: none;
    background: #edf3ff;
    color: #244f9f;
  }

  .supplier-page .solution-context-bar.is-context-compact .mobile-context-menu-list a[aria-current="location"] {
    background: #edf9f5;
    color: #176b58;
  }

  .solution-context-bar.is-context-compact .mobile-context-menu-list a:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(48,92,185,.65);
  }

  .supplier-page .solution-context-bar.is-context-compact .mobile-context-menu-list a:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(36,160,125,.55);
  }
}


/* =========================================================
   v94 - Legal QA polish
   Keep the Imprint document label semantic without changing its visual weight.
   ========================================================= */
.legal-document-heading h2.legal-document-label {
  margin: 0;
  color: #52627a;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: .09em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .legal-document-heading h2.legal-document-label {
    font-size: 11px;
  }
}


/* =========================================================
   v102 - Landing page product-understanding pass
   Clarifies what FASAPP is, how the product works at a high level,
   and what remains independent after generation.
   ========================================================= */
.product-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 42px;
}

.product-flow-step {
  position: relative;
  min-width: 0;
  min-height: 208px;
  padding: 24px 22px;
  border: 1px solid #dfe6f2;
  border-radius: 17px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(29,47,83,.035);
}

.product-flow-index {
  display: inline-block;
  margin-bottom: 28px;
  color: #5276c7;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .09em;
}

.product-flow-step h3 {
  margin: 0 0 10px;
  color: #183250;
  font-size: 18px;
  line-height: 1.25;
}

.product-flow-step p {
  margin: 0;
  color: #617087;
  font-size: 14px;
  line-height: 1.6;
}

.product-output-note {
  display: grid;
  grid-template-columns: minmax(240px, .78fr) minmax(0, 1.22fr);
  gap: 38px;
  align-items: center;
  margin-top: 18px;
  padding: 28px 32px;
  border: 1px solid #dce5f6;
  border-radius: 18px;
  background: linear-gradient(90deg, #f5f8ff, #fbfcff);
}

.product-output-kicker {
  display: block;
  margin-bottom: 7px;
  color: #4268b5;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .085em;
  text-transform: uppercase;
}

.product-output-note strong {
  display: block;
  color: #1e3555;
  font-size: 19px;
  line-height: 1.4;
}

.product-output-note p {
  margin: 0;
  color: #586a82;
  font-size: 15.5px;
  line-height: 1.65;
}

@media (max-width: 1050px) {
  .product-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-flow-step {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .product-flow {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 32px;
  }

  .product-flow-step {
    min-height: 0;
    padding: 21px 22px;
  }

  .product-flow-index {
    margin-bottom: 12px;
  }

  .product-flow-step h3 {
    font-size: 17px;
  }

  .product-output-note {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
    padding: 24px;
  }

  .product-output-note strong {
    font-size: 18px;
  }

  .product-output-note p {
    font-size: 15px;
  }
}

@media (max-width: 1050px) and (orientation: landscape) and (max-height: 600px) {
  .product-flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 30px;
  }

  .product-flow-step {
    padding: 18px;
    border-radius: 14px;
  }

  .product-flow-index {
    margin-bottom: 12px;
  }

  .product-flow-step h3 {
    font-size: 16px;
  }

  .product-flow-step p {
    font-size: 12.5px;
    line-height: 1.5;
  }

  .product-output-note {
    grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
    gap: 28px;
    margin-top: 14px;
    padding: 20px 24px;
  }
}


/* WordPress admin-bar compatibility while logged in. */
.admin-bar .site-header { top: 32px; }
.admin-bar.solution-page .solution-context-bar { top: calc(var(--solution-header-height) + 32px); }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar.solution-page .solution-context-bar { top: calc(var(--solution-header-height) + 46px); }
}

/* Language routing is staged until translated WordPress routes exist. */
.language-option.is-disabled,
.language-option:disabled {
  opacity: .5;
  cursor: not-allowed;
}


/* Gutenberg editorial surface ------------------------------------------------ */
.editor-styles-wrapper {
  background: #ffffff;
}
.editor-styles-wrapper > .wp-block {
  max-width: none;
}
.editor-styles-wrapper .hero {
  min-height: auto;
}


/* CMS-native pilot editorial blocks ----------------------------------------- */
.pilot-eyebrow-row p.eyebrow {
  margin-top: 0;
}


/* =========================================================
   v94 - QA: narrow-screen text overflow protection
   Keeps existing layout geometry while allowing grid children to
   shrink and explicit German soft-hyphen breakpoints to take effect.
   ========================================================= */
@media (max-width: 760px) {
  .role-section-layout > *,
  .role-copy,
  .accelerator-card-grid,
  .section-heading,
  .legal-publication-shell,
  .legal-document-shell,
  .legal-terms-group-heading > * {
    min-width: 0;
  }
}

/* =========================================================
   v95 - Mobile heading scale refinement
   Keeps the existing desktop hierarchy while reducing oversized
   marketing headings on phones. Legal and compact component headings
   are intentionally excluded.
   ========================================================= */
@media (max-width: 760px) {
  .hero h1,
  .enterprise-hero-content h1,
  .supplier-hero-content h1 {
    font-size: clamp(38px, 9.8vw, 50px);
    line-height: 1.02;
  }

  .accelerator-hero h1 {
    font-size: clamp(38px, 9.6vw, 48px);
    line-height: 1.02;
  }

  .research-page .research-publication-hero h1 {
    font-size: clamp(36px, 9.4vw, 46px);
    line-height: 1.04;
  }

  .section-heading h2,
  .enterprise-reality-copy h2,
  .supplier-hook h2,
  .response-copy h2,
  .portfolio-copy h2,
  .customer-delivery-copy h2,
  .value-bridge-copy h2,
  .research-section-heading h2,
  .role-copy h2,
  .security-spotlight-copy h2 {
    font-size: clamp(30px, 7.5vw, 36px);
    line-height: 1.06;
  }
}

@media (max-width: 380px) {
  .hero h1,
  .enterprise-hero-content h1,
  .supplier-hero-content h1 {
    font-size: clamp(36px, 9.8vw, 40px);
  }

  .accelerator-hero h1 {
    font-size: clamp(36px, 9.6vw, 40px);
  }

  .research-page .research-publication-hero h1 {
    font-size: clamp(34px, 9.2vw, 38px);
  }

  .section-heading h2,
  .enterprise-reality-copy h2,
  .supplier-hook h2,
  .response-copy h2,
  .portfolio-copy h2,
  .customer-delivery-copy h2,
  .value-bridge-copy h2,
  .research-section-heading h2,
  .role-copy h2,
  .security-spotlight-copy h2 {
    font-size: clamp(28px, 7.5vw, 32px);
  }
}

/* v39: simplified challenge illustrations.
   Gutenberg remains the content source of truth. The original inline SVGs stay
   in the stored block markup but are hidden visually. */
.challenge-grid .challenge-item {
  min-width: 0;
}

.challenge-grid .icon-orbit {
  width: 156px;
  height: 156px;
  display: block;
  margin: 0 auto 22px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.challenge-grid .icon-orbit svg,
.challenge-grid .icon-orbit::before {
  display: none;
  content: none;
}

.challenge-grid .challenge-item:nth-child(1) .icon-orbit {
  background-image: url("assets/images/challenge-foundations-v39.png");
}

.challenge-grid .challenge-item:nth-child(2) .icon-orbit {
  background-image: url("assets/images/challenge-repeated-v39.png");
}

.challenge-grid .challenge-item:nth-child(3) .icon-orbit {
  background-image: url("assets/images/challenge-drift-v39.png");
}

.challenge-grid .challenge-item:nth-child(4) .icon-orbit {
  background-image: url("assets/images/challenge-knowledge-v39.png");
}

/* Two-column layouts have more horizontal room per card. */
@media (max-width: 1024px) {
  .challenge-grid .icon-orbit {
    width: 168px;
    height: 168px;
    margin-bottom: 20px;
  }
}

/* On mobile the cards are stacked, so the illustration can breathe more. */
@media (max-width: 680px) {
  .challenge-grid .icon-orbit {
    width: min(184px, 58vw);
    height: min(184px, 58vw);
    margin-bottom: 18px;
  }
}