/* ============================================================
   KISCO DIAGNOSTIC CENTER — Corporate Website Stylesheet v3
   Light theme · Inter 18px · Primary #0384ce · Secondary #f28f20
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand */
  --primary: #0384ce;        /* brand blue — icons, accents, large glyphs */
  --primary-600: #0272b6;    /* AA-safe blue for buttons / small text on white */
  --primary-700: #02629d;
  --primary-soft: #e6f4fc;
  --primary-100: #d2ebfa;

  --secondary: #f28f20;      /* brand orange — fills, badges (dark text on it) */
  --secondary-dark: #b45309; /* AA-safe orange for text labels */
  --secondary-soft: #fdf0df;

  /* Text/glyph-bearing gradient. Both endpoints clear 3:1 against white
     (4.04:1 at #0384ce, 6.49:1 at #02629d), so white icons and labels stay
     legible across the whole sweep. Used by the department icon chips. */
  --grad-cta: linear-gradient(135deg, var(--primary) 0%, var(--primary-700) 100%);

  --wa: #0e7c6b;             /* AA-safe WhatsApp green for buttons */
  --wa-bright: #25d366;      /* brand mark only (FAB) */

  /* Neutrals */
  --ink: #13293c;
  --body-clr: #42566a;
  --muted: #5f7285;
  --line: #e2eaf1;
  --bg-soft: #f5f9fc;
  --white: #ffffff;

  /* Dark (used sparingly: hero overlay, footer) */
  --navy: #06273f;
  --navy-2: #072e4b;

  /* Effects */
  --shadow-sm: 0 2px 8px rgba(9, 44, 71, 0.06);
  --shadow-md: 0 10px 28px rgba(9, 44, 71, 0.1);
  --shadow-lg: 0 22px 52px rgba(9, 44, 71, 0.16);

  /* Shape */
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Type */
  --font: "Inter", "Segoe UI", sans-serif;

  /* Layout */
  --container: 1280px;
  /* On viewports wider than the 1280px frame the container floats with its own
     margin, so no gutter is needed; below that width .container re-applies it. */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 7.5vw, 6.25rem);

  /* Z */
  --z-header: 100;
  --nav-h: 52px;             /* menu bar height; drives the banner overlap */
  --z-drawer: 200;
  --z-fab: 90;
}

/* ---------- Reset / Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;   /* only the 51px menu bar sticks now */
  overflow-x: clip;
}

/* NOTE: overflow-x uses `clip`, never `hidden` — hidden would break
   position:sticky on the header; clip clips without a scroll container. */
body {
  font-family: var(--font);
  font-size: 1rem;                /* 16px */
  line-height: 1.7;
  color: var(--body-clr);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a {
  color: var(--primary-600);
  text-decoration: none;
  transition: color 0.2s ease;
}

ul, ol {
  list-style: none;
}

button, select {
  font-family: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
}

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.25;
  font-weight: 700;
  text-wrap: balance;
}

::selection {
  background: var(--primary);
  color: #fff;
}

:focus-visible {
  outline: 3px solid rgba(3, 132, 206, 0.5);
  outline-offset: 3px;
  border-radius: 4px;
}

/* fixed, not absolute: absolute anchors it to the document origin, so it was
   off-screen (and unusable) at any scroll position > 0 */
/* Visually hidden but still read aloud. NOT display:none, which would hide it
   from screen readers too and defeat the point. Used to give each repeated
   "Learn more" link a unique accessible name (WCAG 2.4.4). */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.skip-link {
  position: fixed;
  top: -64px;
  left: 16px;
  z-index: 999;
  background: var(--navy);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  transition: top 0.25s ease;
}

.skip-link:focus {
  top: 0;
}

.icon {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
}

/* ---------- Utilities ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
}

/* Below the frame width the auto margins collapse to zero and content would
   touch the screen edges, so the side gutter comes back. */
@media (max-width: 1320px) {
  .container {
    padding-inline: var(--gutter);
  }
}

.section {
  padding-block: var(--section-y);
}

.section-soft {
  background: var(--bg-soft);
}

.sec-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary-dark);
  margin-bottom: 0.9rem;
}

.sec-label::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 3px;
  background: var(--secondary);
}

.sec-title {
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.9rem;
}

.sec-title .hl {
  color: var(--primary-600);
}

.sec-sub {
  max-width: 640px;
  color: var(--muted);
}

/* desktop: heads left-aligned (rows) or explicitly centered;
   mobile centers everything — see the 768px media query */
.sec-head {
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}

.sec-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

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

.sec-head--center .sec-label {
  justify-content: center;
}

.sec-head--center .sec-sub {
  margin-inline: auto;
}

/* ---------- Buttons (uniform system) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 1rem 1.9rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
              transform 0.22s ease, box-shadow 0.25s ease;
}

.btn .icon {
  width: 1.15em;
  height: 1.15em;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn:active {
  transform: translateY(-1px) scale(0.98);
}

.btn-primary {
  background: var(--primary-600);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-700);
  color: #fff;
  box-shadow: 0 14px 28px rgba(2, 98, 157, 0.32);
}

.btn-secondary {
  background: var(--secondary);
  color: #fff;
}

.btn-secondary:hover {
  background: var(--primary-600);
  color: #fff;
  box-shadow: 0 14px 28px rgba(2, 114, 182, 0.32);
}

.btn-outline {
  background: transparent;
  border-color: var(--primary-600);
  color: var(--primary-600);
}

.btn-outline:hover {
  background: var(--primary-soft);
  color: var(--primary-700);
  box-shadow: 0 10px 22px rgba(2, 114, 182, 0.18);
}

.btn-light {
  background: #fff;
  color: var(--primary-700);
}

.btn-light:hover {
  background: var(--primary-soft);
  color: var(--primary-700);
  box-shadow: 0 14px 28px rgba(4, 26, 43, 0.28);
}

.btn-wa {
  background: var(--wa);
  color: #fff;
}

.btn-wa:hover {
  background: #0a6355;
  color: #fff;
  box-shadow: 0 14px 28px rgba(14, 124, 107, 0.32);
}

.btn-sm {
  padding: 0.7rem 1.3rem;
  font-size: 0.9rem;
}

/* ---------- Top Bar (brand blue) ---------- */
.topbar {
  background: var(--primary-600);
  color: #fff;
  font-size: 0.9rem;
}

.topbar-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
  min-height: 42px;
}

.topbar-contacts,
.topbar-social {
  padding-block: 0.25rem;
}

.topbar-contacts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.topbar-contacts > * {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-weight: 500;
  padding-inline: 1.1rem;
}

.topbar-contacts > *:first-child {
  padding-left: 0;
}

.topbar-contacts > * + * {
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.topbar-contacts a:hover {
  color: #ffd9ad;
}

.topbar-contacts .icon {
  width: 1em;
  height: 1em;
  color: #ffd9ad;
}

.topbar-social {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.topbar-social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.22s ease, color 0.25s ease;
}

.topbar-social a:hover {
  background: #fff;
  color: var(--primary-700);
  transform: translateY(-2px);
}

.topbar-social .icon {
  width: 15px;
  height: 15px;
}

/* ---------- Header (static) + sticky menu bar ---------- */
/* The header itself does NOT stick — only .nav-bar does. Because .site-header
   is static it sits below the z-95 drawer scrim, so it dims correctly when the
   mobile drawer opens with no extra scrim rule needed. */
.site-header {
  position: relative;
  background: #fff;
}

.header-main {
  background: #fff;
}

.header-main-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.brand img {
  height: 62px;
  width: auto;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.header-result {
  padding: 0.78rem 1.5rem;
  font-size: 0.95rem;
}

/* -- blue menu bar: container-width at rest, full-bleed once stuck --
   The negative margin lifts the banner up underneath it so the bar sits
   ON the banner; z-index keeps it painted above. */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: transparent;   /* only .container is blue while at rest */
  margin-bottom: calc(-1 * var(--nav-h));
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.nav-bar-inner {
  display: flex;
  background: var(--primary-600);
  padding-inline: 0;         /* links run flush to the bar's edges */
}

/* stuck: paint the whole strip so the blue runs edge to edge */
.nav-bar.stuck {
  background: var(--primary-600);
  box-shadow: 0 6px 20px rgba(9, 44, 71, 0.18);
}

.nav-menu {
  display: flex;
  width: 100%;
}

/* 1px hairlines between items; each item grows to fill the bar */
.nav-links {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 1px;
}

.nav-links li {
  flex: 1 1 auto;
}

.nav-links a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--nav-h);      /* deterministic bar height for the overlap math */
  padding: 0 0.6rem;
  font-size: 0.9375rem;      /* 15px — 11 items fit to 1180px, see media query */
  font-weight: 500;
  line-height: 1.4;
  color: #fff;               /* 5.14:1 on --primary-600 */
  white-space: nowrap;
  transition: background 0.22s ease;
}

/* Warm accent underline for hover + current page.
   #ffbf6b (not brand --secondary) because brand orange is only 2.14:1 on this
   blue — too low for a state indicator. This lifts it to 3.2:1. */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: 0;
  height: 3px;
  background: #ffbf6b;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

/* Overlays DARKEN the bar: a light overlay lifted white text to only 4.1:1.
   Darkening keeps white text at 6.0:1 (hover) and 7.2:1 (active). */
.nav-links a:hover {
  background: rgba(0, 0, 0, 0.1);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-links a.active {
  background: rgba(0, 0, 0, 0.2);
  font-weight: 600;
}

.nav-links a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: opacity 0.25s ease;
}

.nav-toggle .icon {
  width: 24px;
  height: 24px;
}

/* Must sit BELOW the header (z 100): the drawer lives inside the header's
   stacking context, so an overlay above 100 would cover the drawer and
   swallow every tap — the "menu opens but nothing works" bug. */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 39, 63, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 95;
}

body.nav-open .nav-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Real scroll lock. `body { overflow:hidden }` alone does NOT work here:
   html carries overflow-x:clip, so body's overflow is no longer propagated
   to the viewport and the page keeps scrolling behind the open drawer.
   Locking the root is what actually stops it. */
html.nav-locked {
  overflow: hidden;
}

/* .site-header is static, so it paints BELOW the z-95 scrim and dims on its
   own — no manual scrim needed. It only needs to stop taking clicks. */
body.nav-open .site-header {
  pointer-events: none;
}

body.nav-open .nav-bar {
  pointer-events: auto;
}

.drawer-head,
.drawer-cta {
  display: none;
}

/* 11 nav items need ~1025px; inner container width drops below that under
   ~1180px, so the drawer takes over at 1200px with slack to spare. */
@media (max-width: 1199px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* blue bar collapses to nothing — the drawer is position:fixed, so this
     wrapper has no in-flow height once the menu leaves the flow */
  .nav-bar,
  .nav-bar.stuck,
  .nav-bar-inner {
    background: transparent;
    box-shadow: none;
  }

  /* no bar to overlap the banner with in drawer mode */
  .nav-bar {
    margin-bottom: 0;
  }

  /* app-style drawer sliding in from the right */
  .nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 88vw);
    background: #fff;
    z-index: var(--z-drawer);
    padding: 0 0 2rem;
    transform: translateX(105%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
    /* the stagger's translateX(28px) would otherwise force overflow-x:auto
       and add a stray horizontal scrollbar inside the drawer */
    overflow-x: clip;
    overscroll-behavior: contain;
    box-shadow: -18px 0 50px rgba(6, 39, 63, 0.25);
    margin-left: 0;
    display: block;
    border-radius: 22px 0 0 22px;
  }

  body.nav-open .nav-menu {
    transform: translateX(0);
  }

  /* sticky so the close button stays reachable — 11 links + CTA now overflow
     the drawer on short viewports */
  .drawer-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 1.2rem 1.3rem;
    background: var(--primary-soft);
    border-bottom: 1px solid var(--line);
    border-radius: 22px 0 0 0;
    margin-bottom: 0.8rem;
  }

  .drawer-head img {
    height: 44px;
    width: auto;
  }

  .drawer-close {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.22s ease, color 0.22s ease;
  }

  .drawer-close:hover {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
  }

  .drawer-close .icon {
    width: 20px;
    height: 20px;
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    padding-inline: 1rem;
  }

  .nav-links li {
    border-bottom: 1px solid var(--bg-soft);
  }

  /* drawer links: dark text on white, not the blue-bar treatment */
  .nav-links a {
    position: relative;
    display: block;
    padding: 1rem 2.2rem 1rem 0.9rem;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--ink);
    white-space: normal;
    border-radius: var(--radius);
  }

  .nav-links a:hover,
  .nav-links a.active {
    background: var(--primary-soft);
    color: var(--primary-700);
  }

  .nav-links a.active {
    font-weight: 600;
  }

  .nav-links a:focus-visible {
    outline: 3px solid var(--primary-600);
    outline-offset: -3px;
  }

  /* chevron affordance, app-list style (replaces the orange underline) */
  .nav-links a::after {
    content: "";
    position: absolute;
    left: auto;
    right: 1rem;
    bottom: auto;
    top: 50%;
    width: 9px;
    height: 9px;
    background: none;
    border-right: 2px solid #9fb2c4;
    border-top: 2px solid #9fb2c4;
    transform: translateY(-50%) rotate(45deg);
    transition: border-color 0.2s ease, right 0.2s ease;
  }

  .nav-links a:hover::after,
  .nav-links a.active::after {
    transform: translateY(-50%) rotate(45deg);
    border-color: var(--primary-600);
  }

  .nav-links a:hover::after {
    right: 0.8rem;
  }

  /* staggered slide-in of items */
  .nav-links li {
    opacity: 0;
    transform: translateX(28px);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }

  body.nav-open .nav-links li {
    opacity: 1;
    transform: none;
  }

  body.nav-open .nav-links li:nth-child(1) { transition-delay: 0.08s; }
  body.nav-open .nav-links li:nth-child(2) { transition-delay: 0.13s; }
  body.nav-open .nav-links li:nth-child(3) { transition-delay: 0.18s; }
  body.nav-open .nav-links li:nth-child(4) { transition-delay: 0.23s; }
  body.nav-open .nav-links li:nth-child(5) { transition-delay: 0.28s; }
  body.nav-open .nav-links li:nth-child(6) { transition-delay: 0.33s; }
  body.nav-open .nav-links li:nth-child(7) { transition-delay: 0.38s; }
  body.nav-open .nav-links li:nth-child(8) { transition-delay: 0.43s; }
  body.nav-open .nav-links li:nth-child(9) { transition-delay: 0.48s; }
  body.nav-open .nav-links li:nth-child(10) { transition-delay: 0.53s; }
  body.nav-open .nav-links li:nth-child(11) { transition-delay: 0.58s; }

  .drawer-cta {
    display: block;
    padding: 1.4rem 1.5rem 0;
  }

  .drawer-cta .btn {
    width: 100%;
  }

  /* the drawer has its own close button — hide the header toggle while open
     so two X buttons never stack on top of each other */
  body.nav-open .nav-toggle {
    opacity: 0;
    pointer-events: none;
  }

  body.nav-open {
    overflow: hidden;
  }
}

