/* =========================================================================
   Brockwell Healthcare — Design System
   Brand palette derived from the logo: forest green + sage green.
   (Variable names --navy-* = brand darks, --teal-* = brand greens,
    kept for stability; values are the Brockwell brand colours.)
   ========================================================================= */

:root {
  /* Brand darks (deep forest green) */
  --navy-900: #0c2616;
  --navy-800: #12351f;  /* headings, header brand, dark UI */
  --navy-700: #1c4d2e;
  /* Brand greens */
  --teal-600: #2e7d46;  /* primary action / links (forest green) */
  --teal-500: #3f9a59;  /* hover */
  --teal-400: #9cc06f;  /* sage accent (matches logo DNA helix) */
  --mint-50:  #eef4e3;  /* pale sage surface */

  /* Google brand colours — used ONLY for the verified tick + Google logo on
     reviews, so they read as authentic Google reviews. Not part of the theme. */
  --google-blue: #4285f4;
  --google-gold: #fbbc04;
  --ink:      #1a1c20;  /* professional near-black body text */
  --slate-600:#4d545c;  /* neutral grey — secondary text */
  --slate-400:#8b929c;  /* neutral grey — muted / placeholders */
  --line:     #e4ebe2;
  --bg:       #ffffff;
  --bg-soft:  #f6f7f9;   /* neutral light grey (not green-tinted) */
  --white:    #ffffff;

  --radius:   16px;
  --radius-sm:10px;
  --shadow:   0 10px 30px -12px rgba(12, 38, 22, .18);
  --shadow-lg:0 30px 60px -20px rgba(12, 38, 22, .28);
  --container: 1160px;

  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Montserrat', 'Poppins', Georgia, sans-serif;
}

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;            /* Poppins 400 — body text */
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  font-size: 1rem;   /* follows the 15px root — slightly smaller body/content text */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;   /* long words/URLs wrap instead of forcing a horizontal scroll */
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-600); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--teal-500); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display); line-height: 1.18; color: var(--navy-800);
  font-weight: 700; margin: 0 0 .5em;   /* all headings share one bold weight */
  text-transform: capitalize;           /* Title Case: first letter of every word */
}
h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.55rem, 3.1vw, 2.3rem); letter-spacing: -.015em; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: .9rem; }
p { margin: 0 0 1rem; }

strong, b { font-weight: 600; }   /* Poppins 600 — bold text */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 22px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--navy-800); color: #fff;
  padding: 10px 16px; z-index: 1000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.muted { color: var(--ink); }
.eyebrow {
  display: inline-block; font-family: var(--font-sans); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; font-size: .76rem;
  color: var(--teal-600); margin-bottom: .9rem;
}

