/* ==========================================================================
   Klinik Riverhill Medic — site stylesheet
   Single stylesheet, no build step. Order: tokens → reset → base →
   components → page blocks → responsive.
   Colours were sampled from the supplied brand assets; see README.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand greens */
  --green-900: #2E512E;   /* deepest — large headings on the doctor page   */
  --green-700: #3B6039;   /* PRIMARY — buttons, CTA band, footer bar       */
  --green-600: #466745;   /* hover / secondary surfaces                    */
  --green-500: #448E4F;   /* logo green (sampled from the supplied JPEG)   */
  --green-100: #EAEFE9;   /* sage tint behind icons                        */

  /* Brand neutrals + accents */
  --brown-700: #805E38;   /* wordmark                                       */
  --rust-600:  #793214;   /* doctor credential line                         */
  --ink:       #1A1D21;   /* headings                                       */
  --body:      #4A4E52;   /* body copy                                      */
  --muted:     #6D6D74;   /* captions, meta                                 */

  /* Surfaces */
  --bg:        #FFFFFF;
  --bg-alt:    #F9F9F9;   /* cool off-white bands                           */
  --bg-warm:   #F8F7F4;   /* warm bands, footer panel                       */
  --card:      #F6F7F6;   /* filled cards                                   */
  --line:      #E5E7E5;   /* hairlines, card borders                        */

  /* Typography */
  --font-head: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Layout */
  --container: 1200px;
  --gutter: 24px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Rhythm */
  --section-y: 88px;
  --section-y-sm: 56px;

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(26, 29, 33, .05);
  --shadow: 0 6px 24px rgba(26, 29, 33, .07);
  --shadow-lg: 0 18px 48px rgba(26, 29, 33, .10);

  --header-h: 85px;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

/* Anchor targets (services.html#msk etc.) must clear the sticky header. */
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1rem; letter-spacing: -0.01em; }

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

a { color: var(--green-700); text-decoration: none; }
a:hover { color: var(--green-500); }

ul { margin: 0; padding: 0; list-style: none; }

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

/* Visible focus for every interactive element — do not remove. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--green-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 200;
  background: var(--green-700);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  transition: top .18s ease;
}
.skip-link:focus { top: 0; color: #fff; }

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

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-sm); }
.section--alt { background: var(--bg-alt); }
.section--warm { background: var(--bg-warm); }

.section-head { text-align: center; margin-bottom: 48px; }
.section-head--tight { margin-bottom: 34px; }
.section-head p { max-width: 640px; margin-inline: auto; }

.text-green { color: var(--green-700); }

/* Eyebrow + "+" divider — the signature motif, repeated on every page. */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-700);
  margin: 0 0 12px;
}

.divider-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 18px;
}
.divider-plus::before,
.divider-plus::after {
  content: "";
  width: 56px; height: 1px;
  background: var(--line);
}
.divider-plus span {
  color: var(--green-700);
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
}
.divider-plus--start { justify-content: flex-start; }
.divider-plus--start::before { display: none; }

