/* ==========================================================================
   Vanguard Captive Management — vancap.com
   Design system recreated from the live Squarespace 7.1 (Fluid Engine) site.

   Palette, typography and layout constants below are the exact values
   compiled into the production site.css (site-level tweaks + theme sets).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette — taken verbatim from the site's compiled HSL custom props */
  --white-hsl: 0, 0%, 100%;
  --light-accent-hsl: 60, 7.46%, 86.86%;
  --accent-hsl: 218.18, 37.29%, 23.14%;
  --dark-accent-hsl: 330, 2.44%, 16.08%;
  --black-hsl: 0, 0%, 0%;

  --white: hsl(var(--white-hsl));              /* #ffffff */
  --light-accent: hsl(var(--light-accent-hsl)); /* #e0e0db — warm paper grey */
  --accent: hsl(var(--accent-hsl));            /* #253551 — VCM navy */
  --dark-accent: hsl(var(--dark-accent-hsl));  /* #2a2829 — near black */
  --black: hsl(var(--black-hsl));

  /* Brand blues — the navy family used by the hero and the dark sections,
     plus the two "light blue" accents (one legible on navy, one on white). */
  --navy-900: #061223;
  --navy-deep: #091a30;
  --navy-800: #0e2442;
  --navy-700: #16345c;
  --navy-600: #1d4477;

  --blue-light: #85bcf2;   /* accent on navy backgrounds */
  --blue-mid: #2a7ac8;     /* accent on white backgrounds */
  --blue-bright: #2f7ed6;
  --neon-green: #4dffa3;   /* sensAI metric callouts */

  /* Squarespace "safe" derivations used by the theme sets */
  --safe-dark-accent: var(--accent);
  --safe-light-accent: var(--white);
  --safe-inverse-accent: var(--white);
  --safe-inverse-dark-accent: var(--white);

  /* Typography — heading/body font pairing from the site's font tweaks */
  --heading-font: "Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --heading-weight: 400;
  --heading-transform: uppercase;
  --heading-letter-spacing: -0.02em;
  --heading-line-height: 1.2em;

  --body-font: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body-weight: 600;
  --body-line-height: 1.5em;

  --base-font-size: 16px;

  /* Type scale (desktop targets, fluid via clamp) */
  --h1-size: clamp(2.6rem, 1.35rem + 3.1vw, 4rem);
  --h2-size: clamp(2rem, 1.46rem + 1.35vw, 2.8rem);
  --h3-size: clamp(1.65rem, 1.32rem + 0.82vw, 2.2rem);
  --h4-size: clamp(1.25rem, 1.1rem + 0.38vw, 1.6rem);
  --large-text: clamp(1.15rem, 1.05rem + 0.25vw, 1.4rem);
  --normal-text: 1rem;
  --small-text: 0.9rem;

  /* Layout — maxPageWidth / pagePadding tweaks */
  --max-page-width: 2000px;
  --page-padding: 4vw;
  --mobile-page-padding: 6vw;

  /* Fluid Engine grid geometry */
  --fe-gap: 11px;
  --fe-columns: 24;
  --row-height-scaling-factor: 0.0215;
  --container-width: min(100vw, var(--max-page-width));
  --fe-row-height: calc(var(--container-width) * var(--row-height-scaling-factor));

  /* Header */
  --header-logo-height: 85px;
  --header-mobile-logo-height: 30px;
  --header-vert-padding: 0.9vw;
  --mobile-header-vert-padding: 6vw;

  /* Buttons */
  --button-radius: 6.4px;
  --button-padding-x: 2em;
  --button-padding-y: 1.2em;

  /* Default (root) theme = light accent, per the site's :root theme set */
  --bg: var(--light-accent);
  --text: var(--black);
  --heading-color: var(--safe-dark-accent);
  --button-bg: var(--safe-dark-accent);
  --button-text: var(--safe-inverse-dark-accent);
  --line-color: var(--black);
}

/* --------------------------------------------------------------------------
   2. Section theme sets
   These mirror [data-section-theme="..."] from the production stylesheet.
   -------------------------------------------------------------------------- */
[data-section-theme="white"],
[data-section-theme="white-bold"] {
  --bg: var(--white);
  --text: var(--black);
  --heading-color: var(--safe-dark-accent);
  --button-bg: var(--safe-dark-accent);
  --button-text: var(--safe-inverse-dark-accent);
  --line-color: var(--black);
}

[data-section-theme="light"],
[data-section-theme="light-bold"] {
  --bg: var(--light-accent);
  --text: var(--black);
  --heading-color: var(--safe-dark-accent);
  --button-bg: var(--safe-dark-accent);
  --button-text: var(--safe-inverse-dark-accent);
  --line-color: var(--black);
}

