/* =========================================================
   CYVEX
   Light-dominant design system: white / light-grey surfaces,
   deep-navy banners, a single blue accent. Conservative,
   defence/aerospace (Airbus / Boeing) register. Source Sans 3.
   CSS variable NAMES are retained (templates reference them
   inline); only their values changed in the palette pivot.
   ========================================================= */

:root {
  /* ---- Palette (navy / blue / white / grey) ---- */
  --ink: #0B2545;          /* deep navy: nav, hero, footer, CTA panel, loader, navy bands */
  --dark: #0F2E50;         /* navy band variant */
  --dark-2: #143A60;       /* cards / panels / fields on navy */
  --dark-3: #2C4F76;       /* borders / hairlines on navy */
  --crimson: #1763C6;      /* ACCENT (blue): CTAs, links, eyebrows, icons, figures, radar */
  --crimson-dark: #0F4C9E; /* accent hover */
  --crimson-glow: rgba(23, 99, 198, 0.16);
  --crimson-rgb: 23, 99, 198;
  --blue-soft: #EAF2FC;    /* light blue tint */
  --grey: #55657B;         /* body text on light */
  --grey-light: #7E8DA1;   /* muted text on light */
  --off-white: #E8EFF8;    /* text on navy */
  --white: #FFFFFF;
  --paper: #FFFFFF;        /* default section surface */
  --light: #F2F6FB;        /* light grey-blue breather + light cards */
  --light-2: #E8EEF7;      /* card hover / subtle fills on light */
  --border: #DCE5F0;       /* light hairlines / card borders */
  --border-2: #C7D4E3;     /* stronger light border */
  --ink-text: #0C2138;     /* dark navy: headings + primary text on light */

  --font: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-head: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --eyebrow-tracking: 0.18em;

  --radius: 4px;
  --radius-sm: 3px;
  --radius-lg: 8px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-micro: 0.18s var(--ease);
  --t-base: 0.3s var(--ease);
  --t-entrance: 0.65s var(--ease-out);

  --section-pad-y: clamp(72px, 9vw, 132px);
  --section-pad-x: clamp(24px, 5vw, 80px);
  --container-max: 1320px;
  --container-narrow: 1040px;
  --nav-h: 74px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--grey);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--crimson); color: var(--white); }
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; top: -60px; left: 16px;
  background: var(--crimson); color: var(--white);
  padding: 10px 18px; z-index: 10000; font-size: 14px; font-weight: 600;
  border-radius: var(--radius); transition: top var(--t-micro);
}
.skip-link:focus { top: 16px; }

/* =========================================================
   Layout + surfaces (light default, navy modifier)
   ========================================================= */

.container { width: min(100% - 2 * var(--section-pad-x), var(--container-max)); margin-inline: auto; }
/* Narrow text column is left-anchored to the WIDE container's left edge (not
   centered), so every section across the site shares one consistent left edge. */
.container--narrow { width: min(100% - 2 * var(--section-pad-x), var(--container-narrow)); margin-inline: max(var(--section-pad-x), calc((100% - var(--container-max)) / 2)) auto; }

.section { padding: var(--section-pad-y) 0; position: relative; background: var(--white); color: var(--ink-text); }
.section--light { background: var(--light); }
.section--dark { background: var(--ink); color: var(--off-white); }
.section--dark-2 { background: var(--dark); color: var(--off-white); }

.section--glow::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 78% 18%, var(--crimson-glow) 0%, transparent 62%);
  pointer-events: none;
}
.section--glow > * { position: relative; z-index: 1; }

.section-header { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-header--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-header--center .eyebrow { justify-content: center; }
section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* =========================================================
   Typography
   ========================================================= */

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700; line-height: 1.08;
  color: var(--ink-text); letter-spacing: -0.015em;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--dark-2 h1, .section--dark-2 h2, .section--dark-2 h3, .section--dark-2 h4 { color: var(--white); }

h1 { font-size: clamp(40px, 6vw, 76px); letter-spacing: -0.02em; }
h2 { font-size: clamp(30px, 4.5vw, 52px); letter-spacing: -0.01em; margin-bottom: 22px; }
h3 { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.005em; margin-bottom: 12px; }
h4 { font-size: 16px; letter-spacing: 0.02em; margin-bottom: 12px; }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase; color: var(--crimson);
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--crimson); }
.section--dark .eyebrow, .section--dark-2 .eyebrow { color: #6FA8E8; }
.section--dark .eyebrow::before, .section--dark-2 .eyebrow::before { background: #6FA8E8; }

.lede { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--grey); max-width: 60ch; }
.section--dark .lede, .section--dark-2 .lede { color: var(--off-white); }

p { margin-bottom: 1.2em; }
p:last-child { margin-bottom: 0; }
.text-accent { color: var(--crimson); }
strong { color: var(--ink-text); font-weight: 700; }
.section--dark strong, .section--dark-2 strong { color: var(--white); }

.placeholder-tag { color: var(--crimson); font-weight: 600; border-bottom: 1px dashed rgba(var(--crimson-rgb), 0.5); }

/* =========================================================
   Buttons
   ========================================================= */

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: var(--radius); border: 1px solid transparent; white-space: nowrap;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-micro);
}
.btn--primary { background: var(--crimson); color: var(--white); border-color: var(--crimson); }
.btn--primary:hover { background: var(--crimson-dark); border-color: var(--crimson-dark); }
.btn--ghost { background: transparent; color: var(--crimson); border-color: var(--border-2); }
.btn--ghost:hover { border-color: var(--crimson); background: var(--blue-soft); }
.section--dark .btn--ghost, .section--dark-2 .btn--ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.3); }
.section--dark .btn--ghost:hover, .section--dark-2 .btn--ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }
.btn--arrow::after { content: '\2192'; display: inline-block; transition: transform var(--t-micro); }
.btn--arrow:hover::after { transform: translateX(4px); }
/* Mobile: let long button labels wrap instead of running off the screen. */
@media (max-width: 720px) {
  .btn { white-space: normal; max-width: 100%; padding-left: 22px; padding-right: 22px; }
}

/* =========================================================
   Brand mark / lockup (white on navy)
   ========================================================= */

.brand-mark { display: inline-flex; align-items: center; gap: 13px; color: var(--white); }
.brand-mark__icon { width: 50px; height: auto; flex-shrink: 0; color: var(--white); }
.brand-mark__text { display: flex; flex-direction: column; line-height: 1; }
.brand-mark__name { font-size: 22px; font-weight: 700; letter-spacing: 0.01em; color: inherit; }
.brand-mark__sub { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(232, 239, 248, 0.7); margin-top: 5px; }

/* =========================================================
   Navigation (navy banner)
   ========================================================= */