/* ---------- Hero (2 slides) ---------- */
.hero {
  position: relative;
  background: var(--navy);
}

.hero-swiper {
  height: clamp(520px, 72vh, 680px);
  overflow: hidden;
}

.hero-slide {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(92deg,
    rgba(4, 27, 46, 0.9) 0%,
    rgba(4, 30, 52, 0.72) 40%,
    rgba(5, 34, 58, 0.38) 70%,
    rgba(6, 39, 63, 0.18) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-content {
  max-width: 660px;
  padding-block: 4rem;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffe1bd;
  background: rgba(242, 143, 32, 0.16);
  border: 1px solid rgba(242, 143, 32, 0.5);
  padding: 0.45rem 1.05rem;
  border-radius: var(--radius-pill);
}

.hero-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--secondary);
}

.hero-title {
  font-size: clamp(2.4rem, 4.8vw, 3.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  margin-top: 1.3rem;
}

.hero-title .hl {
  color: var(--secondary);
}

.hero-lead {
  margin-top: 1.2rem;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(233, 242, 249, 0.92);
  max-width: 540px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.1rem;
}

/* slide content entrance — scoped so text survives without JS */
.swiper-initialized .hero-chip,
.swiper-initialized .hero-title,
.swiper-initialized .hero-lead,
.swiper-initialized .hero-actions {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.swiper-slide-active .hero-chip   { opacity: 1; transform: none; transition-delay: 0.12s; }
.swiper-slide-active .hero-title  { opacity: 1; transform: none; transition-delay: 0.24s; }
.swiper-slide-active .hero-lead   { opacity: 1; transform: none; transition-delay: 0.36s; }
.swiper-slide-active .hero-actions{ opacity: 1; transform: none; transition-delay: 0.48s; }

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.hero-arrow:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #17293a;
}

.hero-arrow .icon {
  width: 20px;
  height: 20px;
}

.hero-prev { left: 1.4rem; }
.hero-next { right: 1.4rem; }

/* scroll-mouse indicator — tap scrolls to the next section */
.hero-scroll {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.5rem;
  z-index: 10;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  cursor: pointer;
  padding: 0.4rem;
}

.hero-scroll-mouse {
  width: 20px;
  height: 33px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 11px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
  transition: border-color 0.25s ease;
}

.hero-scroll-wheel {
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: var(--secondary);
  animation: hero-wheel 1.8s ease-out infinite;
}

@keyframes hero-wheel {
  0%   { opacity: 1; transform: translateY(0); }
  65%  { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(10px); }
}

.hero-scroll:hover .hero-scroll-mouse {
  border-color: var(--secondary);
}

/* ---------- Welcome / About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: clamp(2.5rem, 6vw, 5.75rem);
  align-items: stretch;
}

/* Stacked-shot composition: tall main image, a second shot overlapping its
   upper-right, and an accent stat card breaking the lower-right corner.
   Breathing room to the text column comes from .about-grid's gap — padding
   here would do nothing, since absolutely positioned children resolve
   against the padding box, not the content box. */
.about-media {
  position: relative;
  min-height: 560px;
}

.about-shot {
  position: absolute;
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg-soft);
}

.about-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* main shot runs the full column height so the composition matches the
   text block exactly; the sub shot overlaps its right edge, centred */
.about-shot--main {
  left: 0;
  top: 0;
  width: 70%;
  height: 100%;
  box-shadow: 0 24px 50px rgba(9, 44, 71, 0.16);
}

.about-shot--sub {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 46%;
  height: 46%;
  border: 6px solid #fff;
  box-shadow: 0 20px 44px rgba(9, 44, 71, 0.2);
}

.about-text p {
  text-align: justify;
  margin-bottom: 1.15rem;
}

.about-actions {
  margin-top: 1.8rem;
}

/* ---------- Departments ---------- */
.dept-swiper {
  overflow: hidden;
  padding: 0.4rem 0.25rem 2.6rem;
}

.dept-swiper .swiper-scrollbar {
  bottom: 0;
  height: 5px;
  background: var(--line);
  border-radius: 4px;
}

.dept-swiper .swiper-scrollbar-drag {
  background: var(--primary);
  border-radius: 4px;
}

.dept-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: var(--ink);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.nav-arrow:hover {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(2, 114, 182, 0.28);
}

.nav-arrow.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.nav-arrow .icon {
  width: 20px;
  height: 20px;
}

.dept-card {
  height: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.2rem 2.1rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.dept-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(3, 132, 206, 0.3);
}

.dept-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.4rem;
  transition: transform 0.3s ease;
}

.dept-card:hover .dept-icon {
  transform: scale(1.08) rotate(-3deg);
}

.dept-icon .icon {
  width: 32px;
  height: 32px;
}

/* soft multicolor icon palette */
.c-blue   { --accent-bg: #e3f2fd; --accent-fg: #0272b6; background: #e3f2fd; color: #0272b6; }
.c-orange   { --accent-bg: #fdeedd; --accent-fg: #b45309; background: #fdeedd; color: #b45309; }
.c-green   { --accent-bg: #e3f5ea; --accent-fg: #15803d; background: #e3f5ea; color: #15803d; }
.c-purple   { --accent-bg: #efeafd; --accent-fg: #6d28d9; background: #efeafd; color: #6d28d9; }
.c-teal   { --accent-bg: #dff4f5; --accent-fg: #0f766e; background: #dff4f5; color: #0f766e; }
.c-rose   { --accent-bg: #fce9f0; --accent-fg: #be185d; background: #fce9f0; color: #be185d; }
.c-amber   { --accent-bg: #fbf3da; --accent-fg: #a16207; background: #fbf3da; color: #a16207; }
.c-red   { --accent-bg: #fdeaea; --accent-fg: #b91c1c; background: #fdeaea; color: #b91c1c; }

.dept-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.55rem;
}

.dept-card p {
  font-size: 0.95rem;
  color: var(--muted);
  flex-grow: 1;
}

.dept-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.3rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-600);
}

.dept-more .icon {
  width: 1em;
  height: 1em;
  transition: transform 0.2s ease;
}

.dept-card:hover .dept-more .icon {
  transform: translateX(5px);
}

/* ---------- Why Choose Us (icons only) ---------- */
/* Flex, not grid: with 9 cards the last row holds one, and a grid strands it
   against the left edge. justify-content:center fills complete rows exactly
   as a grid would, while centring whatever is left over on the final row.
   min-width:0 on the card is what keeps a long label from widening it. */
.why-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
}

.why-grid > .why-chip {
  flex: 0 1 calc(25% - 1.05rem);   /* 4 per row: 3 gaps of 1.4rem shared */
  min-width: 0;
}

.why-chip {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.4rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.why-chip:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(3, 132, 206, 0.3);
}

.why-chip-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.why-chip-icon .icon {
  width: 25px;
  height: 25px;
}

.why-chip h3 {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}

/* ---------- Home Collection ---------- */
.homecol {
  background: var(--secondary-soft);
}

.homecol-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.homecol-media {
  position: relative;
}

.homecol-media::before {
  content: "";
  position: absolute;
  inset: 1.6rem -1.6rem -1.6rem 1.6rem;
  border-radius: var(--radius-xl);
  background: rgba(242, 143, 32, 0.25);
}

.homecol-img {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 1 / 0.92;
  background: #fff;
}

.homecol-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.homecol-chip {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-md);
}

.homecol-chip .icon {
  width: 18px;
  height: 18px;
  color: var(--wa);
}

.homecol-book {
  margin-top: 1.9rem;
  background: #fff;
  border: 1px solid rgba(242, 143, 32, 0.35);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.7rem 1.8rem;
}

.homecol-field {
  margin-bottom: 1.2rem;
}

.homecol-field label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.45rem;
}

.homecol-select {
  position: relative;
}

.homecol-select select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 0.9rem 3rem 0.9rem 1.1rem;
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.homecol-select select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(3, 132, 206, 0.18);
}

.homecol-select::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--primary-600);
  border-bottom: 2.5px solid var(--primary-600);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.homecol-phone {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  background: var(--primary-soft);
  border-radius: var(--radius);
  margin-bottom: 1.4rem;
}

.homecol-phone .icon {
  width: 22px;
  height: 22px;
  color: var(--primary-600);
}

.homecol-phone span {
  font-size: 0.88rem;
  color: var(--muted);
  display: block;
}

.homecol-phone a {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.homecol-phone a:hover {
  color: var(--primary-700);
}

.homecol-phone:last-child {
  margin-bottom: 0;
}

/* ---------- Packages ---------- */
.pkg-swiper {
  overflow: hidden;
  padding: 0.4rem 0.25rem 3.2rem;
}

/* dynamic bullets: 3 main dots, neighbours shrink/fade, track jumps along */
.pkg-swiper .swiper-pagination {
  bottom: 0;
}

.pkg-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b8cadb;
  opacity: 1;
  transition: background 0.3s ease;
}

.pkg-swiper .swiper-pagination-bullet-active {
  background: var(--primary-600);
}

.pkg-card {
  height: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.pkg-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.pkg-media {
  position: relative;
  aspect-ratio: 4 / 2.7;
  overflow: hidden;
  background: var(--bg-soft);
}

.pkg-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

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

.pkg-save {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  background: var(--secondary);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.32rem 0.8rem;
  border-radius: var(--radius-pill);
}

.pkg-body {
  padding: 1.4rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.pkg-body h3 {
  font-size: 1.12rem;
  line-height: 1.4;
  margin-bottom: 0.4rem;
}

.pkg-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.75rem;
}

.pkg-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-top: auto;
}

.pkg-price {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--primary-600);
}

.pkg-mrp {
  font-size: 0.95rem;
  color: var(--muted);
  text-decoration: line-through;
}

/* packed footer action row — table-style split cells */
.pkg-foot {
  display: grid;
  grid-template-columns: 1fr;   /* one action: View details, full width */
  border-top: 1px solid var(--line);
  margin: 1.1rem -1.5rem -1.5rem;
}

.pkg-foot-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  transition: background 0.22s ease, color 0.22s ease;
}

.pkg-foot-link + .pkg-foot-link {
  border-left: 1px solid var(--line);
}

.pkg-foot-link .icon {
  width: 17px;
  height: 17px;
}

.pkg-foot-link:hover {
  background: var(--primary-soft);
  color: var(--primary-700);
}

.pkg-foot-wa:hover {
  background: #e7f6ef;
  color: var(--wa);
}

/* ---------- Testimonials (full-bleed) ---------- */
.testi-band {
  background: var(--primary-soft);
  overflow: hidden;
}

.testi-swiper {
  overflow: hidden;
  padding-bottom: 0.5rem;
}

/* continuous auto-scroll (marquee) */
.testi-swiper .swiper-wrapper {
  transition-timing-function: linear;
}

.testi-card {
  height: auto;
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2.1rem 2rem 1.9rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.testi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--secondary);
}

.testi-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.testi-mark {
  position: absolute;
  top: 1rem;
  right: 1.3rem;
  color: var(--primary-soft);
  pointer-events: none;
}

.testi-mark .icon {
  width: 58px;
  height: 58px;
}

.testi-text {
  position: relative;
  font-size: 0.98rem;
  line-height: 1.75;
  flex-grow: 1;
}

.testi-footer {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.testi-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary-600);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.testi-person {
  flex-grow: 1;
}

.testi-person strong {
  display: block;
  font-size: 1.02rem;
  color: var(--ink);
}

.testi-person span {
  font-size: 0.9rem;
  color: var(--muted);
}

.testi-stars {
  display: inline-flex;
  gap: 0.18rem;
  color: var(--secondary);
}

.testi-stars .icon {
  width: 16px;
  height: 16px;
}

/* ---------- News & Events ---------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.news-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.news-media {
  aspect-ratio: 16 / 9.2;
  overflow: hidden;
  background: var(--bg-soft);
}

.news-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

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

.news-body {
  padding: 1.5rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.85rem;
}

.news-tag {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--secondary-dark);
  background: var(--secondary-soft);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.85rem;
}

.news-date {
  font-size: 0.9rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.news-date .icon {
  width: 15px;
  height: 15px;
  color: var(--primary);
}

.news-card h3 {
  font-size: 1.18rem;
  line-height: 1.42;
  margin-bottom: 0.6rem;
}

.news-card h3 a {
  color: inherit;
}

.news-card h3 a:hover {
  color: var(--primary-600);
}

.news-body p {
  font-size: 0.95rem;
  color: var(--muted);
  flex-grow: 1;
}

.news-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.15rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-600);
}

.news-more .icon {
  width: 1em;
  height: 1em;
  transition: transform 0.2s ease;
}

.news-card:hover .news-more .icon {
  transform: translateX(5px);
}

/* ---------- Careers ---------- */
.job-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 900px;
  margin-inline: auto;
}

.job-row {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.6rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.job-row:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(3, 132, 206, 0.3);
}

.job-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.job-icon .icon {
  width: 26px;
  height: 26px;
}

.job-info {
  flex-grow: 1;
  min-width: 0;
}

.job-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.job-info h3 {
  font-size: 1.15rem;
}

