/*
 * The public website.
 *
 * Self-contained: it does not load theme.css, because the clinic's inside-the-
 * application palette is a working tool — dense, high-contrast, built for a
 * receptionist looking at it all day — and a shopfront is not. Sharing the two
 * left the marketing page inheriting table and toolbar rules it never used.
 *
 * Colours are plain hex rather than oklch(). The design was drawn in oklch,
 * which is the better space to think in, but Safari before 15.4 and the WebView
 * on an older Android phone render an unknown colour function as nothing at all
 * — and "nothing at all" here is invisible text on a clinic's front page. These
 * are the same colours, converted.
 *
 * Two system typefaces, no webfont. A clinic page opened on mobile data should
 * not wait on 300KB of Lora to say where the clinic is.
 */

:root {
  --wf-bg:            #fbfaf7;   /* warm off-white page                     */
  --wf-surface:       #fefdfb;   /* cards, header                           */
  --wf-tint:          #e8f4f1;   /* pale teal panels                        */
  --wf-tint-strong:   #d5ebe6;   /* hero wash                               */

  --wf-primary:       #2f7d72;   /* the clinic's teal                       */
  --wf-primary-dark:  #1f5a52;   /* eyebrow text, dark bands                */
  --wf-accent:        #d4674f;   /* terracotta                              */
  --wf-sun:           #d9a441;
  --wf-deep:          #13302f;   /* doctor profile's featured card/footer   */

  --wf-ink:           #16262b;
  --wf-ink-soft:      #3f5459;
  --wf-ink-faint:     #6b8189;

  --wf-line:          #e2e6e8;
  --wf-line-teal:     #cfe4df;

  --wf-danger:        #b3261e;
  --wf-danger-bg:     #fdecea;
  --wf-success:       #14634a;
  --wf-success-bg:    #e5f5ee;

  --wf-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
              "Times New Roman", serif;
  --wf-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  --wf-radius: 8px;
  --wf-wrap: 1240px;

  /* ── Home page (2026 redesign) ──────────────────────────────────────────
     A distinct palette and two webfonts (Figtree/Manrope — loaded only by
     home.html) for the shopfront's own redesign, kept separate from the
     tokens above so the doctor's own page and the patient guides are
     untouched by it. */
  --wf-home-bg:          #faf7f1;
  --wf-home-ink:         #1e2522;
  --wf-home-ink-soft:    #45504b;
  --wf-home-ink-muted:   #55605b;
  --wf-home-forest:      #173f3a;   /* utility bar, "why us", footer          */
  --wf-home-footer-bg:   #122f2b;
  --wf-home-primary:     #1f5c54;   /* buttons, links                        */
  --wf-home-accent:      #2f7d72;   /* "for every age", icon strokes         */
  --wf-home-mint:        #e4ece6;   /* adult-endocrinology tint              */
  --wf-home-mint-strong: #dce7e0;   /* hero visual background                */
  --wf-home-sage:        #b9ccc1;   /* ghost-button border                   */
  --wf-home-tan:         #f3ebdd;   /* paediatric-endocrinology tint         */
  --wf-home-tan-ink:     #8a6a3e;
  --wf-home-tan-ink-dk:  #7a5c33;
  --wf-home-border:      #e6e1d6;
  --wf-home-border-soft: #eee9df;
  --wf-home-track:       #f0f4ef;   /* conditions tab track                  */
  --wf-home-heading-font: 'Manrope', var(--wf-sans);
  --wf-home-body-font:    'Figtree', var(--wf-sans);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* The sticky header would otherwise cover whatever a #anchor jumped to. */
section[id], :target { scroll-margin-top: 90px; }

body {
  margin: 0;
  background: var(--wf-bg);
  color: var(--wf-ink);
  font-family: var(--wf-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--wf-primary); text-decoration: none; }
a:hover { color: var(--wf-primary-dark); text-decoration: underline; }

img { max-width: 100%; }

.wf-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The callback form's honeypot field (see website.forms.CallbackForm) — off
   screen for a sighted visitor, and aria-hidden/tabindex="-1" in the markup
   keeps it out of a screen reader and the tab order too, unlike .wf-sr
   above which is deliberately still announced. A form-filling bot that
   walks the DOM rather than the rendered page finds and fills it anyway. */
.wf-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--wf-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

.wf-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--wf-primary);
  color: #fff;
  padding: 10px 18px;
  z-index: 200;
}
.wf-skip:focus { left: 8px; top: 8px; }

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

.wf-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
}
.wf-btn:hover { text-decoration: none; }

.wf-btn--primary { background: var(--wf-primary); color: #fff; }
.wf-btn--primary:hover { background: var(--wf-primary-dark); color: #fff; }

.wf-btn--ghost {
  background: transparent;
  border-color: rgba(22, 38, 43, .25);
  color: var(--wf-ink);
}
.wf-btn--ghost:hover { border-color: var(--wf-ink); color: var(--wf-ink); }

.wf-btn--wa { background: #1f8a4c; color: #fff; }
.wf-btn--wa:hover { background: #196f3d; color: #fff; }

.wf-btn--big { padding: 14px 28px; font-size: 15px; }
.wf-btn--block { display: block; width: 100%; padding: 13px; font-size: 15px; }

/* ── Header ───────────────────────────────────────────────────────────── */

.wf-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(254, 253, 251, .94);
  border-bottom: 1px solid var(--wf-line);
}
@supports (backdrop-filter: blur(8px)) {
  .wf-head { background: rgba(254, 253, 251, .86); backdrop-filter: blur(8px); }
}

.wf-head__inner {
  max-width: var(--wf-wrap);
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wf-brand { display: flex; align-items: center; gap: 12px; color: inherit; min-width: 0; }
.wf-brand:hover { text-decoration: none; }
.wf-brand__logo { width: 40px; height: 40px; flex-shrink: 0; color: var(--wf-primary); }
.wf-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-family: var(--wf-serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--wf-ink);
}

.wf-nav { display: flex; align-items: center; gap: 32px; font-size: 15px; font-weight: 500; }
.wf-nav a { color: var(--wf-ink-soft); }
.wf-nav a:hover { color: var(--wf-primary-dark); }

.wf-burger {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--wf-ink);
  padding: 4px 8px;
}

.wf-mobile-nav { display: none; flex-direction: column; border-top: 1px solid var(--wf-line); }
.wf-mobile-nav a {
  padding: 14px 28px;
  border-bottom: 1px solid var(--wf-line);
  font-weight: 500;
  color: var(--wf-ink);
}
.wf-mobile-nav a:last-child { border-bottom: none; }
.wf-mobile-nav__call { color: var(--wf-primary); font-weight: 600; }

/* "Patient information" — a nested dropdown on desktop, an accordion inside
   the slide-out panel on mobile. See static/js/website.js for the toggle
   behaviour; both share the same caret icon and rotate it the same way. */
.wf-dropdown__caret { width: 10px; height: 7px; flex-shrink: 0; transition: transform .15s ease; }
.wf-dropdown__trigger[aria-expanded="true"] .wf-dropdown__caret,
.wf-mobile-dropdown__trigger[aria-expanded="true"] .wf-dropdown__caret {
  transform: rotate(180deg);
}

.wf-dropdown { position: relative; }
.wf-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--wf-ink-soft);
  cursor: pointer;
}
.wf-dropdown__trigger:hover { color: var(--wf-primary-dark); }