.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 900;
  transform: translateZ(0); /* own compositing layer - stops the fixed bar clipping on mobile scroll */
  background: transparent; border-bottom: 1px solid transparent;
  transition: background var(--t-base), border-color var(--t-base), backdrop-filter var(--t-base);
}
.nav.is-scrolled, .page--interior .nav {
  background: rgba(11, 37, 69, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.nav__inner { width: min(100% - 2 * var(--section-pad-x), var(--container-max)); margin: 0 auto; height: 96px; display: flex; align-items: center; gap: 24px; transition: height var(--t-base); }
.nav__brand .brand-mark__icon { width: 64px; color: var(--white); transition: width var(--t-base); }
.nav__brand .brand-mark__name { font-size: 27px; color: var(--white); transition: font-size var(--t-base); }
.nav__brand .brand-mark__sub { transition: font-size var(--t-base); }
/* Shrink-on-scroll: big at the top of every page, slimmer once scrolled. */
.nav.is-scrolled .nav__inner { height: 64px; }
.nav.is-scrolled .nav__brand .brand-mark__icon { width: 42px; }
.nav.is-scrolled .nav__brand .brand-mark__name { font-size: 19px; }
.nav.is-scrolled .nav__brand .brand-mark__sub { font-size: 9px; }
/* Mobile: stable nav height (no shrink-on-scroll). The animating height was
   clipping/flickering the fixed bar when scrolling down then back up. */
@media (max-width: 899px) {
  .nav__inner, .nav.is-scrolled .nav__inner { height: 66px; transition: none; }
  .nav__brand .brand-mark__icon, .nav.is-scrolled .nav__brand .brand-mark__icon { width: 46px; }
  .nav__brand .brand-mark__name, .nav.is-scrolled .nav__brand .brand-mark__name { font-size: 20px; }
  .nav__brand .brand-mark__sub, .nav.is-scrolled .nav__brand .brand-mark__sub { font-size: 9px; }
}

.nav__links { display: none; align-items: center; gap: 30px; margin-left: auto; }
.nav__item { position: relative; }
.nav__link {
  font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82); display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 0; transition: color var(--t-micro); position: relative;
}
.nav__link:hover { color: var(--white); }
button.nav__link { background: none; border: none; cursor: pointer; font-family: inherit; }
.nav__link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: #6FA8E8; transition: width var(--t-base); }
.nav__item:hover > .nav__link::after, .nav__link:focus-visible::after { width: 100%; }
.nav__caret { width: 9px; height: 9px; transition: transform var(--t-micro); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

.nav__mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  width: 380px; max-width: 92vw; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px; opacity: 0; visibility: hidden;
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  box-shadow: 0 28px 70px rgba(11, 37, 69, 0.18);
}
.nav__item.is-open > .nav__mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__mega-grid { display: flex; flex-direction: column; gap: 2px; }
.nav__mega-link { display: flex; gap: 14px; align-items: flex-start; padding: 15px 16px; border-radius: var(--radius); transition: background var(--t-micro); }
.nav__mega-link:hover { background: var(--light); }
.nav__mega-tile { width: 40px; height: 40px; border-radius: 11px; background: var(--blue-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--t-micro); }
.nav__mega-icon { width: 22px; height: 22px; color: var(--crimson); }
.nav__mega-link:hover .nav__mega-tile { background: rgba(var(--crimson-rgb), 0.16); }
.nav__mega-title { display: block; font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--ink-text); letter-spacing: 0.01em; }
.nav__mega-desc { display: block; font-size: 12.5px; color: var(--grey); margin-top: 4px; line-height: 1.45; }
.nav__mega-foot { border-top: 1px solid var(--border); margin-top: 8px; padding: 13px 16px 5px; }
.nav__mega-all { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--crimson); display: inline-flex; gap: 8px; align-items: center; }
.nav__mega-all::after { content: '\2192'; transition: transform var(--t-micro); }
.nav__mega-all:hover::after { transform: translateX(4px); }

.nav__actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.nav__cta { display: none; padding: 11px 22px; }
.nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0 9px; }
.nav__toggle span { display: block; height: 2px; width: 100%; background: var(--white); transition: transform var(--t-micro), opacity var(--t-micro); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__drawer { max-height: 0; overflow: hidden; background: var(--ink); border-bottom: 1px solid var(--dark-3); transition: max-height var(--t-base); }
.nav__drawer.is-open { max-height: 560px; }
.nav__drawer-links { display: flex; flex-direction: column; padding: 10px var(--section-pad-x) 28px; }
.nav__drawer-link { padding: 15px 0; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.9); border-bottom: 1px solid var(--dark-3); }
.nav__drawer-link--sub { padding-left: 16px; font-size: 15px; color: var(--off-white); }
.nav__drawer-link:hover { color: #6FA8E8; }
.nav__drawer-cta { margin-top: 24px; width: 100%; }

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav__drawer { display: none; }
}

/* =========================================================
   Hero (navy banner)
   ========================================================= */

.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: var(--ink); color: var(--off-white); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__img, .hero__img-el { width: 100%; height: 100%; object-fit: cover; opacity: 0.34; }
.hero__placeholder {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 90% at 75% 25%, rgba(23, 99, 198, 0.28) 0%, transparent 55%),
    linear-gradient(180deg, #123A63 0%, var(--ink) 75%);
  background-color: #0E2A4E;
}
.hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11, 37, 69, 0.92) 0%, rgba(11, 37, 69, 0.7) 45%, rgba(11, 37, 69, 0.45) 100%); }
.hero__inner { position: relative; z-index: 2; width: min(100% - 2 * var(--section-pad-x), var(--container-max)); margin: 0 auto; padding: calc(var(--nav-h) + 40px) 0 80px; }
.hero__content { max-width: 860px; }
.hero__content .eyebrow { color: #6FA8E8; }
.hero__content .eyebrow::before { background: #6FA8E8; }
.hero__headline { font-size: clamp(40px, 6.4vw, 80px); margin-bottom: 26px; max-width: 17ch; color: var(--white); }
.hero__sub { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; color: var(--off-white); max-width: 54ch; margin-bottom: 40px; }
.hero__scroll { position: absolute; bottom: 30px; left: var(--section-pad-x); z-index: 2; display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--off-white); }
.hero__scroll-line { width: 44px; height: 1px; background: rgba(255, 255, 255, 0.3); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ''; position: absolute; inset: 0; background: #6FA8E8; transform: translateX(-100%); animation: scrollLine 2.6s var(--ease) infinite; }
@keyframes scrollLine { 0% { transform: translateX(-100%); } 50% { transform: translateX(0); } 100% { transform: translateX(100%); } }

.hero__placeholder, .hero__img-el { height: 122%; top: -11%; }
.hero__img-el { position: absolute; left: 0; width: 100%; object-fit: cover; opacity: 0.34; will-change: transform; }

/* Visible image-slot label (placeholder for Daryl's reference imagery) */
.hero__slot-note {
  position: absolute; z-index: 2; right: clamp(20px, 4vw, 56px); bottom: clamp(20px, 4vw, 40px);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55); border: 1px dashed rgba(255, 255, 255, 0.3);
  padding: 8px 14px; border-radius: var(--radius); pointer-events: none;
}

/* =========================================================
   Context cards
   ========================================================= */

.context-section { background: var(--white); }
.context-cards { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 800px) { .context-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.context-card {
  position: relative; overflow: hidden; background: var(--light); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(28px, 3vw, 38px) clamp(26px, 2.6vw, 34px);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.context-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--crimson), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); }
.context-card:hover { transform: translateY(-5px); border-color: rgba(var(--crimson-rgb), 0.5); box-shadow: 0 26px 50px rgba(11, 37, 69, 0.12); }
.context-card:hover::before { transform: scaleX(1); }
.context-card__scan { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.context-card__scan::after { content: ''; position: absolute; left: 0; right: 0; height: 45%; top: -55%; background: linear-gradient(180deg, transparent, rgba(var(--crimson-rgb), 0.08), transparent); transition: top 0.7s var(--ease-out); }
.context-card:hover .context-card__scan::after { top: 130%; }
.context-card__tag { position: relative; z-index: 1; display: block; margin-bottom: 18px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-light); }
.context-stat__figure { font-family: var(--font-head); font-size: clamp(36px, 4.4vw, 56px); font-weight: 700; line-height: 1; margin-bottom: 20px; display: inline-block; position: relative; z-index: 1; color: var(--crimson); }
.context-stat__figure::after { content: ''; position: absolute; left: 0; bottom: -9px; height: 2px; width: 0; background: var(--crimson); transition: width 0.7s var(--ease-out) 0.2s; }
.context-card.is-visible .context-stat__figure::after { width: 46px; }
.context-card:hover .context-stat__figure::after { width: 68px; }
.context-stat__label { position: relative; z-index: 1; font-size: 15px; color: var(--grey); line-height: 1.55; }

/* =========================================================
   Pillar cards (+ staggered reveal)
   ========================================================= */

