/* ============================================================
   Soendri Nurse & Aya Centre
   Hand-written CSS. No framework, no build step.

   For a new client: this token block is the whole theme. Change the
   six colours and two typefaces and the site is rebranded.
   ============================================================ */

:root {
  /* Taken from the original Soendri logo: teal for the wordmark, red for the
     caring hands. Teal carries the structure (links, headings accents, dark
     bands, second buttons); red is the call to action (phone, enquiry, main
     buttons) and the small accents (rules under headings, bullets), as the
     hands are the focal point of the logo. The logo teal itself (#01a2a6) is
     too light for text on white, so text uses a deeper teal from the same
     hue. Every text pairing passes WCAG AA.
     These defaults can be overridden in Admin > Appearance. */
  --ink:          #10292b;
  --ink-soft:     #45595b;
  --ink-faint:    #5f7476;
  --paper:        #ffffff;
  --wash:         #eef7f7;
  --wash-deep:    #d6ecec;
  --line:         #dbe8e8;
  --line-2:       #c6dbdc;
  --primary:      #00777b;
  --primary-dark: #0a4649;
  --accent:       #ce2031;
  --accent-dark:  #a8192a;
  --leaf:         #ce2031;
  --leaf-bright:  #ce2031;
  --leaf-wash:    #fdeeee;
  --logo-teal:    #01a2a6;
  --gold:         #d98c0c;

  --shadow-sm: 0 1px 2px rgba(16,41,43,.06);
  --shadow-md: 0 4px 16px rgba(16,41,43,.08);
  --shadow-lg: 0 12px 32px rgba(16,41,43,.12);

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  --serif: "Source Serif 4", Georgia, "Noto Serif", serif;
  --sans:  "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
           "Noto Sans", Roboto, sans-serif;

  --wrap: 1140px;
  --gap:  clamp(1.5rem, 4vw, 3rem);
}

/* The page renders inside viewers that may force a dark scheme. This is a
   brand site with fixed colours, so hold the palette and set an explicit
   background rather than letting it be inverted into something unreadable. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: light; }
}

*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute must win over any component's display rule (the
   review fallback card, slider slides, the enquiry thank-you note). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important;
    transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  letter-spacing: -.003em;
  overflow-x: hidden;
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--primary); text-decoration-thickness: 1px;
    text-underline-offset: .18em; }
a:hover { color: var(--primary-dark); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.018em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.05rem, 5.2vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
p  { margin: 0 0 1.1em; max-width: 68ch; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--wash { background: var(--wash); }
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 60ch; }
.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; z-index: 200;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .82rem 1.5rem;
  font: 600 1rem/1 var(--sans);
  border: 1px solid transparent; border-radius: var(--r-md);
  cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn { white-space: nowrap; }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); color: #fff; }
.btn--teal { background: var(--primary); color: #fff; }
.btn--teal:hover { background: var(--primary-dark); color: #fff; }
.btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn--wa { background: #1f9d56; color: #fff; }
.btn--wa:hover { background: #178245; color: #fff; }
.btn--lg { padding: 1rem 1.8rem; font-size: 1.06rem; }

/* ------------------------------------------------------------- header */
.topbar {
  background: var(--primary-dark); color: #d6eeee;
  font-size: .85rem; padding: .5rem 0;
}
.topbar__in { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
  align-items: center; justify-content: center; }
.topbar a { color: #eefafa; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 720px) { .topbar { display: none; } }

.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; min-height: 72px; flex-wrap: nowrap;
}
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
/* The logo artwork already carries the centre's name — setting it again in
   HTML beside the image just repeated it. */
.brand img { height: 46px; width: auto; }

.nav { display: flex; align-items: center; gap: .1rem; }
.nav a {
  padding: .55rem .7rem; border-radius: var(--r-sm); white-space: nowrap;
  font: 500 .95rem/1 var(--sans); color: var(--ink); text-decoration: none;
}
.nav a:hover { background: var(--wash); }
.nav a[aria-current="page"] { color: var(--primary); font-weight: 600; }
.header__cta { margin-left: .35rem; flex: none; padding: .7rem 1.1rem; }

