/* ============================================================================
   ICB CONCEPT EXPERIENCE — design system, pass 2
   Insurance Corporation of Belize Ltd. website concept
   Prepared by Austere Automations (speculative first draft)
   ----------------------------------------------------------------------------
   Design idea: red light, black ground. A white, airy editorial page
   grounded by institutional black sections; red behaves like light
   (rules, signals, glows, one CTA at a time), never like paint.
   ----------------------------------------------------------------------------
   PALETTE: derived directly from the official ICB logo (red sampled at
   #D12126, black #000000). Confirm against ICB brand guidelines before
   final sign-off; the semantic aliases below make any adjustment a
   one-block edit.
   ========================================================================== */

:root {
  /* Red scale (anchored on the logo red #D12126) */
  --red-700: #8F1114;
  --red-600: #B4171C;
  --red-500: #D12126;
  --red-450: #DA3A3E;
  --red-400: #E5504E;
  --red-300: #F0716E;
  --red-100: #F8D9DA;
  --red-050: #FCF0F0;

  /* Black / charcoal ladder (warm neutral, never blue) */
  --black-950: #0B0B0C;
  --black-900: #121214;
  --black-800: #1A1A1D;
  --black-700: #232327;
  --ink: #161618;
  --grey-600: #5C5C63;

  /* Warm neutrals */
  --white: #FFFFFF;
  --paper: #F7F5F4;
  --grey-100: #F2F0EF;
  --grey-200: #E4E1DF;
  --line: #E0DDDB;
  --line-soft: #EBE9E7;
  --inv: #F5F4F2;
  --inv-soft: #ABAAB0;

  /* Semantic aliases — components consume only these */
  --c-bg: var(--paper);
  --c-surface: var(--white);
  --c-text: var(--ink);
  --c-text-soft: var(--grey-600);
  --c-brand: var(--ink);
  --c-brand-deep: var(--black-950);
  --c-dark: var(--black-900);
  --c-dark-2: var(--black-800);
  --c-dark-line: rgba(255, 255, 255, 0.10);
  --c-dark-line-strong: rgba(255, 255, 255, 0.18);
  --c-cta: var(--red-600);
  --c-cta-hover: var(--red-700);
  --c-cta-dark: var(--red-500);
  --c-cta-dark-hover: var(--red-450);
  --c-accent: var(--red-500);
  --c-accent-ink: var(--red-600);
  --c-accent-soft: var(--red-400);
  --c-line: var(--line);
  --c-line-soft: var(--line-soft);
  --c-tint: var(--grey-100);
  --c-tint-deep: var(--grey-200);
  --c-text-inverse: var(--inv);
  --c-text-inverse-soft: var(--inv-soft);

  /* Type */
  --font-display: "Archivo", "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-900: clamp(2.6rem, 1.5rem + 4.6vw, 4rem);
  --fs-800: clamp(2.1rem, 1.3rem + 3.4vw, 3.1rem);
  --fs-700: clamp(1.65rem, 1.2rem + 1.9vw, 2.25rem);
  --fs-600: clamp(1.28rem, 1.08rem + 0.85vw, 1.55rem);
  --fs-500: 1.125rem;
  --fs-400: 1rem;
  --fs-300: 0.9rem;
  --fs-200: 0.78rem;

  /* Space / shape */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem;
  --sp-10: 4rem; --sp-12: 6rem;
  --section-pad: clamp(3.5rem, 8vw, 6.25rem);
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(10, 10, 11, 0.06);
  --shadow-lg: 0 16px 40px rgba(10, 10, 11, 0.12);
  --shadow-sheet: 0 24px 64px rgba(6, 6, 7, 0.35);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 160ms;
  --t-slow: 240ms;
  --t-hero: 900ms;

  /* Chrome */
  --header-h: 72px;
  --quickbar-h: 62px;
}

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

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

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  color: var(--c-brand);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-800); letter-spacing: -0.015em; line-height: 1.06; }
h2 { font-size: var(--fs-700); letter-spacing: -0.01em; font-weight: 600; }
h3 { font-size: var(--fs-600); font-weight: 600; }
h4 { font-size: var(--fs-500); font-family: var(--font-sans); font-weight: 700; margin: 0 0 var(--sp-4); color: var(--c-brand); }

p { margin: 0 0 var(--sp-4); max-width: 65ch; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }

a {
  color: var(--c-cta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--c-cta-hover); text-decoration-thickness: 1.5px; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--c-cta);
  outline-offset: 2px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.on-dark:focus-visible {
  outline-color: var(--inv);
}

::selection { background: var(--red-100); }

/* ============================ A11y helpers ============================ */

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

.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 200;
  background: var(--c-brand);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible {
  transform: none;
  color: #fff;
}

.noscript-note {
  padding: var(--sp-5);
  background: var(--red-100);
  border-bottom: 1px solid var(--c-line);
  text-align: center;
}

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

.shell {
  width: min(1120px, 100% - 2 * clamp(16px, 4vw, 32px));
  margin-inline: auto;
}

.section { padding-block: var(--section-pad); }
.section--flush-top { padding-top: 0; }
.section--tint { background: var(--c-surface); border-block: 1px solid var(--c-line-soft); }
.section--dark {
  background: var(--c-dark);
  color: var(--c-text-inverse);
}
.section--dark h2, .section--dark h3 { color: var(--c-text-inverse); }
.section--dark p { color: var(--c-text-inverse-soft); }

.section-head { max-width: 46rem; margin-bottom: var(--sp-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }
.section-head p { color: var(--c-text-soft); font-size: var(--fs-500); }
.section--dark .section-head p { color: var(--c-text-inverse-soft); }

.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
  margin-bottom: var(--sp-3);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--c-accent);
  vertical-align: middle;
  margin-right: 10px;
  margin-top: -2px;
}
.section--dark .eyebrow, .on-dark .eyebrow { color: var(--c-accent-soft); }
.section-head--center .eyebrow::before { display: none; }