/* Section head variant where the eyebrow sits above the "+" */
.section-head .eyebrow { margin-bottom: 6px; }
.section-head h2 { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary { background: var(--green-700); color: #fff; }
.btn--primary:hover { background: var(--green-600); color: #fff; }

.btn--outline { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--outline:hover { border-color: var(--green-700); color: var(--green-700); }

.btn--white { background: #fff; color: var(--green-700); }
.btn--white:hover { background: var(--bg-warm); color: var(--green-900); }

.btn--pill { border-radius: var(--radius-pill); }
.btn--block { display: flex; width: 100%; }

/* Inline "Learn More →" text link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .9rem;
  color: var(--green-700);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .18s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. ICON TREATMENTS
   -------------------------------------------------------------------------- */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  flex: none;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
}
.icon-circle svg { width: 26px; height: 26px; }
.icon-circle--sm { width: 42px; height: 42px; }
.icon-circle--sm svg { width: 20px; height: 20px; }
.icon-circle--lg { width: 72px; height: 72px; }
.icon-circle--lg svg { width: 34px; height: 34px; }

.icon-circle--solid { background: var(--green-700); color: #fff; }
.icon-circle--outline {
  background: transparent;
  border: 1.5px solid var(--green-100);
  color: var(--green-700);
}

/* --------------------------------------------------------------------------
   6. HEADER + NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
}

/* Logo lockup — PLACEHOLDER until the client supplies a vector. See README. */
/* Horizontal lockup: the mark from the supplied artwork, with the wordmark as
   live text so it stays crisp and readable at header size. (The full stacked
   artwork is at assets/img/logo-full.png if it is ever wanted instead, but its
   wordmark is only 23% of the image height and becomes illegible this small.) */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__mark { width: 40px; height: 40px; flex: none; }
.logo__text {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.05;
  color: var(--brown-700);
  letter-spacing: .02em;
}
.logo__text .logo__l1 { display: block; font-size: .78rem; }
.logo__text .logo__l2 { display: block; font-size: .92rem; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 30px; }

/* The drawer-only blocks. Hidden on desktop, where .header__actions
   carries the CTA and social icons instead. */
.nav > .nav__cta, .nav > .nav__social { display: none; }
.nav__link {
  position: relative;
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
  padding: 6px 0;
}
.nav__link:hover { color: var(--green-700); }
.nav__link[aria-current="page"] { color: var(--green-700); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--green-700);
}

.header__actions { display: flex; align-items: center; gap: 18px; }

.social-row { display: flex; align-items: center; gap: 10px; }
.social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
}
.social-row a:hover { background: var(--green-700); color: #fff; }
.social-row svg { width: 16px; height: 16px; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-warm);
  /* Kept as variables so .hero__media can cancel them and meet the section edges. */
  --hero-pad-t: 72px;
  --hero-pad-b: 72px;
}
.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
  padding-block: var(--hero-pad-t) var(--hero-pad-b);
}

/* Home stacks the copy and the trust strip in the left column while the photo
   runs down the right across both rows — as in the mockup, where the strip
   tucks into the lower sweep of the curve rather than sitting below the photo.
   The strip spans both columns because it needs more width than the text
   column gives it; its max-width keeps it clear of the curve. */
.hero--home { --hero-pad-b: 64px; }
.hero--home .container {
  /* The mockup gives the photo slightly more width than the copy. */
  grid-template-columns: 1fr 1.1fr;
  align-items: start;
  column-gap: 56px;
  row-gap: 40px;
}
.hero--home .hero__body  { grid-column: 1; grid-row: 1; }
.hero--home .trust-strip { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 1; }
.hero--home .hero__media { grid-column: 2; grid-row: 1 / span 2; }

.hero__title { margin-bottom: 20px; }
.hero__title span { display: block; }
/* Page titles where the green word sits on the same line ("About Us"). */
.hero__title--inline span { display: inline; }
.hero__lede { font-size: 1.05rem; max-width: 46ch; margin-bottom: 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__statement {
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.hero__statement span { display: block; }

/* Curved media panel.
   The left edge was traced pixel-by-pixel from "Home (op3).png" and fitted to a
   single cubic Bezier (max deviation 3.7px at desktop size). A border-radius
   approximation was tried first but drifted up to 76px through the lower half,
   so the shape is an SVG clipPath in objectBoundingBox units instead — it
   scales to any box size. The <clipPath id="hero-curve"> lives in each page.
   The 3px green line that traces the curve in the design is the same shape
   sitting 3px further left, showing only along the curve. */
.curved-media {
  position: relative;
  flex: 1;
  min-height: 0;
}
.curved-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green-700);
  clip-path: url(#hero-curve);
  transform: translateX(-3px);
}
/* Absolutely positioned so the photo's own 4:3 intrinsic ratio can never drive
   the hero's height — the grid decides how tall the section is, and the photo
   fills whatever it is given. */
.curved-media img,
.curved-media .img-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: url(#hero-curve);
}

/* Holds the inline <clipPath>; must stay rendered (not display:none) for the
   reference to resolve. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* In every hero mockup the photo runs past the container to the right edge of
   the screen. This is the gap between the container's content edge and the
   viewport edge; it collapses to the gutter on narrow screens. */
.hero__media {
  display: flex;
  min-height: 420px;
  width: calc(100% + max(var(--gutter), (100vw - var(--container)) / 2 + var(--gutter)));
  /* Cancel the container padding so the photo meets the top and bottom of the
     hero band, as it does in every mockup. */
  margin-block: calc(-1 * var(--hero-pad-t)) calc(-1 * var(--hero-pad-b));
  align-self: stretch;
}

/* About's hero photo is a plain rounded panel in its mockup — no arc. */
.hero--flat .curved-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hero--flat .curved-media::before { display: none; }
.hero--flat .curved-media img,
.hero--flat .curved-media .img-placeholder { clip-path: none; }

/* --------------------------------------------------------------------------
   8. IMAGE PLACEHOLDERS
   Every photo slot renders a labelled placeholder at the correct aspect
   ratio until real clinic photography arrives. See README "Asset requests".
   -------------------------------------------------------------------------- */
.img-placeholder {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 180px;
  background:
    radial-gradient(120% 90% at 78% 18%, #FBF4E9 0%, rgba(251,244,233,0) 60%),
    linear-gradient(150deg, #F3F0E8 0%, #E9EFE7 55%, #DFE8DC 100%);
  color: var(--green-700);
  overflow: hidden;
}
.img-placeholder::before {
  /* soft leaf motif, echoing the watermark in the Home mockup */
  content: "";
  position: absolute;
  right: -10%; bottom: -18%;
  width: 62%; aspect-ratio: 1;
  border-radius: 60% 0 60% 0;
  border: 1.5px solid rgba(59, 96, 57, .16);
  transform: rotate(-18deg);
}
.img-placeholder__label {
  position: relative;
  margin: 16px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(59, 96, 57, .18);
  border-radius: var(--radius-pill);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--green-700);
}
.img-placeholder--rounded { border-radius: var(--radius-lg); }
.img-placeholder--4x3 { aspect-ratio: 4 / 3; }
.img-placeholder--3x2 { aspect-ratio: 3 / 2; }
.img-placeholder--1x1 { aspect-ratio: 1 / 1; }
.img-placeholder--portrait { aspect-ratio: 4 / 5; }

/* Real photography dropped into a media slot. Mirrors the sizing of
   .img-placeholder so a photo and a pending placeholder are interchangeable. */
.media {
  display: block;
  width: 100%;
  object-fit: cover;
}
.media--rounded { border-radius: var(--radius-lg); }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--1x1 { aspect-ratio: 1 / 1; }

/* --------------------------------------------------------------------------
   9. TRUST STRIP (Home, under the hero)
   -------------------------------------------------------------------------- */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  /* Sits under the hero copy, not the full page width, as in the design. */
  max-width: 660px;
}
.trust-item { display: flex; align-items: flex-start; gap: 14px; }
/* Titles stay on a single line; they may overhang the description block. */
.trust-item h3 { font-size: .95rem; margin: 0 0 3px; white-space: nowrap; }
/* Capped so each description settles on three lines (14-16ch all give 3;
   15ch is the midpoint, so it survives small font-metric variation). */
.trust-item p { font-size: .85rem; line-height: 1.55; margin: 0; max-width: 15ch; }

/* --------------------------------------------------------------------------
   10. CARDS
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover {
  border-color: var(--green-500);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.card h3 { margin: 22px 0 10px; }
.card p { font-size: .9rem; margin-bottom: 22px; }
.card .link-arrow { margin-top: auto; }

/* --------------------------------------------------------------------------
   11. FEATURE ROW ("Why Choose Us" — items split by vertical rules)
   -------------------------------------------------------------------------- */
.feature-row {
  display: grid;
  gap: 0;
}
.feature-row--4 { grid-template-columns: repeat(4, 1fr); }
.feature-row--5 { grid-template-columns: repeat(5, 1fr); }

.feature-row > * + * { border-left: 1px solid var(--line); }

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 26px;
}
.feature-item h3 { font-size: .92rem; margin: 0 0 4px; }
.feature-item p { font-size: .83rem; line-height: 1.55; margin: 0; }

/* Centred variant used for "Our Values" */
.feature-item--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 8px 24px;
}
.feature-item--center h3 { font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   12. SPLIT SECTIONS (text beside media)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* stretch, not center: the photo fills the full height of the row so there
     is no dead space beside the text. The text stays optically centred. */
  align-items: stretch;
  gap: 56px;
}
.split__body { align-self: center; }
.split__media { display: flex; }
.split__media > img,
.split__media > .img-placeholder {
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split--media-first .split__media { order: -1; }

/* Text beside the clinic-hours card — no photo, so nothing to fill. */
.split--wide-text { grid-template-columns: 1.4fr 1fr; align-items: center; }

/* Home: a photo beside the About teaser, sitting inside the wider column. */
.split--inline { grid-template-columns: 0.8fr 1fr; gap: 30px; }

.split__body h2 { margin-bottom: 18px; }

/* Eyebrow with a trailing rule (About "Our Story") */
.eyebrow-rule { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.eyebrow-rule .eyebrow { margin: 0; }
.eyebrow-rule::after { content: ""; flex: 1; max-width: 90px; height: 1px; background: var(--line); }

/* Green check list (About "Why Choose Us") */
.check-rows { display: grid; gap: 22px; }
.check-row { display: flex; align-items: flex-start; gap: 14px; }
.check-row svg { width: 22px; height: 22px; flex: none; color: var(--green-700); margin-top: 2px; }
.check-row h3 { font-size: .98rem; margin: 0 0 3px; }
.check-row p { font-size: .88rem; margin: 0; }

/* --------------------------------------------------------------------------
   13. HOURS CARD (Home)
   -------------------------------------------------------------------------- */
.hours-card {
  position: relative;
  padding: 36px 32px;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
}
.hours-card h2 { font-size: 1.5rem; margin-bottom: 26px; }
.hours-list { display: grid; gap: 20px; }
.hours-item { display: flex; align-items: flex-start; gap: 14px; }
.hours-item h3 { font-size: .92rem; margin: 0 0 2px; }
.hours-item p { font-size: .88rem; margin: 0; }
.hours-card__leaf {
  position: absolute;
  right: -24px; bottom: -24px;
  width: 170px;
  color: rgba(59, 96, 57, .10);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   14. SERVICE CARDS (Services page — wide alternating rows)
   -------------------------------------------------------------------------- */
.service-card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: stretch;
  gap: 0;
  background: var(--bg-alt);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
}
.service-card:last-child { margin-bottom: 0; }
.service-card--flip .service-card__media { order: 2; }

.service-card__media { min-height: 320px; }
.service-card__media .img-placeholder { height: 100%; border-radius: 0; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }

.service-card__body { padding: 40px; }
.service-card__head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 18px; }
.service-card__head h2 { font-size: 1.5rem; margin: 0 0 8px; }
.service-card__head .rule { display: block; width: 42px; height: 2px; background: var(--green-500); margin-bottom: 12px; }
.service-card__head p { font-size: .9rem; margin: 0; }

/* Two-column tick list */
.check-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 28px;
  margin-top: 24px;
}
.check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .89rem; }
.check-list svg { width: 18px; height: 18px; flex: none; color: var(--green-700); margin-top: 3px; }

