/* =========================================================================
   Pro-Insurance Brokerage Firm Inc. — Design System
   Clean corporate minimalism: white-dominant layouts, generous whitespace,
   navy + single blue accent, soft cards, centered section headings.
   ========================================================================= */

:root {
  /* ---- Palette -------------------------------------------------------- */
  --navy: #061A33;
  --brand-blue: #068FC3;
  --brand-blue-deep: #04486B;
  --navy-rich: #0E2A4F;
  --accent-blue: #068FC3;
  --accent-blue-dark: #0578A6;
  /* Same hue, darkened for accent-coloured *text* on light backgrounds:
     #068FC3 on white is only 3.7:1, which fails WCAG AA for body-size text. */
  --accent-blue-ink: #04688F;
  --accent-blue-soft: rgba(6, 143, 195, 0.10);
  --accent-blue-on-navy: #6FCBEC;
  --off-white: #F7F9FC;
  --soft-grey: #F2F5F9;
  --charcoal: #26313F;
  --muted: #5B6B7F;
  --white: #FFFFFF;
  --line: #E8EDF4;
  --line-on-navy: rgba(255, 255, 255, 0.14);

  /* Back-compat aliases (older component blocks reference these names) */
  --champagne: var(--accent-blue);
  --champagne-dark: var(--accent-blue-dark);
  --deep-blue: var(--navy-rich);
  --pro-blue: var(--accent-blue);
  --ivory: var(--off-white);
  --bg-soft: var(--soft-grey);
  --gold: var(--accent-blue);
  --gold-dark: var(--accent-blue-dark);
  --text: var(--charcoal);
  --text-muted: var(--muted);

  --success: #1B7A4A;
  --error: #C0362C;

  /* ---- Type ------------------------------------------------------------ */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif-accent: var(--font-display);
  --font-serif: var(--font-display);

  --fs-hero: clamp(2.4rem, 1.7rem + 2.6vw, 3.75rem);
  --fs-h1: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.5rem + 1.2vw, 2.375rem);
  --fs-h3: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-h4: 1.2rem;
  --fs-lead: clamp(1.08rem, 1.03rem + 0.25vw, 1.22rem);
  --fs-body: clamp(1rem, 0.98rem + 0.15vw, 1.09rem);
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.78rem;
  --fs-nav: 0.9375rem;

  /* ---- Spacing ----------------------------------------------------------*/
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5.5rem;
  --space-11: 7rem;
  --space-12: 9rem;

  /* ---- Layout ------------------------------------------------------------*/
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-h: 80px;

  /* ---- Shape --------------------------------------------------------------*/
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-btn: 12px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.07);
  --shadow-lg: 0 24px 48px rgba(16, 24, 40, 0.13);
  --ring: 0 0 0 1px rgba(6, 26, 51, 0.06);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 400ms;
}

/* =========================================================================
   Reset
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Anchored sections land below the sticky header instead of underneath it */
[id] { scroll-margin-top: calc(var(--header-h) + 20px); }

::selection { background: rgba(6, 143, 195, 0.16); }

@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;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.025em;
}

h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4 { font-size: var(--fs-h4); font-weight: 700; }

/* Accent word inside a headline — clean blue emphasis, no serif */
.accent {
  font-family: inherit;
  font-weight: inherit;
  font-style: normal;
  color: var(--accent-blue-ink);
}

p { margin: 0 0 var(--space-4); color: var(--charcoal); }

a { color: var(--accent-blue-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { padding-left: 1.25em; }
li { margin-bottom: var(--space-2); }

button { font-family: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: var(--space-3) var(--space-5);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* =========================================================================
   Layout helpers
   ========================================================================= */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
}

.section { padding-block: clamp(4rem, 3rem + 4vw, 6.5rem); }
.section--vast { padding-block: clamp(5rem, 3.5rem + 6vw, 9rem); }
.section--tight { padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem); }
.section--soft { background: var(--off-white); }
.section--ivory { background: var(--off-white); }
.section--navy { background: var(--navy); color: var(--off-white); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); }
.section--navy p { color: rgba(255, 255, 255, 0.78); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--wide { max-width: 56rem; }
.section-head p.lead { margin-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-blue-ink);
  margin-bottom: var(--space-3);
}
.section--navy .eyebrow { color: var(--accent-blue-on-navy); }

.lead { font-size: var(--fs-lead); color: var(--muted); line-height: 1.65; }
.section--navy .lead { color: rgba(255, 255, 255, 0.78); }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

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

.divider { height: 1px; background: var(--line); border: 0; margin: var(--space-8) 0; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  padding: 0 26px;
  height: 50px;
  border-radius: var(--radius-btn);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; transition: transform var(--dur) var(--ease); }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--accent { background: var(--accent-blue); color: var(--white); border-color: var(--accent-blue-ink); box-shadow: var(--shadow-sm); }
.btn--accent:hover { background: var(--accent-blue-dark); border-color: var(--accent-blue-dark); }
.btn--accent:hover svg { transform: translateX(3px); }

/* legacy class — now identical to the blue accent button */
.btn--gold { background: var(--accent-blue); color: var(--white); border-color: var(--accent-blue-ink); box-shadow: var(--shadow-sm); }
.btn--gold:hover { background: var(--accent-blue-dark); border-color: var(--accent-blue-dark); }
.btn--gold:hover svg { transform: translateX(3px); }

.btn--navy { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn--navy:hover { background: var(--navy-rich); border-color: var(--navy-rich); }
.btn--navy:hover svg { transform: translateX(3px); }

.btn--outline { background: transparent; color: var(--navy); border-color: #C9D4E3; }
.btn--outline:hover { border-color: var(--navy); background: var(--navy); color: var(--white); }

.section--navy .btn--outline,
.cta-band .btn--outline,
.cta-v2 .btn--outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.45);
}
.section--navy .btn--outline:hover,
.cta-band .btn--outline:hover,
.cta-v2 .btn--outline:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}

.btn--ghost { background: transparent; color: var(--accent-blue-ink); padding-inline: 0.25rem; height: auto; min-height: auto; }
.btn--ghost:hover { color: var(--navy); }

.btn--sm { height: 44px; padding: 0 20px; font-size: 0.875rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* Text link with animated arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--accent-blue-ink);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); color: currentColor; }
.link-arrow:hover { text-decoration: none; color: var(--accent-blue-dark); }
.link-arrow:hover svg { transform: translateX(4px); }
.section--navy .link-arrow, .cta-v2 .link-arrow { color: var(--accent-blue-on-navy); }

/* =========================================================================
   Brand bar — navy masthead above the header, carrying the full wordmark
   ========================================================================= */

/* The placeholder that components.js renders into must not box the sticky
   header in, or the header unpins the moment the brand bar scrolls past it. */
#site-header { display: contents; }

.brand-bar { background: var(--navy); }
.brand-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 88px;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
/* A set wordmark rather than the logo image: the logo image lives in the nav
   bar below, so repeating the mark here would double it.

   The wordmark spans the full width of the bar up to the social icons. `cqw`
   is what makes that exact rather than approximate: `flex-basis: 0` gives this
   link precisely the space the icons leave, `container-type` makes that width
   the query container, and a line of text scales linearly with its font-size —
   so one coefficient holds the fit at every viewport width instead of only at
   the one it was eyeballed at. Sizing off the *leftover* space rather than the
   whole bar is what keeps it from overrunning the icons as the bar narrows,
   since the icon block's width is fixed. */
.brand-bar__brand {
  container-type: inline-size;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  transition: opacity var(--dur) var(--ease);
}
.brand-bar__brand:hover { opacity: 0.86; text-decoration: none; }

/* Both halves of the wordmark are white — the sub-line differs by weight,
   tracking and the rule between them, not by colour. */