/* ---------------------------------------------------------------- Buttons */
/* Site-wide button style: sharp 1px-bordered rectangles, theme colours */
.btn {
  --btn-bg: var(--teal-600); --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 500; font-size: .9rem; padding: 9px 18px;
  border-radius: 0; border: 1px solid var(--btn-bg); cursor: pointer;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  box-shadow: none;
}
.btn:hover { transform: translateY(-2px); color: #fff; background: var(--teal-500); border-color: var(--teal-500); }
.btn--primary { background: var(--teal-600); border-color: var(--teal-600); }
.btn--light { background: #fff; color: var(--teal-600); border-color: #fff; box-shadow: var(--shadow); }
.btn--light:hover { color: var(--teal-600); background: #fff; border-color: var(--teal-600); }
.btn--ghost { background: transparent; color: var(--teal-600); border-color: var(--teal-600); box-shadow: none; }
.btn--ghost:hover { background: var(--teal-600); color: #fff; border-color: var(--teal-600); }
/* Outlined button for dark/hero backgrounds (theme-coloured) */
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); box-shadow: none; }
.btn--outline-light:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; box-shadow: none; transform: translateY(-2px); }
.btn--lg { padding: 11px 24px; font-size: .95rem; }

/* ---------------------------------------------------------------- Header */
.site-header { position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: 0 2px 14px rgba(12,38,22,.07); }

/* Top utility bar */
.topbar { background: linear-gradient(90deg, var(--navy-800), var(--navy-700)); color: #dbe7d4; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; }
.topbar__contacts { display: flex; align-items: center; gap: 1.9rem; }
.topbar__item { display: inline-flex; align-items: center; gap: .6rem; color: #dbe7d4; }
.topbar__item:hover { color: #fff; }
.topbar__ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--teal-400); flex: none; }
.topbar__ic svg { width: 16px; height: 16px; }
.topbar__txt { display: flex; flex-direction: column; line-height: 1.18; }
.topbar__txt small { font-size: .67rem; color: #9bb091; text-transform: uppercase; letter-spacing: .05em; }
.topbar__txt b { font-size: .88rem; font-weight: 600; color: #fff; }
.topbar__social { display: inline-flex; align-items: center; gap: .5rem; }
.topbar__social a { display: inline-grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; transition: background .2s ease; }
.topbar__social a:hover { background: var(--teal-600); }
.topbar__social svg { width: 16px; height: 16px; }

/* Main bar (frosted) */
.mainbar { position: relative; background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(8px); }
.mainbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; min-height: 84px; }
.brand { display: inline-flex; align-items: center; }
.brand__logo { height: 46px; width: auto; display: block; }
.brand__name { font-family: var(--font-display); font-size: 1.2rem; }

/* Pill navigation */
.navpill {
  position: relative; display: inline-flex; align-items: center; gap: .15rem;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: .3rem .45rem;
}
/* Single pill that physically slides between links (positioned by JS). */
.navpill__slider {
  position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 0;
  background: var(--teal-600); border-radius: 999px; opacity: 0; pointer-events: none;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1),
              width .4s cubic-bezier(.22, .61, .36, 1), height .4s ease, opacity .2s ease;
}
.navpill.is-ready .navpill__slider { opacity: 1; }
.navpill a {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; padding: .5rem .95rem; border-radius: 999px;
  color: var(--navy-800); font-weight: 500; font-size: .93rem; transition: color .3s ease;
}
/* No-JS fallback: the active link keeps its own highlight. */
.navpill a.is-active { background: var(--teal-600); color: var(--white); }
/* JS mode: the sliding pill provides the highlight; text follows it. */
.navpill.is-ready a.is-active { background: transparent; color: var(--navy-800); }
.navpill.is-ready a.is-current { color: var(--white); }

/* Search box */
.mainbar__right { display: inline-flex; align-items: center; gap: .6rem; }
.search { position: relative; display: inline-flex; align-items: center; }
.search__ico { position: absolute; left: 13px; display: grid; place-items: center; color: var(--slate-400); pointer-events: none; }
.search__ico svg { width: 17px; height: 17px; }
.search input {
  width: 195px; padding: .6rem 1rem .6rem 2.4rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, width .2s ease;
}
.search input:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 4px rgba(63,154,89,.14); width: 225px; }

.icon-btn { display: none; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; width: 44px; height: 44px; place-items: center; cursor: pointer; color: var(--navy-800); }
.icon-btn svg { width: 20px; height: 20px; }

.m-cats { display: none; }
.mobile-menu { display: none; }

/* Category bar */
.catbar { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.catbar__inner {
  max-width: 1400px; margin-inline: auto; padding-inline: 26px;
  display: flex; align-items: stretch; justify-content: center;
  flex-wrap: wrap;   /* items size to content and wrap to a new row instead of
                        squeezing/overlapping; overflow stays visible for dropdowns */
}
/* Natural width per item — labels stay on one line and never overlap the next.
   On narrow screens the row simply wraps. */
.catbar__item { position: relative; flex: 0 0 auto; display: flex; }
.catbar__item + .catbar__item { border-left: 1px solid var(--line); }
.catbar__link { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: .35rem; padding: .85rem 1.15rem; color: var(--navy-800); font-weight: 500; font-size: .86rem; line-height: 1.2; white-space: nowrap; transition: color .2s ease; }
/* keep edge dropdowns inside the viewport */
.catbar__item:first-child .dd { left: 0; transform: translateX(0) translateY(10px); }
.catbar__item:first-child.has-dd:hover .dd { transform: translateX(0) translateY(0); }
.catbar__item:last-child .dd { left: auto; right: 0; transform: translateX(0) translateY(10px); }
.catbar__item:last-child.has-dd:hover .dd { transform: translateX(0) translateY(0); }
.catbar__link:hover { color: var(--teal-600); }
.catbar__item .caret { transition: transform .2s ease; }
.catbar__item.has-dd:hover .caret { transform: rotate(180deg); }
.catbar__item .caret { font-size: .62rem; }
.caret { display: inline-flex; align-items: center; }
.caret svg { width: 13px; height: 13px; display: block; }
.catbar__item.has-dd::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.dd {
  position: absolute; top: 100%; left: 50%;
  min-width: 252px; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); padding: .7rem; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  /* Long service lists must never spill below the fold: cap to the space left
     under the sticky header and scroll INSIDE the dropdown instead. */
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overscroll-behavior: contain;   /* don't scroll the page behind the dropdown */
}
/* Categories that contain a third-level flyout keep overflow visible so the
   flyout can escape the panel. These lists are short, so no scroll is needed. */
.catbar__item--has-sub .dd { overflow: visible; max-height: none; }
.catbar__item.has-dd:hover .dd, .catbar__item.has-dd:focus-within .dd {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.dd__head { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; color: var(--navy-800); font-size: .9rem; padding: .3rem .5rem .6rem; border-bottom: 1px solid var(--line); margin-bottom: .4rem; }
.dd__link { display: flex; align-items: center; gap: .45rem; padding: .45rem .55rem; border-radius: 7px; color: var(--ink); font-size: .9rem; transition: background .15s, color .15s; }
.dd__link:hover { background: var(--mint-50); color: var(--teal-600); }

/* Third level — a service that has sub-pages. Hovering the parent row opens a
   flyout panel to the side (same behaviour as a category dropdown). */
.dd__item { position: relative; }
.dd__link--parent .dd__caret { margin-left: auto; font-size: .8rem; opacity: .55; transition: transform .2s ease, opacity .2s ease; }
.dd__item.has-sub:hover > .dd__link--parent .dd__caret,
.dd__item.has-sub:focus-within > .dd__link--parent .dd__caret { transform: translateX(2px); opacity: 1; }
/* Flyout panel — identical styling to the level-2 category dropdown (.dd). */
.dd__sub {
  position: absolute; top: -.7rem; left: 100%; margin-left: 1rem;
  min-width: 252px; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); padding: .7rem; z-index: 70;
  opacity: 0; visibility: hidden; transform: translateX(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
/* Invisible bridge so the pointer can cross the gap without closing the flyout. */
.dd__sub::before { content: ""; position: absolute; top: 0; left: -1rem; width: 1rem; height: 100%; }
.dd__item.has-sub:hover > .dd__sub,
.dd__item.has-sub:focus-within > .dd__sub { opacity: 1; visibility: visible; transform: none; }
/* Sub-page rows inherit the level-2 .dd__link look (font, mint hover pill). */
/* Near the right edge, open the flyout to the left instead of overflowing. */
.catbar__item:nth-last-child(-n+2) .dd__sub { left: auto; right: 100%; margin-left: 0; margin-right: 1rem; }
.catbar__item:nth-last-child(-n+2) .dd__sub::before { left: auto; right: -1rem; }

.nav-toggle { display: none; }

/* ---------------------------------------------------------------- Flash */
.flash-wrap { position: fixed; bottom: 22px; right: 22px; z-index: 1200; display: grid; gap: .6rem; max-width: 360px; }
@media (max-width: 560px) { .flash-wrap { left: 16px; right: 16px; max-width: none; } }
.flash { display: flex; align-items: flex-start; gap: .7rem; padding: .9rem 1.1rem; border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow-lg); border-left: 4px solid var(--teal-500); font-size: .95rem; }
.flash__close { margin-left: auto; flex: none; background: none; border: 0; padding: 0 2px; cursor: pointer; color: var(--slate-400); font-size: 1.25rem; line-height: 1; }
.flash__close:hover { color: var(--ink); }
.flash--error { border-left-color: #ef4444; }
.flash--success { border-left-color: var(--teal-500); }

/* ---------------------------------------------------------------- Hero */
.hero {
  position: relative; overflow: hidden; color: #eaf3e6;
  isolation: isolate;   /* keep hero's own z-index contained, below the header */
  background-color: #0c2616;
  background-size: cover; background-position: center right; background-repeat: no-repeat;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(112deg,
    rgba(9,30,18,.96) 0%, rgba(18,53,31,.90) 38%,
    rgba(18,53,31,.60) 72%, rgba(120,160,90,.22) 100%);
}
.hero__inner { position: relative; z-index: 1; display: flex; align-items: center; min-height: 580px; padding-block: 5rem; }
.hero__content { max-width: 650px; }
.hero h1 { color: #fff; }
.hero p.lead { font-size: 1.22rem; font-weight: 300; color: #cfe0c3; max-width: 40ch; line-height: 1.6; }
.hero .eyebrow { color: var(--teal-400); }
.hero__cta { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.8rem; }
/* Hero buttons — sharp 1px-bordered rectangles, Poppins 18/400 (theme colours) */
/* Hero buttons use the standard button size; only the weight is lighter. */
.hero__cta .btn { font-weight: 400; }
.hero__cta .btn .ico { width: 1em; height: 1em; margin-left: .2rem; }
/* Primary — filled theme green */
.hero__cta .btn--light { background: var(--teal-600); color: #fff; border-color: var(--teal-600); }
.hero__cta .btn--light:hover { background: var(--teal-500); border-color: var(--teal-500); color: #fff; }
/* Secondary — outlined */
.hero__cta .btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.hero__cta .btn--outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.hero__stats .num { font-family: var(--font-display); font-size: 1.9rem; color: #fff; display: block; }
.hero__stats .lbl { font-size: .82rem; color: #a9bfa0; letter-spacing: .03em; }

/* ---------------------------------------------------------------- Sections */
.section { padding: 5rem 0; }
.section--soft { background: var(--bg-soft); }        /* pale sage band (brand) */
.section__head { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.section__head p { color: var(--ink); font-size: 1rem; }

/* ---------------------------------------------------------------- Cards / grid */
.grid { display: grid; gap: 1.5rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 7px;
  padding: 1.8rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height: 100%; display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card__icon {
  width: 52px; height: 52px; border-radius: 7px; display: grid; place-items: center;
  background: var(--mint-50); font-size: 1.5rem; margin-bottom: .8rem;
}
.card__media {
  position: relative; margin: -1.8rem -1.8rem 1.2rem; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 7px 7px 0 0; background: var(--mint-50);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.card:hover .card__media img { transform: scale(1.06); }
/* Date badge overlaid on an event image. */
.tag--onmedia { position: absolute; top: 12px; left: 12px; z-index: 2; box-shadow: var(--shadow); }
/* Card titles keep the same compact look whether they are h2 (list pages,
   where the card title is the next level under the page h1) or h3. */
.card h3, .card h2 { font-size: 1.25rem; letter-spacing: normal; margin: 0 0 .4rem; }
.card p { color: var(--ink); font-size: 1rem; }
/* Standard grid-card CTA link — used site-wide (no background). */
/* CTA in card grids: a small filled button matching the primary "Book a Consultation"
   button (teal, square, arrow), sized down for cards. */
.card__link {
  margin-top: 10px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 500; font-size: .82rem; line-height: 1;
  color: #fff; background: var(--teal-600);
  border: 1px solid var(--teal-600); border-radius: 0;
  padding: 8px 15px; text-decoration: none;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, gap .15s ease;
}
.card__link svg { width: 14px; height: 14px; }
.card__link:hover { gap: .65rem; color: #fff; background: var(--teal-500); border-color: var(--teal-500); transform: translateY(-2px); }
.card__price { font-weight: 600; color: var(--navy-800); font-family: var(--font-display); }

/* ---------------------------------------------------------------- Feature list */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; }
.checklist li::before {
  content: "✓"; color: var(--teal-600); font-weight: 800; margin-top: .1rem;
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }

/* ---------------------------------------------------------------- Steps */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.step { position: relative; padding-top: .5rem; }
.step::before {
  counter-increment: step; content: counter(step);
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy-800); color: #fff; margin-bottom: 1rem;
}
.step h3 { font-size: 1.1rem; }
.step p { color: var(--ink); font-size: 1rem; }

/* ---------------------------------------------------------------- FAQ */
.faq-block { max-width: 820px; margin: 2.6rem auto 0; }
.faq-block__title { margin-bottom: 1.1rem; }
.faq-block .faq { max-width: none; margin-inline: 0; }

/* ------------------------------------------- Page-builder sections (services) */
.section--dark { background: linear-gradient(135deg, #0b2415 0%, #17492b 100%); color: #d7e8d3; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .eyebrow { color: #bfe3c4; }
.section--dark .prose p, .section--dark .why-card p, .section--dark .card p { color: #cfe3cd; }
.section--dark .card, .section--dark .why-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.section--dark .why-card__ico { background: rgba(255,255,255,.12); color: #bfe3c4; }
.section--dark .impact-stat__num, .section--dark .impact-stat__label { color: #fff; }
.psec__narrow { max-width: 760px; margin-inline: auto; }
.psec__title { margin: 0 0 1rem; }
.psec__narrow .eyebrow { display: block; margin-bottom: .5rem; }
.psec__lead { margin-bottom: 2rem; text-align: center; }
.psec__img { display: block; width: 100%; max-width: 900px; border-radius: var(--radius); margin: 1.4rem auto 0; }
.cta-band__body { color: #fff; }
.cta-band__body p { color: rgba(255,255,255,.92); margin: 0; }
/* Booking block (page-builder) — centred card. */
.psec-booking { max-width: 620px; margin-inline: auto; }

.why-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem; }
.why-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 7px;
  padding: 1.6rem; box-shadow: var(--shadow); transition: box-shadow .2s ease, transform .2s ease;
}
.why-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.why-card__ico {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 7px;
  background: var(--mint-50); color: var(--teal-600); margin-bottom: .9rem;
}
.why-card__ico svg { width: 23px; height: 23px; }
.why-card h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.why-card p { margin: 0; color: var(--slate-600); font-size: .93rem; line-height: 1.6; }

.brand-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem 3rem;
  background: linear-gradient(135deg, #0b2415 0%, #17492b 100%);
  border-radius: var(--radius); padding: 2.4rem 2rem;
}
.brand-strip__logo { height: 52px; width: auto; opacity: .85; transition: opacity .2s ease; }
.brand-strip__logo:hover { opacity: 1; }
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: .55rem; }
.faq details {
  border: 1px solid var(--line); border-radius: 0;   /* sharp, professional corners */
  background: #fff; padding: 0 1.1rem; transition: box-shadow .2s ease, border-color .2s ease;
}
.faq details[open] { box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; list-style: none; padding: .85rem 0; font-weight: 600; font-size: 1rem;
  color: var(--navy-800); display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
/* Divider under the title once the item is open (as in the reference). */
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq summary::-webkit-details-marker { display: none; }
/* Chevron marker (down when closed, up when open). */
.faq summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 3px;
  border-right: 2px solid var(--navy-800); border-bottom: 2px solid var(--navy-800);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > p { padding: .85rem 0 .95rem; margin: 0; color: var(--ink); }
/* Smooth reveal of the answer when opened. */
.faq details[open] > p { animation: revealDown .3s ease both; }
@keyframes revealDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- CTA band */
.cta-band {
  background: linear-gradient(160deg, var(--teal-600), var(--navy-700));
  color: #fff; border-radius: calc(var(--radius) * 1.4); padding: 3.2rem;
  text-align: center; box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #dcecd3; max-width: 54ch; margin-inline: auto; }
.cta-band .eyebrow { color: #bfe3c4; }

/* Hero sub-line ("Feel better, move better, live better."). */
.hero__sub {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: #eaf3ea;
  margin: -.15rem 0 .9rem;
}

/* ---------------------------------------------------------------- Forms */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: .92rem; color: var(--navy-800); }
.field input, .field textarea {
  width: 100%; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; color: var(--ink); background: #fff; transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 4px rgba(63,154,89,.16);
}
.field .errorlist { color: #dc2626; font-size: .85rem; margin: 0; padding-left: 1rem; }

/* ---------------------------------------------------------------- Page header */
.page-head { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 3.4rem 0; }
.breadcrumbs { font-size: .85rem; color: var(--slate-600); margin-bottom: .7rem; }
.breadcrumbs a { color: var(--slate-600); }
.breadcrumbs a:hover { color: var(--teal-600); }

/* -------------------------------------------------- Interior page hero (image) */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  color: #eaf3e6;
  background-color: #0c2616;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(112deg,
    rgba(9,30,18,.95) 0%, rgba(18,53,31,.90) 40%,
    rgba(18,53,31,.66) 74%, rgba(120,160,90,.26) 100%);
}
.page-hero__inner {
  position: relative; z-index: 1;
  padding-block: 4.5rem 3.25rem;
}
.page-hero__eyebrow {
  display: inline-block; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; color: #bfe3c4; margin-bottom: .75rem;
}
.page-hero__title {
  font-family: var(--font-display); color: #fff; margin: 0;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 1.1;
}
.page-hero__lead {
  margin: .95rem 0 0; max-width: 62ch; color: #d7e8d3;
  font-size: 1rem; line-height: 1.6;
}
.page-hero__crumbs {
  margin-top: 1.6rem; font-size: .82rem; color: #cfe3cd;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.page-hero__crumbs a { color: #eaf3e6; text-decoration: none; opacity: .92; }
.page-hero__crumbs a:hover { color: #fff; text-decoration: underline; }
.page-hero__crumbs [aria-current="page"] { color: #fff; font-weight: 600; }
.page-hero__sep { opacity: .5; }

/* ------------------------------------------------ Services overview tabs */
.svc-tabs__nav {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-bottom: 1.5rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.svc-tab {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.15rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white);
  color: var(--slate-600); font-family: inherit; font-size: .92rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.svc-tab:hover { color: var(--teal-600); border-color: var(--teal-400); }
.svc-tab.is-active {
  color: #fff; background: var(--teal-600); border-color: var(--teal-600);
  box-shadow: 0 6px 16px rgba(63,154,89,.28);
}
.svc-tab__ico { display: inline-grid; place-items: center; }
.svc-tab__ico svg { width: 18px; height: 18px; }

.svc-panel { animation: svcFade .25s ease; }
.svc-panel[hidden] { display: none; }
@keyframes svcFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.svc-panel__head {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;
  justify-content: space-between; margin-bottom: 1.6rem;
}
.svc-panel__title { margin: 0; font-size: 1.55rem; }
.svc-panel__summary { margin: .4rem 0 0; color: var(--slate-600); max-width: 60ch; }

.svc-sub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem;
}
.svc-sub {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: 7px;
  padding: 1.35rem 1.4rem; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.svc-sub:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--teal-400); }
.svc-sub__ico {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 7px;
  background: var(--mint-50); color: var(--teal-600); margin-bottom: .95rem;
  transition: background .2s ease, color .2s ease;
}
.svc-sub__ico svg { width: 23px; height: 23px; }
.svc-sub:hover .svc-sub__ico { background: var(--teal-600); color: #fff; }
.svc-sub__name { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.svc-sub__desc { margin-top: .5rem; color: var(--slate-600); font-size: .88rem; line-height: 1.55; }
/* CTA styled as a small filled button, matching the card-grid buttons. */
.svc-sub__more {
  margin-top: 10px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: 8px 15px;
  color: #fff; background: var(--teal-600); border: 1px solid var(--teal-600); border-radius: 0;
  font-weight: 500; font-size: .82rem; line-height: 1;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, gap .15s ease;
}
.svc-sub__more svg { width: 14px; height: 14px; }
.svc-sub:hover .svc-sub__more { gap: .65rem; background: var(--teal-500); border-color: var(--teal-500); transform: translateY(-2px); }

.svc-tabs__rail { display: none; }
@media (max-width: 640px) {
  .svc-tabs__nav {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-inline: -22px; padding: 0 22px .85rem;
    border-bottom: 0; scrollbar-width: none;
  }
  .svc-tabs__nav::-webkit-scrollbar { display: none; }
  #svc-tabs.has-scroll .svc-tabs__rail {
    display: block; position: relative; height: 4px; border-radius: 999px;
    background: var(--line); overflow: hidden; margin: 0 0 1.9rem;
  }
  #svc-tabs.has-scroll .svc-tabs__thumb {
    position: absolute; top: 0; left: 0; height: 100%; width: 30%; min-width: 32px;
    border-radius: 999px; background: var(--teal-500);
  }
}
@media (max-width: 520px) {
  .page-hero__inner { padding-block: 3.25rem 2.5rem; }
  .svc-sub-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Article */
.prose { max-width: 760px; }
/* Full-width prose (category / landing pages with no sidebar) — a touch wider
   so the enhanced card grids and process timeline have room to breathe, while
   paragraphs stay comfortably readable. */
.prose--wide { max-width: 940px; margin-inline: auto; }
.prose p { color: #1f2b3d; margin: 0 0 1.1rem; }
.prose h2 { margin-top: 2rem; }
/* Rich-text (WYSIWYG) content — shared by .prose and the blog article body. */
.prose h3, .blog-article__body h3 { font-size: 1.2rem; margin: 1.6rem 0 .7rem; }
.prose h4, .blog-article__body h4 { font-size: 1.05rem; margin: 1.4rem 0 .6rem; }
.prose ol,
.blog-article__body ul, .blog-article__body ol {
  margin: 0 0 1.2rem; padding-left: 1.4rem; display: grid; gap: .5rem;
}
.blog-article__body ul { list-style: disc; }
.prose ol, .blog-article__body ol { list-style: decimal; }
.prose li, .blog-article__body li { line-height: 1.7; color: #1f2b3d; }

/* Bullet lists inside service/article content render as professional icon
   lists — teal check-circle markers, no markup change needed from the editor.
   (`.checklist` keeps its own dedicated style; `.proc-steps` is styled below.) */
.prose ul:not(.checklist) {
  list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .75rem;
}
.prose ul:not(.checklist) > li {
  position: relative; padding-left: 2.15rem; line-height: 1.7; color: #1f2b3d;
}
.prose ul:not(.checklist) > li::before {
  content: "✓"; position: absolute; left: 0; top: .12em;
  width: 1.4rem; height: 1.4rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--mint-50); color: var(--teal-600);
  font-size: .78rem; font-weight: 800; line-height: 1;
}
.prose a, .blog-article__body a { color: var(--teal-600); text-decoration: underline; font-weight: 500; }
.prose a:hover, .blog-article__body a:hover { color: var(--teal-500); }
.prose strong, .blog-article__body strong { color: var(--navy-800); }
.prose blockquote, .blog-article__body blockquote {
  margin: 1.4rem 0; padding: .3rem 0 .3rem 1.2rem;
  border-left: 3px solid var(--teal-500); color: var(--slate-600); font-style: italic;
}
.prose img, .blog-article__body img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1rem 0; }

/* Treatment-process timeline — the `|enhance` filter turns consecutive
   "Step N: Title" blocks into this numbered vertical timeline. */
.proc-steps { list-style: none; margin: 1.8rem 0 2rem; padding: 0; display: grid; gap: 0; }
.proc-step {
  position: relative; display: grid; grid-template-columns: 3rem 1fr;
  column-gap: 1.15rem; padding-bottom: 1.7rem;
}
.proc-step:last-child { padding-bottom: 0; }
.proc-step:not(:last-child)::before {
  content: ""; position: absolute; left: 1.5rem; top: 3rem; bottom: 0;
  width: 2px; background: var(--line); transform: translateX(-1px);
}
.proc-step__num {
  position: relative; z-index: 1; width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--teal-600); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  box-shadow: 0 6px 16px rgba(46, 125, 70, .28);
}
.proc-step__body { padding-top: .35rem; min-width: 0; }
.proc-step__body h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.proc-step__body p { margin: 0; color: var(--slate-600); }

/* Content card grid — the `|enhance` filter turns a run of 3+ plain
   "Title + paragraph" blocks (e.g. "Types of …") into these cards.
   Matches the site's service grid (icon box + hover), just with icons. */
.info-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.1rem; margin: 1.6rem 0 2rem;
}
.info-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: 7px;
  padding: 1.5rem 1.5rem; box-shadow: var(--shadow);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.info-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--teal-400); }
.info-card__ico {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 7px;
  background: var(--mint-50); color: var(--teal-600); margin-bottom: .7rem;
  transition: background .2s ease, color .2s ease;
}
.info-card__ico svg { width: 23px; height: 23px; }
.info-card:hover .info-card__ico { background: var(--teal-600); color: #fff; }
/* Reset the inherited .prose h3/p margins so the icon-to-heading gap stays tight and equal. */
.info-card .info-card__title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.info-card .info-card__body { margin: .5rem 0 0; color: var(--slate-600); font-size: .9rem; line-height: 1.6; }
.prose table, .blog-article__body table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; }
.prose th, .prose td, .blog-article__body th, .blog-article__body td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; }
.tag { display: inline-block; background: var(--mint-50); color: var(--teal-600); font-weight: 600; font-size: .8rem; padding: .25rem .7rem; border-radius: 999px; }

/* ---------------------------------------------------------------- Footer */
.site-footer {
  /* Charcoal footer palette (scoped overrides — recolours every footer
     element that uses these tokens; teal accents & white headings stay). */
  --navy-900: #23272b;   /* charcoal background */
  --navy-800: #2b3035;   /* charcoal cards / surfaces */
  --navy-700: #3b424a;   /* charcoal borders / dividers */
  --mint-50:  #c9ced5;   /* neutral light-grey footer text */
  background: var(--navy-900); color: var(--mint-50); margin-top: 4rem;
}

/* Newsletter strip */
.newsletter { padding: 3rem 0 1.4rem; }
.newsletter__inner {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr minmax(300px, 420px); align-items: center; gap: 2rem;
  background: linear-gradient(120deg, var(--teal-600), var(--teal-500));
  border-radius: var(--radius); padding: 2.4rem 2.6rem; box-shadow: var(--shadow-lg);
}
.newsletter__label { display: inline-block; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; color: var(--white); opacity: .85; margin-bottom: .5rem; }
.newsletter__title { color: var(--white); font-size: clamp(1.3rem, 2.4vw, 1.85rem); max-width: 22ch; margin: 0; }
.newsletter__form { justify-self: end; width: 100%; }
.newsletter__field { display: flex; background: var(--white); border-radius: 999px; padding: .35rem; box-shadow: var(--shadow); }
.newsletter__field input { flex: 1; min-width: 0; border: none; background: transparent; padding: .6rem 1rem; color: var(--ink); font-family: var(--font-sans); font-size: .95rem; }
.newsletter__field input:focus { outline: none; }
.newsletter__btn { flex: none; width: 46px; height: 46px; border: none; border-radius: 50%; cursor: pointer; background: var(--navy-800); color: var(--white); display: grid; place-items: center; transition: background .2s ease, transform .2s ease; }
.newsletter__btn:hover { background: var(--navy-900); transform: translateX(2px); }
.newsletter__btn svg { width: 20px; height: 20px; }
.newsletter__note { margin: .7rem .4rem 0; font-size: .82rem; color: var(--white); opacity: .92; }
.newsletter__note a { color: var(--white); text-decoration: underline; font-weight: 600; }

/* Main columns */
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.8fr; gap: 2.5rem; padding-block: 3rem 2.5rem; }
/* Footer column headings are <h2> (they sit below the page h1, so h4 would
   skip a level); this keeps their original compact look. */
.site-footer__col h2, .site-footer .footwide__h2, .site-footer h4 { color: var(--white); font-family: var(--font-sans); font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1.1rem; }
.site-footer__col { display: grid; gap: .6rem; align-content: start; }
.site-footer__col a { color: var(--mint-50); transition: color .2s ease, padding-left .2s ease; }
.site-footer__col a:hover { color: var(--teal-400); padding-left: .25rem; }

/* Brand card */
.footcard { background: var(--navy-800); border: 1px solid var(--navy-700); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-lg); }
.footcard .brand__name { color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; }
.footcard__desc { color: var(--mint-50); opacity: .82; margin: .7rem 0 1.2rem; font-size: .92rem; }
.foothours { list-style: none; margin: 0 0 1.2rem; padding: 1rem 0 0; display: grid; gap: .5rem; border-top: 1px solid var(--navy-700); }
.foothours li { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; }
.foothours li span:first-child { color: var(--mint-50); opacity: .8; }
.foothours li span:last-child { color: var(--white); font-weight: 600; }
.footcard__phone { display: flex; align-items: center; gap: .8rem; }
.footcard__phone-ic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-600); color: var(--white); }
.footcard__phone-ic svg { width: 20px; height: 20px; }
.footcard__phone-txt { display: flex; flex-direction: column; }
.footcard__phone-txt small { color: var(--mint-50); opacity: .75; font-size: .75rem; }
.footcard__phone-txt strong { color: var(--white); font-family: var(--font-display); }

/* Recent posts + contact */
.footposts { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 1rem; }
.footpost { display: flex; gap: .8rem; align-items: center; }
.footpost__thumb { flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--navy-800); border: 1px solid var(--navy-700); color: var(--teal-400); }
.footpost__thumb svg { width: 24px; height: 24px; }
.footpost__thumb img { width: 100%; height: 100%; object-fit: cover; }
.footpost__meta { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.footpost__date { display: inline-flex; align-items: center; gap: .3rem; color: var(--teal-400); font-size: .76rem; }
.footpost__date svg { width: 13px; height: 13px; }
.footpost__title { color: var(--mint-50); font-size: .9rem; line-height: 1.4; }
.footpost__title:hover { color: var(--teal-400); }
.footwide__h2 { margin-top: .4rem; }
.footcontact__desc { color: var(--mint-50); opacity: .82; font-size: .9rem; margin: 0 0 1rem; }
.footcontact__row { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; margin: 0 0 .6rem; color: var(--mint-50); }
.footcontact__row a { color: var(--mint-50); }
.footcontact__row a:hover { color: var(--teal-400); }
.footcontact__ic { flex: none; color: var(--teal-400); display: grid; place-items: center; margin-top: .1rem; }
.footcontact__ic svg { width: 18px; height: 18px; }

/* Bottom bar */
.site-footer__bottom-wrap { border-top: 1px solid var(--navy-700); }
.site-footer__bottom { padding-block: 1.4rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }
.site-footer__bottom p { margin: 0; color: var(--mint-50); opacity: .8; }
/* Legal links in the bottom bar (right of the copyright). */
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; }
.site-footer__legal a { color: var(--mint-50); opacity: .85; font-size: .85rem; transition: color .2s ease, opacity .2s ease; }
.site-footer__legal a:hover { color: var(--teal-400); opacity: 1; }

/* Region switcher (UAE / USA) */
.site-footer__regions { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; }
.site-footer__regions-label { display: inline-flex; align-items: center; gap: .35rem; color: var(--mint-50); opacity: .7; }
.site-footer__regions-label .ico { width: 15px; height: 15px; }
.site-footer__region { display: inline-flex; align-items: center; padding: .2rem .6rem; border: 1px solid var(--navy-700); border-radius: 7px; color: var(--mint-50); opacity: .85; transition: color .2s ease, border-color .2s ease, background .2s ease, opacity .2s ease; }
.site-footer__region:hover { color: var(--teal-400); border-color: var(--teal-500); opacity: 1; }
.site-footer__region.is-active { background: var(--teal-600); border-color: var(--teal-600); color: #fff; opacity: 1; }

/* Footer responsive */
@media (max-width: 900px) {
  .newsletter { padding-inline: 16px; }   /* keep the teal card off the screen edges */
  .newsletter__inner { grid-template-columns: 1fr; gap: 1.4rem; }
  .newsletter__form { justify-self: stretch; }
}
@media (max-width: 640px) {
  .newsletter__inner { text-align: center; padding: 2rem 1.4rem; }
  .newsletter__title { max-width: none; }
  .newsletter__note { text-align: center; }
  .site-footer__bottom { justify-content: center; text-align: center; }
}

/* ---------------------------------------------------------------- Utilities */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; } .mt-1 { margin-top: 1rem; }
.stack > * + * { margin-top: 1rem; }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1040px) {
  .topbar__item--addr { display: none; }   /* free up the top bar on tablets */
}
@media (max-width: 920px) {
  .hero__inner { min-height: 460px; padding-block: 3.5rem; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2,1fr); }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .catbar__link { padding: .7rem .85rem; font-size: .82rem; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav-toggle {
    display: inline-grid; place-items: center; width: 44px; height: 44px;
    background: transparent; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  }
  .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
    content: ""; display: block; width: 20px; height: 2px; background: var(--navy-800); position: relative;
  }
  .nav-toggle__bar::before { position: absolute; top: -6px; }
  .nav-toggle__bar::after { position: absolute; top: 6px; }
  /* Header: condense top bar, hide category bar, menu drops under main bar */
  .topbar__inner { min-height: 42px; }
  .topbar__contacts { gap: 1rem; }
  .topbar__item--addr, .topbar__txt small { display: none; }
  .topbar__txt b { font-size: .8rem; }
  .topbar__social { display: none; }
  .mainbar__inner { min-height: 64px; }
  .brand__logo { height: 38px; }
  .navpill { display: none; }
  .mainbar__right .search { display: none; }
  .icon-btn { display: inline-grid; }
  .catbar { display: none; }
  /* Mobile slide-down menu */
  .mobile-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    padding: 1rem 22px 1.3rem; max-height: 78vh; overflow-y: auto;
  }
  .mobile-menu.is-open { display: block; animation: slideDown .25s ease; }
  .search--mobile { display: flex; margin-bottom: .9rem; }
  .search--mobile input { width: 100%; }
  .mobile-menu__nav { display: grid; }
  .mobile-menu__nav a { padding: .8rem 0; border-bottom: 1px solid var(--line); color: var(--navy-800); font-weight: 500; }
  .mobile-menu__nav a:hover { color: var(--teal-600); }
  .m-cats { display: grid; gap: .1rem; padding: .4rem 0 .5rem; border-bottom: 1px solid var(--line); }
  .m-cats__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--slate-400); padding: .6rem 0 .3rem; }
  .m-cats a { display: flex; align-items: center; gap: .55rem; padding: .55rem 0; color: var(--navy-800); }
  .m-cats a .mega-sub-ico { width: 16px; height: 16px; color: var(--teal-600); }
  .mobile-menu__contact { display: grid; gap: .6rem; padding-top: .9rem; }
  .mobile-menu__contact a, .mobile-menu__contact span { display: flex; align-items: center; gap: .5rem; color: var(--slate-600); font-size: .92rem; }
  .mobile-menu__contact svg { width: 17px; height: 17px; color: var(--teal-600); }
  .mobile-menu__social { display: flex; flex-wrap: wrap; gap: .6rem; padding-top: 1rem; }
  .mobile-menu__social a { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--mint-50); color: var(--teal-600); transition: background .2s ease, color .2s ease; }
  .mobile-menu__social a:hover { background: var(--teal-600); color: #fff; }
  .mobile-menu__social svg { width: 18px; height: 18px; }
  .grid--3, .grid--2, .steps, .site-footer__grid { grid-template-columns: 1fr; }
  .cta-band { padding: 2.2rem 1.4rem; }
}

/* =========================================================================
   Doctor Spotlight section
   ========================================================================= */
.spotlight { position: relative; overflow: hidden; background: var(--bg); }
.spotlight .container { position: relative; z-index: 1; }
/* Prominent brand accent bar under the Team heading. */
.spotlight .section__head h2::after {
  content: ""; display: block; width: 66px; height: 4px; margin: 1rem auto 0;
  background: var(--teal-500); border-radius: 999px;
}

.spotlight__grid { display: grid; grid-template-columns: 290px 1fr; gap: 2.5rem; align-items: start; }

/* Selector — name-only chips, FIXED height, vertical scroll */
.spotlight__selector { display: flex; flex-direction: column; gap: .6rem; height: 520px; overflow-y: auto; padding-right: .4rem; }
.docchip {
  display: flex; align-items: center; width: 100%; text-align: left; cursor: pointer; position: relative;
  flex: 0 0 auto; min-height: 56px;
  padding: .7rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.docchip:hover { border-color: var(--teal-400); box-shadow: var(--shadow); }
.docchip.is-active { border-color: var(--teal-600); background: var(--mint-50); }
.docchip::before {
  content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--teal-600);
  transform: scaleY(0); transform-origin: center; transition: transform .25s ease;
}
.docchip.is-active::before { transform: scaleY(1); }
.docchip:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }
.docchip__name { font-family: var(--font-display); font-weight: 600; color: var(--navy-800); font-size: .98rem; }
.docchip.is-active .docchip__name { color: var(--teal-600); }

/* Stage */
/* Prominent floating panel around the doctor content (right column). */
.spotlight__stage {
  position: relative; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.7rem; box-shadow: var(--shadow-lg);
}
.spotlight__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.spotlight__count { color: var(--slate-600); font-size: .9rem; display: inline-flex; align-items: baseline; gap: .4rem; }
.spotlight__count b { font-family: var(--font-display); font-size: 1.5rem; color: var(--teal-600); }
.spotlight__arrows { display: inline-flex; gap: .5rem; }
.spot-arrow {
  width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line);
  background: #fff; border-radius: 50%; cursor: pointer; color: var(--navy-800);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.spot-arrow:hover { background: var(--teal-600); color: #fff; border-color: var(--teal-600); }
.spot-arrow svg { width: 20px; height: 20px; }

/* Panels — FIXED height; long content scrolls inside the body */
.docpanel { display: none; grid-template-columns: 360px 1fr; gap: 2.2rem; align-items: stretch; height: 470px; }
.docpanel.is-active { display: grid; animation: docFade .45s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes docFade { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }
.docpanel__media {
  position: relative; min-height: 0; overflow: hidden;   /* clip tall photo to the panel height */
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.docpanel__media img { width: 100%; height: 100%; object-fit: cover; }
.docpanel__media .avatar--xl { width: 100%; height: 100%; }
.badge-avail {
  position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: .45rem;
  background: #fff; color: var(--teal-600); font-weight: 600; font-size: .8rem; padding: .4rem .8rem;
  border-radius: 999px; box-shadow: var(--shadow);
}
.badge-avail .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 3px rgba(63,154,89,.25); }

.docpanel__body { display: flex; flex-direction: column; overflow-y: auto; padding-right: .3rem; }
.docpanel__body h3 { font-size: 1.7rem; margin-bottom: .15rem; }
.docpanel__role { color: var(--teal-600); font-weight: 600; margin-bottom: 1rem; }
.docpanel__facts { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 1rem; color: var(--slate-600); font-size: .92rem; }
.docpanel__facts span { display: inline-flex; align-items: center; gap: .4rem; }
.docpanel__facts .ico { color: var(--teal-600); width: 1.05em; height: 1.05em; }
.docpanel__bio { color: var(--ink); }
.docpanel__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1.5rem; }
.pill-tag { background: var(--mint-50); color: var(--teal-600); font-size: .82rem; font-weight: 500; padding: .35rem .8rem; border-radius: 999px; }
.docpanel__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: auto; }

@media (max-width: 920px) {
  .spotlight__grid { grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
  /* vertical scrolling list (never horizontal) */
  .spotlight__selector { height: auto; max-height: 250px; overflow-y: auto; overflow-x: hidden; padding: 0 .2rem 0 0; }
  .docchip { flex: 0 0 auto; min-height: 50px; }
  .docpanel { grid-template-columns: 1fr; gap: 1.4rem; height: auto; }
  .docpanel__body { overflow: visible; height: auto; padding-right: 0; }
  /* Single-column: give the photo a portrait box that scales with width and is
     width-capped so it never becomes a wide short strip that crops the face. */
  .docpanel__media { aspect-ratio: 4 / 5; width: 100%; max-width: 420px; margin-inline: auto; }
  .docpanel__media img, .docpanel__media .avatar--xl { height: 100%; object-position: top center; }
}

/* =========================================================================
   Our Services slider (4 per page, segmented pagination bars)
   ========================================================================= */
.svcgrid { background: var(--mint-50); }   /* pale sage band so the white cards pop */
.svcgrid__title { max-width: 900px; font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 1.6rem; }
.svcgrid__row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 2rem; flex-wrap: wrap; margin-bottom: 2.6rem;
}
.svcgrid__lead { display: flex; align-items: center; gap: 1.1rem; max-width: 660px; }
.svcgrid__rule { flex: none; width: 60px; height: 3px; background: var(--teal-400); border-radius: 999px; }
.svcgrid__lead p { margin: 0; color: var(--ink); }
.svcgrid__cta { flex: none; }

.svc-slider { position: relative; }
.svc-track {
  display: flex; gap: 1rem; list-style: none; margin: 0; padding: 20px 14px 40px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.svc-track::-webkit-scrollbar { display: none; }

/* 4 cards per page on desktop (3 gaps between them). */
.svc-card { flex: 0 0 calc((100% - 3 * 1rem) / 4); scroll-snap-align: start; }
.svc-card .card { height: 100%; }
/* Tighter, self-contained hover shadow so it fully fades inside the scroll
   container's padding (the big --shadow-lg would clip at the overflow edge). */
.svc-card .card:hover { box-shadow: 0 12px 24px -6px rgba(12, 38, 22, .18); }

/* Small, decent navigation arrows. */
.svc-arrow {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 5;
  width: 36px; height: 36px; display: grid; place-items: center; color: var(--navy-800);
  background: #fff; border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
  box-shadow: var(--shadow); transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.svc-arrow:hover { background: var(--teal-600); color: #fff; border-color: var(--teal-600); }
.svc-arrow:disabled { opacity: .35; cursor: default; }
.svc-arrow:disabled:hover { background: #fff; color: var(--navy-800); border-color: var(--line); }
.svc-arrow svg { width: 16px; height: 16px; }
.svc-arrow--prev { left: -10px; }
.svc-arrow--next { right: -10px; }

/* Segmented pagination — one bar per page; active bar widens. */
.svc-bars { display: flex; justify-content: center; gap: .6rem; margin-top: .5rem; }
.svc-bars:empty { display: none; }
.svc-bar {
  width: 46px; height: 5px; padding: 0; border: none; border-radius: 999px;
  background: var(--line); cursor: pointer; transition: background .25s ease, width .25s ease;
}
.svc-bar:hover { background: var(--teal-400); }
.svc-bar.is-active { background: var(--teal-600); width: 72px; }

@media (max-width: 1100px) { .svc-card { flex-basis: calc((100% - 1rem) / 2); } }
@media (max-width: 720px) {
  .svcgrid__row { flex-direction: column; align-items: flex-start; }
  .svcgrid__cta { width: 100%; text-align: center; justify-content: center; }
  .svc-card { flex-basis: 86%; }
  .svc-arrow { display: none; }
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   Phase 2 components: mega-menu, service chips, team cards, legal pages
   ========================================================================= */

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

/* ---- Mega menu (modern, professional) ---- */
.has-mega { position: static; }
.has-mega .caret { font-size: .7rem; transition: transform .2s ease; }
.mega {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: var(--shadow-lg); padding: 2.2rem 0 2.4rem; z-index: 90;
  /* Never grow past the viewport: if the menu is tall, scroll INSIDE it so
     every link stays reachable (instead of spilling below the fold). */
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  overscroll-behavior: contain;   /* don't scroll the page behind the menu */
}
.has-mega:hover .mega,
.has-mega:focus-within .mega,
.has-mega.is-open .mega { display: block; }
.has-mega:hover .caret,
.has-mega.is-open .caret { transform: rotate(180deg); }
.mega__col { align-content: start; }
.mega-sub-ico { width: 14px; height: 14px; color: var(--teal-400); flex: none; transition: color .15s ease, transform .15s ease; }
.mega__link:hover .mega-sub-ico { color: var(--teal-600); transform: translateX(2px); }

/* ---- Services overview ---- */
.stack-xl > * + * { margin-top: 2.8rem; }
.chip {
  display: inline-block; padding: .5rem 1rem; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--navy-700);
  font-size: .92rem; font-weight: 500; transition: all .18s ease;
}
.chip:hover { background: var(--mint-50); border-color: var(--teal-400); color: var(--teal-600); transform: translateY(-2px); }

/* ---------------------------------------------- Team grid (Our Team page) */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.75rem; }
.team-card {
  display: flex; flex-direction: column;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 7px;
  padding: 1.1rem 1.1rem 0;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.team-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--teal-400); }
.team-card__media {
  display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 7px; background: var(--mint-50);
}
/* Portrait headshots: fill the width and anchor to the top so the face stays
   fully visible (only a little of the lower body is trimmed, never the sides). */
.team-card__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform .5s ease;
}
.team-card:hover .team-card__media img { transform: scale(1.05); }
.team-card__avatar {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--font-display); font-size: 3rem; color: var(--teal-600); background: var(--mint-50);
}
.team-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.2rem .3rem 1.35rem; }
.team-card__name { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; margin: 0 0 .35rem; }
.team-card__name a { color: var(--ink); text-decoration: none; }
.team-card__name a:hover { color: var(--teal-600); }
.team-card__title { color: var(--teal-600); font-weight: 600; font-size: .82rem; margin: 0 0 .7rem; }
.team-card__bio { color: var(--slate-600); font-size: .93rem; line-height: 1.6; margin: 0 0 1.35rem; }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------- Doctor profile (detail page) */
.doc-hero { background: linear-gradient(120deg, #0b2415 0%, #123b21 55%, #17492b 100%); color: #eaf3e6; }
.doc-hero__inner {
  display: grid; grid-template-columns: 320px 1fr; gap: 3rem; align-items: center;
  padding-block: 3.5rem;
}
.doc-hero__photo {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
  background: rgba(255,255,255,.06); box-shadow: var(--shadow-lg);
}
.doc-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.doc-hero__initials {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--font-display); font-size: 4rem; color: #bfe3c4; background: rgba(255,255,255,.06);
}
.doc-hero__badge {
  position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: .35rem;
  background: var(--teal-600); color: #fff; font-size: .78rem; font-weight: 600;
  padding: .4rem .75rem; border-radius: 999px; box-shadow: var(--shadow);
}
.doc-hero__badge svg { width: 14px; height: 14px; }
.doc-hero__info .page-hero__crumbs { margin: 0 0 1rem; }
.doc-hero__name { font-family: var(--font-display); color: #fff; margin: 0; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; }
.doc-hero__title { color: #8fd0a0; font-weight: 600; font-size: 1.05rem; margin: .5rem 0 0; }
.doc-hero__cred { color: #cfe3cd; font-size: .92rem; margin: .35rem 0 0; }
.doc-hero__meta { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; }
.doc-hero__meta li { display: inline-flex; align-items: center; gap: .5rem; color: #eaf3e6; font-size: .92rem; }
.doc-hero__meta svg { width: 18px; height: 18px; color: #8fd0a0; flex: none; }
.doc-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.doc-hero__actions .btn { display: inline-flex; align-items: center; gap: .45rem; }
.doc-hero__actions .btn svg { width: 16px; height: 16px; }

.doc-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) 340px; gap: 3rem; align-items: start; }
.doc-aside { display: flex; flex-direction: column; gap: 1.25rem; }

/* Service detail sidebar — sibling sub-service links (relevant to the category). */
.svc-nav__eyebrow {
  display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--teal-600); margin-bottom: .25rem;
}
.svc-nav__title { margin: 0 0 .9rem; font-size: 1.15rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.svc-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.svc-nav__list a {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .6rem .7rem; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.svc-nav__list a svg { width: 14px; height: 14px; flex: none; opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; }
.svc-nav__list a:hover { background: var(--bg-soft); color: var(--teal-600); }
.svc-nav__list a:hover svg { opacity: 1; transform: none; }
.svc-nav__list a.is-active {
  background: var(--mint-50); color: var(--teal-600); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--teal-600);
}
.svc-nav__list a.is-active svg { opacity: 1; transform: none; }
/* Nested third-level sub-pages in the sidebar list. */
.svc-nav__sub { list-style: none; margin: .15rem 0 .35rem; padding: 0 0 0 .9rem; display: flex; flex-direction: column; gap: .1rem; border-left: 1px solid var(--line); }
.svc-nav__sub a { font-size: .84rem; font-weight: 500; color: var(--slate-600); padding: .45rem .6rem; }

/* Hub page — grid of nested sub-pages (a service that has children). */
.subsvc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem 0 1.6rem; }
.subsvc-card {
  display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem;
  background: #fff; border: 1px solid var(--line); border-radius: 7px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.subsvc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--teal-400); }
.subsvc-card__ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 7px; background: var(--mint-50); font-size: 1.15rem; color: var(--teal-600); }
.subsvc-card__ic svg { width: 22px; height: 22px; }
.subsvc-card__body { display: flex; flex-direction: column; min-width: 0; }
.subsvc-card__name { font-family: var(--font-display); font-weight: 700; color: var(--navy-800); font-size: .98rem; }
.subsvc-card__sum { color: var(--slate-600); font-size: .82rem; line-height: 1.4; }
.subsvc-card > svg { width: 16px; height: 16px; flex: none; color: var(--teal-500); margin-left: auto; }
@media (max-width: 560px) { .subsvc-grid { grid-template-columns: 1fr; } }

/* Booking card — branded header + form. */
.booking { padding: 0; overflow: hidden; }
.booking__head {
  display: flex; align-items: center; gap: .9rem; padding: 1.4rem 1.5rem;
  background: linear-gradient(120deg, #0b2415 0%, #17492b 100%); color: #eaf3e6;
}
.booking__head h3 { margin: 0; color: #fff; font-size: 1.12rem; }
.booking__head p { margin: .2rem 0 0; color: #cfe3cd; font-size: .82rem; line-height: 1.4; }
.booking__ico {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.12); color: #bfe3c4;
}
.booking__ico svg { width: 22px; height: 22px; }
.booking__form { margin: 0; padding: 1.4rem 1.5rem .3rem; }
.booking__form .field { margin-bottom: .85rem; }
.booking__submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.booking__submit svg { width: 16px; height: 16px; }
.booking__note {
  margin: 0; padding: .1rem 1.5rem 1.4rem; display: flex; align-items: center; gap: .45rem;
  font-size: .84rem; color: var(--slate-600);
}
.booking__note svg { width: 15px; height: 15px; flex: none; color: var(--teal-600); }
.booking__note a { font-weight: 600; }
.doc-facts dl { margin: 0 0 1.4rem; display: grid; gap: 0; }
.doc-facts dl > div { display: grid; gap: .15rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.doc-facts dl > div:first-child { padding-top: 0; }
.doc-facts dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.doc-facts dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-400); font-weight: 700; }
.doc-facts dd { margin: 0; color: var(--ink); font-weight: 500; }
.doc-facts .btn { width: 100%; }

@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; gap: 2.2rem; } }
@media (max-width: 820px) {
  .doc-hero__inner { grid-template-columns: 1fr; gap: 1.8rem; padding-block: 2.5rem; }
  .doc-hero__photo { max-width: 260px; }
}

.avatar {
  display: grid; place-items: center; width: 130px; height: 130px; border-radius: 50%;
  background: linear-gradient(160deg, var(--navy-700), var(--teal-600)); color: #fff;
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; margin-inline: auto;
}
.avatar--xl { width: 170px; height: 170px; font-size: 3rem; }
.doctor-profile__media .avatar--xl { border-radius: 24px; }

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

@media (max-width: 720px) {
  .grid--4 { grid-template-columns: 1fr 1fr; }
  /* On mobile the mega menu becomes an accordion of categories. */
  .mega { display: block; position: static; box-shadow: none; border: 0; padding: .2rem 0 .6rem; }
  .mega__col { border-bottom: 1px solid var(--line); padding: .15rem 0; }
  .mega__col.is-open .mega__toggle { transform: rotate(180deg); }
  .mega__col.is-open .mega__links { display: grid; }
  .has-mega__trigger .caret { display: none; }
}

/* =========================================================================
   Phase 3: professional SVG icons, hero image, animated stat counters
   ========================================================================= */

/* Inline icons (replace emojis) */
.ico { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.16em; flex: none; }
.card__icon { color: var(--teal-600); }
.card__icon svg { width: 26px; height: 26px; }
.ico-inline { width: 18px; height: 18px; color: var(--teal-600); vertical-align: -0.22em; margin-right: .4rem; flex: none; }

/* Animated stat counters */
.stats {
  background: linear-gradient(160deg, var(--navy-800), var(--navy-700));
  color: #fff; border-radius: calc(var(--radius) * 1.3);
  padding: 2.8rem 2rem; box-shadow: var(--shadow-lg);
}
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1; color: #fff; }
.stat__num .suffix { color: var(--teal-400); }
.stat__label { margin-top: .55rem; font-size: .92rem; font-weight: 300; color: #cfe0c3; letter-spacing: .02em; }

/* =========================================================================
   About / Medical Center Introduction
   ========================================================================= */
.about__head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.about__head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }

/* ---- 1. Intro: images + content ---- */
.about__intro {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center;
}
.about__media { position: relative; min-height: 420px; }
.about-shape {
  margin: 0; overflow: hidden; box-shadow: var(--shadow-lg);
  background: var(--mint-50); display: grid; place-items: center;
}
.about-shape__ph { color: var(--teal-500); display: grid; place-items: center; }
.about-shape__ph svg { width: 64px; height: 64px; }
.about-shape img { width: 100%; height: 100%; object-fit: cover; }
.about-shape--a {
  position: absolute; left: 0; top: 0; width: 64%; aspect-ratio: 4 / 4.4;
  border-radius: 48% 48% 48% 48% / 42% 42% 42% 42%;
}
.about-shape--b {
  position: absolute; right: 0; bottom: 6%; width: 50%; aspect-ratio: 4 / 3.4;
  border-radius: 44px 44px 44px 90px; border: 6px solid var(--white);
}

.about__lead { color: var(--ink); font-size: 1rem; line-height: 1.7; margin-bottom: 1.4rem; }

.about__appt { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.6rem; }
.about__appt-ic {
  flex: none; display: grid; place-items: center; width: 50px; height: 50px;
  border-radius: 50%; border: 1px solid var(--line); color: var(--teal-600);
}
.about__appt-ic svg { width: 24px; height: 24px; }
.about__appt-label { display: block; font-size: .82rem; color: var(--slate-600); }
.about__appt-num { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--navy-800); }
.about__appt-num:hover { color: var(--teal-600); }

/* ---- 2. Stats area ---- */
.about__stats-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center;
  margin-top: 5rem;
}
.about__stats-title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: .3rem 0 .8rem; }
.about__stats-text > p { color: var(--ink); font-size: 1rem; margin-bottom: 2rem; }
.about__stats { display: flex; flex-wrap: wrap; gap: 1.6rem 2rem; }
.about__stat { text-align: center; }
.about__ring {
  width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--teal-500) calc(var(--p) * 1%), var(--line) 0);
  transition: transform .25s ease;
}
.about__stat:hover .about__ring { transform: translateY(-4px); }
.about__ring-inner {
  width: 90px; height: 90px; border-radius: 50%; background: var(--white);
  display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line);
}
.about__ring .stat__num { color: var(--teal-600); font-size: 1.5rem; }
.about__ring .stat__num .suffix { color: var(--teal-600); }
.stat__num .suffix .suffix-ic { width: .62em; height: .62em; vertical-align: .04em; }
.about__stat-label { margin: .7rem 0 0; font-size: .9rem; color: var(--slate-600); }

