/*
  Waverly Family Medicine (H6)
  Harmony: ANALOGOUS on the blue side of the wheel (indigo 230deg, cobalt 228deg, lilac 242deg). Blue is the color of
  trust and calm; the photo shoot (Nappy Studio) is full of blue scrubs and blue stethoscope tubing, so the palette
  is lifted straight from it. One saturated cobalt is the single memorable accent; everything else is quiet.
  60%  --paper   #F7F9FC  page background (cool white)
  30%  --indigo  #1B2559  headings, body ink, dark bands
       --slate   #4A5578  secondary text
       --sky     #DDE6FB  tints, tile backgrounds
       --lilac   #C9C6F5  soft violet tint on dark bands
  10%  --cobalt  #2B4FD8  buttons, links, selected states
  Contrast (WCAG): indigo on paper 13.68, slate on paper 6.96, cobalt on paper 6.20, white on cobalt 6.54,
  paper on indigo 13.68, sky on indigo 11.53, lilac on indigo 8.85, indigo on sky 11.53, cobalt on sky 5.22.
  Shapes: panels 20px, tiles 14px, inputs 10px, buttons pill.
*/
:root {
  --paper: #F7F9FC; --indigo: #1B2559; --slate: #4A5578; --sky: #DDE6FB; --lilac: #C9C6F5; --cobalt: #2B4FD8;
  --cobalt-deep: #1F3DB0; --line: #D3DAEA; --white: #FFFFFF;
  --display: "Bricolage Grotesque", "Manrope", sans-serif; --body: "Manrope", system-ui, sans-serif;
  --pad: clamp(1.1rem, 4vw, 4rem); --max: 1280px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--indigo); font: 400 1.0625rem/1.6 var(--body); overflow-x: hidden; font-feature-settings: "kern" 1; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.05; margin: 0; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); font-weight: 650; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.3rem; letter-spacing: -.015em; }
p { margin: 0; }
p + p { margin-top: .9em; }
.muted { color: var(--slate); }
.lede { font-size: 1.2rem; max-width: 34em; color: var(--slate); }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hide { display: none !important; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--indigo); color: var(--paper); padding: .6rem 1rem; z-index: 60; border-radius: 8px; }
.skip:focus { top: 1rem; }
.wrap { width: min(100% - 2 * var(--pad), var(--max)); margin-inline: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: .75rem 1.5rem; font: 700 .95rem/1 var(--body); text-decoration: none; border: 2px solid transparent; border-radius: 999px; cursor: pointer; transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn--cobalt { background: var(--cobalt); color: var(--white); }
.btn--cobalt:hover { background: var(--cobalt-deep); }
.btn--ghost { border-color: var(--indigo); color: var(--indigo); background: transparent; }
.btn--ghost:hover { background: var(--indigo); color: var(--paper); }
.btn--paper { background: var(--paper); color: var(--indigo); }
.btn--paper:hover { background: var(--sky); }
.btn--wide { width: 100%; }
.link { color: var(--cobalt); font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; }
.link:hover { border-bottom-color: currentColor; }

/* Header */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top__in { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.logo { display: flex; align-items: center; gap: .65rem; text-decoration: none; font: 700 1.05rem/1 var(--display); letter-spacing: -.02em; margin-right: auto; }
.logo svg { width: 36px; height: 36px; flex: none; }
.nav { display: flex; gap: clamp(1rem, 2.4vw, 2.1rem); font-weight: 600; font-size: .95rem; }
.nav a { text-decoration: none; padding: .4rem 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--cobalt); }
.top .btn { min-height: 44px; padding-inline: 1.2rem; }
.burger { display: none; min-height: 44px; padding: .5rem .9rem; border: 2px solid var(--indigo); border-radius: 999px; background: transparent; font: 700 .9rem var(--body); color: var(--indigo); cursor: pointer; }

/* Hero */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3.5rem); }
.hero__copy { display: grid; gap: 1.4rem; align-content: center; }
.hero h1 { max-width: 11em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__media { position: relative; }
.hero__media img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: 24px; }
.hero__tag { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; background: var(--white); border-radius: 14px; padding: .9rem 1rem; display: grid; gap: .2rem; box-shadow: 0 12px 30px rgba(27, 37, 89, .16); }
.hero__tag b { font-family: var(--display); font-size: 1.05rem; }
.hero__tag span { font-size: .9rem; color: var(--slate); }