.brand-bar__word,
.brand-bar__sub {
  font-family: var(--font-display);
  color: var(--white);
  text-transform: uppercase;
  line-height: 1;
}
.brand-bar__word {
  font-size: 6cqw;
  font-weight: 800;
  letter-spacing: 0.005em;
}
.brand-bar__sub {
  font-size: 4.12cqw;
  font-weight: 600;
  letter-spacing: 0.155em;
  padding-left: 0.5em;
  border-left: 1px solid rgba(255, 255, 255, 0.32);
}
/* Same ring the footer icons carry, so the two rows of social links read as
   one treatment rather than two. The gap grows with it: at 2px the rings
   nearly touch, which reads as one lumpy shape instead of four buttons. */
.brand-bar__social { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.brand-bar__social .social-icon { border: 1px solid var(--line-on-navy); }
.brand-bar__social .social-icon:hover,
.brand-bar__social .social-icon:focus-visible {
  background: var(--accent-blue);
  border-color: var(--accent-blue-ink);
}

@media (max-width: 1024px) { .brand-bar { display: none; } }

/* =========================================================================
   Header — clean white sticky bar on every page
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-solid { box-shadow: var(--shadow-sm); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 38px; width: auto; }

/* The header mark is permanent: it is present on every page at every scroll
   position and is never faded in or out. */

.main-nav { display: flex; align-items: center; gap: var(--space-6); min-width: 0; }
.main-nav__list { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.main-nav__list li { margin: 0; }
.main-nav__list a {
  display: inline-block;
  white-space: nowrap;
  color: var(--charcoal);
  font-weight: 600;
  font-size: var(--fs-nav);
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.main-nav__list a:hover,
.main-nav__list a[aria-current="page"] {
  color: var(--accent-blue-ink);
  border-bottom-color: var(--accent-blue-ink);
  text-decoration: none;
}

.header-actions { display: flex; align-items: center; gap: var(--space-4); flex: none; }

.header-social { display: flex; align-items: center; gap: 2px; }
.header-social .social-icon { width: 30px; height: 30px; color: var(--muted); }
.header-social .social-icon svg { width: 15px; height: 15px; }
.header-social .social-icon:hover { background: var(--accent-blue-soft); color: var(--accent-blue-ink); }

.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}
.nav-toggle svg { width: 22px; height: 22px; color: var(--navy); }

@media (max-width: 1360px) {
  .header-social { display: none; }
}
@media (max-width: 1024px) {
  .main-nav__list { display: none; }
  .header-actions .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Mobile nav panel */
.mobile-nav { position: fixed; inset: 0; z-index: 200; display: none; }
.mobile-nav.is-open { display: block; }
.mobile-nav__backdrop { position: absolute; inset: 0; background: rgba(6, 26, 51, 0.55); }
.mobile-nav__panel {
  position: absolute; top: 0; right: 0; width: min(380px, 88vw); height: 100%;
  background: var(--navy); color: var(--off-white); padding: var(--space-6);
  overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-7);
  box-shadow: var(--shadow-lg);
}
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav__close {
  background: none; border: 1px solid var(--line-on-navy); border-radius: var(--radius-sm);
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--white); cursor: pointer;
}
.mobile-nav__close svg { width: 20px; height: 20px; }
.mobile-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mobile-nav__list a {
  display: block; padding: var(--space-4) 0; border-bottom: 1px solid var(--line-on-navy);
  color: var(--white); font-size: 1.2rem; font-weight: 600;
}
.mobile-nav__list a:hover { color: var(--accent-blue-on-navy); text-decoration: none; }
.mobile-nav__utility { display: flex; flex-direction: column; gap: var(--space-3); font-size: 0.95rem; color: rgba(255,255,255,0.8); }
.mobile-nav__utility a { color: rgba(255,255,255,0.92); }
.mobile-nav__social { display: flex; gap: var(--space-3); }

.social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.social-icon svg { width: 17px; height: 17px; }
.social-icon:hover, .social-icon:focus-visible { background: rgba(255, 255, 255, 0.14); color: var(--white); }
.social-icon.is-disabled { opacity: 0.4; cursor: default; pointer-events: none; }

/* The contact page renders the same social row twice, on opposite grounds: in
   the navy details panel and on the white "Follow Us" card. Both were being
   given a hardcoded navy glyph, which left the panel's icons invisible against
   the navy behind them — only the pale ring showed. Each context now sets its
   own glyph and ring instead. */
.contact-info-panel .footer-social .social-icon {
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.32);
}
.contact-info-panel .footer-social .social-icon:hover,
.contact-info-panel .footer-social .social-icon:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--white);
}

.card .footer-social .social-icon {
  color: var(--navy);
  border: 1px solid var(--line);
}
.card .footer-social .social-icon:hover,
.card .footer-social .social-icon:focus-visible {
  background: var(--accent-blue-soft);
  border-color: var(--accent-blue);
  color: var(--accent-blue-ink);
}

/* =========================================================================
   Masthead (internal pages)
   ========================================================================= */

.masthead {
  background:
    radial-gradient(42% 85% at 88% 10%, rgba(6, 143, 195, 0.13) 0%, rgba(6, 143, 195, 0) 60%),
    radial-gradient(30% 60% at 5% 100%, rgba(6, 143, 195, 0.06) 0%, rgba(6, 143, 195, 0) 55%),
    linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--line);
  color: var(--charcoal);
  padding-block: clamp(3.5rem, 3rem + 2.5vw, 5.5rem) clamp(3rem, 2.5rem + 2vw, 5rem);
  position: relative;
  overflow: hidden;
}
.masthead__inner { position: relative; z-index: 1; }
.masthead__eyebrow { color: var(--accent-blue-ink); }
.masthead h1 { color: var(--navy); margin-bottom: var(--space-4); max-width: 44rem; }
.masthead p { color: var(--muted); max-width: 42rem; font-size: var(--fs-lead); margin-bottom: 0; }
.masthead p.eyebrow { font-size: var(--fs-eyebrow); color: var(--accent-blue-ink); margin-bottom: var(--space-3); }
.masthead p.breadcrumb { font-size: 0.8125rem; margin-bottom: var(--space-5); }
.breadcrumb { font-size: 0.8125rem; color: var(--muted); margin-bottom: var(--space-5); }
.breadcrumb a { color: var(--accent-blue-ink); }

/* Split masthead with photo (about, services, clientele, careers) */
.masthead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 4vw, 4.5rem);
  align-items: center;
}
.masthead__media { position: relative; z-index: 1; }
.masthead__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 900px) {
  .masthead__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* =========================================================================
   Hero v2 — clean light split composition
   ========================================================================= */

.hero-v2 {
  position: relative;
  background: var(--white);
  color: var(--charcoal);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 75% at 88% 0%, rgba(6, 143, 195, 0.10) 0%, rgba(6, 143, 195, 0) 60%);
  pointer-events: none;
}
.hero-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(6, 26, 51, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(45% 60% at 78% 35%, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 75%);
  pointer-events: none;
}

.hero-v2__grid {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
  padding: clamp(3.5rem, 3rem + 2.5vw, 5.5rem) var(--container-pad);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2.5rem, 4vw, 4.5rem);
  align-items: center;
}
.hero-v2__content { max-width: 36rem; }
.hero-v2__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  color: var(--navy);
  padding: 8px 15px 8px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  margin-bottom: var(--space-6);
}
.hero-v2__badge svg { width: 15px; height: 15px; flex: none; color: var(--accent-blue-ink); }
.hero-v2 h1 { color: var(--navy); font-size: var(--fs-hero); font-weight: 800; margin-bottom: var(--space-5); }
.hero-v2 h1 .accent { color: var(--accent-blue-ink); }
.hero-v2__lead { color: var(--muted); font-size: var(--fs-lead); margin-bottom: var(--space-7); max-width: 30rem; }

.hero-v2__adviser {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
  transition: color var(--dur) var(--ease);
}
.hero-v2__adviser:hover { color: var(--accent-blue-ink); text-decoration: none; }
.hero-v2__adviser-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-blue-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-blue-ink);
}
.hero-v2__adviser-icon svg { width: 18px; height: 18px; }
.hero-v2__adviser strong { display: block; color: var(--navy); font-weight: 600; font-size: 0.96rem; }

