/* Heathershaw's homepage — tokens: docs/brand-tokens.css */

@import url("../../docs/brand-tokens.css");

/* ─── Reset ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Platform convention: suppress the default grey tap-flash on iOS/Android so
     our own :hover/:active states are what users see. */
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  /* html, not body, is the actual scrolling root in most browsers - body's
     overflow-x alone doesn't stop the page growing a horizontal scrollbar
     from elements that intentionally bleed off-edge (e.g. the #act-1 leaf
     watermark). Using "clip" rather than "hidden" here matters: setting
     overflow-x to anything but "visible" forces the UA to also resolve
     overflow-y to "auto" (per spec), which turns <html> into its own
     scroll container and breaks position:sticky on descendants like the
     site header. "clip" avoids that pairing while still trimming the
     bleed. */
  overflow-x: clip;
  /* Extra safety net alongside the per-carousel rule below: stops any
     horizontal swipe (e.g. on the empathy/location card carousels) from
     ever chaining into a page-wide sideways pan once it hits a scroll
     boundary. */
  overscroll-behavior-x: contain;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Safety net for decorative elements (e.g. the #act-1 leaf watermark) that
     intentionally bleed past their section's edge — stops that bleed from
     ever growing the page into a horizontal scrollbar. "clip" instead of
     "hidden" for the same sticky-header reason as <html> above. */
  overflow-x: clip;
}

a,
button,
.btn,
[role="button"] {
  /* Removes the tap delay some mobile browsers add while waiting to see if a
     second tap is coming (double-tap-to-zoom detection). */
  touch-action: manipulation;
}

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

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

/* ─── Utilities ─────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: var(--pad);
  top: -100px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
}

.skip-link:focus {
  top: 12px;
}

.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;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ─── Type scale ─────────────────────────────────────────── */
h1,
h2,
h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

h1 {
  font-size: clamp(44px, 7vw, 96px);
  font-weight: 700;
}

h2 {
  font-size: clamp(22px, 3.2vw, 44px);
  font-weight: 700;
}

h3 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
}

h1 em,
h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--color-secondary);
}

p.lede {
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 46ch;
}

/* ─── Eyebrow ────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  flex-shrink: 0;
  background: var(--color-secondary);
}

.eyebrow--center {
  display: flex;
  justify-content: center;
}

.eyebrow--center::before {
  display: none;
}

/* ─── Section head ───────────────────────────────────────── */
.sec-head {
  max-width: 100%;
  margin-bottom: var(--space-6);
}

.sec-head h2 {
  max-width: 22ch;
}

.services-section .sec-head h2 {
  max-width: none;
  white-space: nowrap;
  opacity: 1 !important;
  font-size: clamp(26px, 3.8vw, 51px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.services-section .sec-head h2 em {
  font-weight: 700;
  color: var(--color-primary) !important;
}

@media (max-width: 767px) {
  .services-section .sec-head h2 {
    white-space: normal;
  }
}

.sec-head .eyebrow {
  margin-bottom: var(--space-4);
}

.sec-head p {
  /* Matches the shared subheading template (.hiw-subheading,
     .nationwide-subheading, etc.) exactly - same font-size, line-height and
     top spacing, so every section intro paragraph on the page (classed or
     not) reads at the same size, everywhere, on every breakpoint. */
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  font-weight: 400;
  max-width: 640px;
}

/* ─── Buttons ────────────────────────────────────────────── */

/* Button system tokens */
:root {
  --color-gold: #cfa547;
  --btn-height: 48px;
  --btn-radius: 8px;
  --btn-pad-x: 24px;
  --btn-font-size: 11.5px;
  --btn-letter-spacing: 0.06em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-height);
  padding: 0 var(--btn-pad-x);
  font-family: var(--font-sans);
  font-size: var(--btn-font-size);
  font-weight: 600;
  letter-spacing: var(--btn-letter-spacing);
  text-transform: uppercase;
  border-radius: var(--btn-radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

/* Primary — navy fill */
.btn--primary {
  background: #031F7F;
  color: #ffffff;
  border-color: #031F7F;
}

.btn--primary:hover {
  background: #0a2fa3;
  border-color: #0a2fa3;
}

/* Secondary — transparent outline */
.btn--secondary {
  background: transparent;
  color: #031F7F;
  border-color: #031F7F;
}

.btn--secondary:hover {
  background: color-mix(in srgb, #031F7F 10%, transparent);
}

/* Context modifier: secondary on dark/navy backgrounds */
.btn--secondary.btn--on-dark {
  color: #ffffff;
  border-color: #ffffff;
}

.btn--secondary.btn--on-dark:hover {
  background: color-mix(in srgb, #ffffff 12%, transparent);
}

/* Size modifier: compact nav buttons */
.btn--nav {
  min-height: 0;
  padding: 4px 14px;
  font-size: 10.5px;
  border-radius: 6px;
}

/* Nav action group — desktop: pushed to far right */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-actions--desktop {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

/* Drawer version hidden on desktop */
.nav-actions--drawer {
  display: none;
}

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.02em;
  opacity: 0.8;
  transition: opacity 0.15s;
  padding-right: 4px;
}

.nav-phone:hover {
  opacity: 1;
}

.btn .ar {
  transition: transform 0.25s;
}

.btn:hover .ar {
  transform: translateX(4px);
}

/* ─── SplitText ──────────────────────────────────────────── */
.split-word,
.split-char,
.split-line {
  display: inline-block;
  will-change: transform, opacity;
}

/* ─── Announcement ───────────────────────────────────────── */
.site-top {
  position: sticky;
  top: 0;
  z-index: 100;
  transition:
    top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-top.is-scrolled {
  top: 16px;
  margin: 0 clamp(12px, 3vw, 40px);
  border-radius: 14px;
  box-shadow:
    0 4px 28px color-mix(in srgb, var(--color-primary) 12%, transparent),
    0 1px 0 color-mix(in srgb, var(--color-primary) 8%, transparent) inset;
}

/* Round child edges to match pill — no overflow:hidden needed */
.site-top.is-scrolled .announce {
  border-radius: 14px 14px 0 0;
}

.site-top.is-scrolled .site-nav {
  border-radius: 0 0 14px 14px;
}

/* When drawer is open: square off nav bottom, round drawer bottom instead */
.site-top.is-scrolled .site-nav.is-open {
  border-radius: 0;
}

.site-top.is-scrolled .site-nav.is-open .nav-drawer,
.site-top.is-scrolled .site-nav.is-open #nav-drawer {
  border-radius: 0 0 14px 14px;
  border-bottom: none;
}

/* ─── Announcement bar ──────────────────────────────────── */
.announce {
  background: var(--color-primary);
  color: #fff;
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
  position: relative;
  z-index: 1;
}

.announce__link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  height: 100%;
  min-width: 0;
}

.announce__link:hover {
  opacity: 0.9;
}

.announce__pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F8CF40;
  flex-shrink: 0;
  animation: announce-pulse 1.8s ease-out infinite;
}

@keyframes announce-pulse {
  0%   { opacity: 1;   transform: scale(1); }
  70%  { opacity: 0;   transform: scale(0.4); }
  100% { opacity: 0;   transform: scale(0.4); }
}

@media (prefers-reduced-motion: reduce) {
  .announce__pulse { animation: none; }
}

.announce__msg-wrap {
  overflow: hidden;
  white-space: nowrap;
}

.announce__msg {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-block;
}

.announce__cta {
  font-weight: 700;
  opacity: 0.9;
}

.announce__dismiss {
  position: absolute;
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0.7;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.announce__dismiss:hover {
  opacity: 1;
}

/* Mobile: ticker scroll */
@media (max-width: 767px) {
  .announce__msg {
    animation: announce-ticker 50s linear infinite;
  }

  @keyframes announce-ticker {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .announce__msg { animation: none; }
  }
}

@media (max-width: 767px) {
  .nav-actions--drawer .btn {
    padding: 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }
  .hero-actions .btn {
    flex: 1;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    padding: 0 12px;
    min-height: 44px;
    letter-spacing: 0.06em;
  }
  .hero-actions {
    flex-wrap: nowrap;
  }
}

.announce[hidden] {
  display: none;
}

/* ─── Nav phone strip ───────────────────────────────────── */
.nav-phone-strip {
  background: color-mix(in srgb, var(--color-primary) 6%, white);
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 5px var(--pad);
}

.nav-phone-strip__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  letter-spacing: 0.03em;
  opacity: 0.75;
  transition: opacity 0.15s;
}

.nav-phone-strip__link:hover {
  opacity: 1;
}

/* ─── Nav ────────────────────────────────────────────────── */

/* Utility bar — slim dark strip above the main nav */
.nav-utility-bar {
  background: var(--color-primary);
  color: var(--color-on-primary);
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
  overflow: hidden;
  max-height: 44px;
}

.nav-utility-bar.is-hidden {
  max-height: 0;
  opacity: 0;
}

.nav-utility-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.nav-utility-tagline {
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.65;
}

.nav-utility-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-primary);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.18s, color 0.18s;
}

.nav-utility-link:hover {
  opacity: 1;
  color: var(--color-accent);
}

/* Main nav bar */
.site-nav {
  position: relative;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  transition:
    margin 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Floating island — utility bar slides away, main bar floats */
.site-nav.is-scrolled {
  border-bottom: none;
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

.nav-in {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 56px;
  max-width: none;
  padding: 0 clamp(24px, 4vw, 80px);
}

.nav-in > a:first-child {
  flex-shrink: 0;
}

.nav-in #nav-drawer {
  flex: 1;
  display: none;
  justify-content: center;
}

/* Show inline on desktop */
@media (min-width: 1101px) {
  .nav-in .nav-drawer,
  .nav-in #nav-drawer {
    display: flex;
  }

  /* Drawer-only buttons are not needed on desktop */
  .nav-actions--drawer {
    display: none;
  }
}

.nav-actions--desktop {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.logo-img {
  height: 48px;
  width: auto;
  aspect-ratio: 900 / 210;
  display: block;
  flex-shrink: 0;
  transition: height 0.2s ease;
}

.site-nav.is-scrolled .logo-img {
  height: 36px;
}

/* Spacer — pushes navlinks to centre, CTA to right */

.navlinks {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  font-size: clamp(10px, 1vw, 11.5px);
  font-weight: 600;
  list-style: none;
  flex-wrap: nowrap;
}

.navlinks a {
  color: var(--color-primary);
  opacity: 1;
  padding: 8px 0;
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  position: relative;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.navlinks a:hover {
  opacity: 1;
  text-shadow: 0 0 0.4px currentColor, 0 0 0.4px currentColor;
}

.navlinks a::after {
  content: none;
}

.navlinks a:hover::after {
  content: none;
}

/* Desktop-only: navlinks stretches full height of the bar; items fill that height as flex rows */
@media (min-width: 1101px) {
  .navlinks {
    align-self: stretch;
    align-items: center;
  }

  .navlinks > li {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .has-mega {
    display: flex;
    align-items: center;
    height: 100%;
  }

  /* All mega panels: full nav width, flush underside.
     Uses .navlinks > .has-mega to beat the global .has-mega { position: relative } at line ~1013 */
  .navlinks > .has-mega {
    position: static;
  }

  .navlinks > .has-mega .mega {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    min-width: unset;
    border-radius: 0 0 8px 8px;
  }
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
  height: 18px;
}

.burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.2s ease, width 0.25s ease;
}

/* Animate to × when open */
.site-nav.is-open .burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav.is-open .burger span:nth-child(2) {
  opacity: 0;
  width: 0;
}
.site-nav.is-open .burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1100px) {
  .nav-utility-bar {
    display: none;
  }

  /* MENU+ toggle button */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    order: 2;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 0;
  }

  /* Show burger icon, hide MENU+ text */
  .burger { display: flex; }
  .nav-menu-label { display: none; }

  /* Nav panel */
  nav {
    order: 3;
    width: 100%;
  }

  /* Single drawer panel */
  .nav-drawer,
  #nav-drawer {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-bottom: 2px solid var(--color-primary);
    z-index: 999;
    max-height: calc(100svh - 91px);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  .site-nav.is-open .nav-drawer,
  .site-nav.is-open #nav-drawer {
    display: block;
  }

  /* CTA buttons at bottom — full width, stacked */
  .nav-actions--drawer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 24px;
    margin: 0;
  }
  .nav-actions--drawer .btn {
    width: 100%;
    justify-content: center;
    padding: 14px !important;
    margin: 0 !important;
    font-size: 12px;
    font-weight: 600;
  }

  /* Desktop buttons hidden */
  .nav-actions--desktop {
    display: none;
  }

  /* Nav links list — match font size of the CTA buttons below */
  .navlinks {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
    align-items: stretch;
    font-size: 12px;
  }

  .nav-in {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
  }

  /* ── Accordion nav items ───────────────────────── */

  .navlinks li,
  .navlinks li.has-mega {
    border: none !important;
    border-bottom: 0.5px solid #e5e7eb !important;
    margin: 0 !important;
  }

  .navlinks li.has-mega:last-child {
    border-bottom: none !important;
  }

  /* Remove borders from vaccination and location sub-items */
  .navlinks li.has-mega .mega li {
    border: none !important;
    border-bottom: none !important;
  }

  /* Main nav links — uniform padding, no margin, consistent row height */
  .navlinks > li > a.nav-top {
    display: flex;
    align-items: center;
    padding: 16px 24px !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* Vaccinations/Locations accordion row — same padding as plain nav items so row
     heights match exactly. The arrow is positioned absolutely (see below) so its
     own box never affects this row's height. */
  .mob-acc-row {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 24px !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* Top-level label — same size/weight as every other nav item, trigger only, not a navigating link.
     min-height is reset because the base .navlinks a rule sets a 44px tap-target min-height that
     would otherwise make this row taller than the plain (non-accordion) nav items. */
  .mob-acc-row .nav-top {
    min-height: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    pointer-events: none;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Expand chevron — the single expand/collapse indicator for this row.
     Positioned out of the flex flow so its tap target can be a full 44px
     without stretching the row taller than the plain nav links. */
  .mob-acc-arrow {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    width: var(--tap-min);
    height: var(--tap-min);
    padding: 0;
    margin: 0;
    color: var(--color-primary);
    line-height: 1;
    transition: transform 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .has-mega.mob-open .mob-acc-arrow {
    transform: translateY(-50%) rotate(180deg);
  }

  /* No extra spacing on vaccinations, services, or locations items */
  #nav-compounding,
  #nav-vaccinations,
  #nav-services,
  #nav-locations {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Hide the ▾ triangle — chevron button is the only indicator */
  #nav-compounding .nav-top::after,
  #nav-vaccinations .nav-top::after,
  #nav-services .nav-top::after,
  #nav-locations .nav-top::after {
    display: none !important;
  }

  /* Vaccinations / Services sub-menu container */
  .mega--cmpmenu .mega-mobile,
  .mega--vaccinations .mega-mobile,
  .mega--services .mega-mobile {
    padding: 0 !important;
    margin: 0 !important;
  }

  .mega-vac-mob-list {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
  }

  .mega-vac-mob-list li {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  /* Each sub-menu item row */
  .mega-vac-mob-list li a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 24px !important;
    margin: 0 !important;
    text-align: left;
    text-decoration: none;
    border: none !important;
  }

  .mega-vac-mob-icon {
    display: none !important;
    flex-shrink: 0;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px;
    background: #edf3fc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin: 0 !important;
    padding: 0 !important;
  }

  .mega-vac-mob-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mega-vac-mob-title {
    font-size: 13px;
    font-weight: 500;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mega-vac-mob-desc {
    display: none;
  }

  .mega-vac-mob-list li.mega-vac-mob-heading {
    padding: 14px 24px 4px !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(3,31,127,0.45);
  }

  /* Locations sub-menu container */
  .mega--locations .mega-mobile {
    padding: 0 !important;
    margin: 0 !important;
  }

  .mega-loc-mob-list {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
  }

  .mega-loc-mob-list li {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  .mega-loc-mob-list li a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 24px !important;
    margin: 0 !important;
    text-decoration: none;
    border: none !important;
  }

  .mega-loc-mob-icon {
    display: none !important;
    flex-shrink: 0;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px;
    background: #eef1f8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin: 0 !important;
    padding: 0 !important;
  }

  .mega-loc-mob-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mega-loc-mob-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-primary);
    margin: 0 !important;
    padding: 0 !important;
  }

  .mega-loc-mob-addr {
    font-size: 11px;
    color: rgba(3,31,127,0.5);
    margin: 0 !important;
    padding: 0 !important;
  }

  .mega-loc-mob-badge {
    font-size: 10px;
    font-weight: 500;
    color: #2d6b45;
    background: rgba(45,140,85,0.1);
    border-radius: 20px;
    padding: 1px 6px;
    display: inline-block;
    align-self: flex-start;
    margin-top: 2px !important;
  }

  .mega-loc-mob-all-wrap {
    padding: 8px 24px 4px !important;
  }

  .mega-loc-mob-all {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* Logo size on mobile */
  .logo-img {
    height: 34px;
  }

  /* Sub-menu panel — hidden by default on mobile */
  .mega {
    display: none !important;
  }

  .has-mega.mob-open .mega {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* Simplify mega layout for mobile */
  .has-mega.mob-open .mega-inner {
    display: block;
    padding: 0;
  }

  .has-mega.mob-open .mega-visual {
    display: none;
  }

  .has-mega.mob-open .mega-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 0 12px 20px;
    list-style: none;
    margin: 0;
  }

  /* Override all desktop mega-item styles */
  .has-mega.mob-open .mega-items li {
    border: none;
  }

  .has-mega.mob-open .mega-items li:first-child {
    border: none;
  }

  .has-mega.mob-open .mega-items a,
  .has-mega.mob-open .mega-items li a {
    display: block;
    padding: 4px 0;
    color: var(--color-primary) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    opacity: 0.65;
    text-decoration: none;
    border: none !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .has-mega.mob-open .mega-items a:hover,
  .has-mega.mob-open .mega-items li a:hover {
    opacity: 1;
    color: var(--color-primary) !important;
    background: none !important;
  }

  .mega-cols {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .mega-col-heading {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary) !important;
    opacity: 0.5;
    margin: 12px 0 4px 0;
    padding: 0;
    display: block;
  }

  .mega-col:first-child .mega-col-heading {
    margin-top: 4px;
  }

  .mega-inner--cols {
    padding: 0;
  }

  .mega-col-divider {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }
}

/* ─── Mega Menu ─────────────────────────────────────────── */

/* Hide mobile accordion elements on desktop */
.mob-acc-arrow { display: none; }
.mob-acc-row { display: contents; }

@media (max-width: 1100px) {
  .mob-acc-arrow { display: inline-flex; }
  .mob-acc-row { display: flex; }
}
/*
 * The panel is position:absolute relative to .site-nav (position:sticky).
 * No intermediate ancestor has position set, so it bubbles up correctly.
 * top:100% puts it just below the full height of the sticky header.
 */

.has-mega {
  position: relative;
}

/* Chevron on nav trigger */
.nav-top {
  display: inline-flex;
  align-items: center;
  transition: color 0.18s;
}

/* Kill the nav underline ::after for mega triggers — use color instead */
.has-mega .nav-top::after {
  display: none !important;
}

/* Active state: link stays navy when its panel is open */
.has-mega.is-open .nav-top {
  color: var(--color-primary);
  opacity: 1;
}

/* Panel */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  width: auto;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(3,31,127,0.10);
  overflow: hidden;
  z-index: 48;

  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0.18s;
  pointer-events: none;
}

/* Visible state — toggled via JS class */
.has-mega.is-open .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0s linear 0s;
  pointer-events: auto;
}

/* Inner layout — two columns */
.mega-inner {
  padding: 8px 0 12px;
}

/* Multi-column mega panel */
.mega-inner--cols {
  padding: 20px 24px 24px;
}

/* ── Compounding mega — desktop 4-col layout ─── */

/* Panel spans full nav width — position from .site-nav */
/* Note: .has-mega:first-child already has position:static on desktop (in the min-width:1101px block) */

.mega--compounding {
  padding: 0;
  overflow: hidden;
}

.mega-inner--compounding {
  padding: 0;
}

  /* Single-column menus — add horizontal padding to align content with the nav items */
  .mega-desktop:has(.mega-col:only-child) {
    padding-left: 24px;
  }

.mega-desktop {
  display: none; /* shown on desktop only */
}

.mega-mobile {
  display: none; /* shown on mobile only */
}

@media (min-width: 1101px) {
  .mega-desktop {
    display: flex;
    flex-direction: row;
    gap: 0;
    max-height: 50vh;
    overflow: hidden;
    align-items: stretch;
  }

  .mega-mobile {
    display: none;
  }

  /* Generic content column — single-topic mega menus (overridden by --about / --conditions / --lab-image) */
  .mega-col {
    flex: 0 0 240px;
    padding: 20px 20px 20px 24px;
  }

  .mega-col .mega-items {
    max-width: none;
    min-width: 0;
  }

  .mega-col .mega-items a {
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--color-primary) !important;
    white-space: nowrap;
    text-align: left;
    opacity: 0.8;
    border-radius: 0 !important;
    background: none !important;
  }

  .mega-col .mega-items a:hover {
    opacity: 1;
    background: none !important;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .mega-col--about {
    padding: 20px 20px 20px 24px;
    border-right: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
    flex: 0 0 150px;
  }

  .mega-col--conditions {
    padding: 20px 24px;
    flex: 0 0 auto;
    border-right: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
  }

  .mega-col--lab-image {
    padding: 12px 12px 12px 0;
    flex: 1;
    position: relative;
    align-self: stretch;
    min-width: 160px;
  }

  .mega-lab-img {
    position: absolute;
    inset: 12px 12px 12px 0;
    border-radius: 12px;
    overflow: hidden;
    background: url("../../assets/images/lab.webp?v=2") center center / cover no-repeat;
  }

  .mega-conditions-grid {
    display: grid;
    grid-template-columns: 175px 195px;
    gap: 0;
    margin-top: 0;
  }

  /* Column headings — navy bold uppercase, full opacity */
  .mega-col-heading {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--color-primary) !important;
    opacity: 1 !important;
    margin: 0 0 10px 0 !important;
    padding: 0 8px !important;
    display: block;
  }

  /* Items — compact, left-aligned */
  .mega-col--about .mega-items a,
  .mega-col--conditions .mega-items a {
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--color-primary) !important;
    white-space: nowrap;
    text-align: left;
    opacity: 0.8;
    border-radius: 0 !important;
    background: none !important;
  }

  .mega-col--about .mega-items a:hover,
  .mega-col--conditions .mega-items a:hover {
    opacity: 1;
    background: none !important;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .mega-col--about .mega-items,
  .mega-col--conditions .mega-items {
    max-width: none;
    min-width: 0;
  }
}

@media (max-width: 1100px) {
  .mega-desktop {
    display: none !important;
  }

  .mega-mobile {
    display: block;
    padding: 4px 0 8px 20px;
  }

  .mega-group {
    border: none;
    list-style: none;
  }

  .mega-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
  }

  /* Remove default details triangle */
  .mega-group-heading::-webkit-details-marker { display: none; }
  .mega-group-heading::marker { display: none; }

  /* Down chevron via pseudo-element */
  .mega-group-heading::after {
    content: '›';
    font-size: 18px;
    transform: rotate(90deg);
    display: inline-block;
    transition: transform 0.2s ease;
    opacity: 0.6;
    flex-shrink: 0;
  }

  .mega-group[open] .mega-group-heading::after {
    transform: rotate(-90deg);
  }

  .mega-items--mobile {
    list-style: none;
    padding: 2px 0 6px 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .mega-items--mobile li a {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 4px 0 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--color-primary) !important;
    opacity: 0.7;
    text-decoration: none;
    background: none !important;
    border: none !important;
  }
}

