/* Web fonts are self-hosted: Assets/fonts/fonts.css, linked from each page. */

/* ============================================================================
   PARA SOLUTIONS   "LUMINOUS ENTERPRISE" (light / bright)
   Bright, airy, kinetic reskin of the existing markup. Text content and
   section order unchanged; this only re-dresses the DOM + JS-injected FX.
   ============================================================================ */

:root {
  /* accents   inline styles in the HTML reference these variables */
  --navy-deep: #0e2547;
  --navy: #123a6b;
  --navy-mid: #1b4f8c;
  --blue: #2e6fbe;
  --blue-dark: #1f548f;
  --blue-soft: #e7f0fb;
  --green: #5aa531;
  --green-soft: #eaf5e1;
  --orange: #e8722c;
  --orange-soft: #fdeee2;
  --pink: #b4638f;
  --sky: #3b8fd4;
  --cyan: #0e9c97;
  --pill: #2e6fbe;
  --pill-dark: #1f548f;

  /* bright canvas + ink */
  --bg: #e7edf6;
  --bg-2: #d8e1ef;
  --ink: #0f2547;
  --text: #0f2547;
  --slate: #4c5b77;
  --slate-light: #7c8aa4;
  --mist: #dfe7f2;
  --line: rgba(15, 37, 71, 0.1);
  --line-2: rgba(15, 37, 71, 0.16);
  --white: #ffffff;

  --glass: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92),
    rgba(255, 255, 255, 0.66)
  );
  --glass-strong: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.82));

  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 26px;

  --shadow-sm:
    0 1px 2px rgba(15, 37, 71, 0.06), 0 4px 12px rgba(15, 37, 71, 0.05);
  --shadow-md:
    0 10px 28px -10px rgba(15, 37, 71, 0.18), 0 2px 8px rgba(15, 37, 71, 0.05);
  --shadow-lg:
    0 30px 64px -24px rgba(15, 37, 71, 0.28), 0 10px 26px rgba(15, 37, 71, 0.1);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);

  --serif: "Instrument Serif", Georgia, serif;
  --brand-grad: linear-gradient(100deg, #2e6fbe 0%, #3b8fd4 46%, #0e9c97 100%);
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scrollbar-color: var(--blue) transparent;
}
body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* ---------- FX BACKDROP LAYERS (fixed, behind content) ---------- */
body::before {
  /* soft aurora */
  content: "";
  position: fixed;
  inset: -18% -10% -12% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      40% 46% at 16% 10%,
      rgba(46, 111, 190, 0.16),
      transparent 62%
    ),
    radial-gradient(
      36% 42% at 84% 6%,
      rgba(14, 156, 151, 0.13),
      transparent 60%
    ),
    radial-gradient(
      42% 50% at 82% 86%,
      rgba(232, 114, 44, 0.09),
      transparent 62%
    ),
    radial-gradient(44% 52% at 8% 92%, rgba(90, 165, 49, 0.09), transparent 60%);
  filter: blur(30px) saturate(120%);
  animation: auroraDrift 26s ease-in-out infinite alternate;
}
body::after {
  /* faint grain */
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.03;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes auroraDrift {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  100% {
    transform: translate3d(3%, 2%, 0) scale(1.1);
  }
}
#constellation {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#spotlight {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.5s var(--ease);
  background: radial-gradient(
    300px 300px at var(--spot-x, 50%) var(--spot-y, 12%),
    rgba(46, 111, 190, 0.05),
    transparent 68%
  );
}
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 300;
  pointer-events: none;
  background: var(--brand-grad);
  box-shadow: 0 0 10px rgba(46, 111, 190, 0.5);
}

/* keep real content above the FX layers */
.site-header {
  z-index: 100;
}
main,
.site-footer {
  position: relative;
  z-index: 1;
}

h1,
.display {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h2,
h3 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h4 {
  text-wrap: balance;
}
p {
  margin: 0;
  color: var(--slate);
  text-wrap: pretty;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
img,
svg {
  display: block;
}
strong {
  color: var(--ink);
  font-weight: 700;
}
::selection {
  background: rgba(46, 111, 190, 0.18);
  color: var(--ink);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--blue);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  z-index: 400;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- ACCENT ----------
   One family, keyed by the Accent lookup (blue | green | orange), so a
   component builds it as `accent-${key}`. The class sets custom properties and
   nothing else   each consumer decides whether that drives a background, a
   border or a colour. These were previously scoped to .detail-page in
   detail.css; this is now the single definition. */
.accent-blue {
  --accent: var(--blue);
  --accent-deep: var(--blue-dark);
  --accent-soft: var(--blue-soft);
}
.accent-green {
  --accent: var(--green);
  --accent-deep: #4e8b2a;
  --accent-soft: var(--green-soft);
}
.accent-orange {
  --accent: var(--orange);
  --accent-deep: #c85f1f;
  --accent-soft: var(--orange-soft);
}

/* Utilities that replaced one-off inline styles. Kept deliberately few: an
   inline style cannot survive the copy-paste into JSX without becoming a style
   object, so every one in the markup had to become a class. */
.push-right {
  margin-left: auto;
}
.sprite-defs {
  position: absolute;
  overflow: hidden;
}

/* ---------- ACCENT ----------
   One family, keyed by the Accent lookup (blue | green | orange), so a
   component builds it as `accent-${key}`. The class sets custom properties and
   nothing else   each consumer decides whether that drives a background, a
   border or a colour. These were previously scoped to .detail-page in
   detail.css; this is now the single definition. */
.accent-blue {
  --accent: var(--blue);
  --accent-deep: var(--blue-dark);
  --accent-soft: var(--blue-soft);
}
.accent-green {
  --accent: var(--green);
  --accent-deep: #4e8b2a;
  --accent-soft: var(--green-soft);
}
.accent-orange {
  --accent: var(--orange);
  --accent-deep: #c85f1f;
  --accent-soft: var(--orange-soft);
}

/* Utilities that replaced one-off inline styles. Kept deliberately few: an
   inline style cannot survive the copy-paste into JSX without becoming a style
   object, so every one in the markup had to become a class. */
.push-right {
  margin-left: auto;
}
.sprite-defs {
  position: absolute;
  overflow: hidden;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
/* Sections are opaque by default   they occlude the body aurora, and the
   scroll-stack pin depends on solid backgrounds. `section--tint` is the ONE
   banding modifier, used by all three pages. In Sitecore it is the
   `Tinted Background` checkbox on the Section template. */
.section {
  position: relative;
  padding: 6.5rem 0;
  background: #fff;
}
.section--tint {
  background: oklch(0.97 0.005 250);
}
.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, 92%);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(15, 37, 71, 0.12),
    transparent
  );
}
@media (max-width: 720px) {
  .section {
    padding: 4rem 0;
  }
}
/* Deep-linked sections clear the fixed 82px nav when jumped to via #anchor.
   advisory.css:12 and detail.css:19 already do this per page; here it covers
   the home page, whose .section padding drops to 4rem (< 82px) under 720px. */