.brand-rule {
  width: 40px; height: 3px;
  background: var(--c-accent);
  border: 0;
  margin: var(--sp-4) 0 0;
}
.section-head--center .brand-rule { margin-inline: auto; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 1.35rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: var(--fs-400);
  line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn .glyph { width: 20px; height: 20px; flex: none; }

.btn-primary { background: var(--c-cta); color: #fff; }
.btn-primary:hover { background: var(--c-cta-hover); color: #fff; }
.btn-primary:focus-visible { outline-color: var(--black-950); }

.btn-outline { border-color: var(--c-cta); color: var(--c-cta); background: transparent; }
.btn-outline:hover { background: var(--red-050); color: var(--c-cta-hover); }

.btn-ghost { color: var(--c-cta); background: transparent; }
.btn-ghost:hover { background: var(--c-tint); color: var(--c-cta-hover); }

.btn-dark { background: var(--c-brand); color: #fff; }
.btn-dark:hover { background: var(--black-700); color: #fff; }

/* On dark surfaces */
.btn-gold { background: var(--c-cta-dark); color: #fff; }
.btn-gold:hover { background: var(--c-cta-dark-hover); color: #fff; }
.btn-gold:focus-visible { outline-color: var(--inv); }
.btn-light { border-color: rgba(255,255,255,0.55); color: #fff; background: transparent; }
.btn-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; }

.btn-lg { min-height: 52px; padding: 0.7rem 1.7rem; font-size: var(--fs-500); }
.btn-sm { min-height: 38px; padding: 0.35rem 0.95rem; font-size: var(--fs-300); }

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

.ext-mark { width: 14px; height: 14px; flex: none; opacity: 0.75; }

/* ============================ Header ============================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line-soft);
  transition: box-shadow var(--t-slow) var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-lg); }

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

/* Brand lockup: the official ICB logo plus the company name. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--c-brand);
  margin-right: auto;
}
.brand-logo { height: 46px; width: auto; flex: none; }
.brand-sep {
  width: 2px;
  height: 34px;
  background: var(--c-accent);
  margin: 0 12px;
  flex: none;
}
.brand-lines {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.brand-lines span {
  font-size: 0.656rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-soft);
}

.site-nav ul {
  display: flex;
  gap: clamp(0.15rem, 1vw, 0.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-block;
  padding: 0.45rem 0.65rem;
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-weight: 600;
  font-size: var(--fs-300);
  text-decoration: none;
}
.site-nav a:hover { background: var(--c-tint); color: var(--c-brand); }
.site-nav a[aria-current="page"] {
  color: var(--c-brand);
  box-shadow: inset 0 -2px 0 var(--c-accent);
  border-radius: var(--r-sm) var(--r-sm) 2px 2px;
}

.header-actions { display: flex; align-items: center; gap: var(--sp-2); }
/* One action in the header, so it never needs to wrap. */
.btn-cover { white-space: nowrap; }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  align-items: center;
  justify-content: center;
}
.menu-toggle:hover { background: var(--c-tint); }
.menu-bars { display: block; width: 20px; }
.menu-bars span {
  display: block;
  height: 2px;
  background: var(--c-brand);
  border-radius: 2px;
  margin: 4px 0;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.menu-toggle[aria-expanded="true"] .menu-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu sheet */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--c-surface);
  z-index: 90;
  overflow-y: auto;
  padding: var(--sp-5) clamp(16px, 4vw, 32px) var(--sp-10);
}
.mobile-menu[hidden] { display: none; }

.mm-tasks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.mm-task {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--c-tint);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  color: var(--c-brand);
  font-weight: 600;
  text-decoration: none;
  min-height: 84px;
}
.mm-task .glyph { width: 24px; height: 24px; color: var(--c-accent-ink); }
.mm-task:hover { border-color: var(--c-tint-deep); color: var(--c-brand); }

.mm-nav ul { list-style: none; margin: 0 0 var(--sp-6); padding: 0; }
.mm-nav a {
  display: block;
  padding: 0.8rem 0.25rem;
  font-size: var(--fs-500);
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line-soft);
}
.mm-nav a[aria-current="page"] { color: var(--c-brand); box-shadow: inset 3px 0 0 var(--c-accent); padding-left: 0.75rem; }

.mm-contact { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ============================ Footer ============================ */

.site-footer {
  background: var(--c-brand-deep);
  color: var(--c-text-inverse-soft);
  padding: var(--sp-10) 0 var(--sp-6);
  border-top: 3px solid var(--c-accent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--sp-7);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--c-dark-line);
}
.footer-logo-plate {
  display: inline-flex;
  background: #FFFFFF;
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.footer-logo-plate img { height: 54px; width: auto; }
.footer-brand .brand-lines { margin-top: var(--sp-3); display: flex; flex-direction: column; }
.footer-brand .brand-lines span {
  font-size: 0.656rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-inverse-soft);
  line-height: 1.5;
}
.footer-brand > p { color: var(--c-text-inverse-soft); font-size: var(--fs-300); margin-top: var(--sp-4); }
.footer-col h3 {
  color: var(--c-text-inverse);
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.55rem; }
.footer-col a {
  color: var(--c-text-inverse-soft);
  text-decoration: none;
  font-size: var(--fs-300);
}
.footer-col a:hover { color: var(--c-text-inverse); text-decoration: underline; }
.footer-col address { font-style: normal; font-size: var(--fs-300); line-height: 1.7; }
.footer-col address a { color: var(--c-text-inverse-soft); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--sp-5);
  font-size: var(--fs-300);
}
.footer-note { color: rgba(245, 244, 242, 0.45); font-size: var(--fs-200); letter-spacing: 0.04em; }
/* The studio credit. Reads as part of the line until you go near it, so
   the attribution stays quiet on a page about ICB. Sized to a proper
   touch target like every other footer link. */
.footer-credit {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: rgba(245, 244, 242, 0.62);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 244, 242, 0.22);
}
.footer-credit:hover,
.footer-credit:focus-visible {
  color: var(--c-text-inverse);
  border-bottom-color: currentColor;
}
@media (pointer: coarse), (max-width: 719px) {
  .footer-credit { min-height: 44px; }
}

/* ============================ Hero slider ============================ */

.hero-slider {
  position: relative;
  background: var(--c-dark);
  color: var(--c-text-inverse);
  overflow: hidden;
  min-height: clamp(540px, 68vh, 720px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-hero) cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear var(--t-hero);
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-hero) cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

/* Real media layers */
/* The 1px overhang stops the slider's own ground showing through as a
   hairline when a fractional viewport height rounds the slide short. */
.hero-media { position: absolute; inset: 0 0 -1px 0; overflow: hidden; }
.hero-media img, .hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  transform: scale(1.045);
}
.hero-slide.is-active .hero-media img,
.hero-slide.is-active .hero-media video {
  transform: scale(1);
  transition: transform 7000ms linear;
}
.hero-media--contain { background: #F7F5F4; }
.hero-media--contain img {
  object-fit: contain;
  object-position: right center;
  transform: none;
}
.hero-slide.is-active .hero-media--contain img { transform: none; transition: none; }

/* --- Brand lockup slide (Nationwide Cash Express) ---------------------
   The supplied artwork is a finished composition, so it is contained,
   never cropped, and centred on its own pale ground. The <picture> in
   the markup swaps the banner for the vertical poster below 769px. */
/* The ground matches the artwork's own background, so the contained
   lockup reads as the whole slide rather than a pasted-in box. */
.hero-media--brand { background: #FEFEFE; }
.hero-media--brand picture { display: contents; }
.hero-media--brand img {
  object-fit: contain;
  /* Centred in the space left once the slider chrome is accounted for,
     so a tall tablet viewport does not leave the lockup stranded at the
     top of the slide. */
  object-position: center;
  transform: none;
  padding: clamp(16px, 3vw, 40px) clamp(16px, 4vw, 64px) clamp(104px, 14vh, 128px);
}
.hero-slide.is-active .hero-media--brand img { transform: none; transition: none; }

/* Nothing is laid over the lockup, so the slide needs no copy column. */
.hero-slide--brand { align-items: stretch; }

/* --- Film slide -------------------------------------------------------
   Poster first, video only once the visitor asks for it. Nothing here
   is muted and nothing autoplays. */
.hero-media--film { background: #0B0B0C; cursor: pointer; }
.hero-film-poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  background: #0B0B0C;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.hero-video.is-playing { opacity: 1; }
.hero-video[hidden] { display: none; }

/* Sound control. The film runs as ambient motion, muted, because that is
   the only way a browser will start it unprompted. One tap turns the
   sound on, which is a gesture, so audio is permitted from then on. */
.hero-sound {
  position: absolute;
  top: clamp(14px, 2.5vw, 24px);
  right: clamp(14px, 2.5vw, 24px);
  z-index: 4;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(18, 18, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hero-sound .glyph { width: 21px; height: 21px; }
.hero-sound .s-off, .hero-sound .s-on { display: flex; }
.hero-sound .s-on { display: none; }
.hero-sound[aria-pressed="true"] .s-off { display: none; }
.hero-sound[aria-pressed="true"] .s-on { display: flex; }
.hero-sound[hidden] { display: none; }
.hero-sound[aria-pressed="true"] { background: var(--c-cta); border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .hero-sound:hover { background: var(--c-cta); border-color: transparent; }
}
/* A label the first time, so the control is not just a mystery icon. */
.hero-sound-hint {
  position: absolute;
  top: calc(clamp(14px, 2.5vw, 24px) + 54px);
  right: clamp(14px, 2.5vw, 24px);
  z-index: 4;
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-text-inverse);
  background: rgba(18, 18, 20, 0.55);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.hero-sound-hint[hidden] { display: none; }

.hero-play { z-index: 4; }
/* With sound on, the carousel waits rather than sliding the film away. */
.hero-slider.is-film-holding .hero-progress button .bar::after { animation-play-state: paused; }

/* Restrained overlays: gradients only, never boxes over the media. */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(78deg, rgba(6, 6, 7, 0.84) 0%, rgba(6, 6, 7, 0.6) 34%, rgba(6, 6, 7, 0) 64%),
    linear-gradient(0deg, rgba(6, 6, 7, 0.62) 0%, rgba(6, 6, 7, 0) 40%);
}
.hero-slide h2, .hero-slide .hero-lead { text-shadow: 0 1px 14px rgba(6, 6, 7, 0.45); }
.hero-scrim--light {
  background:
    linear-gradient(90deg, rgba(247, 245, 244, 0.97) 0%, rgba(247, 245, 244, 0.9) 34%, rgba(247, 245, 244, 0) 62%),
    linear-gradient(0deg, rgba(247, 245, 244, 0.9) 0%, rgba(247, 245, 244, 0) 30%);
}

/* Light slide: dark copy on the pale artwork ground */
.hero-slide.hero-slide--light .eyebrow { color: var(--c-accent-ink); }
.hero-slide.hero-slide--light h2 { color: var(--c-brand); text-shadow: none; }
.hero-slide.hero-slide--light .hero-lead { color: var(--c-text-soft); text-shadow: none; }

/* Controls adapt when the active slide is light. The slider's ground
   flips with them, so no dark edge can frame the artwork. */
.hero-slider.is-light-active { background: var(--paper); border-bottom-color: transparent; }
.hero-slider.is-light-active .hero-progress .bar { background: rgba(22, 22, 24, 0.22); }
.hero-slider.is-light-active .hero-progress button.is-done .bar { background: rgba(22, 22, 24, 0.45); }
.hero-slider.is-light-active .hero-count { color: var(--c-text-soft); }
.hero-slider.is-light-active .hero-arrows button {
  border-color: rgba(22, 22, 24, 0.35);
  color: var(--c-brand);
}
.hero-slider.is-light-active .hero-arrows button:hover {
  background: rgba(22, 22, 24, 0.06);
  border-color: rgba(22, 22, 24, 0.6);
}
.hero-slider.is-light-active .hero-arrows button:focus-visible,
.hero-slider.is-light-active .hero-progress button:focus-visible { outline-color: var(--c-brand); }

/* The brand slide's artwork already carries its name and line, so those
   stay in the document for screen readers and the slide label while only
   the action row is painted. */
.hero-slide-copy--quiet {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.hero-slide-copy {
  position: relative;
  z-index: 2;
  max-width: 44rem;
  padding-block: var(--sp-10) calc(var(--sp-10) + 110px);
}
.hero-slide h2 {
  font-size: var(--fs-900);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.06;
  color: var(--c-text-inverse);
  margin-bottom: var(--sp-4);
}
.hero-lead {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  color: var(--c-text-inverse-soft);
  margin-bottom: var(--sp-6);
}
.hero-slide .eyebrow { color: var(--c-accent-soft); }

.hero-slide.is-active .hs-rise {
  animation: hs-rise 600ms var(--ease) 250ms backwards;
}
@keyframes hs-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.hero-controls {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(clamp(2.5rem, 6vw, 3.5rem) + 20px);
  z-index: 5;
}
.hero-controls-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.hero-progress { display: flex; gap: 10px; align-items: center; }
.hero-progress button {
  position: relative;
  width: 36px;
  height: 28px;
  display: flex;
  align-items: center;
}
.hero-progress .bar {
  display: block;
  width: 36px;
  height: 2px;
  background: rgba(255, 255, 255, 0.28);
  position: relative;
  overflow: hidden;
}
.hero-progress .bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
}
.hero-progress button.is-done .bar { background: rgba(255, 255, 255, 0.55); }
.hero-progress button[aria-current="true"] .bar::after {
  animation: hp-fill 7000ms linear forwards;
}
.hero-slider.is-paused .hero-progress button[aria-current="true"] .bar::after {
  animation-play-state: paused;
}
.hero-slider.is-manual .hero-progress button[aria-current="true"] .bar::after {
  animation: none;
  transform: scaleX(1);
}
@keyframes hp-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.hero-count {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--c-text-inverse-soft);
  font-variant-numeric: tabular-nums;
}

.hero-arrows { display: flex; gap: 10px; margin-left: auto; }
.hero-arrows button {
  position: relative;
  width: 36px; height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--r-sm);
  color: var(--inv);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hero-arrows button:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.6); }
.hero-arrows .glyph { width: 17px; height: 17px; }
/* Smaller to look at, still a comfortable target: the hit area reaches
   past the visible edge. */
.hero-arrows button::after,
.hero-progress button::after {
  content: "";
  position: absolute;
  /* Vertical reach is free; horizontal stays inside the gap so one
     control never steals its neighbour's taps. */
  inset: -10px -4px;
}

@media (max-width: 768px) {
  /* The media leads on mobile: taller hero, compact bottom-anchored copy,
     and the hero is a complete section with nothing overlapping it. */
  .hero-slider { min-height: clamp(580px, 88svh, 720px); }
  .hero-slide { align-items: flex-end; }
  .hero-slide-copy {
    padding-top: var(--sp-6);
    padding-bottom: 92px;
    max-width: 100%;
  }
  .hero-slide h2 { font-size: clamp(1.85rem, 7.4vw, 2.4rem); margin-bottom: var(--sp-3); }
  .hero-lead { font-size: 0.95rem; margin-bottom: var(--sp-4); max-width: 32ch; }
  .hero-slide .btn-lg { min-height: 46px; padding: 0.5rem 1.1rem; font-size: 0.95rem; }
  .hero-scrim {
    background:
      linear-gradient(0deg, rgba(6, 6, 7, 0.85) 0%, rgba(6, 6, 7, 0.55) 38%, rgba(6, 6, 7, 0) 72%);
  }
  .hero-scrim--light {
    background:
      linear-gradient(0deg, rgba(247, 245, 244, 0.96) 0%, rgba(247, 245, 244, 0.8) 30%, rgba(247, 245, 244, 0) 58%);
  }
  /* Artwork slide on mobile: the poster gets the top half on its own, the
     copy sits beneath it. Nothing overlaps the artwork. */
  .hero-slide--light .hero-media--contain { inset: 0 0 52% 0; }
  /* The brand slide's vertical composition needs the full height; only
     the action row and the slider chrome sit below it. */
  /* The vertical composition is almost exactly the hero's own aspect, so
     containing it costs almost no space and keeps the whole lockup,
     including its red and black sweep, intact. */
  /* Below 769px the slider chrome sits lower, so less needs reserving. */
  .hero-media--brand img { padding: var(--sp-3) var(--sp-3) 64px; }
  .hero-slide--light .hero-media--contain img { object-fit: contain; object-position: center center; }
  .hero-slide--light .hero-scrim--light { display: none; }
  .hero-slide--light { background: var(--c-bg); }
  .hero-slide--light .hero-slide-copy { padding-bottom: 96px; }
  .hero-count { display: none; }
  .hero-controls { bottom: 18px; }
  /* Compact cards: strong image, tight copy. */
  .card-body { padding: var(--sp-4); }
  .card-glyph { width: 40px; height: 40px; margin-top: calc(-1 * (var(--sp-4) + 20px)); }
  .card-desc { font-size: 0.875rem; }
  .card-body h3 { font-size: 1.2rem; }
}

/* Phones get the vertical lockup, trimmed of its empty ground so it can
   run close to edge to edge while still being contained. Containing
   matters here: covering cropped a quarter of it on a short phone, which
   ate into the sweep at the foot of the artwork. */
@media (max-width: 560px) {
  .hero-media--brand img { padding: 0 0 60px; }
}

/* ============================ Action bar ============================ */

/* The hero is a complete, independent section at every width. The panel
   follows it in normal document flow with clear breathing room, and
   never rides up over the photograph. */
.action-bar { position: relative; z-index: 5; margin-top: var(--sp-5); }
@media (min-width: 769px) {
  .action-bar { margin-top: var(--sp-7); }
}
.action-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.action-panel h2 { font-size: var(--fs-600); margin-bottom: var(--sp-4); }
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
}
/* Shared icon chip. Centring the glyph in its own disc gives a row of
   tiles one optical baseline, whatever the glyph's own proportions. */