.mega-cols {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0 40px;
}

.mega-col {
  display: flex;
  flex-direction: column;
}

.mega-col-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 1;
  margin: 0 0 8px 0;
  padding: 0;
}

/* Tighter spacing inside multi-column panels */
.mega-cols .mega-items a {
  padding: 5px 12px;
  font-size: 11px;
}

.mega-col-divider {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* Hide image panel entirely */
.mega-visual {
  display: none !important;
}

/* Items list */
.mega-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  min-width: 200px;
  max-width: 280px;
}

.mega-items li {
  border-bottom: none;
}

.mega-items li:first-child {
  border-top: none;
}

.mega-items a {
  display: block;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.85;
  border-radius: 6px;
  transition: background 0.15s, opacity 0.15s;
  line-height: 1.3;
}

.mega-items a:hover {
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  opacity: 1;
}

.mega-items a::after { display: none; }

.mega-items a:hover,
.mega-items a.is-active {
  color: var(--color-primary);
}

/* Overrides for base nav underline behaviour */
.mega-items a:hover::after,
.navlinks .mega-items a::after {
  display: none;
}

/* Visual column — hidden in Option A simple list design */
.mega-visual {
  display: none !important;
}

.mega-img {
  display: none;
}

.mega-caption {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.55;
  min-height: 2.5em;
  transition: opacity 0.2s;
}

/* Island state — round the panel bottom to follow the island shape */
.site-nav.is-scrolled .mega {
  border-radius: 0 0 14px 14px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

@media (max-width: 900px) {
  .mega {
    display: none; /* handled by mobile nav toggle */
  }
  .nav-top::after {
    display: none;
  }
}

/* ─── Hero ───────────────────────────────────────────────── */
/*
 * Full-bleed split: text fills left half within max-width constraints;
 * photo column reaches the absolute right edge of the viewport.
 */
@property --hero-angle {
  syntax: '<angle>';
  initial-value: -45deg;
  inherits: false;
}

.hero {
  color: var(--color-primary);
  overflow: hidden;
  position: relative;
  background: #ffffff;
}

/* ── Video background ────────────────────────────────────────────── */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* ── Scrim — removed, shadow is on hero-body instead ────────────── */
.hero-scrim {
  display: none;
}

/* ── Blob layer ──────────────────────────────────────────────────── */
.hero-blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.hero-blob--1 {
  width: 700px;
  height: 700px;
  top: -150px;
  left: 20%;
  background: radial-gradient(ellipse at center, rgba(27,43,107,0.14) 0%, transparent 70%);
}
.hero-blob--2 {
  width: 550px;
  height: 550px;
  top: 30%;
  left: 55%;
  background: radial-gradient(ellipse at center, rgba(27,43,107,0.11) 0%, transparent 70%);
}
.hero-blob--3 {
  width: 600px;
  height: 600px;
  bottom: -100px;
  left: 10%;
  background: radial-gradient(ellipse at center, rgba(27,43,107,0.10) 0%, transparent 70%);
}
.hero-blob--4 {
  width: 480px;
  height: 480px;
  top: 10%;
  right: 5%;
  background: radial-gradient(ellipse at center, rgba(27,43,107,0.13) 0%, transparent 70%);
}
.hero-blob--5 {
  width: 420px;
  height: 420px;
  bottom: 5%;
  left: 40%;
  background: radial-gradient(ellipse at center, rgba(27,43,107,0.09) 0%, transparent 70%);
}

/* ── Woman cut-out ───────────────────────────────────────────────── */
.hero-woman {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 92%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: right bottom;
  z-index: 2;
  filter: drop-shadow(-8px 0px 18px rgba(27, 43, 107, 0.18));
  pointer-events: none;
  user-select: none;
}

.hero-body {
  max-width: none;
  margin: 0;
  padding: var(--gap) clamp(24px, 4vw, 80px);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  gap: 20px;
  min-height: 85vh;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  padding-bottom: clamp(48px, 7vh, 96px);
  width: 58%;
}

.hero-body::before {
  content: '';
  position: absolute;
  left: -24px;
  right: 8%;
  bottom: clamp(24px, 4vh, 64px);
  top: auto;
  height: min(48%, 380px);
  background: radial-gradient(ellipse at 32% 62%, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.38) 48%, transparent 74%);
  filter: blur(22px);
  z-index: -1;
  pointer-events: none;
}

.hero-body .eyebrow {
  color: var(--color-on-primary-subtle);
}

.hero-body .eyebrow::before {
  background: var(--color-on-primary-accent);
}

.hero-body h1 {
  color: #ffffff;
  font-size: clamp(28px, 3.6vw, 58px);
  margin-bottom: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.hero-body h1 em {
  color: #ffffff;
  font-weight: 400;
  font-style: italic;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

/* ── Hero typewriter word ───────────────────────────────────────── */
.hero-cycle-wrap {
  display: inline;
}

#hero-cycle-word {
  display: inline-block; /* needed for yPercent transform */
  vertical-align: baseline;
  opacity: 0; /* GSAP reveals on init */
}

.hero-body .lede {
  color: #ffffff;
  margin-top: 0;
  font-size: 17px;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

/* ── Tablet: shift woman right so she clears the text column ── */
@media (min-width: 769px) and (max-width: 1280px) {
  .hero-woman {
    right: -15%;
    height: 75%;
  }

  .hero-body {
    width: 65%;
  }
}

/* ── Mobile: stack text above, image below ── */
@media (max-width: 768px) {
  .hero {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 58svh;
  }

  .hero-blobs {
    display: none;
  }

  .hero-body {
    position: relative;
    order: 1;
    min-height: 58svh;
    width: 100%;
    padding: 24px 24px 32px 16px;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
  }

  .hero-body h1 {
    font-size: clamp(26px, 3.8vw, 51px);
  }

  .hero-body .lede {
    white-space: normal;
  }

  .hero-woman {
    position: relative;
    order: 2;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 80vw;
    object-fit: cover;
    object-position: center 10%;
    opacity: 1;
    display: block;
  }

  .hero-partner-badge {
    order: 3;
    position: relative;
    bottom: auto;
    right: auto;
    margin: 16px 24px 32px;
    align-self: flex-start;
  }
}

.hero-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 16px;
}

.hero-reviews {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 4px;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.55));
}

.hero-reviews__stars {
  color: #f5a623;
  font-size: 13px;
  letter-spacing: 1px;
}

.hero-reviews__score {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.hero-reviews__count {
  font-size: 12px;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-actions .btn {
  flex: 0 0 auto;
  width: auto;
}

.hero-actions .btn--primary {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

.hero-actions .btn--primary:hover {
  background: rgba(27, 43, 107, 0.85);
  border-color: rgba(27, 43, 107, 0.85);
}

.hero-actions .btn--secondary {
  background: #ffffff;
  color: var(--color-primary);
  border-color: #ffffff;
}

.hero-actions .btn--secondary:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.85);
}

.hero-ask-link {
  flex-basis: 100%;
  margin-top: 2px;
}

.hero-ask-link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--color-on-primary-muted) 40%, transparent);
  transition: color 0.18s, text-decoration-color 0.18s;
  letter-spacing: 0.01em;
}

.hero-ask-link:hover {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary);
}

/* Hero partner clinic badge */
.hero-partner-badge {
  position: absolute;
  bottom: 96px;
  right: 28px;
  display: flex;
  align-items: center;
  z-index: 2;
  gap: 14px;
  padding: 18px 22px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  z-index: 2;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}

.hero-partner-badge:hover {
  background: rgba(47, 125, 58, 0.85);
  border-color: rgba(47, 125, 58, 0.9);
  transform: translateY(-2px);
}

.hero-partner-badge:hover .hero-partner-badge__eyebrow {
  color: rgba(255,255,255,0.85);
}

.hero-partner-badge:hover .hero-partner-badge__offer {
  color: #ffffff;
}

.hero-partner-badge:hover .hero-partner-badge__arrow {
  color: rgba(255,255,255,0.9);
}

.hero-partner-badge__icon {
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
}

.hero-partner-badge__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-partner-badge__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  line-height: 1;
}

.hero-partner-badge__offer {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.hero-partner-badge__sub {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  line-height: 1;
  margin-top: 2px;
}

.hero-partner-badge__arrow {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  margin-left: 4px;
  transition: transform 0.2s;
}

.hero-partner-badge:hover .hero-partner-badge__arrow {
  transform: translateX(3px);
}

@media (max-width: 767px) {
  .hero-partner-badge {
    bottom: 28px;
    right: 16px;
    padding: 8px 12px;
    gap: 8px;
    max-width: 180px;
  }
  .hero-partner-badge__offer { font-size: 12px; }
  .hero-partner-badge__sub { font-size: 10px; }
  .hero-partner-badge__icon { width: 24px; height: 24px; }
  .hero-partner-badge__arrow { display: none; }
}

.hero-tagline {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin: 0;
  flex-basis: 100%;
}

/* Right column — no right padding, bleeds to viewport edge */
.hero-fig {
  position: relative;
  overflow: hidden;
  background: var(--color-hero-figure);
  background-image: repeating-linear-gradient(
    135deg,
    var(--color-hero-stripe-a) 0 28px,
    var(--color-hero-stripe-b) 28px 29px
  );
}

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

.hero-fig figcaption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-hero-caption);
  border: 1px solid var(--color-border-on-primary);
  padding: 5px 10px;
}


/* ─── Hero trust island ───────────────────────────────────── */
.hero-trust-island {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: color-mix(in srgb, white 18%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, white 25%, transparent);
  border-radius: 100px;
  padding: 0 8px;
  white-space: nowrap;
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px clamp(16px, 2.5vw, 32px);
  position: relative;
}

.trust-item + .trust-item::before {
  content: "/";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 100;
  color: color-mix(in srgb, white 30%, transparent);
}

.trust-num {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
}

.trust-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, white 75%, transparent);
  line-height: 1;
}

@media (max-width: 760px) {
  .hero-trust-island {
    flex-wrap: wrap;
    border-radius: 16px;
    bottom: 16px;
    width: calc(100% - 2 * var(--pad));
    justify-content: center;
  }

  .trust-item + .trust-item::before {
    display: none;
  }
}

/* ─── Reviews marquee ────────────────────────────────────── */
/* ─── Reviews section ─────────────────────────────────────── */
.reviews-section {
  background: #eaf4ff;
  overflow: hidden;
  padding: clamp(32px, 4vw, 56px) 0 clamp(48px, 6vw, 80px);
}

.reviews-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: #eaf4ff;
  gap: 16px;
  padding: 18px var(--pad) 14px;
}

.reviews-score-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reviews-stars {
  color: #F5A623;
  font-size: 17px;
  letter-spacing: 2px;
  line-height: 1;
}

.reviews-score {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.reviews-count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Marquee track */
.reviews-marquee__track-wrap {
  padding: 4px 0 0;
  background: #eaf4ff;
}

.reviews-marquee__track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: marquee-scroll 56s linear infinite;
}

.reviews-section:hover .reviews-marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* White cards — maximum contrast against navy */
.rv-card {
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  padding: 16px 18px 12px;
  min-width: 260px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(3, 31, 127, 0.12);
}

.rv-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text);
  font-style: italic;
  font-weight: 400;
  flex: 1;
}

.rv-footer {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--color-border);
  padding-top: 8px;
}

.rv-stars {
  color: #F5A623;
  font-size: 10px;
  letter-spacing: 2px;
}

.rv-name {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .reviews-marquee__track {
    animation: none;
    flex-wrap: wrap;
    padding: 0 var(--pad);
  }
}

@media (max-width: 767px) {
  .reviews-header {
    padding: 14px var(--pad) 10px;
    gap: 4px;
  }
  .reviews-stars {
    font-size: 15px;
  }
  .reviews-score {
    font-size: 22px;
  }
  .reviews-count {
    font-size: 10px;
  }
  .rv-card {
    min-width: 240px;
    max-width: 260px;
    padding: 20px 18px 16px;
  }
  .rv-text {
    font-size: 13px;
  }
  .reviews-marquee__track-wrap {
    padding-bottom: clamp(20px, 4vw, 32px);
  }
}

/* ─── Mission statement ──────────────────────────────────── */
.statement {
  display: none; /* replaced by empathy-section */
}

/* ─── Empathy section — scroll-driven pin animation ─────── */
.empathy-section {
  position: relative;
  z-index: 1;
  height: auto;
  background: #ffffff;
  border-radius: 0;
  overflow: visible;
  margin-top: 0;
  padding: clamp(72px, 10vh, 140px) 0 clamp(72px, 10vh, 140px);
}

.empathy-sticky {
  transform-origin: center center;
}

/* ── Empathy section colours on navy background ── */
.empathy-heading {
  color: var(--color-primary);
  font-weight: 700;
}

.empathy-heading em {
  color: var(--color-primary) !important;
  font-style: italic;
  font-weight: 700;
  white-space: nowrap;
}

.ec-quote {
  color: var(--color-primary);
}

/* ── Story Stage: scroll-linked reveal sequence (no pin) ── */
.act1-zone {
  position: relative;
}

.story-panel {
  position: relative;
  overflow: visible;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2vw, 32px) 0 clamp(24px, 3vw, 48px);
}

.story-act {
  position: relative;
  /* .story-panel is a row flex container with no flex-grow/width set here,
     so without an explicit width this shrinks-to-fit its widest unwrapped
     content (the empathy heading's full sentence) instead of filling the
     viewport - on narrow screens that content is much wider than the
     screen, and everything inside inherits that oversized box. */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 1vw, 20px) 0 clamp(8px, 1.5vw, 24px);
  text-align: center;
  pointer-events: auto;
}

#act-1 {
  background: #ffffff;
  /* No overflow:hidden here - the leaf watermark below intentionally bleeds
     off the right edge; clipping it against this section's own box gave it
     a hard vertical cut mid-section. body's overflow-x:hidden guards against
     any resulting horizontal scrollbar instead. */
}

#act-1::before {
  content: '';
  position: absolute;
  right: -16%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(300px, 45vw, 620px);
  height: clamp(300px, 45vw, 620px);
  background: url('../../assets/favicons/HCP.svg?v=5') no-repeat center / contain;
  opacity: 0.045;
  pointer-events: none;
  z-index: 0;
}

@media (min-width: 1025px) {
  #act-1::before {
    /* Pulled in from the -16% mobile/tablet offset so it doesn't disappear
       almost entirely off-canvas on wide viewports. */
    right: 4%;
  }
}

/* Acts 2 & 3 — normal flow sections, scroll naturally */
.act-section {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: clamp(72px, 10vw, 120px) 0;
  text-align: center;
}

#act-2 .wrap {
  width: 100%;
  max-width: var(--maxw);
}

#act-2 {
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

#act-3 {
  /* Plain white canvas around the card - the card itself (below) carries the
     navy panel treatment, so no wave transitions are needed either side.
     Horizontal padding here is the card's outer gutter against the viewport
     edge - without it the card touches the screen edges on anything
     narrower than --maxw (i.e. most laptop/tablet widths). */
  background: #ffffff;
  text-align: left;
  align-items: stretch;
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
  min-height: auto;
  padding-top: clamp(24px, 3vw, 48px);
  padding-bottom: clamp(48px, 6vw, 96px);
  /* .sf-bar's scroll-reveal tween (homepage.js) leaves an inline transform on
     it even at rest, which - per spec - promotes it to its own stacking
     context. .services-section right below has an explicit z-index:30, which
     otherwise outranks that local context and paints over the dropdowns the
     moment they pop out past the card's own bottom edge. Giving the section
     itself a higher z-index settles it above anything after it, regardless
     of what transforms happen to elements inside it. */
  position: relative;
  z-index: 35;
}

#act-3 > .wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
  background: var(--color-primary);
  border-radius: 28px;
  color: #ffffff;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (hover: hover) and (pointer: fine) {
  #act-3 > .wrap:hover {
    transform: scale(1.015);
  }
}

/* Heading + subheading need light text against the navy card; the form bar
   below stays on its own white surface so its contents are untouched. */
#act-3 .sf-head h2 {
  color: #ffffff;
}

#act-3 .sf-subheading {
  color: rgba(255, 255, 255, 0.72);
}

/* ── Statement between empathy section and script finder ── */
.empathy-response {
  padding: clamp(24px, 3vw, 48px) 0 clamp(72px, 9vw, 128px);
  text-align: center;
}

.empathy-response__text {
  font-size: clamp(32px, 3.8vw, 51px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-primary);
  /* Same shrink-to-fit flex-item issue as .empathy-heading above - see its
     comment for details. */
  width: 100%;
  max-width: 860px;
  margin: clamp(24px, 4vw, 56px) auto 0;
}

.empathy-response__text em {
  font-style: italic;
  font-weight: 700;
  /* colour animated by GSAP char-bleed */
}

.er-line {
  display: block;
}


.empathy-sticky {
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
}

.empathy-inner {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: clamp(16px, 2vw, 28px) clamp(24px, 5vw, 80px) clamp(20px, 3vw, 36px);
  align-self: stretch;
}

/* Heading stays centred, above the cards */
.empathy-heading {
  font-size: clamp(26px, 3.8vw, 51px);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-align: center;
  /* .story-act is a column flex container with align-items:center, so
     without an explicit width flex items shrink-to-fit their unwrapped
     content instead of wrapping at the container's edge - this heading's
     full text is ~630px unwrapped, well past a phone viewport. width:100%
     makes it fill (and wrap within) the available space; max-width caps it
     on desktop. */
  width: 100%;
  max-width: 1100px;
  position: relative;
  z-index: 2;
  margin: 0;
}

/* Cards in a single horizontal row */

/* Cards in a single horizontal row */
.empathy-cards {
  list-style: none;
  margin: clamp(24px, 3vw, 36px) auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
  width: 100%;
  max-width: 1300px;
  perspective: 1000px;
}

.ec {
  position: relative;
  padding: clamp(20px, 2.5vw, 32px) clamp(20px, 2.5vw, 28px);
  background: #edf3fc;
  border: 1px solid rgba(3, 31, 127, 0.1);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(3, 31, 127, 0.06);
  animation: none;
  opacity: 1;
  cursor: default;
  text-align: center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.ec:first-child {
  border-left: 1px solid rgba(3, 31, 127, 0.1);
  padding-left: clamp(20px, 2.5vw, 28px);
}

.ec::before {
  content: none;
}

@keyframes ec-ping {}

.ec:nth-child(1),
.ec:nth-child(2),
.ec:nth-child(3),
.ec:nth-child(4),
.ec:nth-child(5) {
  background: none;
  animation: none;
  top: unset; left: unset; right: unset; bottom: unset;
}

@media (hover: hover) {
  .ec:hover {
    transform: none;
    box-shadow: none;
  }
}

.ec-quote {
  font-size: clamp(15px, 1.4vw, 20px);
  font-style: italic;
  font-weight: 400;
  color: var(--color-primary);
  line-height: 1.5;
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 10px;
  padding-top: 0;
}

.ec-quote::before {
  content: "\201C";
  color: var(--color-secondary);
  font-style: normal;
  font-weight: 700;
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.3em;
  margin-right: 3px;
}
.ec-quote::after {
  content: "\201D";
  color: var(--color-secondary);
  font-style: normal;
  font-weight: 700;
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.3em;
  margin-left: 3px;
}

.ec-attr {
  font-size: var(--text-xs, 11px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: block;
  margin-bottom: 0;
  opacity: 1;
}

/* ── About section ── */
.about-section {
  background: var(--color-bg);
  padding: var(--gap) 0;
}

.about-card {
  padding: 0;
}

.about-card::before,
.about-card::after {
  content: none;
}

.about-inner {
  display: block;
  max-width: 900px;
}

.about-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
}

.about-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-3);
}

.about-heading {
  color: var(--color-primary);
  margin: 0;
}

.about-heading em {
  color: var(--color-secondary);
  font-style: italic;
  font-weight: 300;
}

.about-right {
  display: none;
}

.about-lede {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
  line-height: 1.4;
}

.about-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
}

.about-body + .about-body {
  margin-top: 0;
}

.about-body:last-of-type {
  margin-bottom: var(--space-5);
}

.about-body--bold {
  font-weight: 700;
  color: var(--color-primary);
}

.about-body--navy {
  color: var(--color-primary);
}

.about-card .btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.about-card .btn--primary:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-on-primary);
}

.about-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-primary);
  background: var(--color-primary);
  text-decoration: none;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.about-link:hover {
  background: var(--color-secondary);
  color: var(--color-on-primary);
  border-color: var(--color-secondary);
}

@media (max-width: 768px) {
  .about-inner {
    max-width: 100%;
  }
}

/* ── Pillars section ─────────────────────────────────────────────────── */
.pillars-section {
  background: var(--color-bg);
  padding: clamp(32px, 5vw, 64px) 0;
}

.pillars-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 48px);
  max-width: min(94vw, 1240px);
  background: var(--color-bg-2);
  border-radius: 24px;
  padding: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 56px);
}

.pillars-head {
  max-width: 900px;
}

.pillars-heading {
  font-family: var(--font-sans);
  font-size: clamp(22px, 3.2vw, 44px);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.15;
  margin: 0 0 var(--space-4);
}

.pillars-heading em {
  color: var(--color-secondary);
  font-style: italic;
  font-weight: 300;
}

.pillars-sub {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
}

.pillar-card {
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius, 16px);
  padding: clamp(20px, 2.5vw, 28px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pillar-title {
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.25;
  margin: 0;
}

.pillar-desc {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

.pillar-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--space-4);
  width: 40px;
  height: 40px;
}

@media (max-width: 768px) {
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .pillars-wrap {
    border-radius: 20px;
    padding: clamp(32px, 8vw, 48px) clamp(20px, 5vw, 28px);
  }

  .pillars-grid {
    grid-template-columns: 1fr;
  }
  .pillar-card {
    min-height: auto;
  }
}

/* ── Resolution heading — standalone section ── */
.resolution-head-section {
  background: var(--color-bg);
  padding: clamp(16px, 3vw, 36px) 0 clamp(48px, 5vw, 72px);
}

.resolution-head-text {
  display: flex;
  justify-content: center;
}

.resolution-head-heading {
  font-size: clamp(26px, 3.8vw, 51px);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-align: center;
  max-width: 900px;
  margin: 0;
}

.resolution-head-heading strong {
  font-weight: 700;
  color: var(--color-primary);
}

.resolution-head-heading em {
  font-style: italic;
  font-weight: 700;
  color: var(--color-primary);
}

/* ── Script Finder ── */
.script-finder-section {
  background: var(--color-bg);
  padding: clamp(96px, 13vw, 160px) 0 clamp(96px, 13vw, 160px);
}

.sf-head {
  margin-bottom: clamp(28px, 4vw, 52px);
  text-align: center;
}

/* "Not anymore." — same visual weight as the h2, separate element for staggered reveal */
.sf-not-anymore {
  display: none;
}