.job-badge {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--secondary);
  padding: 0.22rem 0.65rem;
  border-radius: var(--radius-pill);
}

.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.2rem;
  margin-top: 0.35rem;
}

.job-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.job-meta .icon {
  width: 15px;
  height: 15px;
  color: var(--primary);
}

/* ---------- Brochure Stripe ---------- */
.brochure {
  position: relative;
  background: linear-gradient(100deg, var(--primary-700) 0%, var(--primary-600) 55%, #0380c4 100%);
  padding-block: clamp(2.4rem, 4.5vw, 3.4rem);
  overflow: hidden;
}

.brochure::before,
.brochure::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.14);
}

.brochure::before {
  width: 300px;
  height: 300px;
  top: -150px;
  right: -70px;
}

.brochure::after {
  width: 190px;
  height: 190px;
  bottom: -95px;
  left: 24%;
}

.brochure-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
}

.brochure h2 {
  color: #fff;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  letter-spacing: -0.01em;
}

.brochure p {
  margin-top: 0.35rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.98rem;
}

/* normal button + large circle icon before the text */
.btn-brochure {
  padding: 0.55rem 1.8rem 0.55rem 0.55rem;
  gap: 0.85rem;
  flex-shrink: 0;
}

.btn-circle {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--secondary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
}

.btn-circle .icon {
  width: 20px;
  height: 20px;
}

.btn-brochure:hover .btn-circle {
  background: var(--primary-600);
}

/* ---------- Footer (dark — required place) ---------- */
.site-footer {
  background: var(--navy);
  color: #a9c1d4;
  font-size: 0.95rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr 1fr 1.05fr;
  gap: 2.75rem;
  padding-block: clamp(3.2rem, 6vw, 4.5rem) 2.75rem;
}

.footer-brand-logo {
  display: inline-block;
  background: #fff;
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  margin-bottom: 1.3rem;
}

.footer-brand-logo img {
  height: 46px;
  width: auto;
}

.footer-brand p {
  margin-bottom: 1.5rem;
}

.footer-social {
  display: flex;
  gap: 0.7rem;
}

.footer-social a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #d4e4f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.footer-social a:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #17293a;
  transform: translateY(-3px);
}

.footer-social .icon {
  width: 17px;
  height: 17px;
}

.footer-col h3 {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 1.35rem;
  position: relative;
  padding-bottom: 0.7rem;
}

.footer-col h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: var(--secondary);
}

.footer-links li + li {
  margin-top: 0.65rem;
}

.footer-links a {
  color: #a9c1d4;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-links a:hover {
  color: #ffca8a;
  transform: translateX(4px);
}

.footer-links .icon {
  width: 13px;
  height: 13px;
  color: var(--secondary);
}

.footer-branches li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}

.footer-branches li + li {
  margin-top: 1rem;
}

.footer-branches .icon {
  width: 18px;
  height: 18px;
  color: var(--secondary);
  margin-top: 0.25rem;
  flex-shrink: 0;
}

.footer-branches strong {
  display: block;
  color: #e8f1f8;
  font-size: 1rem;
}

.footer-branches a {
  color: #a9c1d4;
  font-size: 0.95rem;
}

.footer-branches a:hover {
  color: #ffca8a;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  /* the email address is one long unbreakable word; without these it pushes
     past the column edge and gets clipped instead of wrapping */
  min-width: 0;
  overflow-wrap: anywhere;
}

.footer-contact li + li {
  margin-top: 0.9rem;
}

.footer-contact .icon {
  width: 17px;
  height: 17px;
  color: var(--secondary);
  margin-top: 0.3rem;
}

.footer-contact a {
  color: #d4e4f0;
}

.footer-contact a:hover {
  color: #ffca8a;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.92rem;
}

.footer-bottom a {
  color: inherit;
  transition: color 0.2s ease;
}

.footer-bottom a:hover {
  color: #ffca8a;
}

/* ---------- WhatsApp FAB ---------- */
.wa-fab {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: var(--z-fab);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--wa-bright);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(18, 140, 126, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wa-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--wa-bright);
  opacity: 0.45;
  z-index: -1;
  animation: wa-pulse 2.2s ease-out infinite;
}

@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: 0.45; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

.wa-fab:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 18px 36px rgba(18, 140, 126, 0.55);
  color: #fff;
}

.wa-fab .icon {
  width: 30px;
  height: 30px;
}

/* ---------- Scroll Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .why-grid > .why-chip {
    flex-basis: calc(50% - 0.7rem);   /* 2 per row */
  }

  .footer-top {
    /* minmax(0,1fr): the unbreakable email address must not widen its column */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

@media (max-width: 992px) {
  /* keep the top bar to a single line */
  .topbar-hours {
    display: none;
  }

  .about-grid,
  .homecol-grid {
    grid-template-columns: 1fr;
  }

  .about-media,
  .homecol-media {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
  }

  .about-media {
    min-height: clamp(360px, 78vw, 520px);
    padding-right: 0;
  }

  .homecol-media::before {
    right: 0;
  }

  .news-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }

  .hero-arrow {
    display: none;
  }
}

/* mobile banner: centred, tightened to a single message + one row of actions */
@media (max-width: 768px) {
  .hero-slide {
    position: relative;
  }

  /* whole caption block sits at the BOTTOM of the banner */
  .hero-inner {
    height: 100%;
    display: flex;
    align-items: flex-end;
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: none;
    width: 100%;
    padding-block: 2rem 2.25rem;
  }

  /* supporting line and scroll cue are noise at this size */
  .hero-lead,
  .hero-scroll {
    display: none;
  }

  .hero-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
  }

  .hero-actions .btn {
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
    flex: 0 1 auto;
    min-width: 0;
  }

  /* caption reads last, under the buttons — in flow, so it can never
     overflow the way the absolutely positioned version did */
  .hero-chip {
    order: 3;
    margin: 1.1rem 0 0;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
    padding: 0.5rem 1.1rem;
  }
}

/* mobile: center all section headings */
@media (max-width: 768px) {
  .sec-head,
  .col-head {
    text-align: center;
  }

  .sec-head .sec-sub {
    margin-inline: auto;
  }

  .sec-head--row {
    display: block;
  }

  .sec-head--row .dept-controls {
    justify-content: center;
    margin-top: 1.4rem;
  }

  .sec-head--row > .btn {
    margin-top: 1.4rem;
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 100px;
  }

  /* job rows: icon + text share the first line, the button gets its own.
     flex-basis 0 stops the text column being squeezed into a word-per-line
     sliver between the icon and the button. */
  .job-row {
    flex-wrap: wrap;
    padding: 1.2rem 1.3rem;
    gap: 1rem 1.1rem;
  }

  .job-row .job-info {
    flex: 1 1 0;
  }

  .job-row .btn {
    width: 100%;
  }

  /* brochure stripe reads as one centred unit once the button wraps below */
  .brochure-inner {
    justify-content: center;
    text-align: center;
  }

  /* footer columns stack: side by side the long email and hours get clipped */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  /* two tighter columns instead of one long list; the equal minmax(0,1fr)
     tracks are narrow here, so the chip slims down to keep its text inside */
  .why-grid {
    gap: 0.9rem;
  }

  .why-grid > .why-chip {
    flex-basis: calc(50% - 0.45rem);
  }

  .why-chip {
    gap: 0.8rem;
    padding: 0.95rem 1rem;
  }

  .why-chip-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
  }

  .why-chip-icon .icon {
    width: 21px;
    height: 21px;
  }

  .why-chip h3 {
    font-size: 0.92rem;
    min-width: 0;
    overflow-wrap: break-word;
  }

  /* topbar: single line — phone + socials only */
  .topbar-inner {
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .topbar-contacts {
    flex-wrap: nowrap;
  }

  /* On a phone the bar becomes a row of evenly spaced chips: the dividers
     and side padding that space things out on desktop are dropped, and a flex
     gap does the work instead - otherwise the icons collide. */
  .topbar-contacts > * {
    padding-inline: 0;
    border-left: none !important;
  }

  .topbar-contacts {
    gap: 0.35rem;
    align-items: center;
  }

  /* Both numbers stay reachable, but as ICONS only - two full numbers plus an
     email will not fit a 360px bar. */
  .topbar-contacts a[href^="mailto"],
  .topbar-hours {
    display: none;
  }

  .topbar-txt {
    display: none;
  }

  .topbar-contacts a {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.14);
    transition: background 0.2s ease;
  }

  .topbar-contacts a:hover,
  .topbar-contacts a:active {
    background: rgba(255, 255, 255, 0.26);
  }

  /* white on the chip, not the desktop gold: the gold was tuned for text
     beside it, and alone on a tinted square it reads as a smudge */
  .topbar-contacts a .icon {
    width: 16px;
    height: 16px;
    color: #fff;
  }

  .topbar-state {
    margin-left: 0.2rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.75rem;
    line-height: 1;
  }

  .topbar-state .dot {
    width: 7px;
    height: 7px;
  }

  .topbar-social {
    gap: 0.4rem;
  }

  .topbar-social a {
    width: 28px;
    height: 28px;
  }

  .header-main-inner {
    min-height: 74px;
  }

  .brand img {
    height: 50px;
  }

  /* icon-only Download button so it never crowds the hamburger */
  .header-result {
    padding: 0.7rem 0.95rem;
    min-height: 44px;
    font-size: 0;
    gap: 0;
  }

  .header-result .icon {
    width: 20px;
    height: 20px;
  }
}

/* small phones: logo + icon button + hamburger must still fit 320px */
@media (max-width: 400px) {
  .header-main-inner {
    gap: 0.5rem;
  }

  .brand img {
    height: 42px;
  }

  .header-result {
    padding: 0.7rem 0.8rem;
  }

  .header-result .icon {
    width: 18px;
    height: 18px;
  }

  .hero-swiper {
    height: min(68vh, 500px);   /* ~80% of the previous banner height */
  }

  .about-media {
    min-height: clamp(330px, 86vw, 430px);
  }

  .why-grid > .why-chip {
    flex-basis: 100%;   /* single column on small phones */
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }

  .wa-fab {
    width: 54px;
    height: 54px;
    right: 1rem;
    bottom: 1rem;
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .wa-fab::before {
    animation: none;
  }
}

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

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  background: linear-gradient(115deg, var(--navy) 0%, var(--navy-2) 52%, var(--primary-700) 100%);
  /* clears the menu bar overlapping the page top (see .nav-bar margin) */
  padding: calc(var(--nav-h) + clamp(3rem, 6.5vw, 4.5rem)) 0 clamp(2.75rem, 6vw, 4rem);
  overflow: hidden;
}

.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.09);
}

.page-hero::before {
  width: 320px;
  height: 320px;
  top: -140px;
  right: -80px;
}

.page-hero::after {
  width: 200px;
  height: 200px;
  bottom: -110px;
  left: 22%;
}

.page-hero .sec-label {
  color: #ffbf6b;
}

.page-hero .sec-label::before {
  background: #ffbf6b;
}

.page-hero h1 {
  color: #fff;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 21ch;
}

.page-hero .lede {
  margin-top: 0.9rem;
  max-width: 62ch;
  color: rgba(233, 242, 249, 0.88);
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.4rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.breadcrumb a {
  color: #b8d4e8;
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: #fff;
}

.breadcrumb .crumb-sep {
  color: rgba(255, 255, 255, 0.4);
}

.breadcrumb [aria-current="page"] {
  color: #ffbf6b;
}

/* ---------- Contact layout ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: stretch;
}

/* office details */
.office-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.6rem;
}

.office-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.office-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.office-item-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.office-item-icon .icon {
  width: 21px;
  height: 21px;
}

.office-item strong {
  display: block;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 0.15rem;
}

.office-item p,
.office-item a {
  font-size: 0.95rem;
  color: var(--body-clr);
}

.office-item a {
  display: inline-block;
  color: var(--primary-600);
  font-weight: 600;
}

.office-item a:hover {
  color: var(--primary-700);
  text-decoration: underline;
}

.office-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

/* ---------- Enquiry form ---------- */
.enquiry-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 5px solid var(--secondary);
  border-radius: var(--radius-xl);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-lg);
}

.enquiry-card > p {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem 1rem;
  margin-top: 1.2rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

.field .req {
  color: #c2333b;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px rgba(3, 132, 206, 0.18);
}

.field [aria-invalid="true"] {
  border-color: #c2333b;
}

.field-err {
  display: block;
  min-height: 0;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: #c2333b;             /* 5.2:1 on white */
}

.form-status {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.form-status.is-ok { color: var(--wa); }
.form-status.is-err { color: #c2333b; }

/* ---------- Map ---------- */
.map-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--line);
}

.map-wrap iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
}

/* ---------- Contact responsive ---------- */
@media (max-width: 1199px) {
  /* no menu-bar overlap in drawer mode */
  .page-hero {
    padding-top: clamp(2.5rem, 6vw, 3.5rem);
  }
}

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

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

  .map-wrap iframe {
    height: 340px;
  }

  .office-cta .btn {
    width: 100%;
  }
}

.contact-grid .sec-title {
  margin-bottom: 0.8rem;
}

/* page-hero refinements: photo behind a navy overlay, centred content */
.page-hero {
  background:
    linear-gradient(115deg, rgba(6, 39, 63, 0.94) 0%, rgba(7, 46, 75, 0.88) 52%, rgba(2, 98, 157, 0.82) 100%),
    url("../img/banner-1.webp") center / cover no-repeat;
  text-align: center;
  /* One height for every inner page: short banners (one-line title, no lede)
     grow to match the tallest, and the content centres in the extra room. */
  display: flex;
  align-items: center;
  min-height: clamp(360px, 37vw, 460px);
}

.page-hero .container {
  width: 100%;
}

.page-hero h1 {
  margin-inline: auto;
}

.page-hero .lede {
  margin-inline: auto;
}

.page-hero .breadcrumb {
  justify-content: center;
}

/* Equal-height contact columns.
   Scoped above the 992px stack point: once the grid is a single column each
   item owns its own row, so the fill rules would only distort the form. */