.tile-chip {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--c-tint);
  border: 1px solid var(--c-line-soft);
  color: var(--c-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.tile-chip .glyph { width: 23px; height: 23px; }
.tile-label { display: block; }

.action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-3);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  background: var(--c-bg);
  color: var(--c-text);
  font-weight: 600;
  font-size: var(--fs-300);
  line-height: 1.35;
  text-decoration: none;
  min-height: 132px;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.action-tile:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--c-tint-deep);
  color: var(--c-brand);
}
.action-tile:hover .tile-chip {
  background: var(--red-050);
  border-color: var(--c-cta);
  color: var(--c-cta);
}
.action-tile--accent { border-top: 2px solid var(--c-accent); }
.action-tile--accent .tile-chip { color: var(--c-cta); border-color: var(--c-accent); }
.action-tile .tile-note {
  margin-top: auto;
  font-weight: 400;
  font-size: var(--fs-200);
  color: var(--c-text-soft);
}

/* ============================ Cards ============================ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
  gap: var(--sp-5);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.card:hover, .card:focus-within {
  box-shadow: var(--shadow-lg);
  border-color: #CFCCCA;
}

.card-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.card-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.card-body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5); }
.card-body h3 { margin-bottom: var(--sp-2); }
.card-body h3 a {
  color: inherit;
  text-decoration: none;
}
.card-body h3 a:hover { color: var(--c-cta); }
.card-body h3 a::after { content: ""; position: absolute; inset: 0; }
.card-desc { color: var(--c-text-soft); font-size: var(--fs-300); flex: 1; }

.card-glyph {
  width: 44px; height: 44px;
  margin-top: calc(-1 * (var(--sp-5) + 22px));
  margin-bottom: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-brand);
  position: relative;
  z-index: 2;
}
.card-glyph svg { width: 24px; height: 24px; }

.card-links {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  font-size: var(--fs-300);
  font-weight: 600;
}
.card-links a { text-decoration: none; }
.card-links a:hover { text-decoration: underline; }

/* ============================ Art panels / photo slots ============================ */

