:root {
  --primary: #14396b;
  --primary-dark: #0d2848;
  --blue: #1e5aa8;
  --blue-light: #eaf2fb;
  --orange: #f5821f;
  --orange-dark: #d96c0f;
  --gray-bg: #f4f6f9;
  --text: #2c3440;
  --text-light: #6b7480;
  --white: #ffffff;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(20, 57, 107, 0.08);
  --shadow-lg: 0 20px 50px rgba(20, 57, 107, 0.14);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Scroll-reveal (progressive enhancement: only hidden once JS confirms it can reveal) */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
}

.js-anim .reveal:where(.in-view) {
  opacity: 1;
  transform: translateY(0);
}

/* Hero content loads immediately (above the fold, not scroll-triggered) via pure CSS so it never depends on JS timing */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-badge { animation: heroFadeUp 0.7s var(--ease-smooth) both; }
.hero h1 { animation: heroFadeUp 0.7s var(--ease-smooth) 0.08s both; }
.hero p:nth-of-type(1) { animation: heroFadeUp 0.7s var(--ease-smooth) 0.16s both; }
.hero p:nth-of-type(2) { animation: heroFadeUp 0.7s var(--ease-smooth) 0.22s both; }
.hero-actions { animation: heroFadeUp 0.7s var(--ease-smooth) 0.3s both; }
.hero-visual-new { animation: heroFadeUp 0.9s var(--ease-smooth) 0.22s both; }

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

  .js-anim .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-badge, .hero h1, .hero p, .hero-actions, .hero-visual-new {
    animation: none;
  }
}

body {
  font-family: Verdana, Geneva, sans-serif;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: normal;
}

/* Site-wide left/right spacing: 240px on desktop, tapering down below */
.container {
  width: 100%;
  max-width: none;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 576px) {
  .container { padding-left: 32px; padding-right: 32px; }
}

@media (min-width: 768px) {
  .container { padding-left: 60px; padding-right: 60px; }
}

@media (min-width: 992px) {
  .container { padding-left: 100px; padding-right: 100px; }
}

@media (min-width: 1200px) {
  .container { padding-left: 160px; padding-right: 160px; }
}

@media (min-width: 1440px) {
  .container { padding-left: 240px; padding-right: 240px; }
}

a {
  text-decoration: none;
  transition: all 0.2s ease;
}

.section {
  padding: 90px 0;
}

.section-alt {
  background: var(--gray-bg);
}

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--orange);
  margin-bottom: 14px;
}

.section-title {
  font-size: 34px;
  margin-bottom: 18px;
}

.section-sub {
  color: var(--text-light);
  font-size: 17px;
  max-width: 700px;
  margin: 0 auto 40px;
}

.text-center .section-sub {
  margin-left: auto;
  margin-right: auto;
}

/* Buttons */
.btn-oa-primary {
  background: var(--orange);
  color: var(--white);
  border: none;
  padding: 13px 30px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  display: inline-block;
}
.btn-oa-primary:hover {
  background: var(--orange-dark);
  color: var(--white);
  text-decoration: none;
  transform: translateY(-2px);
}

.btn-oa-outline {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.6);
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  display: inline-block;
}
.btn-oa-outline:hover {
  background: rgba(255,255,255,0.12);
  color: var(--white);
  text-decoration: none;
  transform: translateY(-2px);
}

.btn-oa-outline-dark {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  display: inline-block;
}
.btn-oa-outline-dark:hover {
  background: var(--primary);
  color: var(--white);
  text-decoration: none;
  transform: translateY(-2px);
}

/* Header
   position:sticky lives on the #site-header wrapper div (injected by
   include.js), not the <header class="site-header"> it loads — that
   wrapper is a direct child of <body>, so its containing block is the
   whole page. The inner .site-header element's own containing block is
   the wrapper itself, which only auto-sizes to the header's own height
   once loaded, giving a sticky child there zero room to actually stick. */
#site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.site-header {
  background: var(--white);
  border-bottom: 1px solid #eef0f3;
  transition: box-shadow 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth);
}

