/* ==========================================================================
   Base — reset, typography, layout helpers, buttons, header, footer, logo,
   kicker, FAQ, forms, icon buttons, cards. Shared across all pages.
   Premium tune 2026-10-15: every value is a token from tokens.css.
   ========================================================================== */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-white);
  overflow-x: hidden;   /* fallback for browsers without clip */
  overflow-x: clip;     /* clip does NOT make body a scroll container, so the sticky header keeps working when html is locked */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }   /* width/height attributes only reserve space; CSS still controls size */
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-blue-700); outline-offset: 3px; border-radius: var(--radius-sm); }
/* Dark surfaces: yellow ring */
.site-header :focus-visible, .site-footer :focus-visible, .section--blue :focus-visible,
.hero :focus-visible, .ab-hero :focus-visible, .ab-what :focus-visible, .ab-mission :focus-visible,
.ab-service--blue :focus-visible, .ab-cta__card :focus-visible, .c-hero :focus-visible, .c-office :focus-visible,
.whitepaper :focus-visible, .wp-hero :focus-visible, .page-ceo :focus-visible, .pb-hero :focus-visible, .pb-newsletter :focus-visible, .pb-related :focus-visible,
[data-surface="dark"] :focus-visible { outline-color: var(--color-yellow-400); }
::selection { background: var(--color-yellow-400); color: var(--color-navy-900); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-pad-y); }
.section--blue { background: var(--gradient-band-blue); color: var(--color-on-dark); }
.section--white { background: var(--color-white); }
.section--dark { background: var(--gradient-dark-glow); color: var(--color-on-dark); }
.section--quiet { background: var(--color-neutral-100); }

/* ---- Typography ---- */
.display-xl, .display-lg, .display-md, .display-sm {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-tight); letter-spacing: var(--ls-display-xl); text-wrap: balance; }
.display-lg { font-size: var(--fs-display-lg); text-wrap: balance; }
.display-md { font-size: var(--fs-display-md); }
.display-sm { font-size: var(--fs-display-sm); }
.text-blue { color: var(--color-blue-700); }
.text-yellow { color: var(--color-yellow-400); }
.text-white { color: var(--color-white); }
.lead { max-width: var(--measure-intro); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-text-muted); }
.section--blue .lead, [data-surface="dark"] .lead { color: var(--color-on-dark-muted); }

/* ---- Buttons — exactly two looks: primary (solid pill) + secondary (ghost pill) ----
   primary on dark  = .btn--yellow (and header .btn--outline-white)
   primary on light = .btn--blue
   secondary on light = .btn--ghost · secondary on dark = .btn--ghost-light                          */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--btn-h); padding-inline: var(--btn-pad-x);
  border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--btn-fs); letter-spacing: var(--ls-btn); line-height: 1;
  text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 0 0 0 rgba(2, 6, 21, 0);
  transition: transform var(--dur-mid) var(--ease), background-color var(--dur-mid) var(--ease),
              color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}
.btn:active { transform: translateY(0) scale(0.98); transition-duration: var(--dur-fast); }
.btn:focus-visible { outline-offset: 4px; }
.btn--lg { padding-inline: var(--btn-pad-x-lg); }
/* primary on dark */
.btn--yellow { background: var(--color-yellow-400); color: var(--color-blue-700); }
/* primary on light */
.btn--blue { background: var(--color-blue-700); color: var(--color-white); }
/* secondary on light */
.btn--ghost { color: var(--color-blue-700); box-shadow: inset 0 0 0 1px var(--color-blue-700); background: transparent; }
/* secondary on dark */
.btn--ghost-light { color: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-ring-on-dark); background: transparent; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; pointer-events: none; }
/* Header CTA pill = primary on dark, small */
.btn--outline-white {
  min-height: var(--btn-h-sm); padding-inline: var(--space-5); font-size: var(--fs-label);
  background: var(--color-yellow-400); color: var(--color-blue-700);
}
/* text link with yellow rule (grows on hover) */
.link-underline {
  position: relative; display: inline-block; padding-bottom: 6px;
  font-family: var(--font-alt); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-blue-700);
  transition: color var(--dur-mid) var(--ease);
}
.link-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--color-yellow-400); transform: scaleX(.6); transform-origin: left; transition: transform var(--dur-mid) var(--ease);
}