.art-panel { position: relative; overflow: hidden; }
.art-panel > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.slot-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.slot-photo.is-loaded { opacity: 1; }

/* ============================ Belize map ============================ */

.belize-map { width: 100%; height: auto; display: block; }
.bm-land {
  fill: #EFEDEC;
  stroke: var(--ink);
  stroke-width: 1.4;
}
.bm-isle {
  fill: #EFEDEC;
  stroke: var(--ink);
  stroke-width: 0.8;
}
.bm-dot { fill: var(--c-accent); stroke: #FFFFFF; stroke-width: 1.2; }
.bm-halo { fill: var(--c-accent); opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.bm-marker.is-active .bm-halo, .bm-marker:hover .bm-halo { opacity: 0.22; }
.bm-marker.is-dim { opacity: 0.28; }
.bm-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  fill: var(--grey-600);
}
.bm-marker.is-active .bm-label { fill: var(--ink); font-weight: 700; }

.on-dark .bm-land { fill: rgba(255, 255, 255, 0.04); stroke: var(--inv); stroke-opacity: 0.6; stroke-width: 1.1; }
.on-dark .bm-isle { fill: none; stroke: rgba(255, 255, 255, 0.35); }
.on-dark .bm-dot { stroke: var(--black-950); }
.on-dark .bm-label { fill: var(--inv-soft); }

/* ============================ Home sections ============================ */

/* Guided discovery strip */
.guided-strip {
  border-block: 1px solid var(--c-line-soft);
  background: var(--c-surface);
  padding-block: var(--sp-6);
}
.guided-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.guided-strip p { margin: 0; font-weight: 600; color: var(--c-brand); font-size: var(--fs-500); }
.guided-strip .sub { display: block; font-weight: 400; color: var(--c-text-soft); font-size: var(--fs-300); }

/* Claims standout */
.claims-feature {
  background: var(--c-dark);
  color: var(--c-text-inverse);
  padding-block: clamp(4.5rem, 10vw, 7rem);
}
.claims-feature-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-8);
  align-items: start;
}
.claims-rule {
  width: 64px; height: 3px;
  background: var(--c-accent);
  border: 0;
  margin: 0 0 var(--sp-5);
}
.claims-feature h2 { color: var(--c-text-inverse); font-size: var(--fs-700); }
.claims-feature .lead { color: var(--c-text-inverse-soft); }

.crail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); position: relative; }
.crail::before {
  content: "";
  position: absolute;
  top: 26px; left: 4%; right: 4%;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}
.crail li { position: relative; padding-top: var(--sp-2); }
.crail .cnum {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--c-accent-soft);
  background: var(--c-dark);
  width: fit-content;
  padding-right: 10px;
  position: relative;
  margin-bottom: var(--sp-3);
}
.crail .cnum::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  transform: translateY(-50%);
}
.crail h3 { font-family: var(--font-sans); font-size: var(--fs-400); font-weight: 600; color: var(--inv); margin-bottom: var(--sp-2); }
.crail p { font-size: var(--fs-300); color: var(--c-text-inverse-soft); max-width: 22ch; margin: 0; }

.values-panel {
  background: var(--c-dark-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.values-panel h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-soft);
  margin-bottom: var(--sp-4);
}
.values-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.values-list li { display: flex; gap: var(--sp-3); align-items: flex-start; font-weight: 600; color: var(--inv); }
.values-list .glyph { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--red-300); }

/* Light-surface values panel variant */
.values-panel--light { background: var(--c-surface); border-color: var(--c-line-soft); }
.values-panel--light h3 { color: var(--c-accent-ink); }
.values-panel--light .values-list li { color: var(--c-brand); }
.values-panel--light .values-list .glyph { color: var(--c-accent-ink); }

@media (max-width: 899px) {
  .claims-feature-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .crail { grid-template-columns: 1fr; gap: var(--sp-5); padding-left: 14px; }
  .crail::before { top: 4px; bottom: 4px; left: 0; right: auto; width: 1px; height: auto; }
  .crail .cnum { padding-right: 0; padding-left: 0; }
  .crail .cnum::after { right: auto; left: -17px; }
  .crail p { max-width: 46ch; }
}

/* Nationwide (light) */
.home-nation {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--sp-8);
  align-items: center;
}
.home-nation-map { max-width: 300px; margin-inline: auto; width: 100%; }

/* Business feature */
.biz-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.biz-art-wrap { position: relative; }
.biz-art-wrap::before {
  content: "";
  position: absolute;
  top: -12px; left: -12px;
  width: 100%; height: 100%;
  border: 1px solid rgba(206, 17, 38, 0.6);
  border-radius: var(--r-md);
  pointer-events: none;
}
.biz-art {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
}
.stat-chips { display: flex; gap: var(--sp-6); margin: var(--sp-5) 0; }
.stat-chip .num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--c-brand);
  line-height: 1.1;
}
.stat-chip .lbl {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  margin-top: 2px;
}

@media (max-width: 899px) {
  .home-nation, .biz-feature { grid-template-columns: 1fr; gap: var(--sp-6); }
  .home-nation-map { max-width: 250px; }
  .biz-art-wrap { order: -1; }
  .biz-art { aspect-ratio: 16 / 10; }
}