.sf-head h2 {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(26px, 3.8vw, 51px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.sf-line-wrap {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
}

.sf-line {
  display: block;
}

.sf-head h2 em {
  font-weight: 700;
  display: inline-block;
  position: relative;
  color: var(--color-primary);
}

#sf-heading em {
  color: var(--color-primary) !important;
}

.sf-subheading {
  margin: 24px auto 0;
  max-width: 640px;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: center;
  font-weight: 400;
}

.sf-bar {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #b9c0da;
  border-radius: 18px;
  background: #dde2f2;
  box-shadow: 0 12px 32px rgba(3, 31, 127, 0.22);
  overflow: visible;
  position: relative;
  /* Was carried by .sf-subheading's old bottom margin - moved here so the
     subheading itself can share the exact same font/spacing rules as every
     other section subheading on the page. */
  margin-top: 28px;
}

.sf-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 32px;
  position: relative;
  min-width: 0;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 0;
}

.sf-step:first-child {
  border-radius: 16px 0 0 16px;
}

.sf-step--active:not(.sf-step--locked) {
  background: #fff;
}

.sf-step:hover:not(.sf-step--locked) {
  background: #eef2fa;
}

.sf-step--locked {
  opacity: 0.45;
  pointer-events: none;
}

.sf-step__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 6px;
  white-space: nowrap;
}

.sf-step__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 700;
  color: var(--color-primary);
  text-align: left;
  width: 100%;
  line-height: 1.2;
}

.sf-step__btn:disabled {
  cursor: not-allowed;
  color: #9aa0bc;
}

.sf-step__value {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sf-step__value--placeholder {
  color: #6b77a0;
  font-weight: 500;
}

.sf-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: rgba(3, 31, 127, 0.4);
  transition: transform 0.2s ease;
}

.sf-step__btn[aria-expanded="true"] .sf-chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

/* Dividers */
.sf-divider {
  width: 1.5px;
  background: #e2e6f0;
  align-self: stretch;
  flex-shrink: 0;
  margin: 16px 0;
}

/* Dropdown */
.sf-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1.5px solid #e2e6f0;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(3, 31, 127, 0.12);
  z-index: 200;
  padding: 6px;
  list-style: none;
  margin: 0;
}

.sf-dropdown[hidden] {
  display: none;
}

.sf-option {
  padding: 12px 16px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.12s;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sf-option:hover,
.sf-option:focus {
  background: #f0f3fb;
  outline: none;
}

.sf-option[aria-selected="true"] {
  background: #e8ecfa;
  font-weight: 700;
}

.sf-option[aria-selected="true"]::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

/* CTA panel */
.sf-cta {
  display: flex;
  align-items: center;
  padding: 10px 10px;
  flex-shrink: 0;
}

.sf-cta__btn {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  padding: 0 18px 0 26px;
  height: 60px;
  border-radius: 13px;
  transition: opacity 0.2s, background 0.2s, transform 0.15s;
}

.sf-cta__btn:not(:disabled):hover {
  transform: translateY(-1px);
}

.sf-cta__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.sf-cta__arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
}

/* Mobile — stack vertically */
@media (max-width: 768px) {
  .sf-bar {
    flex-direction: column;
    border-radius: 14px;
  }

  .sf-step {
    padding: 18px 22px;
    border-radius: 0 !important;
  }

  .sf-step:first-child {
    border-radius: 12px 12px 0 0 !important;
  }

  .sf-divider {
    width: auto;
    height: 1.5px;
    align-self: auto;
    margin: 0 22px;
  }

  .sf-cta {
    padding: 12px 16px 18px;
  }

  .sf-cta__btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .sf-dropdown {
    left: 0;
    right: 0;
    min-width: unset;
  }
}

/* ── Resolution reviews section ── */
.resolution-section {
  position: relative;
  height: auto;
  background: white;
  z-index: 10;
  margin-top: 0;
  border-radius: 0;
  overflow: hidden;
  padding: 0 0 clamp(64px, 10vh, 120px);
}

.resolution-reviews-section {
  background: #f5f7fc;
  padding: 0 0 clamp(32px, 4vw, 56px);
  position: relative;
}

/* Force all resolution content visible — no GSAP pre-hiding */
.resolution-sticky,
.resolution-text,
.resolution-reviews-summary,
.resolution-cards-grid {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ── Two-column wrapper ── */
/* ── Reviews layout: centred header + full-width cards ── */
.rr-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.5vw, 36px);
  padding-top: 0;
}

.rr-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.rr-cards-area {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.rr-cards-area > .btn {
  margin-top: 24px;
}

.rr-heading {
  font-size: clamp(26px, 3.8vw, 51px);
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.rr-heading em {
  font-style: italic;
  font-weight: 700;
  color: #031F7F;
}

.rr-subheading {
  /* Spacing above this comes from .rr-header's flex gap (already 20px,
     matching the template's margin-top), not a paragraph margin - so margin
     stays 0 here, only the font/colour rules are shared. */
  margin: 0 auto;
  max-width: 640px;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: center;
  font-weight: 400;
}

.resolution-reviews-summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  margin: 0;
  background: rgba(3, 31, 127, 0.06);
  border: 1px solid rgba(3, 31, 127, 0.08);
  border-radius: 100px;
  padding: 10px 22px;
}

.rr-google-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.rr-stars {
  font-size: 18px;
  color: #f5a623;
  letter-spacing: 2px;
}

.rr-score {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.rr-review-count {
  font-size: 14px;
  color: var(--color-primary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rr-right .resolution-reviews-summary {
  justify-content: center;
  margin-top: 56px;
}

/* ── Right column: 2×3 grid ── */
.rr-right {
  width: 100%;
}

.resolution-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  width: 100%;
}

/* Hero card — full width, larger text */
.rr-card--hero {
  width: 100%;
  padding: 32px;
  margin-bottom: 14px;
}

.rr-card--hero .rr-text {
  font-size: 15px;
}

/* Supporting 2×2 grid */
.rr-support-grid {
  grid-template-columns: repeat(2, 1fr);
}

.rr-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  cursor: default;
}

/* Expanding navy circle — starts at cursor, covers card on hover */
.rr-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #031F7F;
  clip-path: circle(0% at var(--x, 50%) var(--y, 50%));
  transition: clip-path 0.15s ease;
  z-index: 0;
  pointer-events: none;
}

.rr-card.is-hovered::after {
  clip-path: circle(150% at var(--x, 50%) var(--y, 50%));
  transition: clip-path 0.55s ease;
}

/* Text sits above the expanding overlay */
.rr-card .rr-text,
.rr-card .rr-footer {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease 0.15s;
}

.rr-card.is-hovered .rr-text {
  color: rgba(255, 255, 255, 0.9);
}

.rr-card.is-hovered .rr-name {
  color: white;
}

.rr-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--color-text);
  font-style: italic;
  margin: 0;
}

.rr-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.rr-card-stars {
  font-size: 11px;
  color: #f5a623;
  letter-spacing: 1px;
  margin-left: auto;
  flex-shrink: 0;
  align-self: flex-start;
}

.rr-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--avatar-bg, rgba(3,31,127,0.10));
  color: var(--avatar-fg, var(--color-primary));
}

.rr-footer-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.rr-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rr-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.rr-verified i {
  font-size: 11px;
  color: #4285F4;
}

.rr-card.is-hovered .rr-verified,
.rr-card.is-hovered .rr-verified i {
  color: rgba(255, 255, 255, 0.75);
}

/* Service tag - colour/icon coded per category, brand palette only
   (gold/green/navy) rather than an off-brand rainbow of chip colours */
.rr-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  position: relative;
  z-index: 1;
  transition: background 0.3s ease 0.15s, color 0.3s ease 0.15s;
}

.rr-tag i {
  font-size: 12px;
}

.rr-tag--compounding {
  background: rgba(207, 165, 71, 0.20);
  color: #7A5F1C;
}

.rr-tag--alternative-therapies {
  background: rgba(47, 125, 58, 0.12);
  color: var(--color-secondary);
}

.rr-tag--consultations,
.rr-tag--delivery {
  background: rgba(3, 31, 127, 0.08);
  color: var(--color-primary);
}

.rr-card.is-hovered .rr-tag {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

@media (min-width: 769px) {
  .rr-support-grid .rr-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .rr-support-grid .rr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
    z-index: 2;
  }
}

/* hide old controls */
.rr-controls,
.resolution-reviews-block {
  display: none;
}

/* ── Mobile: single column ── */
@media (max-width: 768px) {
  .rr-two-col {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .rr-heading {
    text-align: left;
  }

  .resolution-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* rr-summary-divider / rr-count kept for any legacy use */
.rr-summary-divider {
  width: 1px;
  height: 28px;
  background: var(--color-border, #d0d8e4);
  flex-shrink: 0;
}

.rr-count {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
  line-height: 1.4;
}

/* Mobile — empathy cards as animated 2-col grid */
@media (max-width: 768px) {
  .empathy-section {
    height: auto;
    padding: 36px 0 44px;
    margin-top: 0;
    border-radius: 0;
  }

  .empathy-sticky {
    position: relative !important;
    height: auto !important;
    transform: none !important;
    top: auto !important;
    padding: 0 var(--space-4);
    overflow: visible;
  }

  .empathy-inner {
    gap: 20px;
    height: auto;
    padding: 0 var(--space-4) clamp(32px, 8vw, 56px);
  }

  /* Tightened - the previous clamp() here stacked with .empathy-response's
     own bottom padding below, giving mobile a much bigger dead-zone gap
     than the desktop layout has. */
  #act-3 {
    padding-top: clamp(24px, 5vw, 40px);
  }

  .empathy-response {
    padding-bottom: clamp(32px, 6vw, 56px);
  }

  /* Horizontal scroll-snap carousel on mobile instead of a stacked grid.
     align-self:stretch overrides the parent's align-items:center, which
     would otherwise shrink-to-fit this flex item instead of stretching
     it to the viewport. Negative margin + matching padding lets the row
     bleed edge-to-edge while the cards themselves keep a visual inset. */
  .empathy-cards {
    display: flex;
    align-self: stretch;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    width: auto;
    max-width: none;
    margin: 20px calc(var(--space-4) * -1) 0;
    padding: 0 var(--space-4) 4px;
    /* Stops leftover swipe momentum at the carousel's scroll boundary from
       chaining into a page-wide horizontal pan. */
    overscroll-behavior-x: contain;
  }

  /* Scroll-snap containers don't reliably honour padding/margin as
     scroll-start inset, so the left "breathing room" is a real flex item
     (a ::before spacer) that occupies actual space in the row. */
  .empathy-cards::before {
    content: '';
    flex: 0 0 var(--space-5);
  }

  .empathy-cards::-webkit-scrollbar {
    display: none;
  }

  .ec,
  .ec:nth-child(1),
  .ec:nth-child(2),
  .ec:nth-child(3),
  .ec:nth-child(4),
  .ec:nth-child(5) {
    position: relative;
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  .ec-attr {
    font-size: 9px;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
  }

  .ec-quote {
    font-size: 18px;
    line-height: 1.4;
    padding-top: 4px;
  }

  .empathy-heading {
    opacity: 1;
    transform: none;
    font-size: clamp(26px, 3.8vw, 51px);
  }

  .empathy-response__text {
    font-size: clamp(26px, 3.8vw, 51px);
  }
}

/* Resolution section — mobile: disable GSAP, show centre column as static layout */
@media (max-width: 768px) {
  .resolution-head-section {
    padding: 24px 20px;
  }

  .resolution-head-card {
    border-radius: 16px;
    padding: 40px 28px;
    background-image: none;
    background-color: var(--color-bg-2);
    text-align: center;
    max-width: 100%;
  }

  .resolution-head-card::before {
    display: none;
  }

  .resolution-head-card .resolution-text {
    max-width: 100%;
    text-align: center;
  }

  .resolution-head-card .resolution-text p {
    text-align: center;
  }
  .resolution-section {
    height: auto !important;
    padding: 0 0 48px;
    margin-top: 0; /* remove the -100vh overlap on mobile */
  }

  .resolution-sticky {
    position: relative !important;
    height: auto !important;
    transform: none !important;
    top: auto !important;
    overflow: visible;
    gap: 24px;
    padding: 0 20px;
  }

  .resolution-text {
    transform: none !important;
  }

  .resolution-reviews-summary {
    opacity: 1 !important;
    transform: none !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    justify-content: center;
    flex-wrap: nowrap;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 8px 14px;
  }

  .resolution-reviews-summary .rr-google-logo {
    width: 16px;
    height: 16px;
  }

  .resolution-reviews-summary .rr-stars {
    font-size: 14px;
  }

  .resolution-reviews-summary .rr-score {
    font-size: 15px;
  }

  .resolution-reviews-summary .rr-review-count {
    font-size: 11px;
  }

  .rr-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
  }

  /* Single horizontal-scroll row: the hero card and the 4 supporting
     cards all sit in ONE strip, not a full-width hero stacked above a
     separate scrolling grid. .rr-cards-scroll (NOT .rr-cards-area) is
     the actual scroller, so the "Read all reviews" button - a sibling
     of .rr-cards-scroll inside .rr-cards-area - stays outside the
     scrollable strip and stays visible/centred below it, instead of
     being dragged into the horizontal scroll and off-screen.
     .resolution-cards-grid becomes a transparent wrapper (display:
     contents) so its .rr-card children join the same flex row as the
     hero card instead of creating a second, nested scrollport. */
  .rr-cards-scroll {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
    width: 100%;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .rr-cards-scroll::-webkit-scrollbar {
    display: none;
  }

  .resolution-cards-grid {
    display: contents;
  }

  .rr-card {
    opacity: 1 !important;
    transform: none !important;
    min-width: 280px;
    max-width: 280px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  .rr-card--hero {
    width: auto;
    min-width: 280px;
    max-width: 280px;
    padding: 20px;
    margin-bottom: 0;
  }

  .rr-card--hero .rr-text {
    font-size: 13.5px;
  }

  /* Show all 6 cards on mobile */
  .rr-card:nth-child(n+7) {
    display: none;
  }
}

.statement-in p {
  color: var(--color-text-muted);
  font-size: 17px;
  max-width: 58ch;
  margin-inline: auto;
  line-height: 1.65;
}

/* ─── Services ───────────────────────────────────────────── */
.section-wave {
  background: var(--color-bg);
  line-height: 0;
  margin-bottom: -1px;
}

.section-wave--svc {
  background: #ffffff;
}

.section-wave--nationwide {
  /* Matches .nationwide-section (the section above) so there's no seam at
     the top edge of the wave - the SVG path fill below carries the colour
     of .locations-section it's transitioning into. */
  background: #f5f7fc;
}

.section-wave--locations {
  background: #ffffff;
}

.section-wave--reviews {
  background: #f5f7fc;
}

.section-wave--trust {
  background: #ffffff;
}

.section-wave--quote {
  /* Matches .qv-sideby (the section above) so there's no seam at the top
     edge of the wave - the SVG path fill below carries the colour of
     .blog-section it's transitioning into. */
  background: #f5f7fc;
}


.section-wave__svg {
  display: block;
  width: 100%;
  height: clamp(140px, 18vw, 260px);
}

@media (max-width: 767px) {
  /* On narrow screens 18vw shrinks well below the 140px floor, so every wave
     was rendering at a flat 140px regardless of how little width it had to
     work with - a disproportionately tall strip of near-empty colour on a
     small screen. 88px fixed that, but at that height the curve's vertical
     travel (scaled down from the 220-tall viewBox) reads as almost a
     straight line - bump it up so the S-curve stays legible on mobile. */
  .section-wave__svg {
    height: 130px;
  }
}

.services-section {
  /* Bottom padding kept minimal - the wave transition right after this
     section (section-wave--svc) already supplies the visual buffer into
     #how-it-works, so a large gap here on top of that just doubled up the
     empty space. */
  padding: clamp(36px, 4vw, 64px) 0 clamp(24px, 3vw, 40px);
  background: #ffffff;
  position: relative;
  z-index: 30;
  margin-top: 0;
  border-radius: 0;
}

.services-section .sec-head {
  text-align: center;
}

.services-subheading {
  margin: 24px auto 0;
  max-width: 640px;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: center;
  font-weight: 400;
}

.svcs {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* hide the row wrappers — grid is now on .svcs */
.svc-row {
  display: contents;
}

/* Three-column card grid inside each row */
.svc-row-cards {
  display: contents;
}

@media (max-width: 768px) {
  .svcs {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .svc-row-cards {
    display: contents;
  }
}

/* ── Row-level scroll-triggered fade-up ─────────────────────────────────────
   Each .svc-row animates as a unit (whileInView + viewport.once equivalent).
   Individual cards have no entrance animation — they ride with their row.
   Rows: delay 0 / 150 / 300 ms. Duration 0.45 s ease-out.                 */
.svc-row[data-row-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}

.svc-row[data-row-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .svc-row[data-row-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* No outer container border means no corner-card clipping needed */

.svc {
  position: relative;
  background: color-mix(in srgb, var(--color-primary) 2%, white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Card-level click overlay — sits below interactive children (z-index: 1) */
.svc::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ── All card hover effects scoped to real-pointer devices ─────────────
   Equivalent to Tailwind's hover: modifier behaviour in v3+/v4:
   only fires when the device has a fine pointer (mouse/trackpad).        */

/* Heading + icon row */
.svc-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.svc-icon {
  flex-shrink: 0;
  color: var(--color-secondary);
  opacity: 0.85;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.svc-icon--white {
  color: #ffffff;
  opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
  .svc:hover .svc-icon {
    opacity: 1;
    transform: scale(1.1);
  }

  .svc--feature:hover .svc-icon--white {
    opacity: 1;
  }
}

/* Stat metric */
.svc-metric {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.03em;
  line-height: 1;
}

.svc-metric-unit {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-left: 4px;
  vertical-align: middle;
}

.svc h3 {
  color: var(--color-primary);
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.svc > p {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.6;
}


.svc-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  border-radius: calc(var(--radius) * 0.6);
  padding: 8px 14px;
  margin-top: auto;
  align-self: flex-start;
  transition: color 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out;
  position: relative;
  z-index: 2;
}

.svc-go-arrow {
  display: inline-block;
  transition: transform 0.2s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .svc:hover .svc-go {
    color: #fff;
    background: var(--color-secondary);
    border-color: var(--color-secondary);
  }

  .svc:hover .svc-go-arrow {
    transform: translateX(4px);
  }
}

/* Feature / pattern-break tile */
.svc--feature {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-primary) 90%, var(--color-secondary)) 0%,
    var(--color-primary) 60%,
    color-mix(in srgb, var(--color-primary) 92%, black) 100%
  );
  border: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

/* Gold CTA inside feature tile — matches "Real people" italic in hero */
.svc--feature .btn {
  background: var(--color-accent);
  color: var(--color-primary);
  border-color: var(--color-accent);
  font-weight: 700;
  transition: filter 0.2s ease-out, transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .svc--feature:hover {
    background: linear-gradient(
      145deg,
      color-mix(in srgb, var(--color-primary) 82%, var(--color-secondary)) 0%,
      color-mix(in srgb, var(--color-primary) 88%, black) 60%,
      color-mix(in srgb, var(--color-primary) 85%, black) 100%
    );
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(3, 31, 127, 0.25);
  }

  /* Button lifts and brightens independently from the card */
  .svc--feature .btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
  }
}

.svc-feature-since {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-on-primary-muted);
}

.svc--feature h3 {
  color: var(--color-on-primary);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.15;
  text-transform: none;
  letter-spacing: normal;
}

.svc-feature-sub {
  font-size: 13px;
  color: color-mix(in srgb, var(--color-on-primary) 65%, transparent);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.svc--feature > p {
  font-size: 14px;
  color: var(--color-on-primary-muted);
  line-height: 1.6;
  max-width: 28ch;
}

.svc-feature-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
  position: relative;
  z-index: 2;
}

.svc-ask {
  font-size: 12.5px;
  color: var(--color-on-primary-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--color-on-primary-muted) 40%, transparent);
  transition: color 0.18s;
}

.svc-ask:hover {
  color: var(--color-on-primary);
}

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

@media (max-width: 580px) {
  .svcs {
    grid-template-columns: 1fr;
  }
}

/* ── MagicBento interactive effects ─────────────────────────────────────
   Applied to .svc cards via JS — all effects are additive; no existing
   card styles are changed.                                               */

/* Scope overflow:hidden and remove transform from CSS transition on
   GSAP-managed cards so transform animations don't double-fire.         */
/* ── Hover: plain drop shadow only ─────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .svc:hover {
    background: #ffffff;
    box-shadow: 0 8px 28px color-mix(in srgb, var(--color-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
    z-index: 1;
  }
}

/* Click ripple element appended by JS                                   */
.svc-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(56, 123, 93, 0.16);
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
}

/* ── Services grid (Our Expertise) ── */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 340px 340px;
  gap: 10px;
  width: 100%;
  max-width: 1300px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: grid-template-columns;
}

/* Directional expansion — only column widths change, rows stay fixed */
.svc-grid:has(.svc-card:nth-child(1):hover) { grid-template-columns: 1.2fr 1.2fr 1.2fr 0.7fr 0.7fr; }
.svc-grid:has(.svc-card:nth-child(2):hover) { grid-template-columns: 0.7fr 0.7fr 0.7fr 1.45fr 1.45fr; }
.svc-grid:has(.svc-card:nth-child(3):hover) { grid-template-columns: 1.35fr 1.35fr 0.77fr 0.77fr 0.77fr; }
.svc-grid:has(.svc-card:nth-child(4):hover) { grid-template-columns: 0.7fr 0.7fr 1.2fr 1.2fr 1.2fr; }

.svc-card:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
.svc-card:nth-child(2) { grid-column: 4 / 6; grid-row: 1; }
.svc-card:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
.svc-card:nth-child(4) { grid-column: 3 / 6; grid-row: 2; }

.svc-card {
  position: relative;
  text-decoration: none;
  display: block;
  cursor: pointer;
  isolation: isolate;
  will-change: transform;
  transform: translateZ(0);
}

.svc-card:hover {
  z-index: 2;
}

.svc-card__clip {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  will-change: transform;
  transform: translateZ(0);
}

/* Arrow rotates 45° on hover to point diagonally */
.svc-card__arrow svg {
  transition: transform 0.3s ease-in-out;
}

.svc-card:hover .svc-card__arrow svg {
  transform: rotate(45deg);
}

.svc-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease-in-out;
  will-change: transform;
}

.svc-card:hover .svc-card__bg {
  transform: scale(1.04);
}

.svc-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.52) 0%,
    rgba(0,0,0,0.18) 40%,
    transparent 70%
  );
  pointer-events: none;
}

.svc-card:hover .svc-card__overlay {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.60) 0%,
    rgba(0,0,0,0.22) 40%,
    transparent 70%
  );
}

.svc-card__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 26px 16px;
}

.svc-card__pill {
  position: absolute;
  top: 22px;
  left: 26px;
  z-index: 2;
  display: inline-block;
  padding: 6px 14px;
  border: 1.5px solid rgba(255,255,255,0.55);
  border-radius: 100px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  background: rgba(80,80,90,0.55);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  line-height: 1;
}

.svc-card__bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 56px;
}

.svc-card__heading {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
  margin: 0;
}

.svc-card__body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  line-height: 1.55;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
  margin: 0;
  opacity: 1;
  transform: translateY(0);
}

.svc-card__arrow {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,210,230,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  background: #ffffff;
  z-index: 20;
  transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
  box-shadow: 0 2px 8px rgba(10,21,77,0.10);
}