@media (min-width: 993px) {
  .enquiry-card {
    display: flex;
    flex-direction: column;
  }

  .enquiry-card .form-grid {
    flex: 1;
    /* rows: name+phone / email+subject / message (absorbs slack) / submit */
    grid-template-rows: auto auto 1fr auto;
  }

  .field--grow {
    display: flex;
    flex-direction: column;
  }

  .field--grow textarea {
    flex: 1;
  }
}

/* ============================================================
   Departments page
   ============================================================ */
.dept-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:clamp(1.25rem,2.5vw,1.9rem);
}

.dept-tile{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .28s ease,box-shadow .28s ease;
}
.dept-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}

.dept-tile-media{
  position:relative;
  aspect-ratio:3 / 2;
  background:var(--bg-soft);
  overflow:hidden;
}
.dept-tile-media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.dept-tile:hover .dept-tile-media img{transform:scale(1.05)}

/* icon chip straddling the image edge */
/* Zero-height positioning strip. The chip MUST NOT be a child of
   .dept-tile-media (overflow:hidden) - it would clip half the chip away. */
.dept-tile-chip{position:relative;height:0;flex:0 0 auto;z-index:2}

/* the photo and heading open the modal too - show the affordance */
[data-dept-trigger]{cursor:pointer}
.dept-tile-body h3[data-dept-trigger]{transition:color .2s ease}
.dept-tile:hover .dept-tile-body h3[data-dept-trigger]{color:var(--primary-700)}

.dept-tile-icon{
  position:absolute;
  left:1.5rem;          /* matches .dept-tile-body padding so chip and text share an edge */
  top:-26px;
  width:52px;height:52px;
  border-radius:15px;
  /* soft per-department accent, matching the home page cards. The fallbacks mean
     a chip with no .c-* class still paints instead of going transparent. */
  background:var(--accent-bg,var(--primary-700));
  color:var(--accent-fg,#fff);
  display:grid;place-items:center;
  box-shadow:0 8px 20px rgba(9,44,71,.14);
  border:3px solid #fff;
}
.dept-tile-icon svg{width:23px;height:23px}

.dept-tile-body{
  padding:2.4rem 1.5rem 1.5rem;
  display:flex;flex-direction:column;
  flex-grow:1;
}
.dept-tile-body h3{
  font-size:1.2rem;
  margin-bottom:.5rem;
}
.dept-tile-body > p{
  font-size:.95rem;
  color:var(--muted);
  line-height:1.65;
}

.dept-rich{
  padding-top:.75rem;
  font-size:.93rem;
  line-height:1.75;
  color:var(--body-clr);
}
.dept-rich p{margin-bottom:.8rem}
.dept-rich p:last-child{margin-bottom:0}
.dept-rich h3{
  font-size:1rem;
  margin:1rem 0 .5rem;
  color:var(--ink);
}
.dept-rich ul{
  margin:0 0 .8rem;
  padding-left:1.1rem;
  list-style:none;
}
.dept-rich li{
  position:relative;
  padding-left:.9rem;
  margin-bottom:.35rem;
}
.dept-rich li::before{
  content:"";
  position:absolute;
  left:0;top:.6em;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--secondary);
}

@media (max-width:640px){
  .dept-grid{grid-template-columns:1fr}
  .dept-tile-body{padding:2.2rem 1.25rem 1.25rem}
}

/* ---- read more button ---- */
.dept-more{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-top:auto;
  padding:.75rem 0 0;
  font:inherit;
  font-size:.92rem;
  font-weight:600;
  color:var(--primary-600);
  background:none;
  border:0;
  cursor:pointer;
  align-self:flex-start;
}
.dept-more .icon{
  width:1em;height:1em;
  transition:transform .22s ease;
}
/* Focus restored after the panel closes: keep the focus, drop the ring. Cleared
   on the next key press by js/main.js, so keyboard navigation is unaffected. */
.dept-more.no-ring:focus,
.dept-more.no-ring:focus-visible{outline:none}

.dept-more:hover{color:var(--primary-700)}
.dept-more:hover .icon{transform:translateX(4px)}

/* ---- department modal ---- */
html.modal-locked{overflow:hidden}

/* Same two-panel shape as the booking modal: gradient sidebar with the icon,
   title and lead; photo and write-up on the right. Only the right pane ever
   scrolls (thin themed bar), so the rounded corners stay intact. */
dialog.dept-modal{
  width:min(880px,calc(100vw - 2rem));
  max-height:min(88vh,700px);
  margin:auto;
  inset:0;
  padding:0;
  border:0;
  border-radius:var(--radius-xl);
  /* gradient underlay below the sidebar column, so subpixel rounding at odd
     zoom levels never shows a white sliver at the panel edges */
  background:linear-gradient(160deg,var(--navy) 0%,var(--primary-700) 100%) left top / 264px 100% no-repeat #fff;
  box-shadow:0 40px 90px rgba(4,26,43,.4);
  overflow:hidden;
  color:var(--body-clr);
}
dialog.dept-modal::backdrop{
  background:rgba(6,39,63,.6);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
dialog.dept-modal[open]{
  display:flex;
  align-items:stretch;
  animation:deptIn .3s cubic-bezier(.2,.8,.28,1);
}
@keyframes deptIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

.dept-modal-close{
  position:absolute;
  top:.9rem;right:.9rem;
  z-index:3;
  width:40px;height:40px;
  border:0;border-radius:50%;
  background:var(--bg-soft);
  color:var(--ink);
  display:grid;place-items:center;
  cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.dept-modal-close:hover{background:var(--line);transform:scale(1.06)}
.dept-modal-close svg{width:19px;height:19px}

/* an image-less or lead-less department must collapse the slot, not leave a gap */
dialog.dept-modal [hidden]{display:none !important}

/* the indexable source copy for each modal - present in the DOM, never shown inline */
.dept-body-src[hidden]{display:none !important}

.dept-modal-side{
  flex:0 0 264px;
  display:flex;flex-direction:column;
  background:linear-gradient(160deg,var(--navy) 0%,var(--primary-700) 100%);
  color:#fff;
  padding:1.9rem 1.6rem;
}
/* the icon keeps the card's c-* accent paint, echoing the tile it came from */
.dept-modal-icon{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:56px;height:56px;
  border-radius:16px;margin-bottom:1.1rem;
  background:var(--accent-bg,rgba(255,255,255,.14));
  color:var(--accent-fg,#fff);
}
.dept-modal-icon svg{width:26px;height:26px}
.dept-modal-side h2{
  color:#fff;
  font-size:1.35rem;
  line-height:1.3;
  letter-spacing:-.01em;
  margin-bottom:.6rem;
}
.dept-modal-lead{
  font-size:.9rem;
  color:rgba(233,242,249,.85);
  line-height:1.65;
}

.dept-modal-body{
  flex:1 1 auto;
  min-width:0;min-height:0;
  padding:1.6rem 1.7rem;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.dept-modal-body::-webkit-scrollbar{width:8px}
.dept-modal-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.dept-modal-body::-webkit-scrollbar-track{background:transparent}

.dept-modal-media{
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-soft);
  margin-bottom:1.3rem;
}
.dept-modal-media img{
  width:100%;
  max-height:240px;
  object-fit:cover;
  display:block;
}

@media (max-width:640px){
  dialog.dept-modal{
    width:100%;
    max-width:100%;
    max-height:92dvh;
    inset:auto 0 0 0;
    margin:0;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    background:#fff;   /* stacked layout: the sidebar underlay would peek */
  }
  dialog.dept-modal[open]{flex-direction:column;animation:deptSheet .3s cubic-bezier(.2,.8,.28,1)}
  @keyframes deptSheet{from{transform:translateY(100%)}to{transform:none}}
  /* the sidebar becomes a slim gradient header, like the booking sheet */
  .dept-modal-side{flex:none;padding:1.3rem 3rem 1.1rem 1.3rem}
  .dept-modal-side h2{font-size:1.15rem;margin-bottom:.3rem}
  .dept-modal-lead{font-size:.84rem}
  .dept-modal-icon{display:none}
  .dept-modal-close{background:rgba(255,255,255,.18);color:#fff}
  .dept-modal-close:hover{background:rgba(255,255,255,.3)}
  .dept-modal-body{padding:1.1rem 1.2rem 1.4rem}
}

/* ============================================================
   Inner pages: careers, news, testimonials, gallery, tests
   ============================================================ */

/* ---- shared page furniture ---- */

.list-count{
  font-size:.9rem;color:var(--muted);margin-bottom:1.4rem;
}

.empty-state{
  text-align:center;max-width:520px;margin:0 auto;padding:3.5rem 1.5rem;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-lg);
}
.empty-state .icon{width:44px;height:44px;color:var(--muted);margin-bottom:1rem}
.empty-state h1,.empty-state h2{font-size:1.35rem;margin-bottom:.6rem;color:var(--ink)}
.empty-state p{color:var(--muted);line-height:1.7;margin-bottom:1.2rem}
.empty-state .btn{margin-top:.4rem}

/* category chips - a real link per view, not a JS toggle */
.chip-filter{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem;
}
.chip{
  display:inline-flex;align-items:center;
  padding:.5rem 1.05rem;border-radius:var(--radius-pill);
  font-size:.88rem;font-weight:600;
  background:var(--bg-soft);color:var(--body-clr);
  border:1px solid var(--line);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.chip:hover{background:var(--primary-soft);border-color:var(--primary-100);color:var(--primary-700)}
.chip.on{background:var(--primary-600);border-color:var(--primary-600);color:#fff}

/* rich text shared by job descriptions and articles */
/* legal pages read as a single centred column */
.legal-body{max-width:860px;margin:0 auto}

/* ---- careers: nothing open ---- */
/* Same gradient-panel family as .reach-panel. The generic .empty-state box was
   the only thing on the page whenever nothing is advertised, and a lone grey
   rectangle reads as a dead end - this keeps the CV route and the departments
   in front of the visitor instead. */
.talent{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(280px,1.05fr) minmax(0,1fr);
  gap:clamp(1.6rem,3.5vw,3rem);align-items:center;
  background:linear-gradient(135deg,var(--navy) 0%,var(--primary-700) 100%);
  border-radius:var(--radius-xl);
  padding:clamp(1.8rem,4vw,3rem);
  box-shadow:var(--shadow-lg);
}
/* faint rings, echoing the page hero and the branch reach panel */
.talent::before,.talent::after{
  content:"";position:absolute;border-radius:50%;
  border:2px solid rgba(255,255,255,.08);pointer-events:none;
}
.talent::before{width:300px;height:300px;top:-140px;right:-80px}
.talent::after{width:190px;height:190px;bottom:-110px;left:22%}

.talent-intro{position:relative;z-index:1}
.talent-badge{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.35rem .8rem;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#ffbf6b;font-size:.74rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}
.talent-badge .icon{width:14px;height:14px}
.talent-intro h2{
  color:#fff;font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.3;margin:.9rem 0 0;
}
.talent-intro h2 .hl{color:#ffd9a0}
.talent-intro p{
  color:rgba(233,242,249,.85);line-height:1.75;margin:.75rem 0 1.5rem;max-width:46ch;
}
.talent-cta{display:flex;flex-wrap:wrap;gap:.7rem}
.talent-note{font-size:.82rem;color:rgba(233,242,249,.6);margin:1.2rem 0 0}

.talent-teams{position:relative;z-index:1}
.talent-teams-head{
  color:rgba(255,255,255,.7);font-size:.76rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;margin:0 0 .9rem;
}
.talent-teams ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:.7rem;
}
.talent-teams li{
  display:flex;align-items:center;gap:.7rem;min-width:0;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg);
  padding:.7rem .85rem;
  color:#fff;font-size:.86rem;font-weight:600;line-height:1.35;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.talent-teams li:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.24);
  transform:translateY(-2px);
}
/* the c-* class supplies the pastel plate; on navy it reads as a colour index
   the same way it does on the department cards */
.talent-team-icon{
  flex:0 0 auto;display:grid;place-items:center;
  width:34px;height:34px;border-radius:10px;
  background:var(--accent-bg,rgba(255,255,255,.14));
  color:var(--accent-fg,#fff);
}
.talent-team-icon .icon{width:18px;height:18px}

@media (max-width:900px){
  .talent{grid-template-columns:1fr;gap:1.8rem}
}
@media (max-width:520px){
  .talent-teams ul{grid-template-columns:1fr}
  .talent-cta .btn{width:100%}
}

/* ---- thank-you page ---- */
.thanks-card{
  max-width:640px;margin:0 auto;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:clamp(2.2rem,5vw,3.5rem);box-shadow:var(--shadow-md);
}
.thanks-icon{
  display:grid;place-items:center;margin:0 auto 1.3rem;
  width:74px;height:74px;border-radius:50%;
  background:#e3f5ea;color:#15803d;
}
.thanks-icon .icon{width:34px;height:34px}
.thanks-card h1{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:.7rem}
.thanks-lead{color:var(--body-clr);line-height:1.75;max-width:46ch;margin:0 auto 1.5rem}
.thanks-next{
  list-style:none;margin:0 auto 1.8rem;padding:1.2rem 1.4rem;max-width:460px;
  background:var(--bg-soft);border-radius:var(--radius-lg);
  display:grid;gap:.7rem;text-align:left;
}
.thanks-next li{
  display:flex;gap:.6rem;align-items:flex-start;
  font-size:.92rem;line-height:1.6;color:var(--body-clr);
}
.thanks-next .icon{width:16px;height:16px;flex:0 0 auto;margin-top:.2rem;color:#15803d}
.thanks-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

.rich h2{font-size:1.35rem;margin:1.8rem 0 .7rem;color:var(--ink)}
.rich h3{font-size:1.12rem;margin:1.6rem 0 .6rem;color:var(--ink)}
.rich h3:first-child,.rich h2:first-child{margin-top:0}
.rich p{margin-bottom:1rem;line-height:1.75}
.rich ul,.rich ol{margin:0 0 1.1rem 0;padding:0;list-style:none}
.rich ol{counter-reset:ri}
.rich li{position:relative;padding-left:1.6rem;margin-bottom:.5rem;line-height:1.7}
.rich ul li::before{
  content:"";position:absolute;left:.35rem;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--primary);
}
.rich ol li{counter-increment:ri}
.rich ol li::before{
  content:counter(ri);position:absolute;left:0;top:.05em;
  width:1.15rem;height:1.15rem;border-radius:50%;
  background:var(--primary-soft);color:var(--primary-700);
  font-size:.72rem;font-weight:700;display:grid;place-items:center;
}
.rich strong{color:var(--ink)}
.rich a{color:var(--primary-600);text-decoration:underline}

/* ============================================================
   Careers
   ============================================================ */
.vacancy-list{display:grid;gap:1.1rem}

.job-card{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;
  padding:1.6rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease;
}
.job-card:hover{
  box-shadow:var(--shadow-md);transform:translateY(-2px);
  border-color:var(--primary-100);
}
.job-card-main{flex:1 1 340px;min-width:0}
.job-card-title{font-size:1.2rem;margin-bottom:.7rem;line-height:1.35}
.job-card-title a{color:var(--ink)}
.job-card-title a:hover{color:var(--primary-700)}

.vacancy-meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;
  list-style:none;margin:0 0 .7rem;padding:0;
}
.vacancy-meta li{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.87rem;color:var(--muted);
}
.vacancy-meta .icon{width:15px;height:15px;color:var(--primary-600);flex:0 0 auto}

.job-qual{font-size:.88rem;color:var(--body-clr);line-height:1.6}
.job-qual span{
  display:inline-block;font-weight:700;color:var(--ink);
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  margin-right:.4rem;
}

.job-card-side{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;
}
.job-closing{
  font-size:.8rem;font-weight:600;color:var(--secondary-dark);
  background:var(--secondary-soft);padding:.3rem .7rem;border-radius:var(--radius-pill);
}

/* ---- job detail: content left, apply right ---- */
.job-detail{
  display:grid;grid-template-columns:minmax(0,1fr) 380px;
  gap:2.5rem;align-items:start;
}
.job-detail-main{min-width:0}

.job-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;list-style:none;margin:0 0 2rem;padding:0;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;
}
.job-facts li{
  background:#fff;padding:1rem 1.1rem;
  display:flex;flex-direction:column;gap:.2rem;
}
.job-facts span{
  font-size:.7rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);
}
.job-facts strong{font-size:.95rem;color:var(--ink);font-weight:600;line-height:1.45}

.job-back{margin-top:2rem}
.job-back a{
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:600;color:var(--primary-600);
}
.job-back a:hover{color:var(--primary-700)}
.job-back .icon{width:17px;height:17px;transition:transform .2s ease}
.job-back a:hover .icon{transform:translateX(-4px)}

/* the apply panel follows the reader down the description */
.job-apply{position:sticky;top:calc(var(--nav-h) + 1.5rem)}
.job-apply-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.6rem;box-shadow:var(--shadow-md);
}
.job-apply-card h2{font-size:1.2rem;margin-bottom:.4rem;color:var(--ink)}
.apply-lead{font-size:.9rem;color:var(--muted);margin-bottom:1.2rem;line-height:1.6}
.apply-again{margin-top:1rem;font-size:.9rem}
.apply-again a{color:var(--primary-600);font-weight:600}
.apply-note{
  margin-top:.9rem;font-size:.78rem;color:var(--muted);line-height:1.6;text-align:center;
}

.apply-form .field{margin-bottom:.95rem}
.apply-form label{
  display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:.35rem;
}
.apply-form .req{color:var(--secondary-dark)}
.apply-form input[type=text],
.apply-form input[type=email],
.apply-form input[type=tel],
.apply-form textarea{
  width:100%;padding:.7rem .85rem;
  border:1px solid var(--line);border-radius:var(--radius);
  font:inherit;font-size:.92rem;color:var(--ink);background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.apply-form input:focus,.apply-form textarea:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(3,132,206,.14);
}
.apply-form [aria-invalid=true]{border-color:#c0392b}
.apply-form textarea{resize:vertical;min-height:80px}

.apply-form .field-err{
  margin-top:.3rem;font-size:.78rem;color:#b3261e;font-weight:600;
}

/* the file input itself is invisible; the face below is what people see */
.file-drop{position:relative}
.file-drop input[type=file]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;
}
.file-drop-face{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  padding:1.15rem 1rem;text-align:center;
  border:2px dashed var(--line);border-radius:var(--radius);
  background:var(--bg-soft);
  transition:border-color .2s ease,background .2s ease;
}
.file-drop input[type=file]:focus-visible + .file-drop-face,
.file-drop:hover .file-drop-face{border-color:var(--primary);background:var(--primary-soft)}
.file-drop-face .icon{width:22px;height:22px;color:var(--primary-600)}
.file-drop-face b{font-size:.88rem;color:var(--ink);font-weight:600;word-break:break-all}
.file-drop-face small{font-size:.75rem;color:var(--muted)}
.file-drop.has-file .file-drop-face{border-style:solid;border-color:var(--primary);background:var(--primary-soft)}

/* honeypot: off-screen, never display:none - some bots skip hidden fields */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-note{
  padding:.85rem 1rem;border-radius:var(--radius);
  font-size:.88rem;line-height:1.6;margin-bottom:1rem;
}
.form-note.is-ok{background:#e6f6ec;color:#14683a;border:1px solid #bfe6cd}
.form-note.is-err{background:#fdecea;color:#9c1f13;border:1px solid #f5c6c2}
.form-note.is-warn{background:var(--secondary-soft);color:var(--secondary-dark);border:1px solid #f5d5a8}

/* ============================================================
   News & Events
   ============================================================ */
.post-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.6rem;
}
.post-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease,transform .25s ease;
}
.post-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.post-card-media{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--bg-soft)}
.post-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.post-card:hover .post-card-media img{transform:scale(1.05)}
.post-card-body{padding:1.3rem;display:flex;flex-direction:column;flex-grow:1}
.post-card-body h2{font-size:1.1rem;line-height:1.4;margin-bottom:.55rem}
.post-card-body h2 a{color:var(--ink)}
.post-card-body h2 a:hover{color:var(--primary-700)}
.post-excerpt{font-size:.9rem;color:var(--muted);line-height:1.65;margin-bottom:1rem;flex-grow:1}

.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  font-size:.78rem;color:var(--muted);margin-bottom:.6rem;
}
.post-cat{
  background:var(--primary-soft);color:var(--primary-700);
  padding:.22rem .6rem;border-radius:var(--radius-pill);font-weight:700;
  font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;
}

/* ---- article ---- */
.article{max-width:820px}
.article-head{margin-bottom:1.8rem}
.article-head h1{font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.25;margin-bottom:.7rem}
.article-media{
  margin:0 0 2rem;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-soft);
}
.article-media img{width:100%;height:auto;display:block}
.article-body{font-size:1rem;color:var(--body-clr)}