.site-header.scrolled {
  border-bottom-color: transparent;
  box-shadow: 0 8px 24px rgba(20, 57, 107, 0.08);
}

.navbar {
  padding: 18px 0;
}

.brand-logo {
  font-weight: 800;
  font-size: 20px;
  color: var(--primary);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo .mark {
  color: var(--orange);
}

.logo-img {
  height: 34px;
  width: auto;
}

.site-header .nav-link {
  color: #333c46;
  font-weight: 400;
  font-size: 15px;
  padding: 10px 16px !important;
  text-decoration: none;
  text-underline-offset: 6px;
}

.site-header .nav-link:hover {
  color: var(--blue);
  text-decoration: none;
}

.site-header .nav-link.active {
  color: var(--blue);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.btn-header-contact {
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 26px;
  border-radius: 6px;
  white-space: nowrap;
}

.btn-header-contact:hover {
  background: var(--primary);
  color: var(--white);
  text-decoration: none;
  transform: translateY(-2px);
}

.header-divider {
  width: 1px;
  height: 22px;
  background: #dde1e7;
  margin: 0 18px;
  display: inline-block;
}

.lang-switch {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-link {
  font-weight: 400;
  color: #9aa1ab;
}

.lang-link:hover {
  color: var(--blue);
  text-decoration: none;
}

.lang-link.active {
  color: var(--blue);
  font-weight: 700;
}

.lang-sep {
  color: #c3c8cf;
}

/* Bootstrap's default .navbar-toggler-icon is a background-image only
   defined under .navbar-light/.navbar-dark — this navbar uses neither,
   so the plain <span> version renders invisible. Using a FontAwesome
   icon instead (swapped bars/xmark on toggle, see script.js) sidesteps
   that and matches the icon-swap pattern already used elsewhere on the
   site (e.g. the accordion +/- toggles). */
.navbar-toggler {
  border: 1px solid #dde1e7;
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--primary);
  font-size: 18px;
  line-height: 1;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-light);
}

@media (min-width: 992px) {
  .site-header .navbar-collapse {
    display: flex !important;
    flex-grow: 1;
    flex-basis: auto;
    align-items: center;
  }

  .header-nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .header-actions {
    flex: 0 0 auto;
  }
}

/* The header keeps its own tighter, capped side padding at every width
   instead of inheriting .container's escalating 100/160/240px margins.
   Those margins are sized for marketing content, not a nav bar — applied
   here they starved the 992-1200px band of room, wrapping nav labels
   (worse in FR, whose words run longer than the English ones) before the
   hamburger breakpoint kicked in. This selector's specificity beats the
   plain .container rules at every breakpoint, mobile included, so it also
   replaces the old mobile-only override that undid Bootstrap's
   navbar-expand-lg zeroing of the container's padding below 992px. */
.site-header .navbar > .container {
  padding-left: clamp(20px, 4vw, 60px);
  padding-right: clamp(20px, 4vw, 60px);
}

@media (max-width: 991px) {
  .site-header .navbar-nav {
    gap: 4px;
  }

  .site-header .nav-link {
    padding: 10px 4px !important;
  }

  .header-actions {
    flex-wrap: wrap;
    gap: 14px;
  }

  .header-divider {
    display: none;
  }
}

/* Hero */
:root {
  --header-h: 78px;
}

.hero {
  background: url('../assets/images/home/hero-bg.png') center center/cover no-repeat, linear-gradient(180deg, #1c5aa8 0%, #2f74c0 100%);
  color: var(--white);
  height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  padding: clamp(50px, 8vh, 90px) 0 clamp(40px, 7vh, 70px);
  position: relative;
  overflow: hidden;
  border-radius: 0 0 clamp(20px, 2.2vw, 40px) clamp(20px, 2.2vw, 40px);
}

.hero-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 400;
  padding: 8px 20px;
  border-radius: 20px;
  margin-bottom: clamp(14px, 2.6vh, 22px);
}

.hero h1 {
  color: var(--white);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin-bottom: clamp(14px, 2.6vh, 22px);
}

.hero p {
  color: #ffffff;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 0.9vw, 17px);
  line-height: 1.7;
  letter-spacing: 0;
  max-width: 480px;
  margin-bottom: 12px;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(18px, 2.5vw, 30px);
  margin-top: clamp(18px, 3vh, 26px);
}

.btn-hero-primary {
  background: var(--blue);
  color: var(--white);
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 0.8vw, 15px);
  line-height: 1.65;
  letter-spacing: 0.02em;
  padding: 14px 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.btn-hero-primary:hover {
  background: var(--primary);
  color: var(--white);
  text-decoration: none;
  transform: translateY(-2px);
}

.btn-hero-primary i {
  font-size: 13px;
}

.hero-link {
  color: var(--white);
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 0.8vw, 15px);
  line-height: 1.65;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

.icon-diag {
  display: inline-block;
  transform: rotate(-45deg);
  font-size: 12px;
}

.hero-visual-new {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
  visibility: hidden;
}

@media (min-width: 992px) {
  .hero-visual-col {
    position: static;
  }

  .hero-visual-new {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100px;
    visibility: visible;
    z-index: 1;
  }
}

@media (min-width: 1200px) {
  .hero-visual-new { right: 160px; }
}

@media (min-width: 1440px) {
  .hero-visual-new { right: 240px; }
}

.hero-mascot-img {
  height: 82%;
  max-width: 34vw;
  width: auto;
  display: block;
  filter: drop-shadow(0 15px 25px rgba(6, 30, 60, 0.2));
}

.hero-card {
  position: absolute;
  background: var(--white);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 16px 22px;
  max-width: 260px;
  line-height: 1.3;
}

.hero-card .eyebrow-sm {
  display: block;
  color: var(--orange);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.hero-card h4 {
  font-family: "Times New Roman", Times, serif;
  font-size: 17px;
  font-weight: 400;
  color: #1c2430;
  margin-bottom: 2px;
  line-height: 1.3;
}

.hero-card p {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: var(--text-light);
  margin: 0;
  max-width: none;
}

.hero-card ul {
  font-family: "Times New Roman", Times, serif;
  margin: 0;
  padding-left: 18px;
  font-size: 16px;
  color: #1c2430;
  font-weight: 400;
}

.hero-card ul li {
  margin-bottom: 2px;
}

.card-platform {
  top: 5%;
  left: -2%;
}

.card-enhanced {
  bottom: 3%;
  left: -32%;
}

.card-builtfor {
  top: 54%;
  right: 6%;
}

/* Audit ready split */
.audit-ready-section {
  padding-bottom: 0;
}

.audit-ready-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.audit-ready-img {
  width: 100%;
  max-width: 460px;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  display: block;
}

.audit-title {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.55vw, 68px);
  line-height: 0.97;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  margin-bottom: clamp(16px, 2.4vh, 26px);
}

.audit-title em {
  font-style: italic;
}

.audit-text {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 0.9vw, 17px);
  line-height: 1.75;
  letter-spacing: 0;
  color: #727272;
  max-width: 640px;
  margin-bottom: 0;
}