/* Between 961px and ~1150px the nav and the phone button are both fighting
   for room. Tighten rather than let anything wrap to a second line. */
@media (min-width: 961px) and (max-width: 1180px) {
  .nav a { padding: .5rem .5rem; font-size: .9rem; }
  .header__cta { font-size: .92rem; padding: .65rem .9rem; }
  .brand img { height: 40px; }
}

.burger {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .5rem .6rem; cursor: pointer;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--ink);
  margin: 4px 0; transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .burger { display: block; }
  .header__cta { display: none; }
  .nav {
    position: fixed; inset: 68px 0 auto; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: .5rem 1.25rem 1.25rem; box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - 68px); overflow-y: auto;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .85rem .25rem; border-bottom: 1px solid var(--line); }
}

/* --------------------------------------------------------------- hero */
.hero { background: var(--wash); border-bottom: 1px solid var(--line); }
.hero__in {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .hero__in { grid-template-columns: 1.08fr .92fr; align-items: center; }
}
.hero h1 { margin-bottom: .45em; }
.hero__lede { font-size: 1.16rem; color: var(--ink-soft); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; }

/* The owner card. Half the Google reviews mention Mr. Gain personally
   answering the phone, so it belongs above the fold, not in About. */
.owner {
  display: flex; gap: .9rem; align-items: flex-start;
  margin-top: 1.9rem; padding: 1rem 1.1rem;
  background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--leaf-bright); border-radius: var(--r-md);
  max-width: 30rem;
}
.owner p { margin: 0; font-size: .95rem; color: var(--ink-soft); max-width: none; }
.owner strong { color: var(--ink); }