section[id],
footer[id] {
  scroll-margin-top: 96px;
}

/* ---------- EYEBROW ---------- */
/* Small-caps card label (insight + perspective cards). The numbered section
   kicker that also used this class was mock scaffolding and has been removed. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow.is-green {
  color: #4e8b2a;
}
.eyebrow.is-orange {
  color: #c85f1f;
}

.section-head {
  max-width: 720px;
  margin-bottom: 3rem;
}
.section-head--narrow {
  max-width: 780px;
}
.section-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  margin: 0.9rem 0 1rem;
  line-height: 1.12;
  letter-spacing: -0.025em;
  background: linear-gradient(120deg, #122f57 0%, #2e6fbe 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.section-head p {
  font-size: 1.08rem;
  color: var(--slate);
}
.section-head p strong {
  color: var(--ink);
  font-weight: 700;
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* The counterpart to .section-head: a "view all →" row under a grid. Mirrors
   .hero-ctas' geometry so a .btn sits the same way in both places. */
.section-foot {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.section-foot.center {
  justify-content: center;
}

/* ---------- BUTTONS (formal, restrained) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  padding: 0.85rem 1.7rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  transition:
    background 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease),
    transform 0.2s var(--ease);
  cursor: pointer;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 37, 71, 0.16);
}
.btn-primary:hover {
  background: var(--blue-dark);
  box-shadow: 0 6px 16px -6px rgba(46, 111, 190, 0.4);
}
.btn-secondary {
  background: #fff;
  border-color: var(--line-2);
  color: var(--ink);
}
.btn-secondary:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.btn-sm {
  padding: 0.6rem 1.2rem;
  font-size: 0.875rem;
}
.btn-ghost {
  color: var(--blue);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0;
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}
.btn-ghost:hover {
  color: var(--blue-dark);
  gap: 0.55rem;
}
/* opt-in, not inherited: a bare .btn-ghost stays blue even inside an accented
   ancestor. Two classes beat the one above. */
.btn-ghost:is(.accent-blue, .accent-green, .accent-orange) {
  color: var(--accent);
}
.btn-ghost:is(.accent-blue, .accent-green, .accent-orange):hover {
  color: var(--accent-deep);
}
/* opt-in, not inherited: a bare .btn-ghost stays blue even inside an accented
   ancestor. Two classes beat the one above. */
.btn-ghost:is(.accent-blue, .accent-green, .accent-orange) {
  color: var(--accent);
}
.btn-ghost:is(.accent-blue, .accent-green, .accent-orange):hover {
  color: var(--accent-deep);
}
.btn-text {
  background: none;
  border: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0;
}
.btn-text:hover {
  color: var(--blue);
}

/* ---------- HEADER ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.site-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--blue),
    var(--cyan) 50%,
    var(--orange)
  );
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: rgba(15, 37, 71, 0.08);
  box-shadow: 0 10px 30px -14px rgba(15, 37, 71, 0.22);
}
.site-header.scrolled::after {
  opacity: 0.9;
}
/* transparent-nav (over hero) light-on-dark states */
.logo-img {
  transition: opacity 0.25s var(--ease);
}
/* The toggle stays on the transparent header strip over the dark hero, so it
   keeps its light state at every width. */
.site-header:not(.scrolled) .nav-toggle span {
  background: #fff;
}
@media (min-width: 1081px) {
  .site-header:not(.scrolled) .nav-row > a {
    color: rgba(255, 255, 255, 0.92);
  }
  .site-header:not(.scrolled) .nav-row > a:hover {
    color: #fff;
  }
  /* Desktop only, like the links above: under 1081px these chevrons sit inside
     the white slide-in panel, where light-on-dark renders them invisible. */
  .site-header:not(.scrolled) .dd-toggle {
    color: rgba(255, 255, 255, 0.65);
  }
}
.header-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 82px;
}
.logo {
  display: flex;
  align-items: center;
}
/* two logo variants: dark-bg logo over hero, light-bg logo when scrolled */
.logo-light {
  display: none;
}
.site-header.scrolled .logo-dark {
  display: none;
}
.site-header.scrolled .logo-light {
  display: block;
}
.logo-img {
  height: 62px;
  width: auto;
}
.main-nav ul {
  display: flex;
  gap: 0.9rem;
}
.nav-row > a {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--slate);
  transition: color 0.15s;
  white-space: nowrap;
}
.nav-row > a:hover {
  color: var(--blue);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 32px;
  height: 24px;
  position: relative;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: 0.2s;
}
.nav-toggle span:nth-child(1) {
  top: 0;
}
.nav-toggle span:nth-child(2) {
  top: 11px;
}
.nav-toggle span:nth-child(3) {
  top: 22px;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  top: 11px;
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  top: 11px;
  transform: rotate(-45deg);
}