.wf-dropdown__menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--wf-surface);
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-radius);
  box-shadow: 0 12px 32px rgba(22, 38, 43, .12);
  padding: 8px;
  z-index: 20;
}
.wf-dropdown__menu[hidden] { display: none; }
.wf-dropdown__menu a {
  padding: 10px 12px;
  border-radius: calc(var(--wf-radius) - 2px);
  color: var(--wf-ink-soft);
  font-size: 14px;
  white-space: nowrap;
}
.wf-dropdown__menu a:hover { background: var(--wf-tint); color: var(--wf-primary-dark); }

.wf-mobile-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 28px;
  border: none;
  border-bottom: 1px solid var(--wf-line);
  font: inherit;
  font-weight: 500;
  color: var(--wf-ink);
  background: none;
  cursor: pointer;
  text-align: left;
}
.wf-mobile-nav .wf-mobile-dropdown__menu {
  display: flex;
  flex-direction: column;
  background: var(--wf-bg);
}
.wf-mobile-dropdown__menu[hidden] { display: none; }
.wf-mobile-nav .wf-mobile-dropdown__menu a {
  padding: 12px 28px 12px 44px;
  border-bottom: 1px solid var(--wf-line);
  font-weight: 500;
  font-size: 14px;
  color: var(--wf-ink-soft);
}

/* ── Layout ───────────────────────────────────────────────────────────── */

.wf-section {
  max-width: var(--wf-wrap);
  margin: 0 auto;
  padding: 88px 28px;
}

.wf-section__head { text-align: center; max-width: 640px; margin: 0 auto 48px; }

.wf-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wf-primary-dark);
  margin: 0 0 12px;
}

.wf-pill {
  display: inline-block;
  background: var(--wf-surface);
  border: 1px solid var(--wf-line-teal);
  color: var(--wf-primary-dark);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin: 0 0 20px;
}

.wf-h2 {
  font-family: var(--wf-serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: var(--wf-ink);
}

.wf-body { font-size: 16px; line-height: 1.75; color: var(--wf-ink-soft); margin: 0 0 20px; }
.wf-body:last-child { margin-bottom: 0; }

.wf-empty { text-align: center; color: var(--wf-ink-faint); }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.wf-hero {
  background: linear-gradient(180deg, var(--wf-tint-strong) 0%, var(--wf-bg) 70%);
  padding: 72px 28px 56px;
}
.wf-hero__grid {
  max-width: var(--wf-wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
}
.wf-hero__title {
  font-family: var(--wf-serif);
  font-size: 44px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--wf-ink);
}
.wf-hero__lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--wf-ink-soft);
  margin: 0 0 32px;
  max-width: 520px;
}
.wf-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.wf-hero__hours { margin: 24px 0 0; font-size: 14px; color: var(--wf-ink-faint); }
.wf-hero__visual { display: flex; justify-content: center; }

.wf-orbit { animation: wf-spin 46s linear infinite; transform-origin: 220px 210px; }
.wf-orbit--rev { animation: wf-spin 60s linear infinite reverse; }
@keyframes wf-spin { to { transform: rotate(360deg); } }

/* ── About ────────────────────────────────────────────────────────────── */

.wf-about__grid { display: grid; grid-template-columns: .4fr .6fr; gap: 56px; align-items: start; }
.wf-about__cards { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.wf-minicard { background: var(--wf-tint); padding: 16px 20px; border-radius: 6px; flex: 1; min-width: 200px; }
.wf-minicard__title { font-weight: 600; font-size: 15px; color: var(--wf-ink); margin: 0 0 4px; }
.wf-minicard__body { font-size: 14px; color: var(--wf-ink-faint); margin: 0; }

/* ── Doctors ──────────────────────────────────────────────────────────── */

.wf-doctors {
  background: var(--wf-surface);
  border-top: 1px solid var(--wf-line);
  border-bottom: 1px solid var(--wf-line);
  max-width: none;
}
.wf-doctors > * { max-width: var(--wf-wrap); margin-left: auto; margin-right: auto; }
.wf-doctors__list { display: grid; gap: 56px; }

/* Lets the "Full profile" link's clickable area cover the whole card (see
   .wf-doctor__stretch-link below) without being the only thing wrapped in
   an <a> — the phone/email links inside still need their own tap targets,
   which a card-wide anchor could not contain without invalid nested <a>s. */
.wf-doctor { position: relative; }

/* stretch, so the portrait runs the height of the name-and-contact block beside
   it. Fixed at 160px it sat short against four lines of text and read as a
   thumbnail somebody had forgotten to replace. */
.wf-doctor__row { display: flex; gap: 20px; align-items: stretch; margin-bottom: 20px; }

.wf-doctor__photo {
  width: 120px;
  min-height: 165px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--wf-radius);
  flex-shrink: 0;
  background: var(--wf-tint);
}
.wf-doctor__photo--none {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--wf-serif);
  font-size: 34px;
  font-weight: 700;
  color: var(--wf-primary);
}

.wf-doctor__id { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.wf-doctor__name { font-family: var(--wf-serif); font-size: 24px; font-weight: 700; margin: 0 0 4px; }
.wf-doctor__role { font-weight: 600; color: var(--wf-primary-dark); font-size: 15px; margin: 0 0 8px; }
.wf-doctor__quals { font-size: 14px; color: var(--wf-ink-faint); margin: 0 0 10px; }
.wf-doctor__contact { display: flex; flex-direction: column; gap: 4px; }
.wf-doctor__contact a {
  display: flex; align-items: center; gap: 8px; font-size: 14px;
  color: var(--wf-ink-soft); overflow-wrap: anywhere;
  /* Above the stretched .wf-doctor__stretch-link (see below), so a tap on
     the phone or email still calls or emails rather than opening the
     profile page underneath it. */
  position: relative; z-index: 1;
}
.wf-doctor__contact a:hover { color: var(--wf-primary-dark); }

/* Turns the existing "Full profile" link's hit area into the whole card —
   nothing about how the card looks changes; hovering anywhere on it just
   shows the same pointer cursor a link anywhere else on the site would. */
.wf-doctor__stretch-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ── Services ─────────────────────────────────────────────────────────── */

/* Tabs mean nothing until the script that drives them has run, so they are
   revealed by it. Without JavaScript both panels stay open under their own
   headings, which is more of the clinic's information rather than less. */
.wf-tabs { display: none; justify-content: center; gap: 10px; margin-bottom: 36px; flex-wrap: wrap; }
.wf-js .wf-tabs { display: flex; }

.wf-tab {
  padding: 10px 24px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 14.5px;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid var(--wf-line-teal);
  background: transparent;
  color: var(--wf-primary-dark);
}
.wf-tab:hover { border-color: var(--wf-primary); }
.wf-tab.is-active { background: var(--wf-primary); border-color: var(--wf-primary); color: #fff; }

.wf-panel { outline-offset: 4px; }
.wf-panel[hidden] { display: none; }
.wf-panel + .wf-panel { margin-top: 40px; }
.wf-js .wf-panel + .wf-panel { margin-top: 0; }

/* The panel headings are visible when there are no tabs to name the panels,
   and hidden once the tabs appear and do that job. */
.wf-panel > .wf-sr {
  position: static;
  width: auto; height: auto;
  clip: auto;
  margin: 0 0 16px;
  font-family: var(--wf-serif);
  font-size: 20px;
  white-space: normal;
}
.wf-js .wf-panel > .wf-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
}

.wf-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.wf-chips li {
  background: var(--wf-surface);
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-radius);
  padding: 20px 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--wf-ink);
}