.hero__media { position: relative; }
.hero__media img { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.rating-badge {
  position: absolute; left: -12px; bottom: -18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: .7rem .95rem; box-shadow: var(--shadow-md); display: flex;
  align-items: center; gap: .6rem;
}
.rating-badge b { font: 600 1.45rem/1 var(--serif); }
.rating-badge small { display: block; color: var(--ink-faint); font-size: .78rem; }
.stars { color: var(--gold); letter-spacing: .06em; font-size: .9rem; }

/* -------------------------------------------------------------- trust */
.trust { border-bottom: 1px solid var(--line); }
.trust__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
@media (min-width: 760px) { .trust__grid { grid-template-columns: repeat(4, 1fr); } }
.trust__cell { background: #fff; padding: 1.5rem 1.2rem; text-align: center; }
.trust__cell b { display: block; font: 600 1.85rem/1 var(--serif); color: var(--primary); }
.trust__cell span { display: block; margin-top: .3rem; font-size: .9rem;
  color: var(--ink-soft); }

/* ------------------------------------------------------------- steps */
/* Numbered because this genuinely is a sequence. */
.steps { display: grid; gap: 1.5rem; counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding-top: 2.9rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--leaf); color: #fff;
  font: 600 .95rem/2.1rem var(--sans); text-align: center;
}
.step h3 { font-size: 1.08rem; margin-bottom: .35em; }
.step p { font-size: .95rem; color: var(--ink-soft); margin: 0; }

/* ----------------------------------------------------------- services */
/* A directory, not a card wall. Somebody arriving needs to find their one
   service fast; eighteen identical shadowed boxes make that harder. */
.svc-group + .svc-group { margin-top: 2.8rem; }
.svc-group__head {
  display: flex; align-items: baseline; gap: .8rem;
  padding-bottom: .6rem; margin-bottom: .2rem;
  border-bottom: 2px solid var(--ink);
}
.svc-group__head h2 { font-size: 1.32rem; margin: 0; }
.svc-group__head span { font-size: .88rem; color: var(--ink-faint); }

.svc-list { list-style: none; margin: 0; padding: 0; }
.svc-list li { border-bottom: 1px solid var(--line); }
.svc-item {
  display: grid; grid-template-columns: 84px 1fr; gap: 1rem;
  align-items: center; padding: 1rem .25rem;
  text-decoration: none; color: inherit;
}
@media (min-width: 640px) {
  .svc-item { grid-template-columns: 116px 1fr auto; gap: 1.4rem; padding: 1.15rem .25rem; }
}
.svc-item:hover { background: var(--wash); }
.svc-item img { border-radius: var(--r-sm); aspect-ratio: 4/3; object-fit: cover; }
.svc-item h3 { font-size: 1.1rem; margin: 0 0 .22em; color: var(--ink); }
.svc-item p { margin: 0; font-size: .93rem; color: var(--ink-soft); max-width: 62ch; }
.svc-item__go { display: none; color: var(--primary); font-weight: 600; font-size: .92rem; }
@media (min-width: 640px) { .svc-item__go { display: block; } }

/* Homepage picks a featured six and shows them larger. */
.svc-cards { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.svc-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: #fff; text-decoration: none; color: inherit;
}
.svc-card:hover { border-color: var(--primary); }
.svc-card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.svc-card__body { padding: 1.05rem 1.15rem 1.25rem; flex: 1; }
.svc-card h3 { font-size: 1.12rem; margin-bottom: .3em; }
.svc-card p { font-size: .93rem; color: var(--ink-soft); margin: 0; }

.service-intro { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.service-intro .split > div:last-child img,
.service-intro .split > div:last-child picture { border-radius: var(--r-lg); }
@media (max-width: 899px) {
  /* stacked on mobile the photo sits directly on the next section */
  .service-intro .split > div:last-child { margin-bottom: .5rem; }
}

/* ------------------------------------------------------------- banner */
.banner { position: relative; background: var(--ink); }
.banner img { width: 100%; height: clamp(180px, 26vw, 300px);
  object-fit: cover; opacity: .48; }
.banner__in {
  position: absolute; inset: 0; display: flex; align-items: center;
}
.banner h1 { color: #fff; margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.crumbs { font-size: .88rem; margin-top: .5rem; }
.banner .crumbs { color: #d6eeee; }
.banner .crumbs a { color: #fff; }
/* On a white page the banner's white link colour made these invisible. */
.crumbs--light { margin: 0 0 1.2rem; color: var(--ink-faint); }
.crumbs--light a { color: var(--ink-soft); }
.crumbs--light a:hover { color: var(--primary); }

/* -------------------------------------------------------------- about */
.split { display: grid; gap: var(--gap); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split--wide > :first-child { }
.vm { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.vm__item { padding-left: 1.1rem; border-left: 3px solid var(--leaf-bright); }
.vm__item h3 { font-size: 1.05rem; margin-bottom: .3em; }
.vm__item p { margin: 0; font-size: .96rem; color: var(--ink-soft); }
.photo-stack { display: grid; grid-template-columns: 1.35fr 1fr; gap: .8rem; }
.photo-stack img { border-radius: var(--r-md); height: 100%; object-fit: cover; }
.photo-stack > div { display: grid; gap: .8rem; }

/* --------------------------------------------------------- testimonials */
.reviews-head {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: flex-end; justify-content: space-between; margin-bottom: 2rem;
}
.reviews-head h2 { margin-bottom: .35rem; }
.reviews-head__score { margin: 0; font-size: .98rem; color: var(--ink-soft); }
.reviews-head__score strong { color: var(--ink); font-size: 1.05rem; }

/* Built on native scroll-snap rather than a JS slider. Touch swipe,
   trackpads and keyboard scrolling all work for free, and if the script
   fails the track is still a scrollable, readable list. */
.carousel { position: relative; }
.carousel__track {
  display: flex; gap: 1.2rem; list-style: none; margin: 0; padding: .3rem 0 1.2rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.carousel__slide {
  flex: 0 0 min(86%, 340px); scroll-snap-align: start; display: flex;
}
@media (min-width: 700px)  { .carousel__slide { flex-basis: calc((100% - 1.2rem) / 2); } }
@media (min-width: 1000px) { .carousel__slide { flex-basis: calc((100% - 2.4rem) / 3); } }

.carousel__nav {
  position: absolute; top: calc(50% - 1.4rem); z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font: 400 1.5rem/1 var(--sans); cursor: pointer;
  display: none; place-items: center; box-shadow: var(--shadow-md);
  transition: background .15s ease, opacity .15s ease;
}
.carousel__nav:hover { background: var(--wash); }
.carousel__nav[disabled] { opacity: .3; cursor: default; }
.carousel__nav--prev { left: -21px; }
.carousel__nav--next { right: -21px; }
@media (min-width: 1240px) { .carousel__nav { display: grid; } }

.carousel__dots { display: flex; justify-content: center; gap: .45rem; margin-top: .2rem; }
.carousel__dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line-2, #cfdce0); cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.carousel__dots button[aria-current="true"] { background: var(--primary); width: 22px; border-radius: 99px; }

.review {
  display: flex; flex-direction: column; width: 100%;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.4rem;
}
.review__top { display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: .8rem; }
.review__text {
  font-size: .97rem; color: var(--ink-soft); margin: 0 0 .8rem; flex: 1;
  /* Cap at six lines so one long review cannot make every card tall. */
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden;
}
.review__more {
  font-size: .88rem; font-weight: 600; text-decoration: none;
  margin-bottom: 1rem; align-self: flex-start;
}
.review__more::after { content: " \2192"; }
.review__more:hover { text-decoration: underline; }
.review__who { display: flex; align-items: center; gap: .65rem;
  font-size: .92rem; font-weight: 600; padding-top: .9rem;
  border-top: 1px solid var(--line); }
.review__who img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  flex: none; background: var(--wash); }
.review__init {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--wash);
  color: var(--primary); font: 600 1rem/1 var(--serif);
}
.review__who > div { flex: 1; min-width: 0; }
.review__who span { display: block; font-weight: 400; color: var(--ink-faint); font-size: .82rem; }
.review__g {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--line);
  background: #fff; font: 700 .85rem/1 var(--sans); color: #4285f4;
}

.reviews-embed { margin-top: 1.6rem; min-height: 120px; }
.reviews-embed > * { max-width: 100%; }

.reviews-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

.rating-card {
  display: grid; gap: clamp(1.2rem, 3vw, 2.2rem); align-items: center;
  margin-top: 2rem; padding: clamp(1.4rem, 3vw, 2rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
}
@media (min-width: 760px) { .rating-card { grid-template-columns: auto 1fr; } }
.rating-card__score { text-align: center; padding-right: clamp(0px, 2vw, 2rem); }
@media (min-width: 760px) { .rating-card__score { border-right: 1px solid var(--line); } }
.rating-card__score b { display: block; font: 600 3.2rem/1 var(--serif); color: var(--ink); }
.rating-card__score .stars { display: block; margin: .3rem 0 .2rem; font-size: 1.05rem; }
.rating-card__score small { color: var(--ink-faint); font-size: .85rem; }
.rating-card p { margin: 0 0 1.1rem; color: var(--ink-soft); }
.rating-card__acts { display: flex; flex-wrap: wrap; gap: .6rem; }

/* -------------------------------------------------------------- areas */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.chip {
  padding: .42rem .85rem; border: 1px solid var(--line);
  border-radius: 999px; background: #fff;
  font-size: .9rem; text-decoration: none; color: var(--ink);
}
.chip:hover { border-color: var(--primary); color: var(--primary); }

/* ------------------------------------------------------------ gallery */
.gal { columns: 2; column-gap: .8rem; }
@media (min-width: 700px) { .gal { columns: 3; } }
@media (min-width: 1000px) { .gal { columns: 4; } }
.gal a { display: block; margin-bottom: .8rem; break-inside: avoid; }
.gal img { border-radius: var(--r-md); width: 100%; }

.gal__item, .cert__link {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-md); cursor: zoom-in;
}
.gal__item picture, .cert__link picture { display: block; }
.gal__item img, .cert__link img {
  transition: transform .45s cubic-bezier(.2,.7,.3,1), filter .3s ease;
}
.gal__item:hover img, .gal__item:focus-visible img,
.cert__link:hover img, .cert__link:focus-visible img {
  transform: scale(1.06);
}
/* A tinted wash plus a magnifier, so it reads as "opens larger" rather than
   as decoration. */
.gal__zoom {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(16, 41, 43,0); transition: background .3s ease;
}
.gal__zoom::after {
  content: ""; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.94) center/20px 20px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312252b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E");
  opacity: 0; transform: scale(.7); transition: opacity .25s ease, transform .25s ease;
}
.gal__item:hover .gal__zoom, .gal__item:focus-visible .gal__zoom,
.cert__link:hover .gal__zoom, .cert__link:focus-visible .gal__zoom {
  background: rgba(16, 41, 43,.22);
}
.gal__item:hover .gal__zoom::after, .gal__item:focus-visible .gal__zoom::after,
.cert__link:hover .gal__zoom::after, .cert__link:focus-visible .gal__zoom::after {
  opacity: 1; transform: scale(1);
}
@media (hover: none) { .gal__zoom { display: none; } }

.certs { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cert { border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1rem; background: #fff; text-align: center; margin: 0;
  transition: border-color .2s ease, box-shadow .2s ease; }
.cert:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.cert img { border-radius: var(--r-sm); }
.cert figcaption { margin-top: .9rem; font-size: .89rem; color: var(--ink-soft);
  line-height: 1.45; }

/* Related services on a service page. This previously borrowed the .footer
   class for its list reset and inherited the footer's pale link colour, which
   is unreadable outside the dark footer. */
.related__head {
  margin: 2.2rem 0 .9rem; font-size: 1.05rem; color: var(--ink);
}
.related { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.related li { border-top: 1px solid var(--line); }
.related li:last-child { border-bottom: 1px solid var(--line); }
.related a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .78rem .1rem;
  color: var(--ink); font-weight: 500; text-decoration: none;
}
.related a::after {
  content: "\203A"; color: var(--primary); font-size: 1.25rem; line-height: 1;
  transition: transform .18s ease;
}
.related a:hover { color: var(--primary); }
.related a:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------- lightbox */
.lb {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(6,24,26,.93);
  align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lb.is-open { display: flex; }
.lb__img {
  max-width: min(100%, 1200px); max-height: 82vh; width: auto;
  border-radius: var(--r-md); box-shadow: 0 20px 60px rgba(0,0,0,.5);
  background: #08122a;
}
.lb__cap {
  position: absolute; left: 0; right: 0; bottom: max(1rem, env(safe-area-inset-bottom));
  text-align: center; color: #e2eeee; font-size: .92rem; padding: 0 4rem;
}
.lb__btn {
  position: absolute; background: rgba(255,255,255,.1); border: 0;
  color: #fff; width: 46px; height: 46px; border-radius: 50%;
  cursor: pointer; display: grid; place-items: center;
  font: 400 1.6rem/1 var(--sans); transition: background .2s ease;
}
.lb__btn:hover { background: rgba(255,255,255,.22); }
.lb__close { top: 1rem; right: 1rem; }
.lb__prev  { left: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lb__next  { right: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lb__count { position: absolute; top: 1.35rem; left: 1.35rem;
  color: #a9bfc0; font-size: .86rem; }
body.lb-open { overflow: hidden; }

/* --------------------------------------------------------------- form */
.form-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.1rem);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 1rem; }
.field label { display: block; font: 600 .9rem/1.4 var(--sans); margin-bottom: .32rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .78rem .9rem;
  font: 400 1rem/1.4 var(--sans); color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary); outline: 2px solid rgba(0,119,123,.2);
  outline-offset: 0;
}
.field--hp { position: absolute; left: -9999px; }
.form-row { display: grid; gap: 1rem; }
@media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }
.notice { padding: .9rem 1.1rem; border-radius: var(--r-md);
  font-size: .95rem; margin-bottom: 1.2rem; }
.notice--ok  { background: #e7f5ed; border: 1px solid #b9e0c9; color: #17603a; }
.notice--err { background: #fdecec; border: 1px solid #f4c3c3; color: #8d1015; }

.contact-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.contact-lines li { display: flex; gap: .85rem; align-items: flex-start; }
.contact-lines svg { width: 20px; height: 20px; color: var(--primary); flex: none;
  margin-top: .22rem; }
.contact-lines a { text-decoration: none; font-weight: 600; }

.map-embed { border: 0; width: 100%; height: 340px; border-radius: var(--r-lg);
  display: block; }

/* --------------------------------------------------------------- cta */
.cta-band { background: var(--primary-dark); color: #fff; }
.cta-band h2 { color: #fff; margin-bottom: .35em; }
.cta-band p { color: #d6eeee; }
.cta-band__in {
  display: flex; flex-direction: column; gap: 1.5rem; text-align: left;
}
@media (min-width: 820px) {
  .cta-band__in {
    flex-direction: row; align-items: center;
    justify-content: space-between; gap: 2.5rem;
  }
  .cta-band__in > div:first-child { max-width: 46rem; }
}
.cta-band__in h2, .cta-band__in p { margin-inline: 0; }
.cta-band__in p:last-child { margin-bottom: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .7rem; flex: none; }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ------------------------------------------------------------- footer */
.footer { background: var(--ink); color: #b9cfd0; padding-block: 2.4rem 0;
  font-size: .9rem; line-height: 1.5; }
/* Compact: four columns on desktop (brand, services, areas, contact), two on
   tablets, so no column has to stack two lists on top of each other. */
.footer__grid { display: grid; gap: 1.6rem 2rem; grid-template-columns: 1fr 1fr; }
.footer__grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 980px) {
  .footer__grid { grid-template-columns: 1.35fr .95fr 1.05fr 1.25fr; }
  .footer__grid > :first-child { grid-column: auto; }
}
.footer h4, .footer .footer__h { color: #fff; font-family: var(--sans); font-size: .78rem;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; margin: 0 0 .75rem; }
.footer .footer__h::after { display: none; }
.footer a { color: #dcebeb; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.footer .footer__areas { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.footer p { max-width: 38ch; margin: .8rem 0; font-size: .86rem; }
.footer__open { color: #9fd6d8; font-weight: 600; }
@media (max-width: 979px) {
  .footer__grid > :last-child { grid-column: 1 / -1; }
}
.footer__bar { margin-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.12);
  padding-block: .9rem; font-size: .82rem; display: flex;
  flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; }

/* --------------------------------------------------- mobile call bar */
/* In this business people convert by calling, usually on a phone, often at
   night after a hospital discharge. It should never be more than one tap. */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -2px 14px rgba(16, 41, 43,.1);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem .5rem; font: 600 1rem/1 var(--sans);
  text-decoration: none; color: #fff;
}
.callbar a:first-child { background: var(--accent); }
.callbar a:last-child  { background: #1f9d56; }
.callbar svg { width: 1.1em; height: 1.1em; }
@media (min-width: 961px) { .callbar { display: none; } }
@media (max-width: 960px) { body { padding-bottom: 56px; } }

/* floating WhatsApp for desktop */
.wa-float {
  position: fixed; right: 20px; bottom: 22px; z-index: 65;
  width: 54px; height: 54px; border-radius: 50%;
  background: #1f9d56; color: #fff;
  display: none; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
}
.wa-float svg { width: 28px; height: 28px; }
@media (min-width: 961px) { .wa-float { display: flex; } }

/* --------------------------------------------------------------- misc */
.prose h2 { margin-top: 1.9em; }
.prose h3 { margin-top: 1.5em; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .45em; }

/* ------------------------------------------------------------ hero slider */
/* Fade, not slide: a moving photo competes with the headline beside it,
   a cross-fade does not. The frame keeps its 4:3 box before any image has
   loaded, so nothing below it jumps. */
.hslider {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  background: var(--wash-deep, #d6ecec);
}
.hslider__slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity 1.1s ease;
}
.hslider__slide.is-active { opacity: 1; z-index: 1; }
.hslider__slide picture, .hslider__slide img {
  display: block; width: 100%; height: 100%;
}
.hero__media .hslider__slide img {
  object-fit: cover; object-position: var(--focus, 50% 50%);
  border-radius: 0; box-shadow: none;
}
.hslider__cap {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  padding: .38rem .72rem; border-radius: 99px;
  background: rgba(16, 41, 43, .72); color: #fff;
  font: 500 .82rem/1.25 var(--sans);
  max-width: calc(100% - 28px);
}
.hslider__dots {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  display: flex; gap: .4rem; padding: .42rem .55rem;
  background: rgba(16, 41, 43, .45); border-radius: 99px;
}
.hslider__dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 99px;
  background: rgba(255, 255, 255, .55); cursor: pointer;
  transition: width .3s ease, background .3s ease;
}
.hslider__dots button[aria-current="true"] { width: 24px; background: #fff; }
.hslider__dots button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hero__media .rating-badge { z-index: 4; }
@media (prefers-reduced-motion: reduce) {
  .hslider__slide { transition: none; }
}

/* ------------------------------------------------------ long-form content */
/* Service, area and blog pages now carry real copy. Measure and rhythm
   matter more here than anywhere else on the site. */
.prose { font-size: 1.04rem; line-height: 1.72; }
/* Spacing lives on the bottom edge only. An earlier "* + *" top-margin rule
   was out-ranked by ".prose p { margin: 0 }", which ran paragraphs together. */
.prose p, .prose ul, .prose ol, .prose table, .prose blockquote { margin: 0 0 1.1em; }
.prose p { max-width: 68ch; }
.prose h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin: 1.9em 0 .5em; }
.prose h3 { font-size: 1.12rem; margin: 1.5em 0 .35em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--leaf); }
.prose a { font-weight: 500; }
.prose strong { color: var(--ink); }
.prose blockquote {
  margin: 1.4em 0; padding: .2em 0 .2em 1.1rem;
  border-left: 3px solid var(--gold); color: var(--ink-soft);
}
.prose table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .55rem .7rem; text-align: left; }
.prose img { border-radius: var(--r-md); }

.content-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 960px) { .content-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
.content-aside { display: grid; gap: 1.2rem; align-content: start; }
@media (min-width: 960px) { .content-aside { position: sticky; top: 96px; } }
.aside-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.25rem 1.3rem;
}
.aside-card h2, .aside-card h3 { font-size: 1.05rem; margin: 0 0 .75rem; }
.aside-card p { font-size: .95rem; color: var(--ink-soft); margin: 0 0 1rem; }
.aside-card .btn { width: 100%; justify-content: center; margin-top: .5rem; }

.updated { font-size: .86rem; color: var(--ink-faint); margin-top: 2.2rem; }

/* ----------------------------------------------------------------- blog */
.posts { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.post-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  text-decoration: none; color: inherit;
}
.post-card:hover { border-color: var(--primary); }
.post-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.post-card__body { padding: 1.1rem 1.25rem 1.35rem; }
.post-card h2 { font-size: 1.18rem; margin: 0 0 .4rem; }
.post-card p { font-size: .94rem; color: var(--ink-soft); margin: 0; }
.post-card time { display: block; font-size: .82rem; color: var(--ink-faint); margin-bottom: .45rem; }
.post-hero { border-radius: var(--r-lg); margin-bottom: 2rem; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

/* ---------------------------------------------------------- social icons */
/* Round, outlined, the same size as the text around them in the top bar and
   a little larger in the footer. Colour comes from the surrounding text, so
   they sit quietly on the dark bars rather than as a row of brand logos. */
.social { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.social a {
  display: grid; place-items: center; border-radius: 50%;
  color: inherit; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .28);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.social a:hover, .social a:focus-visible {
  background: #fff; border-color: #fff; color: var(--primary-dark);
}
.social svg { display: block; }

.social--top { margin-left: .3rem; }
.social--top a { width: 26px; height: 26px; }
.social--top svg { width: 14px; height: 14px; }

.social--foot { margin-top: .2rem; gap: .5rem; }
.social--foot a { width: 34px; height: 34px; color: #dcebeb; }
.social--foot svg { width: 18px; height: 18px; }
.footer .social { display: flex; }        /* beats the older ".footer ul { display: grid }" */
.footer .social a:hover { text-decoration: none; }

/* ------------------------------------------------------------ logo & brand */
.brand picture { display: block; }
/* The final logo is a wide lockup (about 6:1), so it is sized by height and
   capped by width so the menu always fits beside it. */
.brand img { height: 50px; width: auto; max-width: min(305px, 62vw); object-fit: contain; }
@media (min-width: 961px) and (max-width: 1180px) { .brand img { height: 40px; } }
@media (max-width: 480px) { .brand img { height: 38px; } }

/* The logo's navy disappears on the dark footer, so it sits on a white card. */
.footer__logo {
  display: inline-block; background: #fff; border-radius: var(--r-lg);
  padding: .55rem .8rem; margin-bottom: 0;
}
.footer__logo img { width: 210px; max-width: 100%; height: auto; display: block; }

/* Blue on the navy band is too close to read as a button (1.5:1), so the
   primary action flips to white there. */
.cta-band .btn--primary { background: #fff; color: var(--primary-dark); }
.cta-band .btn--primary:hover { background: var(--leaf-wash); color: var(--primary-dark); }

/* Section headings pick up a short leaf-green rule, echoing the logo's leaf. */
.section h2:not(.prose h2):not(.aside-card h2)::after {
  content: ""; display: block; width: 44px; height: 3px; margin-top: .55rem;
  background: var(--leaf-bright); border-radius: 2px;
}
.cta-band h2::after, .banner h1::after { display: none; }
.cta-band__in h2::after, .svc-group__head h2::after { display: none; }

/* Reviews directly under the hero: less air above, a rule below, so it reads
   as its own band rather than running into the numbers strip. */
.reviews-sec--top {
  padding-top: clamp(2.2rem, 4.5vw, 3.4rem);
  padding-bottom: clamp(2.2rem, 4.5vw, 3.4rem);
  border-bottom: 1px solid var(--line);
}
.reviews-sec--top .reviews-head { margin-bottom: 1.4rem; }

/* ---------- Homepage FAQ ---------- */
.faq { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .faq__intro { position: sticky; top: 6rem; } }
.faq__eyebrow { display: inline-block; margin: 0 0 .6rem; padding: .25rem .7rem; border-radius: 99px;
  background: var(--leaf-wash); color: var(--leaf); font-weight: 700; font-size: .8rem; letter-spacing: .08em; }
.faq__intro h2 { margin-top: 0; }
.faq__help { margin-top: 1.6rem; padding: 1.2rem 1.3rem; background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--leaf); border-radius: var(--r-lg, 12px); box-shadow: var(--shadow-sm); }
.faq__help p { margin: 0 0 .8rem; }
.faq__btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.faq__list { display: grid; gap: .75rem; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg, 12px);
  box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s; }
.faq__item:hover { border-color: var(--line-2); }
.faq__item[open] { border-color: var(--primary); box-shadow: var(--shadow-md); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.05rem 1.25rem; font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--r-lg, 12px); }
.faq__item summary i { flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--wash); }
.faq__item summary i::before, .faq__item summary i::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2px; background: var(--primary); transform: translate(-50%, -50%); transition: transform .2s; }
.faq__item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] summary i { background: var(--primary); }
.faq__item[open] summary i::before, .faq__item[open] summary i::after { background: #fff; }
.faq__item[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__item[open] summary { color: var(--primary); }
.faq__a { padding: 0 1.25rem 1.2rem; color: var(--ink-soft); line-height: 1.7; }
@media (prefers-reduced-motion: reduce) { .faq__item summary i::before, .faq__item summary i::after { transition: none; } }