@media (max-width: 1080px) {
  /* Sized by height, NOT bottom:0. .site-header.scrolled carries a
     backdrop-filter, and a filtered element becomes the containing block for
     its position:fixed descendants   so past the hero this panel's insets stop
     resolving against the viewport and resolve against the header's own 82px
     box, where bottom:0 collapses it to zero height (the menu "disappears").
     top/left/right are identical either way; an explicit height is too. */
  .main-nav {
    position: fixed;
    top: 82px;
    left: 0;
    right: 0;
    height: calc(100vh - 82px);
    height: calc(100dvh - 82px);
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transform: translateX(100%);
    transition: transform 0.3s var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-nav.is-open {
    transform: translateX(0);
  }
  .main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 1rem 1.5rem 2rem;
  }
  .main-nav li {
    border-bottom: 1px solid var(--line);
  }
  .nav-row > a {
    display: block;
    padding: 1rem 0;
    font-size: 1.05rem;
    color: var(--ink);
    white-space: normal;
  }
  .header-actions .btn-sm.btn-primary {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
  /* the panel is a full-screen overlay   stop the page behind it from scrolling */
  body.nav-open {
    overflow: hidden;
  }
}

/* ---------- NAV DROPDOWNS / MEGA MENU ---------- */
.main-nav li.has-dropdown {
  position: relative;
}
.nav-row {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}
.dd-toggle {
  background: none;
  border: none;
  padding: 0.2rem;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-light);
}
.dd-toggle .chev {
  transition: transform 0.2s var(--ease);
}
.main-nav li.has-dropdown:hover .dd-toggle .chev,
.main-nav li.has-dropdown:focus-within .dd-toggle .chev,
.main-nav li.has-dropdown.is-open .dd-toggle .chev {
  transform: rotate(180deg);
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
  width: 340px;
  max-width: 90vw;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.18s var(--ease),
    transform 0.18s var(--ease);
  z-index: 80;
}
.nav-dropdown.dd-wide {
  width: 600px;
}
.nav-dropdown.dd-right {
  left: auto;
  right: 0;
}
/* invisible hover-bridge across the 14px gap so the menu stays open while the
   cursor travels from the nav item down into the dropdown (desktop only) */
@media (min-width: 1081px) {
  .nav-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
  }
}
.main-nav li.has-dropdown:hover .nav-dropdown,
.main-nav li.has-dropdown:focus-within .nav-dropdown,
.main-nav li.has-dropdown.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.dd-overview {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  padding-bottom: 0.9rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.dd-overview:hover {
  color: var(--blue);
}
.dd-columns {
  display: flex;
  gap: 2rem;
}
.dd-col {
  flex: 1;
  min-width: 0;
}
.dd-col-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate-light);
  margin: 1rem 0 0.3rem;
}
.dd-col-label:hover {
  color: var(--blue);
}
.dd-item {
  display: flex;
  gap: 0.8rem;
  padding: 0.6rem;
  align-items: flex-start;
  border-radius: 12px;
  transition: background 0.18s var(--ease);
}
.dd-item > div:last-child {
  min-width: 0;
  flex: 1;
}
.dd-item:hover {
  background: var(--mist);
}
.dd-icon {
  background: var(--accent, var(--blue));
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
  box-shadow: 0 4px 12px -4px rgba(15, 37, 71, 0.35);
  transition: transform 0.25s var(--spring);
}
.dd-icon svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}
.dd-item:hover .dd-icon {
  transform: scale(1.1) rotate(-4deg);
}
.dd-item h5 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.2rem;
}
.dd-item h5 .a {
  font-weight: 400;
  color: var(--slate-light);
  transition: transform 0.15s;
  display: inline-block;
  margin-left: 0.3rem;
}
.dd-item:hover h5 .a {
  transform: translateX(3px);
  color: var(--blue);
}
.dd-item p {
  font-size: 0.8rem;
  color: var(--slate);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 1080px) {
  .nav-row {
    justify-content: space-between;
  }
  /* 44px minimum: the chevron is the only way to open a submenu on touch */
  .dd-toggle {
    padding: 0.5rem;
    min-width: 44px;
    min-height: 44px;
  }
  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border: none;
    background: var(--mist);
    width: auto;
    max-width: none;
    border-radius: 12px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition:
      max-height 0.3s var(--ease),
      padding 0.3s var(--ease);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* .dd-wide's 600px is 2 classes and outranks width:auto above — without
     this the wide menus stop short on tablets and overflow a phone */
  .nav-dropdown.dd-wide {
    width: auto;
  }
  .main-nav li.has-dropdown.is-open .nav-dropdown {
    max-height: 2400px;
    padding: 1rem;
    margin-bottom: 0.75rem;
  }
  .dd-columns {
    flex-direction: column;
    gap: 0;
  }
  /* the slide-in panel lists every card   heading + icon only, no blurb */
  .dd-item {
    align-items: center;
  }
  .dd-item p {
    display: none;
  }
  .dd-item h5 {
    margin: 0;
  }
  .dd-icon {
    margin-top: 0;
  }
  .main-nav li {
    border-bottom: none;
  }
  .main-nav li.has-dropdown {
    border-bottom: 1px solid var(--line);
  }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 9.5rem 0 7rem;
  color: #fff;
  isolation: isolate;
  background: oklch(0.24 0.075 252);
}
.hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.2) brightness(0.58) contrast(1.05) saturate(1.05);
  animation: heroZoom 30s ease-in-out infinite alternate;
}
.hero-photo .tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    oklch(0.24 0.075 252 / 0.82) 0%,
    oklch(0.24 0.075 252 / 0.55) 55%,
    oklch(0.24 0.075 252 / 0.4) 100%
  );
}
@keyframes heroZoom {
  0% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1.12);
  }
}
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(4, 9, 24, 0.55) 0%,
    rgba(4, 9, 24, 0) 24%
  );
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(0deg, oklch(0.24 0.075 252) 0%, transparent 22%);
}
/* Home: the hero image is finished client art that is already dark, so it gets a lighter version
   of the shared treatment above (brightness .58 -> .72, tint .82/.55/.40 -> .70/.42/.28). */
