/* ==========================================================================
   Dr. Manchikalapudi Tirumala Babu — Consultant Psychiatrist, Guntur

   Warm editorial. Newsreader for display, Inter for text, ivory and sand
   surfaces instead of clinical blue-grey, brass hairlines, arched portrait.

    1. Fonts
    2. Tokens
    3. Reset & base
    4. Layout helpers
    5. Buttons & pills
    6. Header / navigation
    7. Hero
    8. About
    9. Services
   10. Conditions
   11. Why seek care
   12. Process timeline
   13. CTA band
   14. FAQ
   15. Contact
   16. Footer
   17. Floating actions
   18. Motion & reduced motion
   19. Print
   ========================================================================== */

/* ---------- 1. Fonts ----------------------------------------------------- */
/* Self-hosted and subset to the characters this site uses — see
   tools/build_fonts.py. No third-party request, no tracking, works offline. */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-display.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-text.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens ---------------------------------------------------- */

:root {
  /* Blue-and-white premium medical palette */
  --navy-900: #0f2340;
  --navy-800: #18365b;
  --navy-700: #234d7c;
  --navy-600: #2d5f9d;
  --navy-500: #4d7bb0;

  /* Primary brand accent: clean blue */
  --teal-800: #0a4d97;
  --teal-700: #0c63c5;
  --teal-600: #1477dd;
  --teal-500: #3e93f5;
  --teal-100: #e7f1ff;
  --teal-050: #f3f9ff;

  /* Secondary supportive blue tones */
  --clay-700: #0d4a8c;
  --clay-600: #1364bd;
  /* White text on this sat at 4.43:1 — just under WCAG AA for body-size
     text, which the "Book on WhatsApp" button uses. Two shades darker and
     visually the same blue, at 4.88:1. */
  --clay-500: #2472c7;
  --clay-050: #edf5ff;

  /* Soft cool gray accents */
  --brass-600: #7d8ea5;
  --brass-400: #b9c9d8;
  --brass-300: #dfeaf7;
  --brass-200: #edf3fb;

  /* Crisp white and cool neutrals */
  --surface: #ffffff;
  --ivory: #f5f9ff;
  --sand: #edf4ff;
  --sand-deep: #dfeaf9;

  --ink: #14263f;
  --ink-soft: #355172;
  --muted: #576d87;
  --line: #dfeaf8;
  --line-cool: #cdddf5;
  --line-soft: #f7faff;

  /* Type */
  --font-display: "Newsreader", "Georgia", serif;
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.78rem;
  --fs-sm: 0.885rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.04rem, 1rem + 0.22vw, 1.14rem);
  --fs-lg: clamp(1.22rem, 1.12rem + 0.5vw, 1.45rem);
  --fs-xl: clamp(1.45rem, 1.28rem + 0.8vw, 1.9rem);
  --fs-2xl: clamp(1.8rem, 1.48rem + 1.4vw, 2.7rem);
  --fs-3xl: clamp(2.15rem, 1.6rem + 2.6vw, 3.5rem);

  /* Space */
  --pad-section: clamp(3rem, 2rem + 4vw, 5.5rem);
  --shell: 1200px;
  --gutter: clamp(1rem, 0.55rem + 2vw, 2.25rem);

  /* Shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 999px;
  /* A slightly squarer arch for a modern look */
  --arch: 50% 50% var(--r-lg) var(--r-lg) / 20% 20% 3% 3%;

  /* Crisp, airy shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 6px -1px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 10px 15px -3px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 18px 36px -18px rgba(20, 119, 221, 0.18), 0 12px 20px rgba(20, 60, 116, 0.08);

  --ring: 0 0 0 3px rgba(20, 119, 221, 0.18);
}

/* ---------- 3. Reset & base ---------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.68;
  color: var(--ink-soft);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.55em;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy-800);
  line-height: 1.16;
  letter-spacing: -0.015em;
  overflow-wrap: normal;
  hyphens: none;
}

h1 {
  font-size: var(--fs-3xl);
  line-height: 1.07;
  letter-spacing: -0.016em;
  text-wrap: balance;
}

h2 {
  font-size: var(--fs-2xl);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h3 {
  font-size: var(--fs-lg);
}

h4 {
  font-size: var(--fs-md);
}

p {
  margin: 0 0 1.15em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--teal-700);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--teal-600);
}

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

ul,
ol {
  margin: 0 0 1.15em;
  padding-left: 1.2em;
}

li + li {
  margin-top: 0.35em;
}

strong {
  color: var(--navy-800);
  font-weight: 600;
}

::selection {
  background: var(--teal-100);
  color: var(--navy-900);
}

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

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 200;
  background: var(--navy-800);
  color: #fff;
  padding: 0.7rem 1.25rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: transform 0.18s ease;
}

.skip-link:focus {
  transform: translate(-50%, 0);
  color: #fff;
}

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

/* ---------- 4. Layout helpers -------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--pad-section);
  position: relative;
}

.section--alt {
  background: var(--ivory);
}

.section--tint {
  background: linear-gradient(180deg, var(--sand) 0%, var(--ivory) 100%);
}

/* A hairline that fades out at both ends — reads as craft, not as a border. */
.section--alt::before,
.section--tint::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--sand-deep) 18%,
    var(--sand-deep) 82%,
    transparent
  );
}

.section__head {
  max-width: 60ch;
  margin-bottom: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: 1rem;
}