.about__stats-media { position: relative; min-height: 360px; }
.about-shape--lg {
  position: relative; width: 100%; aspect-ratio: 4 / 3.4;
  border-radius: 90px 28px 90px 28px;
}
.about-shape--lg .about-shape__ph svg { width: 88px; height: 88px; }

/* ---- 3. Partner / logo strip ---- */
.about__partners {
  list-style: none; margin: 4rem 0 0; padding: 2.4rem 0 0; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.6rem 2rem;
}
.about__partner {
  display: inline-flex; align-items: center; gap: .6rem; color: var(--slate-600);
  font-family: var(--font-display); font-weight: 600; letter-spacing: .02em;
  opacity: .9; transition: opacity .25s ease, transform .25s ease, color .25s ease;
}
.about__partner:hover { opacity: 1; transform: translateY(-3px); color: var(--teal-600); }
/* Brand logo image. */
.about__partner-logo { height: 150px; width: auto; max-width: 240px; object-fit: contain; display: block; }
/* Icon + name fallback (shown only when the logo image fails to load). */
.about__partner-fallback { display: none; align-items: center; gap: .6rem; }
.about__partner.no-logo .about__partner-logo { display: none; }
.about__partner.no-logo .about__partner-fallback { display: inline-flex; }
.about__partner-ic { display: grid; place-items: center; color: var(--teal-600); }
.about__partner-ic svg { width: 26px; height: 26px; }