.pillar-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .pillar-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.pillar-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(40px, 4vw, 56px) clamp(32px, 3.2vw, 44px); min-height: 380px; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(11, 37, 69, 0.04); }
.section--light .pillar-card { background: var(--white); }
@keyframes pillarReveal { from { opacity: 0; transform: translate(-34px, 14px); } to { opacity: 1; transform: translate(0, 0); } }
.pillar-grid .pillar-card { opacity: 0; transform: none; transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base); }
.pillar-grid .pillar-card.is-visible { opacity: 1; animation: pillarReveal 0.7s var(--ease-out) backwards; }
.pillar-grid .pillar-card.d1.is-visible { animation-delay: 0.16s; }
.pillar-grid .pillar-card.d2.is-visible { animation-delay: 0.32s; }
.pillar-grid .pillar-card.is-visible:hover { transform: translateY(-5px); border-color: rgba(var(--crimson-rgb), 0.5); box-shadow: 0 24px 50px rgba(11, 37, 69, 0.14); }
.pillar-card__tile { width: 56px; height: 56px; border-radius: 14px; background: var(--blue-soft); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 28px; transition: background var(--t-base), transform var(--t-base); }
.pillar-card__icon { width: 28px; height: 28px; color: var(--crimson); }
.pillar-card:hover .pillar-card__tile { background: var(--crimson); transform: translateY(-2px); }
.pillar-card:hover .pillar-card__icon { color: var(--white); }
.pillar-card__tag { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crimson); margin-bottom: 14px; }
.pillar-card__title { font-size: clamp(23px, 2.4vw, 28px); margin-bottom: 16px; color: var(--ink-text); }
.pillar-card__body { font-size: 16px; line-height: 1.6; color: var(--grey); margin-bottom: 28px; flex-grow: 1; }
.pillar-card__link { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--crimson); display: inline-flex; align-items: center; gap: 8px; margin-top: auto; }
.pillar-card__link::after { content: '\2192'; transition: transform var(--t-micro); }
.pillar-card:hover .pillar-card__link::after { transform: translateX(4px); }

/* =========================================================
   Proof / process / domains
   ========================================================= */

.proof-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (min-width: 700px) { .proof-grid { grid-template-columns: 1fr 1fr; } }
.proof-card { background: var(--white); padding: 40px 34px; transition: background var(--t-base); }
.proof-card:hover { background: var(--light); }
.proof-card__title { font-size: 19px; margin-bottom: 12px; color: var(--ink-text); }
.proof-card__title::after { content: ''; display: block; width: 26px; height: 2px; background: var(--crimson); margin-top: 14px; transition: width var(--t-base); }
.proof-card:hover .proof-card__title::after { width: 48px; }
.proof-card__body { font-size: 15px; color: var(--grey); margin: 0; }

.process-steps { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--dark-3); border: 1px solid var(--dark-3); }
@media (min-width: 900px) { .process-steps { grid-template-columns: repeat(4, 1fr); } }
.process-step { background: var(--dark-2); padding: 38px 30px; transition: background var(--t-base); }
.process-step:hover { background: var(--dark); }
.process-step__num { font-size: 13px; font-weight: 700; letter-spacing: var(--eyebrow-tracking); color: #6FA8E8; display: block; margin-bottom: 22px; }
.process-step__title { font-size: 18px; margin-bottom: 10px; color: var(--white); }
.process-step__body { font-size: 14.5px; color: var(--off-white); margin: 0; }

.domain-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (min-width: 600px) { .domain-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .domain-grid { grid-template-columns: repeat(4, 1fr); } }
.domain-card { background: var(--white); padding: 32px 28px; }
.domain-card__count { font-family: var(--font-head); font-size: clamp(30px, 3.5vw, 42px); font-weight: 700; letter-spacing: -0.02em; color: var(--crimson); line-height: 1; margin-bottom: 14px; }
.domain-card__count span { font-size: 14px; font-weight: 600; color: var(--grey-light); letter-spacing: 0.04em; }
.domain-card__title { font-size: 18px; margin-bottom: 10px; color: var(--ink-text); }
.domain-card__body { font-size: 14px; color: var(--grey); margin: 0; }

/* =========================================================
   Levels
   ========================================================= */

.levels { display: grid; grid-template-columns: 1fr; gap: 14px; }
.level { display: grid; grid-template-columns: 1fr; gap: 6px 24px; background: var(--light); border: 1px solid var(--border); border-left: 3px solid var(--crimson); border-radius: var(--radius); padding: 24px 28px; }
@media (min-width: 700px) { .level { grid-template-columns: 240px 1fr; align-items: baseline; } }
.level__name { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--ink-text); }
.level__name span { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--crimson); margin-top: 4px; }
.level__body { font-size: 15px; color: var(--grey); margin: 0; }

/* =========================================================
   Comparison table
   ========================================================= */

.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; }
.compare th, .compare td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--border); }
.compare thead th { background: var(--light); }
.compare__tier { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--ink-text); }
.compare__tier span { display: block; font-size: 12.5px; font-weight: 400; color: var(--grey); margin-top: 4px; text-transform: none; letter-spacing: 0; }
.compare tbody th { font-weight: 600; color: var(--grey); font-size: 14.5px; }
.compare td { text-align: center; }
.compare__yes { color: var(--crimson); font-size: 18px; }
.compare__no { color: var(--grey-light); font-size: 18px; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }

/* =========================================================
   Stats
   ========================================================= */

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (min-width: 800px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--white); padding: 40px 28px; display: flex; flex-direction: column; gap: 10px; }
.stat__number { font-family: var(--font-head); font-size: clamp(40px, 5vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--crimson); }
.stat__label { font-size: 14px; font-weight: 600; color: var(--grey); line-height: 1.4; }

/* =========================================================
   Split + image placeholder
   ========================================================= */

.split { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1.1fr; gap: 72px; } .split--reverse .split__media { order: 2; } }
.split__media { position: relative; min-width: 0; background: var(--light); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; min-height: 320px; }
.split__content { min-width: 0; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__content p { color: var(--grey); }
.section--dark .split__content p, .section--dark-2 .split__content p { color: var(--off-white); }

.img-placeholder {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 70% 30%, rgba(var(--crimson-rgb), 0.10) 0%, transparent 60%),
    repeating-linear-gradient(135deg, #E5ECF5 0 2px, transparent 2px 16px),
    var(--light);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--grey-light); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 24px;
}
.img-placeholder span { max-width: 30ch; line-height: 1.6; }
.section--dark .img-placeholder, .section--dark-2 .img-placeholder { background: var(--dark-2); color: var(--off-white); }

/* =========================================================
   Callout / check / feature lists
   ========================================================= */

.callout { background: var(--light); border: 1px solid var(--border); border-left: 3px solid var(--crimson); border-radius: var(--radius); padding: 28px 30px; }
.callout__title { font-size: 18px; margin-bottom: 12px; color: var(--ink-text); }
.callout__body { font-size: 15px; color: var(--grey); margin: 0; }

.check-list { list-style: none; }
.check-list li { position: relative; padding: 13px 0 13px 34px; border-bottom: 1px solid var(--border); font-size: 16px; color: var(--grey); }
.check-list li:last-child { border-bottom: none; }
.check-list li::before { content: ''; position: absolute; left: 2px; top: 18px; width: 14px; height: 8px; border-left: 2px solid var(--crimson); border-bottom: 2px solid var(--crimson); transform: rotate(-45deg); }
.check-list strong { color: var(--ink-text); }
.section--dark .check-list li, .section--dark-2 .check-list li { border-bottom-color: var(--dark-3); color: var(--off-white); }
.section--dark .check-list strong, .section--dark-2 .check-list strong { color: var(--white); }