.stats-band {
  margin-top: clamp(50px, 8vh, 90px);
  padding: clamp(36px, 5vh, 56px) 0;
  background: linear-gradient(180deg, rgba(192, 192, 192, 0) 0%, rgba(192, 192, 192, 0.35) 100%);
}

.stats-band .stat-item {
  padding: 10px;
}

.stats-band .num {
  display: block;
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: clamp(24px, 2vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--blue);
}

.stats-band .label {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 0.85vw, 16px);
  line-height: 1.6;
  color: #727272;
}

/* Cards */
.standard-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  height: 100%;
  transition: transform 0.45s var(--ease-smooth), box-shadow 0.45s var(--ease-smooth);
}

.standard-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.standard-card .img-wrap {
  height: 200px;
  overflow: hidden;
}

.standard-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.standard-card:hover .img-wrap img {
  transform: scale(1.06);
}

.standard-card .body {
  padding: 22px;
}

.standard-card .tag {
  font-family: Verdana, Geneva, sans-serif;
  color: var(--orange);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.standard-card h4 {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: 0;
  color: #1a1a1a;
  margin: 6px 0 14px;
}

.standard-card .read-more {
  font-family: Verdana, Geneva, sans-serif;
  color: var(--blue);
  font-weight: 400;
  font-size: 12px;
  display: inline-block;
  transition: transform 0.2s ease;
}

.standard-card .read-more:hover {
  text-decoration: none;
  transform: translateX(3px);
}

/* Standards section heading */
.standards-heading {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.55vw, 68px);
  line-height: 0.97;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  margin-bottom: 16px;
}