.eyebrow::before,
.section__head--center .eyebrow::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--brass-400);
  flex: none;
}

.section__head--center .eyebrow::before {
  content: "";
}

.lede {
  font-size: var(--fs-md);
  color: var(--muted);
  max-width: 58ch;
}

.section__head--center .lede {
  margin-inline: auto;
}

/* ---------- 5. Buttons & pills ------------------------------------------- */

.btn {
  --btn-bg: var(--navy-800);
  --btn-fg: #fff;
  --btn-bd: var(--navy-800);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.85rem 1.75rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--btn-fg);
}

.btn:active {
  transform: translateY(0);
}

.btn .icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn--primary {
  /* Crisp solid color for modern aesthetic */
  background: var(--navy-800);
}

.btn--primary:hover {
  --btn-bg: var(--navy-700);
  --btn-bd: var(--navy-700);
  background: var(--navy-700);
}

.btn--accent {
  --btn-bg: var(--clay-500);
  --btn-bd: var(--clay-500);
  background: var(--clay-500);
}

.btn--accent:hover {
  --btn-bg: var(--clay-600);
  --btn-bd: var(--clay-600);
  background: var(--clay-600);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy-800);
  --btn-bd: var(--sand-deep);
  box-shadow: none;
}

.btn--ghost:hover {
  --btn-bg: var(--surface);
  --btn-bd: var(--brass-200);
}

.btn--onnavy {
  --btn-bg: #fff;
  --btn-fg: var(--navy-800);
  --btn-bd: #fff;
}

.btn--onnavy:hover {
  --btn-bg: var(--sand);
  --btn-bd: var(--sand);
  --btn-fg: var(--navy-900);
}

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.42);
  box-shadow: none;
}

.btn--outline-light:hover {
  --btn-bg: rgba(255, 255, 255, 0.1);
  --btn-bd: rgba(255, 255, 255, 0.85);
  --btn-fg: #fff;
}

.btn--sm {
  min-height: 44px;
  padding: 0.55rem 1.2rem;
  font-size: var(--fs-xs);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 6. Header / navigation --------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.28), transparent 18%),
    radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.12), transparent 22%),
    linear-gradient(90deg, #0d2d4d 0%, #123d69 28%, #214f7c 58%, #0f2f4b 100%);
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 26px rgba(8, 20, 36, 0.2);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

@supports (backdrop-filter: blur(8px)) {
  .site-header {
    backdrop-filter: blur(14px) saturate(1.4);
    background:
      radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.28), transparent 18%),
      radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.12), transparent 22%),
      linear-gradient(90deg, rgba(13, 45, 77, 0.95) 0%, rgba(18, 61, 105, 0.92) 28%, rgba(33, 79, 124, 0.93) 58%, rgba(15, 47, 75, 0.94) 100%);
  }
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(16, 42, 68, 0.02), 0 8px 24px rgba(16, 42, 68, 0.05);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 78px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  margin-right: auto;
  color: inherit;
  /* Never shrink. With nowrap text inside, a shrinkable brand does not get
     smaller — it overflows its box and slides under the first nav link. */
  flex: none;
}

.brand__mark {
  width: 52px;
  height: 52px;
  flex: none;
  object-fit: contain;
  padding: 0.38rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 0 0 1px rgba(19, 37, 45, 0.08), 0 4px 12px rgba(10, 36, 42, 0.14);
}

.brand__name {
  white-space: nowrap;
}

/* On phones the header holds only the lockup and the menu button, so the
   clinic name is allowed to take two lines and the brand may shrink again —
   nowrap at 390px would push the page 13px wider than the screen. */
@media (max-width: 1149px) {
  .brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.7rem;
  }
  .brand__text {
    min-width: 0;
    display: block;
    flex: 1 1 auto;
  }
  .brand__name {
    white-space: normal;
    font-size: clamp(0.9rem, 0.7rem + 1vw, 1.15rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
  .brand__mark {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
  }
}

@media (max-width: 639px) {
  .nav {
    min-height: 66px;
    gap: 0.55rem;
  }
  .brand {
    gap: 0.55rem;
    max-width: calc(100% - 64px);
  }
  .brand__mark {
    width: 42px;
    height: 42px;
  }
  .brand__name {
    font-size: 0.96rem;
    line-height: 1.08;
  }
  .nav__toggle {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
}

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, 0.9rem + 0.4vw, 1.24rem);
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.008em;
}

.brand__tagline {
  display: none;
  font-size: 0.575rem;
  letter-spacing: 0.115em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  line-height: 1.5;
  margin-top: 3px;
  white-space: nowrap;
}

/* The strapline is 57 characters, and it must stay on one line or the header
   grows a second row. It only earns its place once there is room for it beside
   the nav; below 1260px the clinic name carries the header on its own. */
/* The strapline earns its place only once there is room for it beside the
   nav; below this the clinic name carries the header on its own. */
@media (min-width: 1260px) {
  .brand__tagline {
    display: block;
  }
}

.nav__list {
  display: none;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.1rem;
}

/* The global `li + li { margin-top }` rule is for prose lists. Left alone it
   pushes every nav item except the first down by 0.35em, so "Home" floats
   above the rest of the row. */
.nav__list li {
  margin: 0;
}

.nav__list a {
  position: relative;
  display: block;
  white-space: nowrap;
  padding: 0.55rem 0.72rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.18s ease;
}