/* Other Medical Services icon row */
.other-services {
  padding: 44px 36px;
  background: var(--bg-alt);
  border-radius: var(--radius);
}
.other-grid {
  display: grid;
  /* One line for all eight. Explicit, not auto-fit: auto-fit could only place
     seven at a 140px minimum and left the eighth stranded on its own row. */
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.other-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 12px 8px;
}
.other-item + .other-item { border-left: 1px solid var(--line); }
.other-item:nth-child(8n + 1) { border-left: none; }
.other-item svg { width: 30px; height: 30px; color: var(--green-700); }
.other-item span { font-size: .8rem; font-weight: 600; color: var(--ink); line-height: 1.35; }

/* --------------------------------------------------------------------------
   15. DOCTOR PAGE
   -------------------------------------------------------------------------- */
.doctor-name {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: var(--green-700);
  text-align: center;
  margin: 0 0 8px;
}
.doctor-credential {
  text-align: center;
  color: var(--rust-600);
  font-size: 1.02rem;
  font-weight: 500;
  margin: 0 0 10px;
}
.doctor-rule { width: 60px; height: 2px; background: var(--green-500); margin: 0 auto 48px; }

.doctor-layout {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: 52px;
  align-items: start;
}

.cred-card {
  margin-top: 0;
  padding: 26px 24px;
  background: var(--card);
  border-radius: 0 0 var(--radius) var(--radius);
  display: grid;
  gap: 20px;
}
.cred-item { display: flex; align-items: flex-start; gap: 14px; }
.cred-item h3 { font-size: .86rem; color: var(--green-700); margin: 0 0 2px; }
.cred-item p { font-size: .86rem; margin: 0; line-height: 1.5; }