/* ============================================================
   Testimonials
   ============================================================ */
.testi-summary{
  margin-top:.9rem;font-size:.95rem;color:rgba(255,255,255,.9);
}
.testi-summary strong{
  font-size:1.5rem;font-weight:800;color:#fff;
  margin-right:.2rem;vertical-align:-.05em;
}
.testi-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;
}
.review-card{
  position:relative;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:2rem 1.6rem 1.5rem;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
  transition:box-shadow .25s ease,transform .25s ease;
}
.review-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.testi-quote{
  position:absolute;top:1.1rem;right:1.3rem;
  width:34px;height:34px;color:var(--primary-soft);
}
.review-stars{display:flex;gap:2px;margin-bottom:.9rem}
.review-stars .icon{width:16px;height:16px;color:var(--line)}
.review-stars .icon.on{color:#f0a92c}
.review-card blockquote{margin:0 0 1.3rem;flex-grow:1}
.review-card blockquote p{
  font-size:.97rem;line-height:1.75;color:var(--body-clr);
}
.review-card figcaption{
  display:flex;align-items:center;gap:.75rem;
  padding-top:1rem;border-top:1px solid var(--line);
}
.review-avatar{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:var(--primary-soft);color:var(--primary-700);
  display:grid;place-items:center;font-weight:800;font-size:1rem;
}
.review-card figcaption strong{display:block;font-size:.92rem;color:var(--ink)}
.review-card figcaption small{display:block;font-size:.8rem;color:var(--muted)}

/* ============================================================
   Gallery
   ============================================================ */
.gal-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.1rem;
}
.gal-item{margin:0}
.gal-item a{
  position:relative;display:block;
  aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--radius-lg);background:var(--bg-soft);
  box-shadow:var(--shadow-sm);
}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gal-item a:hover img{transform:scale(1.06)}
.gal-zoom{
  position:absolute;inset:0;
  display:grid;place-items:center;
  background:rgba(6,39,63,.42);
  opacity:0;transition:opacity .25s ease;
}
.gal-item a:hover .gal-zoom,
.gal-item a:focus-visible .gal-zoom{opacity:1}
.gal-zoom .icon{
  width:40px;height:40px;color:#fff;
  background:rgba(255,255,255,.18);border-radius:50%;padding:8px;
}
.gal-item figcaption{padding:.7rem .2rem 0}
.gal-item figcaption strong{display:block;font-size:.9rem;color:var(--ink);font-weight:600}
.gal-item figcaption small{display:block;font-size:.78rem;color:var(--muted);margin-top:.1rem}

/* lightbox */
dialog.lightbox{
  width:min(1100px,calc(100vw - 2rem));
  max-height:min(92vh,900px);
  margin:auto;inset:0;padding:0;border:0;
  background:transparent;overflow:visible;
}
dialog.lightbox::backdrop{background:rgba(4,20,34,.88)}
.lightbox-img{
  display:block;max-width:100%;max-height:78vh;
  margin:0 auto;border-radius:var(--radius-lg);
  background:#0b2436;
}
.lightbox-cap{
  margin-top:.9rem;text-align:center;color:#fff;font-size:.92rem;
}
.lightbox-cap b{display:block;font-weight:600}
.lightbox-cap small{color:rgba(255,255,255,.6);font-size:.8rem}
/* Anchored to the VIEWPORT, not the dialog. The dialog shrinks to fit each
   photo, so absolutely-positioned controls jumped around as you paged
   between a portrait and a landscape shot. Fixed keeps them still.
   (Safe here: nothing above them carries a transform or filter, either of
   which would make an ancestor the containing block instead.) */
.lightbox-close,.lightbox-nav{
  position:fixed;z-index:3;
  width:36px;height:36px;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 4px 14px rgba(4,26,43,.3);
  transition:background .2s ease,transform .2s ease;
}
.lightbox-nav .icon,.lightbox-close .icon{width:16px;height:16px}

.lightbox-close{top:1.1rem;right:1.1rem}
.lightbox-close:hover{background:#fff;transform:scale(1.08)}

/* the arrows keep their own centring transform, so the hover scale has to
   restate it or they jump to the top of the screen on hover */
.lightbox-prev,.lightbox-next{top:50%;transform:translateY(-50%)}
.lightbox-prev{left:1.1rem}
.lightbox-next{right:1.1rem}
.lightbox-nav:hover{background:#fff;transform:translateY(-50%) scale(1.08)}

/* ============================================================
   Tests
   ============================================================ */
.test-search{margin-bottom:2rem}
.test-search-box{
  position:relative;display:flex;align-items:center;gap:.7rem;
  max-width:620px;padding:.85rem 1.1rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);
  box-shadow:var(--shadow-sm);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.test-search-box:focus-within{
  border-color:var(--primary);box-shadow:0 0 0 4px rgba(3,132,206,.13);
}
.test-search-box > .icon{width:19px;height:19px;color:var(--muted);flex:0 0 auto}
.test-search-box input{
  flex:1;min-width:0;border:0;outline:none;background:none;
  font:inherit;font-size:.98rem;color:var(--ink);
}
.test-search-box input::-webkit-search-cancel-button{display:none}
.test-search-clear{
  flex:0 0 auto;width:26px;height:26px;border:0;border-radius:50%;
  background:var(--bg-soft);color:var(--muted);
  display:grid;place-items:center;cursor:pointer;
}
.test-search-clear:hover{background:var(--line);color:var(--ink)}
.test-search-clear .icon{width:14px;height:14px}
.test-search-help{margin-top:.6rem;font-size:.85rem;color:var(--muted)}
.test-search-help span{font-weight:700;color:var(--ink)}

.test-noresult{
  padding:1.6rem;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--radius-lg);text-align:center;color:var(--muted);
  margin-bottom:2rem;
}
.test-noresult b{color:var(--ink)}
.test-noresult a{color:var(--primary-600);font-weight:600}

.test-cats{display:grid;gap:1.5rem}
.test-cat{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.5rem;box-shadow:var(--shadow-sm);
}
.test-cat-head{
  position:relative;padding-bottom:1rem;margin-bottom:1.1rem;
  border-bottom:1px solid var(--line);padding-right:6rem;
}
.test-cat-head h2{font-size:1.15rem;color:var(--ink);margin-bottom:.3rem}
.test-cat-head p{font-size:.87rem;color:var(--muted);line-height:1.6}
.test-cat-count{
  position:absolute;top:0;right:0;
  font-size:.74rem;font-weight:700;letter-spacing:.04em;
  color:var(--primary-700);background:var(--primary-soft);
  padding:.28rem .7rem;border-radius:var(--radius-pill);
}
.test-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:.4rem .9rem;list-style:none;margin:0;padding:0;
}
.test-list li{
  position:relative;padding:.4rem .2rem .4rem 1.2rem;
  font-size:.91rem;color:var(--body-clr);line-height:1.5;
}
.test-list li::before{
  content:"";position:absolute;left:.25rem;top:.85em;
  width:5px;height:5px;border-radius:50%;background:var(--primary-100);
}
/* A line wrapped in ** in the admin. Usually a test that heads the ones under
   it, so it takes the darker ink and a solid bullet as well as the weight. */
.test-list li.is-bold{font-weight:700;color:var(--ink)}
.test-list li.is-bold::before{background:var(--primary-600)}