.nav__list a::after {
  content: "";
  position: absolute;
  left: 0.72rem;
  right: 0.72rem;
  bottom: 0.3rem;
  height: 2px;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav__list a:hover {
  color: #ffffff;
}

.nav__list a:hover::after,
.nav__list a[aria-current="true"]::after {
  transform: scaleX(1);
}

.nav__list a[aria-current="true"] {
  color: #ffffff;
  font-weight: 700;
}

.nav__cta {
  display: none;
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--navy-800);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
}

.nav__toggle .icon-close {
  display: none;
}

.nav__toggle[aria-expanded="true"] .icon-close {
  display: block;
}

.nav__toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.nav__panel {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: 1rem 1.6rem;
  box-shadow: var(--shadow-md);
}

.nav__panel.is-open {
  display: block;
}

.nav__panel ul {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
}

.nav__panel li {
  margin: 0;
  border-bottom: 1px solid var(--line-soft);
}

.nav__panel li:last-child {
  border-bottom: 0;
}

.nav__panel a {
  display: block;
  padding: 0.95rem 0.25rem;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--navy-800);
  text-decoration: none;
}

.nav__panel a:hover {
  color: var(--teal-700);
}

.nav__panel .btn {
  width: 100%;
}

@media (min-width: 1150px) {
  .nav__list,
  .nav__cta {
    display: flex;
  }
  .nav__toggle {
    display: none;
  }
  .nav__panel {
    display: none !important;
  }
  .nav__cta {
    margin-left: 0.9rem;
  }
}

/* ---------- 7. Hero ------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ivory) 0%, var(--sand) 100%);
  padding-block: clamp(0.9rem, 0.7rem + 1vw, 1.6rem) clamp(1.2rem, 0.9rem + 1.7vw, 2.1rem);
}

/* A large, very soft arch echoing the portrait frame. */
.hero::before {
  content: "";
  position: absolute;
  right: -8%;
  top: -12%;
  width: 46vw;
  max-width: 620px;
  aspect-ratio: 3 / 4;
  border-radius: var(--arch);
  background: radial-gradient(
    115% 75% at 50% 25%,
    rgba(23, 149, 163, 0.055),
    rgba(23, 149, 163, 0) 62%
  );
  filter: blur(18px);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  left: -14%;
  bottom: -32%;
  width: 40vw;
  max-width: 520px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 45% 45%,
    rgba(176, 138, 69, 0.1),
    rgba(176, 138, 69, 0) 66%
  );
  pointer-events: none;
}

.hero > .shell {
  position: relative;
}

.hero__grid {
  display: grid;
  gap: clamp(0.8rem, 0.4rem + 1vw, 1.3rem);
  align-items: center;
}

.hero__label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.38rem 1rem 0.38rem 0.42rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--brass-200);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--teal-800);
  margin-bottom: 0.9rem;
  box-shadow: var(--shadow-xs);
}

.hero__label .dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--teal-050);
  display: grid;
  place-items: center;
  color: var(--teal-600);
  flex: none;
}

.hero__label .icon {
  width: 14px;
  height: 14px;
}

.hero h1 {
  max-width: 15ch;
  margin-bottom: 0.7rem;
  color: var(--navy-900);
}

.hero__line {
  display: block;
  font-size: clamp(3rem, 2.2rem + 2.7vw, 6rem);
  line-height: 1.04;
  letter-spacing: -0.055em;
  font-weight: 700;
}

.hero__line--emphasis {
  color: var(--navy-800);
}

.hero__line--highlight {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--teal-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.9rem + 0.18vw, 1.08rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 40ch;
  margin-bottom: 1rem;
}

.hero__doctor {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.95rem 0.7rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
  margin-bottom: 0.9rem;
  max-width: 27rem;
}

.hero__doctor .avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  flex: none;
  box-shadow: 0 0 0 1px var(--line), 0 0 0 4px var(--surface);
}

.hero__doctor .name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.07rem;
  font-weight: 600;
  color: var(--navy-900);
  line-height: 1.3;
}

.hero__doctor .quals {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* The Instagram link at the end of the name chip. margin-left:auto pins it to
   the right of the pill however long the name runs. 44px square, because it is
   a tap target on a phone. */
.hero__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: 50%;
  color: var(--teal-700);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.hero__social .icon {
  width: 22px;
  height: 22px;
}

.hero__social:hover,
.hero__social:focus-visible {
  background: var(--teal-100);
  color: var(--teal-800);
  transform: translateY(-1px);
}

/* -- the portrait cutout -- */

.hero__art {
  position: relative;
  justify-self: center;
  width: min(100%, 410px);
  padding: 0;
}

.hero__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: block;
}

.hero__badge {
  position: absolute;
  left: -0.25rem;
  bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.15rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy-800);
  max-width: 15.5rem;
  line-height: 1.45;
}

.hero__badge .icon {
  width: 21px;
  height: 21px;
  color: var(--teal-600);
  flex: none;
}

/* -- trust row -- */

.trust {
  display: grid;
  gap: 1rem;
  margin-top: clamp(1.8rem, 1.2rem + 1.6vw, 2.5rem);
  padding-top: clamp(1.2rem, 0.8rem + 1.4vw, 1.7rem);
  border-top: 1px solid var(--sand-deep);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.trust__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: var(--fs-sm);
  margin: 0;
}