.doctor-photo { border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.doctor-photo .img-placeholder { border-radius: 0; }
.doctor-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }

/* Brand monogram standing in for the portrait until a real photograph of
   Dr Ganesan is supplied. Deliberately NOT a stock face: a portrait on a named
   doctor's profile is a claim about who that person is. See README §5. */
.doctor-monogram {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background:
    radial-gradient(115% 75% at 50% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(160deg, #F1F6F0 0%, #E3ECE2 100%);
}
.doctor-monogram__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Scales with the panel rather than sitting lost in it. */
  width: clamp(96px, 28%, 168px);
  aspect-ratio: 1;
  border: 1.5px solid rgba(68, 142, 79, .38);
  border-radius: 50%;
  background: rgba(255, 255, 255, .62);
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 9vw, 2.8rem);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--green-700);
}
.doctor-monogram__rule { width: 44px; height: 2px; background: var(--green-500); }
.doctor-monogram__label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-700);
  text-align: center;
  padding-inline: 16px;
}
.doctor-monogram__leaf {
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: 200px;
  color: rgba(59, 96, 57, .10);
  pointer-events: none;
}

.doctor-bio p { margin-bottom: 20px; }

.experience-panel {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 36px;
  padding: 40px;
  background: var(--card);
  border-radius: var(--radius);
  margin-top: 56px;
}
.experience-panel h2 { font-size: 1.4rem; color: var(--green-700); margin-bottom: 14px; }
.experience-panel p { font-size: .92rem; margin-bottom: 14px; }
.experience-panel__icon {
  width: 130px; height: 130px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--green-700);
  margin-inline: auto;
}
.experience-panel__icon svg { width: 58px; height: 58px; }