/* Film player chrome, shared by the ICB in Motion cards. */
.play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 78px; height: 78px;
  border-radius: 50%;
  background: rgba(18, 18, 20, 0.55);
  border: 2px solid var(--inv);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
  z-index: 3;
}
.play-btn:hover {
  background: var(--c-accent);
  border-color: transparent;
}
.play-btn .glyph { width: 30px; height: 30px; margin-left: 4px; }
/* display:flex above outranks the user-agent [hidden] rule, so without
   this the button stays on screen after playback starts. */
.play-btn[hidden] { display: none; }
.video-note {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: rgba(6, 6, 7, 0.85);
  color: var(--c-text-inverse);
  border: 1px solid rgba(209, 33, 38, 0.55);
  border-radius: var(--r-sm);
  padding: 0.7rem 1.1rem;
  font-size: var(--fs-300);
  max-width: min(90%, 30rem);
  text-align: center;
}

/* ICB in Motion: the ICB films, side by side, each a real player. */
.film-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--sp-6);
}
.film { margin: 0; }
.film-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0B0B0C;
  box-shadow: var(--shadow-lg);
}
.film-poster,
.film-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.film-video { z-index: 1; background: #0B0B0C; }
/* display:block above would beat the UA [hidden] rule, so restate it. */
.film-video[hidden] { display: none; }
.film.is-playing .film-poster { opacity: 0; }
.film-lang {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inv);
  background: rgba(6, 6, 7, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 4px 10px;
  backdrop-filter: blur(4px);
}
.film.is-playing .film-lang { display: none; }
.film-cap { padding-top: var(--sp-4); }
.film-cap .eyebrow { margin-bottom: var(--sp-1); }
.film-cap h3 { font-size: var(--fs-600); margin-bottom: var(--sp-2); }
.film-cap p { font-size: var(--fs-300); color: var(--c-text-soft); margin: 0; }

/* Gallery: editorial mosaic. Auto-fill keeps the rhythm intact for any
   number of tiles, so branch photographs can be added without touching
   the layout. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  grid-auto-rows: 190px;
  grid-auto-flow: dense;
  gap: 20px;
}
.gallery-item {
  position: relative;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-ink-900);
}
.gallery-item:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }

/* Branch grid: a directory, so tiles stay even and only the lead
   photograph runs wide. Keeps its rhythm at any number of branches. */
.gallery--branches {
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  grid-auto-rows: 215px;
}
.gallery--branches .gallery-item { grid-column: span 1; grid-row: span 1; }
.gallery--branches .gallery-item:first-child { grid-column: span 2; }

.gallery-item .g-open {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  cursor: zoom-in;
}
.gallery-item .g-open img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}

.gallery-item .g-open:focus-visible { outline: 2px solid var(--c-cta); outline-offset: -3px; }
.gallery-item--light .g-open img { object-fit: contain; background: #FBF7F6; }
.gallery-item--light figcaption { background: linear-gradient(0deg, rgba(6, 6, 7, 0.35), transparent 75%); }

/* Lightbox */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: rgba(6, 6, 7, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
}
.lightbox {
  position: relative;
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
}
.lightbox img {
  max-width: 100%;
  max-height: calc(100dvh - 140px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
}
.lightbox figcaption {
  color: var(--c-text-inverse-soft);
  font-size: var(--fs-300);
  padding-top: var(--sp-3);
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: -8px;
  right: -8px;
  transform: translate(0, -100%);
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--inv);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 7, 0.5);
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.12); }
.lightbox-close .glyph { width: 20px; height: 20px; }

.gallery-item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 44px 16px 14px;
  background: linear-gradient(0deg, rgba(6, 6, 7, 0.72), transparent 78%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}
.gallery-item .g-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inv);
}
.gallery-item .g-sub {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--c-accent-soft);
}

/* Location plate: the designed tile a branch shows until its official
   photograph is supplied. Built from the verified branch record. */
.gallery-item--plate { background: var(--c-ink-900); }
.g-plate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(209, 33, 38, 0.30), transparent 62%),
    linear-gradient(180deg, #17171A, #0B0B0C);
  transition: background-color var(--t-fast) var(--ease);
}
.g-plate::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-sm);
  pointer-events: none;
}
.gallery-item--plate:hover .g-plate { background-color: rgba(209, 33, 38, 0.10); }
.g-plate:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -6px; }
.g-plate-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: var(--sp-5) var(--sp-4) 46px;
  text-align: center;
}
.g-plate-mark {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--c-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.g-plate-mark .glyph { width: 20px; height: 20px; }
.g-plate-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--inv);
  max-width: 15rem;
}
.g-plate-type {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-inverse-soft);
}
.gallery-item--plate figcaption { background: linear-gradient(0deg, rgba(6, 6, 7, 0.85), transparent 78%); }

@media (max-width: 639px) {
  .gallery { grid-auto-rows: 210px; }
  .gallery-item:nth-child(6n+1) { grid-column: span 1; }
  .gallery--branches .gallery-item:first-child { grid-column: span 1; }
}

/* Resources teaser */
.home-resources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
.home-resources .section-head { margin-bottom: 0; }

/* Contact band */
.contact-band {
  position: relative;
  background: var(--c-brand-deep);
  color: var(--c-text-inverse);
  padding-block: clamp(4rem, 9vw, 6rem);
  overflow: hidden;
}
.contact-band-art { position: absolute; inset: 0; opacity: 0.5; }
.contact-band-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.contact-band .shell { position: relative; z-index: 2; }
.contact-band-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sp-8);
  align-items: start;
}
.contact-band h2 { color: var(--c-text-inverse); }

.method-rows { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.method-row {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  text-decoration: none;
  color: var(--c-text-inverse);
  width: fit-content;
}
.method-row:hover .m-label { color: #fff; text-decoration: underline; }
.method-row:hover { color: var(--c-text-inverse); }
.method-icon {
  flex: none;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent-soft);
}
.method-icon .glyph { width: 20px; height: 20px; }
.m-label { display: block; font-weight: 600; color: var(--inv); }
.m-sub { display: block; font-size: 0.8125rem; color: var(--c-text-inverse-soft); }

.contact-band-card {
  background: var(--c-dark-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.contact-band-card h3 {
  color: var(--c-text-inverse);
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.contact-band-card address { font-style: normal; color: var(--c-text-inverse-soft); font-size: var(--fs-300); line-height: 1.8; margin-bottom: var(--sp-4); }
.contact-band-card address a { color: var(--inv); }

@media (max-width: 899px) {
  .contact-band-grid { grid-template-columns: 1fr; }
}

/* Future digital assistance placeholder */
.assist-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--fs-200);
  color: var(--c-text-inverse-soft);
  margin-top: var(--sp-6);
}
.assist-badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 8px rgba(206, 17, 38, 0.6);
  animation: assist-pulse 2.4s ease-in-out infinite;
}
@keyframes assist-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.assist-badge--light {
  border-color: var(--c-line);
  color: var(--c-text-soft);
}

/* ============================ Interior page hero ============================ */

.page-hero {
  position: relative;
  background: var(--c-dark);
  color: var(--c-text-inverse);
  overflow: hidden;
}
.page-hero-art.art-panel { position: absolute; inset: 0; }
/* Legibility scrim: sits above any real photo that fades into the hero slot. */
.page-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(6, 6, 7, 0.93) 0%, rgba(6, 6, 7, 0.88) 38%, rgba(6, 6, 7, 0.42) 72%, rgba(6, 6, 7, 0.3) 100%);
}
/* Photography in interior heroes sits to the right of the copy column. */
.page-hero-art .slot-photo { object-position: 78% center; }
@media (max-width: 639px) {
  .page-hero-art::after {
    background:
      linear-gradient(0deg, rgba(6, 6, 7, 0.95) 0%, rgba(6, 6, 7, 0.88) 52%, rgba(6, 6, 7, 0.62) 100%);
  }
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(3rem, 7vw, 5.25rem);
  max-width: 46rem;
}
.page-hero h1 { color: var(--c-text-inverse); }
.page-hero .hero-lead { margin-bottom: var(--sp-5); }
.page-hero .btn-row:last-child { margin-bottom: 0; }
.crumbs--dark, .crumbs--dark a { color: var(--c-text-inverse-soft); }
.crumbs--dark a:hover { color: var(--c-text-inverse); }
.crumbs--dark li + li::before { color: rgba(255,255,255,0.35); }