.trust__item .icon {
  width: 24px;
  height: 24px;
  color: var(--clay-600);
  flex: none;
  margin-top: 1px;
}

.trust__item b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.04rem;
  color: var(--navy-800);
  font-weight: 600;
  margin-bottom: 1px;
}

.trust__item span {
  color: var(--muted);
}

@media (min-width: 940px) {
  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .hero__art {
    justify-self: end;
  }
}

/* ---------- 8. About ----------------------------------------------------- */

.about__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 3.5vw, 4rem);
  align-items: start;
}

.about__media {
  position: relative;
  max-width: 430px;
  width: 100%;
  margin-inline: auto;
}

.about__media picture {
  display: block;
  position: relative;
}

/* Offset brass frame — the About echo of the hero's arch. */
.about__media picture::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--brass-200);
  border-radius: var(--r-lg);
  transform: translate(13px, 13px);
  pointer-events: none;
}

.about__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 16%;
  border-radius: var(--r-lg);
  background: var(--sand);
  box-shadow: var(--shadow-md);
}

.about__quals {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.about__quals li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.3rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--navy-800);
  margin: 0;
  border-bottom: 1px solid var(--line-soft);
}

.about__quals li:last-child {
  border-bottom: 0;
}

.about__quals .icon {
  width: 20px;
  height: 20px;
  color: var(--teal-600);
  flex: none;
}

.about__quals small {
  display: block;
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.45;
  margin-top: 1px;
}

.note {
  margin-top: 1.5rem;
  padding: 1rem 1.3rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass-400);
  background: var(--ivory);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.section--alt .note,
.section--tint .note {
  background: var(--surface);
}

.media-card {
  margin-top: 1.5rem;
  padding: 1.25rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid;
  gap: 1rem;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-xs);
}

.media-card__row {
  display: flex;
  gap: 0.8rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.media-card__row .icon {
  width: 19px;
  height: 19px;
  color: var(--teal-600);
  flex: none;
  margin-top: 3px;
}

.media-card__row b {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--navy-800);
  font-weight: 600;
}

.media-card .btn {
  width: 100%;
}

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: 0.82fr 1.18fr;
  }
  .about__media {
    margin-inline: 0;
    position: sticky;
    top: 110px;
  }
}

/* ---------- 9. Services -------------------------------------------------- */

.cards {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.card {
  position: relative;
  padding: 1.85rem 1.7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.4s ease, box-shadow 0.4s ease,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover {
  border-color: var(--teal-500);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--teal-050);
  color: var(--teal-700);
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.card:hover .card__icon {
  background: var(--teal-600);
  color: #fff;
  transform: scale(1.05);
}

.card__icon .icon {
  width: 25px;
  height: 25px;
}

.card h3 {
  margin-bottom: 0.1rem;
  font-size: 1.22rem;
}

.card p {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
}

/* ---------- 10. Conditions ----------------------------------------------- */

.conditions {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.conditions li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin: 0;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.conditions li:hover {
  border-color: var(--brass-200);
  box-shadow: var(--shadow-sm);
}

.conditions .icon {
  width: 19px;
  height: 19px;
  color: var(--teal-600);
  flex: none;
  margin-top: 4px;
}

.conditions b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--navy-800);
  font-weight: 600;
  line-height: 1.32;
}

.callout {
  margin-top: 2rem;
  padding: 1.35rem 1.55rem;
  border: 1px solid var(--brass-200);
  background: var(--clay-050);
  border-radius: var(--r-md);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.callout .icon {
  width: 23px;
  height: 23px;
  color: var(--clay-600);
  flex: none;
  margin-top: 2px;
}

.callout p {
  font-size: var(--fs-sm);
  color: #6a4018;
  margin: 0;
}

.callout strong {
  color: var(--clay-700);
}

.callout a {
  color: var(--clay-700);
  font-weight: 600;
}

/* ---------- 11. Why seek care -------------------------------------------- */

.pillars {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

.pillar {
  position: relative;
  padding: 2rem 1.65rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.pillar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal-500), var(--clay-500));
}

.pillar .icon {
  width: 30px;
  height: 30px;
  color: var(--teal-600);
  margin-bottom: 1rem;
}

.pillar h3 {
  font-size: 1.24rem;
  margin-bottom: 0.4rem;
}

.pillar p {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
}

/* ---------- 12. Process timeline ----------------------------------------- */

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  counter-reset: step;
}

.step {
  position: relative;
  margin: 0;
  padding: 0 0 2.25rem 3.9rem;
}

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--brass-200);
  color: var(--brass-600);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  z-index: 1;
  box-shadow: var(--shadow-xs);
}

.step::after {
  content: "";
  position: absolute;
  left: 23.5px;
  top: 48px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--brass-200), var(--line));
}

.step:last-child {
  padding-bottom: 0;
}

.step:last-child::after {
  display: none;
}

.step h3 {
  font-size: 1.24rem;
  margin-bottom: 0.35rem;
  padding-top: 0.75rem;
}

.step p {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
}