.svc-card:hover .svc-card__arrow {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

/* chamfered corner removed */

.svc-card:hover {
  z-index: 1;
}

@media (max-width: 900px) {
  .svc-grid {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 280px 280px;
  }
  .svc-card__heading {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .svc-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 8px;
    margin-top: 24px;
    transition: none;
  }

  /* Override any :has() column resize on mobile */
  .svc-grid:has(.svc-card:nth-child(1):hover),
  .svc-grid:has(.svc-card:nth-child(2):hover),
  .svc-grid:has(.svc-card:nth-child(3):hover),
  .svc-grid:has(.svc-card:nth-child(4):hover) {
    grid-template-columns: 1fr;
  }

  .svc-card:nth-child(1),
  .svc-card:nth-child(2),
  .svc-card:nth-child(3),
  .svc-card:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
    height: 200px;
  }

  /* Disable hover-only animations on mobile (image zoom, arrow rotate) -
     .svc-card itself is deliberately excluded here: it never had a hover
     transform to cancel, and forcing transform: none !important on it was
     also cancelling GSAP's scroll-entrance animation (the cards rising up
     into place), leaving them stuck in their final position with no
     visible motion. */
  .svc-card__clip,
  .svc-card__bg,
  .svc-card__overlay,
  .svc-card__heading,
  .svc-card__body,
  .svc-card__arrow,
  .svc-card__arrow svg {
    transition: none !important;
    transform: none !important;
  }

  /* Arrow: right-center instead of bottom-right */
  .svc-card__arrow {
    bottom: auto;
    top: 50%;
    right: 16px;
    transform: translateY(-50%) !important;
    width: 36px;
    height: 36px;
  }

  .svc-card__body {
    font-size: 12px;
    line-height: 1.45;
  }

  .svc-card__heading {
    font-size: 18px;
  }

  /* Pad right so heading doesn't clash with arrow */
  .svc-card__bottom {
    padding-right: 64px;
  }
}


/* ─── Lab ────────────────────────────────────────────────── */
/* ─── Locations section ───────────────────────────────────── */
.locations-section {
  background: #ffffff;
  border-radius: 0;
  width: 100%;
  margin: 0;
  padding: 0 0 clamp(20px, 2.5vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
  position: relative;
}

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

.locations-section .sec-head {
  text-align: center;
}

.locations-section .sec-head h2 {
  font-size: clamp(26px, 3.8vw, 51px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-primary);
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  white-space: nowrap;
}

.loc-heading-break {
  display: none;
}

.hiw-heading-break {
  display: none;
}

.faq-heading-break {
  display: none;
}

@media (max-width: 700px) {
  .locations-section .sec-head h2 { white-space: normal; }
  .loc-heading-break {
    display: inline;
  }
  .hiw-heading-break {
    display: inline;
  }
  .faq-heading-break {
    display: inline;
  }
}

.locations-section .sec-head h2 em {
  font-style: italic;
  font-weight: 700;
  color: var(--color-primary) !important;
}

.locations-section .sec-head p {
  margin-left: auto;
  margin-right: auto;
  max-width: 780px;
  opacity: 1 !important;
}

.loc-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: var(--space-4);
}

.loc-card[data-animate] {
  transform: translateY(60px);
  will-change: transform;
}

.locations-cta {
  margin-top: clamp(20px, 2.5vw, 32px);
  text-align: center;
}

.loc-card {
  position: relative;
  background: var(--color-bg);
  border: 1px solid rgba(3,31,127,0.10);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(3,31,127,0.07);
  display: flex;
  flex-direction: column;
  /* No overflow:hidden here - it was clipping the hover box-shadow against
     the card's own edges. .loc-card-top below already clips the image to
     its own rounded top corners, so the card itself doesn't need to. */
  /* No transform here: GSAP drives this element's transform on every
     scroll tick for the scrub rise-up animation. A CSS transition on
     transform would fight it - each GSAP-set inline value would kick
     off its own 0.4s CSS transition "chasing" the already-moving GSAP
     value, making the card lag far behind (and desync from) anything
     else sharing the same scrub tween (e.g. the "View all locations"
     button below it, which has no such conflict). Hover lift now uses
     box-shadow/border-color only - see .loc-card:hover below. */
  transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.4s ease;
}

/* Badge secondary animation */
.loc-badge[data-animate-badge] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.loc-badge[data-animate-badge].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced-motion: skip animation entirely */
@media (prefers-reduced-motion: reduce) {
  .loc-card[data-animate],
  .loc-badge[data-animate-badge] {
    opacity: 1;
    transform: none;
    transition: none;
  }}

@media (hover: hover) and (pointer: fine) {
  .loc-card:hover {
    box-shadow: 0 8px 24px rgba(3, 31, 127, 0.12);
    border-color: var(--color-border-strong);
  }
}

/* Location image / photo placeholder */
.loc-card-top {
  position: relative;
  background: var(--color-card);
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* .loc-card no longer clips its own corners (see comment there), so this
     wrapper needs its own matching radius on the two top corners. */
  border-radius: var(--radius) var(--radius) 0 0;
}

.loc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.loc-card:hover .loc-img {
  transform: scale(1.05);
}

/* Badge overlay on the image */
.loc-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
}

.loc-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
}

.loc-badge--since {
  background: var(--color-accent);
  color: var(--color-primary);
}

.loc-badge--hub {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.loc-badge--new {
  background: var(--color-secondary);
  color: var(--color-on-primary);
}

/* Card body */
.loc-body {
  padding: 20px 20px 72px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.loc-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}

.loc-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.loc-meta {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 12px;
  margin-top: auto;
}

/* Address */
.loc-meta li:nth-child(1) {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
}

/* Opening hours */
.loc-meta li:nth-child(2) {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-secondary);
}

/* Phone & email */
.loc-meta li:nth-child(3) {
  font-size: 12px;
  color: var(--color-text-muted);
}

.loc-meta li:nth-child(3) a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s;
}

@media (hover: hover) and (pointer: fine) {
  .loc-meta li:nth-child(3) a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
  }
}

/* Pharmacist in Charge */
.loc-meta li:nth-child(4) {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-primary);
  margin-top: 2px;
}

.loc-meta strong {
  color: var(--color-primary);
  font-weight: 700;
}

.loc-card__arrow {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  background: #ffffff;
  z-index: 2;
  transition: background 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 2px 8px rgba(10, 21, 77, 0.08);
}

/* Phone/email links sit above the overlay */
.loc-meta a {
  position: relative;
  z-index: 3;
}

@media (hover: hover) and (pointer: fine) {
  .loc-card__arrow svg {
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .loc-card:hover .loc-card__arrow {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
  }
  .loc-card:hover .loc-card__arrow svg {
    transform: rotate(45deg);
  }
}

/* ── Australia-wide card (5th tile, full-width span) ────────── */
/* ── Standalone Australia-wide band ──────────── */
/* ─── Australia-wide band ───────────────────────────────────── */
.nationwide-section {
  background: var(--color-primary);
  padding: var(--gap) 0;
}

.loc-card--nationwide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
}

.loc-nationwide-copy { display: flex; flex-direction: column; gap: 0; }

.loc-nationwide-head em { font-style: italic; font-weight: 300; color: var(--color-accent); }

.loc-nationwide-img-placeholder {
  border-radius: var(--radius);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loc-nationwide-img-placeholder .aus-map-svg {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.85;
}

@media (max-width: 768px) {
  .loc-card--nationwide { grid-template-columns: 1fr; }
  .loc-nationwide-img-placeholder { display: none; }
}

.loc-nationwide-head {
  font-size: clamp(32px, 4.8vw, 64px);
  font-weight: 700;
  color: var(--color-on-primary);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 16px;
}

.loc-nationwide-sub {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-on-primary-muted);
}

.loc-nationwide-actions {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 28px;
}


.loc-nationwide-ask {
  font-size: 13px;
  color: var(--color-on-primary-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Australia map route animation — GSAP timeline owns all animation.
   stroke-dashoffset is initialised here and tweened to 0 by the unified timeline. */
.aus-route {
  stroke-dasharray: 1;
  stroke-dashoffset: 1; /* hidden by default; GSAP draws each route in sequence */
}

/* No CSS keyframe animation — GSAP handles stroke-dashoffset via attr tweening */

.aus-ripple {
  opacity: 0; /* GSAP sets and manages; CSS provides safe initial state */
}

.aus-pulse {
  opacity: 0; /* hidden until GSAP/rAF fires it */
}

.aus-origin-pulse {
  transform-origin: 495px 510px;
}

/* No CSS keyframe animation for origin pulse — GSAP controls it */

@media (prefers-reduced-motion: reduce) {
  .aus-route        { stroke-dashoffset: 0; } /* show routes immediately — no animation */
  .aus-origin-pulse { display: none; }
  .aus-pulse        { display: none; }
}

/* ─── Timeline — line & dots ─────────────────────────── */
.timeline-section {
  padding: clamp(80px, 10vw, 140px) 0 clamp(16px, 2vw, 32px);
  background: var(--color-bg);
  overflow: hidden;
  position: relative;
  z-index: 2;
  border-radius: 0;
}

.tl-head {
  margin-bottom: clamp(48px, 6vw, 80px);
  text-align: center;
}

.tl-cta-wrap {
  padding: 8px 0 clamp(24px, 3vw, 40px);
  display: flex;
  justify-content: center;
  align-items: center;
}


.tl-head h2 {
  color: var(--color-primary);
  max-width: none;
}

.tl-head h2 em {
  color: var(--color-secondary);
  font-style: italic;
  font-weight: 300;
}

/* ── Scroll container ── */
.tl-scroll-outer {
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  padding: 0 var(--pad);
  box-sizing: border-box;
  padding-bottom: clamp(48px, 6vw, 80px);
}

.tl-scroll-inner {
  position: relative;
  min-width: 100%;
}

/* ── Track line ── */
.tl-track-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  z-index: 0;
  overflow: visible;
}

.tl-track-line__bg {
  position: absolute;
  inset: 0;
  background: #E6E9F2;
  border-radius: 4px;
}

.tl-track-line__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 4px;
  will-change: width;
  background: linear-gradient(to right, #031F7F calc(100% - 20px), transparent 100%);
  box-shadow: 0 2px 8px rgba(3, 31, 127, 0.15);
}

/* Shimmer rides on top of the fill as a sibling overlay */
.tl-track-line__shimmer {
  display: none;
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  width: 80px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.35), transparent);
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}

.tl-track-line__shimmer.is-shimmer {
  display: block;
  animation: tl-shimmer 5s linear infinite;
}

@keyframes tl-shimmer {
  0%   { transform: translateX(-80px); opacity: 0; }
  5%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(var(--tl-fill-width, 100%)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-track-line__shimmer { display: none !important; }
}

/* ── Milestones list ── */
.tl-milestones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  position: relative;
  z-index: 1;
  min-height: 320px;
}

/* Each milestone: flex column, dot absolutely on the line */
.tl-milestone {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

/* Above: content cluster at top, gap to dot */
.tl-milestone--above {
  justify-content: flex-start;
  padding-top: 16px;
}

.tl-milestone--above .tl-milestone__label { order: 1; }
.tl-milestone--above .tl-milestone__title { order: 2; }
.tl-milestone--above .tl-milestone__desc  { order: 3; }
.tl-milestone--above .tl-milestone__year  { order: 4; }

/* Below: content cluster at bottom, gap to dot */
.tl-milestone--below {
  justify-content: flex-end;
  padding-bottom: 16px;
}

.tl-milestone--below .tl-milestone__label { order: 1; }
.tl-milestone--below .tl-milestone__title { order: 2; }
.tl-milestone--below .tl-milestone__desc  { order: 3; }
.tl-milestone--below .tl-milestone__year  { order: 4; }

/* Dot: absolutely centred on the track line, decoupled from content height */
.tl-milestone__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #E6E9F2;
  background: transparent;
  z-index: 2;
  transition: border-color 0.3s ease;
  cursor: pointer;
}

.tl-milestone__dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.3s ease;
}

.tl-milestone__dot.is-filled {
  border-color: #031F7F;
}

.tl-milestone__dot.is-filled::after {
  background: #031F7F;
}

.tl-milestone__dot.is-active {
  border-color: #F8CF40;
  box-shadow: none;
  animation: tl-pulse 2s ease-in-out infinite;
}

.tl-milestone__dot.is-active::after {
  background: #031F7F;
}

@keyframes tl-pulse {
  0%, 100% { box-shadow: 0 0 0 0px rgba(248,207,64,0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(248,207,64,0.2); }
}

/* Stem */
.tl-milestone__stem { display: none; }

/* Image placeholder */
.tl-milestone__img {
  display: none;
}

/* Label */
.tl-milestone__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
  white-space: nowrap;
  text-align: center;
  margin-bottom: 3px;
  opacity: 1;
}

/* Title */
.tl-milestone__title {
  font-size: 17px;
  font-weight: 700;
  color: #031F7F;
  text-align: center;
  line-height: 1.25;
  white-space: nowrap;
  margin-bottom: 5px;
  opacity: 1;
}

/* Descriptor */
.tl-milestone__desc {
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  color: rgba(3, 31, 127, 0.5);
  text-align: center;
  line-height: 1.4;
  margin-bottom: 10px;
  white-space: normal;
  max-width: 140px;
  opacity: 1;
}

.tl-milestone--below .tl-milestone__desc {
  margin-bottom: 0;
}

.tl-milestone--below .tl-milestone__label {
  margin-bottom: 3px;
  margin-top: 10px;
}

/* Year */
.tl-milestone__year {
  display: none;
}

/* Once animated (or reduced-motion / no-JS), force all text visible */
.timeline-section.has-animated .tl-milestone__label,
.timeline-section.has-animated .tl-milestone__title,
.timeline-section.has-animated .tl-milestone__desc,
.timeline-section.has-animated .tl-milestone__year {
  opacity: 1;
}

/* ── Mobile nav buttons (hidden on desktop) ── */
.tl-mobile-nav {
  display: none;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 var(--pad) 24px;
}

.tl-nav-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid #E6E9F2;
  background: #fff;
  color: #031F7F;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.tl-nav-btn svg {
  width: 18px;
  height: 18px;
}

.tl-nav-btn:hover {
  background: color-mix(in srgb, #031F7F 6%, white);
}

.tl-nav-btn:focus-visible {
  outline: 2px solid #F8CF40;
  outline-offset: 2px;
}

.tl-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Mobile overrides ── */
@media (max-width: 767px) {
  .tl-scroll-outer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0 0 24px;
  }

  .tl-scroll-outer::-webkit-scrollbar {
    display: none;
  }

  .tl-scroll-inner {
    min-width: max-content;
    padding: 0 calc(50vw - 80px); /* centre active milestone */
  }

  .tl-milestones {
    min-height: 220px;
  }

  .tl-milestone {
    width: 160px;
    flex: 0 0 160px;
    scroll-snap-align: center;
  }

  .tl-milestone__title {
    font-size: 13px;
  }

  .tl-mobile-nav {
    display: flex;
  }

  .tl-track-line {
    left: calc(50vw - 80px);
    right: calc(50vw - 80px);
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .tl-track-line__fill {
    width: 100% !important;
  }
  .tl-milestone__dot {
    transition: none;
    border-color: #031F7F !important;
  }
  .tl-milestone__dot::after {
    background: #031F7F !important;
    transition: none;
  }
  .tl-milestone__dot.is-active {
    animation: none;
  }
}

/* ─── Then & Now carousel ─── */
.tnc-carousel {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px 48px;
  position: relative;
  overflow: hidden;
}

.tnc-track {
  display: flex;
  gap: 20px;
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}

.tnc-slide {
  flex: 0 0 calc(33.333% - 14px);
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  perspective: 800px;
}

/* TiltedCard tilt effect */
.tnc-slide .tnc-img {
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.3s ease;
  cursor: pointer;
}

.tnc-slide .tnc-img:hover {
  box-shadow: 0 20px 60px rgba(3,31,127,0.2);
}

.tnc-tilt-caption {
  pointer-events: none;
  position: fixed;
  border-radius: 6px;
  background: rgba(3,31,127,0.85);
  color: #ffffff;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0;
  z-index: 9999;
  white-space: nowrap;
  transform: translateY(-8px);
  transition: opacity 0.15s, transform 0.15s;
  backdrop-filter: blur(4px);
}

.tnc-tilt-caption.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.tnc-img {
  width: 100%;
  aspect-ratio: 5/4;
  min-height: 280px;
  border-radius: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.tnc-img--sepia {
  background: linear-gradient(135deg, #c9b99a 0%, #a08060 60%, #7a5c3a 100%);
}

.tnc-img--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.tnc-img--mid {
  background: linear-gradient(135deg, #b0c4d8 0%, #7a9ab8 60%, #4a6a88 100%);
}

.tnc-img--now {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 15%, white) 0%, color-mix(in srgb, var(--color-primary) 40%, white) 100%);
}

/* Subtle film-grain texture overlay */
.tnc-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  border-radius: inherit;
}

/* Placeholder camera icon */
.tnc-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Crect x='6' y='14' width='36' height='26' rx='4' stroke='rgba(255,255,255,0.25)' stroke-width='2'/%3E%3Ccircle cx='24' cy='27' r='7' stroke='rgba(255,255,255,0.25)' stroke-width='2'/%3E%3Cpath d='M18 14l2-4h8l2 4' stroke='rgba(255,255,255,0.25)' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center center / 64px 64px no-repeat;
  pointer-events: none;
}

.tnc-img__label {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.25);
  padding: 4px 10px;
  border-radius: 100px;
  backdrop-filter: blur(4px);
}

.tnc-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tnc-caption__era {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary, #2F7D3A);
}

.tnc-caption__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1.45;
}

.tnc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}

.tnc-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border, #e0e4ef);
  background: #fff;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.tnc-btn svg { width: 18px; height: 18px; }

.tnc-btn:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 4%, white);
}

.tnc-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.tnc-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tnc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-border, #e0e4ef);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.tnc-dot.is-active {
  background: var(--color-primary);
  transform: scale(1.3);
}

@media (max-width: 1024px) {
  .tnc-slide { flex: 0 0 calc(50% - 10px); }
  .tnc-carousel { padding: 0 32px 40px; }
}

@media (max-width: 767px) {
  .tnc-slide { flex: 0 0 calc(100% - 0px); }
  .tnc-carousel { padding: 0 24px 32px; }
}

/* Responsive */
@media (max-width: 960px) {
  .loc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  /* .wrap's base rule centers itself with margin: 0 auto, which is fine as
     a normal block - but .locations-section is a flex column, and a flex
     item with an auto margin on the cross axis (left/right, here) opts OUT
     of align-items: stretch entirely per spec, falling back to a
     fit-content width based on its own content instead of the section's
     width. That's what was blowing the whole card wider than the viewport
     on mobile. Overriding the auto margin to 0 restores normal
     stretch-to-fill. Scoped to mobile only - desktop relies on the auto
     margin for centering. */
  .locations-section > .wrap {
    margin-left: 0;
    margin-right: 0;
    min-width: 0;
  }

  /* Horizontal scroll-snap carousel instead of a stacked single column -
     same pattern as .empathy-cards. align-self:stretch overrides the
     parent's align-items:center (which would otherwise shrink-to-fit this
     flex item), and the ::before spacer gives real left-edge breathing
     room since scroll-snap containers don't reliably honour padding as a
     scroll-start inset. */
  .loc-grid {
    display: flex;
    align-self: stretch;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    width: auto;
    /* A horizontal scroll container clips vertically too (overflow-x: auto
       forces overflow-y to auto rather than visible), so the hover lift +
       shadow on .loc-card was getting cut flush at this box's own edges.
       18px of top/bottom padding gives it room to breathe; margin-top is
       reduced by the same amount so the gap under the heading looks the
       same as before. */
    margin: 14px calc(var(--space-4) * -1) 0;
    padding: 18px var(--space-4) 18px;
    overscroll-behavior-x: contain;
  }

  .locations-cta {
    margin-top: 24px;
  }

  /* .sec-head's base margin-bottom (64px) was the real source of the big
     gap above the cards - .loc-grid's own margin-top was only ever 14px. */
  .locations-section .sec-head {
    margin-bottom: 24px;
  }

  .loc-grid::before {
    content: '';
    flex: 0 0 var(--space-5);
  }

  .loc-grid::-webkit-scrollbar {
    display: none;
  }

  .loc-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  .loc-card--nationwide {
    flex: 0 0 82%;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .loc-card-top {
    height: 180px;
  }

  .loc-body {
    padding: 16px 16px 56px;
  }

  .loc-meta li:nth-child(1) {
    min-height: auto;
  }
}

/* ── Delivery ticker band ───────────────────────────────────────── */

/* ─── Affiliations logo band ────────────────────────── */
.tl-logo-band-wrap {
  padding: 0;
}

.tl-logo-band {
  background: var(--color-primary, #031F7F);
  border: none;
  border-radius: 0;
  padding: 20px clamp(24px, 5vw, 80px);
}

.tl-logo-static {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 5vw, 64px);
}

.tl-logo-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  margin: 0;
  flex-shrink: 0;
  padding-right: clamp(20px, 3vw, 40px);
  border-right: 1px solid rgba(255,255,255,0.15);
}

.tl-logo-items {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  flex-wrap: wrap;
}

.tl-logo-track {
  display: none;
}

.tl-logo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.tl-logo-item img {
  height: 36px;
  width: auto;
  opacity: 0.85;
  filter: brightness(0) invert(1) !important;
}

.tl-logo-item--placeholder {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  white-space: nowrap;
  padding: 8px 16px;
  border: 1.5px dashed rgba(255,255,255,0.2);
  border-radius: 4px;
}

@media (max-width: 767px) {
  .tl-logo-static {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .tl-logo-label {
    border-right: none;
    padding-right: 0;
  }
  .tl-logo-items {
    gap: 20px;
  }
}

/* ── How It Works ───────────────────────────────────────────────────────── */
#how-it-works {
  /* No vertical padding here - .hiw-sticky (inside) already carries its own
     top/bottom padding, so this was doubling up the space on both edges. */
  padding: 0;
  background: #f5f7fc;
  position: relative;
  z-index: 20;
  margin-top: 0;
  border-radius: 0;
  height: auto;
  overflow: hidden;
}

/* Single navy glow, dead-centre only, fading to transparent well before it
   reaches any edge - so the top/bottom/side seams against the wave and the
   section below never change colour, only the middle (behind the cards)
   breathes very faintly. */
#how-it-works::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Falls off to transparent by 26% of the box radius (rather than 42%) so
     even at the animation's largest scale it never reaches the top/bottom
     edge of the section - that's what was getting hard-clipped by the
     section's overflow: hidden and reading as a harsh line. */
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-primary) 20%, transparent) 0%, transparent 26%);
  transform-origin: center;
  animation: hiw-glow-breathe 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes hiw-glow-breathe {
  0%   { transform: translate(0, 0)      scale(1);    opacity: 0.65; }
  25%  { transform: translate(2%, -1%)   scale(1.08); opacity: 1;    }
  50%  { transform: translate(-1%, 2%)   scale(1.15); opacity: 0.8;  }
  75%  { transform: translate(1%, 1%)    scale(1.06); opacity: 1;    }
  100% { transform: translate(0, 0)      scale(1);    opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
  #how-it-works::before {
    animation: none;
  }
}