.standards-subtitle {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: clamp(17px, 1.15vw, 22px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  margin-bottom: 10px;
}

.standards-subtitle .accent {
  color: var(--blue);
}

.standards-desc {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 0.85vw, 16px);
  line-height: 1.7;
  color: #727272;
  max-width: 700px;
  margin: 0 auto 40px;
}

/* Standard detail modals */
.standard-modal .modal-content {
  border: none;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

.standard-modal .modal-header {
  border-bottom: 1px solid #eef0f2;
  align-items: flex-start;
  padding: 26px 30px 18px;
}

.standard-modal .modal-title {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  color: #1a1a1a;
  padding-right: 20px;
}

.standard-modal .close {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 24px;
  color: var(--text-light);
  opacity: 1;
  text-shadow: none;
}

.standard-modal .close:hover {
  color: var(--blue);
}

.standard-modal .modal-body {
  padding: 24px 30px 30px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: #444c56;
  max-height: 65vh;
  overflow-y: auto;
}

.standard-modal .modal-body h6 {
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--primary);
  margin: 22px 0 8px;
}

.standard-modal .modal-body h6:first-child {
  margin-top: 0;
}

.standard-modal .modal-body ul {
  padding-left: 20px;
  margin-bottom: 6px;
}

.standard-modal .modal-body li {
  margin-bottom: 8px;
}

.standard-modal .modal-body strong {
  color: #1a1a1a;
}

/* Other standards heading — same canonical scale as .standards-heading /
   .healthcare-heading (a sibling "Other X standards" subheading). */
.other-standards-heading {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.55vw, 68px);
  line-height: 0.97;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  margin-top: clamp(60px, 9vh, 110px);
  margin-bottom: 26px;
}

.acc-more {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--text-light);
  margin-top: 4px;
}

/* Standards accordion */
.acc-grid {
  align-items: flex-start;
}

.acc-item {
  background: var(--white);
  border: 1px solid #e4e9f0;
  border-radius: 10px;
  transition: border-color 0.3s var(--ease-smooth);
}

.acc-item.active {
  border-color: var(--blue);
}

.acc-toggle {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  text-align: left;
}

.acc-title {
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  font-weight: 400;
  color: #1a1a1a;
}

.acc-icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: var(--blue-light);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: background 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth);
}

.acc-item.active .acc-icon {
  background: var(--blue);
  color: var(--white);
}

.acc-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  transition: max-height 0.4s var(--ease-smooth), padding 0.4s var(--ease-smooth);
}

.acc-item.active .acc-body {
  max-height: 280px;
  padding: 0 20px 18px;
}

.acc-body p {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  letter-spacing: 0;
  color: #727272;
  margin: 0;
}

/* Healthcare standards heading */
.healthcare-heading {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.55vw, 68px);
  line-height: 0.97;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  margin-top: clamp(60px, 9vh, 110px);
  margin-bottom: 26px;
}

/* Numbered cards */
.numbered-card {
  background: var(--white);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--shadow);
  height: 100%;
  transition: transform 0.45s var(--ease-smooth), box-shadow 0.45s var(--ease-smooth), border-color 0.45s var(--ease-smooth);
}

.numbered-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue);
}

.numbered-card .num {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
}

.numbered-card h5 {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 0.97;
  letter-spacing: -0.22px;
  color: var(--blue);
  margin-bottom: 10px;
}