@media (min-width: 880px) {
  .steps {
    /* auto-fit rather than a fixed four, because the diagnosis section on a
       condition page can have five steps and a fixed grid leaves the fifth
       stranded alone on a second row. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.75rem;
  }
  .step {
    padding: 4.75rem 0 0;
  }
  .step::before {
    top: 0;
  }
  .step::after {
    left: 48px;
    right: -1.75rem;
    top: 23.5px;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--brass-200), var(--line));
  }
  .step h3 {
    padding-top: 0;
  }
}

/* ---------- 13. CTA band ------------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  background-image: linear-gradient(155deg, var(--navy-800) 0%, var(--navy-900) 70%);
  color: rgba(255, 255, 255, 0.78);
  padding-block: clamp(3.5rem, 2rem + 4.5vw, 5.75rem);
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: -45% -12% auto auto;
  width: 44vw;
  max-width: 520px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(23, 149, 163, 0.3),
    rgba(23, 149, 163, 0) 70%
  );
  pointer-events: none;
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: auto auto -50% -10%;
  width: 36vw;
  max-width: 430px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(176, 138, 69, 0.22),
    rgba(176, 138, 69, 0) 70%
  );
  pointer-events: none;
}

.cta-band__inner {
  position: relative;
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}

.cta-band h1,
.cta-band h2 {
  color: #fff;
  margin-bottom: 0.85rem;
}

.cta-band p {
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.26rem);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.cta-band .btn-row {
  justify-content: center;
}

.cta-band .eyebrow {
  color: var(--teal-100);
}

.cta-band .eyebrow::before,
.cta-band .eyebrow::after {
  background: var(--brass-400);
}

/* ---------- 14. FAQ ------------------------------------------------------ */

.faq {
  max-width: 52rem;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
  transition: background-color 0.2s ease;
}

.faq details[open] {
  background: linear-gradient(180deg, var(--ivory), transparent 70%);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.4rem 0.5rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--navy-800);
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.28rem);
  line-height: 1.4;
  list-style: none;
  transition: color 0.2s ease;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* A plus that rotates into a cross. Two 1px bars drawn as background layers,
   so there is no extra element and it inherits the summary's colour. */
.faq summary::after {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border-radius: 50%;
  border: 1px solid var(--line);
  background-color: var(--surface);
  background-image: linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 12px 1.5px, 1.5px 12px;
  background-position: center, center;
  background-repeat: no-repeat;
  color: var(--teal-600);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.2s ease, background-color 0.2s ease;
}

.faq summary:hover::after {
  border-color: var(--brass-200);
  background-color: var(--ivory);
}

.faq details[open] summary::after {
  transform: rotate(135deg);
  border-color: var(--brass-200);
}

.faq summary:hover {
  color: var(--teal-800);
}

.faq__answer {
  padding: 0 3rem 1.7rem 0.5rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: 62ch;
}

/* ---------- 15. Contact -------------------------------------------------- */

.contact__grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
  align-items: start;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 1.1rem + 1.7vw, 2.4rem);
  box-shadow: var(--shadow-sm);
}

.panel > h3 {
  font-size: 1.4rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.35rem;
}

.info-list li {
  display: flex;
  gap: 1rem;
  margin: 0;
}

.info-list .icon {
  width: 21px;
  height: 21px;
  color: var(--teal-600);
  flex: none;
  margin-top: 4px;
}

.info-list b {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.info-list .value {
  font-family: var(--font-display);
  font-size: 1.06rem;
  color: var(--navy-800);
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
}

.info-list .value a {
  color: var(--navy-800);
  text-decoration: none;
}

.info-list .value a:hover {
  color: var(--teal-700);
  text-decoration: underline;
}

.info-list .value--stack a {
  display: block;
  font-variant-numeric: tabular-nums;
}

.info-list .value .sub {
  display: block;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--muted);
}

.map-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  padding: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--sand) url("../img/clinic-entrance.jpg") center / cover
    no-repeat;
  margin-bottom: 1.5rem;
  transition: box-shadow 0.25s ease;
}

.map-facade:hover {
  box-shadow: var(--shadow-md);
}

.map-facade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 26, 44, 0.2) 0%,
    rgba(10, 26, 44, 0.45) 55%,
    rgba(10, 26, 44, 0.84) 100%
  );
}

.map-facade__label {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.1rem 1.2rem;
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-sm);
  text-align: left;
}

.map-facade__label .icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.map-frame {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 1.5rem;
  display: block;
}

.clinic-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
}

.clinic-strip figure {
  margin: 0;
}

.clinic-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--sand);
}

.clinic-strip figcaption {
  margin-top: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* -- form -- */

.form {
  display: grid;
  gap: 1.1rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy-800);
}

.field .req {
  color: var(--clay-600);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 1rem;
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background-color 0.18s ease;
}

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

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--brass-200);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--teal-500);
  box-shadow: var(--ring);
}

.field .hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.form__row {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}

.form__note {
  font-size: var(--fs-xs);
  color: var(--muted);
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  margin: 0;
  line-height: 1.6;
}

.form__note .icon {
  width: 17px;
  height: 17px;
  color: var(--teal-600);
  flex: none;
  margin-top: 2px;
}

.form__status {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--teal-800);
  margin: 0;
}

.form__status:empty {
  display: none;
}

@media (min-width: 560px) {
  .form__row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 940px) {
  .contact__grid {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

/* ---------- 16. Footer --------------------------------------------------- */

.site-footer {
  position: relative;
  background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: rgba(255, 255, 255, 0.66);
  padding-block: clamp(3rem, 2rem + 3.5vw, 4.5rem) 1.75rem;
  font-size: var(--fs-sm);
}

.footer__brand,
.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer__brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--teal-500),
    var(--brass-400) 55%,
    var(--teal-600)
  );
  opacity: 0.85;
}