/* --------------------------------------------------------------------------
   16. CONTACT PAGE
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 28px;
  align-items: start;
}

.panel {
  padding: 36px 34px;
  border-radius: var(--radius);
}
.panel--filled { background: var(--card); }
.panel--outlined { background: #fff; border: 1px solid var(--line); }

.panel__head { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.panel__head h2 { font-size: 1.35rem; margin: 0; }
.panel__rule { width: 42px; height: 2px; background: var(--green-500); margin: 8px 0 18px 72px; }
.panel__intro { font-size: .9rem; margin-bottom: 26px; }

.contact-list { display: grid; }
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-block: 20px;
}
.contact-item + .contact-item { border-top: 1px solid var(--line); }
.contact-item h3 { font-size: .9rem; margin: 0 0 4px; }
.contact-item p, .contact-item a { font-size: .89rem; margin: 0; }
.contact-item .link-arrow { margin-top: 8px; font-size: .85rem; }

.hours-table { display: grid; gap: 8px; margin-top: 4px; }
.hours-table__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: .87rem;
}
.hours-table__row strong { font-weight: 600; }
.hours-table__row span { text-align: right; color: var(--body); }

/* Form */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 600; color: var(--ink); }
.field .req { color: var(--rust-600); }
.field__optional { font-weight: 400; color: var(--muted); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 110px; resize: vertical; }

/* iOS gives date inputs an intrinsic width that overflows the field box, and
   centres the value. Normalise them, and show a hint while empty — Safari
   renders nothing at all until a date is picked. */
.field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 46px;
  max-width: 100%;
}
.field input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}
.field input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: auto;
  opacity: .55;
}
.field input[type="date"][data-empty]:not(:focus)::before {
  content: attr(data-placeholder);
  color: #A6A8AB;
}
.field input::placeholder, .field textarea::placeholder { color: #A6A8AB; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #C9CEC9; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px rgba(59, 96, 57, .12);
  outline: none;
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #B3261E; }

.field__error {
  font-size: .78rem;
  color: #B3261E;
  min-height: 0;
  display: none;
}
.field__error.is-visible { display: block; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  grid-column: 1 / -1;
  margin-top: 4px;
}
.consent input { width: 17px; height: 17px; flex: none; margin-top: 3px; accent-color: var(--green-700); }
.consent label { font-size: .82rem; font-weight: 400; color: var(--body); line-height: 1.5; }
.consent a { text-decoration: underline; }

.form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: .8rem;
  color: var(--muted);
}
.form-note svg { width: 14px; height: 14px; }