.feature-list { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (min-width: 700px) { .feature-list--2 { grid-template-columns: 1fr 1fr; } }
.feature-item { background: var(--white); padding: 26px 28px; }
.feature-item__title { font-size: 16px; margin-bottom: 8px; color: var(--ink-text); }
.feature-item__body { font-size: 14.5px; color: var(--grey); margin: 0; }

/* =========================================================
   FAQ
   ========================================================= */

.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__question { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; font-family: var(--font); font-size: clamp(17px, 1.8vw, 20px); font-weight: 600; color: var(--ink-text); letter-spacing: -0.005em; }
.faq__icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; background: var(--crimson); transition: transform var(--t-micro), opacity var(--t-micro); }
.faq__icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq__icon::after { left: 8px; top: 0; width: 2px; height: 18px; }
.faq__question[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); opacity: 0; }
.faq__answer { max-height: 0; overflow: hidden; transition: max-height var(--t-base); }
.faq__answer-inner { padding: 0 0 28px; }
.faq__answer-inner p { color: var(--grey); margin: 0 0 1em; max-width: 72ch; }
.faq__answer-inner p:last-child { margin-bottom: 0; }
.faq-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(6px, 1.5vw, 16px) clamp(22px, 4vw, 44px) clamp(8px, 1.5vw, 20px); box-shadow: 0 1px 2px rgba(11, 37, 69, 0.04); }
.faq-panel .faq { border-top: none; }
.faq-panel .faq__item:last-child { border-bottom: none; }

/* =========================================================
   Form
   ========================================================= */