.footer__grid {
  display: grid;
  align-items: start;
  gap: 2.2rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  padding-bottom: 2.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Four equal columns squeeze the strapline onto three ragged lines. The brand
   block carries the logo, the name, the strapline and the doctor's details, so
   it gets roughly 1.7 columns and the three link lists share the rest. */
@media (min-width: 900px) {
  .footer__grid {
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 2.5rem 2.5rem;
  }
}

.site-footer h2,
.site-footer h3 {
  color: #fff;
}

/* On navy the charcoal orbit in the mark loses itself, so the footer gives it
   a white disc to sit on — which also matches how the mark is used in print. */
.footer__mark {
  width: 66px;
  height: 66px;
  object-fit: contain;
  padding: 9px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}

.footer__brand .name {
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 0.9rem + 0.8vw, 1.6rem);
  font-weight: 600;
  color: #fff;
  display: block;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.footer__brand .tagline {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-200);
  font-weight: 500;
  line-height: 1.65;
  margin-top: 0.15rem;
  width: 100%;
}

.footer__brand .meta {
  display: block;
  line-height: 1.7;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
}

@media (max-width: 640px) {
  .footer__brand {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .footer__brand .name {
    font-size: 1.08rem;
    max-width: 12ch;
  }
  .footer__mark {
    width: 54px;
    height: 54px;
  }
}

.footer__col h2 {
  font-family: var(--font);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.92);
}

.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.footer__col li + li {
  margin-top: 0.55rem;
}

.footer__col a {
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
  transition: color 0.18s ease;
}

.footer__col a:hover {
  color: #fff;
  text-decoration: underline;
}

@media (hover: none) {
  .footer__col li {
    margin-top: 0;
  }
  .footer__col a,
  .footer__col li {
    display: block;
    padding-block: 0.45rem;
  }
}


/* Everything below the four columns is one centred block: the disclaimer, the
   copyright line, and the build credit as the last line. Centred, so none of
   it has to align to the column grid above it. */
.footer__base {
  /* No border of its own — the column grid above already ends with one, and
     two rules a few pixels apart read as a mistake. */
  padding-top: 2.25rem;
  text-align: center;
}

.footer__disclaimer {
  max-width: 140ch;
  margin: 0 auto 1.25rem;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.56);
  line-height: 1.8;
}

.footer__disclaimer a {
  color: rgba(255, 255, 255, 0.72);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.3rem 0.8rem;
  margin: 0 0 0.85rem;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.52);
}

.footer__legal a {
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
}

.footer__legal a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer__legal .sep {
  color: rgba(255, 255, 255, 0.26);
}

.footer__credit {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.56);
}

.footer__credit a {
  color: var(--brass-300);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 168, 106, 0.35);
  padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.footer__credit a:hover,
.footer__credit a:focus-visible {
  color: var(--brass-200);
  border-bottom-color: var(--brass-200);
}

@media (max-width: 559px) {
  /* On a narrow phone the middle dot leaves an orphan; stack the two parts. */
  .footer__legal .sep {
    display: none;
  }
  .footer__legal {
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
  }
}

/* ---------- 17. Floating actions ----------------------------------------- */

.fab {
  position: fixed;
  right: max(0.9rem, env(safe-area-inset-right));
  bottom: max(0.9rem, env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.fab a {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  text-decoration: none;
  transition: transform 0.2s ease;
}

.fab a:hover {
  transform: scale(1.06);
  color: #fff;
}

.fab .fab--call {
  background: var(--navy-800);
}

.fab .fab--wa {
  background: #1faa54;
}

.fab .icon {
  width: 24px;
  height: 24px;
}

@media (min-width: 940px) {
  .fab {
    display: none;
  }
}

/* ---------- 18. Motion & reduced motion ---------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
}

.js .reveal {
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html:not(.js) .reveal {
  opacity: 1;
  transform: none;
}

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

/* ---------- 19. Print ---------------------------------------------------- */

@media print {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .site-header,
  .fab,
  .cta-band,
  .map-facade,
  .map-frame,
  form {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
  }
  .section {
    padding-block: 1rem;
    break-inside: avoid;
  }
}

/* ---------- 20. Small utilities ------------------------------------------ */

.note--wide {
  max-width: 64ch;
  margin-top: 2.25rem;
}

.btn-row--spaced {
  margin-top: 2rem;
}

/* ---------- 21. Condition & therapy pages -------------------------------- */

/* These rules back the pages built by tools/build_pages.py. They are additive
   — nothing above is changed — and they use only the tokens in :root. */

.btn-row--center {
  justify-content: center;
}

/* Running prose in a section that is not a card grid. */
.prose {
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: var(--fs-md);
}

.prose p + p {
  margin-top: 1rem;
}

/* A card that carries more than one paragraph, or a list. .card p sets
   margin:0 for the single-paragraph case, so spacing is restored here. */
.card p + p {
  margin-top: 0.8rem;
}

.card--list ul {
  list-style: none;
  padding: 0;
  margin: 0.85rem 0 0;
  display: grid;
  gap: 0.55rem;
}

.card--list li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.55;
}

.card--list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.52rem;
  border-radius: 50%;
  background: var(--teal-500);
}