/* ---- Brand logo (single SVG built from the Figma component's 43 parts) ---- */
.logo {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 213.8 / 39.98;
  width: calc(var(--brand-logo-h) * 213.8 / 39.98);
}
.logo img { position: absolute; display: block; max-width: none; }
.logo--footer { width: calc(var(--brand-logo-h-footer) * 213.8 / 39.98); }
.logo--video { width: 33.42cqw; }
.logo--mini { width: 96px; }
.logo .logo__img { inset: 0; width: 100%; height: 100%; }

/* ---- Header / nav — glass bar ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--color-border-dark);
  background: var(--color-header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); min-height: var(--header-h);
}
.site-nav__list { display: flex; align-items: center; gap: var(--space-6); }
.site-nav__link {
  position: relative; display: block; padding-block: 8px;
  font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--ls-nav); line-height: 1.2;
  text-transform: uppercase; color: var(--color-on-dark-muted);
  transition: color var(--dur-mid) var(--ease);
}
.site-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--color-yellow-400); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-mid) var(--ease);
}
.site-nav__link:hover, .site-nav__link[aria-current="page"] { color: var(--color-white); }
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.site-header__cta { flex: none; }
.site-nav__cta-mobile { display: none; }
.nav-toggle { display: none; width: 44px; height: 44px; position: relative; margin-right: -10px; border-radius: var(--radius-pill); }
.nav-toggle__bar {
  position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--color-white);
  transition: transform var(--dur-mid) var(--ease), opacity var(--dur-mid) var(--ease);
}
.nav-toggle__bar:nth-child(1) { top: 15px; }
.nav-toggle__bar:nth-child(2) { top: 21px; }
.nav-toggle__bar:nth-child(3) { top: 27px; }
.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
html.nav-locked { overflow: hidden; }
/* Heroes slide under the glass header (their --hero-pad-top already includes the header height) */
.hero, .ab-hero, .c-hero, .wp-hero, .pb-hero, .ceo-hero { margin-top: calc(-1 * var(--header-h)); }

/* Desktop bar: logo | nav (truly centred) | CTA */
@media (min-width: 960px) {
  .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-5); }
  .site-header__inner > .logo { justify-self: start; }
  .site-header__cta { justify-self: end; }
}

/* Nav collapses below 960px: at 960-1068 the 5 links + CTA fit (about 800 of 912px) */
@media (max-width: 959px) {
  .nav-toggle { display: block; }
  .site-header__cta { display: none; }
  /* navy panel drops under the bar, as tall as its links */
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 49;
    max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h));
    display: flex; flex-direction: column;
    border-bottom: 1px solid var(--color-border-dark);
    box-shadow: var(--shadow-rest);
    padding: var(--space-4) var(--gutter) var(--space-7);
    background: var(--gradient-menu);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    visibility: hidden; transform: translateX(-100%);
  }
  html:not(.js-motion) .site-nav { transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); }
  .nav-open .site-nav { visibility: visible; transform: none; }
  /* dimmed page behind the open panel (existing navy at alpha); a tap on it closes the menu (main.js) */
  .nav-open::after { content: ""; position: absolute; z-index: 1; top: 100%; left: 0; right: 0; height: 100vh; height: 100dvh; background: rgba(2, 6, 21, 0.55); }
  .site-nav { z-index: 49; }
  html:not(.js-motion) .nav-open .site-nav { transition: transform var(--dur-slow) var(--ease-out), visibility 0s; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list li { border-bottom: 1px solid var(--color-border-dark); }
  .site-nav__link {
    display: flex; align-items: center; min-height: 44px; padding-block: var(--space-2);
    font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--ls-nav); line-height: 1.2;
    color: var(--color-white);
  }
  .site-nav__link::after { display: none; }
  .site-nav__link::before {
    content: ""; display: block; width: 0; height: 2px; margin-right: 0; background: var(--color-yellow-400);
    transition: width var(--dur-mid) var(--ease), margin var(--dur-mid) var(--ease);
  }
  .site-nav__link[aria-current="page"]::before, .site-nav__link:hover::before { width: var(--space-5); margin-right: var(--space-3); }
  .site-nav__cta-mobile { display: inline-flex; align-self: flex-start; margin-top: var(--space-6); min-height: var(--btn-h); padding-inline: var(--btn-pad-x); font-size: var(--btn-fs); }
}