.hero--art .hero-photo img {
  filter: grayscale(0.2) brightness(0.9) contrast(1.05) saturate(1.05);
}
.hero--art .hero-photo .tint {
  background: linear-gradient(
    100deg,
    oklch(0.24 0.075 252 / 0.7) 0%,
    oklch(0.24 0.075 252 / 0.42) 55%,
    oklch(0.24 0.075 252 / 0.28) 100%
  );
}
.hero-inner {
  position: relative;
  z-index: 2;
}
.hero-inner > div {
  max-width: 600px;
}
.hero h1 {
  font-size: clamp(2.9rem, 6.2vw, 4.6rem);
  line-height: 1.04;
  color: #fff;
  margin: 1.2rem 0 1.5rem;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-shadow: 0 2px 26px rgba(2, 8, 23, 0.5);
}
.hero h1 .accent-gold {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  background: linear-gradient(100deg, #ffce96, #ff9a4c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding: 0 0.06em;
}
.hero h1 .accent-sky {
  color: #2e6fbe;
}
@keyframes gradShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.hero p.lead {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  max-width: 560px;
  margin-bottom: 1rem;
  text-shadow: 0 2px 22px rgba(2, 8, 23, 0.45);
}
.hero p.lead-sub {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 2.4rem;
  max-width: 560px;
}
.hero p.lead strong {
  color: #7fe9e0;
  font-weight: 700;
}
.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.hero .btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}
.hero .btn-text {
  color: #fff;
}
.hero .btn-text:hover {
  color: #8fe0f2;
}

/* ---------- SHARED GLASS CARD ---------- */
.pillar-card,
.product-card,
.proof-card,
.insight-card,
.cluster-card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease),
    background 0.3s var(--ease);
  transform-style: preserve-3d;
}
.pillar-card:hover,
.product-card:hover,
.proof-card:hover,
.insight-card:hover,
.cluster-card:hover {
  border-color: rgba(46, 111, 190, 0.28);
  background: var(--glass-strong);
  box-shadow: var(--shadow-lg);
  /* Restated from the rule above, because `.reveal` (REVEAL / MOTION, below) sits
     later in this file at equal specificity and replaces that whole shorthand with
     `opacity, transform` at .8s. On a revealed card that left these three snapping
     instead of easing, and ran the cursor tilt at the reveal's timing. `:hover`
     makes this (0,2,0), which beats `.reveal`'s (0,1,0) wherever it sits. */
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease),
    background 0.3s var(--ease);
}
.card-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  background: radial-gradient(
    240px 240px at var(--mx, 50%) var(--my, 50%),
    rgba(46, 111, 190, 0.1),
    transparent 60%
  );
}
.pillar-card:hover .card-glow,
.product-card:hover .card-glow,
.proof-card:hover .card-glow,
.insight-card:hover .card-glow,
.cluster-card:hover .card-glow {
  opacity: 1;
}

/* ---------- GRIDS / PILLAR CARDS ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}
.pillar-dash {
  width: 34px;
  height: 4px;
  border-radius: 2px;
  margin-bottom: 1.1rem;
}
.pillar-dash.blue {
  background: var(--blue);
}
.pillar-dash.green {
  background: var(--green);
}
.pillar-dash.orange {
  background: var(--orange);
}
.pillar-card h3 {
  font-size: 1.2rem;
  margin: 0.75rem 0 0.7rem;
  color: var(--ink);
}
.pillar-card p {
  font-size: 0.95rem;
}
.pillar-card ul {
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.pillar-card li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--slate);
  align-items: flex-start;
}
.pillar-card li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  margin-top: 0.45rem;
  flex-shrink: 0;
}
.pillar-card.green-theme li::before {
  background: var(--green);
}
.pillar-card.orange-theme li::before {
  background: var(--orange);
}
.pillar-card .cta-row {
  margin-top: auto;
  padding-top: 1.4rem;
}

/* ---------- PRODUCTS ---------- */
.product-icon {
  background: var(--accent-soft, var(--blue-soft));
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--spring);
}
.product-card:hover .product-icon {
  transform: scale(1.08) rotate(-4deg);
}
.product-card .tag,
.platform-mock-card .tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}
.product-card h3 {
  font-size: 1.15rem;
  margin: 0.5rem 0 0.7rem;
  color: var(--ink);
}
.product-card p {
  font-size: 0.93rem;
  flex-grow: 1;
}
.product-card .cta-row {
  margin-top: 1.3rem;
}

/* ---------- MISSION ---------- */
.mission-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.mission-item {
  display: flex;
  flex-direction: column;
}
.mission-image {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.2rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  position: relative;
}
.mission-image img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.mission-item:hover .mission-image img {
  transform: scale(1.06);
}
.mission-kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.5rem;
}
.mission-item h4 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.mission-item p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--slate);
  margin: 0 0 0.9rem;
}
.mission-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blue);
}
.mission-more:hover {
  color: var(--blue-dark);
  gap: 0.6rem;
}
@media (max-width: 900px) {
  .mission-grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
}

/* ---------- CORE POSITIONING ARTICLE ---------- */
.cp-article {
  max-width: 820px;
  margin-top: 0.5rem;
}
.cp-article .vc-lede-light {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  line-height: 1.32;
  color: var(--ink);
  margin-bottom: 1.8rem;
  letter-spacing: 0.01em;
}
.cp-article p {
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--slate);
  margin: 0 0 1.3rem;
}
.cp-article p:last-child {
  margin-bottom: 0;
}
/* line-height is .78, not .72: at this size .72 gives the first-letter a 52.25px line box while
   Instrument Serif's cap needs ~52.1px of ink plus leading, so Chrome shears ~1.2px off the top of
   the glyph. Measured across .72-1.0   everything >= .78 renders the cap at its full 52.1px, and
   .78 keeps it within 1px of its original position without changing the paragraph height, so the
   cap still spans two lines. Invisible on a pointed 'A'; obvious on a flat-topped 'E'.
   detail.css:97-111 reached the same value for .rt first; this brings .cp-article in line. */