/* Photo in a quiet ring-framed rounded card */
.hero-v2__media { position: relative; }
.hero-v2__media > img {
  position: relative;
  inset: auto;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 68% 32%;
  border-radius: 20px;
  box-shadow: var(--ring), var(--shadow-lg);
  clip-path: none;
}
.hero-v2__media::before,
.hero-v2__media::after { content: none; }

.hero-v2__panel {
  position: absolute;
  left: calc(-1 * var(--space-6));
  bottom: var(--space-6);
  z-index: 3;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  max-width: 320px;
  box-shadow: var(--shadow-lg);
}
.hero-v2__panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-blue-ink);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.hero-v2__panel-head svg { width: 15px; height: 15px; flex: none; }
.hero-v2__panel-row { display: flex; align-items: flex-start; gap: var(--space-3); }
.hero-v2__panel-row + .hero-v2__panel-row { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.hero-v2__panel-row svg { width: 18px; height: 18px; color: var(--accent-blue-ink); flex: none; margin-top: 2px; }
.hero-v2__panel-row span { font-size: 0.9rem; color: var(--charcoal); font-weight: 500; }

.hero-v2__scroll-cue { display: none; }

@media (max-width: 1100px) {
  .hero-v2__grid { grid-template-columns: 1fr; }
  .hero-v2__content { max-width: none; }
  .hero-v2__media { order: 2; }
  .hero-v2__media > img { aspect-ratio: 16 / 10; }
  /* Stacked, the panel would cover most of the image. That was tolerable when
     the image was static decoration; now that it rotates through the product
     photos it has to stay visible, so the panel drops below it. */
  .hero-v2__panel { position: static; margin-top: var(--space-4); max-width: none; }
}

/* Feature cards — quiet 4-up value row under the hero */
.feature-strip { padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem); }
.feature-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.feature-card-v2 {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.feature-card-v2:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #D6E0EE; }
.feature-card-v2__icon {
  width: 42px; height: 42px; border-radius: var(--radius-md);
  background: var(--accent-blue-soft);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-blue-ink);
  margin-bottom: var(--space-3);
}
.feature-card-v2__icon svg { width: 20px; height: 20px; }
.feature-card-v2 h4 { font-size: 1rem; margin: 0; }
.feature-card-v2 p { font-size: 0.88rem; color: var(--muted); margin: 0; line-height: 1.6; }

@media (max-width: 980px) { .feature-strip__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-strip__grid { grid-template-columns: 1fr; } }

/* =========================================================================
   Ghost-number stats strip
   ========================================================================= */

.stats-v2 { padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem); border-bottom: 1px solid var(--line); }
.stats-v2__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.stat-ghost { text-align: center; padding-block: var(--space-3); }
.stat-ghost + .stat-ghost { border-left: 1px solid var(--line); }
.stat-ghost__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2.1rem + 1.8vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.stat-ghost__label {
  margin-top: var(--space-3);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--muted);
}
@media (max-width: 800px) {
  .stats-v2__grid { grid-template-columns: repeat(2, 1fr); }
  .stat-ghost:nth-child(3) { border-left: none; }
}

/* =========================================================================
   Editorial split section (reusable: image + text, alternating)
   ========================================================================= */

.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 4vw, 5rem);
  align-items: center;
}
.editorial--reverse .editorial__media { order: 2; }
.editorial--reverse .editorial__content { order: 1; }

.editorial__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-md); }
.editorial__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.editorial__media:hover img { transform: scale(1.035); }

.editorial__content { max-width: 34rem; }
.editorial__quote {
  margin-top: var(--space-6);
  padding-left: var(--space-5);
  border-left: 3px solid var(--accent-blue);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .editorial { grid-template-columns: 1fr; }
  .editorial--reverse .editorial__media, .editorial--reverse .editorial__content { order: initial; }
  .editorial__media { aspect-ratio: 16/11; }
}

/* =========================================================================
   Services v2 — featured block + supporting rows
   ========================================================================= */

.services-v2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-6); align-items: stretch; }

.service-feature {
  position: relative;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 3vw, 3.25rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 440px;
}
.service-feature::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 85% 0%, rgba(6, 143, 195, 0.35) 0%, rgba(6, 143, 195, 0) 60%);
}
.service-feature::after { content: none; }
.service-feature__number {
  position: relative; z-index: 1;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--accent-blue-on-navy);
  margin-bottom: var(--space-4);
}
.service-feature__number::after { content: ""; display: block; width: 26px; height: 2px; background: var(--accent-blue-on-navy); margin-top: 10px; border-radius: 2px; }
.service-feature__body { position: relative; z-index: 1; }
.service-feature h3 { color: var(--white); font-size: clamp(1.6rem, 1.4rem + 0.9vw, 2.1rem); margin-bottom: var(--space-3); }
.service-feature p { color: rgba(255,255,255,0.8); font-size: 1.02rem; max-width: 30rem; margin-bottom: var(--space-6); }

.service-rows { display: flex; flex-direction: column; gap: var(--space-4); }
.service-row {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex; align-items: center; gap: var(--space-5);
  padding: clamp(1.25rem, 1.5vw, 1.6rem) clamp(1.25rem, 2vw, 1.75rem);
  flex: 1;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.service-row:hover { box-shadow: var(--shadow-md); border-color: rgba(6, 143, 195, 0.35); transform: translateY(-2px); }
.service-row__icon {
  flex: none; width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--accent-blue-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--accent-blue-ink);
}
.service-row__icon svg { width: 22px; height: 22px; }
.service-row__body { flex: 1; }
.service-row h4 { font-size: 1.02rem; margin-bottom: 2px; }
.service-row p { font-size: 0.9rem; color: var(--muted); margin-bottom: 0; }
.service-row__arrow { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.service-row:hover .service-row__arrow { transform: translateX(4px); color: var(--accent-blue-ink); }

@media (max-width: 980px) {
  .services-v2 { grid-template-columns: 1fr; }
  .service-feature { min-height: 320px; }
}
@media (max-width: 560px) {
  .service-row { flex-wrap: wrap; }
}

/* =========================================================================
   Solutions — alternating large insurance-product panels
   ========================================================================= */

.solution-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.solution-panel + .solution-panel { margin-top: var(--space-6); }
.solution-panel--reverse .solution-panel__media { order: 2; }
.solution-panel--reverse .solution-panel__body { order: 1; }

.solution-panel__media { position: relative; min-height: 340px; overflow: hidden; }
.solution-panel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.solution-panel:hover .solution-panel__media img { transform: scale(1.04); }

.solution-panel__body { padding: clamp(2rem, 3vw, 3.25rem); display: flex; flex-direction: column; justify-content: center; }
.solution-panel__audience {
  display: inline-flex; align-self: flex-start;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-blue-ink); background: var(--accent-blue-soft); padding: 6px 12px; border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}
.solution-panel h3 { font-size: clamp(1.45rem, 1.3rem + 0.8vw, 1.9rem); margin-bottom: var(--space-3); }
.solution-panel p { color: var(--muted); margin-bottom: var(--space-5); }

@media (max-width: 860px) {
  .solution-panel, .solution-panel--reverse { grid-template-columns: 1fr; }
  .solution-panel--reverse .solution-panel__media, .solution-panel--reverse .solution-panel__body { order: initial; }
  .solution-panel__media { min-height: 240px; }
}

/* =========================================================================
   Why choose — clean light numbered grid
   ========================================================================= */

.why-v2 { background: var(--off-white); }
.why-v2__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: clamp(2rem, 2.5vw, 3.5rem); }
.why-v2__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.why-v2__item:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.why-v2__number {
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--accent-blue-ink);
  margin-bottom: var(--space-4);
}
.why-v2__number::after { content: ""; display: block; width: 26px; height: 2px; background: var(--accent-blue); margin-top: 10px; border-radius: 2px; }
.why-v2__item h4 { color: var(--navy); font-size: 1.1rem; margin-bottom: var(--space-2); }
.why-v2__item p { color: var(--muted); font-size: 0.94rem; margin-bottom: 0; }

@media (max-width: 900px) { .why-v2__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .why-v2__grid { grid-template-columns: 1fr; } }