[data-section-theme="bright"] {
  --bg: var(--accent);
  --text: var(--safe-inverse-accent);
  --heading-color: var(--safe-inverse-accent);
  --button-bg: var(--safe-inverse-accent);
  --button-text: var(--accent);
  --line-color: var(--safe-inverse-accent);
}

[data-section-theme="bright-inverse"] {
  --bg: var(--safe-inverse-accent);
  --text: var(--accent);
  --heading-color: var(--accent);
  --button-bg: var(--accent);
  --button-text: var(--safe-inverse-accent);
  --line-color: var(--accent);
}

[data-section-theme="dark"],
[data-section-theme="dark-bold"] {
  --bg: var(--dark-accent);
  --text: var(--white);
  --heading-color: var(--white);
  --button-bg: var(--safe-light-accent);
  --button-text: var(--black);
  --line-color: var(--white);
}

[data-section-theme="black"],
[data-section-theme="black-bold"] {
  --bg: var(--black);
  --text: var(--white);
  --heading-color: var(--white);
  --button-bg: var(--safe-light-accent);
  --button-text: var(--black);
  --line-color: var(--white);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: var(--base-font-size);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--body-font);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  text-transform: var(--heading-transform);
  letter-spacing: var(--heading-letter-spacing);
  line-height: var(--heading-line-height);
  color: var(--heading-color);
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 {
  font-size: var(--h4-size);
  /* h4 is used as a supporting deck throughout the site — sentence-cased */
  text-transform: none;
  letter-spacing: 0;
}

p {
  margin: 0 0 1em;
  font-size: var(--normal-text);
  color: var(--text);
}

p:last-child { margin-bottom: 0; }

a { color: inherit; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Utility text roles used by the content blocks */
.eyebrow {
  font-size: var(--small-text);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  opacity: 0.75;
  margin-bottom: 0.75em;
}

.lead { font-size: var(--large-text); }

.fine-print {
  font-size: 0.78rem;
  opacity: 0.7;
  line-height: 1.45em;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--white);
  padding: 12px 20px;
  z-index: 1000;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   4. Header
   Production layout: logo left, nav right ("navRight"), solid, not fixed.
   -------------------------------------------------------------------------- */
.header {
  background: var(--white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 100;
}

.header__inner {
  max-width: var(--max-page-width);
  margin: 0 auto;
  padding: var(--header-vert-padding) var(--page-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.header__logo img {
  height: var(--header-logo-height);
  width: auto;
  max-height: 12vw;
}

.header__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.15vw, 1.9rem);
}

.header__nav a {
  text-decoration: none;
  font-size: clamp(0.78rem, 0.72vw, 0.95rem);
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  padding: 0.4em 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

.header__nav a:hover { border-bottom-color: var(--accent); }

.header__nav a[aria-current="page"] {
  border-bottom-color: var(--accent);
}

.header__toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  color: var(--accent);
}

.header__toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.header--open .header__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header--open .header__toggle span:nth-child(2) { opacity: 0; }
.header--open .header__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 991px) {
  .header__inner { padding: var(--mobile-header-vert-padding) var(--mobile-page-padding); }

  .header__logo img {
    height: auto;
    max-height: 46px;
  }

  .header__toggle { display: block; }

  .header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: none;
  }

  .header--open .header__nav { display: block; }

  .header__nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--mobile-page-padding) 1.5rem;
  }

  .header__nav a {
    display: block;
    padding: 0.9em 0;
    font-size: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
}

/* --------------------------------------------------------------------------
   5. Fluid Engine grid
   Reproduces Squarespace's 24-column fluid grid: two outer gutter tracks
   plus 24 content tracks, 11px gaps, rows sized by the scaling factor.
   Blocks carry an inline `grid-area: rowStart / colStart / rowEnd / colEnd`
   matching the production layout.
   -------------------------------------------------------------------------- */
.page-section {
  background: var(--bg);
  color: var(--text);
  position: relative;
  /* Trailing breathing room: fluid rows only extend to the last block's end
     row, so sections need a little padding to avoid butting up against the
     next one. Leading space comes from the empty top rows in each layout. */
  padding-bottom: clamp(2rem, 4vw, 5rem);
}