/* ---- Responsive ---- */
@media (max-width: 920px) {
  .about__intro, .about__stats-row { grid-template-columns: 1fr; gap: 2.5rem; }
  .about__stats-row { margin-top: 3.5rem; }
  .about__media { min-height: 360px; max-width: 460px; margin: 0 auto; width: 100%; }
  .about__stats-media { order: -1; max-width: 460px; margin: 0 auto; width: 100%; }
  .about__stats { justify-content: center; }
}
@media (max-width: 560px) {
  .about__media { min-height: 320px; }
  .about-shape--a { position: relative; width: 78%; }
  .about-shape--b { width: 56%; bottom: 14%; }
  .about__partners { justify-content: center; }
}

/* =========================================================================
   Our Impact — circular statistic counters
   ========================================================================= */
.impact {
  /* Clean, light band. */
  background: var(--bg-soft);
}
.impact__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6rem;
}
.impact-stat { display: flex; flex-direction: column; align-items: center; text-align: center; }

.impact-ring {
  position: relative; width: 150px; max-width: 100%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.impact-stat:hover .impact-ring {
  transform: translateY(-5px) scale(1.03);
  border-color: var(--teal-400); box-shadow: var(--shadow-lg);
}
.impact-ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.impact-ring__track { fill: none; stroke: var(--line); stroke-width: 4; }
.impact-ring__bar {
  fill: none; stroke: var(--teal-500); stroke-width: 4; stroke-linecap: round;
  /* JS sets stroke-dasharray/offset to animate the arc in sync with the count. */
  transition: stroke-dashoffset .1s linear;
}
.impact-ring__content { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: 0 .8rem; }
.impact-stat__ic {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--mint-50); color: var(--teal-600); margin-bottom: .25rem;
}
.impact-stat__ic svg { width: 19px; height: 19px; }
.impact-stat__num {
  margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem); color: var(--navy-800);
}
.impact-stat__num .suffix { font-size: .6em; color: var(--teal-600); margin-left: .06em; }
.impact-stat__label { margin: .9rem 0 0; font-size: .88rem; color: var(--slate-600); }