/* =========================================================================
   Industries v2 — numbered grid
   ========================================================================= */

.industries-v2 { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.industry-row-v2 {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: clamp(1.5rem, 2vw, 2rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
.industry-row-v2:hover { background: var(--off-white); }
.industry-row-v2:nth-child(3n) { border-right: none; }
.industry-row-v2__number { font-weight: 800; font-size: 1.1rem; color: var(--accent-blue-ink); flex: none; width: 2.2rem; }
.industry-row-v2__icon { flex: none; width: 22px; height: 22px; color: var(--navy); margin-top: 3px; }
.industry-row-v2 h4 { font-size: 1.02rem; margin-bottom: 2px; }
.industry-row-v2 p { font-size: 0.85rem; color: var(--muted); margin-bottom: 0; }

@media (max-width: 900px) {
  .industries-v2 { grid-template-columns: repeat(2, 1fr); }
  .industry-row-v2:nth-child(3n) { border-right: 1px solid var(--line); }
  .industry-row-v2:nth-child(2n) { border-right: none; }
}
@media (max-width: 560px) {
  .industries-v2 { grid-template-columns: 1fr; }
  .industry-row-v2:nth-child(2n) { border-right: 1px solid var(--line); }
  .industry-row-v2:last-child, .industry-row-v2:nth-last-child(1) { border-bottom: none; }
}

/* =========================================================================
   Compact intro (short homepage text block)
   ========================================================================= */

.intro-mini { max-width: 46rem; margin-inline: auto; text-align: center; }
.intro-mini p { font-size: var(--fs-lead); color: var(--muted); }

/* Intro editorial variant: landscape photo + floating credential badge */
.editorial--intro .editorial__media { aspect-ratio: 4 / 3; }
.intro-badge {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-5);
  z-index: 2;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.intro-badge svg { width: 26px; height: 26px; color: var(--accent-blue-ink); flex: none; }
.intro-badge strong { display: block; color: var(--navy); font-size: 0.95rem; line-height: 1.3; }
.intro-badge span { display: block; color: var(--muted); font-size: 0.82rem; }

/* Checkmark list */
.check-list {
  list-style: none;
  margin: var(--space-5) 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.check-list li { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; font-weight: 600; color: var(--navy); }
.check-list li svg {
  width: 15px; height: 15px; flex: none;
  color: var(--accent-blue-ink);
  background: var(--accent-blue-soft);
  border-radius: 50%;
  padding: 4px;
  box-sizing: content-box;
  margin-top: 1px;
}

/* =========================================================================
   Industries mini (short list of names, no cards/numbers)
   ========================================================================= */

.industries-mini {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
}
.industries-mini span.sep { color: var(--accent-blue-ink); margin-inline: var(--space-5); font-weight: 400; }
@media (max-width: 640px) {
  .industries-mini { font-size: 1rem; }
  .industries-mini span.sep { margin-inline: var(--space-3); }
}

/* =========================================================================
   Logo wall
   ========================================================================= */

.logo-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.logo-wall--compact { grid-template-columns: repeat(6, 1fr); }
.logo-wall__tile {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  padding: clamp(0.9rem, 1.4vw, 1.5rem);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.logo-wall__tile:hover { box-shadow: var(--shadow-sm); border-color: rgba(6, 143, 195, 0.3); }
.logo-wall__tile img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(100%); opacity: 0.7; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.logo-wall__tile:hover img { filter: grayscale(0%); opacity: 1; }

@media (max-width: 900px) { .logo-wall, .logo-wall--compact { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .logo-wall, .logo-wall--compact { grid-template-columns: repeat(2, 1fr); } }

/* legacy small logo grid (used on clients/industries page) */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-7); }
.filter-chip {
  border: 1.5px solid var(--line); background: var(--white); color: var(--charcoal);
  padding: 0.55rem 1.1rem; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: all var(--dur) var(--ease);
}
.filter-chip:hover { border-color: var(--accent-blue-ink); color: var(--accent-blue-ink); }
.filter-chip.is-active { background: var(--accent-blue); border-color: var(--accent-blue-ink); color: var(--white); }

.logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
@media (max-width: 980px) { .logo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } }

.logo-tile {
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white);
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: var(--space-4);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.logo-tile:hover { box-shadow: var(--shadow-sm); border-color: rgba(6, 143, 195, 0.35); }
.logo-tile img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(15%); }

.note-panel {
  border: 1px solid var(--line); background: var(--off-white); border-left: 3px solid var(--accent-blue);
  border-radius: var(--radius-sm); padding: var(--space-5) var(--space-6); font-size: 0.92rem; color: var(--muted);
}

.industry-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-6); list-style: none; margin: 0; padding: 0; }
@media (max-width: 780px) { .industry-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .industry-list { grid-template-columns: 1fr; } }
.industry-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); color: var(--charcoal); font-weight: 600; margin: 0; }
.industry-list svg { width: 20px; height: 20px; color: var(--accent-blue-ink); flex: none; }

/* =========================================================================
   Cards (legacy — services page, about page, home fallbacks)
   ========================================================================= */

.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-7); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.card:hover { box-shadow: var(--shadow-md); border-color: rgba(6, 143, 195, 0.3); }

.service-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); height: 100%; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.service-card__icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--accent-blue-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--accent-blue-ink); margin-bottom: var(--space-2); }
.service-card__icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: 1.2rem; margin-bottom: var(--space-1); }
.service-card p { color: var(--muted); margin-bottom: 0; font-size: 1rem; }

.feature-card { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); }
.feature-card__visual { background: linear-gradient(155deg, var(--navy-rich), var(--navy)); min-height: 240px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.feature-card__visual svg { width: 88px; height: 88px; color: rgba(255,255,255,0.9); position: relative; }
.feature-card__visual::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 80% 10%, rgba(6, 143, 195,0.3), rgba(6, 143, 195,0) 65%); }
.feature-card__body { padding: var(--space-7); display: flex; flex-direction: column; justify-content: center; }
.feature-card__eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-blue-ink); margin-bottom: var(--space-2); }
.feature-card h3 { margin-bottom: var(--space-3); }
.feature-card p { color: var(--muted); }
@media (max-width: 720px) { .feature-card { grid-template-columns: 1fr; } .feature-card__visual { min-height: 160px; } }

.reason-card { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reason-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.reason-card__icon { flex: none; width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--accent-blue-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--accent-blue-ink); }
.reason-card__icon svg { width: 20px; height: 20px; }
.reason-card h4 { margin-bottom: var(--space-1); font-size: 1.08rem; }
.reason-card p { color: var(--muted); font-size: 0.95rem; margin-bottom: 0; }

.value-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); background: var(--white); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.value-card:hover { box-shadow: var(--shadow-sm); border-color: rgba(6, 143, 195, 0.3); }
.value-card h4 { font-weight: 700; color: var(--navy); font-size: 1.05rem; margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.value-card h4::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-blue); flex: none; }
.value-card p { color: var(--muted); font-size: 0.94rem; margin-bottom: 0; }

.two-col { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.stat-figure { border-left: 3px solid var(--accent-blue); padding-left: var(--space-4); }
.badge-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.badge { font-size: 0.75rem; font-weight: 700; color: var(--accent-blue-ink); background: var(--accent-blue-soft); padding: 0.3rem 0.7rem; border-radius: var(--radius-full); }

/* =========================================================================
   Vacancy cards / empty state
   ========================================================================= */

.vacancy-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-7); background: var(--white); display: flex; flex-direction: column; gap: var(--space-3); }
.vacancy-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag { display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.32rem 0.7rem; border-radius: var(--radius-full); background: var(--accent-blue-soft); color: var(--accent-blue-ink); }
.vacancy-card p { color: var(--muted); margin-bottom: 0; }