.fluid-engine {
  --grid-gutter: calc(var(--page-padding) - var(--fe-gap));
  --cell-max-width: calc(
    (var(--max-page-width) - (var(--fe-gap) * (var(--fe-columns) - 1))) / var(--fe-columns)
  );
  display: grid;
  column-gap: var(--fe-gap);
  row-gap: var(--fe-gap);
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(var(--fe-columns), minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  grid-auto-rows: minmax(var(--fe-row-height), auto);
  align-items: start;
}

.fe-block { min-width: 0; }

/* Blocks whose content should fill their cell (images, panels) */
.fe-block--fill { align-self: stretch; }

/*
 * Images render at their natural aspect ratio and the grid row track grows to
 * fit (grid-auto-rows uses minmax(row-height, auto)), which matches how the
 * production sections behave and avoids letterboxing or squashing.
 */
.fe-block--fill img {
  width: 100%;
  height: auto;
}

/* Vertically centre text blocks within their assigned rows */
.fe-block--center { align-self: center; }

/*
 * Mobile: the production site uses a separate 8-column mobile grid. Here the
 * grid collapses to a single stacked column and blocks are authored in
 * reading order, which produces the same content sequence at small sizes.
 */
@media (max-width: 767px) {
  .fluid-engine {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: 3.5rem var(--mobile-page-padding);
  }

  .fluid-engine > .fe-block {
    grid-area: auto !important;
    width: 100%;
  }

  .fe-block--fill img { height: auto; }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: var(--normal-text);
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--button-radius);
  border: 0;
  cursor: pointer;
  background: var(--button-bg);
  color: var(--button-text);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.btn--secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-color);
}

/*
 * Stat "buttons" — the four proof points on the Our Difference section are
 * button-styled panels on the live site rather than links.
 */
.stat-card {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 1.6em 1.4em;
  border-radius: var(--button-radius);
  background: var(--button-bg);
  color: var(--button-text);
  font-size: clamp(0.85rem, 0.72vw, 1rem);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  justify-content: center;
}

.stat-card strong {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: -0.02em;
  display: block;
  font-size: 1.9em;
  margin-bottom: 0.25em;
}

/* --------------------------------------------------------------------------
   7. Content blocks
   -------------------------------------------------------------------------- */
.pull-quote p:first-child {
  font-size: var(--large-text);
  line-height: 1.45em;
  font-style: italic;
}

.pull-quote cite,
.quote-source {
  display: block;
  font-style: normal;
  font-size: var(--small-text);
  opacity: 0.8;
  margin-top: 0.9em;
}

.logo-wall p {
  font-size: clamp(0.9rem, 0.85vw, 1.05rem);
  line-height: 2;
  text-align: center;
  opacity: 0.9;
}

/* Team member name/role caption */
.member-caption {
  text-align: center;
}

.member-caption .member-name {
  font-family: var(--heading-font);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(0.95rem, 0.9vw, 1.15rem);
  margin-bottom: 0.2em;
}

.member-caption .member-role {
  font-size: var(--small-text);
  opacity: 0.8;
  margin: 0;
}

.member-bio {
  font-size: clamp(0.85rem, 0.8vw, 0.95rem);
  line-height: 1.6em;
}

.member-bio strong { font-weight: 700; }

.headshot img {
  width: 100%;
  border-radius: 4px;
  object-fit: cover;
}

.contact-details p {
  margin-bottom: 0.6em;
  font-size: var(--normal-text);
}

.contact-details .label {
  display: block;
  font-size: var(--small-text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.65;
}

.contact-details a { text-decoration: none; }
.contact-details a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   8. Form
   Field set mirrors the production form block: Name (first/last), Email,
   Message, Company, and an "I am a…" checkbox group. Submit label: "Send".
   -------------------------------------------------------------------------- */
.form-block {
  background: transparent;
}

.form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.form-row > .form-field { flex: 1 1 180px; }

.form-field { margin-bottom: 20px; }

.form-field > label,
.form-field > .field-title {
  display: block;
  font-size: var(--small-text);
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}

.form-field .required { color: inherit; opacity: 0.6; }

.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
  width: 100%;
  font-family: var(--body-font);
  font-size: var(--normal-text);
  font-weight: 500;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--black);
  border-radius: 5px;
  padding: 8px 15px;
}