/* ── Why us ───────────────────────────────────────────────────────────── */

.wf-why { background: var(--wf-primary-dark); padding: 64px 28px; }
.wf-why__grid {
  max-width: var(--wf-wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}
.wf-why h3 { font-family: var(--wf-serif); color: #fff; font-size: 19px; margin: 0 0 10px; }
.wf-why p { color: #dceeea; font-size: 14.5px; line-height: 1.65; margin: 0; }

/* ── FAQs ─────────────────────────────────────────────────────────────── */

.wf-faqs { max-width: 900px; }
.wf-faq-list { display: flex; flex-direction: column; gap: 12px; }

.wf-faq {
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-radius);
  background: var(--wf-surface);
  overflow: hidden;
}
.wf-faq summary {
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--wf-ink);
  list-style: none;
}
.wf-faq summary::-webkit-details-marker { display: none; }
.wf-faq summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--wf-primary);
  flex-shrink: 0;
}
.wf-faq[open] summary::after { content: "\2212"; }
.wf-faq p { padding: 0 22px 20px; margin: 0; font-size: 15px; line-height: 1.7; color: var(--wf-ink-soft); }

/* ── Contact ──────────────────────────────────────────────────────────── */

.wf-contact { background: var(--wf-tint); max-width: none; }
.wf-contact > * { max-width: var(--wf-wrap); margin-left: auto; margin-right: auto; }
.wf-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

.wf-card { background: var(--wf-surface); border-radius: var(--wf-radius); padding: 28px; }
.wf-card--form { padding: 32px; }
.wf-card__title { font-family: var(--wf-serif); font-size: 18px; margin: 0 0 12px; color: var(--wf-ink); }
.wf-card__title ~ .wf-card__title { margin-top: 20px; }
.wf-card__sub { font-size: 14.5px; color: var(--wf-ink-faint); margin: 0 0 22px; }
.wf-card__sub--fine { margin: 12px 0 0; font-size: 13px; }

.wf-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--wf-radius);
  min-height: 200px;
  margin-top: 20px;
  border: 1px solid var(--wf-line-teal);
  background: var(--wf-tint-strong);
  color: var(--wf-primary-dark);
  text-align: center;
  padding: 24px;
}
.wf-map:hover { text-decoration: none; background: #c8e4dd; }
.wf-map__pin { font-size: 28px; }
.wf-map__name { font-weight: 600; font-size: 15px; }
.wf-map__link { font-size: 13px; text-decoration: underline; }

/* ── Form ─────────────────────────────────────────────────────────────── */

.wf-field { margin-bottom: 14px; }
.wf-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--wf-ink-soft); margin-bottom: 5px; }
.wf-req { color: var(--wf-danger); margin-left: 2px; }

.wf__input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d5dbdd;
  border-radius: 5px;
  font-size: 15px;
  font-family: inherit;
  color: var(--wf-ink);
  background: #fff;
}
.wf__input:focus { border-color: var(--wf-primary); }
textarea.wf__input { resize: vertical; }

.wf-field__error { color: var(--wf-danger); font-size: 13.5px; margin: 5px 0 0; }

.wf-note { border-radius: 5px; padding: 12px 14px; font-size: 14.5px; margin: 0 0 16px; }
.wf-note--success { background: var(--wf-success-bg); color: var(--wf-success); }
.wf-note--error   { background: var(--wf-danger-bg);  color: var(--wf-danger); }
.wf-note--info    { background: var(--wf-tint);       color: var(--wf-primary-dark); }

/* ── Footer ───────────────────────────────────────────────────────────── */

.wf-foot { background: #14232a; padding: 44px 28px 28px; color: #c3ced2; font-size: 14px; }
.wf-foot__inner {
  max-width: var(--wf-wrap);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}
.wf-foot p { margin: 0; }
.wf-foot__name { font-family: var(--wf-serif); font-weight: 700; font-size: 16px; color: #fff; margin-bottom: 6px; }
.wf-foot__nav { display: flex; gap: 28px; flex-wrap: wrap; }
.wf-foot a { color: #c3ced2; }
.wf-foot a:hover { color: #fff; }
.wf-foot__fine {
  max-width: var(--wf-wrap);
  margin: 24px auto 0;
  padding-top: 20px;
  border-top: 1px solid #2b3a41;
  color: #8b9ba1;
  font-size: 12.5px;
}

/* ── Narrow screens ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .wf-nav { display: none; }
  .wf-burger { display: block; }
  .wf-mobile-nav { display: flex; }
  .wf-mobile-nav[hidden] { display: none; }

  .wf-hero__grid { grid-template-columns: 1fr; text-align: center; }
  .wf-hero__actions { justify-content: center; }
  .wf-hero__lede { margin-left: auto; margin-right: auto; }
  .wf-hero__visual { order: -1; }
  .wf-hero__title { font-size: 32px; }

  .wf-about__grid { grid-template-columns: 1fr; gap: 28px; }
  .wf-chips { grid-template-columns: repeat(2, 1fr); }
  .wf-why__grid { grid-template-columns: 1fr; gap: 28px; }
  .wf-contact__grid { grid-template-columns: 1fr; }
  .wf-section { padding: 56px 20px; }
  .wf-head__inner { padding: 12px 20px; }
  .wf-hero { padding: 48px 20px 40px; }
}

@media (max-width: 560px) {
  .wf-chips { grid-template-columns: 1fr; }
  .wf-h2 { font-size: 26px; }
  .wf-hero__title { font-size: 28px; }

  /* Stacked, with the photograph full width. Beside a hundred pixels of text a
     120px portrait is neither a picture nor a thumbnail. */
  .wf-doctor__row { flex-direction: column; align-items: stretch; }
  .wf-doctor__photo { width: 100%; height: 280px; min-height: 0; object-position: center 20%; }
  .wf-doctor__photo--none { height: 120px; }

  .wf-card, .wf-card--form { padding: 22px; }
  .wf-brand__text { font-size: 15px; }
  .wf-hero__visual svg { width: 240px; height: 230px; }
}

/* ── Patient guides ───────────────────────────────────────────────────── */
/* The "View all guides" link at the bottom of the nav dropdown — set off
   from the guide titles above it, same idea as a menu's footer action. */
.wf-dropdown__all,
.wf-mobile-dropdown__menu .wf-dropdown__all {
  border-top: 1px solid var(--wf-line);
  font-weight: 600;
  color: var(--wf-primary-dark);
}

.wf-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.wf-guide-card {
  display: block;
  background: var(--wf-surface);
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-radius);
  overflow: hidden;
  color: inherit;
}
.wf-guide-card:hover { border-color: var(--wf-line-teal); text-decoration: none; }
.wf-guide-card:hover .wf-guide-card__title { color: var(--wf-primary-dark); }

.wf-guide-card__image {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: top center;
  background: var(--wf-tint);
}

.wf-guide-card__body { padding: 18px 20px 22px; }
.wf-guide-card__title {
  font-family: var(--wf-serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--wf-ink);
  margin: 0 0 6px;
}
.wf-guide-card__subtitle { font-size: 14px; color: var(--wf-ink-faint); margin: 0; }

/* The guide page itself */

.wf-guide { max-width: 760px; margin: 0 auto; padding: 56px 28px 96px; }

.wf-guide__breadcrumb { font-size: 14px; margin: 0 0 18px; }

.wf-guide__hero { text-align: center; margin-bottom: 40px; }
.wf-guide__subtitle { font-size: 18px; color: var(--wf-ink-faint); margin: 10px 0 0; }
.wf-guide__cover {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 28px auto 0;
  border-radius: var(--wf-radius);
}

.wf-guide-pages { display: flex; flex-direction: column; gap: 20px; }
.wf-guide-page { margin: 0; }
.wf-guide-page img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--wf-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .06);
}