.empty-state { border: 1px dashed #C9D4E3; border-radius: var(--radius-lg); padding: var(--space-9); text-align: center; color: var(--muted); background: var(--off-white); }
.empty-state svg { width: 42px; height: 42px; color: var(--accent-blue-ink); margin: 0 auto var(--space-4); }
.empty-state p { max-width: 32rem; margin-inline: auto; }

/* =========================================================================
   Forms
   ========================================================================= */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.form-grid--single { grid-template-columns: 1fr; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.875rem; font-weight: 700; color: var(--navy); }
.field .hint { font-size: 0.8rem; color: var(--muted); }
.field .required-mark { color: var(--error); margin-left: 2px; }

.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  font-family: var(--font-sans); font-size: 1rem; padding: 0.85rem 1rem; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); background: var(--white); color: var(--charcoal); width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); min-height: 50px;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-blue-ink); box-shadow: 0 0 0 4px rgba(6, 143, 195, 0.16); outline: none; }
.field input.has-error, .field select.has-error, .field textarea.has-error { border-color: var(--error); }
.field-error { font-size: 0.82rem; color: var(--error); display: none; }
.field-error.is-visible { display: block; }

.radio-row, .checkbox-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.radio-option, .consent-row { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.92rem; color: var(--charcoal); }
.radio-option input, .consent-row input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent-blue-ink); flex: none; }
.consent-row label { font-size: 0.87rem; color: var(--muted); line-height: 1.5; }
.consent-row a { color: var(--accent-blue-ink); }

.quick-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.quick-option {
  border: 1.5px solid var(--line); background: var(--white); padding: 0.6rem 1rem; border-radius: var(--radius-full);
  font-size: 0.85rem; font-weight: 700; color: var(--navy); cursor: pointer; transition: all var(--dur) var(--ease);
}
.quick-option:hover, .quick-option.is-selected { background: var(--accent-blue); color: var(--white); border-color: var(--accent-blue-ink); }

.honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.75rem, 2.5vw, 2.75rem); box-shadow: var(--shadow-sm); }

.form-status { display: none; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); font-size: 0.92rem; margin-top: var(--space-5); }
.form-status.is-visible { display: flex; }
.form-status svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.form-status--success { background: #E9F6EF; color: var(--success); border: 1px solid #BFE3CC; }
.form-status--error { background: #FBEAE9; color: var(--error); border: 1px solid #F1C3C0; }
.form-status--loading { background: var(--off-white); color: var(--muted); border: 1px solid var(--line); }

/* =========================================================================
   Contact page specifics
   ========================================================================= */

.contact-info-panel { border-radius: var(--radius-lg); background: var(--navy); color: var(--white); padding: clamp(1.75rem, 2.5vw, 2.75rem); }
.contact-info-panel h3 { color: var(--white); font-size: 1.2rem; }
.contact-info-item { display: flex; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--line-on-navy); }
.contact-info-item:last-child { border-bottom: none; }
.contact-info-item svg { width: 20px; height: 20px; color: var(--accent-blue-on-navy); flex: none; margin-top: 2px; }
.contact-info-item strong { display: block; font-size: 0.85rem; color: rgba(255,255,255,0.6); font-weight: 600; margin-bottom: 2px; }
.contact-info-item span, .contact-info-item a { color: var(--white); font-size: 0.98rem; }
.contact-info-item a:hover { color: var(--accent-blue-on-navy); }

.map-frame { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; min-height: 280px; background: var(--off-white); }
.map-frame iframe { width: 100%; height: 100%; min-height: 280px; border: 0; display: block; }

.tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--line); margin-bottom: var(--space-6); }
.tab-btn { background: none; border: none; border-bottom: 2px solid transparent; padding: var(--space-3) var(--space-2); font-weight: 700; font-size: 0.98rem; color: var(--muted); cursor: pointer; }
.tab-btn.is-active { color: var(--accent-blue-ink); border-bottom-color: var(--accent-blue-ink); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* =========================================================================
   CTA — final concluding moment
   ========================================================================= */

.cta-v2 {
  position: relative;
  color: var(--white);
  text-align: center;
  padding-block: clamp(5rem, 4rem + 5vw, 8rem);
  overflow: hidden;
}
.cta-v2__media { position: absolute; inset: 0; }
.cta-v2__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-v2__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(6,26,51,0.96) 0%, rgba(6,26,51,0.9) 45%, rgba(5, 120, 166, 0.82) 100%); }
.cta-v2__inner { position: relative; max-width: 46rem; margin-inline: auto; }
.cta-v2 h2 { color: var(--white); font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem); }
.cta-v2 p { color: rgba(255,255,255,0.85); font-size: var(--fs-lead); }
.cta-v2 .btn-row { justify-content: center; margin-top: var(--space-7); }

/* legacy plain navy CTA band (still used on inner pages) */
.cta-band { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-rich) 100%); color: var(--white); text-align: center; padding-block: clamp(4rem, 3rem + 3vw, 6rem); position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(45% 90% at 15% 0%, rgba(6, 143, 195,0.30), rgba(6, 143, 195,0) 60%),
    radial-gradient(45% 90% at 85% 100%, rgba(6, 143, 195,0.22), rgba(6, 143, 195,0) 60%);
}
.cta-band::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(70% 100% at 50% 50%, rgba(0,0,0,0.9), rgba(0,0,0,0) 80%);
}
.cta-band__inner { position: relative; z-index: 1; max-width: 46rem; margin-inline: auto; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,0.82); font-size: var(--fs-lead); }
.cta-band .btn-row { justify-content: center; margin-top: var(--space-6); }

/* =========================================================================
   Footer — large four-column, navy
   ========================================================================= */

.site-footer { background: var(--navy); color: rgba(255,255,255,0.72); position: relative; }
.site-footer::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-blue) 0%, #7EAAF5 45%, var(--navy-rich) 100%);
}
.site-footer a { color: rgba(255,255,255,0.72); }
.site-footer a:hover { color: var(--white); }

.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: var(--space-8); padding-block: clamp(4rem, 3.5rem + 2.5vw, 5.5rem) clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand img { height: 36px; width: auto; margin-bottom: var(--space-5); }
.footer-brand p { font-size: 0.95rem; max-width: 26rem; line-height: 1.7; color: rgba(255,255,255,0.72); }

.footer-col h5 { color: var(--white); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-5); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col li { margin: 0; font-size: 0.95rem; }

.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.footer-social .social-icon { width: 42px; height: 42px; border: 1px solid var(--line-on-navy); }
.footer-social .social-icon:hover { background: var(--accent-blue); border-color: var(--accent-blue-ink); }

.footer-bottom { border-top: 1px solid var(--line-on-navy); padding-block: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 0.85rem; }
.footer-bottom__links { display: flex; gap: var(--space-5); flex-wrap: wrap; }

/* =========================================================================
   Chatbox widget
   ========================================================================= */

.chatbox { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 300; font-family: var(--font-sans); }

.chatbox__launcher {
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: var(--navy); color: var(--white); border: none; border-radius: var(--radius-full);
  padding: 0.85rem 1.3rem 0.85rem 0.85rem; box-shadow: var(--shadow-lg); cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chatbox__launcher:hover { background: var(--navy-rich); transform: translateY(-2px); }
.chatbox__launcher-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-blue); display: inline-flex; align-items: center; justify-content: center; color: var(--white); flex: none; }
.chatbox__launcher-icon svg { width: 18px; height: 18px; }
.chatbox__launcher-label { font-size: 0.9rem; font-weight: 700; }

.chatbox__panel {
  position: absolute; right: 0; bottom: calc(100% + 14px); width: min(380px, calc(100vw - 32px));
  max-height: min(600px, calc(100vh - 120px)); background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line); display: none; flex-direction: column; overflow: hidden;
}
.chatbox.is-open .chatbox__panel { display: flex; }
.chatbox.is-open .chatbox__launcher-label { display: none; }