.form-field textarea {
  min-height: 130px;
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.form-field .sub-label {
  display: block;
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 4px;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
  column-gap: 20px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: var(--normal-text);
  font-weight: 500;
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  margin: 0;
}

.form-submit { margin-top: 4px; }

.form-status {
  margin-top: 1rem;
  font-weight: 700;
  display: none;
}

.form-status.is-visible { display: block; }

/* Success and failure must look clearly different — a failed send has to read
   as a problem, not as a quiet confirmation. */
.form-status.is-success { color: var(--accent, #253551); }

.form-status.is-error {
  color: #a32020;
  font-weight: 600;
  line-height: 1.5em;
}

.form-status.is-error a {
  color: inherit;
  font-weight: 700;
}

/* On navy panels the default ink would disappear. */
[data-section-theme="bright"] .form-status.is-success,
.section--navy .form-status.is-success { color: #ffffff; }

[data-section-theme="bright"] .form-status.is-error,
.section--navy .form-status.is-error { color: #ffd4d4; }

/* Submit button while the request is in flight */
.btn:disabled,
.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

/* --------------------------------------------------------------------------
   Book Now — animated background

   Modelled on the Background Art settings from the live /book-now section:
   a conic sweep between the warm grey accent and white (3 repeats, starting
   at 280deg), heavily blurred, with vertical distortion and fog drifting
   over the top. Squarespace draws this with a WebGL shader; two independent
   layers moving on different clocks give the same slow, organic wander
   without the rigid look of a single rotating gradient.
   -------------------------------------------------------------------------- */
.section--conic {
  --bg: var(--white);
  --text: var(--navy-800);
  --heading-color: var(--navy-800);
  --accent-text: var(--blue-mid);
  --card-bg: var(--white);
  --card-border: #dde6f2;
  --button-bg: var(--navy-800);
  --button-text: var(--white);
  background: var(--white);
}

/* `.section > *` sets z-index:1 on every child and appears later in this
   file, so a bare `.conic-bg` rule would lose the tie on source order and the
   wash would paint over the text. The child combinator raises specificity so
   this wins wherever it sits. */
.section > .conic-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Layer 1 — the conic sweep: three repeats from 280deg, turning very slowly
   (the original's speed:20 is barely perceptible frame to frame). */
.section > .conic-bg::before {
  content: "";
  position: absolute;
  inset: -55%;
  background: conic-gradient(
    from 280deg at 52% 44%,
    #ffffff 0deg,   #e9e9e4 38deg,  #d9d9d3 60deg,  #f0f0ec 92deg,
    #ffffff 120deg, #e9e9e4 158deg, #d9d9d3 180deg, #f0f0ec 212deg,
    #ffffff 240deg, #e9e9e4 278deg, #d9d9d3 300deg, #f0f0ec 332deg,
    #ffffff 360deg
  );
  filter: blur(70px);
  opacity: 0.9;
  transform-origin: 52% 44%;
  animation: conic-spin 120s linear infinite;
  will-change: transform;
}

/* Layer 2 — distortion and fog: soft masses that stretch vertically and
   wander, standing in for distortionScaleY / distortionIntensity / fog. */
.section > .conic-bg::after {
  content: "";
  position: absolute;
  inset: -35%;
  background:
    radial-gradient(58% 40% at 28% 26%, rgba(214, 214, 208, 0.80), transparent 72%),
    radial-gradient(52% 46% at 76% 62%, rgba(224, 224, 219, 0.70), transparent 74%),
    radial-gradient(64% 34% at 48% 92%, rgba(255, 255, 255, 0.95), transparent 70%),
    radial-gradient(40% 28% at 88% 14%, rgba(255, 255, 255, 0.90), transparent 72%);
  filter: blur(60px);
  animation: conic-drift 42s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes conic-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes conic-drift {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1.02, 1.00); }
  50%  { transform: translate3d( 2%,  2%, 0) scale(0.98, 1.16); }
  100% { transform: translate3d( 4%, -1%, 0) scale(1.05, 1.06); }
}

.section--conic .contact-details .label { color: var(--navy-800); opacity: 0.6; }
.section--conic .contact-details p,
.section--conic .contact-details a { color: var(--navy-800); }

.contact-intro .contact-details { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   Cal.com booking embed
   Sits where the contact form used to, in the right-hand column. The widget
   renders its own white iframe, so the container just supplies the card
   shell and reserves height to stop the section jumping as it loads.
   -------------------------------------------------------------------------- */
/* Cal also uses .cal-embed on its iframe; style only our outer mount. */
.cal-embed[data-cal-embed] {
  width: 100%;
  min-height: 520px;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(6, 18, 35, 0.18);
}

/* Cal injects an iframe; make sure it fills the shell. */
.cal-embed iframe {
  width: 100% !important;
  border: 0;
  display: block;
}

/* Shown while loading, and rewritten in place if the embed fails. */
.cal-embed__fallback {
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--black);
}

.cal-embed__fallback p { color: inherit; }

.cal-embed__fallback .btn { margin-top: 0.5em; }

/* Once Cal has mounted it adds its own markup — hide the placeholder. */
.cal-embed[data-cal-loaded] .cal-embed__fallback { display: none; }

/* Keep the mobile calendar's square date cells from growing on tablets. */
@media (max-width: 860px) {
  .cal-embed[data-cal-embed] {
    max-width: 480px;
    min-height: 440px;
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .cal-embed[data-cal-embed] {
    border-radius: 10px;
  }
  .cal-embed__fallback { padding: 2rem 1.25rem; }
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--white);
  color: var(--black);
  --bg: var(--white);
  --text: var(--black);
  --heading-color: var(--accent);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.site-footer .footer-logo img {
  max-width: 280px;
  width: 100%;
}

.site-footer .footer-contact {
  text-align: right;
  /* Pull the address in off the content edge — at full size it reads as
     cramped when it butts right up against the page padding. */
  padding-inline-end: clamp(0.75rem, 2.5vw, 3rem);
}

.site-footer .footer-contact a {
  text-decoration: none;
  font-family: var(--heading-font);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: var(--h3-size);
  color: var(--accent);
  word-break: break-word;
}

.site-footer .footer-contact a:hover { text-decoration: underline; }

.site-footer .copyright {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

@media (max-width: 767px) {
  .site-footer .footer-contact { text-align: left; padding-inline-end: 0; }
  .site-footer .footer-logo img { max-width: 220px; }
}

/* ==========================================================================
   10. Flow sections
   The home page is authored with these instead of the fixed Fluid Engine
   grid so headings stay centred and blocks stay tight to one another at
   every viewport width.
   ========================================================================== */
.section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-pad, clamp(3.5rem, 6vw, 6rem));
  background: var(--bg);
  color: var(--text);
}

.section > * { position: relative; z-index: 1; }

.wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--page-padding);
}

.wrap--narrow { max-width: 900px; }
.wrap--mid { max-width: 1080px; }
.wrap--wide { max-width: 1500px; }

@media (max-width: 767px) {
  .wrap { padding-inline: var(--mobile-page-padding); }
}

/* Centred content column — used by every section header on the home page. */
.center { text-align: center; }

.section__head {
  text-align: center;
  max-width: 860px;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.section__head > *:last-child { margin-bottom: 0; }
.section__head .lead { margin-top: 0.9em; }

/* A tighter head for sections that sit directly on top of their content. */
.section__head--tight { margin-bottom: clamp(1.4rem, 2.2vw, 2rem); }

/* -------------------------------------------------------------------------
   10.1 Section skins
   ------------------------------------------------------------------------- */
.section--white {
  --bg: var(--white);
  --text: #1c2534;
  --heading-color: var(--navy-800);
  --accent-text: var(--blue-mid);
  --card-bg: #f5f8fc;
  --card-border: #e3eaf3;
  --button-bg: var(--navy-800);
  --button-text: var(--white);
}

.section--tint {
  --bg: #f4f7fb;
  --text: #1c2534;
  --heading-color: var(--navy-800);
  --accent-text: var(--blue-mid);
  --card-bg: var(--white);
  --card-border: #e3eaf3;
  --button-bg: var(--navy-800);
  --button-text: var(--white);
}

.section--navy,
.section--blue,
.section--hero,
.section--cta {
  --text: rgba(226, 236, 248, 0.86);
  --heading-color: var(--white);
  --accent-text: var(--blue-light);
  --card-bg: rgba(255, 255, 255, 0.05);
  --card-border: rgba(255, 255, 255, 0.14);
  --button-bg: var(--white);
  --button-text: var(--navy-800);
  color: var(--text);
}

.section--navy { background: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-700) 100%); }

/* A lighter blue band, used to lift the credentials strip off the navy above it. */
.section--blue {
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-600) 100%);
  --section-pad: clamp(4rem, 7vw, 7rem);
}