.numbered-card p {
  font-family: Verdana, Geneva, sans-serif;
  color: #727272;
  font-size: 14px;
  line-height: 1.59;
  letter-spacing: 0;
  margin-bottom: 0;
}

/* Crosswalk heading */
.crosswalk-heading {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.55vw, 68px);
  line-height: 0.97;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  margin: 0 auto 50px;
}

/* Crosswalk diagram */
.crosswalk-diagram-new {
  position: relative;
  max-width: 640px;
  height: clamp(340px, 40vw, 420px);
  margin: 0 auto 60px;
}

.cw-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.cw-lines line {
  stroke: var(--blue);
  stroke-width: 1.5;
  opacity: 0.5;
}

.cw-lines .cw-dot {
  fill: var(--blue);
}

.cw-node {
  position: absolute;
  z-index: 1;
  width: 160px;
  background: var(--white);
  border: 1.5px solid var(--blue);
  border-radius: 10px;
  padding: 12px 16px;
  text-align: left;
  box-shadow: var(--shadow);
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth), border-color 0.35s var(--ease-smooth);
}

.cw-node:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

.cw-node .cw-label {
  display: block;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.51;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 4px;
}

.cw-node .cw-value {
  display: block;
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.65;
  letter-spacing: -0.22px;
  color: #727272;
}

.cw-tl { top: 0; left: 0; }
.cw-tr { top: 0; right: 0; }
.cw-bl { bottom: 0; left: 0; }
.cw-br { bottom: 0; right: 0; }

.cw-center {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 20px 20px 18px;
  text-align: center;
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth);
}

.cw-center:hover {
  transform: translate(-50%, calc(-50% - 4px));
  box-shadow: 0 26px 55px rgba(20, 57, 107, 0.2);
}

.cw-eyebrow {
  display: block;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: 2.34px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}

.cw-title {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.26px;
  color: var(--blue);
  margin-bottom: 14px;
}

.cw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}

.cw-grid span {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.65;
  letter-spacing: 0;
  color: #727272;
  border: 1px solid #e4e9f0;
  border-radius: 6px;
  padding: 7px 4px;
}

.cw-status {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  color: var(--blue);
  background: var(--blue-light);
  border-radius: 6px;
  padding: 8px 10px;
}

/* Crosswalk info boxes */
.cw-info {
  border-radius: var(--radius);
  padding: 30px;
  height: 100%;
  transition: transform 0.45s var(--ease-smooth), box-shadow 0.45s var(--ease-smooth);
  box-shadow: var(--shadow);
}

.cw-info:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.cw-info h5 {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.3;
  margin-bottom: 12px;
}

.cw-info p {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 0;
}

.cw-info-light {
  background: var(--gray-bg);
}

.cw-info-light h5 {
  color: var(--blue);
}

.cw-info-light p {
  color: #727272;
}

.cw-info-blue {
  background: var(--blue);
}

.cw-info-blue h5 {
  color: var(--white);
}

.cw-info-blue p {
  color: rgba(255, 255, 255, 0.85);
}

/* Part 11 pinned-scroll section */
.part11-section {
  background: var(--gray-bg);
}

.part11-track {
  position: relative;
  height: 300vh;
}

.part11-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.part11-img {
  width: 100%;
  max-height: clamp(320px, 42vw, 460px);
  object-fit: cover;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  display: block;
}

.part11-heading {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.55vw, 68px);
  line-height: 0.97;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  margin-bottom: 16px;
}

.part11-sub {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: clamp(16px, 1.15vw, 22px);
  line-height: 1.35;
  letter-spacing: -0.22px;
  color: #727272;
  margin-bottom: 26px;
}

.part11-steps {
  margin-bottom: 26px;
}

.part11-step {
  display: flex;
  gap: 18px;
}

.step-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-circle {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: #d7dce3;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 12px;
  transition: background 0.4s var(--ease-smooth);
}

.step-line {
  flex: 1;
  width: 2px;
  min-height: 30px;
  background: #d7dce3;
  margin: 4px 0;
  transition: background 0.4s var(--ease-smooth);
}