.chatbox__header { background: var(--navy); color: var(--white); padding: var(--space-5); display: flex; align-items: center; justify-content: space-between; flex: none; }
.chatbox__header-title { display: flex; align-items: center; gap: var(--space-3); }
.chatbox__header-mark { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-blue); color: var(--white); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.chatbox__header-mark svg { width: 17px; height: 17px; }
.chatbox__header h3 { color: var(--white); font-size: 1rem; margin: 0; }
.chatbox__header p { color: rgba(255,255,255,0.7); font-size: 0.75rem; margin: 0; }
.chatbox__header-actions { display: flex; gap: var(--space-2); }
.chatbox__icon-btn { background: rgba(255,255,255,0.1); border: none; width: 30px; height: 30px; border-radius: 50%; color: var(--white); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.chatbox__icon-btn svg { width: 15px; height: 15px; }
.chatbox__icon-btn:hover { background: rgba(255,255,255,0.2); }

.chatbox__body { padding: var(--space-5); overflow-y: auto; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-4); }
.chatbox__bubble { background: var(--off-white); border-radius: var(--radius-md); border-top-left-radius: 2px; padding: var(--space-4); font-size: 0.92rem; color: var(--charcoal); }
.chatbox__warning { display: flex; gap: var(--space-2); align-items: flex-start; background: var(--accent-blue-soft); border: 1px solid rgba(6, 143, 195,0.25); border-radius: var(--radius-sm); padding: var(--space-3); font-size: 0.78rem; color: var(--navy-rich); }
.chatbox__warning svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--accent-blue-ink); }

.chatbox__step { display: none; flex-direction: column; gap: var(--space-4); }
.chatbox__step.is-active { display: flex; }

.chatbox__field label { font-size: 0.82rem; font-weight: 700; color: var(--navy); display: block; margin-bottom: 0.35rem; }
.chatbox__field input, .chatbox__field select, .chatbox__field textarea {
  width: 100%; font-family: var(--font-sans); font-size: 0.94rem; padding: 0.7rem 0.8rem; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); min-height: 44px;
}
.chatbox__field textarea { min-height: 80px; resize: vertical; }
.chatbox__field input:focus, .chatbox__field select:focus, .chatbox__field textarea:focus { border-color: var(--accent-blue-ink); outline: none; box-shadow: 0 0 0 4px rgba(6, 143, 195, 0.16); }

.chatbox__footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); flex: none; display: flex; flex-direction: column; gap: var(--space-3); }
/* Footer quick-contacts: a 2-column grid so the four links stay on two tidy
   rows at the panel's fixed width, each with a small icon locked beside its
   label (the inline SVGs carry no intrinsic size, so they must be sized here). */
.chatbox__fallback { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); font-size: 0.8rem; }
.chatbox__fallback-link {
  display: flex; align-items: center; gap: 0.5rem; min-width: 0;
  padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--accent-blue-ink); font-weight: 700; line-height: 1.2;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chatbox__fallback-link:hover { border-color: var(--accent-blue-ink); background: var(--accent-blue-soft); }
.chatbox__fallback-link > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatbox__fallback-icon { display: inline-flex; flex: none; color: var(--accent-blue-ink); }
.chatbox__fallback-icon svg { width: 16px; height: 16px; }

.chatbox__status-icon { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-inline: auto; }
.chatbox__status-icon.success { background: #E9F6EF; color: var(--success); }
.chatbox__status-icon.error { background: #FBEAE9; color: var(--error); }
.chatbox__status-icon svg { width: 22px; height: 22px; }

@media (max-width: 480px) {
  .chatbox__panel { position: fixed; left: 12px; right: 12px; bottom: 92px; width: auto; max-height: calc(100vh - 120px); }
}

/* =========================================================================
   Reveal-on-scroll
   ========================================================================= */

[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* =========================================================================
   Banner slider — homepage carousel of pre-designed product banners

   Every banner ships with its headline typeset into the artwork and all are
   pre-normalized to 1920x768, so slides are never cropped, letterboxed or
   overlaid with text — the frame simply matches the art.
   ========================================================================= */

.banner-slider { position: relative; }

.banner-slider__viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), var(--ring);
  background: var(--navy);
}
.hero-slider .banner-slider__viewport { box-shadow: var(--shadow-lg), var(--ring); }

.banner-slider__track {
  display: flex;
  transition: transform 620ms var(--ease);
  will-change: transform;
}

.banner-slider__slide { flex: 0 0 100%; min-width: 0; }

.banner-slider__slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 768;
  object-fit: cover;
}

/* ---- Arrows ---- */
.banner-slider__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.banner-slider__nav:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.banner-slider__nav svg { width: 19px; height: 19px; }
.banner-slider__nav--prev svg { transform: rotate(180deg); }