.section--hero {
  background: linear-gradient(150deg, var(--navy-900) 0%, var(--navy-800) 45%, var(--navy-700) 100%);
  --section-pad: clamp(4.5rem, 9vw, 8.5rem);
}

.section--cta {
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--blue-bright) 100%);
  --section-pad: clamp(4rem, 7vw, 7rem);
}

/* White section with a slow moving sheen behind the content. */
.section--shine {
  --bg: var(--white);
  --text: var(--navy-800);
  --heading-color: var(--navy-800);
  --accent-text: var(--blue-mid);
  --card-bg: var(--white);
  --card-border: #dde6f2;
  --button-bg: var(--navy-800);
  --button-text: var(--white);
  background: var(--white);
}

.section--shine::before,
.section--shine::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
}

.section--shine::before {
  background:
    radial-gradient(38% 46% at 18% 26%, rgba(133, 188, 242, 0.30), transparent 70%),
    radial-gradient(42% 50% at 84% 74%, rgba(42, 122, 200, 0.18), transparent 70%),
    radial-gradient(34% 40% at 62% 12%, rgba(190, 220, 250, 0.35), transparent 70%);
  animation: shine-drift 22s ease-in-out infinite alternate;
}

.section--shine::after {
  background: linear-gradient(104deg,
    transparent 38%,
    rgba(255, 255, 255, 0.85) 47%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.85) 53%,
    transparent 62%);
  background-size: 260% 100%;
  animation: shine-sweep 9s linear infinite;
  mix-blend-mode: overlay;
}