.cp-article p:not(.vc-lede-light)::first-letter {
  float: left;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 4.2em;
  line-height: 0.78;
  margin: 0.05em 0.12em 0 0;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.cp-article strong {
  color: var(--ink);
  font-weight: 700;
}
.cp-article a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(46, 111, 190, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
.cp-article a:hover {
  text-decoration-color: var(--blue);
}

/* ---------- ADVISORY ---------- */
.ac-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3rem;
  align-items: start;
  margin-top: 1.5rem;
}
.ac-motto {
  color: var(--ink);
  font-size: clamp(2.2rem, 4.4vw, 3.1rem);
  line-height: 1.12;
  margin: 0 0 1.4rem;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.ac-motto .accent-sky {
  background: var(--brand-grad);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradShift 8s ease infinite;
}
.ac-copy p {
  color: var(--slate);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 420px;
  margin-bottom: 1.8rem;
}
.ac-list {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ac-row {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.5rem 1.6rem;
  border-bottom: 1px solid var(--line);
  transition: background 0.2s var(--ease);
}
/* .ac-row is an <a> when the NumberedCard has a Link; a <div> when it does not. */
a.ac-row {
  color: inherit;
  text-decoration: none;
}
.ac-row:last-child {
  border-bottom: none;
}
.ac-row:hover {
  background: rgba(46, 111, 190, 0.05);
}
.ac-num {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.ac-row h4 {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}
.ac-row p {
  color: var(--slate);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}
.ac-arrow {
  color: var(--slate-light);
  margin-left: auto;
  flex-shrink: 0;
  transition:
    transform 0.2s var(--spring),
    color 0.2s;
}
.ac-row:hover .ac-arrow {
  transform: translateX(5px);
  color: var(--blue);
}
@media (max-width: 800px) {
  .ac-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ---------- VALUE CHAIN ---------- */
.value-chain-words {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(1.7rem, 4.2vw, 2.8rem);
  line-height: 1.35;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55em;
  margin: 0;
}
.vc-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
  margin-top: 1.5rem;
}
.vc-article {
  max-width: none;
}
.vc-article p {
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--slate);
  margin: 0 0 1.3rem;
}
.vc-article p:last-child {
  margin-bottom: 0;
}
.vc-article .vc-lede {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 1.6rem;
  letter-spacing: 0.01em;
}
.vc-article strong {
  color: var(--ink);
  font-weight: 700;
}
.vc-article a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(46, 111, 190, 0.4);
  text-underline-offset: 3px;
}
.vc-article a:hover {
  text-decoration-color: var(--blue);
}
.vc-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.vc-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 440px;
}
@media (max-width: 900px) {
  .vc-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .vc-image {
    order: -1;
  }
  .vc-image img {
    min-height: 280px;
  }
}

/* ---------- Value Chain 3D roller (one card at a time) ---------- */
.vc-roller {
  position: relative;
  margin-top: 1.7rem;
}
/* pinned scroll-scrub: the section gets extra scroll length and its content
   sticks in place while scrolling flips the cards, then the page continues */
/* Section (Bare): the variant supplies no .wrap and no padding   the component
   inside owns its own container and its own scroll track. */
.section--bare {
  padding: 0;
}
/* The scroll track. Height follows the card count, so adding a fifth card
   lengthens the scrub instead of silently compressing it. */
.vc-track {
  height: calc(var(--vc-cards, 4) * 70vh);
}
.vc-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vc-stage {
  display: grid;
  perspective: 1300px;
}
.vc-card {
  grid-area: 1/1;
  display: flex;
  align-items: center;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 2rem 2.1rem;
  min-height: 190px;
  transform-origin: center bottom;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transform: translateY(52px) translateZ(-180px) scale(0.86);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.85s var(--ease-out),
    opacity 0.6s ease;
}
.vc-card.is-active {
  transform: translateY(0) translateZ(0) scale(1);
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.vc-card p {
  margin: 0;
}
.vc-dots {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.vc-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 99px;
  background: var(--line-2);
  cursor: pointer;
  transition: 0.35s var(--spring);
}
.vc-dot.active {
  width: 28px;
  background: var(--brand-grad);
}
/* small screens / reduced motion: no pin   plain stacked list of cards */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .vc-track {
    height: auto;
    padding: 4rem 0;
  }
  .vc-sticky {
    position: static;
    min-height: 0;
    display: block;
  }
  .vc-stage {
    display: block;
  }
  .vc-card {
    grid-area: auto;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    transition: none;
    margin-bottom: 1rem;
    min-height: 0;
    padding: 1.8rem 1.9rem;
  }
  .vc-dots {
    display: none;
  }
}

/* ---------- PARTNER LOGO MARQUEE ---------- */
/* Two full-bleed rows scrolling in opposite directions. Four logos are authored
   per row; buildMarquee() in index.html clones the set to cover the viewport,
   duplicates it, and writes --marquee-duration from the measured width so both
   rows travel at the same pixels-per-second whatever their content weighs. */
/* Edge fade is a mask, not a white overlay gradient, so the strip stays correct
   if this band is ever given `section--tint`. */
.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
}
.logo-marquee + .logo-marquee {
  margin-top: 2.4rem;
}
.logo-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.logo-marquee-set {
  display: flex;
  align-items: center;
  gap: 4.5rem;
  padding-right: 4.5rem;
}
.logo-marquee-set img {
  height: 44px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  display: block;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease);
}
.logo-marquee-set img:hover {
  opacity: 1;
}
/* The animation is gated on the attribute buildMarquee() sets, NOT on .logo-marquee
   itself, because translateX(-50%) is only seam-free once the clones exist. With
   JS off   or under reduced motion, where buildMarquee() bails   the attribute is
   never written, and the rules below leave the four authored logos centred and
   wrapped: a static partner row rather than half a set sliding out of frame. */
.logo-marquee[data-marquee-built] .logo-marquee-track {
  animation: logoScroll var(--marquee-duration, 40s) linear infinite;
}
.logo-marquee[data-marquee-built][data-marquee="right"] .logo-marquee-track {
  animation-direction: reverse;
}
.logo-marquee:not([data-marquee-built]) {
  -webkit-mask-image: none;
  mask-image: none;
}
.logo-marquee:not([data-marquee-built]) .logo-marquee-track {
  width: auto;
  flex-wrap: wrap;
  justify-content: center;
}
.logo-marquee:not([data-marquee-built]) .logo-marquee-set {
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 4rem;
  padding-right: 0;
}
@keyframes logoScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* Hover pauses the hovered row ONLY   the selector is scoped to that
   .logo-marquee, which is what keeps the other row running. No JS involved. */
@media (hover: hover) {
  .logo-marquee:hover .logo-marquee-track {
    animation-play-state: paused;
  }
}
@media (max-width: 720px) {
  .logo-marquee-set {
    gap: 2.8rem;
    padding-right: 2.8rem;
  }
  .logo-marquee-set img {
    height: 34px;
    max-width: 132px;
  }
}