/* Submit stub notice — see site.js */
.form-status {
  grid-column: 1 / -1;
  display: none;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  font-size: .87rem;
  line-height: 1.6;
}
.form-status.is-visible { display: block; }
.form-status--info {
  background: var(--green-100);
  border: 1px solid rgba(59, 96, 57, .25);
  color: var(--green-900);
}
.form-status--error {
  background: #FCEEED;
  border: 1px solid rgba(179, 38, 30, .25);
  color: #8C1D18;
}
.form-status a { text-decoration: underline; font-weight: 600; }

/* Map */
.map-panel {
  margin-top: 28px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-alt);
}
.map-panel iframe { display: block; width: 100%; height: 420px; border: 0; }
.map-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
}
.map-fallback h3 { margin: 8px 0 0; }
.map-fallback p { font-size: .9rem; }
.map-fallback .map-fallback__hint { font-size: .8rem; color: var(--muted); }
.map-fallback .btn { margin-top: 8px; }

/* --------------------------------------------------------------------------
   17. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 32px 40px;
  background: var(--green-700);
  border-radius: var(--radius);
  color: #fff;
}
.cta-band__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  color: var(--green-700);
}
.cta-band__icon svg { width: 30px; height: 30px; }
.cta-band__text { flex: 1; }
.cta-band h2 {
  color: #fff;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  margin: 0 0 4px;
}
.cta-band p { color: rgba(255, 255, 255, .88); font-size: .93rem; margin: 0; }
.cta-band .btn { flex: none; }

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--bg-warm); margin-top: 0; }
.footer-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-block: 56px 44px;
}
.footer-col h3 {
  font-size: .95rem;
  margin: 0 0 18px;
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a,
.footer-col p,
.footer-col li { font-size: .87rem; color: var(--body); }
.footer-col a:hover { color: var(--green-700); }

.footer-brand .logo { margin-bottom: 16px; }
.footer-brand p { font-size: .87rem; margin-bottom: 18px; max-width: 30ch; }

.footer-contact li { display: flex; align-items: flex-start; gap: 12px; }
.footer-contact svg { width: 17px; height: 17px; flex: none; color: var(--green-700); margin-top: 3px; }

.footer-disclaimer {
  padding-block: 0 28px;
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.6;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  max-width: 90ch;
}

.footer-bar { background: var(--green-700); color: rgba(255, 255, 255, .9); }
.footer-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 15px;
  font-size: .8rem;
}
.footer-bar a { color: rgba(255, 255, 255, .9); }
.footer-bar a:hover { color: #fff; text-decoration: underline; }
.footer-bar__legal { display: flex; align-items: center; gap: 12px; }
.footer-bar__legal span { opacity: .5; }

/* --------------------------------------------------------------------------
   19. FLOATING WHATSAPP CTA  (required by the brief; not in the mockups)
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 13px 16px;
  background: #25D366;
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: .9rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  transition: transform .2s ease, background-color .2s ease;
}
.wa-float:hover { background: #1EBE5B; color: #fff; transform: translateY(-2px); }
.wa-float svg { width: 24px; height: 24px; flex: none; }

/* --------------------------------------------------------------------------
   19b. ABOUT PAGE BLOCKS
   -------------------------------------------------------------------------- */
/* Centred closing line beneath a card grid. */
.section-note {
  max-width: 760px;
  margin: 40px auto 0;
  text-align: center;
  font-size: .95rem;
}