/* Triage band */
.triage { padding: clamp(2rem, 5vw, 4rem) 0; }
.triage__head { display: grid; gap: .6rem; max-width: 40em; margin-bottom: 1.6rem; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.tile { background: var(--sky); border-radius: 14px; padding: 1.3rem 1.2rem 1.2rem; text-decoration: none; display: grid; gap: .55rem; align-content: start; transition: transform .2s ease, background-color .2s ease; min-height: 200px; }
.tile:hover { background: var(--white); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(27, 37, 89, .12); }
.tile__kind { font: 700 .8rem/1 var(--body); color: var(--cobalt); }
.tile h3 { font-size: 1.35rem; }
.tile p { color: var(--slate); font-size: .95rem; }
.tile__wait { margin-top: auto; font: 700 .9rem/1.3 var(--body); padding-top: .8rem; border-top: 1px solid rgba(27, 37, 89, .14); }

/* Services teaser */
.svc { padding: clamp(2rem, 5vw, 4rem) 0; border-top: 1px solid var(--line); }
.svc__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.svc__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.svc__list li { list-style: none; padding: 1rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .2rem; }
.svc__list ul, .svc__list { margin: 0; padding: 0; }
.svc__list b { font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
.svc__list span { color: var(--slate); font-size: .95rem; }

/* New patient steps (a real sequence) */
.steps { background: var(--indigo); color: var(--paper); padding: clamp(2.5rem, 6vw, 5rem) 0; }
.steps h2 { color: var(--paper); }
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.step { border-top: 2px solid var(--lilac); padding-top: 1rem; display: grid; gap: .5rem; }
.step__n { font: 600 .95rem/1 var(--display); color: var(--lilac); }
.step h3 { color: var(--paper); }
.step p { color: color-mix(in srgb, var(--paper) 78%, var(--lilac)); }
.steps .btn { margin-top: 2rem; }

/* Team teaser */
.team { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 1.8rem; }
.person { display: grid; gap: .6rem; text-decoration: none; }
.person img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.person b { font-family: var(--display); font-size: 1.15rem; font-weight: 600; }
.person span { color: var(--slate); font-size: .95rem; }
.person--tall img { aspect-ratio: 3 / 4; }

/* Practical: hours, address, insurance */
.practical { border-top: 1px solid var(--line); padding: clamp(2rem, 5vw, 4rem) 0; }
.practical__grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 2rem; }
.hours { display: grid; gap: .35rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .98rem; }
.hours li b { font-weight: 600; }
.open-now { display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem; font-weight: 700; font-size: .95rem; color: var(--cobalt); }
.open-now i { width: 10px; height: 10px; border-radius: 50%; background: var(--cobalt); display: inline-block; }
.open-now.is-closed { color: var(--slate); }
.open-now.is-closed i { background: var(--slate); }

/* Footer */
.foot { background: var(--white); border-top: 1px solid var(--line); padding: 2rem 0; }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .9rem; color: var(--slate); }
.foot a { color: inherit; }