.hiw-sticky {
  position: relative;
  top: auto;
  height: auto;
  display: flex;
  align-items: center;
  /* Top padding trimmed - the wave transition right before this section
     (section-wave--svc) already supplies that buffer coming out of
     .services-section. Bottom padding gives a deliberate but modest gap
     before the nationwide section below (both share the same #f5f7fc tint,
     so this is the only thing separating the two visually). */
  padding: clamp(16px, 2vw, 32px) clamp(32px, 5vw, 80px) clamp(56px, 6vw, 92px);
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.hiw-head {
  margin-bottom: clamp(32px, 4vw, 52px);
  text-align: center;
}

.hiw-subheading {
  margin: 24px auto 0;
  max-width: 640px;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: center;
  font-weight: 400;
}

.hiw-head h2 {
  color: var(--color-primary);
  max-width: none;
  font-size: clamp(26px, 3.8vw, 51px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.hiw-head h2 em {
  color: var(--color-primary) !important;
  font-style: italic;
  font-weight: 700;
}

.hiw-cards-wrap {
  position: relative;
}

.hiw-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  position: relative;
}

.hiw-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 28px);
  list-style: none;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
}

.hiw-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.hiw-trust__item strong {
  color: var(--color-text);
  font-weight: 700;
}

.hiw-trust__icon {
  color: var(--color-secondary);
  font-size: 13px;
  line-height: 1;
}

.hiw-trust__divider {
  width: 1px;
  height: 14px;
  background: var(--color-border-strong);
}

.hiw-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 14px;
  cursor: default;
  background: #ffffff;
  border: 1.5px solid rgba(10, 21, 77, 0.1);
  border-radius: 20px;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.5vw, 36px);
  box-shadow: 0 2px 12px rgba(10, 21, 77, 0.06), 0 1px 3px rgba(10, 21, 77, 0.04);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.hiw-card:hover {
  box-shadow: 0 8px 32px rgba(10, 21, 77, 0.12), 0 2px 6px rgba(10, 21, 77, 0.06);
  border-color: rgba(10, 21, 77, 0.18);
  transform: translateY(-3px);
}

.hiw-card-icon {
  position: relative;
  width: 80px;
  height: 80px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
  border-radius: 0 !important;
  transition: none;
}

.hiw-card-icon::after { display: none; }

.hiw-card:hover .hiw-card-icon {
  background: transparent;
  transform: none;
}
.hiw-card:hover .hiw-card-icon svg {
  transform: none;
}

.hiw-shape {
  display: block;
  overflow: visible;
}

.hiw-card-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--color-secondary) 35%, var(--color-bg-2));
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

@keyframes hiw-icon-ping {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.75);
  }
}

@keyframes hiw-icon-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.hiw-icons-animated .hiw-card:nth-child(1) .hiw-card-icon::after { animation: none; }
.hiw-icons-animated .hiw-card:nth-child(2) .hiw-card-icon::after { animation: none; }
.hiw-icons-animated .hiw-card:nth-child(3) .hiw-card-icon::after { animation: none; }

.hiw-icons-animated .hiw-card:nth-child(1) .hiw-card-icon { animation: none; }
.hiw-icons-animated .hiw-card:nth-child(2) .hiw-card-icon { animation: none; }
.hiw-icons-animated .hiw-card:nth-child(3) .hiw-card-icon { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .hiw-icons-animated .hiw-card-icon,
  .hiw-icons-animated .hiw-card-icon::after {
    animation: none !important;
  }
}

.hiw-card-icon svg {
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}

@keyframes hiw-arc-sweep {
  0%, 100% { transform: rotate(-50deg); }
  50%      { transform: rotate(40deg); }
}

.hiw-card:nth-child(1) .hiw-shape--1 circle {
  transform-origin: center;
  animation: hiw-arc-sweep 3.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hiw-card:nth-child(1) .hiw-shape--1 circle {
    animation: none;
  }
}

/* Shape 2 — gentle pulse */
@keyframes hiw-sph-pulse {
  0%, 100% { transform: scale(1);    }
  50%       { transform: scale(1.08); }
}

.hiw-card:nth-child(2) .hiw-shape--2 {
  transform-origin: 40px 40px;
  animation: hiw-sph-pulse 2s ease-in-out infinite;
}

/* Shape 3 — diamond snaps 90° at a time */
@keyframes hiw-diamond-snap {
  0%   { transform: rotate(0deg);   }
  18%  { transform: rotate(90deg);  }
  28%  { transform: rotate(90deg);  }
  46%  { transform: rotate(180deg); }
  56%  { transform: rotate(180deg); }
  74%  { transform: rotate(270deg); }
  84%  { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

.hiw-card:nth-child(3) .hiw-shape--3 {
  transform-origin: center;
  animation: hiw-diamond-snap 3.2s cubic-bezier(0.4,0,0.2,1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hiw-card:nth-child(1) .hiw-shape--1 circle,
  .hiw-card:nth-child(2) .hiw-shape--2 circle,
  .hiw-card:nth-child(3) .hiw-shape--3 {
    animation: none;
  }
}

/* Each card gets a different organic blob shape */
.hiw-card:nth-child(1) .hiw-card-icon {
  border-radius: 42% 58% 64% 36% / 48% 38% 62% 52%;
}
.hiw-card:nth-child(2) .hiw-card-icon {
  border-radius: 60% 40% 38% 62% / 36% 60% 40% 64%;
}
.hiw-card:nth-child(3) .hiw-card-icon {
  border-radius: 36% 64% 56% 44% / 62% 34% 66% 38%;
}

.hiw-card:hover .hiw-card-icon {
  background: transparent;
  transform: none;
}
.hiw-card:hover .hiw-card-icon svg {
  transform: none;
}

.hiw-card .hiw-row-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

.hiw-card .hiw-card-heading {
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

.hiw-card .hiw-card-copy {
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
  max-width: none;
}

.hiw-card-body {
  display: contents;
}

.hiw-card-link {
  margin-top: 4px;
}

@media (max-width: 767px) {
  #how-it-works {
    height: auto;
    margin-top: 0;
    border-radius: 0;
    padding: 0;
  }

  .hiw-sticky {
    position: static;
    height: auto;
    /* Bottom padding matched to the desktop buffer before the nationwide
       section below (same #f5f7fc tint on both, so padding alone has to
       do the separating). */
    padding: 16px 24px 72px;
    border-radius: 0;
    margin: 0;
  }

  .services-section {
    margin-top: 0;
    border-radius: 0;
  }

  .hiw-head h2 {
    white-space: normal;
  }

  .hiw-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hiw-trust {
    flex-direction: row;
    justify-content: center;
    gap: 10px 14px;
  }

  .hiw-trust__item {
    font-size: 12.5px;
  }

  .hiw-trust__divider {
    height: 12px;
  }

  .hiw-card-copy {
    display: block;
  }

  .hiw-card {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 20px 20px;
    border-radius: 16px;
  }

  .hiw-card-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .hiw-card-icon svg {
    width: 52px;
    height: 52px;
  }

  .hiw-card > *:not(.hiw-card-icon) {
    flex: 1;
  }

  .hiw-card-body-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .hiw-card .hiw-card-heading {
    font-size: 15px;
    margin: 0;
  }

  .hiw-card .hiw-card-copy {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
  }

  .hiw-card-link {
    display: none;
  }

  .hiw-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
  }
}

/* ─── Partner Clinics ─────────────────────────────────── */
/* ─── Partner Clinics — feature card redesign ───────────────────────────── */
.partner-clinics-section {
  background: var(--color-bg);
  padding: clamp(80px, 10vw, 120px) 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.partner-clinics-head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}

.partner-clinics-head h2 {
  max-width: none;
  margin: 0 auto;
}

.partner-clinics-sub {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-top: 16px;
}

.partner-card-stage {
  max-width: 860px;
  margin: 0 auto;
  perspective: 1200px;
}

.partner-card {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 20px;
  aspect-ratio: 16/9;
  cursor: pointer;
  isolation: isolate;
  will-change: transform;
}

.partner-card__clip {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
}

.partner-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

.partner-card:hover .partner-card__bg {
  transform: scale(1.04);
}

.partner-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(3, 20, 80, 0.88) 0%,
    rgba(3, 20, 80, 0.45) 50%,
    rgba(3, 20, 80, 0.18) 100%
  );
}

.partner-card__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 3vw, 36px);
}

.partner-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.partner-card__pill {
  display: inline-block;
  padding: 6px 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 100px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.12);
}

.partner-card__logo {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

.partner-card__logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.partner-card__bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.partner-card__offer {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.partner-card__name {
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.1;
}

.partner-card__points {
  list-style: none;
  padding: 0;
  margin: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.partner-card__points li {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  padding-left: 14px;
  position: relative;
}

.partner-card__points li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.4);
}

.partner-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  padding: 9px 16px 9px 20px;
  border-radius: 100px;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.partner-card:hover .partner-card__cta {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.7);
}

.partner-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.partner-card:hover .partner-card__arrow {
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 767px) {
  .partner-card {
    aspect-ratio: 3/4;
  }
  .partner-clinics-section {
    padding: 56px 0;
  }
}

/* ─── Quote ──────────────────────────────────────────────── */
.quote {
  background: var(--color-bg);
  color: #fff;
  padding: var(--gap) 0;
}

/* Full-bleed pinned video quote — replaces the old card layout */
.quote--video {
  position: relative;
  height: 50vh;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 24px;
  margin: 0 clamp(24px, 4vw, 48px);
}

/* ── Jenny quote — side-by-side layout ── */
.qv-sideby {
  background: #f5f7fc;
  padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}

.qv-sideby::before {
  /* Same leaf-watermark treatment as #act-1 - tucked into the bottom-right
     corner behind the quote text so it reads as brand texture, not clutter. */
  content: '';
  position: absolute;
  right: -6%;
  bottom: 4%;
  width: clamp(260px, 32vw, 480px);
  height: clamp(260px, 32vw, 480px);
  background: url('../../assets/favicons/HCP.svg?v=5') no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.qv-sideby__inner {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  max-width: 1250px;
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .qv-sideby::before {
    /* Bigger and intentionally bleeding off the right edge (~30% clipped by
       this section's overflow:hidden), matching the off-canvas treatment
       used for the #act-1 watermark rather than sitting fully inset. */
    right: -9%;
    bottom: 5%;
    width: clamp(220px, 58vw, 320px);
    height: clamp(220px, 58vw, 320px);
  }
}

.qv-sideby__video {
  flex: 0 0 40%;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  max-height: 480px;
}

.qv-sideby__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.qv-sideby__quote {
  flex: 1;
  position: relative;
  padding-left: clamp(24px, 3vw, 40px);
}

.qv-sideby__quote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: var(--color-secondary);
  transform: scaleY(0);
  transform-origin: top center;
  transition: none;
}

.qv-sideby__quote.bar-grown::before {
  transform: scaleY(1);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

#quote-scene .quote-body {
  text-align: left;
  max-width: none;
  padding: 0;
  opacity: 1;
}

@media (max-width: 767px) {
  .qv-sideby__inner {
    flex-direction: column;
  }
  .qv-sideby__video {
    flex: none;
    width: 100%;
    max-height: 420px;
  }
  #quote-scene .quote-body {
    text-align: center;
  }
}

.quote-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  pointer-events: none;
  z-index: 0;
  transform-origin: center center;
  will-change: transform;
}

.quote-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.45);
  z-index: 1;
}

.quote--video .quote-body {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 1000px;
  padding: 0 clamp(24px, 6vw, 80px);
}

.quote .wrap {
  max-width: var(--maxw);
}

.quote-layout {
  max-width: 100%;
}

.quote-body {
  min-width: 0;
  padding: 0;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.quote-portrait {
  overflow: hidden;
  border-radius: var(--radius);
}

.quote-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

@media (max-width: 768px) {
  .quote-layout {
    grid-template-columns: 1fr;
  }

  .quote-portrait {
    max-height: 340px;
  }
}

.quote .eyebrow {
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.quote .eyebrow::before {
  background: var(--color-secondary);
}

.quote-display {
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}

.quote-display em {
  font-style: italic;
  font-weight: 300;
  color: var(--color-secondary);
}

/* Modern quote layout */
.quote-modern {
  position: relative;
  padding-top: 0;
  margin-bottom: 16px;
}

.quote-modern::before {
  display: none;
}

.quote-modern__display {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: #031f7f;
  margin-bottom: 12px;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

.quote-modern__display::before {
  content: '\201C';
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -0.35em;
  margin-right: 0.05em;
  color: var(--color-primary);
  font-weight: 300;
}

.quote-modern__display::after {
  content: '\201D';
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -0.35em;
  margin-left: 0.05em;
  color: var(--color-primary);
  font-weight: 300;
}

.quote-modern__display em {
  font-style: italic;
  font-weight: 700;
  color: #031F7F;
}

.quote-modern__sub {
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0;
}

.quote blockquote {
  position: relative;
  font-size: clamp(16px, 1.8vw, 22px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.38;
  color: #fff;
  letter-spacing: -0.01em;
  padding-top: 0.5em;
}

.quote blockquote::before {
  display: none;
}

.quote blockquote p {
  position: relative;
  z-index: 1;
}

.quote-highlight {
  font-style: italic;
  color: var(--color-accent);
  font-weight: 500;
}

.quote-by {
  margin-top: 16px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(3, 31, 127, 1);
  display: inline-block;
}

.quote .eyebrow {
  color: color-mix(in srgb, var(--color-on-primary) 60%, transparent);
}

/* ─── Trust / Why trust us ───────────────────────────────── */
.trust-section {
  background: #ffffff;
  padding: clamp(56px, 7vw, 96px) 0 0;
  position: relative;
  overflow: hidden;
}

.trust-tablets {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.trust-tablet {
  position: absolute;
  opacity: 0.3;
  will-change: transform;
}

@keyframes trust-float-a {
  0%,100% { transform: translateY(0px) rotate(var(--rot)); }
  50%      { transform: translateY(-16px) rotate(var(--rot)); }
}
@keyframes trust-float-b {
  0%,100% { transform: translateY(0px) rotate(var(--rot)); }
  50%      { transform: translateY(12px) rotate(var(--rot)); }
}
@keyframes trust-float-c {
  0%,100% { transform: translateY(0px) rotate(var(--rot)); }
  50%      { transform: translateY(-9px) rotate(var(--rot)); }
}

.trust-tablet:nth-child(1) { width:72px;  top:5%;   left:1%;   --rot:-18deg; animation: trust-float-a 6s ease-in-out infinite; }
.trust-tablet:nth-child(2) { width:48px;  top:18%;  left:10%;  --rot:34deg;  animation: trust-float-b 7.5s ease-in-out infinite 1s; }
.trust-tablet:nth-child(3) { width:88px;  top:3%;   left:89%;  --rot:12deg;  animation: trust-float-a 8s ease-in-out infinite 0.5s; }
.trust-tablet:nth-child(4) { width:56px;  top:25%;  left:95%;  --rot:-42deg; animation: trust-float-c 5.5s ease-in-out infinite 2s; }
.trust-tablet:nth-child(5) { width:64px;  top:60%;  left:2%;   --rot:22deg;  animation: trust-float-b 9s ease-in-out infinite 0.8s; }
.trust-tablet:nth-child(6) { width:40px;  top:75%;  left:7%;   --rot:-60deg; animation: trust-float-a 6.5s ease-in-out infinite 3s; }
.trust-tablet:nth-child(7) { width:80px;  top:70%;  left:91%;  --rot:50deg;  animation: trust-float-c 7s ease-in-out infinite 1.5s; }
.trust-tablet:nth-child(8) { width:52px;  top:88%;  left:83%;  --rot:-25deg; animation: trust-float-b 8.5s ease-in-out infinite 0.3s; }

.trust-inner { position: relative; z-index: 1; }

.trust-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, 0.5vw, 6px);
  padding-bottom: clamp(24px, 3vw, 40px);
}

.trust-head {
  text-align: center;
  margin-bottom: clamp(10px, 1.2vw, 16px);
}

.trust-head h2 {
  font-size: clamp(26px, 3.8vw, 51px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-primary);
  text-align: center;
  max-width: none;
  margin: 0 auto;
}

.trust-head h2 em {
  font-style: italic;
  font-weight: 700;
  color: var(--color-primary) !important;
}
.trust-subheading em {
  font-style: normal;
  font-weight: 400;
  color: inherit;
}

@media (max-width: 767px) {
  /* Scoped to the homepage teaser strip only - this caps the preview to
     4 people on mobile. The full Our Team page shows everyone, so it
     must not be hit by this rule. */
  .trust-section .staff-card:nth-child(n+5) { display: none; }
}

.trust-subheading {
  margin: 24px auto 0;
  max-width: 640px;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: center;
  font-weight: 400;
}

/* ── Staff specialty filter ── */
.staff-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 24px auto 32px;
  padding: 6px;
  background: #ffffff;
  border: 1.5px solid rgba(3,31,127,0.10);
  border-radius: 100px;
  width: fit-content;
}

.staff-filter__pill {
  padding: 8px 20px;
  border-radius: 100px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: rgba(3,31,127,0.5);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.staff-filter__pill:hover {
  background: rgba(3,31,127,0.08);
  color: var(--color-primary);
}

.staff-filter__pill.is-active {
  background: var(--color-primary);
  color: #fff;
}

@media (max-width: 600px) {
  /* On mobile, 5 pills wrapped into a centred two-line block inside a
     pill-shaped container - it read oddly (uneven row lengths, no clear
     scroll affordance) and wrapping filter chips is a pattern mobile users
     don't expect. Switch to the same single-row horizontal scroll already
     used for the FAQ filters elsewhere on this page: no wrapping, pills
     never resize to fit, and it's immediately recognisable as scrollable. */
  .staff-filter {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-padding-left: var(--space-4);
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: auto;
    max-width: 100%;
    margin: 20px calc(var(--space-4) * -1) 28px;
    padding: 4px var(--space-4);
    border-radius: 0;
    border: none;
    background: transparent;
    gap: 8px;
  }
  .staff-filter::-webkit-scrollbar {
    display: none;
  }
  .staff-filter__pill {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 13px;
    border: 1.5px solid rgba(3,31,127,0.14);
    background: #fff;
  }
  .staff-filter__pill.is-active {
    border-color: var(--color-primary);
  }
}

@media (max-width: 600px) {
  .trust-head h2 { white-space: normal; }
}

.trust-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(16px, 2vw, 28px);
}

/* ── Staff Grid Gallery ── */

.staff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 36px) clamp(16px, 2.5vw, 28px);
  padding: 8px 0 16px;
  width: 100%;
  max-width: min(92vw, 1080px);
  margin: 0 auto;
}

@media (max-width: 600px) {
  .staff-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }
}

/* Homepage "Meet the team" strip only (not the dedicated Our Team page
   grid) - one horizontal-scroll row instead of a 2-col grid, same
   bleed-to-edge + peek-of-next-card pattern used elsewhere on mobile
   (staff-filter pills, location cards). */
@media (max-width: 600px) {
  .trust-section .staff-grid {
    display: flex;
    flex-direction: row;
    grid-template-columns: unset;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--space-4);
    gap: 16px;
    max-width: 100%;
    margin: 0 calc(var(--space-4) * -1);
    padding: 8px var(--space-4) 16px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .trust-section .staff-grid::-webkit-scrollbar {
    display: none;
  }
  .trust-section .staff-card {
    flex: 0 0 44%;
    min-width: 150px;
    scroll-snap-align: start;
  }
}

.staff-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .staff-card:hover .staff-card__photo img {
    transform: scale(1.04);
  }
}

.staff-card__photo {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: #eef1f8;
  box-shadow: 0 6px 16px rgba(27, 43, 107, 0.12);
}

.staff-card__photo::before {
  display: none;
}

.staff-card:nth-child(2) .staff-card__photo::before,
.staff-card:nth-child(3) .staff-card__photo::before,
.staff-card:nth-child(4) .staff-card__photo::before,
.staff-card:nth-child(5) .staff-card__photo::before,
.staff-card:nth-child(6) .staff-card__photo::before,
.staff-card:nth-child(7) .staff-card__photo::before,
.staff-card:nth-child(8) .staff-card__photo::before {
  display: none;
}

.staff-card__photo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 3.6;
  object-fit: cover;
  object-position: top center;
  border-radius: 0;
  transition: transform 0.4s ease;
}

/* Steph — zoom in and crop bottom */
.staff-card:nth-child(8) .staff-card__photo img {
  object-position: top center;
  transform: scale(1.18) translateY(-4%);
  transform-origin: top center;
}

.staff-card:nth-child(8):hover .staff-card__photo img {
  transform: scale(1.23) translateY(-4%);
}

.staff-card__name {
  padding: 14px 2px 2px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
  line-height: 1.3;
}

.staff-card__role {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0;
  padding: 0 2px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ─── Products slider ────────────────────────────────────── */
.products-section {
  background: color-mix(in srgb, var(--color-primary) 3%, white);
  padding: var(--gap) 0 calc(var(--gap) * 1.2);
}

.products-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.products-header .sec-head {
  flex: 1;
  text-align: left;
  padding: 0;
  margin: 0;
}

.products-header .sec-head p {
  margin-top: var(--space-5);
  font-size: 16px;
  color: var(--color-text-muted);
  max-width: 52ch;
  line-height: 1.6;
}

.products-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  align-self: flex-end;
}

.prod-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.prod-arrow svg {
  width: 18px;
  height: 18px;
}

.prod-arrow:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.products-track-wrap {
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding: 28px var(--pad) 28px;
  cursor: grab;
}

.products-track-wrap::-webkit-scrollbar { display: none; }
.products-track-wrap:active { cursor: grabbing; }

.products-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
  width: max-content;
}

.prod-card.prod-card--intro {
  background: #eaf4ff;
  border-color: #d0e8fa;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 28px;
  gap: 28px;
}

.prod-card.prod-card--intro:hover {
  box-shadow: 0 8px 32px color-mix(in srgb, var(--color-secondary) 45%, transparent);
  transform: translateY(-4px);
}

.prod-intro-heading {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.25;
  margin: 0;
}

.prod-intro-heading em {
  font-style: italic;
  font-weight: 300;
  color: color-mix(in srgb, var(--color-primary) 65%, transparent);
}

.prod-intro-cta {
  align-self: flex-start;
}

.prod-card {
  flex: none;
  width: 300px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.5);
  overflow: visible;
  position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: box-shadow 0.25s, transform 0.25s;
}

/* Clip the card visuals without clipping the badge */
.prod-card > .prod-img-wrap {
  border-radius: calc(var(--radius) * 1.5) calc(var(--radius) * 1.5) 0 0;
  overflow: hidden;
}

.prod-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--color-secondary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 2;
  white-space: nowrap;
}

.prod-card:hover {
  box-shadow: 0 8px 32px color-mix(in srgb, var(--color-secondary) 30%, transparent);
  transform: translateY(-4px);
}

.prod-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prod-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.prod-card:hover .prod-img-wrap img {
  transform: scale(1.04);
}

.prod-info {
  padding: 20px 22px 24px;
}

.prod-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 8px;
}

.prod-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 10px;
  line-height: 1.2;
}

.prod-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 20px;
}

.prod-cta {
  font-size: 13.5px;
  padding: 9px 20px;
  border-radius: var(--radius);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


@media (max-width: 768px) {
  .products-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .prod-card {
    width: 260px;
  }
}

/* ─── Affiliations ───────────────────────────────────────── */
.affiliations {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--gap) 0;
}

.aff {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  margin-top: var(--space-6);
}

.aff-item {
  background: var(--color-card);
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px;
  text-align: center;
}