.wf-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wf-guide__body .wf-guide-chapter { margin-bottom: 48px; }
.wf-guide__body .wf-guide-chapter:last-child { margin-bottom: 0; }

.wf-guide-chapter__kicker {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--wf-primary-dark);
  margin: 0 0 6px;
}

.wf-guide-chapter__title {
  font-family: var(--wf-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--wf-ink);
  margin: 0 0 14px;
}

.wf-guide__body p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--wf-ink-soft);
  margin: 0 0 16px;
}

.wf-guide-diagram {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px auto;
  border-radius: var(--wf-radius);
}

.wf-guide-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 14.5px;
}
.wf-guide-table th, .wf-guide-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--wf-line);
}
.wf-guide-table th {
  background: var(--wf-primary);
  color: #fff;
  font-weight: 600;
}
.wf-guide-table tbody tr:nth-child(even) { background: var(--wf-tint); }

.wf-callout {
  border-radius: var(--wf-radius);
  padding: 16px 20px;
  margin: 0 0 20px;
}
.wf-callout p { margin: 0 0 8px; color: var(--wf-ink-soft); }
.wf-callout p:last-child { margin-bottom: 0; }
.wf-callout__title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: inherit;
}
.wf-callout--info { background: var(--wf-tint); }
.wf-callout--info .wf-callout__title { color: var(--wf-primary-dark); }
.wf-callout--tip { background: #fdf3e2; }
.wf-callout--tip .wf-callout__title { color: #8a5a12; }
.wf-callout--warning { background: var(--wf-danger-bg); }
.wf-callout--warning .wf-callout__title { color: var(--wf-danger); }

@media (max-width: 640px) {
  .wf-guide { padding: 40px 20px 64px; }
  .wf-guide-chapter__title { font-size: 22px; }
  .wf-guide-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── Doctor's own page (wf-dp-*) ──────────────────────────────────────── */
/* A standalone identity, not CEMH's site chrome — see
   templates/website/doctor_profile.html. Reuses the site's own colour
   tokens (this is still recognisably the same clinic's work) plus one new
   dark band colour for the featured/footer sections. */

.wf-dp-page { background: var(--wf-bg); }

.wf-dp-nav {
  border-bottom: 1px solid var(--wf-line);
  padding: 18px 28px;
}
.wf-dp-nav__inner {
  max-width: var(--wf-wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.wf-dp-nav__links { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
.wf-dp-nav__links a { font-size: 14.5px; color: var(--wf-ink-soft); }
.wf-dp-nav__links a:hover { color: var(--wf-primary-dark); }

.wf-dp-hero {
  max-width: var(--wf-wrap);
  margin: 0 auto;
  padding: 56px 28px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
}

.wf-dp-pillrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 22px; }
.wf-dp-pill {
  display: inline-block;
  background: #f3e3d6;
  color: var(--wf-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 100px;
}
.wf-dp-pillrow__locations { font-size: 13.5px; color: var(--wf-ink-faint); }

.wf-dp-hero__name {
  font-family: var(--wf-serif);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--wf-ink);
  margin: 0 0 16px;
}
.wf-dp-hero__headline {
  font-family: var(--wf-serif);
  font-size: 25px;
  font-weight: 600;
  color: var(--wf-primary-dark);
  line-height: 1.35;
  margin: 0 0 18px;
}
.wf-dp-hero__desc { font-size: 15.5px; line-height: 1.7; color: var(--wf-ink-soft); margin: 0 0 18px; max-width: 560px; }
.wf-dp-hero__creds { font-size: 14px; font-weight: 600; color: var(--wf-ink); margin: 0 0 26px; }
.wf-dp-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.wf-dp-quickpills { display: none; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
.wf-dp-quickpills li {
  list-style: none;
  background: #fff;
  border: 1px solid var(--wf-line);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wf-ink-soft);
}

.wf-dp-visual { position: relative; }
.wf-dp-visual__photo, .wf-dp-visual__photo--none {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center top;
  border-radius: 160px 160px 20px 20px;
  background: var(--wf-tint);
}
.wf-dp-visual__photo--none {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wf-serif); font-size: 56px; font-weight: 700; color: var(--wf-primary);
  margin: 0;
}
.wf-dp-trained {
  position: absolute;
  left: -20px; right: 20px; bottom: -30px;
  background: #fff;
  border-radius: var(--wf-radius);
  box-shadow: 0 14px 30px rgba(22,38,43,.16);
  padding: 18px 20px;
}
.wf-dp-trained__label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wf-accent); margin: 0 0 8px;
}
.wf-dp-trained__body { font-size: 13.5px; line-height: 1.6; color: var(--wf-ink-soft); margin: 0; }

.wf-dp-trainstrip {
  max-width: var(--wf-wrap); margin: 0 auto; padding: 44px 28px 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--wf-line);
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-radius);
  overflow: hidden;
}
.wf-dp-trainstrip__item { background: #fff; padding: 22px 24px; }
.wf-dp-trainstrip__title { font-family: var(--wf-serif); font-weight: 700; font-size: 16.5px; color: var(--wf-ink); margin: 0 0 6px; }
.wf-dp-trainstrip__sub { font-size: 12.5px; color: var(--wf-ink-faint); line-height: 1.5; }

.wf-dp-cats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px;
}
.wf-dp-cats__card { background: #fff; border: 1px solid var(--wf-line); border-radius: var(--wf-radius); padding: 24px; }
.wf-dp-cats__icon {
  width: 40px; height: 40px; border-radius: 10px; background: var(--wf-tint);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
  color: var(--wf-primary); font-size: 18px;
}
.wf-dp-cats__title { font-family: var(--wf-serif); font-weight: 700; font-size: 17.5px; color: var(--wf-ink); margin: 0 0 8px; }
.wf-dp-cats__body { font-size: 13.5px; line-height: 1.6; color: var(--wf-ink-faint); }

.wf-dp-checklist {
  background: var(--wf-deep);
  color: #fff;
  border-radius: 20px;
  padding: 44px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  max-width: var(--wf-wrap);
  margin: 48px auto 0;
}
.wf-dp-checklist__title { font-family: var(--wf-serif); font-size: 26px; font-weight: 700; margin: 0 0 14px; }
.wf-dp-checklist__note { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.68); }
.wf-dp-checklist__grid { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.wf-dp-checklist__grid li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.14);
  font-size: 14.5px; list-style: none;
}
.wf-dp-checklist__grid li::before { content: "\2713"; color: var(--wf-sun); font-weight: 700; }