/* ---- Footer — dark navy gradient, hairline top ---- */
.site-footer {
  position: relative;
  background: var(--gradient-dark); color: var(--color-white);
  border-top: 1px solid var(--color-border-dark);
}
.site-footer__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); padding-block: var(--space-9) var(--space-8);
  font-size: var(--fs-small); line-height: var(--lh-body); color: var(--color-on-dark-muted);
}
.site-footer address { font-style: normal; color: var(--color-on-dark-faint); }
.site-footer a { transition: color var(--dur-mid) var(--ease); }
.site-footer address a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-dark-muted); }   /* 44px tap target */
.site-footer address a:hover { color: var(--color-white); }
.site-footer__middle { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.site-footer__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--space-5); color: var(--color-on-dark-faint); }
.site-footer__links li { display: flex; align-items: center; min-height: 44px; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-dark-muted); }
.site-footer__links a:hover { color: var(--color-white); }
.site-footer__social { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.site-footer__social-title { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--color-on-dark-faint); }   /* v2 font + case (rule 4) */
.social-list { display: flex; align-items: center; gap: var(--space-3); }
.social-list a {
  display: flex; align-items: center; justify-content: center;
  width: var(--social-size); height: var(--social-size); border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-line-on-dark);
  transition: background-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.social-list img { width: 18px; height: 18px; }

@media (min-width: 1069px) {
  .site-footer__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-footer__inner > .logo { justify-self: start; }
  .site-footer__social { justify-self: end; }
}
@media (max-width: 1068px) {
  .site-footer__inner { flex-direction: column; text-align: center; gap: var(--space-6); padding-block: var(--space-8); }
  .site-footer__social { align-items: center; }
}

/* ==========================================================================
   FAQ accordion — shared by Home, About, Contact (page CSS adds small tweaks)
   Chevron icon that rotates, open state tinted, hairline dividers.
   ========================================================================== */
.faq__inner { display: flex; gap: var(--space-9); justify-content: space-between; align-items: flex-start; }
.faq__intro { flex: 0 0 340px; }
.faq__intro-text { margin-top: var(--gap-head-intro); max-width: var(--measure-intro); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-muted); }
.faq__intro .btn { margin-top: var(--space-6); }
.faq__list { flex: 1 1 0; min-width: 0; }   /* list ends on the container edge at every width */
.faq__item h3 { font-size: inherit; font-weight: 400; }
.faq__item {
  border-top: 1px solid var(--color-hairline);
  padding-inline: var(--space-4); margin-inline: 0;   /* stays inside the container edge */
  border-radius: 0;                                   /* straight hairline dividers */
  transition: background-color var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease), border-radius var(--dur-mid) var(--ease);
}
.faq__item:last-child { border-bottom: 1px solid var(--color-hairline); }
/* FAQ band background: one recipe for every page (was duplicated in home.css + contact.css) */
.faq { background: radial-gradient(60% 70% at 0% 0%, rgba(35, 136, 255, 0.06) 0%, rgba(35, 136, 255, 0) 70%), var(--gradient-light); }
.faq__item.is-open { background: var(--tint-brand); border-radius: var(--radius-md); border-top-color: transparent; }
.faq__item.is-open + .faq__item { border-top-color: transparent; }
.faq__item.is-open:last-child { border-bottom-color: transparent; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  width: 100%; padding-block: var(--space-5); text-align: left; color: var(--color-blue-700);
  transition: color var(--dur-mid) var(--ease);
}
.faq__q-text { font-family: var(--font-display); font-size: var(--fs-display-sm); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; }
.faq__icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-line-strong); color: var(--color-blue-700);
  transition: transform var(--dur-mid) var(--ease), background-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease);
}
.faq__icon::before {
  content: ""; width: 8px; height: 8px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.faq__item.is-open .faq__icon { transform: rotate(180deg); background: var(--color-blue-700); color: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-blue-700); }