/* ---------- BUSINESS DOMAINS ---------- */
.domain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
.domain-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.domain-grid.cols-5 {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1000px) {
  .domain-grid.cols-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 900px) {
  .domain-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .domain-grid.cols-3,
  .domain-grid.cols-5 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .domain-grid {
    grid-template-columns: 1fr;
  }
}
.domain-item {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.3s var(--ease),
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.domain-item:hover {
  transform: translateY(-4px);
  border-color: rgba(46, 111, 190, 0.28);
  box-shadow: var(--shadow-md);
}
.domain-item:hover h4 {
  color: var(--blue-dark);
}
.domain-icon {
  background: var(--accent, var(--blue));
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    transform 0.3s var(--spring),
    box-shadow 0.3s;
  box-shadow: 0 6px 16px -6px rgba(15, 37, 71, 0.4);
}
.domain-item:hover .domain-icon {
  transform: scale(1.1) rotate(-4deg);
  box-shadow: 0 10px 22px -6px rgba(46, 111, 190, 0.5);
}
.domain-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.domain-item h4 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  transition: color 0.2s;
}
.domain-item p {
  font-size: 0.85rem;
  color: var(--slate);
  margin: 0;
  line-height: 1.55;
}

/* ---------- TRUST ---------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem 1.8rem;
}
.trust-item {
  position: relative;
  padding-top: 1.3rem;
}
.trust-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 2px;
  background: var(--brand-grad);
  border-radius: 2px;
}
.trust-q {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
  text-wrap: balance;
}
.trust-item p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--slate);
  margin: 0;
}
@media (max-width: 900px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .trust-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- INDUSTRIES ---------- */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.industry-photo-card {
  position: relative;
  display: block;
  height: 300px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.industry-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.industry-photo-card:hover img {
  transform: scale(1.08);
}
.industry-photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 26, 58, 0.9) 0%,
    rgba(10, 26, 58, 0.08) 62%
  );
}
.industry-pill {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 2;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.3s var(--spring);
}
.industry-photo-card:hover .industry-pill {
  transform: translateX(5px);
}
@media (max-width: 900px) {
  .industry-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- PLATFORM FEATURE ---------- */
.platform-feature {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 3rem;
  min-height: 420px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.platform-feature-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.platform-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(10, 26, 58, 0.94) 0%,
    rgba(14, 37, 71, 0.8) 42%,
    rgba(46, 111, 190, 0.25) 74%,
    rgba(14, 156, 151, 0.2) 100%
  );
  z-index: 1;
}
.platform-feature-overlay {
  position: relative;
  z-index: 2;
  max-width: 440px;
  padding: 3rem 2.4rem;
  color: #fff;
}
.platform-feature-overlay h3 {
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}
.platform-feature-overlay p {
  color: #cbd8ec;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1.3rem;
}
.platform-feature-link {
  color: #7fd0ec;
  font-weight: 600;
  font-size: 0.92rem;
}
.platform-feature-link:hover {
  color: #fff;
}
.platform-mock {
  position: relative;
  z-index: 2;
  margin-left: auto;
  margin-right: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.platform-mock-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  padding: 0.85rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  min-width: 220px;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s var(--spring);
}
.platform-feature:hover .platform-mock-card {
  transform: translateX(-4px);
}
@media (max-width: 800px) {
  .platform-mock {
    display: none;
  }
  .platform-feature {
    min-height: 340px;
  }
  .platform-feature-overlay {
    max-width: none;
    padding: 2.2rem 1.6rem;
  }
}

/* ---------- PROOF ---------- */
.proof-feature {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.4rem;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  margin-bottom: 1.5rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}
@media (max-width: 800px) {
  .proof-feature {
    grid-template-columns: 1fr;
  }
}
.proof-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.9rem;
}
.proof-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}
.proof-feature h3 {
  font-size: 1.55rem;
  margin-bottom: 0.8rem;
  color: var(--ink);
}
.proof-feature p {
  font-size: 0.97rem;
  margin-bottom: 1.1rem;
}
.proof-feature ul {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.3rem;
}
.proof-feature li {
  font-size: 0.9rem;
  color: var(--slate);
  display: flex;
  gap: 0.6rem;
}
.proof-feature li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  margin-top: 0.5rem;
  flex-shrink: 0;
}
.proof-stat {
  background: linear-gradient(
    160deg,
    rgba(232, 114, 44, 0.14),
    rgba(232, 114, 44, 0.03)
  );
  border: 1px solid rgba(232, 114, 44, 0.26);
  border-radius: var(--radius-sm);
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
}
.proof-stat .big {
  font-family: "Space Grotesk", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #e8722c, #c4551b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.proof-stat .label {
  font-size: 0.85rem;
  color: var(--ink);
  font-weight: 600;
}
.proof-stat .desc {
  font-size: 0.85rem;
  color: var(--slate);
}
.proof-stat .desc--spaced {
  margin-top: 0.6rem;
}
.proof-stat .desc--spaced {
  margin-top: 0.6rem;
}
.proof-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 800px) {
  .proof-row {
    grid-template-columns: 1fr;
  }
}
.proof-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
  color: var(--ink);
}
.proof-card p {
  font-size: 0.92rem;
  flex-grow: 1;
  margin-bottom: 1.2rem;
}
.proof-card.green-theme .proof-badge {
  color: #4e8b2a;
}
.proof-card.green-theme .proof-badge::before {
  background: var(--green);
}
.proof-card.blue-theme .proof-badge {
  color: var(--blue);
}
.proof-card.blue-theme .proof-badge::before {
  background: var(--blue);
}

/* ---------- INDUSTRIES PILLS ---------- */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}
.pill {
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--slate);
  background: #fff;
  transition: 0.2s var(--ease);
}
.pill:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-soft);
  transform: translateY(-2px);
}

/* ============================================================================
   PROCESS FLOW (.flow)
   Horizontal row of nodes joined by connectors on desktop; stacks to a
   vertical timeline on mobile. Uses shared tokens only.
   Lives here, not in advisory.css, because detail pages use it too and may not
   load advisory.css (detail.css:7-10). The 3 landing pages that used it from
   advisory.css also load styles.css, so nothing changed for them.
   ============================================================================ */
.flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 1rem;
}
.flow-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0 1.1rem;
  text-align: center;
  align-items: center;
}
/* connector line running through the node numbers */
.flow-step::before {
  content: "";
  position: absolute;
  top: 22px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--line-2), var(--blue));
  z-index: 0;
}
.flow-step:first-child::before {
  display: none;
}
.flow-num {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 8px 18px -6px rgba(46, 111, 190, 0.5);
  transition: transform 0.3s var(--spring);
}
.flow-step:hover .flow-num {
  transform: scale(1.08) translateY(-2px);
}
.flow-step > div {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.flow-step h4 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
  text-wrap: balance;
}
.flow-step p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--slate);
  margin: 0;
}
/* colour the chain from advisory-blue through delivery-green to managed-orange */
.flow-step:nth-child(4) .flow-num {
  background: var(--green);
  box-shadow: 0 8px 18px -6px rgba(90, 165, 49, 0.5);
}
.flow-step:nth-child(5) .flow-num {
  background: var(--orange);
  box-shadow: 0 8px 18px -6px rgba(232, 114, 44, 0.5);
}
@media (max-width: 820px) {
  .flow {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: left;
  }
  .flow-step {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    text-align: left;
    padding: 0 0 1.8rem 0;
  }
  .flow-step:last-child {
    padding-bottom: 0;
  }
  /* vertical connector down the left edge, through the numbers */
  .flow-step::before {
    top: 46px;
    left: 22px;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, var(--blue), var(--line-2));
  }
  /* stacked, each line runs down to the NEXT node   so the first step needs
     one and the last must not (the desktop first-child rule would hide 1→2) */
  .flow-step:first-child::before {
    display: block;
  }
  .flow-step:last-child::before {
    display: none;
  }
}

/* 6-step variant   same modifier convention as .domain-grid.cols-3/.cols-5.
   The 5-step chain colours nodes 4 and 5; a 6-step chain shifts them one along
   so the run still ends blue → green → orange. */
.flow.cols-6 {
  grid-template-columns: repeat(6, 1fr);
}
.flow.cols-6 .flow-step:nth-child(4) .flow-num {
  background: var(--blue);
  box-shadow: 0 8px 18px -6px rgba(46, 111, 190, 0.5);
}
.flow.cols-6 .flow-step:nth-child(5) .flow-num {
  background: var(--green);
  box-shadow: 0 8px 18px -6px rgba(90, 165, 49, 0.5);
}
.flow.cols-6 .flow-step:nth-child(6) .flow-num {
  background: var(--orange);
  box-shadow: 0 8px 18px -6px rgba(232, 114, 44, 0.5);
}
/* 6 across is too tight before the 820px collapse   go 3-up in between. The
   connector is drawn at left:-50%, so it has to be dropped on each row's first
   node or a line hangs off the left edge. */
@media (max-width: 1100px) and (min-width: 821px) {
  .flow.cols-6 {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 2.2rem;
  }
  .flow.cols-6 .flow-step:nth-child(3n + 1)::before {
    display: none;
  }
}
/* Must follow .flow.cols-6 above: at 2 classes it outranks the 1-class
   .flow{1fr} in the 820px collapse, which otherwise leaves 6 columns on a phone
   and widens the whole page. */
@media (max-width: 820px) {
  .flow.cols-6 {
    grid-template-columns: 1fr;
  }
}

/* .pill as a control. The decorative <span class="pill"> needs neither, but a
   <button class="pill"> inherits the UA font and an arrow cursor, because
   there is no button{font:inherit} reset anywhere in this project. */
.pill:is(button) {
  font: inherit;
  cursor: pointer;
}
.pill.is-active {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-soft);
}
.pill[disabled] {
  opacity: 0.45;
  cursor: default;
}
.pill[disabled]:hover {
  border-color: var(--line);
  color: var(--slate);
  background: #fff;
  transform: none;
}

/* ---------- CLUSTER ---------- */
.cluster-card .pillar-dash {
  margin-bottom: 1rem;
}
.cluster-card h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: 0.75rem;
  min-height: 3rem;
  color: var(--ink);
}
.cluster-card p {
  font-size: 0.92rem;
  flex-grow: 1;
}
.cluster-card .cta-row {
  margin-top: 1.4rem;
}

/* ---------- INSIGHTS ---------- */
.insight-card h3 {
  font-size: 1.18rem;
  line-height: 1.35;
  margin: 0.8rem 0 0.75rem;
  color: var(--ink);
}
.insight-card p {
  font-size: 0.92rem;
  flex-grow: 1;
}
.insight-card .cta-row {
  margin-top: 1.3rem;
}