@media (max-width: 680px) {
  .aff {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─── Blog / helpful info (stacked cards) ───────────────────── */
.blog-section {
  padding: clamp(5px, 0.7vw, 10px) 0 clamp(48px, 7vw, 96px);
  background: #ffffff;
  position: relative;
  z-index: 3;
}

.blog-section .sec-head {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.blog-section .sec-head h2 {
  font-size: clamp(26px, 3.8vw, 51px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: none;
}

.blog-section .sec-head h2 em {
  font-style: italic;
  font-weight: 700;
  color: var(--color-primary);
}

.blog-section .sec-head p {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-top: var(--space-6);
}

/* Modern editorial card: flush full-bleed image (no inset padding/frame),
   generous rounded corners, a soft border instead of a heavy shadow, and a
   quieter text-link CTA rather than a repeated boxed button per card - the
   page already has one boxed "More blogs" CTA below the grid, so three more
   identical buttons just added visual noise. */
.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(3, 31, 127, 0.08);
  box-shadow: 0 1px 3px rgba(3, 31, 127, 0.05);
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease, opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .blog-card:hover {
    border-color: transparent;
    box-shadow: 0 16px 36px rgba(3, 31, 127, 0.14);
    transform: translateY(-5px);
  }
  .blog-card:hover .blog-card__media img {
    transform: scale(1.05);
  }
  .blog-card:hover .blog-card__cta {
    color: var(--color-secondary);
  }
  .blog-card:hover .blog-card__cta span {
    transform: translateX(4px);
  }
}

.blog-card__media {
  position: relative;
  overflow: hidden;
}

.blog-card__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  transition: transform 0.45s ease;
}

/* Soft gradient wash at the top of the photo so the tag pills stay legible
   over busy imagery without needing a blurred backdrop per pill. */
.blog-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(3, 31, 127, 0.38) 0%, rgba(3, 31, 127, 0) 45%);
  pointer-events: none;
}

.blog-card__tags {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.blog-tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.55);
  line-height: 1;
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
}

.blog-card__heading {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: clamp(17px, 1.6vw, 19px);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 8px;
  line-height: 1.3;
}

.blog-card__excerpt {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--color-text-muted);
  margin: 0 0 18px;
  line-height: 1.6;
  flex: 1;
}

.blog-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.25s ease;
}

.blog-card__cta span {
  display: inline-block;
  transition: transform 0.25s ease;
}

.blog-cta {
  margin-top: clamp(28px, 3.5vw, 40px);
  text-align: center;
}

@media (max-width: 900px) and (min-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    gap: clamp(28px, 6vw, 40px);
  }
}

@media (max-width: 767px) {
  /* Horizontal scroll-snap carousel instead of a stacked single column -
     same pattern as .loc-grid / .empathy-cards. The ::before spacer gives
     real left-edge breathing room since scroll-snap containers don't
     reliably honour padding as a scroll-start inset. */
  .blog-section > .wrap {
    margin-left: 0;
    margin-right: 0;
    min-width: 0;
  }

  .blog-section .sec-head {
    margin-bottom: var(--space-4);
  }

  .blog-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    width: auto;
    margin: var(--space-3) calc(var(--space-4) * -1) 0;
    padding: 4px var(--space-4) 18px;
    overscroll-behavior-x: contain;
  }

  .blog-grid::before {
    content: '';
    flex: 0 0 var(--space-5);
  }

  .blog-grid::-webkit-scrollbar {
    display: none;
  }

  .blog-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  /* Belt-and-suspenders: guarantee breathing room on the first card even if
     the ::before spacer's flex-basis gets squeezed by the scroll container. */
  .blog-grid .blog-card:first-child {
    margin-left: var(--space-4);
  }

  .blog-card__excerpt {
    display: none;
  }
}

@media (max-width: 767px) {
  .blog-section {
    padding-bottom: clamp(48px, 10vw, 72px);
  }

  .faq-section {
    padding-top: clamp(56px, 14vw, 96px);
  }
}

/* ─── FAQ ────────────────────────────────────────────────── */
.faq-section {
  padding: clamp(24px, 3vw, 40px) 0 var(--gap);
  background: #fff;
  position: relative;
  z-index: 3;
  border-radius: 0;
  overflow: hidden;
  margin-top: 0;
}

.faq-section .sec-head h2 {
  font-size: clamp(26px, 3.8vw, 51px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: none;
  text-align: center;
}

.faq-section .sec-head h2 em {
  font-style: italic;
  font-weight: 700;
  color: #031F7F;
}

.faq-section .wrap {
  max-width: 960px;
}

@media (max-width: 767px) {
  .faq-section .sec-head {
    margin-bottom: var(--space-4);
  }
}

/* Filter row */
.faq-filters,
.blog-filters {
  display: flex;
  gap: 8px;
  margin-bottom: var(--space-4);
  overflow-x: auto;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.blog-filters {
  margin-bottom: var(--space-6);
}

@media (max-width: 767px) {
  .faq-filters {
    margin-bottom: 14px;
  }

  .blog-filters {
    margin-bottom: var(--space-4);
  }
}

/* Expand all / collapse all toggle — own row, right-aligned */
.faq-toggle-all {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-6);
}

@media (max-width: 767px) {
  .faq-toggle-all {
    margin-bottom: var(--space-4);
  }
}

.faq-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--color-primary) 60%, transparent);
  cursor: pointer;
  transition: color 0.2s;
}

.faq-toggle-btn i {
  font-size: 16px;
}

.faq-toggle-btn:hover {
  color: var(--color-primary);
}

.faq-filters::-webkit-scrollbar,
.blog-filters::-webkit-scrollbar {
  display: none;
}

.faq-filter,
.blog-filter {
  flex-shrink: 0;
  padding: 8px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: 100px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--color-primary) 60%, transparent);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.faq-filter:hover,
.blog-filter:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.faq-filter.is-active,
.blog-filter.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.faq {
  border-top: 1px solid var(--color-border);
}

.faq details {
  border-bottom: 1px solid var(--color-border);
  transition: opacity 0.2s ease;
}

.faq details.is-hidden {
  display: none;
}

.faq details.is-fading {
  opacity: 0;
}

/* Empty state */
.faq-empty {
  padding: var(--space-5) 0;
  color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  font-size: 15px;
}

.faq-empty a {
  color: var(--color-secondary);
  font-weight: 600;
  text-decoration: none;
}

.faq-empty[hidden] {
  display: none;
}

/* ── Blog archive page ───────────────────────────────────── */
.blog-archive-section {
  padding: clamp(24px, 3vw, 40px) 0 clamp(48px, 7vw, 96px);
  background: #fff;
  position: relative;
  z-index: 3;
}

.blog-card.is-hidden {
  display: none;
}

.blog-card.is-fading {
  opacity: 0;
}

.blog-empty {
  padding: var(--space-5) 0;
  color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  font-size: 15px;
  grid-column: 1 / -1;
}

.blog-empty a {
  color: var(--color-secondary);
  font-weight: 600;
  text-decoration: none;
}

.blog-empty[hidden] {
  display: none;
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;
  min-height: var(--tap-min);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(3, 31, 127, 0.2);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23031f7f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='13 6 19 12 13 18'/></svg>");
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.faq details[open] summary::after {
  content: "";
  transform: rotate(90deg);
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-color: rgba(3, 31, 127, 0.35);
}

@media (max-width: 640px) {
  .faq summary {
    padding: 14px 0;
    gap: 14px;
    font-size: 15px;
    min-height: 0;
  }
  .faq summary::after {
    width: 26px;
    height: 26px;
    background-size: 12px 12px;
  }
}

.faq-body {
  padding: 0 0 28px;
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 68ch;
}

.faq-body a {
  color: var(--color-secondary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-secondary) 35%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s;
}

.faq-body a:hover {
  text-decoration-color: var(--color-secondary);
}

.faq-all {
  margin-top: var(--space-6);
}


/* ─── Close / CTA ────────────────────────────────────────── */
.close-section {
  background: var(--color-secondary);
  color: var(--color-on-primary);
  padding: var(--gap) 0;
  text-align: center;
  position: relative;
  z-index: 4;
  overflow: hidden;
}

.close-section .eyebrow {
  color: var(--color-close-eyebrow);
  margin-bottom: var(--space-5);
}

.close-section h2 {
  color: var(--color-on-primary);
  max-width: 22ch;
  margin: 0 auto var(--space-4);
}

.close-section p {
  font-size: 19px;
  color: var(--color-close-text);
  max-width: 40ch;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

.close-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
}

.close-ctas .btn--primary {
  background: #ffffff !important;
  color: var(--color-secondary, #2F7D3A) !important;
  border-color: #ffffff !important;
}

.close-ctas .btn--primary:hover {
  background: rgba(255,255,255,0.9) !important;
}


/* plain text-link CTAs */
.close-link {
  color: var(--color-on-primary);
  font-size: var(--text-sm, 0.9rem);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.03em;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.close-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ─── Footer ─────────────────────────────────────────────── */
/* ═══════════════════════════════════════════
   SITE FOOTER — redesigned layout
   Top: 4-col locations · Middle: contact + accreditations · Bottom: logo + legal
   ═══════════════════════════════════════════ */

.site-footer {
  background: var(--color-primary);
  color: var(--color-footer-text);
  padding: var(--space-5) 0 0;
  font-size: 14px;
}

/* ── Section heading label ── */
.footer-nav-head {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-on-primary);
  margin-bottom: 0;
  font-family: var(--font-sans);
}

/* ── Footer bands ────────────────────────────────────────────
   Every band (Locations, Services, Company, Areas We Serve, Legal &
   compliance) is plain markup (was a <details>/<summary> accordion that
   collapsed on mobile - removed so the footer never collapses at any
   screen size; always fully visible/expanded, no JS involved). */
.footer-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--space-3);
}

.footer-legal-summary {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  margin-bottom: 12px;
}

/* ─────────────────────────────────────────
   BAND 1 — Locations (4-column grid)
───────────────────────────────────────── */
.footer-locations {
  padding-bottom: var(--space-5);
}

.footer-loc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.footer-loc-card {
  padding-top: var(--space-2);
}

.footer-loc-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-on-primary);
  margin-bottom: 6px;
  padding-bottom: 7px;
  border-bottom: 2px solid #F8CF40;
  display: inline-block;
}

.footer-loc-address {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  margin: 7px 0 5px;
}

.footer-loc-hours-inline {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.footer-loc-phone {
  display: block;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  margin-top: 8px;
}

.footer-loc-email {
  display: block;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  margin-top: 2px;
}

/* ─────────────────────────────────────────
   BAND 2 — Middle (Services · Company · Accreditations)
───────────────────────────────────────── */
.footer-mid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  padding: 48px 0;
}

.footer-mid-heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 16px;
  font-weight: 600;
}

.footer-mid-links a {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  text-decoration: none;
  line-height: 2;
}

.footer-mid-links--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
}

.footer-mid-links a:hover {
  color: #fff;
}

.footer-accred-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.footer-accred-item {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 4px 6px;
  line-height: 1.2;
}

/* LegitScript seal — let it render at its natural size, centred in the cell */
.footer-accred-item--legitscript {
  height: auto;
  border: none;
  background: none;
  padding: 0;
  justify-content: flex-start;
}
.footer-accred-item--legitscript img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Logo accreditation items (e.g. QCPP) */
.footer-accred-item--logo {
  background: none;
  border: none;
  padding: 0;
  height: auto;
  justify-content: flex-start;
}
.footer-accred-item--logo img {
  max-height: 52px;
  width: auto;
  display: block;
  opacity: 0.85;
}

/* ─────────────────────────────────────────
   BAND 3 — Compliance
───────────────────────────────────────── */
.footer-compliance {
  padding: 32px 0;
  text-align: left;
  max-width: none;
  margin: 0;
}

.footer-compliance p,
.footer-compliance-notice {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.6;
  margin: 0 0 8px;
}

.footer-compliance-links {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin: 16px 0 8px;
}

.footer-compliance-links a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-compliance-links a:hover {
  color: rgba(255, 255, 255, 0.8);
}

.footer-copyright {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

/* ─────────────────────────────────────────
   BAND 4 — Logo strip
───────────────────────────────────────── */
.footer-bottom-strip {
  padding: 32px 0;
  text-align: center;
}

.footer-logo {
  width: 184px;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* Separator */
.footer-rule {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 0;
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 960px) {
  .footer-loc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .footer-mid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 0;
  }
}

@media (max-width: 600px) {
  .footer-loc-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {
  .footer-loc-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Chat widget ─────────────────────────────────────── */
.chat-widget {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: calc(24px + env(safe-area-inset-right));
  width: 380px;
  height: 520px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(3, 31, 127, 0.15);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  pointer-events: none;
}

.chat-widget.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.chat-widget[hidden] {
  display: none;
}

.chat-header {
  background: #031F7F;
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.chat-header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.chat-leaf {
  flex-shrink: 0;
}

.chat-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  transition: opacity 0.15s;
  padding: 0;
}

.chat-close:hover { opacity: 0.7; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-bubble {
  max-width: 80%;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 12px 12px 12px 2px;
  color: #031F7F;
}

.chat-bubble--assistant {
  background: #E6E9F2;
  align-self: flex-start;
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #E6E9F2;
  flex-shrink: 0;
}

.chat-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 10px 4px;
  background: transparent;
  color: #031F7F;
  font-family: inherit;
}

.chat-input::placeholder { color: rgba(3,31,127,0.4); }

.chat-send {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #031F7F;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.chat-send:hover { background: #020f4a; }

@media (max-width: 767px) {
  .chat-widget {
    left: calc(16px + env(safe-area-inset-left));
    right: calc(16px + env(safe-area-inset-right));
    width: auto;
    bottom: calc(84px + env(safe-area-inset-bottom));
    height: min(520px, 80vh);
  }
}

/* ── Hero Trust Band ── */
.hero-trust-band {
  background: #ffffff;
  border-top: 1px solid rgba(3,31,127,0.06);
  overflow: hidden;
}

.hero-trust-band__track-wrap {
  overflow: hidden;
  -webkit-mask-image: none;
  mask-image: none;
}

@keyframes trust-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

.hero-trust-band__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: trust-marquee 55s linear infinite;
}

/* Pages whose trust band has 5 items per set instead of the standard 4 (e.g.
   compounding, consultations) have a wider "quarter" of track to cover in
   the same duration, which visibly speeds up the scroll. Scale the duration
   up proportionally (5/4) so it matches the homepage's perceived speed. */
.hero-trust-band__track.hero-trust-band__track--5up {
  animation-duration: 69s;
}


.hero-trust-band__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px clamp(28px, 3.5vw, 52px);
  position: relative;
  white-space: nowrap;
}

.hero-trust-band__item i,
.hero-trust-band__item svg {
  font-size: 22px;
  color: var(--color-primary);
  stroke: var(--color-primary);
  flex-shrink: 0;
}

.hero-trust-band__item + .hero-trust-band__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(3,31,127,0.12);
}

.hero-trust-band__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-trust-band__sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .hero-trust-band__track {
    animation-duration: 40s;
  }

  .hero-trust-band__track.hero-trust-band__track--5up {
    animation-duration: 50s;
  }

  .hero-trust-band__item {
    gap: 8px;
    padding: 22px clamp(18px, 4vw, 32px);
  }

  .hero-trust-band__item i,
  .hero-trust-band__item svg {
    font-size: 20px;
  }

  .hero-trust-band__label {
    font-size: 12px;
  }
}

/* ── Nationwide delivery section ─────────────────────────────────────────── */
.nationwide-section {
  /* Static tint matching #how-it-works right above it - previously this
     cycled through white/#F5F5F8 via GSAP to mimic day/night, but that made
     the section boundary above it flicker instead of reading as one calm
     transition. */
  background: #f5f7fc;
  padding: clamp(32px, 4vw, 56px) 0 clamp(36px, 4vw, 60px);
}

.nationwide-head {
  text-align: center;
  margin-bottom: clamp(22px, 2.8vw, 40px);
}

.nationwide-head h2 {
  font-size: clamp(26px, 3.8vw, 51px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-primary);
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.nationwide-head h2 em {
  font-style: italic;
  font-weight: 700;
  color: var(--color-primary) !important;
}

.nationwide-subheading {
  margin: 24px auto 0;
  max-width: 640px;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: center;
  font-weight: 400;
}

/* Absolutely-positioned card overlay layout */
.nationwide-layout {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Radial glow behind the map — opacity driven by CSS variable so GSAP can animate it */
.nationwide-layout::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(27, 43, 107, var(--map-glow-opacity, 0.06)) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.nationwide-map {
  width: 54%;
  max-width: 560px;
  overflow: visible;
  flex-shrink: 0;
  padding: 32px;
  margin: -32px;
}

.nationwide-map .aus-map-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 28px rgba(27, 43, 107, 0.35));
}

/* Floating corner cards */
.nationwide-feature {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 20px;
  width: 260px;
  box-shadow: 0 4px 24px rgba(3, 31, 127, 0.10);
  border: 1px solid rgba(3, 31, 127, 0.09);
  z-index: 2;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: nw-float 4s ease-in-out infinite;
}

@keyframes nw-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.nationwide-feature--tl { animation-delay: 0s; }
.nationwide-feature--tr { animation-delay: 1s; }
.nationwide-feature--bl { animation-delay: 2s; }
.nationwide-feature--br { animation-delay: 3s; }

.nationwide-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(3, 31, 127, 0.15);
  animation-play-state: paused;
}

.nationwide-feature--tl { top: 8%;    left: 0;   }
.nationwide-feature--bl { bottom: 6%; left: 0;   }
.nationwide-feature--tr { top: 8%;    right: 0;  }
.nationwide-feature--br { bottom: 6%; right: 0;  }

.nationwide-features,
.nationwide-features--left,
.nationwide-features--right { display: none; }

.nationwide-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.nationwide-check svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nationwide-feature strong {
  display: block;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.nationwide-feature p {
  margin: 0;
  font-size: clamp(11px, 0.85vw, 13px);
  color: rgba(3, 31, 127, 0.6);
  line-height: 1.5;
}

.nationwide-map .aus-map-svg {
  width: 100%;
  height: auto;
  display: block;
}


/* ── Map animation CSS — GSAP owns all animation (stroke-dashoffset via attr tweening) */
.aus-route {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.aus-ripple  { opacity: 0; }
.aus-pulse   { opacity: 0; }

.aus-origin-pulse { transform-origin: 495px 510px; }

@media (prefers-reduced-motion: reduce) {
  .aus-route        { stroke-dashoffset: 0; }
  .aus-origin-pulse { display: none; }
  .aus-pulse        { display: none; }
}

@media (max-width: 900px) {
  .nationwide-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .nationwide-feature {
    position: static;
    width: auto;
    flex: 1 1 200px;
    animation: none;
  }
  .nationwide-map {
    order: -1;
  }
  /* wrap cards in a responsive row below the map */
  .nationwide-feature--tl,
  .nationwide-feature--bl,
  .nationwide-feature--tr,
  .nationwide-feature--br {
    position: static;
  }
  .nationwide-layout::after {
    content: '';
    display: none;
  }
}

@media (max-width: 900px) {
  /* Re-wrap all four cards into a 2×2 grid below the map. The time-of-day
     slider (moved here in the DOM by JS on mobile — see homepage.js) sits
     in its own full-width row directly under the map, above the cards. */
  .nationwide-layout {
    display: grid;
    grid-template-areas:
      "map    map"
      "slider slider"
      "tl     tr"
      "bl     br";
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .nationwide-map {
    grid-area: map;
    width: 80%;
    max-width: 480px;
    margin: 0 auto;
  }
  .nationwide-feature--tl { grid-area: tl; position: static; width: auto; }
  .nationwide-feature--tr { grid-area: tr; position: static; width: auto; }
  .nationwide-feature--bl { grid-area: bl; position: static; width: auto; }
  .nationwide-feature--br { grid-area: br; position: static; width: auto; }
  .nationwide-layout .nw-tod-wrap {
    grid-area: slider;
    /* Auto margins make a grid item shrink-to-fit instead of stretching to
       fill its cell, which is why the bar was rendering shorter than the
       map/cards above and below it. Reset them so it spans the full width
       it always had before moving here. */
    margin: 0;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .nationwide-layout {
    grid-template-areas:
      "map"
      "slider"
      "tl"
      "tr"
      "bl"
      "br";
    grid-template-columns: 1fr;
  }
  .nationwide-map {
    width: 90%;
    max-width: 360px;
    margin: 0 auto;
  }
}

/* ── Time-of-day slider ───────────────────────────────────────────────── */
.nw-tod-wrap {
  max-width: 560px;
  margin: clamp(32px, 4vw, 56px) auto 0;
  text-align: center;
  user-select: none;
}

/* hidden range input — invisible but still interactive for drag/scrub */
.nw-tod-slider-hidden {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 20px;
  transform: translateY(-50%);
  opacity: 0;
  cursor: pointer;
  z-index: 10;
  margin: 0;
}

/* ── Continuous stage track ── */
.nw-stage-track-wrap {
  width: 100%;
}

.nw-stage-track-bg {
  position: relative;
  height: 8px;
  background: rgba(3,31,127,0.12);
  border-radius: 100px;
  overflow: visible;
}
.nw-stage-track-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, #4a6fd4, #031F7F);
  border-radius: 100px;
  pointer-events: none;
}
/* glowing dot thumb */
.nw-stage-dot {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--color-primary);
  box-shadow: 0 0 0 4px rgba(3,31,127,0.15), 0 2px 10px rgba(3,31,127,0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}

.nw-stage-time-label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(3,31,127,0.22);
}

.nw-stage-time-label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--color-primary);
  border-bottom: none;
}

/* tick marks */
.nw-stage-tick {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 14px;
  background: rgba(3,31,127,0.18);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

/* stage labels row */
.nw-stage-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.nw-stage-lbl {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(3,31,127,0.35);
  transition: color 0.25s, font-weight 0.25s;
  white-space: nowrap;
}

.nw-stage-lbl:first-child { text-align: left; }
.nw-stage-lbl:last-child  { text-align: right; }

.nw-stage-lbl.is-active {
  color: var(--color-primary);
  font-weight: 700;
}

.nw-stage-lbl.is-past {
  color: rgba(3,31,127,0.55);
  font-weight: 600;
}

/* --- old slider styles removed --- */

.nw-tod-disclaimer {
  display: none;
}

.footer-disclaimer {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

@media (max-width: 480px) {
  .nw-tod-wrap { max-width: 100%; }
  .nw-stage-lbl { font-size: 10px; }
}

/* ── Dispatch Band (replaces ticker) ── */
.dispatch-band {
  background: white;
  width: 100%;
  padding: clamp(100px, 12vw, 160px) 0;
  position: relative;
  z-index: 31;
  text-align: center;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dispatch-band #dm-morph {
  fill: var(--color-bg-2);
}

.dispatch-band__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  overflow: visible;
  position: relative;
}

.dispatch-morph-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(180px, 28vw, 320px);
  height: clamp(180px, 28vw, 320px);
  opacity: 0;
  pointer-events: none;
}

#dm-morph {
  opacity: 1;
}

@media (max-width: 767px) {
  .dispatch-morph-svg {
    width: 52vw;
    height: 52vw;
  }
}