@keyframes shine-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

@keyframes shine-sweep {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}

/* Drifting-dot canvas painted by main.js into any [data-particles] section. */
.particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   10.2 Type helpers for the flow sections
   ------------------------------------------------------------------------- */
.eyebrow--accent {
  color: var(--accent-text);
  opacity: 1;
}

.accent-text { color: var(--accent-text); }

.hero__title {
  font-size: clamp(2rem, 1.15rem + 2.9vw, 3.7rem);
  margin-bottom: 0.6em;
}

.hero__body {
  max-width: 760px;
  margin-inline: auto;
}

.hero__kicker {
  font-family: var(--heading-font);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.6rem);
  color: var(--blue-light);
  margin-top: 1.4em;
}

.section--hero .btn { margin-top: 2rem; }

/* -------------------------------------------------------------------------
   10.3 Card grids
   ------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: clamp(0.9rem, 1.4vw, 1.4rem);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: clamp(1.25rem, 1.8vw, 1.9rem);
}

.card__title {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.4rem);
  line-height: 1.3;
  color: var(--heading-color);
  margin: 0 0 0.5em;
}

/* Keep brand wordmarks out of the global uppercase heading transform. */
.wordmark {
  text-transform: none;
  letter-spacing: -0.01em;
}

.card__meta {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--accent-text);
  margin: 0 0 0.9em;
}

.card p { font-size: clamp(0.9rem, 0.86rem + 0.15vw, 1rem); }
.card p:last-child { margin-bottom: 0; }

.card__list {
  list-style: none;
  margin: 0.9em 0 0;
  padding: 0;
  display: grid;
  gap: 0.7em;
  font-size: clamp(0.88rem, 0.84rem + 0.15vw, 0.98rem);
  line-height: 1.5;
}

.card__list li {
  position: relative;
  padding-left: 1.3em;
}

.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent-text);
}

/* Compact brand proof cards ("Caterpillar / John Deere / Apple / Toyota"). */
.brand-card {
  text-align: center;
  padding: clamp(1rem, 1.4vw, 1.4rem) 1rem;
}

.brand-card strong {
  display: block;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.4rem);
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 0.3em;
}

.brand-card span {
  display: block;
  font-size: clamp(0.82rem, 0.8rem + 0.12vw, 0.92rem);
  line-height: 1.4;
  opacity: 0.75;
}

/* The four proof points on Our Difference — ovals, not squares. */
.stat-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.9rem, 1.4vw, 1.5rem);
}

.stat-pill {
  flex: 1 1 210px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: clamp(1.6rem, 2.4vw, 2.4rem) clamp(1.4rem, 2vw, 2rem);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy-800);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.stat-pill strong {
  display: block;
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1;
  margin-bottom: 0.35em;
  color: var(--navy-800);
}

.stat-pill span {
  font-size: clamp(0.76rem, 0.73rem + 0.14vw, 0.87rem);
  line-height: 1.4;
  font-weight: 600;
}

@media (max-width: 600px) {
  .stat-pill {
    flex-basis: 100%;
    max-width: none;
    border-radius: 200px;
    padding-block: 1.5rem;
  }
}

/* -------------------------------------------------------------------------
   10.4 Comparison tables
   ------------------------------------------------------------------------- */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.4vw, 1.4rem);
}

.compare__col {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: clamp(1.25rem, 1.8vw, 1.8rem);
}

.compare__col h4 {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 1em;
  color: var(--heading-color);
}

.compare__col--win h4 { color: var(--accent-text); }

.compare__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75em;
  font-size: clamp(0.86rem, 0.83rem + 0.14vw, 0.96rem);
  line-height: 1.45;
}

.compare__col li {
  display: grid;
  grid-template-columns: 1.35em 1fr;
  align-items: start;
  gap: 0.35em;
}

.compare__col li::before {
  content: "\2715";
  font-weight: 700;
  color: #e07a63;
  line-height: 1.45;
}

.compare__col--win li::before {
  content: "\2713";
  color: var(--neon-green);
}