.part11-step.active .step-circle,
.part11-step.done .step-circle {
  background: var(--blue);
}

.part11-step.done .step-line {
  background: var(--blue);
}

.step-body {
  padding-bottom: 28px;
}

.part11-step:last-child .step-body {
  padding-bottom: 0;
}

.step-body h5 {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.52;
  letter-spacing: -0.24px;
  color: #1a1a1a;
  margin-bottom: 4px;
  transition: opacity 0.4s var(--ease-smooth);
}

.step-body p {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: 0;
  color: #727272;
  margin-bottom: 0;
}

.part11-step:not(.active):not(.done) .step-body {
  opacity: 0.45;
}

@media (max-width: 991px) {
  .part11-track {
    height: auto;
  }

  .part11-sticky {
    position: static;
    height: auto;
    padding: 90px 0;
  }

  .part11-step:not(.active):not(.done) .step-body {
    opacity: 1;
  }

  .step-circle,
  .step-line {
    background: var(--blue) !important;
  }
}

/* =========================================================
   HOMEPAGE FINAL CTA
   FIGMA / SCREENSHOT MATCH

   Desktop CTA:
   1440 × 430px
========================================================= */

.cta-banner-section {
  width: 100%;
  background: #ffffff;

  padding-top: 100px;
  padding-bottom: 120px;
}


/* ---------------------------------------------------------
   CONTAINER
   1920px design:
   240px + 1440px + 240px
--------------------------------------------------------- */

.cta-banner-section > .container {
  width: 1440px;
  max-width: calc(100% - 48px);

  margin: 0 auto;
  padding: 0;
}


/* =========================================================
   CARD
========================================================= */

.cta-banner {
  position: relative;

  width: 100%;
  height: 430px;
  min-height: 0;

  display: block;

  background: linear-gradient(
    90deg,
    #005DAB 0%,
    #2388CE 54%,
    #5AA8EA 100%
  );

  border-radius: 32px;

  color: #ffffff;

  /*
    IMPORTANT:
    Einstein extends 63px above the card.
  */
  overflow: visible;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.cta-banner-text {
  position: absolute;

  left: 52px;
  top: 103px;

  width: 720px;
  max-width: none;

  padding: 0;
  margin: 0;

  z-index: 3;
}


/* ---------------------------------------------------------
   TITLE
--------------------------------------------------------- */

.cta-banner h2 {
  width: 720px;
  max-width: none;

  margin: 0 0 22px;

  padding: 0;

  font-family: "Times New Roman", Times, serif;
  font-weight: 400;

  font-size: 54px;
  line-height: 60px;
  letter-spacing: -2px;

  color: #ffffff;

  /* nowrap forced a fixed-width EN title onto one line; FR's translation
     is longer and doesn't fit at 720px, so it just overflowed past the
     card instead. normal lets it wrap to 2 lines (the 430px card has
     comfortable headroom for that), while EN stays on one line either
     way since it already fits the 720px box on its own. */
  white-space: normal;
}


/* ---------------------------------------------------------
   DESCRIPTION
--------------------------------------------------------- */

.cta-banner p {
  width: 650px;
  max-width: none;

  margin: 0 0 28px;

  padding: 0;

  font-family: Verdana, Geneva, sans-serif;
  font-weight: 400;

  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0;

  color: #ffffff;
}


/* =========================================================
   ACTIONS
========================================================= */

.cta-banner-actions {
  display: flex;
  align-items: center;

  gap: 24px;

  margin: 0;
  padding: 0;

  flex-wrap: nowrap;
}


/* =========================================================
   WHITE BUTTON
========================================================= */

.btn-cta-white {
  min-width: 176px;
  height: 58px;

  padding: 0 27px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  background: #ffffff;
  color: #005DAB;

  border: 0;
  border-radius: 12px;

  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;

  font-size: 15px;
  line-height: 24.75px;
  letter-spacing: 0.3px;

  text-decoration: none;

  white-space: nowrap;

  box-shadow: none;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


.btn-cta-white i {
  font-size: 14px;

  transition: transform 0.3s ease;
}


.btn-cta-white:hover {
  color: #005DAB;
  text-decoration: none;

  transform: translateY(-2px);

  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.16);
}


.btn-cta-white:hover i {
  transform: translateX(3px);
}


/* =========================================================
   SECONDARY LINK
========================================================= */

.cta-banner-link {
  display: inline-flex;
  align-items: center;

  margin: 0;

  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;

  font-size: 15px;
  line-height: 24.75px;
  letter-spacing: 0.3px;

  color: #ffffff;

  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;

  white-space: nowrap;
}


.cta-banner-link:hover {
  color: #ffffff;

  opacity: 0.82;

  text-decoration-line: underline;
}


/* =========================================================
   EINSTEIN

   Figma:
   Width  = 365px
   Height = 493px
   Left   = 989px
   Top    = -63px

   493 - 63 = 430
   Bottom aligns perfectly to CTA card.
========================================================= */

.cta-banner-visual {
  position: absolute;

  left: 989px;
  right: auto;

  top: -63px;
  bottom: auto;

  width: 365px;
  height: 493px;

  display: block;

  z-index: 2;

  pointer-events: none;
}


.cta-banner-img {
  display: block;

  width: 365px;
  height: 493px;

  max-width: none;
  max-height: none;

  object-fit: contain;
  object-position: center bottom;

  margin: 0;
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  background: #F8F8F8;
  padding: 60px 240px 36px;
}

/* ── Top row ──────────────────────────────────────────────── */
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  justify-content: space-between;
  margin-bottom: 48px;
}