/* "Read about depression ->" at the foot of a condition card. */
.card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--teal-700);
  text-decoration: none;
  /* Keeps the whole row a comfortable tap target on a phone. */
  min-height: 44px;
  align-self: start;
}

.card__more .icon {
  width: 1.05em;
  height: 1.05em;
  transition: transform 0.25s ease;
}

.card__more:hover,
.card__more:focus-visible {
  color: var(--teal-800);
  text-decoration: underline;
}

.card__more:hover .icon {
  transform: translateX(3px);
}

/* Availability badge on a therapy card. The distinction matters: only three
   of these are confirmed as offered at the clinic. */
.tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
  padding: 0.32rem 0.72rem;
  border: 1px solid var(--line-cool);
  border-radius: var(--r-pill);
  background: var(--sand);
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tag--offered {
  background: var(--teal-100);
  border-color: var(--teal-100);
  color: var(--teal-800);
}

/* The cards on these pages stack an icon, a tag, a heading and body copy, so
   they need to be columns rather than plain blocks. */
.cards .card {
  display: flex;
  flex-direction: column;
}

/* ---------- 22. Header: spacing and dropdown menus ----------------------- */

/* The brand lockup is left exactly as designed: 52px mark, the clinic name on
   one line, the strapline on one line beneath it from 1260px up. It is the
   widest thing in the header and it does not give any width back, so all the
   room for six nav items, three carets and the CTA has to come from the nav
   itself. */

@media (min-width: 1150px) {
  .nav {
    gap: 0.4rem;
  }
  .nav__list {
    gap: 0.1rem;
  }
  /* Six items, three carets, the Instagram button and the CTA, beside a brand
     lockup that is flex:none and gives nothing back. This is what fits. */
  .nav__list a {
    padding: 0.55rem 0.42rem;
  }
  .nav__list a::after {
    left: 0.42rem;
    right: 0.42rem;
  }
  .nav__cta {
    margin-left: 0.1rem;
  }
}

/* A caret on the three items that open a menu. Drawn with borders rather than
   added to the icon sprite — it is two triangles' worth of CSS, and the sprite
   is shipped inline on every page. */
.nav__has-menu > .nav__top {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
}

.nav__has-menu > .nav__top::before {
  content: "";
  order: 2;
  width: 0;
  height: 0;
  border: 3.5px solid transparent;
  border-top-color: currentColor;
  margin-top: 2px;
  opacity: 0.65;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav__has-menu:hover > .nav__top::before,
.nav__has-menu:focus-within > .nav__top::before {
  transform: rotate(180deg);
  opacity: 1;
}

/* The panel spans the header rather than hanging off the list item, so a menu
   of twenty-two conditions can use the full width without ever overflowing the
   right-hand edge. .site-header is position:sticky, which makes it the
   containing block for this. */
.nav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* Opened by hover and by keyboard focus, with no JavaScript involved — so the
   menus still work if a script fails, and tabbing into one reveals it. */
.nav__has-menu:hover > .nav__menu,
.nav__has-menu:focus-within > .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* The link sits about 22px above the bottom of the header, so travelling from
   the link down into the panel crosses a gap of header. This invisible strip
   bridges it; without it the menu closes before the pointer arrives. It only
   exists while the menu is open, so it never blocks anything. */
.nav__menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 24px;
}

.nav__menu-inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.5rem, 0.5rem + 2vw, 3rem);
  padding-block: 1.75rem 2rem;
}

.nav__menu-col {
  flex: 1 1 0;
  min-width: 0;
}

.nav__menu-col--all {
  flex: 0 0 auto;
}

.nav__menu-head {
  margin: 0 0 0.6rem;
  padding-inline: 0.55rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-700);
}

.nav__menu-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}

.nav__menu-col li {
  margin: 0;
}

.nav__menu a {
  display: block;
  padding: 0.42rem 0.55rem;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav__menu a:hover,
.nav__menu a:focus-visible {
  background: var(--ivory);
  color: var(--teal-800);
}

.nav__menu-all {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  font-weight: 600;
  color: var(--teal-700);
}

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

.nav__menu-all:hover .icon {
  transform: translateX(3px);
}

/* Groups inside the mobile panel. <details> again, for the same reason. */
.nav__group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--navy-800);
}

.nav__group > summary::-webkit-details-marker {
  display: none;
}

.nav__group > summary::after {
  content: "";
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: currentColor;
  margin-top: 3px;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.nav__group[open] > summary::after {
  transform: rotate(180deg);
}

.nav__group > ul {
  margin: 0 0 0.75rem;
  padding: 0 0 0 0.9rem;
  border-left: 2px solid var(--line);
}

.nav__group li {
  border-bottom: 0;
}

.nav__group a {
  padding: 0.55rem 0.25rem;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink-soft);
}

/* ---------- 23. Accordion lists ------------------------------------------ */

/* Services, conditions and therapies are long lists of short descriptions.
   As card grids they made three pages that were mostly scrolling, so each
   item is a <details> row instead: the name stays visible and the description
   opens on demand.

   Built on <details>/<summary> deliberately — no JavaScript, so the rows
   still open if a script fails, and the browser's own find-in-page can
   expand them. Several may be open at once; opening one does not close the
   others, so two conditions can be compared side by side. */

.accordion {
  max-width: 62rem;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}

.accordion details {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  transition: background-color 0.2s ease;
}