.faq__a { display: none; max-width: var(--measure-body); padding-bottom: var(--space-5); margin-top: calc(-1 * var(--space-2)); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-muted); }
.faq__a p + p { margin-top: var(--space-3); }
.faq__item.is-open .faq__a { display: block; animation: faq-in var(--dur-mid) var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1068px) {
  .faq__inner { flex-direction: column; gap: var(--space-6); }
  .faq__intro { flex: none; }
  .faq__list { flex: none; width: 100%; }
}
@media (max-width: 734px) {
  .faq__item { padding-inline: var(--space-3); margin-inline: 0; }
  .faq__q { padding-block: var(--space-4); gap: var(--space-4); }
  .faq__q-text { line-height: var(--lh-display); }
  .faq__a { padding-bottom: var(--space-4); }
}

/* ==========================================================================
   Form fields — calm inputs 48px, hairline border, clear focus ring, labels 13px.
   Light-background default (Contact). Dark variants below (White Paper).
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field__label {
  font-family: var(--font-alt); font-weight: 600; font-size: var(--fs-label); line-height: 1.2;   /* same label voice as the kicker */
  letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--color-text-muted);
}
.field__input {
  width: 100%; height: var(--btn-h); padding: 0 var(--space-4);
  background: var(--color-input-bg); border: 1px solid var(--color-input-border); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--fs-body); line-height: normal; color: var(--color-text);
  transition: border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), background-color var(--dur-mid) var(--ease);
}
.field__input::placeholder { color: var(--color-placeholder); opacity: 1; }
.field__input:focus { outline: none; background: var(--color-white); border-color: var(--color-blue-700); box-shadow: var(--focus-ring-light); }
.field__input[aria-invalid="true"] { border-color: var(--color-error); }
.field__input[aria-invalid="true"]:focus { border-color: var(--color-error); box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.18); }   /* an invalid field keeps its red ring while focused */
.field__select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-blue-700) 50%), linear-gradient(135deg, var(--color-blue-700) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.field__textarea { height: 176px; padding: var(--space-3) var(--space-4); line-height: var(--lh-body); resize: vertical; }
.field__error { font-size: var(--fs-small); line-height: 1.4; color: var(--color-error); }
.field__error:empty { display: none; }
.form-status { font-size: var(--fs-small); line-height: 1.4; font-weight: 600; }
.form-status:empty { display: none; }
[data-surface="dark"] .field__error { color: var(--color-error-on-dark); }
[data-surface="dark"] .form-status { color: var(--color-yellow-400); }
.field--check { flex-direction: row; align-items: flex-start; gap: var(--space-3); }

/* ==========================================================================
   Scroll reveal (set by main.js when motion.js is off; nothing hidden without JS or with reduced motion)
   fade + 24px rise, 0.7s ease-out, 80ms stagger
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(var(--rise-y)); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.is-in [data-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   Shared kicker / eyebrow label — 13px uppercase, tracking .14em, 24px yellow rule before.
   Pages should use .kicker; the page classes listed share the type (rule only on .kicker / .kicker--rule).
   ========================================================================== */
.kicker { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--gap-head-intro); }
.kicker::before { content: ""; flex: none; width: var(--space-5); height: 2px; border-radius: 2px; background: var(--color-yellow-400); }
.kicker--bare::before { display: none; }
.kicker--center { justify-content: center; }
.kicker--dot::before { width: 8px; height: 8px; border-radius: var(--radius-pill); }
.kicker, .eyebrow, .wp-eyebrow, .c-eyebrow, .c-label, .pb-label, .level-card__label, .whitepaper__label,
.ab-what__label, .ab-cta__label, .wp-facts__label, .wp-form__title, .wp-author__label {
  font-family: var(--font-alt); font-weight: 600; font-size: var(--fs-label);
  line-height: 1.2; letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--color-text-label);
}
.kicker { color: var(--color-blue-700); }   /* brand label on light bands; page eyebrow classes (loaded later) still win */
.section--blue .kicker, [data-surface="dark"] .kicker, .kicker--on-dark { color: var(--color-on-dark-muted); }

/* Form fields on dark bands */
.field--on-dark .field__label { color: var(--color-on-dark-muted); }
.field--on-dark .field__input {
  background: var(--input-on-dark-bg); border-color: var(--input-on-dark-line); color: var(--color-white);
}
.field--on-dark .field__input::placeholder { color: var(--color-on-dark-faint); }
.field--on-dark .field__input:focus { background: var(--input-on-dark-bg); border-color: var(--color-yellow-400); box-shadow: var(--focus-ring-dark); }
.field--on-dark .field__input[aria-invalid="true"], .field--on-dark .field__input[aria-invalid="true"]:focus { border-color: var(--color-error-on-dark); }
.field--on-dark .field__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(255, 180, 168, 0.3); }
.field--on-dark .field__error { color: var(--color-error-on-dark); }
.field--on-dark .field__select { background-image: linear-gradient(45deg, transparent 50%, var(--color-white) 50%), linear-gradient(135deg, var(--color-white) 50%, transparent 50%); }