@media (max-width: 1100px) {
  .impact__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.6rem; }
}
@media (max-width: 720px) {
  .impact__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.2rem; }
  .impact-ring { width: 150px; }
}
/* Proper responsive grid on phones (no horizontal scroll). */
@media (max-width: 460px) {
  .impact-ring { width: min(150px, 40vw); }
}

/* =========================================================================
   Care Journey — premium circular process flow with connected nodes
   ========================================================================= */
.journey {
  background: var(--mint-50);   /* flat pale sage #eef4e3 (no gradient) */
}
.journey .section__head { max-width: 720px; margin-inline: auto; }

.journey__track {
  --node: 96px;
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: flex; align-items: flex-start; gap: 0; position: relative;
}
.jstep {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  /* Scroll-reveal: fade + rise, staggered by --i (set inline per step). */
  opacity: 0; transform: translateY(26px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--i, 0) * 110ms);
}
.journey__track.is-in .jstep { opacity: 1; transform: none; }

/* Center-to-center connector between adjacent nodes (auto-scales to any count). */
.jstep::after {
  content: ""; position: absolute; top: calc(var(--node) / 2); left: 50%; width: 100%;
  height: 3px; border-radius: 999px; z-index: 0;
  background: linear-gradient(90deg, var(--teal-400), var(--teal-600));
}
.jstep:last-child::after { display: none; }

.jstep__node {
  position: relative; z-index: 1;
  width: var(--node); height: var(--node); border-radius: 50%;
  display: grid; place-items: center; background: var(--white);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.jstep:hover .jstep__node {
  transform: scale(1.06);
  border-color: var(--teal-400);
  box-shadow: var(--shadow-lg), 0 0 0 7px var(--mint-50);   /* soft glow */
}
.jstep__ic {
  display: grid; place-items: center; color: var(--teal-600); transition: transform .28s ease;
}
.jstep__ic svg { width: 30px; height: 30px; stroke-width: 1.6; }
.jstep:hover .jstep__ic { transform: scale(1.06); }
.jstep__num {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--teal-600); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .04em;
  padding: .14rem .58rem; border-radius: 999px; box-shadow: var(--shadow);
}
.jstep__body { margin-top: 1.4rem; max-width: 230px; }
.jstep__title { font-size: 1.06rem; margin: 0 0 .4rem; }
.jstep__desc { margin: 0; font-size: 1rem; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .jstep { opacity: 1; transform: none; transition: none; }
}

/* Tablet: keep the connected horizontal flow, just tighter. */
@media (max-width: 980px) {
  .journey__track { --node: 84px; }
  .jstep__ic svg { width: 26px; height: 26px; }
  .jstep__body { margin-top: 1.1rem; }
  .jstep__title { font-size: .98rem; }
}

/* Mobile: vertical timeline — circular nodes stay intact, stacked in order. */
@media (max-width: 720px) {
  .journey__track {
    --node: 74px; flex-direction: column; align-items: stretch; gap: 2.4rem;
  }
  .jstep {
    flex-direction: row; align-items: flex-start; text-align: left; gap: 1.2rem;
  }
  .jstep__node { flex: none; }
  /* Connector turns vertical, linking each node down to the next. */
  .jstep::after {
    top: var(--node); left: calc(var(--node) / 2); transform: translateX(-50%);
    width: 3px; height: calc(100% + 2.4rem);
    background: linear-gradient(180deg, var(--teal-400), var(--teal-600));
  }
  .jstep__body { margin-top: 0; padding-top: .4rem; max-width: none; }
}

/* =========================================================================
   Patient Reviews + Appointment Booking (no background image, theme only)
   ========================================================================= */
.rb { background: var(--bg-soft); }
.rb__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }

/* ---- Left: FAQ column ---- */
.rb__faq > h2 { margin-bottom: 1.4rem; }
.rb__faq .faq { margin-top: .4rem; }

/* ---- Right: premium appointment form ---- */
.rb__form {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.bform__head {
  display: flex; align-items: center; gap: 1rem;
  background: var(--navy-800); color: var(--white); padding: 1.5rem 1.8rem;
}
.bform__head h3 { color: var(--white); margin: 0; font-size: 1.35rem; }
.bform__head p { margin: .15rem 0 0; color: var(--mint-50); font-size: .9rem; }
.bform__head-ic {
  flex: none; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; background: var(--teal-600); color: var(--white);
}
.bform__head-ic svg { width: 26px; height: 26px; }

.bform { padding: 1.8rem; display: grid; gap: 1rem; }
.bform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.bfield { position: relative; }
.bfield__ic {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--teal-600); display: grid; place-items: center; pointer-events: none;
}
.bfield__ic svg { width: 20px; height: 20px; }
.bfield input, .bfield select {
  width: 100%; padding: .85rem 1rem .85rem 2.9rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink);
  font-family: var(--font-sans); font-size: .98rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bfield input::placeholder { color: var(--slate-400); }
.bfield input:focus, .bfield select:focus {
  outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 4px var(--mint-50);
}
/* Real-time validation: border turns brand green once a field is valid. */
.bfield input:user-valid, .bfield select:user-valid { border-color: var(--teal-500); }
.bfield--select select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer; }
.bfield--select select:invalid { color: var(--slate-400); }
.bfield__chev {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--slate-600); pointer-events: none;
}
.bfield__chev svg { width: 18px; height: 18px; transform: rotate(90deg); }
/* Larger, more prominent CTA. */
.bform__submit {
  width: 100%; justify-content: center; gap: .5rem; margin-top: .6rem;
  padding: 1.05rem 1.6rem; font-size: 1.08rem; letter-spacing: .01em;
}
.bform__submit svg { width: 20px; height: 20px; }
/* Trust / reassurance line under the CTA. */
.bform__note {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: .2rem 0 0; font-size: .9rem; color: var(--ink);
}
.bform__note-ic { display: inline-grid; place-items: center; color: var(--teal-600); flex: none; }
.bform__note-ic svg { width: 18px; height: 18px; }
.bform__note a { font-weight: 600; }

/* =========================================================================
   Verified Google reviews — continuous right-to-left auto-loop slider
   ========================================================================= */
.rmarquee {
  position: relative; overflow: hidden; margin-top: 2.5rem;
  padding-block: 40px;   /* room so lifted cards' hover shadow isn't clipped top/bottom */
  /* Fade the two edges so cards slide in/out softly. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.rmarquee__track {
  display: flex; width: max-content; align-items: stretch;
  animation: rmarquee 55s linear infinite;   /* right → left, seamless loop */
}
.rmarquee:hover .rmarquee__track,
.rmarquee:focus-within .rmarquee__track { animation-play-state: paused; }
@keyframes rmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.grev {
  flex: 0 0 340px; width: 340px; margin-right: 1.5rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 7px;
  box-shadow: var(--shadow); padding: 1.5rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.grev:hover { transform: translateY(-5px); box-shadow: 0 12px 24px -6px rgba(12, 38, 22, .18); border-color: transparent; }
.grev__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; }
.grev__avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  background: var(--teal-600);
}
/* Cycle four brand shades across the eight avatars. */
.grev:nth-child(4n+2) .grev__avatar { background: var(--navy-700); }
.grev:nth-child(4n+3) .grev__avatar { background: var(--teal-500); }
.grev:nth-child(4n+4) .grev__avatar { background: var(--navy-800); }
.grev__id { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.grev__name {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-display); font-weight: 600; font-size: .96rem; color: var(--navy-800);
}
.grev__tick {
  display: inline-grid; place-items: center; width: 17px; height: 17px; flex: none;
  border-radius: 50%; background: var(--google-blue); color: var(--white);
}
.grev__tick svg { width: 11px; height: 11px; }
.grev__time { font-size: .8rem; color: var(--slate-400); }
.grev__glogo { margin-left: auto; flex: none; }
.grev__glogo svg { width: 20px; height: 20px; }
.grev__stars { display: inline-flex; gap: 2px; margin-bottom: .6rem; }
.grev__stars .gstar { width: 16px; height: 16px; fill: var(--google-gold); stroke: none; }
.grev__text { margin: 0; font-size: 1rem; color: var(--ink); }

@media (max-width: 900px) { .rb__grid { grid-template-columns: 1fr; gap: 2.4rem; } }
@media (max-width: 560px) { .grev { flex-basis: 80vw; width: 80vw; } }
@media (max-width: 480px) { .bform__row { grid-template-columns: 1fr; } }

/* Respect reduced-motion: stop the auto-scroll, allow manual swipe instead. */
@media (prefers-reduced-motion: reduce) {
  .rmarquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .rmarquee__track { animation: none; }
}