.accordion details[open] {
  background: linear-gradient(180deg, var(--ivory), transparent 70%);
}

.accordion summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* 44px of height even with a one-line title, for a comfortable tap. */
  padding: 1.05rem 0.5rem;
  min-height: 56px;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

/* The icon sits in a tinted disc so the rows read as a list of things rather
   than a list of sentences. */
.accordion summary > .icon {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 50%;
  background: var(--teal-100);
  color: var(--teal-800);
  box-sizing: border-box;
}

.accordion__title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.accordion__title h3 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--navy-800);
  transition: color 0.2s ease;
}

.accordion summary:hover .accordion__title h3 {
  color: var(--teal-800);
}

/* The same plus-into-cross marker the FAQ uses: two 1px bars drawn as
   background layers, so there is no extra element to keep in sync. */
.accordion summary::after {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border-radius: 50%;
  border: 1px solid var(--line);
  background-color: var(--surface);
  background-image: linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 11px 1.5px, 1.5px 11px;
  background-position: center, center;
  background-repeat: no-repeat;
  color: var(--teal-600);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.2s ease, background-color 0.2s ease;
}

.accordion summary:hover::after {
  border-color: var(--brass-400);
  background-color: var(--ivory);
}

.accordion details[open] summary::after {
  transform: rotate(135deg);
  border-color: var(--brass-400);
}

.accordion__body {
  /* Line the copy up with the title, not with the icon. */
  padding: 0 3rem 1.4rem calc(38px + 1.5rem);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.accordion__body p {
  margin: 0 0 0.75rem;
}

.accordion__body p:last-child {
  margin-bottom: 0;
}

.accordion__body ul {
  list-style: none;
  padding: 0;
  margin: 0.2rem 0 0.75rem;
  display: grid;
  gap: 0.45rem;
}

.accordion__body li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0;
}

.accordion__body li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--teal-500);
}

.accordion__body .tag {
  margin-bottom: 0.7rem;
}

.accordion__body .card__more {
  margin-top: 0.4rem;
  min-height: 0;
}

/* Counts the rows so a collapsed section still says how much is inside. */
.accordion__meta {
  max-width: 62rem;
  margin: 0.9rem auto 0;
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: right;
}

@media (max-width: 559px) {
  .accordion summary {
    gap: 0.75rem;
    padding-inline: 0.15rem;
  }
  .accordion summary > .icon {
    width: 32px;
    height: 32px;
    padding: 7px;
  }
  .accordion__body {
    padding: 0 0.15rem 1.3rem calc(32px + 0.9rem);
  }
}

/* Category groups inside a single section. Four separate <section>s each cost
   a full --pad-section top and bottom plus a section head; grouping them saves
   roughly 700px of scrolling on the conditions page alone. */
.cat-group + .cat-group {
  margin-top: clamp(2.5rem, 1.8rem + 2.2vw, 3.75rem);
}

.cat-group__head {
  max-width: 62rem;
  margin: 0 auto 1.2rem;
}

.cat-group__head h2 {
  font-size: var(--fs-xl);
  margin-bottom: 0.25rem;
}

.cat-group__head p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Chips that jump straight to a category, so the page can be skipped rather
   than scrolled. */
.jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 2rem auto 0;
  max-width: 62rem;
}

.jump li {
  margin: 0;
}

.jump a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--line-cool);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--navy-800);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.jump a:hover,
.jump a:focus-visible {
  border-color: var(--teal-500);
  background: var(--teal-050);
  color: var(--teal-800);
}

.jump .count {
  color: var(--muted);
  font-size: var(--fs-xs);
}

/* A second heading inside one section — used where "what it does not do"
   follows "who it tends to suit" on a therapy page. */
.section__head--sub {
  margin-top: clamp(2.5rem, 1.8rem + 2vw, 3.5rem);
}

/* The availability badge sits under the lede in a therapy page's hero. */
.tag-row {
  margin: 0 0 0.25rem;
}

/* Safety net: a long label wraps inside its own column rather than pushing
   into the next one. */
.nav__menu a {
  overflow-wrap: break-word;
}

/* ---------- 24. Gallery --------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(0.9rem, 0.5rem + 1.2vw, 1.5rem);
}

.gallery figure {
  margin: 0;
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--sand);
  box-shadow: var(--shadow-sm);
}

.gallery figcaption {
  margin-top: 0.7rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}


/* ---------- 26. Instagram ------------------------------------------------- */

/* In the header nav. Icon only — the bar has no room for four more words, and
   six items plus the CTA already fill it — so the label is carried by
   aria-label, a title tooltip and visually-hidden text a screen reader reads.
   44px square, because it is a tap target. */
.nav__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav__social .icon {
  width: 21px;
  height: 21px;
}

.nav__social::after {
  display: none;
}

.nav__social:hover,
.nav__social:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

/* In the footer, under the doctor's details. This is the copy that tells
   people what the link is, and it is on every page. */
.footer__social {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.1rem;
  padding: 0.65rem 0.95rem 0.65rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-pill);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.footer__social .icon {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
}

.footer__social .handle {
  display: block;
  font-weight: 400;
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.62);
}

.footer__social:hover,
.footer__social:focus-visible {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.footer__social:hover .handle {
  color: rgba(255, 255, 255, 0.78);
}

/* On the About page, under the practice address. */
.about__social {
  margin-top: 1.25rem;
}