/*
 * 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;
}

* { 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__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; }
}

/* ── 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;
  }
}