/* ---------- NUMBERS ---------- */
.numbers {
  position: relative;
  overflow: hidden;
}
.numbers .section-head h2 {
  background: linear-gradient(120deg, #122f57, #2e6fbe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.numbers .section-head p {
  color: var(--slate);
}
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 2;
}
@media (max-width: 800px) {
  .numbers-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .numbers-grid {
    grid-template-columns: 1fr;
  }
}
.stat {
  position: relative;
  padding-left: 1.6rem;
}
.stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  bottom: 0.1rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--blue), rgba(46, 111, 190, 0));
}
.stat .num {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  background: linear-gradient(160deg, #122f57, #2e6fbe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.stat .label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blue);
  margin: 0.6rem 0 0.4rem;
}
.stat .desc {
  font-size: 0.86rem;
  color: var(--slate);
  line-height: 1.5;
}

/* ---------- FOOTER ---------- */
.site-footer {
  position: relative;
  background: oklch(0.24 0.075 252);
  color: rgba(255, 255, 255, 0.72);
  padding: 5rem 0 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 500px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
.footer-grid h4 {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer-grid ul {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.footer-grid a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
  transition: 0.15s;
}
.footer-grid a:hover {
  color: var(--cyan);
}
.footer-brand .logo-text {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  letter-spacing: 0.02em;
}
.footer-logo-img {
  height: 72px;
  width: auto;
  margin-bottom: 0.5rem;
}
.footer-brand p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
  margin: 0.9rem 0 1rem;
  max-width: 280px;
}
.footer-brand .footer-email {
  color: #fff;
  font-weight: 500;
}
.footer-brand .footer-email {
  color: #fff;
  font-weight: 500;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  position: relative;
  z-index: 1;
}
.footer-bottom a {
  color: rgba(255, 255, 255, 0.55);
}
.footer-bottom a:hover {
  color: #fff;
}

/* ---------- REVEAL / MOTION ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.99);
  transition:
    opacity 0.8s var(--ease-out) var(--reveal-delay, 0s),
    transform 0.8s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* The stagger is a CUSTOM PROPERTY, never `transition-delay`   do not "simplify"
   it back. transition-delay is a list that CYCLES to fill transition-property, and
   transition-delay sticks to an element for good, so a stagger written that way
   lands on whatever the element transitions later. The card `:hover` above swaps
   the property list to `transform, box-shadow, border-color, background` (4 items),
   which cycled a 2-item delay straight back onto `transform`: the cursor tilt on
   cards 2 and 3 of a .grid-3 ran .09s / .18s behind the pointer while card 1   no
   stagger rule, no delay   tracked cleanly. Bound inside the shorthand here, the
   delay belongs to `opacity` by position and cannot reach any other property.
   The entrance still reads as staggered because opacity is what gates a card
   becoming visible. Same mechanism in advisory.css (.grid-4) and detail.css
   (.related-rail). */
.grid-3 > .reveal:nth-child(3n + 2) {
  --reveal-delay: 0.09s;
}
.grid-3 > .reveal:nth-child(3n + 3) {
  --reveal-delay: 0.18s;
}

@media (prefers-reduced-motion: reduce) {
  *,
  body::before,
  #spotlight {
    animation: none !important;
  }
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-photo img {
    animation: none;
  }
}

/* ---------- SLIDER (JS-built carousel) ---------- */
.slider {
  position: relative;
}
.slider-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  cursor: grab;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 0.75rem 0.25rem;
  margin: -0.75rem -0.25rem;
}
.slider-viewport::-webkit-scrollbar {
  display: none;
}
.slider-viewport.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.slider-viewport.dragging * {
  pointer-events: none;
}
.slider-track {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
}
.slider-track > * {
  flex: 0 0 calc((100% - 3rem) / 3);
  scroll-snap-align: start;
  min-width: 0;
}
@media (max-width: 900px) {
  .slider-track > * {
    flex-basis: calc((100% - 1.5rem) / 2);
  }
}
@media (max-width: 640px) {
  .slider-track > * {
    flex-basis: 100%;
  }
}
.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 2rem;
}
.slider-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: 0.22s var(--ease);
}
.slider-arrow:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-soft);
}
.slider-arrow:active {
  transform: scale(0.94);
}
.slider-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.slider-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 99px;
  background: var(--line-2);
  cursor: pointer;
  transition: 0.35s var(--spring);
}
.slider-dot.active {
  width: 28px;
  background: var(--brand-grad);
}

/* ---------- SCROLL STACKS: pins + slide/tilt (pairs & chains) ---------- */
/* Every card except the last pins and slides out as the next rises over it.
   Solid section backgrounds (the banding) provide the occlusion.

   The pinned unit is `.pin-card`, not the section. Every component renders its
   own <section>, so a band like #products is TWO sections   a feature panel and
   a card grid   that has to pin as one. The JS in index.html groups sections
   sharing a data-pin value into a .pin-card, then groups consecutive cards into
   a .scroll-stack.

   NOTE: these use -of-type, not -child, on purpose. Sitecore's Experience
   Editor injects <code type="text/sitecore"> chrome elements as siblings
   inside placeholders. With :nth-child the ladder would shift and a trailing
   <code> would make the last card match :not(:last-child)   pinning it forever.
   .pin-card is a div, so -of-type still counts only cards and the chrome is
   ignored. No-op on this static page; required once these sections come from a
   Sitecore placeholder. */
.scroll-stack {
  position: relative;
}
.scroll-stack > .pin-card {
  position: relative;
  perspective: 1200px;
}
/* perspective only reaches DIRECT children, and the element being tilted is the
   section's .wrap   a grandchild of the card. preserve-3d on the section lets
   the wrap keep using the CARD's perspective. Putting perspective back on each
   section would work too, but a joined card would then project its two halves
   through two different perspective origins and they would shear apart. */
.scroll-stack > .pin-card > section {
  transform-style: preserve-3d;
}
.scroll-stack > .pin-card:not(:last-of-type) {
  position: sticky;
  top: 0;
}
.scroll-stack > .pin-card:nth-of-type(1) {
  z-index: 1;
}
.scroll-stack > .pin-card:nth-of-type(2) {
  z-index: 2;
}
.scroll-stack > .pin-card:nth-of-type(3) {
  z-index: 3;
}
.scroll-stack > .pin-card:nth-of-type(4) {
  z-index: 4;
}
/* The rounded top stays on the <section>, because that is the element that
   paints the background. Putting it on the card would need overflow:hidden to
   clip the section's square corners, and that would also clip the card shadows
   sitting near the band's edge. The drop shadow does belong to the card   it is
   drawn upward, outside the box. */
.scroll-stack > .pin-card:not(:first-of-type) > section:first-of-type {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.scroll-stack > .pin-card:not(:first-of-type) {
  box-shadow: 0 -26px 60px -24px rgba(15, 37, 71, 0.28);
}
.scroll-stack > .pin-card .wrap {
  transform-origin: center 22%;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-stack > .pin-card .wrap {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Seam inside a card that holds two sections. Derived from card membership, so
   there is no flag to author: the second section simply left its heading and
   paragraph empty. Without this the pair gets 6.5rem + 6.5rem where the design
   has the first block's own margin-bottom (3rem / 2.5rem / 1.5rem), plus a
   second .section::before hairline drawn across the middle of the band.

   display:flow-root is load-bearing. With padding-bottom:0 and no border, that
   margin-bottom would collapse out through .wrap and the <section>, shrinking
   the section's background box   on #proof that leaves a white stripe across
   the tinted band. */
.pin-card > section:not(:last-of-type) {
  padding-bottom: 0;
  display: flow-root;
}
.pin-card > section + section {
  padding-top: 0;
}
.pin-card > section + section::before {
  display: none;
}

/* Section banding lives on `.section` / `.section--tint` (see the top of this
   file). The #id override block that used to sit here is gone   it silently
   beat the classes in the markup, so 7 of 11 home sections carried a class
   that contradicted what they rendered. */