.test-list li mark{
  background:#fdf0c9;color:var(--ink);font-weight:700;
  padding:0 .1em;border-radius:2px;
}
.test-foot{
  margin-top:2rem;padding:1.2rem 1.4rem;
  background:var(--primary-soft);border-radius:var(--radius-lg);
  font-size:.92rem;color:var(--body-clr);line-height:1.7;
}
.test-foot a{color:var(--primary-700);font-weight:600}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:960px){
  .job-detail{grid-template-columns:1fr;gap:2rem}
  .job-apply{position:static}
}
@media (max-width:640px){
  .job-card{flex-direction:column;align-items:stretch;gap:1rem}
  /* the card is column-direction here, so the desktop flex-basis of 340px
     would read as a 340px HEIGHT and leave a void under the text */
  .job-card-main{flex-basis:auto}
  .job-card-side{flex-direction:column;align-items:stretch;gap:.7rem}
  .job-closing{align-self:flex-start;white-space:nowrap}
  .job-card-side .btn{width:100%}
  .job-facts{grid-template-columns:1fr 1fr}
  .test-cat-head{padding-right:0}
  .test-cat-count{position:static;display:inline-block;margin-top:.6rem}
  .test-list{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
  /* same idea on a phone, just tucked closer to the edges */
  .lightbox-close,.lightbox-nav{width:34px;height:34px}
  .lightbox-close{top:.7rem;right:.7rem}
  .lightbox-prev{left:.5rem}
  .lightbox-next{right:.5rem}
}

/* Two utilities the new pages reference. Without these the submit button was
   not full-width and the "view all" link had no spacing - the same undefined
   class problem that made the page heroes render wrong. */
.btn-block{display:flex;width:100%;justify-content:center}
.sec-more{margin-top:2rem;text-align:center}

/* ---- testimonials: masonry ----
   Quotes vary a lot in length, and a regular grid stretches every card in a row
   to the tallest one, leaving big empty gaps under the short ones. CSS columns
   let each card keep its natural height and pack the next one straight beneath.

   Why columns rather than grid: `grid-template-rows: masonry` is still behind a
   flag in Firefox only, and a JS masonry library reflows after paint, which
   costs a visible jump. Columns are laid out by the browser before first paint.
   The trade-off is that reading order runs down each column rather than across
   the row - for independent quotes with no sequence, that costs nothing.

   `columns: 320px 3` means "about 320px wide, at most 3", so the count adapts to
   the viewport on its own and needs no breakpoints. */
.testi-grid{
  display:block;                 /* replaces the grid above */
  columns:320px 3;
  column-gap:1.5rem;
}

.review-card{
  /* a card must never be split down the middle by a column break */
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  /* natural height is the whole point, so no flex stretching */
  display:block;
  width:100%;
  margin:0 0 1.5rem;
}

/* the quote no longer has to grow to push the name to a shared baseline */
.review-card blockquote{flex-grow:0}

/* ---- news detail: story left, image + recent right ---- */
.article-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:3rem;                      /* generous, so the two columns read as separate */
  align-items:start;
}
.article-main{min-width:0}       /* without this a long word or wide table
                                    forces the whole grid wider than the page */

.article-head{
  padding-bottom:1.2rem;
  margin-bottom:1.6rem;
  border-bottom:1px solid var(--line);
}
.article-head .post-meta{margin-bottom:0}

/* the sidebar follows the reader down a long story */
.article-side{position:sticky;top:calc(var(--nav-h) + 1.5rem);display:grid;gap:1.5rem}

.side-media{
  margin:0;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--bg-soft);border:1px solid var(--line);
}
.side-media img{width:100%;height:auto;display:block}

.side-block{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.3rem;box-shadow:var(--shadow-sm);
}
.side-title{
  font-size:1.02rem;color:var(--ink);
  padding-bottom:.8rem;margin-bottom:.4rem;
  border-bottom:1px solid var(--line);
}
.side-posts{list-style:none;margin:0;padding:0}
.side-posts li + li{border-top:1px solid var(--line)}
.side-posts a{
  display:flex;gap:.8rem;align-items:flex-start;
  padding:.85rem 0;
  transition:opacity .2s ease;
}
.side-posts a:hover{opacity:.75}
.side-thumb{
  flex:0 0 64px;width:64px;height:64px;
  border-radius:10px;overflow:hidden;background:var(--bg-soft);
}
.side-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.side-txt{min-width:0}
.side-txt strong{
  display:block;font-size:.88rem;font-weight:600;color:var(--ink);
  line-height:1.4;margin-bottom:.25rem;
}
.side-posts a:hover .side-txt strong{color:var(--primary-700)}
.side-txt time{font-size:.76rem;color:var(--muted)}
.side-all{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:.9rem;font-size:.86rem;font-weight:600;color:var(--primary-600);
}
.side-all:hover{color:var(--primary-700)}
.side-all .icon{width:15px;height:15px;transition:transform .2s ease}
.side-all:hover .icon{transform:translateX(3px)}

@media (max-width:960px){
  .article-layout{grid-template-columns:1fr;gap:2.5rem}
  .article-side{position:static;grid-template-columns:1fr}
}
@media (min-width:641px) and (max-width:960px){
  /* on a tablet the two sidebar blocks sit happily side by side */
  .article-side{grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
}

/* ---- article page refinements ---- */

/* wider trench between story and sidebar */
.article-layout{gap:4.5rem}

.article-head{padding-bottom:1.4rem;margin-bottom:1.8rem}
.article-head .post-meta{margin-bottom:.7rem}
/* Justified body copy. hyphens:auto is not optional here - justifying without
   it stretches word spacing into visible "rivers" running down the column.
   The <html lang="en"> the chrome sets is what lets the browser hyphenate. */
.article-body p{
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}

/* ---- previous / next ---- */
.post-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  margin-top:2.8rem;padding-top:1.8rem;border-top:1px solid var(--line);
}
.post-nav-gap{display:block}          /* holds the column when only one link exists */

.post-nav-link{
  display:flex;align-items:center;gap:.9rem;
  padding:1.05rem 1.15rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.post-nav-link:hover{
  border-color:var(--primary-100);
  box-shadow:var(--shadow-sm);
  transform:translateY(-2px);
}
.post-nav-link.is-next{flex-direction:row;justify-content:flex-end;text-align:right}

.post-nav-arrow{
  flex:0 0 auto;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--primary-soft);color:var(--primary-700);
  transition:background .22s ease,color .22s ease,transform .22s ease;
}
.post-nav-arrow .icon{width:16px;height:16px}
.post-nav-link:hover .post-nav-arrow{background:var(--primary-600);color:#fff}
.post-nav-link.is-prev:hover .post-nav-arrow{transform:translateX(-3px)}
.post-nav-link.is-next:hover .post-nav-arrow{transform:translateX(3px)}

.post-nav-txt{min-width:0}
.post-nav-label{
  display:block;
  font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.2rem;
}
.post-nav-txt strong{
  display:block;
  font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.4;
  /* two lines maximum, so a long headline cannot make one card twice the
     height of its neighbour */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.post-nav-link:hover .post-nav-txt strong{color:var(--primary-700)}

@media (max-width:640px){
  .post-nav{grid-template-columns:1fr;gap:.7rem}
  .post-nav-gap{display:none}
  .post-nav-link.is-next{flex-direction:row-reverse;justify-content:flex-end;text-align:left}
  /* a narrow measure cannot be justified without ugly gaps, however good the
     hyphenation is - fall back to ragged right on phones */
  .article-body p{text-align:left;hyphens:manual}
}

/* ---- news detail: banner label + in-body title ---- */

/* The banner line on an article page. A <p>, not a heading: it says the same
   thing on every article, so making it the h1 would give the whole section one
   duplicated heading and bury each article's real title. Styled to match
   .page-hero h1 exactly so the band looks identical to every other page. */
.page-hero .hero-title{
  color:#fff;
  font-size:clamp(1.9rem,3.6vw,2.75rem);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0;
}

/* the article's own title, which IS the h1 */
.article-title{
  font-size:clamp(1.45rem,2.6vw,1.95rem);
  line-height:1.3;
  color:var(--ink);
  margin-bottom:.7rem;
}
.article-lead{
  font-size:1.06rem;
  line-height:1.7;
  color:var(--muted);
  margin-bottom:0;
}
.article-head .post-meta{margin-bottom:.6rem}

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

/* ---- the story: text left, picture + facts right ---- */
.about-story{
  display:grid;grid-template-columns:minmax(0,1fr) 400px;
  gap:clamp(2.5rem,5vw,4.5rem);align-items:start;
}
.about-story-text{min-width:0;font-size:1rem}
.about-story-text p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.about-story-side{
  position:sticky;top:90px;              /* keeps the picture in view beside long copy */
  display:flex;flex-direction:column;gap:1.1rem;
}
.about-story-media{
  position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-md);background:var(--bg-soft);
}
.about-story-media img{width:100%;height:auto;display:block}
.about-story-badge{
  position:absolute;left:1rem;bottom:1rem;
  display:flex;align-items:center;gap:.7rem;
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-md);
  padding:.7rem 1.05rem;
}
.about-story-badge strong{font-size:1.85rem;font-weight:800;color:var(--primary-600);line-height:1}
.about-story-badge span{font-size:.78rem;font-weight:600;line-height:1.35;color:var(--ink)}
.about-story-facts{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.about-story-fact{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.05rem 1.15rem;box-shadow:var(--shadow-sm);
}
.about-story-fact strong{display:block;font-size:1.55rem;font-weight:800;color:var(--primary-600);line-height:1.15;margin-bottom:.25rem}
.about-story-fact span{display:block;font-size:.85rem;line-height:1.35;color:var(--muted)}

/* ---- vision & mission ---- */
/* motto | vision | mission - a fixed three, so the track count is fixed too */
.vm-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;
  align-items:stretch;
}
.vm-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:2rem 1.8rem;box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease,transform .25s ease;
}
.vm-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.vm-icon{
  display:grid;place-items:center;
  width:54px;height:54px;border-radius:16px;margin-bottom:1.1rem;
  /* the card's c-* class paints this; the fallbacks keep a class-less chip
     from going transparent */
  background:var(--accent-bg,var(--primary-soft));
  color:var(--accent-fg,var(--primary-700));
}
.vm-icon .icon{width:26px;height:26px}
.vm-card h3{font-size:1.2rem;color:var(--ink);margin-bottom:.6rem}
.vm-card p{font-size:.98rem;line-height:1.75;color:var(--body-clr)}

/* ---- why choose us ---- */
/* Each card carries a c-* accent class, used only for its --accent-bg /
   --accent-fg vars; the card repaints its own surface white below (these
   rules sit after the c-* block, so they win on source order). */
.about-why{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.3rem;
}
.about-why-item{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;
  background:#fff;color:var(--body-clr);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.8rem 1.5rem 1.6rem;box-shadow:var(--shadow-sm);
  transition:opacity .7s ease,transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.about-why-item::before{               /* accent bar slides in on hover */
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent-fg,var(--primary));
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.about-why-item:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-md);
  border-color:var(--accent-bg,var(--primary-100));
}
.about-why-item:hover::before{transform:scaleX(1)}
.about-why-icon{
  flex:0 0 auto;display:grid;place-items:center;
  width:52px;height:52px;border-radius:15px;margin-bottom:1.05rem;
  background:var(--accent-bg,var(--primary-soft));color:var(--accent-fg,var(--primary-700));
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
.about-why-item:hover .about-why-icon{
  background:var(--accent-fg,var(--primary));color:#fff;transform:scale(1.06);
}
.about-why-icon .icon{width:24px;height:24px}
.about-why-item h3{font-size:1.05rem;color:var(--ink);margin-bottom:.45rem;line-height:1.35}
.about-why-item p{font-size:.92rem;line-height:1.7;color:var(--muted)}

/* ---- certificate ---- */
.about-cert{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:3rem;align-items:center;
}
.about-cert-img{
  margin:0;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);background:#fff;
  border:1px solid var(--line);
}
.about-cert-img img{width:100%;height:auto;display:block}
.about-cert-text .sec-title{margin-bottom:.9rem}
.lede-dark{font-size:1.02rem;line-height:1.75;color:var(--body-clr)}

/* ---- logo strips ----
   Fixed-height cells with object-fit:contain, so logos of different aspect
   ratios line up on a common baseline instead of stair-stepping. */
/* The strip scrolls. Two identical copies sit side by side in .logo-track and
   the track slides left by exactly half its width, which lands on the start of
   the second copy - so the loop has no jump. The spacing is margin-right on
   each tile rather than a flex gap, because a gap would leave the two halves
   unequal by one gap and the seam would stutter. */