.section--white .compare__col--win li::before,
.section--tint .compare__col--win li::before { color: #2e9e63; }

.compare__col--lose { opacity: 0.82; }

@media (max-width: 600px) {
  .compare { grid-template-columns: minmax(0, 1fr); }
}

/* Three-column question / one-bank / virtual-captive matrix. */
.matrix {
  border: 1px solid var(--card-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card-bg);
}

.matrix__row {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: clamp(0.6rem, 1.2vw, 1.5rem);
  padding: clamp(0.75rem, 1.1vw, 1.05rem) clamp(1rem, 1.6vw, 1.6rem);
  border-top: 1px solid var(--card-border);
  font-size: clamp(0.83rem, 0.8rem + 0.16vw, 0.96rem);
  line-height: 1.4;
  text-align: left;
}

.matrix__row:first-child { border-top: 0; }

.matrix__row--head {
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--accent-text);
}

.section--white .matrix__row--head,
.section--tint .matrix__row--head { background: var(--navy-800); color: var(--white); }

.matrix__q { font-weight: 700; color: var(--heading-color); }
.matrix__a { opacity: 0.72; }
.matrix__b { font-weight: 700; color: var(--heading-color); }

@media (max-width: 700px) {
  .matrix__row { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .matrix__row--head { display: none; }
  .matrix__a::before { content: "One bank: "; opacity: 0.7; font-weight: 700; }
  .matrix__b::before { content: "Virtual Captive\2122: "; color: var(--accent-text); }
}

/* -------------------------------------------------------------------------
   10.5 sensAI
   ------------------------------------------------------------------------- */
/* Dark panels dropped into a light section carry their own text tokens so
   nested <p> elements don't inherit the section's dark body colour. */
.sensai-panel {
  --text: rgba(226, 236, 248, 0.86);
  background: linear-gradient(150deg, var(--navy-900), var(--navy-700));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: clamp(1.4rem, 2.4vw, 2.4rem);
  color: var(--text);
}

.sensai-panel__title {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
  color: var(--white);
  margin: 0 0 0.25em;
}

.sensai-panel__sub {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--blue-light);
  margin: 0 0 clamp(1.2rem, 2vw, 1.8rem);
}

.metric-tile {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: clamp(1rem, 1.5vw, 1.4rem);
}

.metric-tile__label {
  font-size: 0.82rem;
  opacity: 0.72;
  margin: 0 0 0.4em;
}

.metric-tile__value {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem);
  line-height: 1;
  color: var(--white);
  margin: 0 0 0.35em;
}

.metric-tile__note {
  margin: 0;
  font-size: clamp(0.85rem, 0.82rem + 0.14vw, 0.95rem);
  font-weight: 700;
  color: var(--neon-green);
}

.sensai-chart {
  margin-top: clamp(1.1rem, 1.8vw, 1.6rem);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: clamp(1rem, 1.5vw, 1.4rem);
}

.sensai-chart__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.85rem;
  opacity: 0.75;
  margin-bottom: 1rem;
}

.sensai-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: clamp(6px, 1vw, 14px);
  height: clamp(90px, 12vw, 150px);
}

.sensai-chart__bars span {
  flex: 1;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #6cb3ea, #3f86c9);
}

/* -------------------------------------------------------------------------
   10.6 Payment Paradox
   ------------------------------------------------------------------------- */
.deal-card {
  border-radius: 14px;
  border: 1px solid var(--card-border);
  padding: clamp(1.3rem, 2vw, 2rem);
  background: var(--card-bg);
  text-align: left;
}