/* Vision statement. */
.vision {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.1vw, 1.45rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* The Our Story / Our Standard columns carry running prose, so give the
   paragraph after a check list a little separation. */
.split__body .check-rows + p { margin-top: 26px; }

/* --------------------------------------------------------------------------
   20. LEGAL / PROSE PAGES
   -------------------------------------------------------------------------- */
.prose { max-width: 78ch; }
.prose h2 { font-size: 1.35rem; margin-top: 40px; }
.prose h2:first-of-type { margin-top: 0; }
.prose ul { list-style: disc; padding-left: 22px; margin-bottom: 18px; }
.prose li { margin-bottom: 8px; }

.notice {
  padding: 20px 24px;
  border-left: 3px solid var(--green-500);
  background: var(--bg-warm);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .9rem;
  margin-bottom: 36px;
}
.notice strong { display: block; margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   21. RESPONSIVE
   -------------------------------------------------------------------------- */
/* Between the drawer breakpoint and ~1150px there is not enough room for the
   icon to sit beside the text AND for the strip to stay clear of the curve, so
   the icon stacks above the text and the strip narrows. Keeping the photo
   column at its normal width matters here — squeezing it instead left the photo
   too tall and narrow. Verified by hit-testing the clipped photo edge against
   the strip's rendered text. */
@media (max-width: 1199px) {
  /* Not enough room for eight across; two tidy rows of four. */
  .other-grid { grid-template-columns: repeat(4, 1fr); }
  .other-item:nth-child(8n + 1) { border-left: 1px solid var(--line); }
  .other-item:nth-child(4n + 1) { border-left: none; }
  .other-item { padding: 12px 16px; }
}

@media (max-width: 1150px) {
  .trust-strip { max-width: 520px; gap: 20px; }
  .trust-item { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* The About teaser sits inside an already-narrow column, so its photo needs
   more room than the full-width splits before a full-height fill stops looking
   like a sliver — it stacks below 1200px rather than 1080px. */
@media (max-width: 1200px) {
  .split--inline { grid-template-columns: 1fr; gap: 24px; }
  .split--inline .split__media { display: block; }
  .split--inline .split__media > img { flex: none; height: auto; }
  .split--inline .media--1x1 { aspect-ratio: 4 / 3; }
}

/* The hero stacks earlier than the nav drawer does. Below ~1000px the photo
   column gets narrow enough that a full-height photo turns tall and thin
   (0.62:1 at 905px), which reads nothing like the design, so the photo moves
   under the copy at a 16:10 crop instead. */
@media (max-width: 1000px) {
  .hero { --hero-pad-t: 48px; --hero-pad-b: 48px; }
  .hero .container,
  .hero--home .container { grid-template-columns: 1fr; gap: 36px; }
  /* Stacked order: copy, then photo, then the trust points. */
  .hero--home .hero__body,
  .hero--home .trust-strip,
  .hero--home .hero__media { grid-column: 1; grid-row: auto; }
  .hero--home .hero__body { order: 1; }
  /* On Home the photo is the LAST thing in the hero, under the icon boxes. */
  .hero--home .trust-strip { order: 2; }
  .hero__media { order: 3; min-height: 0; }
  .curved-media { flex: none; aspect-ratio: 16 / 10; width: 100%; }

  /* Stacked, the left-edge sweep would slice the picture diagonally and leave a
     flat cut across the top. Swap to the same curve transposed onto the TOP
     edge, so the image still reads as part of the brand shape. */
  .curved-media img,
  .curved-media .img-placeholder { clip-path: url(#hero-curve-top); }
  .curved-media::before {
    clip-path: url(#hero-curve-top);
    transform: translateY(-3px);
  }

  /* The photo closes the hero band: no gap underneath it. */
  .hero .container { padding-bottom: 0; }
  .hero__media { margin-block: 0 0; }
  /* About keeps a plain panel rather than the arc, so square off its bottom
     corners now that it sits flush against the next section. */
  .hero--flat .curved-media { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

@media (max-width: 1080px) {
  :root { --section-y: 68px; }

  /* Two-column sections stack earlier than the nav drawer does. Below ~1080px
     the text column gets tall enough that a full-height photo beside it turns
     into a sliver (0.60:1 at 1000px), so the photo moves above the text and
     returns to its own aspect ratio. */
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split--media-first .split__media { order: 0; }
  .split__media { display: block; }
  .split__media > img,
  .split__media > .img-placeholder { flex: none; height: auto; }

  .nav__list { gap: 20px; }
  .nav__link { font-size: .87rem; }
  .header__actions .social-row { display: none; }

  .feature-row--4 { grid-template-columns: repeat(2, 1fr); }
  .feature-row--5 { grid-template-columns: repeat(3, 1fr); }
  .feature-row > * { border-left: none !important; padding: 18px; }
  .feature-row { gap: 8px; }

  .doctor-layout { grid-template-columns: 0.85fr 1fr; gap: 36px; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Mobile navigation drawer */
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    margin: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 28px var(--gutter) 40px;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .25s ease, visibility .25s ease;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__link { display: block; padding: 16px 4px; font-size: 1rem; }
  .nav__link[aria-current="page"]::after { display: none; }

  .nav > .nav__cta { display: block; margin-top: 26px; }
  .nav__cta .btn { width: 100%; }
  .nav > .nav__social { display: flex; margin-top: 24px; justify-content: center; }

  .header__actions { display: none; }

  body.nav-open { overflow: hidden; }

  /* Layout collapse */
  .trust-strip { grid-template-columns: 1fr; gap: 20px; max-width: none; }
  .trust-item { flex-direction: row; align-items: flex-start; gap: 14px; }
  .trust-item h3 { white-space: normal; }
  .trust-item p { max-width: none; }

  .card-grid { grid-template-columns: 1fr; }

  /* Stacked full width, so a landscape crop reads better than the square. */
  .split--inline .img-placeholder,
  .split--inline .media--1x1 { aspect-ratio: 4 / 3; }

  .service-card { grid-template-columns: 1fr; }
  .service-card--flip .service-card__media { order: 0; }
  .service-card__media { min-height: 0; }
  .service-card__media .img-placeholder { aspect-ratio: 16 / 9; }
  .service-card__media img { aspect-ratio: 16 / 9; }
  .service-card__body { padding: 30px 24px; }

  .doctor-layout { grid-template-columns: 1fr; gap: 32px; }
  /* Full width with no face to frame, a 4:5 panel is mostly empty — shorten it.
     A real portrait keeps its 4:5 crop. */
  .doctor-monogram { aspect-ratio: 3 / 2; }
  .experience-panel { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; text-align: center; }
  .experience-panel .experience-panel__icon { width: 100px; height: 100px; }
  .experience-panel .experience-panel__icon svg { width: 44px; height: 44px; }

  .footer-main { grid-template-columns: 1fr 1fr; gap: 32px; }

  .cta-band { flex-direction: column; align-items: flex-start; padding: 28px 26px; }
  .cta-band .btn { width: 100%; }
}

@media (max-width: 700px) {
  :root { --section-y: 56px; --section-y-sm: 40px; --gutter: 20px; }

  .form-grid { grid-template-columns: 1fr; }

  /* Opening hours read better as stacked label/value pairs than as two columns
     squeezed against opposite edges. */
  .hours-table__row { flex-direction: column; gap: 2px; }
  .hours-table__row span { text-align: left; }
  .check-list { grid-template-columns: 1fr; }
  .other-grid { grid-template-columns: repeat(2, 1fr); }
  .other-item + .other-item,
  .other-item:nth-child(8n + 1) { border-left: none; }
  .other-services { padding: 30px 20px; }

  .panel { padding: 28px 22px; }
  .panel__rule { margin-left: 0; }
  .hours-card { padding: 28px 24px; }

  .feature-row--4, .feature-row--5 { grid-template-columns: 1fr; }

  .footer-main { grid-template-columns: 1fr; gap: 28px; padding-block: 40px 32px; }
  .footer-bar .container { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* WhatsApp collapses to a circular icon so it never covers content */
  .wa-float {
    right: 16px; bottom: 16px;
    padding: 0;
    width: 54px; height: 54px;
    justify-content: center;
  }
  .wa-float span { display: none; }

  .map-panel iframe { height: 320px; }
}

@media (max-width: 420px) {
  .hero__actions .btn { width: 100%; }
  .section-head { margin-bottom: 34px; }
}

/* --------------------------------------------------------------------------
   22. MOTION + PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .card:hover, .wa-float:hover { transform: none; }
}

@media print {
  .site-header, .wa-float, .cta-band, .nav-toggle { display: none !important; }
  body { color: #000; }
}