.wf-dp-about { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.wf-dp-quote {
  background: var(--wf-surface); border-left: 4px solid var(--wf-primary);
  border-radius: 0 var(--wf-radius) var(--wf-radius) 0;
  padding: 22px 26px; font-family: var(--wf-serif); font-style: italic; font-size: 16.5px;
  line-height: 1.6; color: var(--wf-ink); margin-top: 20px;
}
.wf-dp-points { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wf-dp-points__num { font-family: var(--wf-serif); font-size: 24px; font-weight: 700; color: var(--wf-accent); margin: 0 0 6px; }
.wf-dp-points__card { background: #fff; border: 1px solid var(--wf-line); border-radius: var(--wf-radius); padding: 20px; }
.wf-dp-points__title { font-weight: 700; font-size: 15.5px; color: var(--wf-ink); margin: 0 0 6px; }
.wf-dp-points__body { font-size: 13px; line-height: 1.55; color: var(--wf-ink-faint); }

.wf-dp-locations__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.wf-dp-locations__grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 20px; margin-top: 28px; }
.wf-dp-loc-card { background: #fff; border: 1px solid var(--wf-line); border-radius: var(--wf-radius); padding: 24px; }
.wf-dp-loc-card--featured {
  background: var(--wf-deep); border-color: var(--wf-deep); color: #fff;
  grid-row: span 2; display: flex; flex-direction: column;
}
.wf-dp-loc-card--featured .wf-dp-loc-card__area { color: rgba(255,255,255,.7); }
.wf-dp-loc-card__badge {
  display: inline-block; background: #f3e3d6; color: var(--wf-accent);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px; margin-bottom: 14px;
}
.wf-dp-loc-card__name { font-family: var(--wf-serif); font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.wf-dp-loc-card__area { font-size: 13.5px; color: var(--wf-ink-faint); margin: 0 0 14px; }
.wf-dp-loc-card__schedule { font-size: 14px; font-weight: 600; }
.wf-dp-loc-card__address {
  font-size: 13px; color: rgba(255,255,255,.7); margin: 16px 0 0;
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18);
}
.wf-dp-loc-card__actions { display: flex; gap: 10px; margin-top: auto; padding-top: 20px; }

.wf-dp-degrees { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.wf-dp-degree {
  background: #fff; border: 1px solid var(--wf-line); border-radius: 100px;
  padding: 8px 18px; font-size: 13.5px; font-weight: 600; color: var(--wf-ink);
}
.wf-dp-reg { font-size: 13px; color: var(--wf-ink-faint); }

.wf-list { margin: 0; padding: 0; list-style: none; }
.wf-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--wf-line);
  font-size: 15px;
  line-height: 1.6;
  color: var(--wf-ink-soft);
}
.wf-list li:last-child { border-bottom: none; }

.wf-dp-research { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wf-dp-research__card { background: #fff; border: 1px solid var(--wf-line); border-radius: var(--wf-radius); padding: 22px; }
.wf-dp-research__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--wf-primary-dark); margin-bottom: 10px;
}
.wf-dp-research__meta span:last-child { color: var(--wf-ink-faint); font-weight: 600; text-transform: none; letter-spacing: 0; }
.wf-dp-research__title { font-family: var(--wf-serif); font-size: 16px; font-weight: 600; color: var(--wf-ink); line-height: 1.4; margin: 0; }

.wf-dp-foot { background: var(--wf-deep); color: #fff; padding: 36px 28px; }
.wf-dp-foot__inner {
  max-width: var(--wf-wrap); margin: 0 auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.wf-dp-foot__name { font-family: var(--wf-serif); font-size: 18.5px; font-weight: 700; }
.wf-dp-foot__role { font-size: 13.5px; color: rgba(255,255,255,.65); margin-top: 4px; }
.wf-dp-foot__contact { text-align: right; font-size: 14px; }
.wf-dp-foot__contact a { color: var(--wf-sun); }
.wf-dp-foot__fine {
  max-width: var(--wf-wrap); margin: 20px auto 0; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.55);
}

.wf-dp-sticky {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--wf-surface);
  border-top: 1px solid var(--wf-line);
  padding: 12px 16px;
  gap: 10px;
  box-shadow: 0 -6px 20px rgba(22,38,43,.1);
  z-index: 40;
}
.wf-dp-sticky .wf-btn { flex: 1; justify-content: center; }
.wf-dp-sticky .wf-btn--icon { flex: 0 0 auto; width: 48px; padding: 0; }

@media (max-width: 900px) {
  .wf-dp-hero { grid-template-columns: 1fr; }
  .wf-dp-visual { order: -1; max-width: 320px; margin: 0 auto 44px; }
  .wf-dp-trainstrip, .wf-dp-cats, .wf-dp-checklist, .wf-dp-about,
  .wf-dp-points, .wf-dp-locations__grid, .wf-dp-research {
    grid-template-columns: 1fr;
  }
  .wf-dp-checklist__grid { grid-template-columns: 1fr; }
  .wf-dp-loc-card--featured { grid-row: auto; }
  .wf-dp-quickpills { display: flex; }
  /* No name/title in this bar any more (see doctor_profile.html) to fall
     back on once the links wrap — so the links stay, wrapping onto a
     second line, rather than leaving the bar empty. */
  .wf-dp-nav__links { gap: 14px 22px; font-size: 13.5px; }
}

@media (max-width: 640px) {
  .wf-dp-hero__name { font-size: 32px; }
  .wf-dp-hero__headline { font-size: 21px; }
  .wf-dp-sticky { display: flex; }
  .wf-dp-page { padding-bottom: 78px; }
}

/* ── Home page (wf-home-*) ────────────────────────────────────────────── */
/* The 2026 redesign of the public shopfront — see templates/website/home.html.
   Entirely new class names rather than reusing .wf-section/.wf-h2/.wf-btn/
   .wf-eyebrow/.wf-card/.wf-body etc: those are shared with the doctor's own
   page and the patient guides, and this page's palette, spacing and type are
   its own. Functional, non-visual pieces (the "Patient information" dropdown,
   the mobile burger menu, the honeypot, the callback form's fields) are still
   the shared .wf-dropdown/.wf-burger/.wf-hp/.wf-field classes — restyling
   those would ripple into the guide pages for no reason, and their existing
   look is neutral enough to sit inside this design without changes. */

body.wf-home { background: var(--wf-home-bg); color: var(--wf-home-ink); font-family: var(--wf-home-body-font); }
/* :where() keeps this at zero specificity beyond .wf-home itself, so every
   more specific rule below it (a single class like .wf-home-btn--primary
   included) wins outright rather than needing to out-rank a bare `a`. */
.wf-home :where(a) { color: var(--wf-home-primary); }
.wf-home :where(a:hover) { color: var(--wf-home-forest); }

.wf-home-eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wf-home-accent); margin: 0 0 14px;
}
.wf-home-eyebrow--light { color: #a9c9b9; }

.wf-home-h2 {
  font-family: var(--wf-home-heading-font); font-weight: 700; font-size: 40px;
  line-height: 1.15; letter-spacing: -0.02em; color: var(--wf-home-forest); margin: 0;
}
.wf-home-h2--light { color: #fff; }

.wf-home-p { font-size: 17px; line-height: 1.7; color: var(--wf-home-ink-soft); margin: 0 0 20px; }
.wf-home-p:last-child { margin-bottom: 0; }
.wf-home-empty { text-align: center; color: var(--wf-home-ink-muted); }

.wf-home-section { max-width: var(--wf-wrap); margin: 0 auto; padding: 88px 28px; }
.wf-home-section--white { background: #fff; }

.wf-home-textlink {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  font-weight: 600; font-size: 16px; color: var(--wf-home-primary);
  border-bottom: 1.5px solid var(--wf-home-sage); padding-bottom: 4px;
}
.wf-home-textlink:hover { color: var(--wf-home-forest); text-decoration: none; }

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

.wf-home-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px; border-radius: 999px;
  font-family: var(--wf-home-body-font); font-weight: 600; font-size: 15px;
  border: 1.5px solid transparent; cursor: pointer;
}
.wf-home-btn:hover { text-decoration: none; }
.wf-home-btn--primary { background: var(--wf-home-primary); color: #fff; }
.wf-home-btn--primary:hover { background: var(--wf-home-forest); color: #fff; }
.wf-home-btn--ghost { background: transparent; border-color: var(--wf-home-sage); color: var(--wf-home-forest); }
.wf-home-btn--ghost:hover { border-color: var(--wf-home-forest); color: var(--wf-home-forest); }
.wf-home-btn--lg { height: 56px; padding: 0 28px; font-size: 16px; }
.wf-home-btn--sm { height: 44px; padding: 0 20px; font-size: 14px; align-self: flex-start; }
.wf-home-btn--block { display: flex; width: 100%; }

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

.wf-home-nav {
  position: sticky; top: 0; z-index: 50;
  background: #e6e4df;
  border-bottom: 2px solid var(--wf-home-forest);
  box-shadow: 0 4px 14px rgba(23, 63, 58, .08);
}
@supports (backdrop-filter: blur(8px)) {
  .wf-home-nav { background: rgba(230, 228, 223, .92); backdrop-filter: blur(8px); }
}
.wf-home-nav__inner {
  max-width: var(--wf-wrap); margin: 0 auto; padding: 16px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.wf-home-brand { display: flex; align-items: center; gap: 12px; color: inherit; min-width: 0; }
.wf-home-brand:hover { text-decoration: none; }
.wf-home-brand__mark { width: 38px; height: 38px; flex-shrink: 0; color: var(--wf-home-primary); }
.wf-home-brand__text { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.wf-home-brand__name {
  font-family: var(--wf-home-heading-font); font-weight: 800; font-size: 20px;
  letter-spacing: .05em; color: var(--wf-home-forest);
}
.wf-home-brand__sub { font-size: 12px; color: var(--wf-home-ink-muted); }

.wf-home-nav__links { display: flex; align-items: center; gap: 30px; font-size: 15px; font-weight: 500; }
.wf-home-nav__links a { color: #33403b; }
.wf-home-nav__links a:hover { color: var(--wf-home-primary); text-decoration: none; }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.wf-home-hero { padding: 64px 28px 0; }
.wf-home-hero__grid {
  max-width: var(--wf-wrap); margin: 0 auto; padding-bottom: 72px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.wf-home-hero__pill {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  padding: 8px 16px; border-radius: 999px; background: var(--wf-home-mint);
  color: var(--wf-home-primary); font-size: 13px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 24px;
}
.wf-home-hero__pill span[aria-hidden] { width: 6px; height: 6px; border-radius: 50%; background: var(--wf-home-accent); }
.wf-home-hero__title {
  font-family: var(--wf-home-heading-font); font-weight: 700; font-size: 54px;
  line-height: 1.08; letter-spacing: -0.02em; color: var(--wf-home-forest); margin: 0 0 22px;
}
.wf-home-hero__title span { color: var(--wf-home-accent); }
.wf-home-hero__lede { font-size: 18px; line-height: 1.65; color: var(--wf-home-ink-soft); margin: 0 0 30px; max-width: 520px; }
.wf-home-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.wf-home-hero__stats {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--wf-home-border);
  font-size: 14px; font-weight: 500; color: var(--wf-home-ink-muted);
}
.wf-home-hero__stats span[aria-hidden] { color: var(--wf-home-sage); }

.wf-home-hero__visual { position: relative; height: 520px; }
.wf-home-hero__art {
  position: absolute; left: 32px; top: 0; right: 0; bottom: 0; border-radius: 28px;
  overflow: hidden; background: var(--wf-home-mint-strong);
}
.wf-home-hero__art-img { width: 100%; height: 100%; object-fit: cover; }
.wf-home-hero__badge {
  position: absolute; display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 16px; background: #fff;
  box-shadow: 0 12px 32px rgba(23,63,58,.1); font-family: var(--wf-home-heading-font);
  font-weight: 600; font-size: 14px; color: var(--wf-home-forest); white-space: nowrap;
}
.wf-home-hero__badge-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.wf-home-hero__badge--adult { left: 0; top: 48px; }
.wf-home-hero__badge--adult .wf-home-hero__badge-icon { background: var(--wf-home-mint); color: var(--wf-home-primary); }
.wf-home-hero__badge--paed { right: -16px; top: 220px; }
.wf-home-hero__badge--paed .wf-home-hero__badge-icon { background: var(--wf-home-tan); color: var(--wf-home-tan-ink); }
.wf-home-hero__badge--dark { left: 0; bottom: 44px; background: var(--wf-home-forest); color: #fff; box-shadow: 0 12px 32px rgba(23,63,58,.2); }
.wf-home-hero__badge--dark .wf-home-hero__badge-icon { background: var(--wf-home-accent); color: #fff; }

.wf-home-trust {
  max-width: var(--wf-wrap); margin: 0 auto; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff;
  border: 1px solid var(--wf-home-border); border-radius: 20px;
}
.wf-home-trust__item { padding: 30px 28px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--wf-home-border-soft); }
.wf-home-trust__item:last-child { border-right: none; }
.wf-home-trust__item svg { color: var(--wf-home-accent); }
.wf-home-trust__item h3 { margin: 0; font-family: var(--wf-home-heading-font); font-weight: 700; font-size: 17px; color: var(--wf-home-forest); }
.wf-home-trust__item p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--wf-home-ink-muted); }

/* ── About ────────────────────────────────────────────────────────────── */

.wf-home-about__grid {
  max-width: var(--wf-wrap); margin: 0 auto; padding: 112px 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.wf-home-about__cards { display: flex; flex-direction: column; gap: 20px; }
.wf-home-about__card { display: flex; gap: 24px; align-items: flex-start; padding: 36px; border-radius: 24px; }
.wf-home-about__card--adult { background: var(--wf-home-mint); }
.wf-home-about__card--paed { background: var(--wf-home-tan); margin-left: 40px; }
.wf-home-about__card-icon {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
}
.wf-home-about__card--adult .wf-home-about__card-icon { background: var(--wf-home-primary); color: #fff; }
.wf-home-about__card--paed .wf-home-about__card-icon { background: #fff; color: var(--wf-home-tan-ink); }
.wf-home-about__card h3 { margin: 0 0 8px; font-family: var(--wf-home-heading-font); font-weight: 700; font-size: 21px; color: var(--wf-home-forest); }
.wf-home-about__card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--wf-home-ink-soft); }

/* ── Conditions ───────────────────────────────────────────────────────── */

.wf-home-conditions__head {
  max-width: var(--wf-wrap); margin: 0 auto; padding: 0 28px 44px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap;
}
.wf-home-tabs.wf-tabs { justify-content: flex-start; margin: 0; padding: 6px; border-radius: 999px; background: var(--wf-home-track); }
.wf-home-tab.wf-tab {
  border: none; border-radius: 999px; height: 48px; padding: 0 24px;
  font-family: var(--wf-home-body-font); font-weight: 600; font-size: 15px;
  color: var(--wf-home-ink-soft); background: transparent;
}
.wf-home-tab.wf-tab.is-active { background: var(--wf-home-primary); color: #fff; }

.wf-home-panel { max-width: var(--wf-wrap); margin: 0 auto; padding: 0 28px; }
.wf-home-panel + .wf-home-panel { margin-top: 8px; }
.wf-js .wf-home-panel + .wf-home-panel { margin-top: 0; }
.wf-home-conditions__intro { font-size: 17px; line-height: 1.6; color: var(--wf-home-ink-muted); max-width: 720px; margin: 0 0 40px; }

.wf-home-conditions__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
.wf-home-condition { display: flex; gap: 18px; align-items: flex-start; padding: 28px 0; border-top: 1px solid var(--wf-home-border); }
.wf-home-condition__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.wf-home-panel--adult .wf-home-condition__icon { background: var(--wf-home-mint); color: var(--wf-home-primary); }
.wf-home-panel--paed .wf-home-condition__icon { background: var(--wf-home-tan); color: var(--wf-home-tan-ink); }
.wf-home-condition h4 { margin: 0 0 6px; font-family: var(--wf-home-heading-font); font-weight: 700; font-size: 17px; color: var(--wf-home-forest); }
.wf-home-condition p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--wf-home-ink-muted); }

.wf-home-conditions__cta {
  max-width: var(--wf-wrap); margin: 44px auto 0; padding: 26px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  border-radius: 20px; background: var(--wf-home-track);
}
.wf-home-conditions__cta p { margin: 0; font-size: 15.5px; color: #33403b; }

/* ── Why us ───────────────────────────────────────────────────────────── */

.wf-home-why { background: var(--wf-home-forest); color: #fff; padding: 100px 28px; }
.wf-home-why__head {
  max-width: var(--wf-wrap); margin: 0 auto 56px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 64px; align-items: end;
}
.wf-home-why__lede { margin: 0; font-size: 17px; line-height: 1.7; color: #cfe0d7; }
.wf-home-why__grid { max-width: var(--wf-wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.wf-home-why__item { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid #3c6a62; }
.wf-home-why__item svg { color: #cfe3d8; }
.wf-home-why__num { font-family: var(--wf-home-heading-font); font-weight: 600; font-size: 14px; color: #a9c9b9; }
.wf-home-why__item h3 { margin: 0; font-family: var(--wf-home-heading-font); font-weight: 700; font-size: 20px; color: #fff; }
.wf-home-why__item p { margin: 0; font-size: 15px; line-height: 1.6; color: #cfe0d7; }

/* ── Doctors ──────────────────────────────────────────────────────────── */

.wf-home-doctors__head {
  max-width: var(--wf-wrap); margin: 0 auto; padding: 0 28px 44px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap;
}
.wf-home-doctors__lede { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--wf-home-ink-muted); max-width: 420px; }
.wf-home-doctors__grid { max-width: var(--wf-wrap); margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }

.wf-home-doctor {
  display: flex; gap: 32px; padding: 32px;
  border-radius: 24px; background: #fff; border: 1px solid var(--wf-home-border);
}
.wf-home-doctor__photo {
  flex-shrink: 0; width: 180px; height: 230px; border-radius: 18px;
  object-fit: cover; object-position: center top;
}
.wf-home-doctor__photo--none {
  display: flex; align-items: center; justify-content: center; margin: 0;
  font-family: var(--wf-home-heading-font); font-weight: 700; font-size: 40px;
}
.wf-home-doctor--adult .wf-home-doctor__photo { background: var(--wf-home-mint); color: var(--wf-home-primary); }
.wf-home-doctor--paed .wf-home-doctor__photo { background: var(--wf-home-tan); color: var(--wf-home-tan-ink); }

.wf-home-doctor__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.wf-home-doctor__badge {
  padding: 6px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.wf-home-doctor--adult .wf-home-doctor__badge { background: var(--wf-home-mint); color: var(--wf-home-primary); }
.wf-home-doctor--paed .wf-home-doctor__badge { background: var(--wf-home-tan); color: var(--wf-home-tan-ink-dk); }
.wf-home-doctor__name { margin: 0; font-family: var(--wf-home-heading-font); font-weight: 700; font-size: 25px; }
.wf-home-doctor__name a { color: var(--wf-home-forest); }
.wf-home-doctor__name a:hover { color: var(--wf-home-primary); text-decoration: underline; }
.wf-home-doctor__role { font-size: 14.5px; font-weight: 600; color: var(--wf-home-accent); }
.wf-home-doctor__quals { font-size: 13.5px; color: var(--wf-home-ink-muted); }
.wf-home-doctor__bio { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--wf-home-ink-soft); }
.wf-home-doctor__training { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.5; color: var(--wf-home-ink-soft); }

.wf-home-doctor__contact {
  display: flex; flex-direction: column; gap: 5px; padding-top: 12px;
  border-top: 1px solid var(--wf-home-border-soft); font-size: 13.5px; width: 100%;
}
.wf-home-doctor__contact a {
  display: inline-flex; align-items: center; gap: 8px;
}
.wf-home-doctor__contact a svg { flex-shrink: 0; opacity: .8; }
.wf-home-doctor__contact a:first-child { color: var(--wf-home-primary); font-weight: 600; }
.wf-home-doctor__contact a:not(:first-child) { color: var(--wf-home-ink-soft); }

/* ── Plan your visit ──────────────────────────────────────────────────── */

.wf-home-visit { padding: 0 28px 88px; }
.wf-home-visit__panel { max-width: var(--wf-wrap); margin: 0 auto; padding: 64px; border-radius: 28px; background: var(--wf-home-mint); }
.wf-home-visit__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
.wf-home-visit__step { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 18px; background: #fff; }
.wf-home-visit__num {
  width: 40px; height: 40px; border-radius: 50%; background: var(--wf-home-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wf-home-heading-font); font-weight: 700;
}
.wf-home-visit__step h3 { margin: 0; font-family: var(--wf-home-heading-font); font-weight: 700; font-size: 18px; color: var(--wf-home-forest); }
.wf-home-visit__step p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--wf-home-ink-soft); }

/* ── FAQs ─────────────────────────────────────────────────────────────── */

.wf-home-faq { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; }
.wf-home-faq__intro { align-self: start; }
.wf-home-faq__list { display: flex; flex-direction: column; }

.wf-home-faq-item { border-top: 1px solid var(--wf-home-border); }
.wf-home-faq-item summary {
  padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  cursor: pointer; list-style: none; font-family: var(--wf-home-heading-font);
  font-weight: 700; font-size: 18px; color: var(--wf-home-forest);
}
.wf-home-faq-item summary::-webkit-details-marker { display: none; }
.wf-home-faq-item__icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--wf-home-track);
  display: flex; align-items: center; justify-content: center; color: var(--wf-home-primary);
}
.wf-home-faq-item__icon::before { content: "+"; font-size: 19px; line-height: 1; }
.wf-home-faq-item[open] .wf-home-faq-item__icon::before { content: "\2212"; }
.wf-home-faq-item p { margin: 0 0 24px; max-width: 680px; font-size: 15.5px; line-height: 1.7; color: var(--wf-home-ink-soft); }

/* ── Contact ──────────────────────────────────────────────────────────── */

.wf-home-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.wf-home-contact__meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--wf-home-border);
}
.wf-home-contact__meta > div { display: flex; flex-direction: column; gap: 6px; }
.wf-home-contact__meta-label { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--wf-home-ink-muted); }
.wf-home-contact__meta a { font-weight: 600; }

.wf-home-map {
  position: relative; display: block; min-height: 320px; height: 100%;
  align-self: stretch; border-radius: 22px;
  overflow: hidden; background: var(--wf-home-mint-strong); color: inherit;
}
.wf-home-map:hover { text-decoration: none; }
.wf-home-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.wf-home-map__card {
  position: absolute; left: 20px; top: 20px; display: flex; flex-direction: column; gap: 2px;
  padding: 14px 18px; border-radius: 14px; background: #fff;
  box-shadow: 0 12px 32px rgba(23,63,58,.14);
}
.wf-home-map__name { font-family: var(--wf-home-heading-font); font-weight: 700; font-size: 14.5px; color: var(--wf-home-forest); }
.wf-home-map__sub { font-size: 12.5px; color: var(--wf-home-ink-muted); }
.wf-home-map__cta {
  position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center;
  height: 42px; padding: 0 20px; border-radius: 999px; background: #fff; color: var(--wf-home-forest);
  font-weight: 600; font-size: 13.5px; box-shadow: 0 8px 20px rgba(23,63,58,.12);
}
.wf-home-map:hover .wf-home-map__cta { background: var(--wf-home-primary); color: #fff; }

/* ── Footer ───────────────────────────────────────────────────────────── */

.wf-home-footer { background: var(--wf-home-footer-bg); color: #cfe0d7; padding: 64px 28px 32px; font-size: 15px; }
.wf-home-footer__grid { max-width: var(--wf-wrap); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.wf-home-footer__brand p { margin: 12px 0 0; max-width: 420px; line-height: 1.6; }
.wf-home-footer__mark { display: flex; align-items: center; gap: 12px; }
.wf-home-footer__logo { width: 36px; height: 36px; color: #fff; }
.wf-home-footer__mark span { font-family: var(--wf-home-heading-font); font-weight: 800; font-size: 20px; letter-spacing: .05em; color: #fff; }
.wf-home-footer__col { display: flex; flex-direction: column; gap: 10px; }
.wf-home-footer__col > span:first-child { font-weight: 600; color: #fff; margin-bottom: 2px; }
.wf-home-footer__col a { color: #cfe0d7; }
.wf-home-footer__col a:hover { color: #fff; }
.wf-home-footer__bottom {
  max-width: var(--wf-wrap); margin: 44px auto 0; padding-top: 24px; border-top: 1px solid #2a4c47;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: 12.5px; color: #a9c1b4;
}
.wf-home-footer__staff { color: #a9c1b4; text-decoration: underline; }
.wf-home-footer__staff:hover { color: #fff; }

/* ── Home page: narrow screens ────────────────────────────────────────── */

@media (max-width: 900px) {
  .wf-home-nav__links { display: none; }
  .wf-home-nav .wf-mobile-nav { display: flex; }
  .wf-home-nav .wf-mobile-nav[hidden] { display: none; }

  .wf-home-hero__grid { grid-template-columns: 1fr; }
  .wf-home-hero__visual { order: -1; height: 380px; margin-bottom: 12px; }
  .wf-home-hero__title { font-size: 38px; }
  .wf-home-trust { grid-template-columns: repeat(2, 1fr); }
  .wf-home-trust__item:nth-child(2) { border-right: none; }

  .wf-home-about__grid { grid-template-columns: 1fr; gap: 40px; padding: 72px 20px; }
  .wf-home-about__card--paed { margin-left: 0; }

  .wf-home-conditions__grid { grid-template-columns: 1fr; }
  .wf-home-why__head { grid-template-columns: 1fr; gap: 24px; }
  .wf-home-why__grid { grid-template-columns: repeat(2, 1fr); }

  .wf-home-doctors__grid { grid-template-columns: 1fr; }
  .wf-home-doctor { flex-direction: column; }
  .wf-home-doctor__photo { width: 100%; height: 220px; }

  .wf-home-visit__panel { padding: 40px 28px; }
  .wf-home-visit__grid { grid-template-columns: 1fr; }

  .wf-home-faq { grid-template-columns: 1fr; gap: 28px; }
  .wf-home-contact { grid-template-columns: 1fr; }
  .wf-home-footer__grid { grid-template-columns: 1fr; gap: 32px; }

  .wf-home-nav__inner { padding: 14px 20px; }
  .wf-home-section, .wf-home-conditions__head, .wf-home-panel,
  .wf-home-doctors__head, .wf-home-doctors__grid { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 560px) {
  .wf-home-hero__title { font-size: 30px; }
  .wf-home-h2 { font-size: 30px; }

  /* The three floating badges are positioned for the wide desktop visual
     they were drawn for; at phone width the art itself is too short for
     three fixed pixel offsets to avoid overlapping. Keeping only the one
     that reads as the headline claim is clearer than a cramped stack. */
  .wf-home-hero__visual { height: 260px; }
  .wf-home-hero__badge--adult, .wf-home-hero__badge--paed { display: none; }
  .wf-home-hero__badge--dark { left: 16px; right: 16px; bottom: 20px; justify-content: center; }
}

/* ── Motion ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wf-orbit, .wf-orbit--rev { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}