.logo-marquee{
  position:relative;
  overflow:hidden;
  /* fade the tiles out at both edges instead of cutting them dead */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.logo-track{
  display:flex;
  width:max-content;
  animation:logo-scroll 42s linear infinite;
}
.logo-marquee:hover .logo-track,
.logo-marquee:focus-within .logo-track{animation-play-state:paused}

@keyframes logo-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

.logo-strip{
  display:flex;list-style:none;margin:0;padding:0;
}
.logo-strip li{
  flex:0 0 auto;
  width:190px;margin-right:1rem;
  display:grid;place-items:center;
  height:92px;padding:1rem 1.2rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.logo-strip li:hover{border-color:var(--primary-100);box-shadow:var(--shadow-sm)}
.logo-strip img{
  max-width:100%;max-height:56px;
  width:auto;height:auto;object-fit:contain;display:block;
}
.logo-word{
  font-weight:700;font-size:.95rem;color:var(--ink);
  text-align:center;letter-spacing:.01em;
}

/* Someone who has asked their system for less motion gets a strip they scroll
   themselves; the duplicate copy would only be repeated content there. */
@media (prefers-reduced-motion:reduce){
  .logo-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .logo-track{animation:none}
  .logo-track .logo-strip[aria-hidden="true"]{display:none}
}

/* ---- branches ---- */
.about-branches{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.3rem;
}
.about-branch{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.5rem 1.4rem 1.4rem;box-shadow:var(--shadow-sm);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.about-branch:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--primary-100)}
.about-branch-top{display:flex;align-items:center;gap:.8rem;margin-bottom:.85rem}
.about-branch-icon{
  flex:0 0 auto;display:grid;place-items:center;
  width:42px;height:42px;border-radius:12px;
  background:var(--primary-soft);color:var(--primary-600);
}
.about-branch-icon .icon{width:20px;height:20px}
.about-branch h3{font-size:1.05rem;color:var(--ink);line-height:1.3;margin:0}
.about-branch-ho{
  display:inline-block;vertical-align:middle;margin-left:.4rem;
  padding:.15rem .55rem;border-radius:var(--radius-pill);
  font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  background:var(--secondary-soft);color:var(--secondary-dark);
}
.about-branch-addr{font-size:.9rem;line-height:1.65;color:var(--muted);margin-bottom:.9rem}
/* The open/closed dot and the phone pair are the shared .branch-state and
   .branch-tels components (see the branches page) - the card carries no
   styling of its own for them, so the two pages cannot drift apart. */
.about-branch-foot{margin-top:auto}       /* buttons line up across cards */
.about-branch-foot .btn{width:100%}

@media (max-width:960px){
  .about-story{grid-template-columns:1fr;gap:2rem}
  .about-story-side{order:-1;position:static}   /* picture first when stacked */
  .about-cert{grid-template-columns:1fr;gap:2rem}
  /* three to one: a two-track row would strand the third card on its own */
  .vm-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .about-story-text p{text-align:left;hyphens:manual}
  .branch-intro-text p{text-align:left;hyphens:manual}
  /* No gap here: the spacing is margin-right on the tile, so that one copy of
     the list is exactly half the track and the loop stays seamless. */
  .logo-strip li{width:150px;margin-right:.6rem;height:76px;padding:.7rem}
  .logo-strip img{max-height:44px}
}


/* ############################################################
   BRANCHES, PACKAGES & HOME VISIT
   ############################################################ */

/* ============================================================
   Branches
   ============================================================ */
.branch-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem;
}
.branch-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease,transform .25s ease;
}
.branch-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.branch-card-media{
  position:relative;aspect-ratio:4/2.7;overflow:hidden;
  background:var(--primary-soft);display:grid;place-items:center;
}
.branch-card-media > a{display:grid;place-items:center;width:100%;height:100%}
.branch-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.branch-card:hover .branch-card-media img{transform:scale(1.05)}
.branch-card-fallback .icon{width:56px;height:56px;color:var(--primary-100)}
.branch-badge{
  position:absolute;top:.9rem;left:.9rem;
  background:var(--secondary);color:#fff;
  font-size:.78rem;font-weight:700;
  padding:.32rem .8rem;border-radius:var(--radius-pill);
}
.branch-card-body{padding:1.4rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex-grow:1}
.branch-card-body h2{font-size:1.15rem;line-height:1.4;margin-bottom:.45rem}
.branch-card-body h2 a{color:var(--ink)}
.branch-card-body h2 a:hover{color:var(--primary-700)}
.branch-addr{
  font-size:.9rem;color:var(--muted);line-height:1.6;margin-bottom:.8rem;
  /* two lines for every card, so the rows below start at the same height
     whatever the address length - the grid reads as a set, not a jumble */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.9rem;
}

/* landline and mobile on one line, separated by a dot */
.branch-tels{
  display:flex;align-items:center;flex-wrap:wrap;gap:.1rem .5rem;
  font-size:.92rem;font-weight:600;color:var(--primary-600);
  margin:0 0 1.1rem;
}
.branch-tels .icon{width:15px;height:15px;flex:0 0 auto;margin-right:.15rem}
.branch-tels a{color:inherit;white-space:nowrap}
.branch-tels a:hover{color:var(--primary-700);text-decoration:underline}
.branch-tels .sep{color:var(--line);font-weight:700}
.branch-hours{
  display:flex;align-items:center;gap:.5rem;
  font-size:.85rem;color:var(--muted);margin-bottom:.6rem;
}
.branch-hours .icon{width:15px;height:15px;color:var(--primary-600);flex:0 0 auto}
.branch-tel{
  display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  font-size:.92rem;font-weight:600;color:var(--primary-600);white-space:nowrap;
  margin-bottom:1.2rem;
}
.branch-tel:hover{color:var(--primary-700)}
.branch-tel .icon{width:15px;height:15px}
.branch-card-foot{margin-top:auto}        /* buttons line up across cards */
.branch-card-foot .btn{width:100%}

/* ---------- branch detail ---------- */
.branch-intro{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2.5rem,5.5vw,5rem);align-items:stretch;   /* photo matches text height */
}
.branch-intro-text{min-width:0}
.branch-intro-text p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.pill-ho{
  display:inline-block;margin-bottom:.8rem;
  background:var(--secondary-soft);color:var(--secondary-dark);
  font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:.32rem .75rem;border-radius:var(--radius-pill);
}
.branch-intro-media{
  margin:0;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-md);background:var(--bg-soft);
}
/* fills whatever height the text column sets; falls back to natural height
   when the columns stack and the figure no longer has a definite height */
.branch-intro-media img{width:100%;height:100%;object-fit:cover;display:block}
.branch-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.7rem}

/* the facility tiles borrow the department tile styling wholesale; only the
   carousel wrapper and the icon-only fallback need anything of their own */
.fac-swiper{overflow:hidden;padding:.4rem .25rem 3rem}
.fac-swiper .swiper-scrollbar{
  left:0;width:100%;height:4px;bottom:1.2rem;background:var(--line);border-radius:99px;
}
.fac-swiper .swiper-scrollbar-drag{background:var(--primary-600);border-radius:99px}
.fac-card{height:auto}
.fac-media{display:grid;place-items:center}
.fac-fallback{
  display:grid;place-items:center;width:100%;height:100%;
}
.fac-fallback .icon{width:54px;height:54px}