.form { background: var(--light); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 40px); }
.form__row { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; gap: 18px; } }
.form__field { margin-bottom: 20px; }
.form__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); margin-bottom: 8px; }
.form__optional { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--grey-light); }
.form__input, .form__textarea { width: 100%; background: var(--white); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 13px 15px; font-family: var(--font); font-size: 15px; color: var(--ink-text); transition: border-color var(--t-micro), box-shadow var(--t-micro); }
.form__input::placeholder, .form__textarea::placeholder { color: var(--grey-light); }
.form__input:focus, .form__textarea:focus { outline: none; border-color: var(--crimson); box-shadow: 0 0 0 3px var(--crimson-glow); }
.form__textarea { resize: vertical; min-height: 130px; }
select.form__input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--grey-light) 50%), linear-gradient(135deg, var(--grey-light) 50%, transparent 50%); background-position: calc(100% - 19px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 38px; }
.form__error { display: none; margin-top: 6px; font-size: 12px; color: #C0392B; }
.form__field--error .form__input, .form__field--error .form__textarea { border-color: #C0392B; }
.form__field--error .form__error { display: block; }
.form__submit { width: 100%; margin-top: 4px; }
.form__count { font-size: 11px; color: var(--grey-light); text-align: right; margin-top: 5px; }
.form__note { font-size: 12px; color: var(--grey-light); text-align: center; margin: 14px 0 0; }

/* =========================================================
   DISP membership levels (interactive severity tabs)
   ========================================================= */
.levels { margin-top: clamp(8px, 2vw, 18px); }
.levels__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.levels__pill { --sev: #7E93B0; position: relative; display: flex; flex-direction: column; gap: 5px; text-align: left; font-family: var(--font); cursor: pointer; background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 16px 16px 18px; overflow: hidden; transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.2s ease, box-shadow 0.26s ease; }
.levels__pill[data-sev="2"] { --sev: #1763C6; }
.levels__pill[data-sev="3"] { --sev: #14457E; }
.levels__pill[data-sev="4"] { --sev: #0B2545; }
.levels__pill::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--sev); transform: scaleX(0); transform-origin: left; transition: transform 0.32s ease; }
.levels__pill:hover { transform: translateY(-3px); border-color: var(--sev); box-shadow: 0 14px 30px rgba(11, 37, 69, 0.10); }
.levels__pill:hover::before, .levels__pill.is-active::before { transform: scaleX(1); }
.levels__pill.is-active { border-color: var(--sev); box-shadow: 0 14px 32px rgba(11, 37, 69, 0.13); }
.levels__pill.is-active .levels__pill-k { color: var(--sev); }
.levels__pill:focus-visible { outline: 2px solid var(--sev); outline-offset: 2px; }
.levels__pill-k { font-size: clamp(16px, 2vw, 19px); font-weight: 700; color: var(--ink-text); letter-spacing: -0.01em; }
.levels__pill-c { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grey); }

.levels__panel { --sev: #7E93B0; position: relative; margin-top: 16px; border: 1px solid var(--border); border-left: 3px solid var(--sev); border-radius: 14px; background: var(--white); padding: clamp(20px, 3vw, 30px); min-height: 92px; }
.levels__panel[data-sev="2"] { --sev: #1763C6; }
.levels__panel[data-sev="3"] { --sev: #14457E; }
.levels__panel[data-sev="4"] { --sev: #0B2545; }
.levels__pane { display: none; }
.levels.is-interactive .levels__pane.is-shown { display: block; animation: lvlReveal 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
.levels:not(.is-interactive) .levels__pane { display: block; }
.levels:not(.is-interactive) .levels__pane + .levels__pane { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
@keyframes lvlReveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.levels__class { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sev); }
.levels__desc { margin: 9px 0 0; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.55; color: var(--grey); max-width: 64ch; }
@media (max-width: 640px) { .levels__row { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .levels__pill, .levels__pill::before { transition: none; } .levels.is-interactive .levels__pane.is-shown { animation: none; } }

/* =========================================================
   CTA block (navy island)
   ========================================================= */

.cta-block { background: var(--ink); border: 1px solid var(--dark-3); border-radius: var(--radius-lg); padding: clamp(24px, 6vw, 80px); position: relative; overflow: hidden; }
.cta-block::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--crimson); }
.cta-block::after { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 70% at 85% 15%, rgba(23, 99, 198, 0.22) 0%, transparent 60%); pointer-events: none; }
.cta-block__inner { position: relative; z-index: 1; max-width: 760px; }
.cta-block__heading { margin-bottom: 18px; color: var(--white); }
.cta-block__sub { color: var(--off-white); margin-bottom: 32px; }
.cta-block .eyebrow { color: #6FA8E8; }
.cta-block .eyebrow::before { background: #6FA8E8; }
.cta-block__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.cta-block__phone { font-size: 17px; font-weight: 600; color: var(--white); display: inline-flex; align-items: center; gap: 10px; }
.cta-block__phone:hover { color: #6FA8E8; }
.cta-block__phone-label { font-size: 11px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--off-white); display: block; margin-bottom: 4px; }

/* =========================================================
   Interior page hero (navy banner)
   ========================================================= */

.page-hero { position: relative; background: var(--ink); color: var(--off-white); padding: calc(var(--nav-h) + 64px) var(--section-pad-x) 64px; overflow: hidden; }
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg .hero__img { opacity: 0.24; }
.page-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(60% 80% at 80% 10%, rgba(23, 99, 198, 0.22) 0%, transparent 55%), linear-gradient(180deg, rgba(11, 37, 69, 0.55), var(--ink)); pointer-events: none; }
.page-hero__inner { position: relative; z-index: 2; max-width: var(--container-max); margin: 0 auto; }
.page-hero .eyebrow { color: #6FA8E8; }
.page-hero .eyebrow::before { background: #6FA8E8; }
.page-hero__breadcrumb { font-size: 13px; color: var(--off-white); margin-bottom: 22px; }
.page-hero__breadcrumb a { color: var(--off-white); transition: color var(--t-micro); }
.page-hero__breadcrumb a:hover { color: #6FA8E8; }
.page-hero__breadcrumb span { color: rgba(255, 255, 255, 0.4); margin: 0 8px; }
.page-hero h1 { font-size: clamp(36px, 5vw, 62px); margin-bottom: 20px; max-width: 20ch; color: var(--white); }
.page-hero__lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--off-white); max-width: 58ch; margin-bottom: 32px; }
.page-hero--media .page-hero__inner { display: grid; grid-template-columns: 1fr; gap: clamp(34px, 5vw, 60px); align-items: center; }
@media (min-width: 900px) { .page-hero--media .page-hero__inner { grid-template-columns: 1.05fr 0.95fr; } }
.page-hero__media { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--dark-3); border-radius: var(--radius-lg); overflow: hidden; background: var(--dark-2); }
.page-hero--compact { padding-top: calc(var(--nav-h) + 34px); padding-bottom: 38px; }
.page-hero--compact h1 { font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 14px; }
.page-hero--compact .page-hero__lede { font-size: clamp(16px, 1.4vw, 18px); max-width: 66ch; margin-bottom: 22px; }
.page-hero--compact .page-hero__breadcrumb { margin-bottom: 14px; }

/* =========================================================
   Prose
   ========================================================= */

.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(26px, 3vw, 36px); margin: 1.6em 0 0.5em; }
.prose h3 { margin: 1.4em 0 0.4em; }
.prose p { color: var(--grey); }
.prose strong { color: var(--ink-text); }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding: 9px 0 9px 30px; border-bottom: 1px solid var(--border); color: var(--grey); }
.prose ul li::before { content: ''; position: absolute; left: 2px; top: 16px; width: 13px; height: 7px; border-left: 2px solid var(--crimson); border-bottom: 2px solid var(--crimson); transform: rotate(-45deg); }
.section--dark .prose p, .section--dark-2 .prose p, .section--dark .prose ul li, .section--dark-2 .prose ul li { color: var(--off-white); }

/* =========================================================
   Footer (navy)
   ========================================================= */

.footer { background: var(--ink); color: var(--off-white); padding: clamp(64px, 8vw, 96px) 0 36px; position: relative; }
.footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #6FA8E8, transparent); opacity: 0.5; }
.footer__top { display: grid; grid-template-columns: 1fr; gap: 44px; padding-bottom: 52px; border-bottom: 1px solid var(--dark-3); }
@media (min-width: 800px) { .footer__top { grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 48px; } }
.footer__brand-block .footer__blurb { font-size: 14.5px; color: var(--off-white); margin-top: 18px; max-width: 34ch; }
.footer__brand-block .brand-mark__icon { color: var(--white); }
.footer__col h4 { font-size: 11px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: #6FA8E8; margin-bottom: 18px; }
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 11px; }
.footer__col a, .footer__contact a, .footer__contact span { font-size: 14.5px; color: rgba(232, 239, 248, 0.82); transition: color var(--t-micro); }
.footer__col a:hover, .footer__contact a:hover { color: var(--white); }
.footer__contact li { margin-bottom: 11px; list-style: none; }
.footer__bottom { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; font-size: 13px; color: var(--off-white); }
@media (min-width: 700px) { .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; } }
.footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__legal a { color: var(--off-white); }
.footer__legal a:hover { color: var(--white); }
.footer__social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: 24px; border-radius: var(--radius); border: 1px solid var(--dark-3); color: var(--off-white); transition: background var(--t-micro), color var(--t-micro), border-color var(--t-micro), transform var(--t-micro); }
.footer__social svg { width: 19px; height: 19px; display: block; }
.footer__social:hover { background: var(--crimson); color: var(--white); border-color: var(--crimson); transform: translateY(-2px); }
.footer__social:focus-visible { outline: 2px solid #6FA8E8; outline-offset: 3px; }

/* =========================================================
   Legal pages
   ========================================================= */

.legal-content { background: var(--white); padding: clamp(48px, 6vw, 80px) 0 clamp(72px, 9vw, 120px); }
.legal-content__inner { max-width: 760px; margin: 0 auto; padding: 0 var(--section-pad-x); }
.legal-intro { border-left: 3px solid var(--crimson); padding: 4px 0 4px 22px; margin-bottom: 48px; font-size: 17px; color: var(--ink-text); }
.legal-section { margin-bottom: 40px; }
.legal-section h2 { font-size: 23px; margin-bottom: 14px; }
.legal-section p { color: var(--grey); font-size: 16px; line-height: 1.7; }
.legal-section ul { list-style: none; margin-top: 10px; }
.legal-section ul li { position: relative; padding: 7px 0 7px 26px; color: var(--grey); }
.legal-section ul li::before { content: ''; position: absolute; left: 0; top: 15px; width: 11px; height: 6px; border-left: 2px solid var(--crimson); border-bottom: 2px solid var(--crimson); transform: rotate(-45deg); }

/* =========================================================
   Utility pages (navy)
   ========================================================= */

.utility-page { min-height: 100vh; min-height: 100svh; background: var(--ink); color: var(--off-white); display: flex; align-items: center; justify-content: center; padding: 100px var(--section-pad-x) 60px; text-align: center; position: relative; overflow: hidden; }
.utility-page::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 50% at 50% 40%, rgba(23, 99, 198, 0.18) 0%, transparent 60%); }
.utility-page__inner { position: relative; z-index: 1; max-width: 560px; }
.utility-page__big { font-family: var(--font-head); font-size: clamp(80px, 14vw, 150px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: #6FA8E8; margin-bottom: 14px; }
.utility-page h1 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 16px; color: var(--white); }
.utility-page p { color: var(--off-white); margin-bottom: 32px; font-size: 17px; }
.utility-page .btn-row { justify-content: center; }
.tick { width: 78px; height: 78px; margin: 0 auto 32px; border: 2px solid var(--crimson); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tick svg { width: 34px; height: 34px; stroke: #6FA8E8; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; animation: tickDraw 0.8s var(--ease-out) 0.3s forwards; }
@keyframes tickDraw { to { stroke-dashoffset: 0; } }

/* =========================================================
   Scroll reveal
   ========================================================= */

.fade { opacity: 0; transform: translateY(20px); transition: opacity var(--t-entrance), transform var(--t-entrance); }
.fade.is-visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.12s; }
.d2 { transition-delay: 0.24s; }
.d3 { transition-delay: 0.36s; }
.d4 { transition-delay: 0.48s; }

.hero__content > * { opacity: 0; animation: heroFade 0.7s var(--ease-out) forwards; }
.hero__content .eyebrow { animation-delay: 0.1s; }
.hero__headline { animation-delay: 0.25s; }
.hero__sub { animation-delay: 0.45s; }
.hero__buttons { animation-delay: 0.6s; }
@keyframes heroFade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================================
   Loader - encryption resolve (navy + white mark + blue cipher)
   ========================================================= */

body.is-loading { overflow: hidden; }
.loader { position: fixed; inset: 0; z-index: 9999; background: var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.loader::before { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 40% at 50% 50%, rgba(23, 99, 198, 0.18) 0%, transparent 60%); animation: loaderBreathe 2.6s var(--ease) infinite; }
@keyframes loaderBreathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.loader.is-done { animation: loaderOut 0.6s var(--ease) forwards; pointer-events: none; }
@keyframes loaderOut { to { opacity: 0; visibility: hidden; } }
.loader__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3vw, 30px); }
.loader__mark { width: clamp(120px, 17vw, 184px); height: auto; color: var(--white); opacity: 0; transform: translateY(10px) scale(0.98); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), filter 0.5s var(--ease-out); }
.loader.is-mark .loader__mark { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 0 18px rgba(23, 99, 198, 0.5)); }
.loader__cipher { display: flex; gap: 0.04em; font-size: clamp(30px, 6.4vw, 60px); font-weight: 700; letter-spacing: 0.22em; padding-left: 0.22em; color: var(--white); }
.loader__char { display: inline-block; min-width: 0.72em; text-align: center; color: #6FA8E8; transition: color 0.25s var(--ease), text-shadow 0.4s var(--ease); }
.loader__char.is-locked { color: var(--white); text-shadow: 0 0 12px rgba(23, 99, 198, 0.55); animation: charLock 0.5s var(--ease) forwards; }
@keyframes charLock { 0% { text-shadow: 0 0 16px rgba(23, 99, 198, 0.8); } 100% { text-shadow: 0 0 0 transparent; } }
html.loader-skip .loader { display: none !important; }
html.loader-skip body { overflow-y: auto !important; overflow-x: hidden !important; }

/* =========================================================
   Page transition - blade clip reveal (internal navigation)
   A navy overlay sweeps a diagonal blade edge across on exit,
   then retreats to reveal the next page. Independent of the
   loader (first-visit only). Enter is pure CSS so it can never
   get stuck if the script fails; exit is driven by
   page-transition.js. Reduced-motion skips it entirely.
   ========================================================= */
.page-fx { position: fixed; inset: 0; z-index: 9000; background: var(--ink); pointer-events: none; visibility: hidden; clip-path: polygon(136% 0, 140% 0, 140% 100%, 118% 100%); }
.page-fx.is-anim { transition: clip-path 0.46s cubic-bezier(0.66, 0, 0.34, 1); }
html.fx-enter .page-fx { visibility: visible; animation: fxReveal 0.54s cubic-bezier(0.66, 0, 0.34, 1) forwards; }
@keyframes fxReveal { from { clip-path: polygon(-40% 0, 134% 0, 116% 100%, -40% 100%); } to { clip-path: polygon(-40% 0, -2% 0, -20% 100%, -40% 100%); } }
@media (prefers-reduced-motion: reduce) { .page-fx { display: none !important; } }

/* =========================================================
   Live edit (review tool) - inert until toggled (Alt+Shift+E)
   ========================================================= */
html.is-editing :where(h1,h2,h3,h4,h5,h6,p,li,a,button,blockquote,figcaption,dt,dd,th,td) { cursor: text; }
html.is-editing :where(h1,h2,h3,h4,h5,h6,p,li,a,button,blockquote,figcaption,dt,dd,th,td):hover { outline: 1px dashed rgba(23, 99, 198, 0.6); outline-offset: 3px; }
.le-active, html.is-editing .le-active:hover { outline: 2px solid var(--crimson) !important; outline-offset: 3px; background: rgba(23, 99, 198, 0.06); }
.le-bar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 100000; display: none; align-items: center; gap: 12px; padding: 9px 9px 9px 16px; background: #0B2545; color: #E8EFF8; border: 1px solid #2C4F76; border-radius: 999px; box-shadow: 0 12px 34px rgba(11, 37, 69, 0.4); font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 13px; }
.le-bar strong { font-weight: 600; }
.le-bar .le-hint { color: #9FB6D6; font-size: 12px; }
.le-bar .le-dot { width: 8px; height: 8px; border-radius: 50%; background: #6FA8E8; box-shadow: 0 0 8px #6FA8E8; }
.le-bar button { font: inherit; font-size: 12px; color: #E8EFF8; background: transparent; border: 1px solid #2C4F76; border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.le-bar button:hover { background: #1763C6; border-color: #1763C6; }
.le-toast { position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%); z-index: 100001; background: #0B2545; color: #E8EFF8; border: 1px solid #2C4F76; padding: 9px 16px; border-radius: 999px; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 13px; box-shadow: 0 8px 24px rgba(11, 37, 69, 0.4); transition: opacity 0.4s, transform 0.4s; }
.le-toast.is-out { opacity: 0; transform: translateX(-50%) translateY(8px); }
@media print { .le-bar, .le-toast { display: none !important; } }

/* =========================================================
   Service pages - premium FX (scoped to .page--service)
   Polished scroll reveals + stagger, card glow, aurora hero,
   sticky section-progress rail, sticky CTA. iOS-friendly
   (CSS scroll-driven where available), reduced-motion safe.
   ========================================================= */

/* ---- Polished scroll reveals (upgrade base .fade) ---- */
.page--service .fade { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
.page--service .fade.is-visible { opacity: 1; transform: none; }

/* Feature tiles stagger in when the list reveals */
.page--service .feature-list .feature-item { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.page--service .feature-list.is-visible .feature-item { opacity: 1; transform: none; }
.page--service .feature-list.is-visible .feature-item:nth-child(1) { transition-delay: 0.04s; }
.page--service .feature-list.is-visible .feature-item:nth-child(2) { transition-delay: 0.11s; }
.page--service .feature-list.is-visible .feature-item:nth-child(3) { transition-delay: 0.18s; }
.page--service .feature-list.is-visible .feature-item:nth-child(4) { transition-delay: 0.25s; }
.page--service .feature-list.is-visible .feature-item:nth-child(5) { transition-delay: 0.32s; }
.page--service .feature-list.is-visible .feature-item:nth-child(6) { transition-delay: 0.39s; }
.page--service .feature-list.is-visible .feature-item:nth-child(7) { transition-delay: 0.46s; }
.page--service .feature-list.is-visible .feature-item:nth-child(8) { transition-delay: 0.53s; }

/* Check-list items tick in when their .fade parent reveals */
.page--service .fade .check-list li { opacity: 0; transform: translateX(-10px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
.page--service .fade.is-visible .check-list li { opacity: 1; transform: none; }
.page--service .fade.is-visible .check-list li:nth-child(1) { transition-delay: 0.12s; }
.page--service .fade.is-visible .check-list li:nth-child(2) { transition-delay: 0.18s; }
.page--service .fade.is-visible .check-list li:nth-child(3) { transition-delay: 0.24s; }
.page--service .fade.is-visible .check-list li:nth-child(4) { transition-delay: 0.30s; }
.page--service .fade.is-visible .check-list li:nth-child(5) { transition-delay: 0.36s; }
.page--service .fade.is-visible .check-list li:nth-child(6) { transition-delay: 0.42s; }
.page--service .fade.is-visible .check-list li:nth-child(7) { transition-delay: 0.48s; }

/* ---- Card micro-interactions (lift + glowing blue ring) ---- */
.page--service .pillar-card, .page--service .proof-card { transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s, border-color 0.28s; }
.page--service .pillar-card:hover, .page--service .proof-card:hover { transform: translateY(-7px); border-color: rgba(var(--crimson-rgb), 0.55); box-shadow: 0 26px 54px rgba(11, 37, 69, 0.18), 0 0 0 1px rgba(var(--crimson-rgb), 0.45), 0 0 26px rgba(var(--crimson-rgb), 0.16); }
.page--service .feature-item { transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1); }
.page--service .feature-item:hover { transform: translateY(-3px); }

/* ---- Aurora / animated hero ---- */
.page--service .page-hero::before {
  content: ''; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 42% at 25% 35%, rgba(23, 99, 198, 0.55), transparent 60%),
    radial-gradient(34% 40% at 78% 22%, rgba(110, 168, 232, 0.40), transparent 62%),
    radial-gradient(45% 50% at 65% 80%, rgba(23, 99, 198, 0.35), transparent 64%);
  filter: blur(40px); opacity: 0.72;
  animation: heroAurora 20s ease-in-out infinite alternate;
}
@keyframes heroAurora {
  0% { transform: translate3d(-3%, -2%, 0) scale(1); }
  50% { transform: translate3d(2%, 3%, 0) scale(1.08); }
  100% { transform: translate3d(4%, -3%, 0) scale(1.04); }
}
.page--service .page-hero::after {
  z-index: 1;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 72px),
    radial-gradient(60% 80% at 80% 8%, rgba(23, 99, 198, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, rgba(11, 37, 69, 0.26), rgba(11, 37, 69, 0.62));
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .page--service .page-hero__inner { animation: heroLift linear both; animation-timeline: scroll(root block); animation-range: 0 80vh; }
    @keyframes heroLift { to { transform: translateY(38px); opacity: 0.78; } }
  }
}

/* ---- Sticky section-progress rail (desktop) ---- */
/* Rail sits a fixed distance to the LEFT of the content's left edge, so it
   always rides in the margin (~24px gap to the text) instead of crowding it. */
.svc-rail { position: fixed; top: 50%; left: max(12px, calc(var(--section-pad-x) - 40px), calc((100vw - var(--container-max)) / 2 - 40px)); z-index: 80; display: none; flex-direction: column; transform: translateY(-50%) translateX(-8px); opacity: 0; visibility: hidden; transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.4s; }
@media (min-width: 1080px) { .page--service .svc-rail { display: flex; } }
.svc-rail.is-in { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
.svc-rail::before { content: ''; position: absolute; left: 6.5px; top: 16px; bottom: 16px; width: 3px; background: rgba(126, 147, 176, 0.35); }
.svc-rail__fill { position: absolute; left: 6.5px; top: 16px; width: 3px; height: 0; background: var(--crimson); transition: height 0.15s linear; }
.svc-rail__item { position: relative; display: flex; align-items: center; padding: 12px 0; background: none; border: none; cursor: pointer; font-family: inherit; }
.svc-rail__dot { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #7E93B0; background: var(--white); flex-shrink: 0; transition: border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s; }
.svc-rail__item.is-active .svc-rail__dot { border-color: var(--crimson); background: var(--crimson); transform: scale(1.25); box-shadow: 0 0 0 6px rgba(var(--crimson-rgb), 0.18); }
.svc-rail__label { position: absolute; left: calc(100% + 14px); top: 50%; opacity: 0; transform: translateY(-50%) translateX(-8px); transition: opacity 0.25s, transform 0.25s; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 13px; border-radius: var(--radius); white-space: nowrap; pointer-events: none; }
.svc-rail__item:hover .svc-rail__label, .svc-rail__item:focus-visible .svc-rail__label { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Mobile sticky section pills (phones/tablets < 1180px; desktop uses the rail) */
.svc-pills { display: none; position: sticky; top: 64px; z-index: 70; gap: 8px; padding: 10px var(--section-pad-x); background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 0.5px solid var(--border); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.svc-pills::-webkit-scrollbar { display: none; }
@media (max-width: 1079px) { .page--service .svc-pills { display: flex; } }
.svc-pill { flex: 0 0 auto; font-family: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--white); color: var(--grey); cursor: pointer; transition: background var(--t-micro), color var(--t-micro), border-color var(--t-micro); }
.svc-pill.is-active { background: var(--crimson); color: var(--white); border-color: var(--crimson); }

/* ---- Sticky CTA: floating frosted pill (detached, not a nav clone) ---- */
.svc-cta { position: fixed; right: 24px; bottom: 24px; z-index: 85; max-width: min(430px, calc(100vw - 32px)); opacity: 0; transform: translateY(150%); transition: transform 0.44s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.44s; }
.svc-cta.is-in { opacity: 1; transform: translateY(0); }
.svc-cta__inner { display: flex; align-items: center; gap: 20px; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border: 0.5px solid rgba(11, 37, 69, 0.12); border-radius: 16px; padding: 12px 12px 12px 24px; box-shadow: 0 20px 48px rgba(11, 37, 69, 0.20); }
.svc-cta__text { color: var(--ink-text); font-size: 14.5px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svc-cta .btn { margin-left: auto; flex-shrink: 0; padding: 12px 22px; }
html.is-editing .svc-cta { display: none; }
@media (max-width: 640px) {
  .svc-cta { left: 16px; right: 16px; max-width: none; transform: translateY(150%); }
  .svc-cta.is-in { transform: translateY(0); }
  .svc-cta__inner { gap: 14px; padding: 11px 11px 11px 18px; border-radius: 14px; }
  .svc-cta__text { font-size: 13px; }
  .svc-cta .btn { padding: 11px 16px; font-size: 12px; }
}

/* ---- Reduced motion: stillness ---- */
@media (prefers-reduced-motion: reduce) {
  .page--service .fade, .page--service .feature-list .feature-item, .page--service .fade .check-list li { opacity: 1; transform: none; transition: none; }
  .page--service .page-hero::before { animation: none; }
  .svc-cta { transition: none; }
}

/* =========================================================
   Contact page - premium split (scoped to .page--contact)
   ========================================================= */
.page--contact .contact-split { background: var(--light); padding: calc(var(--nav-h) + 40px) 0 clamp(64px, 7vw, 96px); }
.page--contact .contact-split__grid { width: min(100% - 2 * var(--section-pad-x), var(--container-max)); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 940px) { .page--contact .contact-split__grid { grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: start; } }

.page--contact .contact-panel { position: relative; background: var(--ink); color: var(--white); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 940px) { .page--contact .contact-panel { position: sticky; top: calc(var(--nav-h) + 14px); } }
.page--contact .contact-panel__bg { position: absolute; inset: -28%; pointer-events: none; background: radial-gradient(38% 42% at 22% 18%, rgba(23,99,198,0.55), transparent 60%), radial-gradient(34% 40% at 84% 88%, rgba(110,168,232,0.40), transparent 62%); filter: blur(42px); opacity: 0.7; animation: heroAurora 22s ease-in-out infinite alternate; }
.page--contact .contact-panel__inner { position: relative; padding: clamp(28px, 3vw, 46px); }
.page--contact .contact-panel .eyebrow { color: #6FA8E8; }
.page--contact .contact-panel__h { font-size: clamp(30px, 4vw, 44px); font-weight: 700; line-height: 1.04; margin: 6px 0 14px; color: var(--white); }
.page--contact .contact-panel__lede { color: var(--off-white); font-size: 15.5px; line-height: 1.6; max-width: 42ch; margin: 0 0 28px; }

.page--contact .contact-steps { list-style: none; margin: 0 0 30px; padding: 0; position: relative; }
.page--contact .contact-steps::before { content: ''; position: absolute; left: 13px; top: 16px; bottom: 16px; width: 1.5px; background: rgba(255,255,255,0.16); }
.page--contact .contact-steps li { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 8px 0; font-size: 14px; color: var(--off-white); line-height: 1.5; }
.page--contact .contact-steps strong { color: var(--white); font-weight: 700; }
.page--contact .contact-steps__n { flex-shrink: 0; width: 27px; height: 27px; border-radius: 50%; background: var(--crimson); color: var(--white); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px rgba(11,37,69,0.6); }

.page--contact .contact-details { border-top: 1px solid rgba(255,255,255,0.14); padding-top: 22px; display: grid; gap: 14px; }
.page--contact .contact-details__row { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; gap: 12px; }
.page--contact .contact-details__label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #6FA8E8; }
.page--contact .contact-details a, .page--contact .contact-details span:not(.contact-details__label):not(.placeholder-tag) { color: var(--off-white); font-size: 15px; }
.page--contact .contact-details__big { font-size: 20px !important; font-weight: 700; color: var(--white) !important; }
.page--contact .contact-details a:hover { color: var(--white); }

.page--contact .contact-panel__actions { margin-top: 24px; }
.page--contact .contact-bookcall { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.35); }
.page--contact .contact-bookcall:hover { background: rgba(255,255,255,0.10); border-color: var(--white); }
.page--contact .contact-secure { display: flex; align-items: center; gap: 9px; margin: 18px 0 0; font-size: 12.5px; color: #9FB3CC; }
.page--contact .contact-secure svg { width: 17px; height: 17px; color: #6FA8E8; flex-shrink: 0; }

.page--contact .contact-formwrap { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 44px); box-shadow: 0 1px 2px rgba(11,37,69,0.04); }
.page--contact .contact-formwrap__h { margin: 6px 0 24px; }

.form__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form__chip { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--white); cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-text); text-align: left; transition: border-color var(--t-micro), background var(--t-micro), box-shadow var(--t-micro), transform var(--t-micro); }
.form__chip svg { width: 20px; height: 20px; color: var(--crimson); flex-shrink: 0; }
.form__chip:hover { border-color: rgba(var(--crimson-rgb), 0.5); transform: translateY(-1px); }
.form__chip[aria-pressed="true"] { border-color: var(--crimson); background: var(--blue-soft); box-shadow: 0 0 0 1px var(--crimson); }
@media (max-width: 420px) { .form__chips { grid-template-columns: 1fr; } }

.page--contact .form__input:focus, .page--contact .form__textarea:focus { border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(var(--crimson-rgb), 0.15); outline: none; }

.page--contact .contact-standards__head { text-align: center; max-width: 760px; margin-inline: auto; }
.standards-strip { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 30px 0 0; padding: 0; }
.standards-strip li { padding: 11px 20px; border: 1px solid var(--border); border-radius: 999px; background: var(--white); font-size: 13.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--ink-text); transition: border-color var(--t-micro), transform var(--t-micro); }
.standards-strip li:hover { border-color: rgba(var(--crimson-rgb), 0.5); transform: translateY(-2px); }

.contact-reach__grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 56px); align-items: center; }
@media (min-width: 860px) { .contact-reach__grid { grid-template-columns: 1fr 1fr; } }
.contact-reach__map { display: flex; justify-content: center; }
.au-map { width: min(440px, 86vw); height: auto; display: block; overflow: visible; }
.au-map__land path { fill: url(#auGrad); stroke: rgba(110, 168, 232, 0.45); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.au-map__link { stroke: rgba(110, 168, 232, 0.38); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.au-map__reach { fill: #6FA8E8; }
.au-map__pin-dot { fill: var(--crimson); }
.au-map__pin-ring { fill: none; stroke: var(--crimson); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: auPing 2.8s ease-out infinite; }
.au-map__label { fill: var(--white); font-family: var(--font); font-size: 34px; font-weight: 700; letter-spacing: 1px; }
@keyframes auPing { 0% { opacity: 0.85; transform: scale(0.5); } 70%, 100% { opacity: 0; transform: scale(2.6); } }
@media (prefers-reduced-motion: reduce) { .au-map__pin-ring { animation: none; opacity: 0; } }

/* DISP page - "Built for SMEs" outcomes list */
.disp-deliver { display: grid; gap: clamp(26px, 3.5vw, 42px); margin-top: clamp(40px, 5vw, 60px); }
.disp-deliver__item { border-top: 1px solid var(--border); padding-top: clamp(20px, 2.5vw, 28px); }
.disp-deliver__item h3 { font-family: var(--font-head); font-size: clamp(20px, 2.3vw, 26px); font-weight: 700; color: var(--ink-text); letter-spacing: -0.01em; margin: 0 0 12px; }
.disp-deliver__item p { color: var(--grey); line-height: 1.65; margin: 0 0 12px; max-width: 70ch; }
.disp-deliver__item p:last-child { margin-bottom: 0; }

.page--contact .fade { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
.page--contact .fade.is-visible { opacity: 1; transform: none; }
.page--contact .contact-steps li.fade.is-visible:nth-child(1) { transition-delay: 0.05s; }
.page--contact .contact-steps li.fade.is-visible:nth-child(2) { transition-delay: 0.13s; }
.page--contact .contact-steps li.fade.is-visible:nth-child(3) { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  .page--contact .fade { opacity: 1; transform: none; transition: none; }
  .page--contact .contact-panel__bg { animation: none; }
}

/* =========================================================
   Radar motif (blue)
   ========================================================= */

.radar { position: relative; border-radius: 50%; overflow: hidden; }
.radar__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(var(--crimson-rgb), 0) 0deg, rgba(var(--crimson-rgb), 0) 296deg, rgba(var(--crimson-rgb), 0.34) 356deg, rgba(110, 168, 232, 0.6) 359.5deg, rgba(var(--crimson-rgb), 0) 360deg); animation: radarSpin 4.5s linear infinite; }
@keyframes radarSpin { to { transform: rotate(360deg); } }
.radar__grid { position: absolute; inset: 0; }
.radar__grid circle, .radar__grid line { stroke: rgba(110, 168, 232, 0.32); stroke-width: 1; fill: none; }
.radar__blip { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #8FC0F5; box-shadow: 0 0 10px rgba(110, 168, 232, 0.9); opacity: 0; animation: radarPing 4.5s linear infinite; }
@keyframes radarPing { 0% { opacity: 1; transform: scale(1.7); } 12% { opacity: 1; transform: scale(1); } 55% { opacity: 0; } 100% { opacity: 0; } }
.hero__radar { position: absolute; z-index: 1; pointer-events: none; width: clamp(760px, 88vw, 1400px); aspect-ratio: 1; right: clamp(-700px, -44vw, -380px); top: clamp(-700px, -44vw, -380px); opacity: 0.55; border: none; background: none; }
.hero__radar .radar { width: 100%; height: 100%; border: none; background: none; }
@media (max-width: 900px) { .hero__radar { width: 880px; right: -440px; top: -440px; opacity: 0.4; } }

/* =========================================================
   Section media background (contact video / radar)
   ========================================================= */

.section--mediabg { position: relative; overflow: hidden; }
.section--mediabg > .container { position: relative; z-index: 2; }
.section-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.section-media video, .section-media .img-placeholder, .section-media .radar { width: 100%; height: 100%; object-fit: cover; opacity: 0.16; border: none; }
.section-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 37, 69, 0.72), rgba(11, 37, 69, 0.9)); }

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .fade { opacity: 1; transform: none; }
  .pillar-grid .pillar-card { opacity: 1; animation: none; }
  .hero__content > * { opacity: 1; animation: none; }
  .hero__scroll-line::after { animation: none; }
  .loader::before { animation: none; opacity: 1; }
  .loader__mark { opacity: 1; transform: none; }
  .loader__char { color: var(--white); }
  .radar__sweep { animation: none; opacity: 0.4; }
  .radar__blip { animation: none; opacity: 0.7; }
  .context-stat__figure::after { transition: none; }
  .hero__img-el { transform: none !important; }
}

/* =========================================================
   Cards on navy bands (.section--dark / --dark-2): dark treatment
   so light-by-default cards flip to navy with light text.
   ========================================================= */
.section--dark .pillar-card, .section--dark-2 .pillar-card,
.section--dark .context-card, .section--dark-2 .context-card,
.section--dark .callout, .section--dark-2 .callout,
.section--dark .level, .section--dark-2 .level,
.section--dark .faq-panel, .section--dark-2 .faq-panel,
.section--dark .form, .section--dark-2 .form { background: var(--dark-2); border-color: var(--dark-3); box-shadow: none; }
.section--dark .proof-card, .section--dark-2 .proof-card,
.section--dark .domain-card, .section--dark-2 .domain-card,
.section--dark .feature-item, .section--dark-2 .feature-item,
.section--dark .stat, .section--dark-2 .stat { background: var(--dark-2); }
.section--dark .proof-grid, .section--dark-2 .proof-grid,
.section--dark .domain-grid, .section--dark-2 .domain-grid,
.section--dark .feature-list, .section--dark-2 .feature-list,
.section--dark .stats, .section--dark-2 .stats { background: var(--dark-3); border-color: var(--dark-3); }
.section--dark .proof-card:hover, .section--dark-2 .proof-card:hover { background: var(--dark); }
.section--dark .proof-card__body, .section--dark-2 .proof-card__body,
.section--dark .domain-card__body, .section--dark-2 .domain-card__body,
.section--dark .feature-item__body, .section--dark-2 .feature-item__body,
.section--dark .pillar-card__body, .section--dark-2 .pillar-card__body,
.section--dark .callout__body, .section--dark-2 .callout__body,
.section--dark .level__body, .section--dark-2 .level__body,
.section--dark .stat__label, .section--dark-2 .stat__label,
.section--dark .context-stat__label, .section--dark-2 .context-stat__label { color: var(--off-white); }
.section--dark .level__name, .section--dark-2 .level__name { color: var(--white); }
.section--dark .check-list li, .section--dark-2 .check-list li { color: var(--off-white); border-bottom-color: var(--dark-3); }
.section--dark .faq__question, .section--dark-2 .faq__question { color: var(--white); }
.section--dark .faq, .section--dark-2 .faq { border-top-color: var(--dark-3); }
.section--dark .faq__item, .section--dark-2 .faq__item { border-bottom-color: var(--dark-3); }
.section--dark .faq__answer-inner p, .section--dark-2 .faq__answer-inner p { color: var(--off-white); }

/* 3-up proof grid (value-proposition pillars) */
@media (min-width: 800px) { .proof-grid--3 { grid-template-columns: repeat(3, 1fr); } }