/* ============================ Guided discovery quiz ============================ */

.quiz-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.quiz-panel h2 { margin-bottom: var(--sp-5); }
.quiz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: var(--sp-3);
}
.quiz-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-3);
  min-height: 124px;
  padding: var(--sp-5) var(--sp-3);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  background: var(--c-bg);
  font-weight: 600;
  font-size: var(--fs-300);
  line-height: 1.35;
  text-align: center;
  color: var(--c-text);
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.quiz-option:hover { border-color: #CFCCCA; }
.quiz-option:hover .tile-chip { background: var(--red-050); border-color: var(--c-cta); color: var(--c-cta); }
.quiz-option[aria-pressed="true"] {
  border-color: var(--c-cta);
  background: var(--red-050);
  color: var(--c-brand);
  box-shadow: inset 0 0 0 1px var(--c-cta);
}
.quiz-option[aria-pressed="true"] .tile-chip {
  background: var(--c-cta);
  border-color: var(--c-cta);
  color: #fff;
}
.quiz-result { margin-top: 0; }
.quiz-result.has-result { margin-top: var(--sp-6); }
.quiz-result-inner {
  border-top: 1px solid var(--c-line-soft);
  padding-top: var(--sp-5);
}
/* The page scrolls to meet the answer (revealResult in js/render.js);
   this is the answer arriving, so the movement resolves into something
   rather than just stopping. */
@keyframes quiz-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.quiz-result.has-result .quiz-result-inner {
  animation: quiz-arrive var(--t-slow) var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
  .quiz-result.has-result .quiz-result-inner { animation: none; }
}
.quiz-result-inner h3 { margin-bottom: var(--sp-2); }
.quiz-result-inner .btn-row { margin-top: var(--sp-4); }

/* ============================ Product detail ============================ */

.prod-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--sp-8);
  align-items: start;
}
.prod-covers { margin-top: var(--sp-3); }
.prod-covers li { color: var(--c-brand); }
.prod-covers .glyph { color: var(--c-accent-ink); }
.prod-grid .concept-flag { margin-top: var(--sp-4); }
.prod-list-label {
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
  margin: var(--sp-6) 0 0;
}
.prod-list-label:first-of-type { margin-top: var(--sp-5); }

/* ANA Seguros pathways (Mexican Insurance). */
.ana-block {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  background: var(--c-tint);
}
.ana-block h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
  margin-bottom: var(--sp-4);
}
.ana-block .pathway-note { margin-top: var(--sp-3); }
.prod-side {
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.prod-side h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
  margin-bottom: var(--sp-4);
}
.gtk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.gtk-list li { border-left: 2px solid var(--c-accent); padding-left: var(--sp-4); }
.gtk-list p { margin: 0; font-size: var(--fs-300); color: var(--c-text-soft); }
.prod-claims { margin-top: var(--sp-6); }
.prod-claims p { font-size: var(--fs-300); color: var(--c-text-soft); }

/* Official campaign photography, shown at native scale (never stretched). */
.campaign-inset {
  margin: var(--sp-6) 0 0;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  background: #FFFFFF;
  padding: var(--sp-3);
}
.campaign-inset img {
  display: block;
  max-width: 100%;
  max-height: 300px;
  margin-inline: auto;
  border-radius: var(--r-sm);
}
.campaign-inset figcaption {
  font-size: var(--fs-200);
  color: var(--c-text-soft);
  text-align: center;
  padding-top: var(--sp-2);
}
/* Published product names inside a business segment card. */
.biz-items {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.biz-items li {
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--c-accent-ink);
  background: var(--c-tint);
  border: 1px solid var(--c-line-soft);
  border-radius: 999px;
  padding: 3px 10px;
}

.card-grid--pair { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }

@media (max-width: 899px) {
  .prod-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}
.prod-grid--single { grid-template-columns: 1fr; max-width: 56rem; }

/* ============================ Bands ============================ */

.band {
  position: relative;
  overflow: hidden;
  background: var(--c-dark);
  color: var(--c-text-inverse);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.band-art { position: absolute; inset: 0; }
.band-art svg { width: 100%; height: 100%; }
.band-inner { position: relative; max-width: 38rem; }
.band h2, .band h3 { color: var(--c-text-inverse); }
.band p { color: var(--c-text-inverse-soft); }
.band .btn-row { margin-top: var(--sp-5); }

/* ============================ Notices / badges ============================ */

.notice {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  background: var(--red-050);
  border: 1px solid var(--red-100);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-300);
  max-width: 46rem;
}
.notice strong { color: var(--c-accent-ink); }

.badge {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--c-tint);
  color: var(--c-brand);
  border: 1px solid var(--c-tint-deep);
}
.badge--gold { background: var(--red-100); color: var(--red-700); border-color: var(--red-100); }

.concept-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--c-text-soft);
  border: 1px dashed var(--c-line);
  border-radius: var(--r-sm);
  padding: 0.35rem 0.7rem;
}

/* ============================ Breadcrumb ============================ */

.crumbs { font-size: var(--fs-300); color: var(--c-text-soft); margin-bottom: var(--sp-4); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; padding: 0; }
/* Crumb links are grown to a 44px touch target and centre their text in
   it. The current page is not a link, so without this its text would sit
   at the top of the same row and read as misaligned against the rest. */
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--c-line); }
.crumbs a { color: var(--c-text-soft); text-decoration: none; }
.crumbs a:hover { color: var(--c-cta); text-decoration: underline; }

/* ============================ Steps ============================ */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.step {
  display: flex;
  gap: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.step-num {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--c-accent);
  color: var(--c-accent-ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step h3 { font-family: var(--font-sans); font-size: var(--fs-400); font-weight: 700; margin-bottom: var(--sp-1); }
.step p { color: var(--c-text-soft); font-size: var(--fs-300); margin: 0; }

/* ============================ Chips / filters ============================ */

.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  min-height: 40px;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-text);
  font-weight: 600;
  font-size: var(--fs-300);
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--c-brand); color: var(--c-brand); }
.chip[aria-pressed="true"] {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}

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

.field { margin-bottom: var(--sp-5); }
.field label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-300);
  margin-bottom: var(--sp-2);
  color: var(--c-brand);
}
.field .help {
  font-size: var(--fs-200);
  color: var(--c-text-soft);
  margin-top: var(--sp-2);
}
.input, select.input, textarea.input {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
textarea.input { min-height: 120px; resize: vertical; }
.input:focus-visible {
  outline: none;
  border-color: var(--c-cta);
  box-shadow: 0 0 0 3px var(--red-100);
}
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235C5C63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 16px;
  padding-right: 2.5rem;
}

/* ============================ Claims page ============================ */

.values-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  list-style: none;
  padding: 0;
}
.values-strip li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-weight: 600;
  font-size: var(--fs-300);
}
.values-strip .glyph { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--c-accent-soft); }

.pathway-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
  gap: var(--sp-5);
}
.pathway {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  scroll-margin-top: 96px;
  transition: box-shadow var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease);
}
.pathway.is-highlight { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--red-100); }
.pathway-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.pathway-head h3 { margin: 0; font-size: var(--fs-500); }
.pathway-glyph {
  flex: none;
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  background: var(--c-tint);
  color: var(--c-brand);
  display: flex; align-items: center; justify-content: center;
}
.pathway-glyph .glyph { width: 22px; height: 22px; }
.pathway-lead { color: var(--c-text-soft); font-size: var(--fs-300); margin-bottom: var(--sp-4); }
.pathway-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; }
.pathway-note { font-size: var(--fs-200); color: var(--c-text-soft); margin-top: var(--sp-3); }