/* ---------- contact + map ---------- */
/* ---------- how to reach: one gradient panel, glass info tiles inside ---------- */
.reach-panel{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);
  gap:clamp(1.6rem,3.5vw,3rem);align-items:center;
  background:linear-gradient(135deg,var(--navy) 0%,var(--primary-700) 100%);
  border-radius:var(--radius-xl);
  padding:clamp(1.8rem,4vw,3rem);
  box-shadow:var(--shadow-lg);
}
/* faint rings, echoing the page hero */
.reach-panel::before,.reach-panel::after{
  content:"";position:absolute;border-radius:50%;
  border:2px solid rgba(255,255,255,.08);pointer-events:none;
}
.reach-panel::before{width:300px;height:300px;top:-130px;right:-90px}
.reach-panel::after{width:190px;height:190px;bottom:-100px;left:30%}
.reach-intro{position:relative;z-index:1}
.reach-panel .sec-label{color:#ffbf6b}
.reach-panel .sec-label::before{background:#ffbf6b}
.reach-panel .sec-title{color:#fff}
.reach-panel .sec-title .hl{color:#ffd9a0}
.reach-intro p{
  color:rgba(233,242,249,.85);line-height:1.7;
  margin:.7rem 0 1.5rem;max-width:34ch;
}
.reach-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
}
.reach-item{
  display:flex;gap:.9rem;align-items:flex-start;min-width:0;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg);
  padding:1.1rem 1.2rem;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.reach-item:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.24);
  transform:translateY(-3px);
}
.reach-item > div{min-width:0}          /* long emails wrap instead of widening */
.reach-icon{
  flex:0 0 auto;display:grid;place-items:center;
  width:42px;height:42px;border-radius:12px;
}
.reach-icon .icon{width:19px;height:19px}
.reach-item b{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(233,242,249,.65);margin-bottom:.25rem;
}
.reach-item p{font-size:.93rem;color:#fff;line-height:1.6;overflow-wrap:anywhere}
.reach-item a{color:#fff;font-weight:600}
.reach-item a:hover{color:#ffd9a0}

@media (max-width:960px){
  .reach-panel{grid-template-columns:1fr;align-items:start}
}
@media (max-width:560px){
  .reach-grid{grid-template-columns:1fr}
}

/* ---------- home visit band ---------- */
.visit-band{background:linear-gradient(120deg,var(--navy) 0%,var(--primary-700) 100%)}
.visit-band-inner{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;
}
.visit-band .sec-label{color:#ffbf6b}
.visit-band .sec-label::before{background:#ffbf6b}
.visit-band .sec-title{color:#fff}
.visit-band .sec-title .hl{color:#ffd9a0}
.visit-band p{color:rgba(233,242,249,.9);line-height:1.7;max-width:54ch;margin-top:.7rem}
.visit-band-tel{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:1rem;
  font-size:1.02rem;font-weight:700;color:#ffd9a0;
}
.visit-band-tel:hover{color:#fff}
.visit-band-tel .icon{width:17px;height:17px}
.visit-band-cta{display:flex;flex-wrap:wrap;gap:.8rem}
/* No CTA in the band: one centred column instead of a stranded text block. */
.visit-band-inner.is-solo{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.visit-band-inner.is-solo p{margin-left:auto;margin-right:auto}

/* ============================================================
   Home visit modal
   ============================================================ */
/* Two panels: a branded sidebar and a compact two-column form, sized so the
   whole form is visible without scrolling on a laptop screen. If it ever does
   overflow, only the form pane scrolls (thin themed bar), so the dialog's
   rounded corners are never eaten by a scrollbar. */
dialog.visit-modal{
  width:min(880px,calc(100vw - 2rem));
  max-height:min(92vh,760px);
  margin:auto;inset:0;padding:0;border:0;position:fixed;
  border-radius:var(--radius-xl);
  /* same gradient painted under the sidebar column: at fractional zoom levels
     the panel can round a hairline short, and a white sliver would show */
  background:linear-gradient(160deg,var(--navy) 0%,var(--primary-700) 100%) left top / 264px 100% no-repeat #fff;
  box-shadow:0 40px 90px rgba(4,26,43,.4);
  overflow:hidden;color:var(--body-clr);
}
dialog.visit-modal::backdrop{
  background:rgba(6,39,63,.62);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
dialog.visit-modal[open]{
  display:flex;align-items:stretch;
  animation:visitIn .3s cubic-bezier(.2,.8,.28,1);
}
@keyframes visitIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

.visit-close{
  position:absolute;top:.9rem;right:.9rem;z-index:3;
  width:34px;height:34px;border:0;border-radius:50%;
  background:var(--bg-soft);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
  transition:background .2s ease;
}
.visit-close:hover{background:var(--line)}
.visit-close .icon{width:16px;height:16px}

.visit-side{
  flex:0 0 264px;display:flex;flex-direction:column;
  background:linear-gradient(160deg,var(--navy) 0%,var(--primary-700) 100%);
  color:#fff;padding:1.9rem 1.6rem;
}
.visit-icon{
  flex:0 0 auto;display:grid;place-items:center;
  width:52px;height:52px;border-radius:15px;margin-bottom:1.1rem;
  background:rgba(255,255,255,.14);color:#fff;
}
.visit-icon .icon{width:24px;height:24px}
.visit-side h2{font-size:1.35rem;line-height:1.3;color:#fff;margin-bottom:.6rem}
.visit-side p{font-size:.9rem;color:rgba(233,242,249,.85);line-height:1.65}
.visit-side-list{
  list-style:none;margin:auto 0 0;padding:1.4rem 0 0;display:grid;gap:.6rem;
}
.visit-side-list li{
  display:flex;gap:.55rem;align-items:flex-start;
  font-size:.84rem;line-height:1.5;color:rgba(233,242,249,.92);
}
.visit-side-list .icon{width:15px;height:15px;flex:0 0 auto;margin-top:.2rem;color:#7ee2b8}

.visit-form{
  flex:1 1 auto;min-width:0;padding:1.6rem 1.7rem;
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.visit-form::-webkit-scrollbar{width:8px}
.visit-form::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.visit-form::-webkit-scrollbar-track{background:transparent}
.visit-row{display:grid;grid-template-columns:1fr 1fr;gap:0 .9rem}
.visit-form .field{margin-bottom:.9rem}
.visit-form label{
  display:block;font-size:.78rem;font-weight:600;color:var(--ink);margin-bottom:.3rem;
}
.visit-form label small{font-weight:400;color:var(--muted)}
.visit-form .req{color:var(--secondary-dark)}
.visit-form input[type=text],
.visit-form input[type=tel],
.visit-form input[type=email],
.visit-form select,
.visit-form textarea{
  width:100%;padding:.6rem .75rem;
  border:1px solid var(--line);border-radius:var(--radius);
  font:inherit;font-size:.875rem;color:var(--ink);background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease;
}
/* .field sets min-height:44px (contact form shares the class), so the fixed
   height must match it or the min wins and the notes box misaligns */
.visit-form input[type=text],
.visit-form input[type=tel],
.visit-form input[type=email],
.visit-form select{height:44px}
.visit-form input:focus,.visit-form select:focus,.visit-form textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(3,132,206,.14);
}
.visit-form [aria-invalid=true]{border-color:#c0392b}
.visit-form textarea{resize:vertical;min-height:52px}
/* the notes box sits beside the email input - match their heights exactly,
   with no resize grip or inner scrollbar to break the line */
.visit-row textarea{
  min-height:0;height:44px;resize:none;
  scrollbar-width:none;white-space:nowrap;overflow-x:auto;
}
.visit-row textarea::-webkit-scrollbar{display:none}
.visit-form .field-err{margin-top:.28rem;font-size:.78rem;color:#b3261e;font-weight:600}

.visit-foot{
  margin-top:.4rem;display:flex;align-items:center;gap:.9rem;
}
.visit-foot .btn{flex:1;white-space:nowrap;font-size:.92rem;padding:.85rem 1.2rem}
.visit-or{font-size:.78rem;color:var(--muted);flex:0 0 auto}
.btn.is-busy{opacity:.6;pointer-events:none}

/* ============================================================
   Packages
   ============================================================ */
/* The card itself reuses the home page design (.pkg-card and friends, above).
   These are the extras the listing and detail pages need. */
.pkg-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;
  align-items:stretch;
}
.pkg-grid .pkg-card{height:100%}
.pkg-body h3 a{color:var(--ink)}
.pkg-body h3 a:hover{color:var(--primary-700)}
.pkg-price.is-ask{font-size:1.05rem;font-weight:700;color:var(--primary-700)}
.pkg-price-note{
  margin-top:.35rem;font-size:.74rem;font-weight:700;color:var(--secondary-dark);
}
.pkg-count{
  margin-left:auto;font-size:.74rem;font-weight:700;color:var(--primary-700);
  background:var(--primary-soft);padding:.24rem .6rem;border-radius:var(--radius-pill);
  white-space:nowrap;align-self:center;
}

/* a branch-only band reads as a different offer, so it gets the warm eyebrow */
.sec-label--accent{color:var(--secondary-dark)}
.sec-label--accent::before{background:var(--secondary)}
.branch-only{background:linear-gradient(180deg,var(--secondary-soft) 0%,var(--bg-soft) 65%)}

/* ---------- package detail ---------- */
.pkg-detail{
  display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:3.5rem;align-items:start;
}
.pkg-main{min-width:0}
.pkg-where{
  margin-top:1.7rem;padding:1rem 1.2rem;
  background:var(--bg-soft);border-radius:var(--radius);font-size:.93rem;line-height:1.7;
}
.pkg-where a{color:var(--primary-600);font-weight:600}
.pkg-where a:hover{text-decoration:underline}
.pkg-disclaimer{
  margin-top:1.2rem;font-size:.83rem;color:var(--muted);line-height:1.6;
  padding-left:.9rem;border-left:3px solid var(--line);
}

.pkg-side{position:sticky;top:calc(var(--nav-h) + 5.5rem)}
.pkg-side-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-md);
}
.pkg-side-media{margin:0;aspect-ratio:4/2.7;overflow:hidden;background:var(--bg-soft)}
.pkg-side-media img{width:100%;height:100%;object-fit:cover;display:block}
.pkg-side-body{padding:1.4rem}
.pkg-side-price{margin-bottom:1.1rem;text-align:center}
.pkg-side-price .pkg-amount{font-size:1.9rem;font-weight:800;color:var(--primary-600);display:block}
.pkg-side-price .pkg-ask{font-size:1.15rem;font-weight:700;color:var(--primary-700);display:block}
.pkg-side-price small{display:block;margin-top:.25rem;font-size:.82rem;color:var(--muted)}
.pkg-side-price a{color:var(--primary-600);font-weight:600}
.pkg-side-body .btn{margin-bottom:.6rem}
.pkg-side-body .btn:last-child{margin-bottom:0}
/* Sidebar contact block: the phone panel mirrors the one on the home page
   (icon in a disc, small label, big number on a soft-blue field), with the
   branch button under it at the same width. */
.pkg-side-call{border-top:1px solid var(--line);margin-top:1.1rem;padding-top:1.1rem}
.pkg-call-panel{
  display:flex;align-items:center;gap:.9rem;
  padding:.85rem 1rem;background:var(--primary-soft);border-radius:var(--radius);
  color:var(--ink);
}
.pkg-call-icon{
  flex:none;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:var(--primary-600);
  box-shadow:0 2px 8px rgba(2,98,157,.12);
}
.pkg-call-icon .icon{width:20px;height:20px}
.pkg-call-text{display:flex;flex-direction:column;min-width:0}
.pkg-call-label{
  font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--primary-700);margin-bottom:.15rem;
}
.pkg-call-num{font-size:1.32rem;font-weight:800;letter-spacing:.01em;line-height:1.15;color:var(--ink)}
.pkg-call-panel:hover .pkg-call-num{color:var(--primary-700)}
.pkg-call-branch{margin-top:.8rem}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:960px){
  .branch-intro{grid-template-columns:1fr;gap:2rem}
  .branch-intro-media{order:-1}
  .pkg-detail{grid-template-columns:1fr;gap:2.5rem}
  /* photo, price and the booking buttons come first once the columns stack -
     the test list is long, and a price below it is a price nobody finds */
  .pkg-side{position:static;order:-1}
  .visit-band-inner{grid-template-columns:1fr}
  .pkg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  /* full width rather than 50/50: "Book a home visit" barely fits half a small
     screen, and stacked full-width matches every other CTA pair on mobile */
  .branch-cta .btn{width:100%}

  /* home visit band reads as one centred unit once the columns have stacked */
  .visit-band-inner{text-align:center}
  .visit-band p{margin-inline:auto}
  .visit-band-cta{justify-content:center}
  .visit-band-cta .btn{width:100%}
  .visit-row{grid-template-columns:1fr}
  dialog.visit-modal{
    width:100%;max-width:100%;max-height:92dvh;
    inset:auto 0 0 0;margin:0;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    background:#fff;   /* stacked layout: the desktop sidebar underlay would peek */
  }
  dialog.visit-modal[open]{flex-direction:column;animation:visitSheet .3s cubic-bezier(.2,.8,.28,1)}
  @keyframes visitSheet{from{transform:translateY(100%)}to{transform:none}}
  /* the sidebar becomes a slim gradient header; the checklist and big icon
     would push the fields below the fold on a phone */
  .visit-side{flex:none;padding:1.3rem 3rem 1.1rem 1.3rem}
  .visit-side h2{font-size:1.15rem;margin-bottom:.3rem}
  .visit-side p{font-size:.84rem}
  .visit-icon,.visit-side-list{display:none}
  .visit-close{background:rgba(255,255,255,.18);color:#fff}
  .visit-close:hover{background:rgba(255,255,255,.3)}
  .visit-form{padding:1.1rem 1.2rem 1.4rem}
  .visit-foot{flex-direction:column;align-items:stretch;gap:.5rem}
  .pkg-grid{grid-template-columns:1fr}
  .branch-grid{grid-template-columns:1fr}
}

.pkg-price-list{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.45rem}
.pkg-price-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.45rem;border-bottom:1px dashed var(--line);font-size:.92rem;
}
.pkg-price-list li:last-child{border-bottom:0;padding-bottom:0}
.pkg-price-list span{font-weight:800;color:var(--ink);white-space:nowrap}

/* Card carousels run edge-to-edge on small screens: the negative margin
   cancels the container gutter exactly, so the active card sits flush on the
   left and the next one peeks in from the right bezel. Lives at the end of
   the sheet so it outranks every carousel's own padding shorthand. */
@media (max-width: 768px) {
  .dept-swiper,
  .pkg-swiper,
  .fac-swiper {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: 0;
  }
}

/* ---------------- rich content: inline figures & YouTube ---------------- */
.rich .rich-figure{margin:1.6rem 0}
.rich .rich-figure img{
  display:block;width:100%;height:auto;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.rich .rich-figure figcaption{
  margin-top:.55rem;font-size:.83rem;color:var(--muted);text-align:center;
}

/* The stored markup is only a thumbnail in a div; the player iframe is built
   by JS when the visitor taps play, so an unwatched video costs nothing. */
.rich .rich-video{
  position:relative;margin:1.6rem 0;
  aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;
  background:#000;cursor:pointer;
}
.rich .rich-video img{width:100%;height:100%;object-fit:cover;display:block}
.rich .rich-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.rich .rich-video .rv-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:46px;border:0;border-radius:12px;
  background:rgba(20,20,20,.82);cursor:pointer;
  display:grid;place-items:center;
  transition:background .2s ease,transform .2s ease;
}
.rich .rich-video .rv-play::after{
  content:"";display:block;margin-left:3px;
  border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
}
.rich .rich-video:hover .rv-play,
.rich .rich-video:focus-within .rv-play{background:#f00;transform:translate(-50%,-50%) scale(1.08)}

/* rich content: tables stretch the full column width; main.js wraps each one
   in .rich-scroll, so a table too wide for a phone scrolls inside that box
   instead of dragging the page sideways. */
.rich .rich-scroll{
  overflow-x:auto;margin:1.6rem 0;
  -webkit-overflow-scrolling:touch;
}
.rich .rich-scroll .rich-table{margin:0}
.rich .rich-table{
  width:100%;border-collapse:collapse;margin:1.6rem 0;
}
.rich .rich-table th,
.rich .rich-table td{
  border:1px solid var(--line);padding:.65rem .9rem;
  font-size:.93rem;line-height:1.55;text-align:left;vertical-align:top;
  min-width:90px;
}
.rich .rich-table th{
  background:var(--primary-soft);color:var(--ink);font-weight:700;white-space:nowrap;
}
.rich .rich-table tbody tr:nth-child(even) td{background:var(--bg-soft)}

/* belt and braces: ANY image inside rich content scales down, even one that
   arrives outside a figure */
.rich img{max-width:100%;height:auto}

/* ---------------- packages: branch selector ---------------- */
.pkg-filter{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;
  margin-bottom:2rem;padding:1rem 1.3rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.pkg-filter form{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.pkg-filter label{font-weight:700;color:var(--ink);font-size:.95rem}
.pkg-filter-select{position:relative}
.pkg-filter-select::after{
  content:"";position:absolute;right:1rem;top:50%;
  width:8px;height:8px;border-right:2px solid var(--primary-600);border-bottom:2px solid var(--primary-600);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
.pkg-filter-select select{
  appearance:none;-webkit-appearance:none;
  min-width:230px;padding:.7rem 2.6rem .7rem 1rem;
  border:1px solid var(--primary-100);border-radius:var(--radius);
  background:var(--primary-soft);font:inherit;font-size:.98rem;font-weight:600;color:var(--primary-700);
  cursor:pointer;
}
.pkg-filter-select select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(3,132,206,.14)}
.pkg-filter-note{font-size:.88rem;color:var(--muted);margin-left:auto}
.pkg-filter-note a{color:var(--primary-600);font-weight:600}
.pkg-filter-note a:hover{text-decoration:underline}
@media (max-width:640px){
  .pkg-filter{flex-direction:column;align-items:stretch}
  .pkg-filter form{flex-direction:column;align-items:stretch;gap:.45rem}
  .pkg-filter-select select{width:100%}
  .pkg-filter-note{margin-left:0}
}

/* ---------------- branch open / closed state ---------------- */
.branch-state{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.86rem;font-weight:700;margin:0 0 .7rem;
}
.branch-state .dot{
  width:9px;height:9px;border-radius:50%;flex:0 0 auto;
}
.branch-state.is-open{color:#15803d}
.branch-state.is-open .dot{
  background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2);
}
.branch-state.is-shut{color:#b91c1c}
.branch-state.is-shut .dot{
  background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.18);
}

/* full timetable on the branch detail page. It sits INSIDE the dark
   .reach-panel, so the palette is light-on-dark; the light-background
   variant below is for anywhere else it may be reused. Every row reads the
   same - no highlighted day, no accent colour. */
.hours-list{list-style:none;margin:.55rem 0 0;padding:0;display:grid;gap:.35rem}
.hours-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;
  font-family:var(--font);font-size:.93rem;color:var(--body-clr);
}
.hours-list li b{font-family:var(--font);color:var(--ink);white-space:nowrap;font-weight:700}

.reach-item .hours-list li{color:rgba(233,242,249,.78)}
.reach-item .hours-list li b{color:#fff}

/* the open/closed pill also needs a light-on-dark variant */
.reach-item .branch-state{margin-bottom:.5rem}
.reach-item .branch-state.is-open{color:#7ee2a8}
.reach-item .branch-state.is-shut{color:#ffa8a8}

/* ---------------- topbar open / closed state ---------------- */
.topbar-state{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font);font-size:.82rem;font-weight:700;
  white-space:nowrap;cursor:default;
}
.topbar-state .dot{
  width:8px;height:8px;border-radius:50%;flex:0 0 auto;
}
/* light-on-dark: the topbar is the deep navy band */
.topbar-state{color:#fff}
.topbar-state.is-open .dot{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.3)}
.topbar-state.is-shut .dot{background:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,.3)}

/* Small phones: everything stays on the bar - two numbers, the status and all
   four social links. They only fit if each is trimmed, so the sizes step down
   rather than anything being dropped. */
@media (max-width: 420px) {
  .topbar-inner { gap: 0.4rem; padding-inline: 0.35rem; }

  .topbar-contacts { gap: 0.25rem; }
  .topbar-contacts a { width: 28px; height: 28px; border-radius: 8px; }
  .topbar-contacts a .icon { width: 14px; height: 14px; }

  .topbar-state {
    margin-left: 0.1rem;
    padding: 0.26rem 0.45rem;
    font-size: 0.68rem;
    gap: 0.3rem;
  }
  .topbar-state .dot { width: 6px; height: 6px; box-shadow: 0 0 0 2px rgba(255,255,255,.18); }

  .topbar-social { gap: 0.2rem; }
  .topbar-social a { width: 24px; height: 24px; }
  .topbar-social .icon { width: 13px; height: 13px; }
}

/* The branches page puts the home-collection card in the band's second column.
   .homecol-book carries a top margin for the home page, where it follows a
   paragraph; here it is the column itself, so that margin is not wanted. */
/* An explicit width, not min(...,100%): the band's second column is sized to
   its content, so a percentage there resolves against the content itself and
   the card collapses to the width of the longest branch name. */
.visit-band-book{width:400px}
.visit-band-book .homecol-book{margin-top:0}
@media (max-width:960px){
  /* the band has stacked to one column by here, so the card fills it */
  .visit-band-book{width:100%;max-width:460px}
}
@media (max-width:640px){
  /* the band centres its text at this width; the card follows it */
  .visit-band-book{margin-inline:auto;text-align:left}
}

/* ---------- Footer: Quick Links on small screens ----------
   The column is nine items long and, once the footer has stacked to one
   column, it is a long scroll between the branch details and the contact
   details. Every link in it is in the main menu as well, so hiding it loses
   no navigation - except Terms and Privacy, which move to the bottom bar. */
.footer-legal{display:none}
@media (max-width:640px){
  .footer-col--links{display:none}
  .footer-legal{display:flex;gap:1.1rem;flex-wrap:wrap;justify-content:center}
}