/* Page headers */
.page-head { padding: clamp(2rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: .9rem; }
.page-head > * { max-width: 46em; }

/* Services page */
.svc-cats { display: grid; gap: 1.2rem; padding-bottom: clamp(2rem, 5vw, 4rem); }
.cat { display: grid; grid-template-columns: .9fr 1.4fr; gap: clamp(1.2rem, 3vw, 3rem); background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: clamp(1.2rem, 3vw, 2.2rem); }
.cat--photo { grid-template-columns: 1fr 1fr; padding: 0; overflow: hidden; }
.cat--photo img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.cat--photo .cat__body { padding: clamp(1.2rem, 3vw, 2.2rem); }
.cat h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.cat__intro { color: var(--slate); margin-top: .6rem; max-width: 30em; }
.cat__items { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.cat__items li { display: grid; gap: .15rem; padding-left: 1rem; border-left: 3px solid var(--sky); }
.cat__items b { font-weight: 700; }
.cat__items span { color: var(--slate); font-size: .93rem; }

/* Team page */
.team-list { display: grid; gap: 1.2rem; padding-bottom: clamp(2rem, 5vw, 4rem); }
.doc { display: grid; grid-template-columns: 300px 1fr; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.doc img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.doc__body { padding: clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem) 0; display: grid; gap: .7rem; }
.doc__role { color: var(--cobalt); font-weight: 700; font-size: .95rem; }
.doc__facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 0; padding: 0; list-style: none; }
.doc__facts li { background: var(--sky); border-radius: 999px; padding: .35rem .8rem; font-size: .85rem; font-weight: 600; }
.staff { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.staff li { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; display: grid; gap: .2rem; }
.staff b { font-family: var(--display); font-weight: 600; }
.staff span { color: var(--slate); font-size: .92rem; }

/* Appointments page: triage + form */
.book { display: grid; grid-template-columns: 1.3fr .9fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; padding-bottom: clamp(2rem, 5vw, 4rem); }
.chooser { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.chooser label { display: grid; gap: .3rem; padding: 1rem 1rem 1rem 3rem; background: var(--white); border: 2px solid var(--line); border-radius: 14px; cursor: pointer; position: relative; min-height: 96px; transition: border-color .15s ease, background-color .15s ease; }
.chooser label::before { content: ""; position: absolute; left: 1rem; top: 1.15rem; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--slate); background: var(--white); }
.chooser label::after { content: ""; position: absolute; left: calc(1rem + 5px); top: calc(1.15rem + 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--cobalt); transform: scale(0); transition: transform .15s ease; }
.chooser input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chooser input:checked + label { border-color: var(--cobalt); background: var(--sky); }
.chooser input:checked + label::before { border-color: var(--cobalt); }
.chooser input:checked + label::after { transform: scale(1); }
.chooser input:focus-visible + label { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.chooser b { font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
.chooser span { color: var(--slate); font-size: .9rem; }
.form { display: grid; gap: 1rem; background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: clamp(1.2rem, 3vw, 2rem); }
.form h2 { font-size: 1.5rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field label, .field > span { font-weight: 700; font-size: .93rem; }
.field input, .field select, .field textarea { font: 400 1rem/1.4 var(--body); color: var(--indigo); padding: .75rem .9rem; border: 2px solid var(--line); border-radius: 10px; background: var(--paper); width: 100%; min-height: 48px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--cobalt); outline-offset: 1px; border-color: var(--cobalt); }
.field textarea { min-height: 110px; resize: vertical; }
.field small { color: var(--slate); font-size: .85rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips label { padding: .55rem .95rem; border: 2px solid var(--line); border-radius: 999px; font-weight: 600; font-size: .92rem; cursor: pointer; background: var(--paper); min-height: 44px; display: inline-flex; align-items: center; }
.chips input:checked + label { border-color: var(--cobalt); background: var(--cobalt); color: var(--white); }
.chips input:focus-visible + label { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.panel { display: grid; gap: .5rem; }
.panel[hidden] { display: none; }
.note { font-size: .88rem; color: var(--slate); }
.alert { background: var(--sky); border-radius: 12px; padding: .9rem 1rem; font-size: .95rem; display: grid; gap: .3rem; }
.alert b { font-family: var(--display); }
.success[hidden] { display: none; }
.success { display: grid; gap: .8rem; background: var(--sky); border-radius: 20px; padding: 2rem; }
.success h2 { font-size: 1.7rem; }

.expect { position: sticky; top: 92px; display: grid; gap: 1rem; }
.expect__card { background: var(--indigo); color: var(--paper); border-radius: 20px; padding: 1.6rem; display: grid; gap: .9rem; }
.expect__card h2 { color: var(--paper); font-size: 1.3rem; }
.expect__big { font: 650 clamp(2rem, 3vw, 2.6rem)/1 var(--display); letter-spacing: -.03em; color: var(--lilac); }
.expect__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.expect__list li { display: flex; gap: .7rem; align-items: start; font-size: .95rem; color: color-mix(in srgb, var(--paper) 80%, var(--lilac)); }
.expect__list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lilac); margin-top: .5rem; }
.expect__call { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 1.4rem; display: grid; gap: .5rem; }
.expect__call a.tel { font: 650 1.6rem/1.1 var(--display); text-decoration: none; letter-spacing: -.02em; }

/* New patient guide (appointments page) */
.guide { padding: clamp(2rem, 5vw, 4rem) 0; border-top: 1px solid var(--line); }
.guide__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.6rem; }
.qa { border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.qa summary { cursor: pointer; padding: 1rem 1.2rem; font: 600 1.05rem/1.3 var(--display); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--cobalt); }
.qa[open] summary::after { content: "\2212"; }
.qa div { padding: 0 1.2rem 1.2rem; color: var(--slate); }

/* Entrance on the hero only, one orchestrated moment */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); animation: rise .7s cubic-bezier(.2, .7, .2, 1) forwards; }
  .rise:nth-child(2) { animation-delay: .1s; } .rise:nth-child(3) { animation-delay: .2s; } .rise:nth-child(4) { animation-delay: .3s; }
  .hero__media { opacity: 0; animation: rise .8s .25s cubic-bezier(.2, .7, .2, 1) forwards; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

@media (max-width: 1000px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .practical__grid { grid-template-columns: 1fr 1fr; }
  .staff { grid-template-columns: 1fr 1fr; }
  .book { grid-template-columns: 1fr; }
  .expect { position: static; }
}
@media (max-width: 800px) {
  .nav, .top .btn--cobalt { display: none; }
  .burger { display: inline-flex; }
  .top.is-open .nav { display: grid; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); padding: 1rem var(--pad) 1.4rem; gap: .3rem; font-size: 1.1rem; }
  .top.is-open .nav a { padding: .7rem 0; }
  .hero { grid-template-columns: 1fr; }
  .hero__media img { aspect-ratio: 4 / 3.4; }
  .svc__grid, .cat, .cat--photo, .doc, .guide__grid, .row { grid-template-columns: 1fr; }
  .doc__body { padding: 1.2rem; }
  .steps__grid, .team__grid { grid-template-columns: 1fr; }
  .practical__grid { grid-template-columns: 1fr; }
  .svc__list, .cat__items { grid-template-columns: 1fr; }
  .chooser { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 0; }
  .cat--photo img { min-height: 220px; max-height: 300px; }
  .doc img { max-height: 320px; }
}