/* ============================ Locations ============================ */

.loc-tools { margin-bottom: var(--sp-6); }
.loc-tools-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.loc-count { font-size: var(--fs-300); color: var(--c-text-soft); margin: 0; }
.method-icon--wa { border: none; }
.method-icon--wa .wa-roundel { width: 40px; height: 40px; }
.method-row { text-align: left; }
.loc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--sp-7);
  align-items: start;
}
.loc-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.loc-card {
  min-width: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.loc-card.is-highlight { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--red-100); }
.loc-head { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; margin-bottom: var(--sp-2); }
.loc-head h3 { margin: 0; font-size: var(--fs-500); }
.loc-addr { color: var(--c-text-soft); font-size: var(--fs-300); margin-bottom: var(--sp-3); }
.loc-note { color: var(--c-text-soft); font-size: var(--fs-300); font-style: italic; margin-bottom: var(--sp-3); }
.loc-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.loc-map-panel {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.loc-map-panel h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
  margin-bottom: var(--sp-4);
}

@media (max-width: 899px) {
  .loc-layout { grid-template-columns: 1fr; }
  .loc-map-panel { position: static; order: -1; max-width: 320px; margin-inline: auto; width: 100%; }
}

/* Shared action rows (locations, contact, notices) */
.msg-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); align-items: flex-start; }
.msg-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--c-tint-deep);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-cta);
  font-weight: 600;
  font-size: var(--fs-300);
  text-decoration: none;
  max-width: 100%;
}
.msg-action:hover { background: var(--red-050); }
.msg-action .glyph { width: 16px; height: 16px; flex: none; }
.msg-action span { overflow-wrap: anywhere; }
.loc-actions .msg-action { margin-top: 0; }
.loc-actions { align-items: center; }
.loc-actions, .pathway-actions { flex-direction: row; }

/* ============================ About ============================ */

.milestones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); }
.milestone { display: grid; grid-template-columns: 130px 1fr; gap: var(--sp-5); align-items: start; }
.milestone-year {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-700);
  color: var(--c-accent-ink);
  line-height: 1;
}
.milestone-body { border-left: 2px solid var(--c-accent); padding-left: var(--sp-5); }
.milestone-body h3 { margin-bottom: var(--sp-2); }
.milestone-body p { color: var(--c-text-soft); margin: 0; }

@media (max-width: 639px) {
  .milestone { grid-template-columns: 1fr; gap: var(--sp-2); }
  .milestone-body { border-left: none; padding-left: 0; border-top: 2px solid var(--c-accent); padding-top: var(--sp-3); }
}

/* ============================ Resource Centre ============================ */

.acc-list { display: grid; gap: var(--sp-3); }
.acc {
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.acc summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--c-brand);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: var(--c-tint); }
.acc summary .badge { margin-left: auto; flex: none; }
.acc-chevron { flex: none; width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); color: var(--c-text-soft); }
.acc[open] .acc-chevron { transform: rotate(90deg); }
.acc[open] summary { color: var(--c-cta); }
.acc-body { padding: 0 var(--sp-5) var(--sp-5); }
.acc-body p { color: var(--c-text-soft); font-size: var(--fs-300); }

.official-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: var(--sp-4);
}
/* Two cards in an auto-fill grid leave a hole where a third would sit.
   auto-fit collapses the empty track instead, so a short row spreads
   across the width. Rows of three or more are unaffected. */
.official-grid--pair { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.official-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  text-decoration: none;
  color: var(--c-text);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.official-card:hover { box-shadow: var(--shadow-lg); border-color: #CFCCCA; color: var(--c-text); }
.official-card strong { color: var(--c-cta); display: inline-flex; align-items: center; gap: 0.4rem; }
.official-card span { font-size: var(--fs-300); color: var(--c-text-soft); }
.official-card .official-glyph {
  flex: none;
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  background: var(--c-tint);
  color: var(--c-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-1);
}
.official-card .official-glyph .glyph { width: 21px; height: 21px; }

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

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: var(--sp-7);
  align-items: start;
}
.contact-rail {
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
}
.contact-rail h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
}
.contact-rail address { font-style: normal; color: var(--c-text-soft); font-size: var(--fs-300); line-height: 1.7; margin-bottom: var(--sp-4); }
.contact-rail .msg-actions { margin-top: var(--sp-2); }

.contact-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.contact-progress {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0 0 var(--sp-4);
  border-bottom: 1px solid var(--c-line-soft);
  font-size: var(--fs-300);
  color: var(--c-text-soft);
}
.contact-progress li { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; }
.contact-progress .p-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--c-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-200);
}
.contact-progress li[aria-current="step"] { color: var(--c-brand); }
.contact-progress li[aria-current="step"] .p-num { border-color: var(--c-accent); color: var(--c-accent-ink); }
.contact-progress li.is-done .p-num { background: var(--c-tint); border-color: var(--c-tint-deep); color: var(--c-brand); }

.topic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.topic-option {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  background: var(--c-bg);
  text-align: left;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.topic-option:hover { border-color: #CFCCCA; }
.topic-option strong { color: var(--c-brand); }
.topic-option span { font-size: var(--fs-300); color: var(--c-text-soft); }

.form-nav { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.review-list { margin: 0 0 var(--sp-4); }
.review-list div { padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line-soft); }
.review-list dt { font-size: var(--fs-200); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-text-soft); }
.review-list dd { margin: 0.15rem 0 0; font-weight: 600; color: var(--c-brand); }

.demo-notice {
  background: var(--c-tint);
  border: 1px solid var(--c-tint-deep);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.demo-notice h3 { margin-bottom: var(--sp-2); }
.demo-notice p { color: var(--c-text-soft); font-size: var(--fs-300); }
.demo-notice .msg-actions { margin-top: var(--sp-3); }

.safety-note {
  display: flex;
  gap: var(--sp-3);
  background: var(--red-050);
  border: 1px solid var(--red-100);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--red-700);
  margin-bottom: var(--sp-5);
}
.safety-note .glyph { flex: none; width: 20px; height: 20px; margin-top: 2px; }

@media (max-width: 899px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-rail { position: static; order: 2; }
  .topic-grid { grid-template-columns: 1fr; }
}

/* ============================ Reveal motion ============================ */

.rv {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  .rv { opacity: 1; transform: none; }
  .assist-badge .dot { animation: none; opacity: 1; }
  .hero-media img, .hero-media video,
  .hero-slide.is-active .hero-media img,
  .hero-slide.is-active .hero-media video { transform: none; transition: none; }
  .hero-progress button[aria-current="true"] .bar::after { animation: none; transform: scaleX(1); }
}

/* ============================ Mobile quick bar ============================ */

/* Back to top. Hidden until the reader is a screen or so down, and
   lifted clear of the mobile quick bar. */
.to-top {
  position: fixed;
  left: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 90;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--c-cta);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--inv);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(10, 10, 11, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              visibility 0s linear var(--t-fast);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.to-top:hover { background: var(--red-700); }
.to-top:focus-visible { outline: 2px solid var(--c-cta); outline-offset: 3px; }
.to-top .glyph { width: 21px; height: 21px; }
/* The quick bar owns the bottom edge below 720px, so ride above it. */
@media (max-width: 719px) {
  .to-top { bottom: calc(var(--quickbar-h) + 14px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity var(--t-fast) var(--ease), visibility 0s; transform: none; }
  .to-top.is-visible { transform: none; }
}

.quick-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 80;
  display: none;
  background: var(--c-surface);
  border-top: 1px solid var(--c-line-soft);
  box-shadow: 0 -6px 24px rgba(10, 10, 11, 0.08);
  padding-bottom: env(safe-area-inset-bottom);
}
.quick-bar ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
.quick-bar a, .quick-bar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  padding: 0.55rem 0.25rem;
  min-height: var(--quickbar-h);
  color: var(--c-text-soft);
  font-size: 0.68rem;
  font-weight: 600;
  text-decoration: none;
}
.quick-bar .glyph { width: 22px; height: 22px; color: var(--c-brand); }
.quick-bar a:hover, .quick-bar button:hover { color: var(--c-brand); background: var(--c-tint); }