/* ---- Autoplay progress line ---- */
.banner-slider__progress {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  height: 3px;
  background: rgba(255, 255, 255, 0.22);
}
.banner-slider__progress span {
  display: block;
  height: 100%;
  background: var(--accent-blue);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---- Dots, counter and the pause control ---- */
.banner-slider__controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.banner-slider__controls > :first-child { justify-self: start; }
.banner-slider__controls > :last-child { justify-self: end; }

.banner-slider__pager {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.banner-slider__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.banner-slider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: #C9D4E2;
  cursor: pointer;
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.banner-slider__dot:hover { background: var(--muted); }
.banner-slider__dot[aria-current="true"] { width: 30px; background: var(--accent-blue); }

.banner-slider__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.banner-slider__toggle:hover { color: var(--navy); border-color: var(--muted); }
.banner-slider__toggle svg { width: 15px; height: 15px; }

.banner-slider__actions { display: flex; align-items: center; gap: var(--space-3); }

.btn--on-brand { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn--on-brand:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* White on #068FC3 is only 3.7:1, so small text on the band goes navy. */
.hero-slider .banner-slider__counter { color: rgba(6, 26, 51, 0.78); }
.hero-slider .banner-slider__counter span { color: var(--navy); }
.hero-slider .banner-slider__dot { background: rgba(255, 255, 255, 0.6); }
.hero-slider .banner-slider__dot:hover { background: var(--white); }
.hero-slider .banner-slider__dot[aria-current="true"] { background: var(--navy); }

.banner-slider__counter {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.banner-slider__counter span { color: var(--navy); }

/* ---- Inset variant: the hero's right-hand column ----
   Slides are crops of the product banners' photographic side, so unlike the
   top slider these carry no typeset text and controls can sit safely on the
   image. They ride top-right; the Verified Credentials panel owns bottom-left,
   and keeping the controls off the flow leaves the column exactly as tall as
   the static photo it replaced. */
.banner-slider--inset .banner-slider__viewport {
  border-radius: 20px;
  box-shadow: var(--ring), var(--shadow-lg);
}
.banner-slider--inset .banner-slider__slide img { aspect-ratio: 5 / 4; }

.banner-slider--inset .banner-slider__controls {
  position: absolute;
  z-index: 3;
  top: var(--space-3);
  right: var(--space-3);
  left: auto;
  width: auto;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 10px;
  border-radius: var(--radius-full);
  background: rgba(6, 26, 51, 0.55);
  backdrop-filter: blur(8px);
}
.banner-slider--inset .banner-slider__counter,
.banner-slider--inset .banner-slider__nav { display: none; }

.banner-slider--inset .banner-slider__toggle {
  padding: 0;
  width: 22px;
  height: 22px;
  justify-content: center;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.85);
}
.banner-slider--inset .banner-slider__toggle:hover { color: var(--white); background: none; }
.banner-slider--inset .banner-slider__toggle span { display: none; }
.banner-slider--inset .banner-slider__toggle svg { width: 14px; height: 14px; }

.banner-slider--inset .banner-slider__dot { background: rgba(255, 255, 255, 0.45); }
.banner-slider--inset .banner-slider__dot:hover { background: rgba(255, 255, 255, 0.75); }
.banner-slider--inset .banner-slider__dot[aria-current="true"] { width: 22px; background: var(--white); }

.banner-slider--inset .banner-slider__progress { background: rgba(255, 255, 255, 0.2); }

/* =========================================================================
   Hero banner — message layered over a photo field on the house sky-blue

   The background reproduces the firm's own sky-blue gradient: a saturated cyan
   down the left that opens out to near-white at the bottom right. The stops
   below are sampled from that artwork rather than guessed — left edge #2BABE2
   at the top easing to #52BCE6 at the foot, right edge #BAE3F5 easing to
   #FEFFFF — which is why the horizontal ramp is weighted late (it stays close
   to the left cyan across the first 40% and only then opens up), and why the
   white is placed as a bloom off the bottom-right corner rather than as a
   plain linear stop.

   The photograph holds the right of the frame at close to its native width, so
   nothing is enlarged, and its left edge is feathered into the gradient so the
   picture and the colour read as one field rather than two panels.

   On a field this light the copy is set in navy rather than white: white is
   only 2.5:1 on #38B0E3 and would fail at any size. See --hero-ink below.
   ========================================================================= */

.hero-banner {
  --hero-ink: #04294B;
  --hero-ink-soft: #0A3350;
  --hero-ink-accent: #08507A;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--hero-ink);
  background:
    /* Fine diagonal light rays, as in the source artwork. Kept under 4% so
       they read as a sheen on the field rather than as stripes. */
    repeating-linear-gradient(
      104deg,
      rgba(255, 255, 255, 0) 0px,
      rgba(255, 255, 255, 0.035) 60px,
      rgba(255, 255, 255, 0) 190px,
      rgba(255, 255, 255, 0) 340px
    ),
    /* The white bloom, anchored just off the bottom-right corner. */
    radial-gradient(88% 118% at 101% 96%, #FFFFFF 0%, rgba(255, 255, 255, 0.72) 18%, rgba(255, 255, 255, 0) 62%),
    /* A softer second bloom keeps the top-right from going flat. */
    radial-gradient(64% 88% at 99% 2%, rgba(240, 251, 255, 0.85) 0%, rgba(240, 251, 255, 0) 58%),
    /* Vertical: the left edge warms very slightly toward the foot. */
    linear-gradient(180deg, rgba(0, 122, 178, 0.16) 0%, rgba(0, 122, 178, 0) 34%, rgba(94, 200, 236, 0.18) 100%),
    /* Horizontal ramp — the base field. */
    linear-gradient(96deg, #26A9E1 0%, #2FADE2 22%, #43B4E4 42%, #63C0E9 60%, #8ED3EF 76%, #B6E3F5 89%, #D8F0FA 100%);
}

/* The photo occupies the right of the field. Keeping it near native width is
   what avoids the enlarged look a full-bleed stretch produces. */
.hero-banner__media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 58%;
}
.hero-banner__media .banner-slider { position: absolute; inset: 0; }
.hero-banner__media .banner-slider__viewport {
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  /* Feathers the picture into the gradient. Applied to the viewport, not the
     slider root, so the controls stay free to sit above the scrim. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 20%, #000 52%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 20%, #000 52%);
}
.hero-banner__media .banner-slider__track,
.hero-banner__media .banner-slider__slide { height: 100%; }
.hero-banner__media .banner-slider__slide img {
  height: 100%;
  width: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.hero-banner__media .banner-slider__progress { display: none; }

/* Holds the copy at contrast. On a light field that means lifting the copy
   side toward white rather than darkening it — navy ink gains contrast as the
   ground gets lighter, so the same job is done in the opposite direction.

   Deliberately light-handed: a 10% wash is enough to put the headline at 6.2:1
   and the accent tone at 3.6:1, and anything heavier starts bleaching the
   saturated cyan that is the whole point of the reference. */
.hero-banner__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 28%, rgba(255, 255, 255, 0) 48%);
}

.hero-banner__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: clamp(25rem, 21rem + 11vw, 33rem);
  padding-top: clamp(2.75rem, 2.25rem + 2vw, 4rem);
  padding-bottom: clamp(4.25rem, 3.75rem + 2vw, 5.5rem);
}

.hero-banner__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  color: var(--hero-ink);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero-banner__eyebrow::before {
  content: "";
  flex: none;
  width: 34px;
  height: 2px;
  background: var(--hero-ink-accent);
}

.hero-banner h1 {
  max-width: 15ch;
  margin-bottom: var(--space-5);
  color: var(--hero-ink);
  font-size: clamp(2.35rem, 1.8rem + 2.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.015em;
}
/* A lighter tone of the same ink rather than a contrasting hue: still 3.8:1 on
   the field behind it, so it holds at heading size. */
.hero-banner h1 .accent { color: var(--hero-ink-accent); }

.hero-banner__lead {
  max-width: 36ch;
  margin-bottom: var(--space-6);
  color: var(--hero-ink-soft);
  font-size: var(--fs-lead);
}

.btn--on-dark {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
}
.btn--on-dark:hover { background: var(--white); color: #02202F; border-color: var(--white); }

/* On the sky-blue field the calls to action go navy — a solid mark and its
   outline, which is how the firm's own artwork sets buttons on this colour.
   The mid-blue --accent-blue fill would sit too close to the ground to read. */
.hero-banner .btn--accent {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.hero-banner .btn--accent:hover {
  background: #0B3160;
  border-color: #0B3160;
  color: var(--white);
}
.hero-banner .btn--on-dark {
  background: rgba(255, 255, 255, 0.62);
  color: var(--navy);
  border-color: rgba(4, 41, 75, 0.45);
  backdrop-filter: blur(6px);
}
.hero-banner .btn--on-dark:hover {
  background: var(--white);
  color: var(--navy);
  border-color: var(--navy);
}


/* Controls sit under the copy, aligned to the container's left edge. */
.banner-slider--backdrop .banner-slider__controls {
  position: absolute;
  z-index: 3;
  left: calc(max(var(--container-pad), (100vw - var(--container-max)) / 2 + var(--container-pad)) - 42vw);
  bottom: clamp(1.5rem, 1.2rem + 1vw, 2.5rem);
  right: auto;
  width: auto;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 7px 13px;
  border-radius: var(--radius-full);
  /* Opaque enough to carry the navy dots when the pill lands on a photograph,
     which is where it sits once the layout stacks at narrow widths. */
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(4, 41, 75, 0.16);
}
.banner-slider--backdrop .banner-slider__counter,
.banner-slider--backdrop .banner-slider__nav { display: none; }
.banner-slider--backdrop .banner-slider__toggle {
  padding: 0;
  width: 22px;
  height: 22px;
  justify-content: center;
  border: none;
  background: none;
  color: rgba(4, 41, 75, 0.7);
}
.banner-slider--backdrop .banner-slider__toggle:hover { color: var(--navy); background: none; }
.banner-slider--backdrop .banner-slider__toggle span { display: none; }
.banner-slider--backdrop .banner-slider__toggle svg { width: 14px; height: 14px; }
.banner-slider--backdrop .banner-slider__dot { background: rgba(4, 41, 75, 0.3); }
.banner-slider--backdrop .banner-slider__dot:hover { background: rgba(4, 41, 75, 0.55); }
.banner-slider--backdrop .banner-slider__dot[aria-current="true"] { width: 26px; background: var(--navy); }

@media (max-width: 900px) {
  /* Narrow: the photo drops to a band across the top and the copy sits on the
     plain sky-blue below it. Overlaying the two here is what would break —
     these photographs have no reliably light or dark region to set navy type
     on once they fill the whole field, so the copy gets its own ground. */
  .hero-banner__media {
    inset: 0 0 auto 0;
    width: 100%;
    height: clamp(12rem, 34vw, 17rem);
  }
  .hero-banner__media .banner-slider__viewport {
    -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, 0.35) 88%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, 0.35) 88%, transparent 100%);
  }
  .banner-slider--backdrop .banner-slider__controls {
    left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  }
  .hero-banner__scrim { background: none; }
  .hero-banner__inner {
    min-height: 0;
    padding-top: calc(clamp(12rem, 34vw, 17rem) + var(--space-6));
  }
  .hero-banner h1 { max-width: 18ch; }
  .hero-banner__lead { max-width: none; }
}
@media (max-width: 560px) {
  .hero-banner .btn-row { width: 100%; }
  .hero-banner .btn-row .btn { flex: 1 1 100%; }
}

/* ---- Top-of-page placement ----
   A soft band so the card's shadow reads, matching how every other panel on
   the site sits on the page rather than bleeding to the window edge.

   This band continues the hero's sky-blue rather than restating it in a
   saturated mid-blue: the two sections are one continuous field at the top of
   the page, and a hard tonal step between them would read as a seam. It also
   puts the product artwork on the same ground the firm's own material uses. */
.hero-slider {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 62%, rgba(255, 255, 255, 0.88) 100%),
    linear-gradient(96deg, #33AFE3 0%, #3CB2E4 22%, #4DB8E6 42%, #6AC3EA 60%, #93D6F0 76%, #B9E4F6 89%, #D9F0FA 100%);
  padding-block: clamp(1.75rem, 1.4rem + 1.4vw, 3rem);
  border-bottom: 1px solid var(--line);
}

/* The controls under the card were drawn as white pills on white. On the
   sky-blue band a hairline in --line all but disappears, so everything that
   was relying on the page being white gets a navy-tinted edge instead. */
.hero-slider .banner-slider__nav,
.hero-slider .banner-slider__toggle { border-color: rgba(4, 41, 75, 0.18); }
.hero-slider .banner-slider__dot { background: rgba(4, 41, 75, 0.28); }
.hero-slider .banner-slider__dot:hover { background: rgba(4, 41, 75, 0.5); }
.hero-slider .btn--on-brand { border-color: rgba(4, 41, 75, 0.22); }
.hero-slider .btn--on-brand:hover { border-color: var(--navy); }

@media (max-width: 720px) {
  /* The card keeps its margins and radius here too. Going edge to edge would
     buy back only ~11% width — not enough to make the artwork's small print
     legible — while breaking the card treatment used everywhere else. */
  .banner-slider__viewport { border-radius: var(--radius-md); }
  /* Swipe, the arrows and the dots carry navigation here; the pause button and
     counter would squeeze the row into three cramped columns. */
  .banner-slider__controls { grid-template-columns: 1fr; justify-items: center; }
  .banner-slider__toggle, .banner-slider__counter { display: none; }
  .banner-slider__pager { gap: var(--space-3); }
  .banner-slider__dots { gap: 7px; }
  /* Stacked: the pager sits above full-width calls to action. */
  .banner-slider__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .banner-slider__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .banner-slider__track { transition: none; }
  .banner-slider__progress { display: none; }
}

@media print {
  .chatbox, .site-header, .mobile-nav { display: none !important; }
}

/* =========================================================================
   Sky band — the house sky-blue, reused away from the hero

   The same artwork the hero is built from: the diagonal cyan-to-white ramp
   with fine light rays over it. Two things change for section use.

   First, copy in a section is centred rather than held to the left, so a plain
   left-to-right ramp would run a single heading from saturated cyan into
   near-white across its own width. A white bloom is placed through the middle
   of the band instead. That lifts the ground under the text and leaves the
   saturated cyan at the edges, where the eye reads it as colour rather than as
   backdrop.

   Second, the ink. Measured against the darkest ground copy can land on here
   (#2FADE2, the left of the ramp), --muted comes out at 2.1:1 and
   --accent-blue-ink at 2.4:1 — both fail. Every muted tone inside the band is
   re-pointed at two inks chosen against that worst case: --sky-ink-soft at
   5.1:1 and --sky-ink-accent at 4.7:1. Both also sit above 11:1 on white, so
   the same override is correct for the white cards that sit on the band and
   nothing needs a second exception. Headings stay navy (6.8:1).

   Used once per page. It is punctuation, not a second default background.
   ========================================================================= */

.section--sky {
  --sky-ink-soft: #0A3350;
  --sky-ink-accent: #023A57;

  position: relative;
  color: var(--charcoal);
  background:
    /* Fine diagonal light rays, as in the source artwork. */
    repeating-linear-gradient(
      104deg,
      rgba(255, 255, 255, 0) 0px,
      rgba(255, 255, 255, 0.05) 60px,
      rgba(255, 255, 255, 0) 190px,
      rgba(255, 255, 255, 0) 340px
    ),
    /* The bloom that opens the middle of the band up under the copy. */
    radial-gradient(76% 92% at 50% 44%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0) 78%),
    /* Feathers the top and bottom edges so the band joins the white sections
       above and below instead of butting against them as a hard stripe. */
    linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, 0) 82%, rgba(255, 255, 255, 0.62) 100%),
    /* The house ramp. */
    linear-gradient(96deg, #2FADE2 0%, #3CB2E4 20%, #4DB8E6 40%, #6AC3EA 58%, #93D6F0 74%, #B9E4F6 88%, #D9F0FA 100%);
}