/* =========================================================================
   Medical Network — UAE map with interactive location pins (theme only)
   ========================================================================= */
.netreach {
  overflow: hidden;   /* keep tooltips/nodes from creating page overflow */
  background: linear-gradient(165deg, var(--mint-50), var(--bg));
}
.netreach__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }

/* ---- Left content ---- */
.netreach__content h2 { margin-bottom: 1rem; }

/* ---- Right: UAE map ---- */
.netreach__map { position: relative; width: 100%; aspect-ratio: 440 / 320; }
.netreach__uae { width: 100%; height: 100%; overflow: visible; }
.netreach__land { fill: var(--teal-500); fill-opacity: .13; stroke: var(--teal-500); stroke-opacity: .45; stroke-width: 1.6; stroke-linejoin: round; }
.netreach__landgrid { opacity: .55; }
.netreach__dot { fill: var(--teal-600); }
@keyframes netfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Interactive location pins. */
.netpin { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.netpin__dot {
  position: relative; width: 42px; height: 42px; border: none; cursor: pointer;
  border-radius: 50%; background: var(--teal-600); color: var(--white);
  display: grid; place-items: center; box-shadow: var(--shadow);
  transition: transform .2s ease, background .2s ease;
}
.netpin__dot::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--teal-400); animation: netpulse 2.2s ease-out infinite;
}
@keyframes netpulse { 0% { transform: scale(.7); opacity: .75; } 100% { transform: scale(1.7); opacity: 0; } }
.netpin__ic svg { width: 20px; height: 20px; }
.netpin__dot:hover, .netpin__dot:focus-visible { transform: scale(1.14); background: var(--teal-500); outline: none; }

/* Tooltip card. */
.netpin__tip {
  position: absolute; bottom: calc(100% + 12px); left: 50%;
  transform: translate(-50%, 6px); width: 210px; max-width: 60vw;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: .8rem .9rem; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 5;
}
.netpin:hover .netpin__tip, .netpin:focus-within .netpin__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.netpin__tip::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  width: 11px; height: 11px; background: var(--white);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: translate(-50%, -6px) rotate(45deg);
}
.netpin__name { display: block; color: var(--navy-800); font-family: var(--font-display); font-size: .95rem; }
.netpin__city { display: inline-flex; align-items: center; gap: .3rem; color: var(--teal-600); font-size: .8rem; margin: .2rem 0; }
.netpin__city svg { width: 13px; height: 13px; }
.netpin__desc { display: block; color: var(--ink); font-size: .82rem; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .netreach__node, .netpin__dot::before { animation: none; }
}
@media (max-width: 900px) {
  .netreach__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .netreach__map { order: -1; max-width: 520px; margin: 0 auto; width: 100%; }
}

/* =========================================================================
   Recent Articles — news / blog grid (theme only)
   ========================================================================= */
.articles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.post {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--line); border-radius: 7px; overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  /* Scroll reveal (staggered by --i, set inline per card). */
  opacity: 0; transform: translateY(24px);
}
.articles__grid.is-in .post {
  opacity: 1; transform: none;
  transition: transform .55s ease, box-shadow .28s ease, border-color .28s ease, opacity .55s ease;
  transition-delay: calc(var(--i, 0) * 110ms);
}
.post:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }

.post__media {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--mint-50);
}
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.post:hover .post__media img { transform: scale(1.07); }
.post:hover .post__ph { transform: scale(1.08); transition: transform .45s ease; }
.post__badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--teal-600); color: var(--white);
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  padding: .3rem .7rem; border-radius: 999px; box-shadow: var(--shadow);
}

.post__body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.5rem 1.5rem; }
.post__meta { display: flex; gap: 1.2rem; margin-bottom: .7rem; }
.post__metaitem { display: inline-flex; align-items: center; gap: .35rem; color: var(--slate-400); font-size: .85rem; }
.post__metaitem svg { width: 16px; height: 16px; color: var(--teal-600); }
.post__title { font-size: 1.2rem; margin: 0 0 .5rem; line-height: 1.3; }
.post__title a { color: var(--navy-800); }
.post__title a:hover { color: var(--teal-600); }
.post__desc { color: var(--ink); margin: 0 0 1.1rem; }
.post__link { margin-top: 10px; align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; font-size: .82rem; line-height: 1; color: #fff; background: var(--teal-600); border: 1px solid var(--teal-600); border-radius: 0; padding: 8px 15px; transition: transform .15s ease, background .2s ease, border-color .2s ease, gap .15s ease; }
.post__link svg { width: 14px; height: 14px; transition: transform .2s ease; }
.post__link:hover { gap: .65rem; color: #fff; background: var(--teal-500); border-color: var(--teal-500); transform: translateY(-2px); }
.post__link:hover svg { transform: translateX(3px); }

.articles__cta { text-align: center; margin-top: 2.6rem; }

@media (prefers-reduced-motion: reduce) {
  .post { opacity: 1; transform: none; }
}
@media (max-width: 900px) { .articles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .articles__grid { grid-template-columns: 1fr; } }

/* =========================================================================
   Interactive Facilities Showcase (tab nav + overlapping circular image)
   ========================================================================= */
.facilities { position: relative; overflow: hidden; background: var(--bg); }
.facilities::before {           /* subtle dot-grid backdrop */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .55;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 40%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 80% at 50% 40%, #000 55%, transparent 100%);
}
.facilities .container { position: relative; z-index: 1; }

.fac__panel {
  position: relative; display: grid; grid-template-columns: 300px 1fr;
  align-items: stretch; margin-top: 3rem;
}

/* ---- Left: tab nav ---- */
.fac__nav {
  position: relative; z-index: 3; align-self: center;
  background: var(--navy-800); border-radius: var(--radius); padding: 1rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.fac__tab {
  display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; cursor: pointer;
  padding: .85rem 1rem; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--mint-50); font-family: var(--font-sans);
  font-weight: 600; font-size: .92rem; transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.fac__tab-ic { display: grid; place-items: center; color: var(--teal-400); transition: color .3s ease; }
.fac__tab-ic svg { width: 18px; height: 18px; }
.fac__tab:hover { background: var(--navy-700); }
.fac__tab.is-active { background: var(--teal-600); color: var(--white); box-shadow: var(--shadow); }
.fac__tab.is-active .fac__tab-ic { color: var(--white); }

/* ---- Right: stage (image + content card). z-index above the nav so the
       circle floats in FRONT — but it only overlaps the nav's empty right
       edge, so tab text is never covered. ---- */
/* Flex-centre the content so the right panel + circle stay vertically aligned
   with the left nav no matter how many tabs it has. */
.fac__stage { position: relative; z-index: 4; display: flex; align-items: center; }

.fac__media {
  position: absolute; top: 50%; left: -55px; transform: translateY(-50%);
  width: 260px; height: 260px; z-index: 5; pointer-events: none;
}
.fac__media::before {           /* decorative outer ring */
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 2px solid var(--teal-400); opacity: .55;
}
.fac__media-item {
  position: absolute; inset: 0; margin: 0; border-radius: 50%; overflow: hidden;
  background: var(--mint-50); box-shadow: var(--shadow-lg);
  display: grid; place-items: center; opacity: 0; transform: scale(.96);
  transition: opacity .35s ease, transform .35s ease;
}
.fac__media-item.is-active { opacity: 1; transform: none; }
.fac__media-item img { width: 100%; height: 100%; object-fit: cover; }
.fac__media-ph { color: var(--teal-600); display: grid; place-items: center; }
.fac__media-ph svg { width: 82px; height: 82px; }

.fac__content {
  position: relative; z-index: 2; width: 100%; min-height: 300px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 2.6rem 2.8rem 2.6rem 235px;
  display: flex; align-items: center;
}
.fac__card { display: none; width: 100%; }
.fac__card.is-active { display: block; animation: facFade .35s ease both; }
@keyframes facFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.fac__card-title { font-size: 1.5rem; margin-bottom: .8rem; }
.fac__card-desc { color: var(--slate-600); margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 992px) {
  .fac__panel { grid-template-columns: 250px 1fr; }
  .fac__media { width: 220px; height: 220px; left: -50px; }
  .fac__content { padding-left: 200px; }
  .fac__media-ph svg { width: 70px; height: 70px; }
}
/* Stacked (vertical) — same connected look as desktop, just rotated: the
   circle overlaps the TOP of the content card instead of its left edge. */
@media (max-width: 820px) {
  .fac__panel { grid-template-columns: 1fr; gap: 1.4rem; }
  .fac__nav { align-self: stretch; }
  .fac__stage { display: block; position: relative; padding-top: 115px; }
  .fac__media {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 200px; height: 200px; margin: 0; z-index: 5;
  }
  .fac__content {
    padding: 110px 1.8rem 2.2rem; min-height: 0; width: 100%;
    align-items: stretch; text-align: center;
  }
  .fac__card-desc { max-width: 54ch; margin-inline: auto; }
}
@media (max-width: 520px) {
  .fac__stage { padding-top: 95px; }
  .fac__media { width: 168px; height: 168px; }
  .fac__media-ph svg { width: 58px; height: 58px; }
  .fac__content { padding: 92px 1.4rem 1.8rem; }
  .fac__card-title { font-size: 1.3rem; }
}

/* =========================================================================
   Blog / Insights
   ========================================================================= */
.blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; align-items: start; }
.blog-main { min-width: 0; }

/* Category filter chips */
.blog-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.blog-chip {
  padding: .42rem .95rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .85rem; font-weight: 500; color: var(--navy-800); background: var(--white);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.blog-chip:hover { border-color: var(--teal-400); color: var(--teal-600); }
.blog-chip.is-active { background: var(--teal-600); border-color: var(--teal-600); color: var(--white); }

/* Post grid (reuses the .post card; ensure it's always visible here) */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
.blog-grid .post { opacity: 1; transform: none; }
.blog-grid--related { margin-top: 1.2rem; }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 2.6rem; }
.pagination__btn {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white); color: var(--navy-800);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pagination__btn:hover { background: var(--teal-600); color: var(--white); border-color: var(--teal-600); }
.pagination__btn svg { width: 20px; height: 20px; }
.pagination__info { color: var(--slate-600); font-size: .9rem; }

/* Sidebar */
.blog-side { display: grid; gap: 1.5rem; position: sticky; top: 100px; }
.blog-widget { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.6rem; box-shadow: var(--shadow); }
.blog-widget__title { font-size: 1.05rem; margin-bottom: 1rem; padding-bottom: .7rem; border-bottom: 2px solid var(--mint-50); }
.blog-cats { list-style: none; margin: 0; padding: 0; }
.blog-cats li a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; color: var(--ink); border-bottom: 1px solid var(--line); transition: color .2s ease;
}
.blog-cats li:last-child a { border-bottom: none; }
.blog-cats li a:hover { color: var(--teal-600); }
.blog-cats__count { background: var(--mint-50); color: var(--teal-600); font-size: .78rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px; }
.blog-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.blog-recent__item { display: flex; gap: .8rem; align-items: center; }
.blog-recent__thumb { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--mint-50); display: grid; place-items: center; color: var(--teal-500); }
.blog-recent__thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-recent__thumb svg { width: 22px; height: 22px; }
.blog-recent__link { display: block; color: var(--navy-800); font-family: var(--font-display); font-weight: 600; font-size: .92rem; line-height: 1.35; }
.blog-recent__link:hover { color: var(--teal-600); }
.blog-recent__date { display: flex; align-items: center; gap: .3rem; color: var(--teal-600); font-size: .74rem; font-weight: 500; margin-bottom: .2rem; }
.blog-recent__date svg { width: 12px; height: 12px; }

/* Detail meta + article body */
.blog-post__meta { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1rem; color: var(--slate-600); font-size: .92rem; }
.blog-post__meta span { display: inline-flex; align-items: center; gap: .4rem; }
.blog-post__meta svg { width: 16px; height: 16px; color: var(--teal-600); }
.blog-article__hero { margin-bottom: 1.8rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.blog-article__hero img { width: 100%; max-height: 460px; object-fit: cover; }
.blog-article__body { font-size: 1.02rem; line-height: 1.8; color: var(--ink); }
.blog-article__body h2 { font-size: 1.45rem; margin: 1.8rem 0 .8rem; }
.blog-article__body p { margin: 0 0 1.1rem; }
.blog-article__body ul { margin: 0 0 1.2rem; padding-left: 1.2rem; display: grid; gap: .5rem; }
.blog-article__body li { line-height: 1.7; }
.blog-article__foot { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.blog-related { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.blog-related > h2 { margin-bottom: 1.2rem; }

@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; gap: 2rem; }
  .blog-side { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-side { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- Home section rhythm */
/* Standard spacing rhythm: content sections alternate white / soft-grey so no
   two neighbours share a background and the gaps read consistently. Driven by
   nth-of-type (not fixed classes) so it stays correct even when an optional
   section — e.g. Upcoming Events — is absent. The hero is a <section> without
   the .section class, so it keeps its own dark background. */
#main > section.section:nth-of-type(even) { background: var(--bg); }      /* white */
#main > section.section:nth-of-type(odd)  { background: var(--bg-soft); } /* soft grey */

/* ================================================================ About page */
.abt-lead-sec { text-align: center; }
.abt-stats {
  list-style: none; margin: 0 auto 2.2rem; padding: 0; max-width: 900px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.abt-stats li { display: flex; flex-direction: column; gap: .2rem; padding: .4rem 0; position: relative; }
.abt-stats li + li::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--line); }
.abt-stats__num { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; color: var(--teal-600); line-height: 1; }
.abt-stats__label { font-size: .82rem; color: var(--slate-600); }
.abt-lead { max-width: 820px; margin: 0 auto; font-size: 1.1rem; line-height: 1.75; color: var(--navy-800); }

.abt-narrow { max-width: 860px; }
.abt-prose p { margin: 0 0 1.1rem; }
.abt-centered, .abt-center { text-align: center; }
.abt-note { max-width: 760px; margin: 1.8rem auto 0; text-align: center; font-size: .92rem; color: var(--slate-600); }
.abt-center { margin-top: 1.8rem; }

/* Mission / Vision */
.abt-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.abt-mv__card { background: var(--white); border: 1px solid var(--line); border-radius: 7px; padding: 2rem; box-shadow: var(--shadow); }
.abt-mv__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--mint-50); color: var(--teal-600); margin-bottom: 1rem; }
.abt-mv__ic svg { width: 26px; height: 26px; }
.abt-mv__card h3 { margin: .3rem 0 .6rem; font-size: 1.3rem; }
.abt-mv__card p { color: var(--slate-600); margin: 0; }

/* The Brockwell Approach */
.abt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; counter-reset: none; }
.abt-step { background: var(--white); border: 1px solid var(--line); border-radius: 7px; padding: 1.6rem 1.4rem; box-shadow: var(--shadow); }
.abt-step__num { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--teal-600); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin-bottom: 1rem; box-shadow: 0 6px 16px rgba(46,125,70,.28); }
.abt-step h3 { margin: 0 0 .45rem; font-size: 1.08rem; }
.abt-step p { margin: 0; color: var(--slate-600); font-size: .92rem; line-height: 1.6; }

