/* =========================================================
   WESTDALE FAMILY CLINIC — "Soft Friendly Care"
   Warm, modern, approachable. Bricolage Grotesque headings,
   Figtree body. Fresh sage-green + warm coral accents,
   cream backgrounds, big radii, soft shadows, pill shapes.
   ========================================================= */

:root {
  --sage:      oklch(0.64 0.078 158);
  --sage-deep: oklch(0.46 0.062 160);   /* accessible text/links */
  --sage-soft: oklch(0.64 0.078 158 / 0.14);
  --sage-bg:   oklch(0.948 0.028 152);  /* tinted panel */
  --coral:     oklch(0.74 0.11 42);
  --coral-deep:oklch(0.6 0.11 38);
  --sand:      oklch(0.935 0.022 70);   /* warm secondary */
  --bg:        oklch(0.987 0.009 85);   /* warm cream */
  --card:      oklch(1 0 0);
  --ink:       oklch(0.28 0.012 160);   /* soft warm slate */
  --ink-soft:  oklch(0.46 0.012 160);
  --ink-faint: oklch(0.6 0.01 160);
  --line:      oklch(0.28 0.012 160 / 0.12);

  /* legacy aliases (used by inner page) */
  --teal: var(--sage);
  --teal-deep: var(--sage-deep);
  --teal-soft: var(--sage-soft);
  --teal-bg: var(--sage-bg);

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, sans-serif;

  --r: 16px;
  --r-lg: 26px;
  --r-xl: 40px;
  --shadow: 0 18px 40px -28px oklch(0.4 0.04 160 / 0.5);
  --shadow-lg: 0 30px 70px -40px oklch(0.4 0.05 160 / 0.55);

  --wrap: 1200px;
  --gut: clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--bg); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.04; margin: 0; letter-spacing: -0.015em; }

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

.eyebrow { font-family: var(--body); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-deep); margin: 0 0 1rem; display: inline-flex; align-items: center; gap: 0.6em; }
.eyebrow::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--sage-soft); border: 2px solid var(--sage); }

.lead { font-size: 1.18rem; color: var(--ink-soft); line-height: 1.6; max-width: 56ch; }

.btn { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--body); font-weight: 700; font-size: 0.95rem; padding: 0.9em 1.7em; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: transform .22s ease, background .22s ease, box-shadow .22s ease, color .22s ease, border-color .22s ease; }
.btn:hover { transform: translateY(-2px); }
.btn--teal { background: var(--sage); color: #fff; box-shadow: 0 10px 24px -12px oklch(0.55 0.08 158 / 0.8); }
.btn--teal:hover { background: var(--sage-deep); }
.btn--coral { background: var(--coral); color: oklch(0.25 0.03 40); box-shadow: 0 10px 24px -12px oklch(0.7 0.1 42 / 0.7); }
.btn--coral:hover { background: var(--coral-deep); color: #fff; }
.btn--ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--sage); color: var(--sage-deep); }
.btn--lg { font-size: 1.02rem; padding: 1.05em 2.1em; }

.arrow-link { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 700; color: var(--sage-deep); font-size: 0.95rem; }
.arrow-link span { transition: transform .2s ease; }
.arrow-link:hover span { transform: translateX(5px); }

/* nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 0.9rem var(--gut); transition: background .35s ease, box-shadow .35s ease, padding .35s ease; }
.nav__brand { display: flex; align-items: center; gap: 0.65rem; font-family: var(--display); font-weight: 600; font-size: 1.4rem; color: var(--ink); }
.nav__brand .dot { width: 34px; height: 34px; border-radius: 14px 14px 14px 5px; background: var(--sage); display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 700; font-size: 1rem; flex: none; }
.nav__brand small { display: block; font-family: var(--body); font-weight: 600; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.2rem); list-style: none; margin: 0; padding: 0; }
.nav__links a { font-weight: 600; font-size: 0.95rem; color: var(--ink-soft); transition: color .2s ease; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--sage-deep); }
.nav.scrolled, .nav--solid { background: oklch(0.987 0.009 85 / 0.9); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
@media (max-width: 720px) { .nav__links li:not(.nav__cta) { display: none; } }

/* footer */
.footer { background: oklch(0.3 0.022 162); color: oklch(0.97 0.01 85); padding: clamp(3rem,6vw,5rem) 0 2rem; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.6rem; border-bottom: 1px solid oklch(0.97 0.01 85 / 0.14); }
.footer__brand { display: flex; align-items: center; gap: 0.65rem; font-family: var(--display); font-weight: 600; font-size: 1.7rem; }
.footer__brand .dot { width: 34px; height: 34px; border-radius: 14px 14px 14px 5px; background: var(--sage); display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 700; }
.footer p, .footer li { color: oklch(0.97 0.01 85 / 0.72); font-size: 0.95rem; }
.footer h4 { font-family: var(--body); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1rem; color: oklch(0.97 0.01 85 / 0.9); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; font-size: 0.82rem; color: oklch(0.97 0.01 85 / 0.55); }
@media (max-width: 720px) { .footer__top { grid-template-columns: 1fr; gap: 2rem; } }

/* photo helper */
.ph { position: relative; overflow: hidden; background: var(--sage-bg); }
.ph img { width: 100%; height: 100%; object-fit: cover; }

/* avatar fallback */
.avatar { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 2rem; color: #fff; flex: none; }
.av-1 { background: linear-gradient(145deg, var(--sage), var(--sage-deep)); }
.av-2 { background: linear-gradient(145deg, var(--coral), var(--coral-deep)); }
.av-3 { background: linear-gradient(145deg, oklch(0.7 0.07 120), oklch(0.55 0.06 140)); }

/* icon chip */
.iconchip { width: 56px; height: 56px; border-radius: 16px; background: var(--sage-soft); display: grid; place-items: center; color: var(--sage-deep); }
.iconchip svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* reveal */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* section */
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section--tint { background: var(--sage-bg); }
.section--sand { background: var(--sand); }
.section-head { max-width: 60ch; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.section-head h2 { font-size: clamp(2.3rem, 5vw, 3.5rem); }
.section-head .lead { margin-top: 1.1rem; }