/* Brand column */
.footer-brand { flex: 0 0 320px; }

.footer-logo img {
  width: 178px;
  height: auto;
  display: block;
  margin-bottom: 24px;
}

.footer-address,
.footer-contact {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 27.75px;
  letter-spacing: 0;
  color: #727272;
  margin: 0 0 14px 0;
}

.footer-contact a {
  color: var(--orange);
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 15px;
  line-height: 27.75px;
}
.footer-contact a:hover { text-decoration: underline; }

/* Quick Links & Language columns */
.footer-links,
.footer-lang {
  flex: 0 0 auto;
  min-width: 160px;
}

/* Headings — QUICK LINKS / LANGUAGE */
.footer-heading {
  font-family: 'Times New Roman', Times, serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 21.45px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--orange);
  margin: 0 0 20px 0;
}

/* Nav links */
.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links ul li { margin-bottom: 0; }
.footer-links ul li a {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 31.5px;
  color: #727272;
  text-decoration: none;
  display: block;
}
.footer-links ul li a:hover { color: var(--orange); }

/* Language toggle */
.lang-toggle {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 15px;
  line-height: 24.75px;
  display: flex;
  align-items: center;
}
.lang-toggle .lang-link { font-size: 15px; text-decoration: none; }
.lang-toggle .lang-sep { color: #727272; margin: 0 4px; font-weight: 400; }

/* ── Bottom bar ────────────────────────────────────────────── */
.footer-bottom {
  border-top: 1px solid #E0E0E0;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
  color: #9a9a9a;
}
.footer-bottom a { color: #9a9a9a; text-decoration: none; font-size: 13px; }
.footer-bottom a:hover { color: var(--orange); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .site-footer { padding: 60px 80px 36px; }
}
@media (max-width: 768px) {
  .site-footer { padding: 40px 24px 28px; }
  .footer-top { flex-direction: column; gap: 32px; }
  .footer-brand { flex: unset; }
}

/* Responsive */
@media (max-width: 991px) {
  .hero { height: auto; padding: 110px 0 50px; }
  .hero-visual-new { position: static; visibility: visible; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; margin-top: 36px; }
  .hero-mascot-img { max-height: none; height: auto; width: min(320px, 78vw); }
  .hero-card { position: static; width: 100%; max-width: 320px; }

  .crosswalk-diagram-new {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
  }

  .cw-lines { display: none; }

  .cw-node {
    position: static;
    width: 100%;
    max-width: 280px;
  }

  .cw-center {
    position: static;
    transform: none;
    order: -1;
    width: 100%;
    max-width: 280px;
    margin-bottom: 6px;
  }

  .cw-center:hover {
    transform: translateY(-4px);
  }
}

@media (max-width: 767px) {
  .section { padding: 60px 0; }
}

/* The absolute-positioned desktop layout above is a precise pixel match
   at a ~1440px reference width (text at left:52/width:720, mascot at
   left:989/width:365) with no fluid fallback, so it overflows every
   container narrower than ~1400px. Below that, switch to a flexbox
   layout that keeps the same visual relationship (text left, mascot
   right, bottom-aligned) but scales with the viewport instead of
   breaking out of it. */
@media (max-width: 1399px) {
  .cta-banner {
    height: auto;
    min-height: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 48px 40px;
    overflow: hidden;
  }

  .cta-banner-text {
    position: static;
    width: auto;
    max-width: 560px;
    z-index: 3;
  }

  .cta-banner h2 {
    width: auto;
    max-width: 100%;
    white-space: normal;
    font-size: clamp(26px, 3.4vw, 44px);
    line-height: 1.15;
    letter-spacing: -1px;
  }

  .cta-banner p {
    width: auto;
    max-width: 100%;
    line-height: 1.7;
  }

  .cta-banner-visual {
    position: static;
    width: auto;
    height: auto;
    flex-shrink: 0;
    align-self: flex-end;
  }

  .cta-banner-img {
    width: auto;
    height: clamp(220px, 26vw, 340px);
    max-height: 100%;
  }
}

@media (max-width: 767px) {
  .cta-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 40px 24px 0;
  }

  .cta-banner-text {
    padding: 0 0 24px;
    max-width: none;
  }

  /* .cta-banner-actions is nowrap by default (fine on desktop, where the
     card is wide enough for both the button and the link side by side);
     on narrow phones the two together overflow the card, so let them
     stack instead. */
  .cta-banner-actions {
    flex-wrap: wrap;
    row-gap: 14px;
  }

  /* Wrapping the row (above) isn't enough on its own: the link's own
     white-space:nowrap (needed on desktop to keep it on one line next
     to the button) still lets long translations like the FR "Découvrir
     l'eQMS Nouvelle Génération" overflow past the card on their own
     line, since nowrap blocks internal wrapping too. */
  .cta-banner-link {
    white-space: normal;
  }

  .cta-banner-visual {
    align-self: center;
  }

  .cta-banner-img {
    height: 220px;
  }
}


/* =========================================================
   FAST TRACK / ROI SPLIT CARDS
========================================================= */

.cta-split {
  height: 100%;
  padding: 56px;
  border-radius: 28px;
  color: #ffffff;
}

.cta-split.blue {
  background: var(--blue);
}

.cta-split.orange {
  background: var(--orange);
}

.cta-split .eyebrow-light {
  display: inline-block;
  text-transform: uppercase;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 16px;
}

.cta-split h4 {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  /* Fluid instead of a fixed 34px: col-md-6 keeps these cards at a fixed
     ~50% split from 768px up with no further column-count breakpoint,
     so a static size that looks right at 1440px+ overflows the much
     narrower card right at the 768px threshold. */
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #ffffff;
  margin-bottom: 20px;
}

.cta-split p {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 28px;
}

.cta-split-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
  text-decoration: none;
  transition: gap 0.25s var(--ease-smooth), opacity 0.25s var(--ease-smooth);
}

.cta-split-link i {
  font-size: 13px;
  transition: transform 0.25s var(--ease-smooth);
}

.cta-split-link:hover {
  color: #ffffff;
  opacity: 0.9;
  text-decoration: none;
}

.cta-split-link:hover i {
  transform: translateX(3px);
}

@media (max-width: 767px) {
  .cta-split {
    padding: 36px 28px;
  }

  .cta-split h4 {
    font-size: 28px;
  }
}