.dispatch-line {
  font-size: clamp(26px, 3.8vw, 51px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
  color: var(--color-primary);
  will-change: transform, opacity;
  opacity: 0;
}

.dispatch-line--2 {
  color: var(--color-primary);
}

@media (max-width: 767px) {
  .dispatch-line {
    font-size: clamp(22px, 6vw, 36px);
  }

  .dispatch-band {
    padding: 64px 0;
  }

  .locations-section {
    padding: 28px 20px 48px;
    border-radius: 20px;
    width: calc(100% - 32px);
    margin: 16px auto 0;
  }

  /* .locations-section already carries its own 20px horizontal padding
     (plus the 16px margin inset above) - .wrap's own padding on top of that
     was double-insetting the content, squeezing the intro paragraph down to
     an oddly narrow, tall column. */
  .locations-section > .wrap {
    padding: 0;
  }
}

/* ── Ticker band (legacy) ── */
.ticker-band {
  background: white;
  height: 56px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-top: none;
  border-bottom: none;
  position: relative;
  z-index: 31;
}
.ticker-band__inner {
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.ticker-band__track {
  display: flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  animation: ticker-move 40s linear infinite;
}
.ticker-band__item {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.ticker-band__item--navy { color: var(--color-primary); }
.ticker-band__item--gold { color: var(--color-primary); }
.ticker-band__sep {
  color: rgba(255, 255, 255, 0.45);
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}
@keyframes ticker-move {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-band__track { animation: none; }
}


/* ─── Vaccinations dropdown — desktop ────────────────────── */

#nav-vaccinations .nav-top::after {
  content: '';
  /* !important needed: beats the global ".has-mega .nav-top::after
     { display: none !important; }" rule which otherwise kills this chevron. */
  display: inline-block !important;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 5px;
  vertical-align: middle;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

#nav-vaccinations.is-open .nav-top::after {
  transform: rotate(180deg);
}

@media (max-width: 1100px) {
  #nav-vaccinations .nav-top::after {
    display: none !important;
  }
}

/* ─── Services dropdown — arrow indicator (same treatment as Vaccinations) ─── */

#nav-services .nav-top::after {
  content: '';
  /* !important needed: beats the global ".has-mega .nav-top::after
     { display: none !important; }" rule which otherwise kills this chevron. */
  display: inline-block !important;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 5px;
  vertical-align: middle;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

#nav-services.is-open .nav-top::after {
  transform: rotate(180deg);
}

@media (max-width: 1100px) {
  #nav-services .nav-top::after {
    display: none !important;
  }
}

.mega--vaccinations {
  padding: 0;
  width: 640px;
  min-width: 640px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(3,31,127,0.10);
  box-shadow: 0 8px 32px rgba(3,31,127,0.12);
  overflow: visible;
}

.mega--vaccinations .mega-desktop {
  padding: 0;
}

.mega-vac-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase !important;
  color: rgba(3,31,127,0.45);
  margin: 0 0 10px 4px;
}

.mega-vac-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-vac-grid li a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-primary);
  transition: background 0.15s;
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  min-height: 0 !important;
}

.mega-vac-grid li a:hover {
  background: #f0f4fb;
}

.mega-vac-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #edf3fc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.mega-vac-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.mega-vac-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.2;
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: nowrap;
  max-width: none;
}

.mega-vac-desc {
  font-size: 12px;
  color: rgba(3,31,127,0.55);
  line-height: 1.4;
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: normal !important;
}

/* ─── Locations dropdown — desktop ───────────────────────── */

#nav-locations .nav-top::after {
  content: '';
  /* !important needed: beats the global ".has-mega .nav-top::after
     { display: none !important; }" rule which otherwise kills this chevron. */
  display: inline-block !important;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 5px;
  vertical-align: middle;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

#nav-locations.is-open .nav-top::after {
  transform: rotate(180deg);
}

@media (max-width: 1100px) {
  #nav-locations .nav-top::after {
    display: none !important;
  }
  #nav-locations {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

.mega--locations {
  padding: 0;
  width: 640px;
  min-width: 640px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(3,31,127,0.10);
  box-shadow: 0 8px 32px rgba(3,31,127,0.12);
  overflow: visible;
}

.mega--locations .mega-desktop {
  padding: 0;
}

.mega-loc-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase !important;
  color: rgba(3,31,127,0.45);
  margin: 0 0 10px 4px;
}

.mega-loc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-loc-list li a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-primary);
  transition: background 0.15s;
  white-space: normal !important;
  min-height: 0 !important;
}

.mega-loc-list li a:hover {
  background: #f0f4fb;
}

.mega-loc-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eef1f8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.mega-loc-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.mega-loc-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1.3;
  white-space: nowrap;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.mega-loc-addr {
  font-size: 11px;
  color: rgba(3,31,127,0.5);
  line-height: 1.4;
  white-space: nowrap;
}

.mega-loc-badge {
  display: inline-block;
  align-self: flex-start;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 20px;
  background: rgba(45,140,85,0.1);
  color: #2d6b45;
  font-size: 10.5px;
  font-weight: 500;
}

.mega-loc-new-badge {
  display: inline-block;
  align-self: flex-start;
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #eef1f8;
  color: rgb(27,43,107);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
}

.mega-loc-footer {
  margin: 12px -16px 0;
  padding: 10px 16px 12px;
  border-top: 1px solid rgba(3,31,127,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 11px;
  color: rgba(3,31,127,0.45);
}

.mega-loc-footer > span {
  white-space: nowrap;
}

.mega-loc-all {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary) !important;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.mega-loc-all:hover {
  opacity: 0.7;
}

/* Prevent site-wide text-transform from affecting dropdown text */
.mega--vaccinations a,
.mega--vaccinations .mega-vac-title,
.mega--vaccinations .mega-vac-desc,
.mega--vaccinations .mega-vac-eyebrow {
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: normal !important;
}

/* Footer CTA must never wrap — override the broad rule above */
.mega--vaccinations .nav-dropdown-footer-cta,
.mega--locations .nav-dropdown-footer-cta {
  white-space: nowrap !important;
}

.mega--locations a,
.mega--locations .mega-loc-name,
.mega--locations .mega-loc-addr,
.mega--locations .mega-loc-eyebrow {
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: normal !important;
}

/* ─── nav-dropdown-vaccinations (new structure) ───────────── */

.nav-dropdown-vaccinations .nav-dropdown-footer {
  padding-left: 0;
}

.nav-dropdown-vaccinations {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: stretch;
  gap: 4px 16px;
}

.nav-dropdown-vaccinations__list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nav-dropdown-vaccinations__promo {
  min-width: 0;
  display: flex;
  gap: 12px;
  height: 100%;
}

.nav-dropdown-vaccinations__list .nav-dropdown-header {
  margin: 12px 0 4px;
}

.nav-dropdown-vaccines-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 0 4px -12px;
}

.mega--vaccinations a.nav-dropdown-vaccine {
  display: block;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  min-height: 0 !important;
  color: var(--color-primary) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.15s;
}

.mega--vaccinations a.nav-dropdown-vaccine:hover {
  background: #edf3fc;
  color: var(--color-secondary) !important;
}
.nav-dropdown-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(3,31,127,0.45);
  margin: 0 4px 8px;
  padding: 0;
}

.nav-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none !important;
  color: var(--color-primary) !important;
  transition: background 0.15s;
  white-space: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  min-height: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
}

.nav-dropdown-item:hover {
  background: #edf3fc;
}

.nav-dropdown-item:hover .nav-dropdown-label {
  color: var(--color-secondary);
}

.nav-dropdown-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #edf3fc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 18px;
}

.nav-dropdown-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.2;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
}

.nav-dropdown-desc {
  display: none;
}

.nav-dropdown-divider {
  border: none;
  border-top: 0.5px solid #e5e7eb;
  margin: 8px 4px 0;
}

.nav-dropdown-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px;
}

.nav-dropdown-footer-label {
  font-size: 11px;
  color: #9ca3af;
  white-space: normal;
  flex: 1;
}

.nav-dropdown-footer-cta {
  font-size: 11px;
  font-weight: 700;
  color: rgb(27,43,107) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  flex-shrink: 0;
}

.nav-dropdown-footer-cta:hover {
  opacity: 0.7;
}

/* ─── nav-dropdown-locations (new structure) ──────────────── */

.nav-dropdown-locations {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: stretch;
  gap: 4px 16px;
}

.nav-dropdown-locations__list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nav-dropdown-locations__promo {
  min-width: 0;
  display: flex;
  gap: 12px;
  height: 100%;
}

.nav-dropdown-locations .nav-dropdown-label,
.nav-dropdown-locations .nav-dropdown-address {
  white-space: nowrap;
}

.nav-dropdown-address {
  font-size: 11px;
  color: rgba(3,31,127,0.5);
  line-height: 1.4;
  margin-top: 1px;
}

.nav-dropdown-badge {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 20px;
  background: rgba(45,140,85,0.1);
  color: #2d6b45;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.nav-dropdown-badge-new {
  display: inline-block;
  margin-top: 4px;
  margin-left: 0;
  padding: 1px 6px;
  border-radius: 4px;
  background: #eef1f8;
  color: rgb(27,43,107);
  font-size: 10px;
  font-weight: 600;
}

/* ─── Locations dropdown footer + badge fixes ─────────────── */

.nav-dropdown-locations .nav-dropdown-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
}

.nav-dropdown-locations .nav-dropdown-footer-label {
  white-space: nowrap;
}

.nav-dropdown-locations .nav-dropdown-footer-cta {
  white-space: nowrap;
}

/* Badge sits on its own line below the address, width fits content only */
.nav-dropdown-locations .nav-dropdown-badge {
  display: inline-block;
  margin-top: 4px;
}

/* ─── Services dropdown — desktop ────────────────────────── */
/* Same treatment as .mega--vaccinations / .mega--locations —
   single-column list so the menu stays narrow and easy to scan. */

.mega--services {
  padding: 0;
  /* Fallback size only — homepage.js sets exact position/left/width inline
     (via alignMegaToNav) so this panel's edges line up exactly with the
     nav bar's own left/right edges, the full length of the menu. Inline
     styles set by JS beat this non-important rule automatically. */
  width: 640px;
  min-width: 640px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(3,31,127,0.10);
  box-shadow: 0 8px 32px rgba(3,31,127,0.12);
  overflow: visible;
}

.mega--services .mega-desktop {
  padding: 0;
}

/* Two-column layout: plain link list on the left, photo promo card on the
   right - see reference design (Total Holistic "Patients" nav dropdown). */
.nav-dropdown-services {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  display: grid;
  grid-template-columns: 208px 1fr;
  align-items: stretch;
  gap: 4px 16px;
}

.nav-dropdown-services__list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nav-dropdown-services .nav-dropdown-header {
  padding: 0 4px 8px;
}

.nav-dropdown-services .nav-dropdown-item {
  padding: 8px 8px;
  gap: 0;
}

.nav-dropdown-services .nav-dropdown-icon {
  display: none;
}

.nav-dropdown-services .nav-dropdown-label {
  font-size: 13.5px;
  font-weight: 500;
  white-space: normal;
}

.nav-dropdown-services .nav-dropdown-item:hover .nav-dropdown-label {
  color: var(--color-secondary);
}

.nav-dropdown-services .nav-dropdown-divider {
  margin: 8px 4px 0;
}

.nav-dropdown-services .nav-dropdown-footer {
  padding: 10px 8px 4px;
  justify-content: flex-start;
}

/* Two cards side by side, not one stretched banner - this panel now spans
   the full nav width (see alignMegaToNav in homepage.js), so a single card
   would look like an oversized, distorted stripe. */
.nav-dropdown-services__promo {
  min-width: 0;
  display: flex;
  gap: 12px;
  height: 100%;
}

.nav-dropdown-promo {
  position: relative;
  display: block;
  flex: 1 1 0;
  width: auto;
  height: 100%;
  min-height: 180px;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none !important;
}

.nav-dropdown-promo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.nav-dropdown-promo img[src*="pharmacist%20vaccination"] {
  object-position: 8% center;
}

.nav-dropdown-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Top-and-bottom gradient — darkens just where text/CTA sit, image shows through in the middle */
  background: linear-gradient(180deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.10) 30%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

.nav-dropdown-promo__top {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-dropdown-promo__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.9;
}

.nav-dropdown-promo__title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.nav-dropdown-promo__cta {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--color-primary);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(3, 31, 127, 0.18);
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-promo:hover .nav-dropdown-promo__cta {
  background: var(--color-primary);
  color: #fff;
}