/* Services grid (core categories) */
.abt-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.3rem; }
.abt-svc {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: 7px;
  text-decoration: none; color: var(--ink); box-shadow: var(--shadow);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.abt-svc:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--teal-400); }
.abt-svc__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mint-50); }
.abt-svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.abt-svc:hover .abt-svc__media img { transform: scale(1.05); }
.abt-svc__media .abt-svc__ic { display: grid; place-items: center; width: 100%; height: 100%; color: var(--teal-600); }
.abt-svc__media .abt-svc__ic svg { width: 48px; height: 48px; }
.abt-svc__body { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.4rem 1.4rem; }
.abt-svc__name { font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.abt-svc__desc { margin-top: .5rem; color: var(--slate-600); font-size: .9rem; line-height: 1.55; flex: 1; }
.abt-svc__more { align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; margin-top: 10px; padding: 8px 15px; color: #fff; background: var(--teal-600); border: 1px solid var(--teal-600); border-radius: 0; font-weight: 500; font-size: .82rem; line-height: 1; transition: transform .15s ease, background .2s ease, border-color .2s ease, gap .15s ease; }
.abt-svc__more svg { width: 14px; height: 14px; }
.abt-svc:hover .abt-svc__more { gap: .65rem; background: var(--teal-500); border-color: var(--teal-500); transform: translateY(-2px); }

/* Meet the Founder — content left, photo right */
.abt-founder__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: start; }
.abt-founder__content .eyebrow { display: block; margin-bottom: .4rem; }
.abt-founder__content h2 { margin: 0 0 .3rem; }
.abt-founder__role { color: var(--teal-600); font-weight: 600; font-size: .92rem; margin: 0 0 1.3rem; }
.abt-founder__content p { color: var(--slate-600); margin: 0 0 1rem; }
.abt-quote { margin: 1.4rem 0 1.6rem; padding: 1rem 1.3rem; border-left: 3px solid var(--teal-500); background: var(--mint-50); border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--font-display); font-size: 1.05rem; color: var(--navy-800); font-style: italic; }
.abt-founder__media { position: sticky; top: 100px; }
.abt-founder__photo { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-lg); background: var(--mint-50); }
.abt-founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.abt-founder__photo--ph { display: grid; place-items: center; color: var(--teal-500); }
.abt-founder__photo--ph svg { width: 72px; height: 72px; }

/* Our Specialists */
.abt-spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; max-width: 900px; margin-inline: auto; }
.abt-spec { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var(--ink); }
.abt-spec__media { width: 100%; aspect-ratio: 4 / 5; border-radius: 7px; overflow: hidden; background: var(--mint-50); box-shadow: var(--shadow); margin-bottom: 1rem; display: grid; place-items: center; transition: box-shadow .2s ease, transform .2s ease; }
.abt-spec:hover .abt-spec__media { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.abt-spec__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.abt-spec__ph { color: var(--teal-500); }
.abt-spec__ph svg { width: 54px; height: 54px; }
.abt-spec__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.abt-spec__role { color: var(--teal-600); font-weight: 600; font-size: .85rem; margin-top: .25rem; }

/* Our Story */
.abt-story__grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 3rem; align-items: center; }
.abt-story__text .eyebrow { display: block; margin-bottom: .4rem; }
.abt-story__text p { color: var(--slate-600); margin: 0 0 1rem; }
.abt-story__stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.abt-story__stats li { background: var(--white); border: 1px solid var(--line); border-radius: 7px; padding: 1.2rem 1.4rem; box-shadow: var(--shadow); }
.abt-story__stats b { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--teal-600); line-height: 1; }
.abt-story__stats b i { font-style: normal; font-size: 1.1rem; color: var(--slate-600); }
.abt-story__stats span { color: var(--slate-600); font-size: .88rem; }

.abt-partners { margin-top: 1rem; }

/* Responsive */
@media (max-width: 900px) {
  .abt-mv, .abt-founder__grid, .abt-story__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .abt-steps { grid-template-columns: repeat(2, 1fr); }
  .abt-founder__media { position: static; order: -1; max-width: 420px; }
}
@media (max-width: 560px) {
  .abt-stats { grid-template-columns: repeat(2, 1fr); }
  .abt-stats li + li::before { display: none; }
  .abt-steps { grid-template-columns: 1fr; }
}

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

/* --- Info panel + form grid --- */
.ct-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2rem; align-items: stretch; }

/* Left — dark forest info panel */
.ct-info {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: #e8f1e4; border-radius: var(--radius); padding: 2.6rem 2.3rem; box-shadow: var(--shadow-lg);
}
.ct-info::before {
  content: ""; position: absolute; z-index: -1; right: -70px; top: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(156,192,111,.28), transparent 70%);
}
.ct-info .eyebrow { color: var(--teal-400); }
.ct-info h2 { color: #fff; margin: .3rem 0 .8rem; }
.ct-info > p { color: rgba(232,241,228,.8); margin: 0 0 1.8rem; font-size: .95rem; }
.ct-info__list { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: 1.15rem; }
.ct-info__list li { display: flex; align-items: flex-start; gap: .9rem; }
.ct-info__ic {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px;
  background: rgba(156,192,111,.16); color: var(--teal-400);
}
.ct-info__ic svg { width: 21px; height: 21px; }
.ct-info__k { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--teal-400); margin-bottom: .15rem; }
.ct-info__list a, .ct-info__list span:not(.ct-info__k) { color: #fff; font-weight: 500; }
.ct-info__list a:hover { color: var(--teal-400); }
.ct-info__social-row { display: flex; gap: .6rem; margin-top: .6rem; }
.ct-info__social-row a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #e8f1e4;
  transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.ct-info__social-row a:hover { background: var(--teal-400); color: var(--navy-900); border-color: var(--teal-400); transform: translateY(-2px); }
.ct-info__social-row svg { width: 18px; height: 18px; }

/* Right — form on a soft tinted panel */
.ct-form {
  background: linear-gradient(170deg, var(--mint-50) 0%, #f7faf1 100%);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 2.6rem 2.3rem; box-shadow: var(--shadow);
}
.ct-form__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.ct-form__ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--teal-600); color: #fff; }
.ct-form__ic svg { width: 26px; height: 26px; }
.ct-form__head h3 { margin: 0; font-size: 1.3rem; color: var(--navy-800); }
.ct-form__head p { margin: .15rem 0 0; color: var(--slate-600); font-size: .9rem; }
.ct-form__body .field input, .ct-form__body .field textarea { background: #fff; }
.ct-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.ct-form__submit { width: 100%; justify-content: center; margin-top: .3rem; }
.ct-form__note { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 0; font-size: .85rem; color: var(--slate-600); }
.ct-form__note svg { width: 17px; height: 17px; color: var(--teal-600); }
.ct-form input[name="website"] { position: absolute; left: -9999px; }

@media (max-width: 900px) {
  .ct-grid { grid-template-columns: 1fr; }
  .ct-info, .ct-form { padding: 2rem 1.7rem; }
}
@media (max-width: 520px) {
  .ct-form__row { grid-template-columns: 1fr; }
}

/* =========================================================================
   Service category — professional (homepage-style) landing page
   ========================================================================= */

/* Shared media frame — a real photo, or a sage placeholder until one is added */
.svc-media {
  position: relative; margin: 0; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); background: var(--mint-50);
}
.svc-media img { width: 100%; height: 100%; object-fit: cover; }
.svc-media--ph {
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--mint-50), #dfeacb);
  box-shadow: var(--shadow);
}
.svc-media--ph::after {
  content: "Image coming soon"; position: absolute; bottom: 20px; left: 0; right: 0;
  text-align: center; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-600); opacity: .6;
}
.svc-media__ic { display: grid; place-items: center; color: var(--teal-500); }
.svc-media__ic svg { width: 84px; height: 84px; }

/* Intro — lead copy + media */
.svc-intro__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 3rem; align-items: center; }
.svc-intro__content .eyebrow { display: block; margin-bottom: .5rem; }
.svc-intro__content .prose { max-width: none; }
.svc-intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 1.8rem; }
.svc-intro__call { display: inline-flex; align-items: center; gap: .7rem; color: var(--navy-800); }
.svc-intro__call-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--mint-50); color: var(--teal-600); flex: none; }
.svc-intro__call-ic svg { width: 22px; height: 22px; }
.svc-intro__call-txt { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 700; line-height: 1.2; }
.svc-intro__call-txt small { font-family: var(--font-sans); font-weight: 500; font-size: .76rem; color: var(--slate-600); }

/* Text + image split (What Is / How It Works …) — alternating sides */
.svc-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.svc-split__content .prose { max-width: none; }
.svc-split__content h2 { margin-bottom: 1rem; }
.svc-split--rev .svc-split__content { order: 2; }

/* Card / step / list sections keep content readable and centred */
.svc-sec__prose, .svc-list__prose { margin-inline: auto; }
.svc-sec__prose > p:first-child,
.svc-list__prose > p:first-child { text-align: center; max-width: 70ch; margin-inline: auto; color: var(--slate-600); }

/* Benefits / why-choose lists → a tidy two-column icon checklist */
.svc-list__prose ul:not(.checklist) { columns: 2; column-gap: 2.4rem; margin-top: 1.4rem; }
.svc-list__prose ul:not(.checklist) > li { break-inside: avoid; margin-bottom: .85rem; }
.svc-list__prose > p:last-child { text-align: center; max-width: 70ch; margin: 1.6rem auto 0; color: var(--slate-600); font-size: .92rem; }

@media (max-width: 900px) {
  .svc-intro__grid, .svc-split__grid { grid-template-columns: 1fr; gap: 2rem; }
  .svc-split--rev .svc-split__content { order: 0; }
  .svc-media { order: -1; }
  .svc-split--rev .svc-media { order: -1; }
  .svc-list__prose ul:not(.checklist) { columns: 1; }
}

/* ============ Event detail page ============ */
.evt-hero { position: relative; background-size: cover; background-position: center; color: #fff; padding: 8.5rem 0 3rem; background-color: var(--navy-800); }
.evt-hero__overlay { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(12,38,22,.9) 0%, rgba(12,38,22,.72) 45%, rgba(12,38,22,.45) 100%); }
.evt-hero__inner { position: relative; max-width: 820px; }
.evt-hero__crumbs { font-size: .85rem; opacity: .85; margin-bottom: 1.1rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.evt-hero__crumbs a { color: var(--mint-50); }
.evt-hero__crumbs a:hover { color: var(--teal-400); }
.evt-hero__eyebrow { display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-400); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); padding: .32rem .8rem; border-radius: 999px; }
.evt-hero__title { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.12; margin: 1rem 0 .8rem; color: #fff; }
.evt-hero__lead { font-size: 1.1rem; line-height: 1.6; color: #e8f1e4; max-width: 680px; margin: 0 0 1.6rem; }
.evt-hero__facts { list-style: none; margin: 0 0 1.8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; }
.evt-hero__facts li { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; font-size: .95rem; }
.evt-hero__facts .ico { width: 18px; height: 18px; color: var(--teal-400); }
.evt-hero__facts strong { font-weight: 700; }

.evt-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* --- Event bar: facts + live countdown --- */
.evt-bar { background: var(--navy-800); color: #fff; }
.evt-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; padding: 1.4rem 0; }
.evt-bar__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2rem 2.2rem; }
.evt-bar__facts li { display: flex; align-items: center; gap: .7rem; }
.evt-bar__ico { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.1); color: var(--teal-400); }
.evt-bar__ico .ico { width: 20px; height: 20px; }
.evt-bar__t { display: flex; flex-direction: column; line-height: 1.25; font-size: .95rem; }
.evt-bar__t b { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-400); font-weight: 700; }
.evt-count { display: flex; align-items: center; gap: 1rem; }
.evt-count__label { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); font-weight: 600; }
.evt-count__units { display: flex; gap: .5rem; }
.evt-count__u { min-width: 52px; text-align: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: .5rem .3rem; }
.evt-count__u b { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.evt-count__u small { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.evt-count.is-live .evt-count__label::after { content: " — happening now"; }

/* --- Stats strip --- */
.evt-stats { background: linear-gradient(120deg, var(--teal-600), var(--navy-800)); color: #fff; padding: 2.4rem 0; }
.evt-stats__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.evt-stat b { display: block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; line-height: 1; }
.evt-stat span { display: block; margin-top: .4rem; font-size: .9rem; letter-spacing: .03em; color: rgba(255,255,255,.85); }

/* --- Overview + square image in a homepage-style grid --- */
.evt-ov__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.evt-ov__text .eyebrow { margin-bottom: .6rem; }
.evt-ov__text h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 1.1rem; }
.evt-ov__lead { font-size: 1.12rem; line-height: 1.7; color: var(--ink); }
.evt-ov__text p { margin: 0 0 1rem; }
.evt-chips { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.evt-chips li { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 600; color: var(--navy-800); background: var(--mint-50); border: 1px solid var(--line); padding: .45rem .85rem; border-radius: 999px; }
.evt-chips .ico { width: 16px; height: 16px; color: var(--teal-600); }
.evt-ov__media { position: relative; }
.evt-ov__frame { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); position: relative; }
.evt-ov__frame::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 16px; pointer-events: none; }
.evt-ov__frame img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.evt-ov__badge { position: absolute; left: -14px; bottom: 22px; display: inline-flex; align-items: center; gap: .5rem; background: var(--white); color: var(--navy-800); font-weight: 600; font-size: .88rem; padding: .6rem 1rem; border-radius: 999px; box-shadow: var(--shadow); }
.evt-ov__badge .ico { width: 18px; height: 18px; color: var(--teal-600); }

/* --- What you will learn — feature grid --- */
.evt-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; }
.evt-feature { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: .9rem; box-shadow: var(--shadow); }
.evt-feature__ico { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--mint-50); color: var(--teal-600); }
.evt-feature__ico .ico { width: 24px; height: 24px; }
.evt-feature p { margin: 0; font-weight: 500; color: var(--ink); line-height: 1.55; }