.deal-card--lost { background: linear-gradient(170deg, #fdf1ec, #fbfaf9); }
.deal-card--won { background: linear-gradient(170deg, #eef7f0, #fafbfa); }

.deal-card__tag {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  margin: 0 0 1.1em;
}

.deal-card--lost .deal-card__tag { color: #b8492a; }
.deal-card--won .deal-card__tag { color: #2e7d4f; }

.deal-card dl {
  margin: 0 0 1.2em;
  display: grid;
  gap: 0.55em;
}

.deal-card dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.55em;
  border-bottom: 1px dashed #d8dde5;
  font-size: clamp(0.88rem, 0.85rem + 0.14vw, 0.98rem);
}

.deal-card dt { opacity: 0.7; margin: 0; }
.deal-card dd { margin: 0; font-weight: 700; color: var(--navy-800); }

.deal-card__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  opacity: 0.65;
  margin: 0 0 0.3em;
}

.deal-card__figure {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem);
  line-height: 1;
  margin: 0 0 0.15em;
}

.deal-card--lost .deal-card__figure { color: #b8492a; }
.deal-card--won .deal-card__figure { color: #3d7d4f; }

.deal-card__unit { font-size: 0.85rem; opacity: 0.65; margin: 0 0 1.2em; }

.deal-card__total {
  border-top: 1px solid #dfe4ea;
  padding-top: 1.1em;
}

.deal-card__total strong {
  display: block;
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  color: var(--navy-800);
  margin-bottom: 0.2em;
}

.deal-card__total em { font-size: 0.85rem; opacity: 0.7; }

.metric-strip {
  text-align: center;
  padding: clamp(1.1rem, 1.7vw, 1.6rem) 1rem;
}

.metric-strip strong {
  display: block;
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.3rem);
  line-height: 1;
  color: #b8492a;
  margin-bottom: 0.4em;
}

.metric-strip span {
  font-size: clamp(0.8rem, 0.78rem + 0.13vw, 0.9rem);
  line-height: 1.4;
  opacity: 0.75;
}

.insight-panel {
  --text: rgba(226, 236, 248, 0.9);
  background: linear-gradient(140deg, var(--navy-900), var(--navy-700));
  border-left: 5px solid var(--blue-bright);
  border-radius: 14px;
  padding: clamp(1.4rem, 2.2vw, 2.2rem);
  color: rgba(226, 236, 248, 0.9);
  font-style: italic;
  font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.2rem);
  line-height: 1.55;
  text-align: left;
}

.insight-panel .accent-text { color: var(--blue-light); font-style: normal; font-weight: 700; }

/* -------------------------------------------------------------------------
   10.7 Quote + logo wall
   ------------------------------------------------------------------------- */
.quote-panel {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  padding-block: clamp(1.6rem, 2.6vw, 2.6rem);
}

.quote-panel p {
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.45rem);
  line-height: 1.5;
  font-style: italic;
  margin-bottom: 0.9em;
}

.quote-panel cite {
  display: block;
  font-style: normal;
  font-size: var(--small-text);
  opacity: 0.72;
}

.program-list {
  text-align: center;
  font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1.12rem);
  line-height: 2.1;
  max-width: 1000px;
  margin-inline: auto;
}

.program-list strong { color: var(--white); font-weight: 700; }

/* -------------------------------------------------------------------------
   10.8 Team
   ------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.6rem);
}

@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .team-grid { grid-template-columns: minmax(0, 1fr); } }

.team-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  overflow: hidden;
}

.team-card__photo {
  aspect-ratio: 4 / 5;
  background: rgba(255, 255, 255, 0.06);
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.team-card__body {
  padding: clamp(1.1rem, 1.7vw, 1.6rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.team-card__name {
  font-family: var(--heading-font);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.3rem);
  color: var(--white);
  margin: 0 0 0.25em;
}

.team-card__role {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--blue-light);
  margin: 0 0 1em;
}

.team-card__bio {
  font-size: clamp(0.85rem, 0.82rem + 0.14vw, 0.94rem);
  line-height: 1.55;
  margin: 0;
}

.team-card__email {
  margin-top: 1em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blue-light);
  text-decoration: none;
}

.team-card__email:hover { text-decoration: underline; }

/* The "150+ years" callout sits in the grid as a light-blue card. */
.team-card--callout {
  background: linear-gradient(155deg, rgba(133, 188, 242, 0.22), rgba(47, 126, 214, 0.16));
  border-color: rgba(133, 188, 242, 0.45);
  justify-content: center;
  text-align: center;
  padding: clamp(1.6rem, 2.4vw, 2.4rem);
}

.team-card--callout h3 {
  color: var(--blue-light);
  margin-bottom: 0.5em;
}

.team-card--callout p {
  margin: 0;
  font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1.05rem);
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   10.9 CTA + contact
   ------------------------------------------------------------------------- */
.cta__actions { margin-block: clamp(1.8rem, 2.6vw, 2.6rem) clamp(1.2rem, 1.8vw, 1.6rem); }

.cta__fineprint {
  font-size: clamp(0.86rem, 0.83rem + 0.15vw, 0.97rem);
  opacity: 0.85;
  margin: 0;
}

.section--cta .btn {
  background: var(--white);
  color: var(--navy-800);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.12rem);
}

.contact-grid {
  display: grid;
  /* Cal needs more than 768px to keep dates beside a scrolling slot list. */
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(2rem, 3vw, 3.5rem);
  align-items: start;
}

/* Stack before the calendar would fall back to its tall mobile layout. */
@media (max-width: 1279px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

.section--shine .contact-details .label { color: var(--navy-800); opacity: 0.6; }
.section--shine .contact-details p,
.section--shine .contact-details a { color: var(--navy-800); }

.section--shine .form-field input[type="text"],
.section--shine .form-field input[type="email"],
.section--shine .form-field textarea {
  border-color: rgba(14, 36, 66, 0.35);
  color: var(--navy-800);
  background: rgba(255, 255, 255, 0.92);
}

/* --------------------------------------------------------------------------
   11. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .section--shine::after { display: none; }
}