/* ─── Sticky CTA — mobile full-width bar, desktop corner pill ─── */
.site-sticky-cta {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid rgba(3, 31, 127, 0.1);
  box-shadow: 0 -8px 24px rgba(3, 31, 127, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-sticky-cta__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.site-sticky-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 20px;
  background: var(--color-primary, #031F7F);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 8px;
  transition: background 0.2s, transform 0.2s;
  box-shadow: none;
}

.site-sticky-cta__btn:hover {
  background: #02185f;
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}

.site-sticky-cta__btn:active {
  background: #02185f;
  transform: none;
}

body:has(.site-sticky-cta) {
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 961px) {
  .site-sticky-cta {
    left: auto;
    right: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    width: auto;
    padding: 0;
    background: transparent;
    border-top: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-sticky-cta__inner {
    max-width: none;
    margin: 0;
    justify-content: flex-end;
  }

  .site-sticky-cta__btn {
    width: auto;
    min-width: 0;
    padding: 16px 26px;
    border-radius: 999px;
    box-shadow:
      0 10px 28px rgba(3, 31, 127, 0.28),
      0 2px 8px rgba(0, 0, 0, 0.08);
  }

  body:has(.site-sticky-cta) {
    padding-bottom: 0;
  }
}

/* ─── Local areas page: suburb grid + service area map ─── */
.areas-grid-section,
.areas-map-section {
  padding: clamp(56px, 8vw, 104px) 0;
  background: #fff;
}
.areas-map-section { background: #ffffff; padding-top: clamp(40px, 6vw, 72px); }
.areas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 960px;
  margin: 0 auto;
}
.areas-grid__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  min-height: 52px;
  border-radius: 14px;
  background: #edf3fc;
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.areas-grid__item:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(3,31,127,0.14);
}
.areas-grid__chevron {
  color: var(--color-secondary);
  font-size: 20px;
  line-height: 1;
}
.areas-map-frame {
  max-width: 1100px;
  height: clamp(340px, 52vw, 560px);
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(3,31,127,0.14);
}
@media (max-width: 900px) { .areas-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .areas-grid { grid-template-columns: repeat(2, 1fr); } }
.areas-grid-section .sec-head,
.areas-map-section .sec-head {
  display: block;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.areas-grid-section .sec-head .lede { margin: 12px auto 0; max-width: 52ch; }

.areas-grid-section,
.areas-map-section { position: relative; overflow: hidden; }
.areas-grid-section > .wrap,
.areas-map-section > .wrap { position: relative; z-index: 1; }

/* ─── Local area pages: SEO copy block ─── */
.seo-copy-section { background:#fff; padding: clamp(56px, 8vw, 104px) 0; }
.seo-copy { max-width: 1000px; margin: 0 auto; }
.seo-copy__intro { text-align:center; margin-bottom: clamp(28px, 4vw, 44px); }
.seo-copy__title { font-size: clamp(34px, 4.6vw, 56px); line-height:1.05; margin:0; color:#031f7f; font-weight:700; letter-spacing:-0.02em; }
.seo-copy__title em { font-style:italic; font-weight:400; color:#2f7d3a; }
.seo-copy__block + .seo-copy__block { margin-top: clamp(32px, 4vw, 48px); }
.seo-copy__block h2 { font-size: clamp(20px, 2.2vw, 26px); line-height:1.25; margin:0 0 14px; color:#031f7f; font-weight:600; }
.seo-copy__block p { font-size:18px; line-height:1.7; color:#3d4663; margin:0 0 16px; }
.seo-copy__actions { text-align:center; margin: clamp(28px, 4vw, 40px) 0 0 !important; }
.areas-grid__item[aria-current="page"] { background:#031f7f; color:#fff; pointer-events:none; }
.areas-grid__item[aria-current="page"] .areas-grid__chevron { color:#fff; }

/* Footer: Areas We Serve (all suburbs) */
.footer-mid { grid-template-columns: 0.8fr 0.8fr 2fr; }
.footer-mid-links--areas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
}
@media (max-width: 1023px) {
  .footer-mid { grid-template-columns: 1fr 1fr; }
  .footer-mid > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .footer-mid { grid-template-columns: 1fr; }
  .footer-mid-links--areas { grid-template-columns: 1fr 1fr; }
}

/* Blog cards: "Read more" as a button */
.blog-card__cta.btn {
  color: #fff;
  font-size: var(--btn-font-size);
  font-weight: 600;
  letter-spacing: var(--btn-letter-spacing);
}
.blog-card:hover .blog-card__cta.btn { color: #fff; }

/* Mega menus: compact panel (width set in homepage.js), wider text list */
.nav-dropdown-vaccinations,
.nav-dropdown-locations,
.nav-dropdown-services {
  grid-template-columns: 220px minmax(0, 1fr);
}
.nav-dropdown-promo { flex: 1 1 0; min-width: 0; max-width: none; }
.nav-dropdown-vaccinations__promo,
.nav-dropdown-locations__promo,
.nav-dropdown-services__promo {
  justify-content: flex-start;
}

/* Vaccinations + Locations dropdown text: match the Services dropdown */
.nav-dropdown-vaccinations .nav-dropdown-item,
.nav-dropdown-locations .nav-dropdown-item {
  padding: 8px 8px;
  gap: 0;
}
.nav-dropdown-vaccinations .nav-dropdown-label,
.nav-dropdown-locations .nav-dropdown-label {
  font-size: 13.5px;
  font-weight: 500;
  white-space: normal;
}
.nav-dropdown-vaccinations .nav-dropdown-item:hover .nav-dropdown-label,
.nav-dropdown-locations .nav-dropdown-item:hover .nav-dropdown-label {
  color: var(--color-secondary);
}
.nav-dropdown-vaccines-grid { margin: 0; }
.mega--vaccinations a.nav-dropdown-vaccine {
  padding: 8px 8px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
}
.nav-dropdown-vaccinations .nav-dropdown-footer,
.nav-dropdown-locations .nav-dropdown-footer {
  padding: 10px 8px 4px;
}

/* ─── Sticky "Send Script" button: icon ─── */
.site-sticky-cta__btn[href$="order-prescription.html"] {
  gap: 10px;
  position: relative;
  background: linear-gradient(135deg, #0a2fa8 0%, #031F7F 100%);
  border: 0;
}
.site-sticky-cta__btn[href$="order-prescription.html"]::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M12 17v-6'/%3E%3Cpath d='m9.5 13.5 2.5-2.5 2.5 2.5'/%3E%3C/svg%3E");
}


/* ─── Compounding dropdown (compact, desktop) ─────────────── */
#nav-compounding .nav-top::after {
  content: '';
  display: inline-block !important;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 5px;
  vertical-align: middle;
  opacity: 0.6;
  transition: transform 0.2s ease;
}
#nav-compounding.is-open .nav-top::after { transform: rotate(180deg); }
@media (max-width: 1100px) {
  #nav-compounding .nav-top::after { display: none !important; }
}
.navlinks > .has-mega .mega.mega--cmpmenu {
  padding: 0;
  width: 920px;
  min-width: 920px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(3,31,127,0.10);
  box-shadow: 0 8px 32px rgba(3,31,127,0.12);
  overflow: visible;
}
.mega--cmpmenu .mega-desktop { padding: 0; }
@media (min-width: 1101px) and (max-width: 1400px) {
  .navlinks > .has-mega .mega.mega--cmpmenu { width: 760px; min-width: 760px; }
  .nav-dropdown-cmpmenu__promo .nav-dropdown-promo { min-height: 220px; }
}
.nav-dropdown-cmpmenu {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 4px 16px;
  align-items: stretch;
}
.nav-dropdown-cmpmenu__list { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-dropdown-cmpmenu__promo { min-width: 0; display: flex; gap: 12px; height: 100%; }
.nav-dropdown-cmpmenu__promo .nav-dropdown-promo { min-height: 250px; }
.nav-dropdown-cmpmenu .nav-dropdown-item { padding: 8px 8px; gap: 0; }
.nav-dropdown-cmpmenu .nav-dropdown-label { font-size: 13.5px; font-weight: 500; white-space: normal; }
.mega--cmpmenu a {
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: normal !important;
}


/* ─── How it works — video-first cards (homepage) ───────────────────────── */
.hiw-sticky > .wrap { width: 100%; }
.hiw-cards-wrap, .hiw-cards { width: 100%; }
.hiw-cards > .hiw-card--media { min-width: 0; width: 100%; }
.hiw-card--media {
  position: relative;
  display: block;
  padding: 0;
  gap: 0;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  border: none;
  border-radius: 24px;
  background: #0b1a55;
  box-shadow: 0 8px 28px rgba(10, 21, 77, 0.16);
  text-decoration: none;
  color: #fff;
}
.hiw-card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hiw-card-media .hiw-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hiw-card--media .hiw-card-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(3, 10, 40, 0.88) 0%, rgba(3, 10, 40, 0.45) 34%, rgba(3, 10, 40, 0) 62%);
  pointer-events: none;
}
.hiw-card--media .hiw-card-body {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: clamp(22px, 2.4vw, 32px);
  box-sizing: border-box;
}
.hiw-card--media .hiw-card-heading {
  color: #fff;
  font-size: clamp(21px, 1.9vw, 27px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.hiw-card--media .hiw-card-copy {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.55;
  flex: none;
  max-width: 34ch;
}
.hiw-card--media .hiw-card-cta {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s ease, gap 0.2s ease;
}
.hiw-card--media:hover .hiw-card-cta { background: #e4ecf8; gap: 12px; }

@media (max-width: 767px) {
  .hiw-card--media {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    padding: 0;
  }
  .hiw-card--media .hiw-card-body { padding: 18px; }
  .hiw-card--media .hiw-card-copy { font-size: 13px; }
}

/* No hover lift on mobile / touch (prevents sticky :hover after a tap) */
@media (max-width: 767px), (hover: none) {
  .hiw-card:hover {
    transform: none;
    box-shadow: 0 2px 12px rgba(10, 21, 77, 0.06), 0 1px 3px rgba(10, 21, 77, 0.04);
    border-color: rgba(10, 21, 77, 0.1);
  }
}

/* Mobile: text covers most of the shorter card, so darken the whole lower
   two thirds and add a soft shadow so copy always stays readable. */
@media (max-width: 767px) {
  .hiw-card--media .hiw-card-shade {
    background: linear-gradient(to top, rgba(3, 10, 40, 0.82) 0%, rgba(3, 10, 40, 0.5) 38%, rgba(3, 10, 40, 0) 68%);
  }
  .hiw-card--media .hiw-card-heading,
  .hiw-card--media .hiw-card-copy {
    text-shadow: 0 1px 3px rgba(3, 10, 40, 0.55), 0 2px 14px rgba(3, 10, 40, 0.6);
  }
  .hiw-card--media .hiw-card-copy { color: #fff; }
  .hiw-card--media { aspect-ratio: 1 / 1; }
}


/* ── Staff photo backgrounds: slow white-to-colour moving gradient ────────── */
@keyframes staff-photo-grad {
  0%   { background-position: 0% 30%; }
  50%  { background-position: 100% 70%; }
  100% { background-position: 0% 30%; }
}
.staff-card__photo {
  background: linear-gradient(135deg, #ffffff 0%, var(--sp, #edf3fc) 50%, #ffffff 100%);
  background-size: 350% 350%;
  animation: staff-photo-grad 9s ease-in-out infinite;
}
.staff-card:nth-child(3n+1) .staff-card__photo { --sp: #edf3fc; }
.staff-card:nth-child(3n+2) .staff-card__photo { --sp: #e6f2ef; }
.staff-card:nth-child(3n)   .staff-card__photo { --sp: #e6f2e6; }
@media (prefers-reduced-motion: reduce) {
  .staff-card__photo { animation: none; }
}


/* ═══ Homepage delivery section: dark banner card (v2) ═══════════════════ */
.nationwide-section--v2 > .wrap {
  position: relative;
  width: calc(100% - 48px);
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 60px);
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 85% 45%, rgba(74, 111, 212, 0.38) 0%, rgba(74, 111, 212, 0) 70%),
    linear-gradient(135deg, #031F7F 0%, #0a2796 55%, #07195e 100%);
  box-shadow: 0 24px 64px rgba(3, 31, 127, 0.22);
  color: #fff;
}
.nationwide-section--v2 .nationwide-head { text-align: left; margin-bottom: clamp(20px, 2.4vw, 32px); }
.nationwide-section--v2 .nationwide-head h2 { color: #fff; text-align: left; margin: 0; max-width: 560px; }
.nationwide-section--v2 .nationwide-subheading { color: rgba(255, 255, 255, 0.82); text-align: left; margin: 16px 0 0; max-width: 480px; }

/* map: pale glassy continent with glowing routes */
.nationwide-section--v2 .aus-map-svg { filter: drop-shadow(0 0 30px rgba(143, 176, 255, 0.35)); }
.nationwide-section--v2 .aus-map-svg g[filter] { fill: rgba(255, 255, 255, 0.10); stroke: rgba(255, 255, 255, 0.45); }
.nationwide-section--v2 .nationwide-layout::before { display: none; }

/* benefit tiles */
.nationwide-section--v2 .nationwide-feature {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: none;
}
.nationwide-section--v2 .nationwide-feature:hover { transform: none; background: rgba(255, 255, 255, 0.13); box-shadow: none; }
.nationwide-section--v2 .nationwide-feature strong { color: #fff; }
.nationwide-section--v2 .nationwide-feature p { color: rgba(255, 255, 255, 0.78); }
.nationwide-section--v2 .nationwide-check circle { fill: #fff; }
.nationwide-section--v2 .nationwide-check path { stroke: #031F7F; }

/* delivery timeline on dark */
.nationwide-section--v2 .nw-tod-wrap { max-width: none; }
.nationwide-section--v2 .nw-stage-track-bg { background: rgba(255, 255, 255, 0.2); height: 10px; }
.nationwide-section--v2 .nw-stage-track-fill { background: linear-gradient(to right, #8fb0ff, #ffffff); }
.nationwide-section--v2 .nw-stage-tick { background: rgba(255, 255, 255, 0.35); }
.nationwide-section--v2 .nw-stage-dot { background: #fff; border-color: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.22), 0 2px 12px rgba(0, 0, 0, 0.3); width: 22px; height: 22px; }
.nationwide-section--v2 .nw-stage-time-label { background: #fff; color: var(--color-primary); }
.nationwide-section--v2 .nw-stage-time-label::after { border-top-color: #fff; }
.nationwide-section--v2 .nw-stage-lbl { color: rgba(255, 255, 255, 0.5); font-size: 13px; }
.nationwide-section--v2 .nw-stage-lbl.is-past { color: rgba(255, 255, 255, 0.78); }
.nationwide-section--v2 .nw-stage-lbl.is-active { color: #fff; }

@media (min-width: 901px) {
  .nationwide-section--v2 > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: 20px;
    row-gap: 16px;
    align-items: stretch;
  }
  .nationwide-section--v2 .nationwide-head { grid-column: 1 / 3; grid-row: 1; align-self: end; }
  .nationwide-section--v2 .nationwide-layout { display: contents; }
  .nationwide-section--v2 .nationwide-map {
    grid-column: 3; grid-row: 1 / span 3;
    width: 100%; max-width: none; margin: 0; padding: 0;
    align-self: center;
  }
  .nationwide-section--v2 .nationwide-feature { position: static; width: auto; }
  .nationwide-section--v2 .nationwide-feature--tl { grid-column: 1; grid-row: 2; }
  .nationwide-section--v2 .nationwide-feature--tr { grid-column: 2; grid-row: 2; }
  .nationwide-section--v2 .nationwide-feature--bl { grid-column: 1; grid-row: 3; }
  .nationwide-section--v2 .nationwide-feature--br { grid-column: 2; grid-row: 3; }
  .nationwide-section--v2 .nw-tod-wrap {
    grid-column: 1 / -1; grid-row: 4;
    margin: clamp(20px, 2.4vw, 32px) 0 0; padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
}
@media (max-width: 900px) {
  .nationwide-section--v2 > .wrap { width: calc(100% - 32px); border-radius: 22px; }
  .nationwide-section--v2 .nationwide-head { text-align: center; }
  .nationwide-section--v2 .nationwide-head h2, .nationwide-section--v2 .nationwide-subheading { text-align: center; margin-left: auto; margin-right: auto; }
}

/* Delivery card: 3D pack */
.nationwide-section--v2 .nationwide-pack { margin: 24px 0 0; }
.nationwide-section--v2 .nationwide-pack iframe { display: block; width: 100%; aspect-ratio: 1; height: auto; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 18px 40px rgba(0,0,0,0.25); }
.nationwide-section--v2 .nationwide-pack__cap { margin: 10px 0 0; text-align: center; font-size: 13px; color: rgba(255,255,255,0.7); }
@media (min-width: 901px) {
  .nationwide-section--v2 .nationwide-pack { grid-column: 3; grid-row: 1 / span 3; margin: 0; align-self: center; }
}

.nationwide-section--v2 .nationwide-map { display: none !important; }

/* Delivery card: video split layout */
.nationwide-section--v2 > .wrap {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; align-content: center;
  column-gap: clamp(16px, 3vw, 40px); align-items: center; overflow: hidden; min-height: 0;
  padding: clamp(28px, 4vw, 56px);
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(74,111,212,0.38) 0%, rgba(74,111,212,0) 70%), linear-gradient(135deg, #031F7F 0%, #0a2796 55%, #07195e 100%);
}
.nationwide-section--v2 .nationwide-video {
  position: relative; inset: auto; grid-column: 2; grid-row: 1 / span 2; width: 100%; height: auto; aspect-ratio: 1.45; object-fit: cover; z-index: 0; align-self: center;
  mix-blend-mode: screen;
}
.nationwide-section--v2 .nationwide-video-overlay, .nationwide-section--v2 .nationwide-pack, .nationwide-section--v2 .nw-tod-wrap, .nationwide-section--v2 .nationwide-map { display: none !important; }
.nationwide-section--v2 .nationwide-head { grid-column: 1; grid-row: 1; align-self: end; justify-self: start; margin: 0 0 24px; max-width: none; width: auto; text-align: left; position: relative; z-index: 2; }
.nationwide-section--v2 .nationwide-layout { grid-column: 1; grid-row: 2; align-self: start; align-content: start; grid-auto-rows: min-content; position: relative; z-index: 2; display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.nationwide-section--v2 .nationwide-feature { position: static !important; grid-column: auto !important; grid-row: auto !important; width: auto; }
@media (max-width: 900px) {
  .nationwide-section--v2 > .wrap { grid-template-columns: 1fr; grid-template-rows: auto; }
  .nationwide-section--v2 .nationwide-video { grid-column: 1; grid-row: 2; max-width: 420px; margin: 0 auto; }
  .nationwide-section--v2 .nationwide-head { grid-row: 1; }
  .nationwide-section--v2 .nationwide-layout { grid-row: 3; }
}
@media (max-width: 560px) { .nationwide-section--v2 .nationwide-layout { grid-template-columns: 1fr; } }
.nationwide-section--v2 .nationwide-layout { min-height: 0 !important; height: auto !important; }

/* Delivery: flat pale-blue band, no card (final override) */
.nationwide-section--v2 { background: #f5f7fc; }
.nationwide-section--v2 > .wrap { background: none !important; box-shadow: none; border-radius: 0; color: var(--color-primary); padding: 0; width: calc(100% - 48px); max-width: 1200px; column-gap: clamp(16px, 3vw, 48px); overflow: visible; }
.nationwide-section--v2 .nationwide-head h2 { color: var(--color-primary); }
.nationwide-section--v2 .nationwide-head h2 em { color: var(--color-primary); }
.nationwide-section--v2 .nationwide-subheading { color: #4a5578; }
.nationwide-section--v2 .nationwide-video { mix-blend-mode: normal; aspect-ratio: 1; -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); }
.nationwide-section--v2 .nationwide-feature { background: #fff; border: 1px solid rgba(3,31,127,0.1); box-shadow: 0 6px 20px rgba(3,31,127,0.06); backdrop-filter: none; }
.nationwide-section--v2 .nationwide-feature:hover { background: #fff; }
.nationwide-section--v2 .nationwide-feature strong { color: var(--color-primary); }
.nationwide-section--v2 .nationwide-feature p { color: #4a5578; }
.nationwide-section--v2 .nationwide-check circle { fill: var(--color-primary); }
.nationwide-section--v2 .nationwide-check path { stroke: #fff; }

/* Delivery: calm editorial layout, steps follow the box video */
.nationwide-section--v2 .nationwide-layout { display: none !important; }
.nationwide-section--v2 > .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto auto !important; align-content: center; justify-items: stretch; text-align: left; column-gap: clamp(24px, 4vw, 64px); }
.nationwide-section--v2 .nationwide-head { grid-column: 1; grid-row: 1; justify-self: start; align-self: end; text-align: left; margin: 0 0 clamp(20px, 2.5vw, 32px); }
.nationwide-section--v2 .nationwide-head h2 { text-align: left; margin: 0; max-width: 560px; }
.nationwide-section--v2 .nationwide-subheading { text-align: left; margin: 16px 0 0; max-width: 480px; }
.nationwide-section--v2 .nationwide-video { grid-column: 2; grid-row: 1 / span 2; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1; justify-self: center; }
.nationwide-section--v2 .nationwide-steps { grid-column: 1; grid-row: 2; align-self: start; list-style: none; margin: 0; padding: 0; width: 100%; max-width: 480px; display: block; position: relative; z-index: 2; }
.nationwide-section--v2 .nationwide-steps li { --sp: 0; position: relative; display: grid; grid-template-columns: 48px 1fr; align-items: baseline; padding: 18px 0; border-top: 1px solid rgba(3,31,127,0.14); cursor: pointer; opacity: 0.45; transition: opacity .5s ease; background: none; box-shadow: none; border-radius: 0; }
.nationwide-section--v2 .nationwide-steps li:last-child { border-bottom: 1px solid rgba(3,31,127,0.14); }
.nationwide-section--v2 .nationwide-steps li::before { display: none; }
.nationwide-section--v2 .nationwide-steps li::after { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: calc(100% * var(--sp)); background: var(--color-primary); }
.nationwide-section--v2 .nationwide-steps li.is-done { opacity: 0.7; }
.nationwide-section--v2 .nationwide-steps li.is-active { opacity: 1; }
.nationwide-section--v2 .nationwide-steps__no { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: rgba(3,31,127,0.6); }
.nationwide-section--v2 .nationwide-steps strong { display: block; color: var(--color-primary); font-size: 19px; font-weight: 600; line-height: 1.3; }
.nationwide-section--v2 .nationwide-steps p { margin: 0; color: #4a5578; font-size: 15px; line-height: 1.5; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s ease, opacity .5s ease, margin .5s ease; }
.nationwide-section--v2 .nationwide-steps li.is-active p { max-height: 3.2em; opacity: 1; margin-top: 4px; }
.nationwide-section--v2 .nationwide-steps li:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (max-width: 900px) {
  .nationwide-section--v2 > .wrap { grid-template-columns: 1fr !important; grid-template-rows: auto auto auto !important; }
  .nationwide-section--v2 .nationwide-head { grid-row: 1; }
  .nationwide-section--v2 .nationwide-video { grid-column: 1; grid-row: 2; max-width: 380px; margin: -10px auto; }
  .nationwide-section--v2 .nationwide-steps { grid-column: 1; grid-row: 3; max-width: none; }
}
.nationwide-section--v2 .nationwide-video { -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 70%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 58%, transparent 70%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
/* Delivery video 3: 16:9, no mask */
.nationwide-section--v2 .nationwide-video { aspect-ratio: 16 / 9; max-width: none; object-fit: contain; -webkit-mask-image: none; mask-image: none; }
@media (max-width: 900px) { .nationwide-section--v2 .nationwide-video { max-width: 640px; margin: 0 auto; } }
/* Delivery video: larger, sides cropped */
.nationwide-section--v2 .nationwide-video { aspect-ratio: 1 / 1; object-fit: cover; max-width: 640px; width: 112%; justify-self: center; }
@media (max-width: 900px) { .nationwide-section--v2 .nationwide-video { width: 100%; max-width: 520px; aspect-ratio: 1 / 1; } }

/* Footer: LegitScript seal on the right of the compliance row */
.footer-compliance { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-compliance-seal { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; }
.footer-compliance-seal img { display: block; max-width: 100%; height: auto; }
@media (max-width: 600px) { .footer-compliance-seal { margin-left: 0; } }

/* Footer: stronger text contrast and weight */
.footer-mid-heading, .footer-legal-summary { color: rgba(255,255,255,0.85); font-weight: 700; }
.footer-loc-address { color: rgba(255,255,255,0.92); font-size: 13px; font-weight: 500; }
.footer-loc-hours-inline { color: rgba(255,255,255,0.82); font-size: 13px; font-weight: 500; }
.footer-loc-phone { font-size: 14px; font-weight: 600; }
.footer-loc-email { color: rgba(255,255,255,0.88); font-size: 13px; font-weight: 500; }
.footer-mid-links a { color: #fff; font-size: 14px; font-weight: 500; }
.footer-compliance-links, .footer-compliance-links a { color: rgba(255,255,255,0.88); font-size: 12px; font-weight: 500; }
.footer-compliance-links a:hover { color: #fff; }
.footer-compliance .footer-copyright { color: rgba(255,255,255,0.8); font-size: 12px; font-weight: 500; }
.footer-rule { border-top-color: rgba(255,255,255,0.2); }

/* Sticky Send Script: white pill over navy sections (desktop) */
@media (min-width: 961px) {
  .site-sticky-cta__btn { transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.2s; }
  .site-sticky-cta.is-on-navy .site-sticky-cta__btn,
  .site-sticky-cta.is-on-navy .site-sticky-cta__btn[href$="order-prescription.html"] {
    background: #fff;
    color: var(--color-primary, #031F7F);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12);
  }
  .site-sticky-cta.is-on-navy .site-sticky-cta__btn:hover { background: #eef1fb; color: var(--color-primary, #031F7F); }
  .site-sticky-cta.is-on-navy .site-sticky-cta__btn[href$="order-prescription.html"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23031F7F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M12 17v-6'/%3E%3Cpath d='m9.5 13.5 2.5-2.5 2.5 2.5'/%3E%3C/svg%3E");
  }
}

/* "Book in minutes." entrance: connector line draws down */
.bk-step:not(:last-child)::after { transform: scaleY(var(--ln, 1)); transform-origin: top; }

/* Review cards: no hover effect */
.rr-card::after { display: none; }
@media (min-width: 769px) {
  .rr-support-grid .rr-card:hover { transform: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0,0,0,0.05); z-index: auto; }
}

/* Delivery steps: simpler highlight (no progress lines, completed steps match the rest) */
.nationwide-section--v2 .nationwide-steps li::after { display: none; }
.nationwide-section--v2 .nationwide-steps li.is-done { opacity: 0.45; }

/* Delivery steps: description sits beside the title so rows never change height */
.nationwide-section--v2 .nationwide-steps { max-width: 560px; }
.nationwide-section--v2 .nationwide-steps li { grid-template-columns: 40px 1fr; }
.nationwide-section--v2 .nationwide-steps li > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; align-items: baseline; }
.nationwide-section--v2 .nationwide-steps strong { font-size: 17px; }
.nationwide-section--v2 .nationwide-steps p,
.nationwide-section--v2 .nationwide-steps li.is-active p { max-height: none; opacity: 1; overflow: visible; margin: 0; font-size: 14px; line-height: 1.45; transition: none; }
@media (max-width: 520px) {
  .nationwide-section--v2 .nationwide-steps li > div { grid-template-columns: 1fr; row-gap: 2px; }
}

/* Delivery steps: bolder, more legible text */
.nationwide-section--v2 .nationwide-steps li,
.nationwide-section--v2 .nationwide-steps li.is-done { opacity: 0.7; }
.nationwide-section--v2 .nationwide-steps li.is-active { opacity: 1; }
.nationwide-section--v2 .nationwide-steps strong { font-weight: 700; }
.nationwide-section--v2 .nationwide-steps p,
.nationwide-section--v2 .nationwide-steps li.is-active p { font-weight: 500; color: #3a4670; }
.nationwide-section--v2 .nationwide-steps__no { font-weight: 700; }

/* Compounding menu: photo cards 15% larger */
.navlinks > .has-mega .mega.mega--cmpmenu { width: 1058px; min-width: 1058px; }
.nav-dropdown-cmpmenu__promo .nav-dropdown-promo { min-height: 288px; }
@media (min-width: 1101px) and (max-width: 1400px) {
  .navlinks > .has-mega .mega.mega--cmpmenu { width: 874px; min-width: 874px; }
  .nav-dropdown-cmpmenu__promo .nav-dropdown-promo { min-height: 253px; }
}

/* Compounding menu: "For Prescribers" group */
.nav-dropdown-cmpmenu__list .nav-dropdown-divider { width: 100%; margin: 10px 0 8px; border-top: 1px solid rgba(3,31,127,0.12); }
.nav-dropdown-group-label { margin: 0; padding: 4px 8px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-secondary); }

/* Services menu: "Prescribing Pharmacist Consults" group */
.nav-dropdown-services__list .nav-dropdown-group-label { padding-top: 10px; }
.nav-dropdown-services__list .nav-dropdown-divider { margin: 8px 4px 6px; }

/* Vaccinations menu: grouped individual vaccines */
.nav-dropdown-vaccinations__list .nav-dropdown-divider { margin: 8px 4px 6px; border-top: 1px solid rgba(3,31,127,0.12); }
.nav-dropdown-vaccinations__list .nav-dropdown-group-label { padding-top: 6px; }

/* Compounding menu: photo cards a further 20% larger (capped to fit the screen) */
.navlinks > .has-mega .mega.mega--cmpmenu { width: min(1270px, calc(100vw - 340px)); min-width: 0; }
.nav-dropdown-cmpmenu__promo .nav-dropdown-promo { min-height: 346px; }
@media (min-width: 1101px) and (max-width: 1400px) {
  .navlinks > .has-mega .mega.mega--cmpmenu { width: min(1049px, calc(100vw - 330px)); min-width: 0; }
  .nav-dropdown-cmpmenu__promo .nav-dropdown-promo { min-height: 304px; }
}

/* Compounding menu: photo tiles 15% narrower (height unchanged) */
.navlinks > .has-mega .mega.mega--cmpmenu { width: min(1114px, calc(85vw - 255px)); min-width: 0; }
@media (min-width: 1101px) and (max-width: 1400px) {
  .navlinks > .has-mega .mega.mega--cmpmenu { width: min(926px, calc(85vw - 246px)); min-width: 0; }
}

/* Delivery steps: tighter rows */
.nationwide-section--v2 .nationwide-steps li { padding: 10px 0; }
.nationwide-section--v2 .nationwide-steps li > div { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
@media (max-width: 640px) { .nationwide-section--v2 .nationwide-steps li > div { grid-template-columns: 1fr; } }

/* Compounding menu: centre under the nav bar */
@media (min-width: 1101px) {
  /* positioned by alignMegaToNav in homepage.js */
}

/* Vaccination location cards: stores not yet vaccinating (greyed out) */
.msk-loc-card.msk-loc-card--soon { background: #eceef3 !important; box-shadow: none; }
.msk-loc-card--soon .msk-loc-card__media { position: relative; display: block; }
.msk-loc-card--soon .msk-loc-card__media img { filter: grayscale(1) brightness(1.02); opacity: .7; }
.msk-loc-card--soon .msk-loc-card__body,
.msk-loc-card--soon .msk-loc-card__body * { color: #7d8394 !important; }
.msk-loc-card--soon .msk-loc-card__btn--primary { background: #b9bdca !important; border-color: #b9bdca !important; color: #fff !important; }
.msk-loc-card--soon .msk-loc-card__btn--primary * { color: #fff !important; }
.msk-loc-card--soon .msk-loc-card__btn--ghost { border-color: #c9cdd8 !important; background: transparent !important; }
span.msk-loc-card__soon { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.95); color: var(--color-primary); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(10,21,77,0.15); }

/* Greyed "coming soon" location cards (prescribing service pages) */
.uti-loc-card.uti-loc-card--soon { background: #eceef3 !important; box-shadow: none; }
.uti-loc-card--soon .uti-loc-card__media { position: relative; display: block; }
.uti-loc-card--soon .uti-loc-card__media img { filter: grayscale(1) brightness(1.02); opacity: .7; }
.uti-loc-card--soon .uti-loc-card__body,
.uti-loc-card--soon .uti-loc-card__body * { color: #7d8394 !important; }
.uti-loc-card--soon .uti-loc-card__btn--primary { background: #b9bdca !important; border-color: #b9bdca !important; color: #fff !important; }
.uti-loc-card--soon .uti-loc-card__btn--primary * { color: #fff !important; }
.uti-loc-card--soon .uti-loc-card__btn--ghost { border-color: #c9cdd8 !important; background: transparent !important; }
span.uti-loc-card__soon { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.95); color: var(--color-primary); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(10,21,77,0.15); }
.msc-loc-card.msc-loc-card--soon { background: #eceef3 !important; box-shadow: none; }
.msc-loc-card--soon .msc-loc-card__media { position: relative; display: block; }
.msc-loc-card--soon .msc-loc-card__media img { filter: grayscale(1) brightness(1.02); opacity: .7; }
.msc-loc-card--soon .msc-loc-card__body,
.msc-loc-card--soon .msc-loc-card__body * { color: #7d8394 !important; }
.msc-loc-card--soon .msc-loc-card__btn--primary { background: #b9bdca !important; border-color: #b9bdca !important; color: #fff !important; }
.msc-loc-card--soon .msc-loc-card__btn--primary * { color: #fff !important; }
.msc-loc-card--soon .msc-loc-card__btn--ghost { border-color: #c9cdd8 !important; background: transparent !important; }
span.msc-loc-card__soon { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.95); color: var(--color-primary); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(10,21,77,0.15); }
.hc-loc-card.hc-loc-card--soon { background: #eceef3 !important; box-shadow: none; }
.hc-loc-card--soon .hc-loc-card__media { position: relative; display: block; }
.hc-loc-card--soon .hc-loc-card__media img { filter: grayscale(1) brightness(1.02); opacity: .7; }
.hc-loc-card--soon .hc-loc-card__body,
.hc-loc-card--soon .hc-loc-card__body * { color: #7d8394 !important; }
.hc-loc-card--soon .hc-loc-card__btn--primary { background: #b9bdca !important; border-color: #b9bdca !important; color: #fff !important; }
.hc-loc-card--soon .hc-loc-card__btn--primary * { color: #fff !important; }
.hc-loc-card--soon .hc-loc-card__btn--ghost { border-color: #c9cdd8 !important; background: transparent !important; }
span.hc-loc-card__soon { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.95); color: var(--color-primary); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(10,21,77,0.15); }