/* --- Why attend --- */
.evt-why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
.evt-wcard { padding: 1.8rem 1.6rem; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--teal-500); box-shadow: var(--shadow); }
.evt-wcard__ico { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mint-50); color: var(--teal-600); margin-bottom: 1rem; }
.evt-wcard__ico .ico { width: 22px; height: 22px; }
.evt-wcard h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.evt-wcard p { margin: 0; color: var(--slate-600); line-height: 1.6; }

/* --- Faculty — speaker photo cards (Our-Team style, shorter, uncropped) --- */
.evt-fac__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.5rem; }
.evt-fac { display: flex; flex-direction: column; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 7px; padding: 1rem 1rem 0; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.evt-fac:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--teal-400); }
/* Portrait headshots shown in full — object-fit: contain so nothing is cut. A
   soft tint fills the thin side margins so it reads as a framed portrait. */
.evt-fac__media { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 7px; background: var(--mint-50); display: grid; place-items: center; }
.evt-fac__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.evt-fac__mono { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--teal-500), var(--navy-800)); }
.evt-fac__body { padding: 1rem .2rem 1.3rem; }
.evt-fac__name { font-size: 1.1rem; margin: 0 0 .3rem; }
.evt-fac__creds { font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--teal-600); margin: 0 0 .6rem; text-transform: uppercase; }
.evt-fac__tag { font-size: .9rem; color: var(--slate-600); line-height: 1.55; margin: 0; }

/* --- Pricing / packages --- */
.evt-price__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; align-items: stretch; }
.evt-price { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.7rem; box-shadow: var(--shadow); }
.evt-price--featured { border: 2px solid var(--teal-500); box-shadow: var(--shadow-lg); }
.evt-price__ribbon { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); background: var(--teal-500); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .35rem .9rem; border-radius: 999px; white-space: nowrap; }
.evt-price__name { font-size: 1.1rem; margin: 0 0 .4rem; }
.evt-price__amount { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--navy-800); margin: 0 0 1rem; }
.evt-price__body { color: var(--slate-600); line-height: 1.6; margin: 0 0 1.5rem; flex: 1; }
.evt-price__list { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.evt-price__list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; line-height: 1.45; color: var(--ink); }
.evt-price__list .ico { width: 18px; height: 18px; flex: none; margin-top: .1rem; color: var(--teal-600); }
.evt-price--featured .evt-price__list .ico { color: var(--teal-500); }
.evt-price__cta { width: 100%; justify-content: center; }
.evt-price__note { margin: 1.8rem auto 0; max-width: 68ch; text-align: center; color: var(--slate-600); font-size: .95rem; line-height: 1.6; }
.evt-price__secure { margin: 1.4rem auto 0; display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--slate-600); font-size: .9rem; }
.evt-price__secure .ico { width: 17px; height: 17px; color: var(--teal-600); }
form.evt-price { margin: 0; }

/* Banner CTA (packages events — no inline form) */
.evt-cta--banner { text-align: center; background: var(--bg-soft); }
.evt-cta__banner { max-width: 640px; margin: 0 auto; }
.evt-cta__banner h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: .6rem 0 1rem; }
.evt-cta__banner .evt-cta__seats { margin-left: auto; margin-right: auto; }
.evt-cta__banner .btn--lg { margin-top: .4rem; }
.evt-cta__contact--center { justify-content: center; align-items: center; margin-top: 1.6rem; }
.evt-cta__contact--center span { width: 100%; color: var(--slate-600); font-size: .88rem; }

/* --- Reserve / register CTA band --- */
.evt-cta__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.evt-cta__intro h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: .6rem 0 1rem; }
.evt-cta__seats .ico { width: 16px; height: 16px; }
.evt-cta__contact { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.2rem; }
.evt-cta__contact a { display: inline-flex; align-items: center; gap: .5rem; color: var(--navy-800); font-weight: 600; }
.evt-cta__contact a:hover { color: var(--teal-600); }
.evt-cta__contact .ico { width: 18px; height: 18px; color: var(--teal-600); }
.evt-cta__form { padding: 2rem 1.9rem; scroll-margin-top: 100px; }
.evt-cta__form h3 { margin: 0 0 1.1rem; font-size: 1.35rem; }
.evt-cta__form .btn--lg { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .evt-ov__grid, .evt-cta__inner { grid-template-columns: 1fr; gap: 2.2rem; }
  .evt-ov__media { order: -1; }
  .evt-ov__badge { left: 12px; }
  .evt-hero { padding-top: 7rem; }
  .evt-bar__inner { flex-direction: column; align-items: flex-start; }
  .evt-count { width: 100%; justify-content: space-between; }
  .evt-stats__inner { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1rem; }
}
@media (max-width: 520px) {
  .evt-count { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .evt-count__units { width: 100%; }
  .evt-count__u { flex: 1; }
}

/* =========================================================================
   Clinic Locations (list + detail)
   ========================================================================= */
.loc-group { margin-bottom: 3rem; }
.loc-group:last-child { margin-bottom: 0; }
.loc-group__head { margin-bottom: 1.4rem; }

.loc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.6rem;
}
.loc-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s;
}
.loc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.loc-card__media {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--mint-50);
}
.loc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.loc-card__ph {
  width: 100%; height: 100%; display: grid; place-items: center; color: var(--teal-500);
}
.loc-card__ph svg { width: 46px; height: 46px; }
.loc-card__badge {
  position: absolute; top: 12px; left: 12px; background: var(--teal-600); color: #fff;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: .3rem .7rem;
  border-radius: 999px; box-shadow: var(--shadow);
}
.loc-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.loc-card__name { font-size: 1.2rem; margin: 0; }
.loc-card__name a { color: var(--navy-800); text-decoration: none; }
.loc-card__name a:hover { color: var(--teal-600); }
.loc-card__addr, .loc-card__row { display: flex; align-items: flex-start; gap: .5rem; color: var(--slate-600); font-size: .9rem; margin: 0; }
.loc-card__addr .ico, .loc-card__row .ico { color: var(--teal-600); flex: none; margin-top: 2px; width: 1.05em; height: 1.05em; }
.loc-card__row a { color: inherit; text-decoration: none; }
.loc-card__row a:hover { color: var(--teal-600); }
.loc-card .card__link { margin-top: auto; }

/* Detail hero */
.loc-hero { position: relative; background: var(--navy-900); color: #fff; overflow: hidden; }
.loc-hero__bg { position: absolute; inset: 0; z-index: 0; }
.loc-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.loc-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(6,26,15,.62), rgba(6,26,15,.78)); }
.loc-hero--plain { background: linear-gradient(120deg, #0b2415 0%, #123b21 55%, #17492b 100%); }
.loc-hero__in { position: relative; z-index: 2; padding: 84px 0 66px; max-width: 760px; }
.loc-hero__in .eyebrow { color: var(--teal-400); display: inline-flex; align-items: center; gap: .4rem; }
.loc-hero__in .eyebrow .ico { width: 1.05em; height: 1.05em; }
.loc-hero__in h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3rem); margin: .5rem 0 .6rem; }
.loc-hero__addr { color: rgba(255,255,255,.85); font-size: 1.05rem; margin: 0 0 .5rem; }
.loc-hero__lead { color: rgba(255,255,255,.72); margin: 0 0 1.4rem; }
.loc-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }

/* Detail info cards */
.loc-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; margin-bottom: 3rem; }
.loc-info__card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.loc-info__ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--mint-50); color: var(--teal-600); margin-bottom: .8rem; }
.loc-info__ic svg { width: 24px; height: 24px; }
.loc-info__card h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.loc-info__card p { margin: 0 0 .35rem; color: var(--slate-600); display: flex; align-items: center; gap: .5rem; }
.loc-info__card p .ico { color: var(--teal-600); width: 1.05em; height: 1.05em; }
.loc-info__card a { color: inherit; text-decoration: none; }
.loc-info__card a:hover { color: var(--teal-600); }
.loc-hours { list-style: none; padding: 0; margin: 0; color: var(--slate-600); }
.loc-hours li { padding: .18rem 0; font-size: .92rem; }

.loc-about, .loc-docs { margin-bottom: 3rem; }
.loc-cta { text-align: center; background: var(--mint-50); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.4rem 1.4rem; }
.loc-cta h2 { margin-bottom: .5rem; }
.loc-cta__btns { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.2rem; }

@media (max-width: 600px) {
  .loc-hero__in { padding: 60px 0 46px; }
}

/* =========================================================================
   Floating quick-contact speed dial (bottom-right)
   One trigger button; tapping it fans out WhatsApp + Call.
   ========================================================================= */
:root {
  --fab-blue: #1668c9;        /* trigger + call */
  --fab-blue-dark: #0f4f9e;
  --fab-wa: #25d366;          /* WhatsApp brand green */
}

.fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 1100;
  display: flex; flex-direction: column; align-items: flex-end; gap: .75rem;
}

/* ---- action list (hidden until opened) ---- */
.fab__actions {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: .75rem;
}
.fab__actions li { display: block; }

/* Only collapse once JS is running, so the links stay usable without it. */
.fab--js .fab__actions li {
  opacity: 0; transform: translateY(14px) scale(.6); pointer-events: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.fab--js.is-open .fab__actions li { opacity: 1; transform: none; pointer-events: auto; }
/* Fan out bottom-up, so the nearest button appears first. */
.fab--js.is-open .fab__actions li:nth-last-child(1) { transition-delay: .04s; }
.fab--js.is-open .fab__actions li:nth-last-child(2) { transition-delay: .11s; }

/* ---- shared button shape ---- */
.fab__btn, .fab__toggle {
  position: relative; width: 54px; height: 54px; border: 0; border-radius: 50%;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  color: #fff; text-decoration: none;
  box-shadow: 0 8px 22px rgba(12, 38, 22, .28);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .2s ease;
}
/* Beat the global `a:hover` colour so the icon never darkens on hover. */
.fab__btn, .fab__btn:hover, .fab__btn:focus, .fab__btn:active,
.fab__btn:visited, .fab__toggle:hover, .fab__toggle:focus { color: #fff; }
.fab__btn svg, .fab__toggle svg { color: #fff; }

.fab__btn--wa   { background: var(--fab-wa); }
.fab__btn--call { background: var(--fab-blue); }
.fab__btn:hover, .fab__btn:focus-visible { transform: scale(1.09); box-shadow: 0 12px 28px rgba(12, 38, 22, .36); }
.fab__btn--wa:hover   { background: #1fbe5b; }
.fab__btn--call:hover { background: var(--fab-blue-dark); }
.fab__btn:focus-visible, .fab__toggle:focus-visible { outline: 3px solid #bcd8fb; outline-offset: 3px; }

.fab__ic { display: grid; place-items: center; position: relative; z-index: 2; }
.fab__ic svg { width: 27px; height: 27px; display: block; }
.fab__btn--call .fab__ic svg { width: 25px; height: 25px; }

/* ---- trigger ---- */
.fab__toggle { width: 60px; height: 60px; background: var(--fab-blue); }
.fab__toggle:hover { background: var(--fab-blue-dark); transform: scale(1.06); }
.fab__toggle-ic {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  transition: opacity .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.fab__toggle-ic svg { width: 28px; height: 28px; display: block; }
.fab__toggle-ic--close { opacity: 0; transform: rotate(-90deg) scale(.5); }
.fab.is-open .fab__toggle-ic--open  { opacity: 0; transform: rotate(90deg) scale(.5); }
.fab.is-open .fab__toggle-ic--close { opacity: 1; transform: none; }
.fab.is-open .fab__toggle { background: var(--navy-800); }

/* Pulsing halo — attention while closed, silent once open. */
.fab__ring {
  position: absolute; inset: 0; border-radius: 50%; z-index: 1;
  background: var(--fab-blue); opacity: .5;
  animation: fabPulse 2.4s ease-out infinite;
}
.fab.is-open .fab__ring, .fab__toggle:hover .fab__ring { animation-play-state: paused; opacity: 0; }

/* ---- hover label ---- */
.fab__label {
  position: absolute; right: calc(100% + 12px); top: 50%; translate: 0 -50%;
  white-space: nowrap; background: var(--navy-800); color: #fff;
  font-size: .84rem; font-weight: 500; padding: .5rem .85rem; border-radius: 8px;
  box-shadow: var(--shadow); pointer-events: none;
  opacity: 0; transform: translateX(8px); transition: opacity .22s ease, transform .22s ease;
}
.fab__label::after {
  content: ""; position: absolute; left: 100%; top: 50%; translate: 0 -50%;
  border: 6px solid transparent; border-left-color: var(--navy-800);
}
@media (hover: hover) {
  .fab__btn:hover .fab__label, .fab__btn:focus-visible .fab__label { opacity: 1; transform: translateX(0); }
}
@media (hover: none) { .fab__label { display: none; } }

@keyframes fabPulse {
  0%   { transform: scale(1);    opacity: .5; }
  70%  { transform: scale(1.7);  opacity: 0; }
  100% { transform: scale(1.7);  opacity: 0; }
}

/* Toasts share this corner. On wide screens they sit to the LEFT of the dial,
   so they never collide however far it expands. (Narrow screens are handled in
   the media query below, where toasts are full-width.) */
.flash-wrap { right: 100px; bottom: 22px; }

@media (max-width: 560px) {
  .fab { right: 16px; bottom: 16px; gap: .65rem; }
  .fab__btn { width: 50px; height: 50px; }
  .fab__toggle { width: 56px; height: 56px; }
  .fab__ic svg { width: 25px; height: 25px; }
  /* Full-width toasts: stack them above the collapsed trigger instead. The
     dial is closed automatically when a toast appears (see base.html). */
  .flash-wrap { right: 16px; bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .fab__ring { animation: none; opacity: 0; }
  .fab--js .fab__actions li { transition-duration: .01ms; transform: none; }
  .fab__btn:hover, .fab__btn:focus-visible, .fab__toggle:hover { transform: none; }
  .fab__toggle-ic { transition-duration: .01ms; }
}