/* ==========================================================================
   Icon buttons (round, icon only) — slider arrows, share, contact social
   ========================================================================== */
.btn-icon, .slider-btn, .pb-share__btn, .c-social a {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-ring-on-dark);
  transition: background-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.btn-icon:active, .slider-btn:active, .pb-share__btn:active, .c-social a:active { transform: scale(0.95); }
/* on light bands */
.btn-icon--light, .c-social a { box-shadow: inset 0 0 0 1px var(--color-line-strong); }

/* ==========================================================================
   Cards — one base, variants keep each section's look.
   Base: radius-lg, clip. Variants: --white (hairline, light band), --plain (white on a colour band),
   --quiet (grey tile), --brand (blue tile), --glass (flat dark band), --glass-photo (over a photo),
   --gradient (banner panel), --photo (photo + overlay), --media (photo/video frame).
   Hover (linked cards): translateY(-4px) + lift shadow + inner image scale(1.04) over 600ms.
   ========================================================================== */
.card,
.card--white, .pb-card, .pb-featured, .pb-takeaways, .pb-cta, .c-card, .wp-chapter, .wp-author, .ab-service,
.card--plain, .level-card, .future__quote, .whitepaper__card,
.card--quiet, .ab-sign,
.card--glass, .wp-form, .wp-aud-card,
.card--glass-photo, .ab-glass,
.card--gradient, .pb-newsletter,
.card--photo, .future__stat, .ab-cta__card,
.card--media, .system-card, .video, .ab-architect__frame, .pb-figure__frame, .c-map, .results__img, .future__photo, .testimonial__media, .about__photo {
  border-radius: var(--radius-lg);
}
.card--white, .pb-card, .pb-featured, .pb-takeaways, .pb-cta, .c-card, .wp-chapter, .wp-author, .ab-service--white {
  background: var(--color-white); border: 1px solid var(--color-hairline); box-shadow: var(--shadow-card-soft);   /* soft: white card resting on a light band */
}
.card--plain, .level-card, .future__quote, .whitepaper__card { background: var(--color-white); box-shadow: var(--shadow-rest); }
.card--quiet, .ab-sign { background: var(--color-neutral-100); border: 1px solid var(--color-hairline); }
.card--brand, .ab-service--blue { background: var(--gradient-band-blue-flat); color: var(--color-on-dark); }
.card--glass, .wp-form, .wp-aud-card, .pb-card--dark {
  background: var(--gradient-card-glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
.card--glass-photo, .ab-glass { background: var(--glass-photo-bg); border: 1px solid var(--glass-photo-line); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.card--gradient, .pb-newsletter { background: var(--gradient-hero); color: var(--color-on-dark); }
.card--photo, .future__stat, .ab-cta__card { position: relative; overflow: hidden; background: var(--color-navy-900); color: var(--color-on-dark); box-shadow: var(--shadow-rest); }
.card--media, .system-card, .video, .ab-architect__frame, .c-map { overflow: hidden; background: var(--color-media-bg); box-shadow: var(--shadow-rest); }
.results__img, .future__photo, .testimonial__media, .about__photo, .pb-figure__frame { overflow: hidden; box-shadow: var(--shadow-rest); }
/* padding: text cards = --card-pad, small tiles = --card-pad-sm, banner panels = --panel-pad */
.card, .future__quote, .whitepaper__card, .c-card, .wp-chapter, .wp-form, .wp-aud-card, .ab-glass, .ab-service { padding: var(--card-pad); }
.ab-sign, .pb-takeaways, .level-card__body, .pb-card__body, .system-card__body { padding: var(--card-pad-sm); }
.pb-cta, .pb-newsletter { padding: var(--panel-pad); }
/* photos: one grade, cover, never squashed */
.card--media img, .results__img img, .level-card__media img, .future__photo img, .future__stat-bg,
.about__photo img, .testimonial__media img, .pb-card__media img, .pb-featured__media img, .pb-figure__frame img, .hero-wall__panel img,
.ab-architect__frame img, .ab-cta__bg, .c-hero__bg, .ab-hero__bg, .ab-what__photo, .ab-mission__photo, .pb-hero__bg, .pb-author__photo {
  filter: var(--photo-grade); object-fit: cover;
}
/* hover lift on linked / interactive cards */
.card--lift, .level-card, .template-card, .pb-card, .pb-featured, a.card {
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}
.card--lift img, .level-card__media img, .template-card img, .pb-card__media img, .pb-featured__media img { transition: transform var(--dur-media) var(--ease); }
/* client logos: quiet grey, colour on hover */
.logos__item img { filter: var(--photo-grade-logo); transition: filter var(--dur-mid) var(--ease); }
/* hairline divider helper */
.hr { border: 0; border-top: 1px solid var(--color-hairline); margin: 0; }
[data-surface="dark"] .hr, .section--blue .hr { border-color: var(--color-line-on-dark); }

@media (max-width: 734px) {
  .card, .future__quote, .whitepaper__card, .c-card, .wp-chapter, .wp-form, .wp-aud-card, .ab-glass, .ab-service { padding: var(--card-pad-sm); }
  .pb-cta, .pb-newsletter { padding: var(--card-pad) var(--card-pad-sm); }
}

/* hover only where a pointer can hover (no sticky hover after a tap on phones/tablets) */
@media (hover: hover) {
  .btn:hover { transform: translateY(var(--btn-lift)); }
  .btn--yellow:hover { background: var(--color-yellow-500); box-shadow: var(--shadow-btn-yellow); }
  .btn--blue:hover { background: var(--color-blue-800); box-shadow: var(--shadow-btn-blue); }
  .btn--ghost:hover { background: var(--tint-brand-strong); box-shadow: inset 0 0 0 1px var(--color-blue-700), var(--shadow-btn-blue); }
  .btn--ghost-light:hover { background: var(--color-hover-on-dark); box-shadow: inset 0 0 0 1px var(--color-white), var(--shadow-btn-white); }
  .btn--outline-white:hover { background: var(--color-yellow-500); box-shadow: var(--shadow-btn-yellow); }
  .link-underline:hover::after { transform: scaleX(1); }
  .site-nav__link:hover::after { transform: scaleX(.5); }
  .social-list a:hover { background: var(--color-hover-on-dark); box-shadow: inset 0 0 0 1px var(--color-ring-on-dark); transform: translateY(var(--btn-lift)); }
  .btn-icon:hover, .slider-btn:hover, .pb-share__btn:hover { background: var(--color-hover-on-dark); box-shadow: inset 0 0 0 1px var(--color-white); transform: translateY(var(--btn-lift)); }
  .btn-icon--light:hover, .c-social a:hover { box-shadow: inset 0 0 0 1px var(--color-blue-700), var(--shadow-btn-blue); background: var(--color-white); transform: translateY(var(--btn-lift)); }
  .card--lift:hover, .level-card:hover, .template-card:hover, .pb-card:hover, .pb-featured:hover, a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
  .card--lift:hover img, .level-card:hover .level-card__media img, .template-card:hover img, .pb-card:hover .pb-card__media img, .pb-featured:hover .pb-featured__media img { transform: scale(1.04); }
  .faq__item:hover:not(.is-open) { background: rgba(24, 61, 137, 0.025); }
  .faq__q:hover .faq__icon { box-shadow: inset 0 0 0 1px var(--color-blue-700); }
  .field__input:hover { border-color: rgba(2, 6, 21, 0.28); }
  .field--on-dark .field__input:hover { border-color: var(--color-ring-on-dark); }
  .logos__item:hover img { filter: grayscale(0) opacity(1); }
}

.slider-btn[aria-disabled="true"] { opacity: .4; cursor: default; transform: none; background: transparent; box-shadow: inset 0 0 0 1px var(--color-ring-on-dark); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .faq__item.is-open .faq__a { animation: none; }
  .btn, .btn:hover, .btn:active, .social-list a:hover, .btn-icon:hover, .slider-btn:hover, .pb-share__btn:hover, .c-social a:hover,
  .card--lift:hover, .level-card:hover, .template-card:hover, .pb-card:hover, .pb-featured:hover { transform: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .site-nav { transition: none !important; }
}