/* ============================ WhatsApp ICB directory ============================ */

.wa-overlay {
  position: fixed;
  inset: 0;
  z-index: 170;
  background: rgba(6, 6, 7, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0px, 2vw, 24px);
}
.wa-dialog {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sheet);
  width: min(560px, 100%);
  max-height: min(760px, 100dvh - 2 * clamp(0px, 2vw, 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 639px) {
  .wa-overlay { padding: 0; align-items: flex-end; }
  .wa-dialog {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    max-height: 92dvh;
  }
}
.wa-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-line-soft);
  background: var(--c-surface);
  flex: none;
}
.wa-head-icon { width: 40px; height: 40px; flex: none; }
.wa-head-text { flex: 1; line-height: 1.3; min-width: 0; }
.wa-head-text strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--c-brand); }
.wa-head-text span { font-size: var(--fs-300); color: var(--c-text-soft); }
.wa-close {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-soft);
}
.wa-close:hover { background: var(--c-tint); color: var(--c-brand); }
.wa-close .glyph { width: 20px; height: 20px; }

.wa-body {
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}
.wa-group { padding-top: var(--sp-4); }
.wa-group h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
  margin-bottom: var(--sp-2);
}
.wa-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  margin: 0 calc(-1 * var(--sp-3));
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-text);
  min-height: 60px;
}
.wa-row:hover, .wa-row:focus-visible { background: var(--c-tint); color: var(--c-text); }
.wa-row .wa-roundel { width: 38px; height: 38px; flex: none; }
.wa-row-main { flex: 1; min-width: 0; line-height: 1.3; }
.wa-row-name { display: block; font-weight: 600; color: var(--c-brand); }
.wa-row-num { display: block; font-size: var(--fs-300); color: var(--c-text-soft); font-variant-numeric: tabular-nums; }
.wa-row-cta {
  flex: none;
  font-size: var(--fs-200);
  font-weight: 700;
  color: #1DA851;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
@media (max-width: 419px) {
  .wa-row-cta { display: none; }
}

/* WhatsApp accents outside the directory */
.msg-action--wa .glyph, .msg-action--wa svg { width: 18px; height: 18px; }
.wa-roundel { display: block; }

/* ============================ Call ICB directory ============================ */

.call-dialog {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sheet);
  width: min(520px, 100%);
  max-height: min(760px, 100dvh - 2 * clamp(0px, 2vw, 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 639px) {
  .call-overlay { padding: 0; align-items: flex-end; }
  .call-dialog { border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92dvh; }
}
.call-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-line-soft);
  flex: none;
}
.call-head-icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.call-head-icon .glyph { width: 20px; height: 20px; }
.call-head-text { flex: 1; line-height: 1.3; min-width: 0; }
.call-head-text strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--c-brand); }
.call-head-text span { font-size: var(--fs-300); color: var(--c-text-soft); }

.call-body {
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}
.call-group { padding-top: var(--sp-4); }
.call-group h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
  margin-bottom: var(--sp-1);
}
.call-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  text-decoration: none;
  color: var(--c-text);
  min-height: 60px;
  border-bottom: 1px solid var(--c-accent);
}
.call-row:hover, .call-row:focus-visible { color: var(--c-cta); }
.call-row-main { flex: 1; min-width: 0; line-height: 1.35; }
.call-row-name { display: block; font-weight: 600; color: var(--c-brand); }
.call-row:hover .call-row-name { color: var(--c-cta); }
.call-row-num { display: block; font-size: var(--fs-300); color: var(--c-text-soft); font-variant-numeric: tabular-nums; }
/* Tells a landline from a mobile where a location publishes both. */
.call-row-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  background: var(--c-tint);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: 1px;
  white-space: nowrap;
}
.call-group--via .call-row-name { color: var(--c-text); }
.call-row-icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  color: var(--c-cta);
  display: flex;
  align-items: center;
  justify-content: center;
}
.call-row:hover .call-row-icon { background: var(--red-050); border-color: var(--c-cta); }
.call-row-icon .glyph { width: 18px; height: 18px; }
/* The Corporate Office line offered where a branch publishes none of its
   own. Quieter than a direct branch line so the two never look alike. */
.msg-action--corp {
  color: var(--c-text-soft);
  border-style: dashed;
}
.msg-action--corp .glyph { opacity: 0.7; }

.call-note {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line-soft);
}
.call-note h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
  margin-bottom: var(--sp-2);
}
.call-note p { font-size: var(--fs-300); color: var(--c-text-soft); margin-bottom: var(--sp-3); }
.call-note-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ============================ Responsive chrome ============================ */

@media (max-width: 1023px) {
  .site-nav { display: none; }
  .menu-toggle { display: flex; }
  .btn-cover { display: none; }
}

@media (min-width: 1024px) {
  .mobile-menu { display: none; }
}

@media (max-width: 719px) {
  :root { --header-h: 60px; }
  .quick-bar { display: block; }
  body { padding-bottom: calc(var(--quickbar-h) + env(safe-area-inset-bottom)); }
  body.sheet-open .quick-bar { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}

@media (min-width: 720px) and (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 479px) {
  .brand-lines { display: none; }
  .brand-sep { display: none; }
  .brand-logo { height: 40px; }
}


/* ======================= Pointer and touch behaviour =======================

   Two things make a control need a second tap on a phone.

   1. A hover style that MOVES the element. Touch browsers apply :hover on
      the first tap; if that shifts the element, it slides out from under
      the finger between touchstart and touchend and the click is thrown
      away. Every movement-based hover is therefore neutralised wherever
      hover is not a real capability. Colour and shadow changes are
      harmless and stay.

   2. The legacy tap delay, where the browser waits to see whether a tap
      is the start of a double-tap-to-zoom. touch-action: manipulation
      opts every control out of that wait.                              */

/* Lift on hover, but only where hovering is a real capability. On touch
   these rules are never applied, so nothing can shift out from under a
   finger mid-tap. */
@media (hover: hover) and (pointer: fine) {
  .action-tile:hover,
  .card:hover,
  .card:focus-within,
  .quiz-option:hover,
  .official-card:hover,
  .topic-option:hover { transform: translateY(-2px); }
  .gallery-item:hover .g-open img { transform: scale(1.03); }
  .play-btn:hover { transform: translate(-50%, -50%) scale(1.03); }
}

a,
button,
summary,
label,
select,
[role="button"],
.action-tile,
.quiz-option,
.topic-option,
.official-card,
.msg-action,
.chip,
.g-open,
.call-row,
.wa-row,
.method-row {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(209, 33, 38, 0.14);
}

/* Hit areas. Text links inside cards and the footer were as short as
   17px, which is fine to read and awkward to hit. The padding grows the
   target without moving the text off its baseline grid. */
.card-links a,
.footer-col a,
.footer-brand address a,
.crumbs a,
.acc summary {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}
@media (pointer: coarse), (max-width: 719px) {
  .card-links a,
  .footer-col a,
  .footer-brand address a,
  .crumbs a { min-height: 44px; }
  .footer-col li { margin-bottom: 0; }
}

/* A pressed state every input type can see, so a tap always registers
   visibly even before the next view paints. */
.btn:active,
.action-tile:active,
.quiz-option:active,
.topic-option:active,
.official-card:active,
.msg-action:active,
.chip:active { filter: brightness(0.96); }