.section--sky p,
.section--sky li,
.section--sky .lead { color: var(--sky-ink-soft); }
.section--sky .eyebrow,
.section--sky .link-arrow,
.section--sky .why-v2__number,
.section--sky .breadcrumb a { color: var(--sky-ink-accent); }
.section--sky h1,
.section--sky h2,
.section--sky h3,
.section--sky h4 { color: var(--navy); }

/* --line is a hairline drawn for a white page; on the band it disappears.
   Anything that was relying on the page being white gets a navy-tinted edge,
   the same substitution the hero-slider band makes. */
.section--sky .industry-list li { border-bottom-color: rgba(4, 41, 75, 0.16); }
.section--sky .note-panel {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(4, 41, 75, 0.14);
  border-left-color: var(--navy);
  color: var(--sky-ink-soft);
}
.section--sky .empty-state {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(4, 41, 75, 0.22);
  color: var(--sky-ink-soft);
}
/* Cards keep their white ground but need a slightly stronger edge and lift to
   separate from a coloured field rather than a white one. */
.section--sky .card,
.section--sky .value-card,
.section--sky .why-v2__item,
.section--sky .vacancy-card,
.section--sky .reason-card,
.section--sky .form-panel {
  border-color: rgba(4, 41, 75, 0.10);
  box-shadow: var(--shadow-sm);
}
.section--sky .why-v2__item:hover,
.section--sky .card:hover,
.section--sky .reason-card:hover { box-shadow: var(--shadow-md); }

/* The outline button was drawn as navy-on-white; on the band it needs an
   opaque ground of its own or the field shows through the label. */
.section--sky .btn--outline {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(4, 41, 75, 0.4);
  color: var(--navy);
}
.section--sky .btn--outline:hover {
  background: var(--white);
  border-color: var(--navy);
  color: var(--navy);
}

/* =========================================================================
   Vision & Mission — photographic panels

   The two statements used to sit in a navy/ivory split with an icon at the
   head of each cell. A stock globe and handshake said nothing the sentences
   underneath did not already say, so each panel now leads with a photograph of
   the firm's own team instead — the pair at the workstation for the vision,
   the adviser taking a call in front of the brokerage's banner for the
   mission. Both are portrait frames, which is what lets the picture hold a
   full column beside the text rather than being cropped into a letterbox.
   ========================================================================= */

.vm-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: stretch;
  background: var(--white);
  border: 1px solid rgba(4, 41, 75, 0.10);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.vm-panel + .vm-panel { margin-top: clamp(1.5rem, 2.5vw, 2.5rem); }

/* Absolutely positioned inside the figure so the picture fills whatever height
   the text column settles at, without the image's own ratio driving the row. */
.vm-panel__media { position: relative; margin: 0; min-height: 22rem; }
.vm-panel__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

.vm-panel__body {
  padding: clamp(1.75rem, 3vw, 3.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vm-panel__body h3 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  color: var(--navy);
}
.vm-panel__body h3::before {
  content: "";
  flex: none;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent-blue);
}
.vm-panel__body p { color: var(--charcoal); }
.vm-panel__body p:last-child { margin-bottom: 0; }

.vm-panel--reverse { grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); }
.vm-panel--reverse .vm-panel__media { order: 2; }

@media (max-width: 820px) {
  /* Stacked, the portrait frame becomes a band across the top. object-position
     is pulled up so the faces stay in the crop as the box gets shorter. */
  .vm-panel,
  .vm-panel--reverse { grid-template-columns: 1fr; }
  .vm-panel--reverse .vm-panel__media { order: 0; }
  .vm-panel__media { min-height: 0; aspect-ratio: 16 / 10; }
  .vm-panel__media img { object-position: center 22%; }
}