/* ==========================================================================
   Pickering Medical Centre - site stylesheet
   Depends on tokens.css. No colour, size or spacing literal should appear
   below without a very good reason; everything resolves to a token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   Self-hosted so the site makes no third-party request and the CSP can stay
   locked to 'self'.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/assets/fonts/atkinson-hyperlegible-next.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-s));
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  /* Guards every page against a stray wide child creating a sideways scroll. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--color-blue); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--color-green-800); }

/* One visible focus treatment for the whole site, never removed. The blue ring
   vanishes against the navy bands, so those flip it to white. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}
.utility-bar :focus-visible,
.mobile-actions :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.hero-panel :focus-visible,
.service-panel :focus-visible {
  outline-color: var(--color-focus-invert);
}

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: var(--space-s);
  z-index: 100;
  padding: var(--space-2xs) var(--space-s);
  background: var(--color-blue-900);
  color: #fff;
  border-left: 4px solid var(--color-green);
  border-radius: var(--radius-m);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); color: #fff; }

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--width-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-section); }
.section--about { background: var(--color-background); }
.section--services { background: var(--color-surface); }
.section--team { background: var(--color-background); }
.section--reviews { background: var(--color-surface); }
.section--surface { background: var(--color-surface); }
.section--tight { padding-block: var(--space-xl); }

.section__head { margin-bottom: var(--space-xl); }
.section__head--split {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 62rem) {
  .section__head--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-2xl); }
}

.section__title { font-size: var(--step-4); max-width: 20ch; }
.section__intro { color: var(--color-text-soft); max-width: var(--measure); }
.section__intro--loose { margin-bottom: var(--space-xl); }
.section__foot { margin-top: var(--space-xl); }

/* A blue heading over a short green rule: the two brand colours meeting at
   every section opener, which is the client's "infuse both" note at the level
   of page structure rather than as decoration. */
.section__title--rule {
  margin-bottom: var(--space-l);
  padding-bottom: var(--space-s);
  color: var(--color-blue);
  border-bottom: 1px solid var(--color-border);
  max-width: none;
  position: relative;
}
.section__title--rule::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 4.5rem;
  height: 3px;
  background: var(--color-green);
  border-radius: var(--radius-full);
}

.eyebrow {
  margin-bottom: var(--space-2xs);
  color: var(--color-blue);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
/* The green marker carries no meaning on its own — the label beside it does —
   so colour is never the only channel here. */
.eyebrow--marked {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.eyebrow--marked::before {
  content: '';
  width: 1.75rem;
  height: 3px;
  flex-shrink: 0;
  background: var(--color-green);
  border-radius: var(--radius-full);
}

.disclaimer {
  max-width: var(--measure);
  padding: var(--space-m) var(--space-l);
  border-left: 4px solid var(--color-green);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  background: var(--color-green-50);
  color: var(--color-text-soft);
  font-size: var(--step--1);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 3rem;              /* comfortable tap target on touch */
  padding: var(--space-2xs) var(--space-m);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-m);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-soft),
    border-color var(--dur-fast) var(--ease-soft),
    color var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--sm { min-height: 2.5rem; padding-inline: var(--space-s); font-size: var(--step--1); }

.btn--primary { --btn-bg: var(--color-blue); --btn-fg: #fff; --btn-border: var(--color-blue); }
.btn--primary:hover { --btn-bg: var(--color-blue-800); --btn-border: var(--color-blue-800); color: #fff; }

/* The green partner to the blue button. It uses --color-green-700, not the
   brand green, because white text on the brand green clears only 2.5:1. */
.btn--green { --btn-bg: var(--color-green-700); --btn-fg: #fff; --btn-border: var(--color-green-700); }
.btn--green:hover { --btn-bg: var(--color-green-800); --btn-border: var(--color-green-800); color: #fff; }

.btn--ghost { --btn-fg: var(--color-blue); --btn-border: var(--color-border-strong); }
.btn--ghost:hover { --btn-bg: var(--color-blue-50); --btn-border: var(--color-blue); color: var(--color-blue); }

.btn--onDark { --btn-bg: #fff; --btn-fg: var(--color-blue); --btn-border: #fff; }
.btn--onDark:hover { --btn-bg: var(--color-green-100); color: var(--color-green-800); --btn-border: var(--color-green-100); }

.btn--onDarkGhost { --btn-fg: #fff; --btn-border: rgb(255 255 255 / 0.5); }
.btn--onDarkGhost:hover { --btn-bg: rgb(255 255 255 / 0.12); --btn-border: var(--color-green); color: #fff; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-weight: 600;
  text-decoration: none;
}
.link-arrow::after {
  content: '\2192';
  transition: transform var(--dur-fast) var(--ease-out);
}
.link-arrow:hover::after { transform: translateX(3px); }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15em var(--space-2xs);
  border-radius: var(--radius-full);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.chip--accepting { background: var(--color-green); color: var(--color-blue-800); }

/* --------------------------------------------------------------------------
   5. Header and navigation
   -------------------------------------------------------------------------- */
.utility-bar {
  background: var(--color-blue-900);
  /* The green hairline is the first place the two colours meet on the page. */
  border-bottom: 3px solid var(--color-green);
  color: #fff;
  font-size: var(--step--1);
}
.utility-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-m);
  padding-block: var(--space-2xs);
}
.utility-bar__notice { display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap; }
.utility-bar__contact { display: flex; gap: var(--space-m); }
/* Inline links need a real tap target on touch. WCAG 2.5.8 asks for at least
   24x24 CSS pixels; bare 17px text does not reach it. */
.utility-bar a { display: inline-block; padding-block: 4px; color: #fff; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--dur-base) var(--ease-soft);
}
.site-header[data-scrolled] { box-shadow: var(--shadow-sm); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-height);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-primary-dark);
  text-decoration: none;
  flex-shrink: 0;
}
.wordmark__mark { display: block; width: 2.1rem; color: var(--color-primary); }
.wordmark__mark svg { width: 100%; height: auto; }
.wordmark__text { display: flex; flex-direction: column; line-height: 1.05; }
.wordmark__name {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.wordmark__suffix {
  /* 12px floor: below this the subtitle stops being comfortably readable,
     particularly at 320px where it is already the smallest text on screen. */
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

.nav-toggle {
  position: relative;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding: var(--space-3xs) var(--space-2xs);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle__bars span {
  display: block; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
}
[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.primary-nav__list { display: flex; }
.primary-nav__link {
  position: relative;
  display: block;
  padding: var(--space-2xs) 0;
  color: var(--color-text-soft);
  font-weight: 600;
  text-decoration: none;
  /* A wrapped label breaks the row onto three lines and collides with the
     header buttons, so labels shrink the row rather than fold inside it. */
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-soft);
}
.primary-nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--color-green);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
/* The current page is marked by weight and colour as well as the green rule,
   and carries aria-current, so the rule is never the only signal. */
.primary-nav__link:hover,
.primary-nav__link[aria-current='page'] { color: var(--color-blue); }
.primary-nav__link[aria-current='page'] { font-weight: 700; }
.primary-nav__link:hover::after,
.primary-nav__link[aria-current='page']::after { transform: scaleX(1); }

/* --- Mobile navigation (below 64rem) --- */
@media (max-width: 77.99rem) {
  .primary-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    align-content: start;
    gap: var(--space-l);
    padding: calc(var(--header-height) + var(--space-l)) var(--gutter) var(--space-2xl);
    background: var(--color-background);
    overflow-y: auto;
    /* Off-canvas until opened. `visibility` keeps it out of the tab order. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out),
      visibility 0s linear var(--dur-base);
  }
  body[data-menu-open] .primary-nav {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }
  body[data-menu-open] { overflow: hidden; }

  .primary-nav__list { flex-direction: column; gap: var(--space-2xs); }
  .primary-nav__link {
    padding: var(--space-xs) 0 var(--space-xs) var(--space-s);
    font-size: var(--step-2);
    font-family: var(--font-heading);
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid transparent;
    transition: border-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
  }
  .primary-nav__link::after { display: none; }
  .primary-nav__link[aria-current='page'] { border-left-color: var(--color-green); }
  .primary-nav__actions { display: grid; gap: var(--space-2xs); }
  .primary-nav__actions .btn { width: 100%; }
}

@media (min-width: 78rem) {
  /* The header and utility bar share the page container, so the logo and the
     last nav button line up with the content edges below them instead of
     stretching wider than the page on large screens. */
  .site-header__inner,
  .utility-bar__inner { max-width: var(--width-page); }
  .nav-toggle { display: none; }
  .primary-nav { display: flex; align-items: center; gap: var(--space-s); }
  .primary-nav__list { gap: var(--space-xs); }
  /* Nine links plus two buttons only clear 1248px when the row may tighten. */
  .primary-nav__actions { display: flex; flex-shrink: 0; gap: var(--space-2xs); }
  .primary-nav__actions .btn { white-space: nowrap; }
  /* Qualified so it outranks the base logo width declared further down. */
  .wordmark .wordmark__logo { width: 12rem; }
}

/* The desktop row begins at 78rem, but it needs a tighter rhythm through the
   common 1280–1399px laptop range. Without this band, the last action button
   extends past the viewport on longer pages with a scrollbar. */
@media (min-width: 78rem) and (max-width: 87.49rem) {
  .primary-nav { gap: var(--space-s); }
  .primary-nav__list { gap: clamp(var(--space-3xs), 0.8vw, var(--space-2xs)); }
  .primary-nav__link { font-size: var(--step--1); padding-inline: var(--space-3xs); }
  .wordmark .wordmark__logo { width: clamp(8.75rem, 9.5vw, 10.5rem); }
}

.wordmark__logo { display: block; width: clamp(10.5rem, 19vw, 15.5rem); height: auto; }
.hours-disclaimer { margin-top: var(--space-s); color: var(--color-muted); font-size: var(--step--1); max-width: 42ch; }
.notice--spaced { margin-top: var(--space-xl); }
.mobile-actions { display: none; }
.section__intro address { display: grid; font-style: normal; margin-bottom: var(--space-s); }
.announcement-list { display: grid; gap: var(--space-s); }
.announcement-card { padding: var(--space-l); border: 1px solid var(--color-border); border-left: 4px solid var(--color-green); border-radius: var(--radius-m); background: var(--color-background); }
.announcement-card h3 { margin-bottom: var(--space-2xs); color: var(--color-blue); }

@media (max-width: 77.99rem) {
  .mobile-actions { display: grid; grid-template-columns: 1fr 1fr; min-height: 3.25rem; background: var(--color-blue-900); border-top: 3px solid var(--color-green); }
  .mobile-actions a { display: grid; place-items: center; min-height: 3.25rem; padding: var(--space-2xs); color: #fff; font-weight: 700; text-decoration: none; }
  .mobile-actions a + a { border-left: 1px solid rgb(255 255 255 / 0.35); }
}

@media (max-width: 34rem) {
  .utility-bar__contact li:last-child { display: none; }
  .utility-bar__notice-text { font-size: var(--step--1); }
  .site-header__inner { gap: var(--space-2xs); }
  .wordmark__logo { width: 10.25rem; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-l) var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  /* Two soft washes rather than one gradient wall: blue entering top right,
     green rising bottom left, with the page staying white where the text is. */
  background:
    radial-gradient(52rem 30rem at 88% -12%, var(--color-blue-50), transparent 68%),
    radial-gradient(40rem 26rem at -8% 108%, var(--color-green-50), transparent 66%),
    var(--color-background);
}
.hero__inner { position: relative; z-index: 1; }

/* Decorative motion: the clinic's own mark, drawn once on load.
   It sits behind the content (z-index 0 under .hero__inner's 1), is absolutely
   positioned so it can never shift layout, and is sized from the hero's own
   height so it cannot outgrow the section. Everything animated is stroke,
   opacity or transform on one small SVG, and it runs once, not in a loop. */
.hero__figure {
  position: relative;
  isolation: isolate;
}
.hero__art {
  position: absolute;
  inset: -9% -20% -18%;
  z-index: -1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
/* Stacked layout: the panel spans the full column, so the halo stays within
   the column rather than being sized past the screen edge. */
@media (max-width: 61.99rem) {
  .hero__art { inset: -4% 0 -12%; }
}
.hero-mark {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  overflow: visible;
}
.hero-mark__fill { fill: var(--color-blue); opacity: 0.07; }
.hero-mark__cross { fill: var(--color-green); opacity: 0.16; }
.hero-mark__trace {
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.32;
}
.hero-mark__pulse {
  fill: none;
  stroke: var(--color-green);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 0.06 0.94;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-mark__trace {
    stroke-dasharray: 1;
    animation: hero-mark-draw 2.2s var(--ease-out) 0.15s both;
  }
  .hero-mark__fill { animation: hero-mark-fill 1.2s var(--ease-soft) 1.3s both; }
  .hero-mark__cross {
    transform-box: fill-box;
    transform-origin: center;
    animation: hero-mark-cross 0.9s var(--ease-out) 1.6s both;
  }
  .hero-mark__pulse { animation: hero-mark-pulse 2.4s var(--ease-soft) 2.3s both; }
}
@keyframes hero-mark-draw {
  from { stroke-dashoffset: 1; opacity: 0.5; }
  to { stroke-dashoffset: 0; opacity: 0.32; }
}
@keyframes hero-mark-fill {
  from { opacity: 0; }
  to { opacity: 0.07; }
}
@keyframes hero-mark-cross {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 0.16; transform: scale(1); }
}
@keyframes hero-mark-pulse {
  0% { stroke-dashoffset: 1; opacity: 0; }
  15% { opacity: 0.85; }
  85% { opacity: 0.85; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
/* Three areas: the headline, the patient tasks and the hours card. Phones
   read them in source order (headline, tasks, hours); from 62rem the hours
   card takes the right column beside both, so every patient action and the
   opening times share the first screen. */
.hero__inner {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.hero__title { font-size: var(--step-4); max-width: 16ch; margin-block: var(--space-2xs) var(--space-s); }
/* The wordmark sets "PICKERING WALK-IN" in blue and "AND FAMILY PRACTICE" in
   green. The headline repeats that split so the page and the logo agree. */
.hero__title-lead,
.hero__title-accent { display: block; }
.hero__title-lead { color: var(--color-blue); }
.hero__title-accent { color: var(--color-green-700); }
.hero__summary { max-width: 54ch; color: var(--color-text-soft); font-size: var(--step-1); line-height: var(--leading-snug); }
.hero__reassurance {
  margin-top: var(--space-s);
  color: var(--color-muted);
  font-size: var(--step--1);
}
.notice--compact { margin: var(--space-s) 0 0; padding: var(--space-xs) var(--space-s); }

@media (min-width: 62rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.45fr) minmax(19rem, 1fr);
    grid-template-areas: 'copy figure' 'tasks figure';
    grid-template-rows: auto 1fr;
    gap: var(--space-l) var(--space-2xl);
  }
  .hero__copy { grid-area: copy; }
  .hero__tasks { grid-area: tasks; }
  .hero__figure { grid-area: figure; }
}

/* --------------------------------------------------------------------------
   6a. Patient task tiles
   The four things most visitors came to do, as large, fully clickable tiles
   (every tile clears 4rem in height). Register and appointment carry the two
   brand colours; call and directions are white so the pair reads as primary.
   -------------------------------------------------------------------------- */
.hero__actions {
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 36rem) { .hero__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.task {
  --task-bg: var(--color-background);
  --task-fg: var(--color-blue);
  --task-sub: var(--color-text-soft);
  --task-icon-bg: var(--color-blue-50);
  --task-border: var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-s);
  height: 100%;
  min-height: 4.25rem;
  padding: var(--space-s);
  border: 1px solid var(--task-border);
  border-radius: var(--radius-l);
  background: var(--task-bg);
  color: var(--task-fg);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft),
    border-color var(--dur-fast) var(--ease-soft),
    background-color var(--dur-fast) var(--ease-soft);
}
.task:hover { color: var(--task-fg); border-color: var(--color-blue); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.task--blue { --task-bg: var(--color-blue); --task-fg: #fff; --task-sub: rgb(255 255 255 / 0.88); --task-icon-bg: rgb(255 255 255 / 0.14); --task-border: var(--color-blue); }
.task--blue:hover { --task-bg: var(--color-blue-800); border-color: var(--color-blue-800); }
/* --color-green-700, not the brand green: white on the brand green is 2.5:1. */
.task--green { --task-bg: var(--color-green-700); --task-fg: #fff; --task-sub: #fff; --task-icon-bg: rgb(255 255 255 / 0.16); --task-border: var(--color-green-700); }
.task--green:hover { --task-bg: var(--color-green-800); border-color: var(--color-green-800); }
.task__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-m);
  background: var(--task-icon-bg);
}
.task__icon svg { width: 1.5rem; height: 1.5rem; }
.task__text { display: grid; gap: 0.1rem; min-width: 0; }
.task__title { font-weight: 700; line-height: var(--leading-snug); }
.task__detail { color: var(--task-sub); font-size: var(--step--1); line-height: 1.4; }
.task__detail--strong { color: var(--task-fg); font-family: var(--font-heading); font-size: var(--step-1); font-weight: 600; }

/* --------------------------------------------------------------------------
   6b. Hero panel: clinic hours
   The clinic's storefront sign is a deep blue panel under a green header bar.
   That composition now carries the week's hours. Today is marked by weight, a
   lighter band and a green edge bar, so colour is never the only signal.
   -------------------------------------------------------------------------- */
.hero-panel {
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--color-blue);
  box-shadow: var(--shadow-lg);
  color: #fff;
}
.hero-panel__bar {
  padding: var(--space-xs) var(--space-l);
  background: var(--color-green);
  /* Navy on the brand green reaches 5.0:1, where white would reach only 2.5. */
  color: var(--color-blue-800);
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
}
.hero-hours { margin: 0; padding: var(--space-s) var(--space-m) var(--space-2xs); }
.hero-hours__row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-s);
  padding: 0.4rem var(--space-2xs);
  border-left: 3px solid transparent;
  border-radius: var(--radius-s);
}
.hero-hours__row + .hero-hours__row { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12); }
.hero-hours dt { color: rgb(255 255 255 / 0.85); white-space: nowrap; }
.hero-hours dd { margin: 0 0 0 auto; font-weight: 600; text-align: right; white-space: nowrap; }
.hero-hours__row.is-closed dd { color: rgb(255 255 255 / 0.8); font-weight: 400; }
.hero-hours__row.is-today { background: rgb(255 255 255 / 0.12); border-left-color: var(--color-green); box-shadow: none; }
.hero-hours__row.is-today + .hero-hours__row { box-shadow: none; }
.hero-hours__row.is-today dt,
.hero-hours__row.is-today dd { color: #fff; font-weight: 800; }
.hero-panel__note {
  padding: 0 var(--space-m) var(--space-s);
  color: rgb(255 255 255 / 0.8);
  font-size: var(--step--1);
  line-height: 1.45;
}
.hero-panel__call {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3xs) var(--space-s);
  margin: 0 var(--space-m) var(--space-m);
  padding: var(--space-xs) var(--space-s);
  border: 1px solid rgb(255 255 255 / 0.35);
  border-left: 4px solid var(--color-green);
  border-radius: var(--radius-m);
  color: #fff;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.hero-panel__call:hover { background: rgb(255 255 255 / 0.1); border-color: var(--color-green); color: #fff; }
.hero-panel__call-label {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.82);
}
.hero-panel__call-number { font-family: var(--font-heading); font-size: var(--step-2); font-weight: 600; }

/* Between phone and desktop the card spans the full width, so the week
   splits into two columns instead of one long list. */
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .hero-hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: var(--space-l); }
  .hero-hours__row:nth-child(5) { box-shadow: none; }
}

@media (max-width: 30rem) {
  .hero-hours { padding-inline: var(--space-s); }
  .hero-hours__row { padding-inline: var(--space-3xs); gap: var(--space-2xs); }
  .hero-panel__note { padding-inline: var(--space-s); }
  .hero-panel__call { margin-inline: var(--space-s); }
  .hero-panel__bar { padding-inline: var(--space-m); font-size: var(--step-0); }
}

/* --------------------------------------------------------------------------
   7. Placeholder figure
   An honest, designed stand-in for photography the client has not sent.
   -------------------------------------------------------------------------- */
.figure-placeholder {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--color-primary-tint);
}
.figure-placeholder--hero { aspect-ratio: 5 / 6; }
.figure-placeholder__art { width: 100%; height: 100%; object-fit: cover; }
.figure-placeholder__note {
  position: absolute;
  left: var(--space-s);
  bottom: var(--space-s);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-s);
  background: rgb(255 255 255 / 0.85);
  color: var(--color-muted);
  font-size: var(--step--1);
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   8. At-a-glance band
   -------------------------------------------------------------------------- */
.glance {
  padding-block: var(--space-xl);
  background: var(--color-surface);
  border-top: 3px solid var(--color-green);
  border-bottom: 1px solid var(--color-border);
}
.glance__grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) { .glance__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); } }

.glance__title {
  margin-bottom: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-blue);
}
.glance__address { font-style: normal; display: grid; }
.glance__address span { display: block; }
.glance__item--cta p { color: var(--color-text-soft); margin-bottom: var(--space-s); }
.glance__item .link-arrow { margin-top: var(--space-2xs); }

.hours-list { display: grid; gap: var(--space-3xs); }
.hours-list__row { display: flex; justify-content: space-between; gap: var(--space-s); }
.hours-list dt { color: var(--color-text-soft); }
.hours-list dd { margin: 0; font-weight: 600; text-align: right; }

/* --------------------------------------------------------------------------
   9. Pillars
   -------------------------------------------------------------------------- */
.pillars {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: minmax(0, 1fr);
  border-top: 2px solid var(--color-blue-100);
}
@media (min-width: 48rem) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); } }

/* A short green segment rather than a full-width rule: three bright bars
   stacked down a phone screen was louder than the section needed. */
.pillar { position: relative; padding-top: var(--space-l); }
.pillar::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 3rem;
  height: 3px;
  background: var(--color-green);
  border-radius: var(--radius-full);
}
.pillar__index {
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--color-green-700);
  font-family: var(--font-heading);
  font-size: var(--step-1);
}
.pillar__title { font-size: var(--step-2); margin-bottom: var(--space-2xs); color: var(--color-blue); }
.pillar__copy { color: var(--color-text-soft); }

/* --------------------------------------------------------------------------
   10. Service panel and cards

   The panel reproduces the clinic's storefront sign: a blue field headed by a
   green SERVICES bar. The cards inside it are white, and each is keyed to blue
   or green, alternating down the grid — that alternation is the client's
   "infuse both colours together" note expressed as structure.

   Only two accents exist. --card-accent is the colour that may touch white
   (green-700 for green cards), while --card-mark is the brand green itself,
   used only as a filled block where its 2.5:1 on white does not apply.
   -------------------------------------------------------------------------- */
.service-panel {
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--color-blue);
  box-shadow: var(--shadow-lg);
}
.service-panel__bar {
  padding: var(--space-s) var(--gutter);
  background: var(--color-green);
  color: var(--color-blue-800);
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.service-panel__body { padding: var(--space-xl) var(--gutter) var(--space-2xl); }
.service-panel__lead {
  max-width: 24ch;
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.service-panel__intro {
  margin-top: var(--space-s);
  max-width: 56ch;
  color: rgb(255 255 255 / 0.82);
}
.service-panel__foot { margin-top: var(--space-xl); }

.service-panel__also {
  margin-top: var(--space-xl);
  padding-top: var(--space-l);
  border-top: 1px solid rgb(255 255 255 / 0.2);
}
.service-panel__also-title {
  margin-bottom: var(--space-s);
  color: var(--color-green);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.service-tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.service-tag {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: var(--space-3xs) var(--space-s);
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: var(--radius-full);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.service-tag:hover { background: rgb(255 255 255 / 0.12); border-color: var(--color-green); color: #fff; }

.service-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) { .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.service-grid--onPanel { margin-top: var(--space-xl); }

.service-card {
  --card-accent: var(--color-blue);
  --card-tint: var(--color-blue-100);
  --card-mark: var(--color-blue);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft),
              transform var(--dur-base) var(--ease-soft);
}
/* Blue is the default set above; only green needs a rule. Migration 3
   normalises every stored accent to one of these two, so there is no third
   case to style. */
.service-card--green {
  --card-accent: var(--color-green-700);
  --card-tint: var(--color-green-100);
  --card-mark: var(--color-green);
}

.service-card:hover { border-color: var(--card-accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.service-card--onPanel { border-color: transparent; }

.service-card__link {
  display: grid;
  gap: var(--space-2xs);
  height: 100%;
  padding: var(--space-l);
  border-top: 4px solid var(--card-mark);
  color: inherit;
  text-decoration: none;
}
.service-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-2xs);
  border-radius: var(--radius-m);
  background: var(--card-tint);
  color: var(--card-accent);
}
.service-card__icon svg { width: 1.6rem; height: 1.6rem; }
.service-card__title { font-size: var(--step-2); color: var(--color-blue); }
.service-card__copy { color: var(--color-text-soft); }
.service-card__more {
  margin-top: auto;
  padding-top: var(--space-s);
  color: var(--card-accent);
  font-size: var(--step--1);
  font-weight: 700;
}
.service-card__more::after { content: ' \2192'; }

/* --------------------------------------------------------------------------
   11. Empty states
   -------------------------------------------------------------------------- */
.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xl) var(--gutter);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-l);
  background: var(--color-surface);
  text-align: center;
}
.empty-state--compact { padding-block: var(--space-xl); }
.empty-state__art { width: 4.5rem; color: var(--color-blue-100); }
.empty-state__title { font-size: var(--step-2); color: var(--color-blue); }
.empty-state__copy { max-width: 46ch; color: var(--color-text-soft); }
.empty-state .link-arrow { margin-top: var(--space-2xs); }

/* --------------------------------------------------------------------------
   12. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  padding-block: var(--space-2xl);
  /* Green above, blue below: the band is where the two colours hand over. */
  border-top: 4px solid var(--color-green);
  background: var(--color-blue-900);
  color: #fff;
}
.cta-band__inner {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}
@media (min-width: 56rem) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.2fr) auto; gap: var(--space-2xl); }
}
.cta-band__title { font-size: var(--step-3); margin-bottom: var(--space-2xs); }
.cta-band__copy { color: rgb(255 255 255 / 0.82); max-width: 52ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* --------------------------------------------------------------------------
   13. Reviews
   -------------------------------------------------------------------------- */
.review-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) { .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.review-card {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-l);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
}
.review-card {
  border-top: 3px solid var(--color-green);
}
.review-card__rating { display: flex; gap: 2px; color: var(--color-border-strong); }
.star--on { color: var(--color-green-700); }
.review-card__body { margin: 0; color: var(--color-text-soft); }
.review-card__author { font-weight: 600; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-2xl) var(--space-l);
  background: var(--color-blue-900);
  color: rgb(255 255 255 / 0.8);
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.site-footer__grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The hours column carries the widest fixed string on the page
   ("Wednesday" beside "10:00 AM to 7:30 PM", which must not wrap), so it is
   given more track than the three short Explore links need. */
@media (min-width: 64rem) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
    gap: var(--space-xl);
  }
}

.site-footer .wordmark--footer { color: #fff; margin-bottom: var(--space-s); }
.site-footer .wordmark__suffix { color: rgb(255 255 255 / 0.6); }
.site-footer__tagline { max-width: 40ch; margin-bottom: var(--space-s); }
/* The shared hours disclaimer uses the muted body-text colour, which is too
   dark on the navy footer. White at 78% keeps it secondary and above 4.5:1. */
.site-footer .hours-disclaimer { color: rgb(255 255 255 / 0.78); }
.site-footer__emergency {
  padding: var(--space-2xs) var(--space-xs);
  border-left: 3px solid var(--color-green);
  background: rgb(255 255 255 / 0.06);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: var(--step--1);
}
.site-footer__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #fff;
}
.site-footer__heading::before {
  content: '';
  width: 1.1rem;
  height: 3px;
  flex-shrink: 0;
  background: var(--color-green);
  border-radius: var(--radius-full);
}
.site-footer__address { font-style: normal; display: grid; margin-bottom: var(--space-2xs); }
.site-footer__links { display: grid; gap: var(--space-3xs); }
.site-footer__links a,
.site-footer__base-links a,
.site-footer__col a { display: inline-block; padding-block: 3px; }
.hours-list--footer dt { color: rgb(255 255 255 / 0.7); }
.hours-list--footer dd { color: #fff; }
/* The footer column is narrow enough that "10:00 AM to 7:30 PM" folds in two
   and stops lining up with the day beside it. */
.hours-list--footer .hours-list__row { gap: var(--space-2xs); }
.hours-list--footer dd { white-space: nowrap; }

.social-links { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-m); }
.social-links__item {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
  color: #fff;
  transition: background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.social-links__item svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.site-footer a.social-links__item:hover {
  background: rgb(255 255 255 / 0.16);
  border-color: #fff;
  text-decoration: none;
}
/* Awaiting a profile URL: still visible, but never reads as a working link. */
.social-links__item--inactive { color: rgb(255 255 255 / 0.45); border-color: rgb(255 255 255 / 0.18); }

.location-grid {
  display: grid;
  gap: var(--space-xl);
  align-items: stretch;
}
.location-grid__details { display: grid; align-content: center; justify-items: start; gap: var(--space-s); }
.location-grid__details address { display: grid; font-style: normal; color: var(--color-text-soft); }
.location-grid__map {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  aspect-ratio: 4 / 3;
  max-width: 100%;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.location-grid__map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 56rem) {
  .location-grid { grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.4fr); }
  .location-grid__map { aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------------------
   Announcement modal
   -------------------------------------------------------------------------- */
.announce {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l, 14px);
  background: var(--color-background);
  color: var(--color-text);
  box-shadow: 0 24px 60px rgb(11 32 39 / 0.28);
  overflow: hidden;
}
.announce::backdrop { background: rgb(11 32 39 / 0.55); }
.announce__inner { display: grid; gap: var(--space-m); padding: var(--space-l); max-height: calc(100vh - 3rem); overflow-y: auto; }
.announce__head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-s); }
.announce__eyebrow {
  color: var(--color-green-800);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.announce__title { font-family: var(--font-heading); font-size: var(--step-2); letter-spacing: var(--tracking-tight); }
.announce__close {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-soft);
  cursor: pointer;
}
.announce__close:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.announce__close svg { width: 1rem; height: 1rem; fill: none; }
.announce__list { display: grid; gap: var(--space-s); }
.announce__item {
  padding: var(--space-m);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-green);
  border-radius: var(--radius-m);
}
.announce__item-title { font-family: var(--font-heading); font-size: var(--step-1); margin-bottom: var(--space-3xs); }
.announce__item-body { color: var(--color-text-soft); white-space: pre-line; }
.announce__item-meta { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--step--1); }
.announce__foot { display: flex; justify-content: flex-end; }
@media (max-width: 30rem) {
  .announce__inner { padding: var(--space-m); }
  .announce__foot .btn { width: 100%; }
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: var(--step--1);
}
.site-footer__base-links { display: flex; flex-wrap: wrap; gap: var(--space-m); }

/* --------------------------------------------------------------------------
   15. Entrance reveal
   Deliberately small: an 8px rise and a fade. Elements start visible so a
   failure of the observer never hides content.
   -------------------------------------------------------------------------- */
[data-reveal] { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   16. Message pages (404, 500)
   -------------------------------------------------------------------------- */
.message-page {
  max-width: var(--width-narrow);
  padding-block: var(--space-2xl);
}
.message-page__title { font-size: var(--step-4); margin-bottom: var(--space-s); color: var(--color-blue); }
.message-page__copy { color: var(--color-text-soft); margin-bottom: var(--space-l); }
.message-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* --------------------------------------------------------------------------
   17. Page heads
   -------------------------------------------------------------------------- */
.page-head {
  padding-block: var(--space-2xl) var(--space-xl);
  background:
    radial-gradient(44rem 22rem at 92% -30%, var(--color-blue-50), transparent 68%),
    radial-gradient(32rem 20rem at -6% 120%, var(--color-green-50), transparent 64%),
    var(--color-background);
  border-bottom: 1px solid var(--color-border);
}
.page-head--brand { border-bottom: 4px solid var(--color-green); }
.page-head__title { font-size: var(--step-4); margin-block: var(--space-2xs) var(--space-s); max-width: 18ch; color: var(--color-blue); }
.page-head__intro { max-width: var(--measure); color: var(--color-text-soft); font-size: var(--step-1); }

/* --------------------------------------------------------------------------
   18. Forms
   -------------------------------------------------------------------------- */
.section--form { padding-block: var(--space-xl) var(--space-section); }

.form-layout {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 62rem) {
  .form-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr); gap: var(--space-2xl); }
  /* The sidebar tracks the form on long pages without ever trapping scroll. */
  .form-aside { position: sticky; top: calc(var(--header-height) + var(--space-s)); }
}

.form__group { margin: 0 0 var(--space-xl); padding: 0; border: 0; }
.form__legend {
  color: var(--color-blue);
  padding: 0 0 var(--space-s);
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.form__legend-note {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

.household-list { display: grid; gap: var(--space-xs); }
.household-list:empty { display: none; }
.household-member {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  background: var(--color-surface, #fff);
}
.household-member > summary {
  padding: var(--space-s) var(--space-m);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-m);
}
.household-member > summary:hover { color: var(--color-blue); }
.household-member[open] > summary { border-bottom: 1px solid var(--color-border); }
.household-member__grid { padding: var(--space-m); }
.household-add { margin-top: var(--space-s); }

.form__grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: minmax(0, 1fr);
  /* Bottom-align so the inputs line up across a row even when only one field
     carries a hint above its control. */
  align-items: end;
}
@media (min-width: 40rem) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field--full { grid-column: 1 / -1; }

.field { display: grid; gap: var(--space-3xs); min-width: 0; }
.field__label { font-weight: 600; }
.field__required { color: var(--color-danger); }
.field__hint { color: var(--color-muted); font-size: var(--step--1); }

.field__control {
  width: 100%;
  min-height: 3rem;                /* keeps every control a real tap target */
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-m);
  background: var(--color-background);
  color: var(--color-text);
  font: inherit;
  /* 16px minimum stops iOS Safari zooming the page on focus. */
  font-size: max(1rem, var(--step-0));
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.field__control:hover { border-color: var(--color-muted); }
.field__control:focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px var(--color-blue-100);
  outline: none;
}
.field__control:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px; }
textarea.field__control { min-height: 7rem; resize: vertical; line-height: var(--leading-body); }

.field--invalid .field__control { border-color: var(--color-danger); }
.field__error { color: var(--color-danger); font-size: var(--step--1); font-weight: 600; }

.field__check { display: flex; align-items: flex-start; gap: var(--space-2xs); padding-block: var(--space-3xs); }
.field__checkbox { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; accent-color: var(--color-green-700); flex-shrink: 0; }
.field__check-label { font-weight: 500; }

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-border);
}
.form__actions .btn { flex: 1 1 14rem; }
@media (min-width: 40rem) { .form__actions .btn { flex: 0 0 auto; } }
.form__note { color: var(--color-muted); font-size: var(--step--1); }

/* Visually hidden but still reachable by bots that ignore CSS. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   19. Notices
   -------------------------------------------------------------------------- */
.notice {
  margin-bottom: var(--space-l);
  padding: var(--space-m);
  border-left: 4px solid var(--color-blue);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  background: var(--color-blue-50);
}
.notice__title { font-size: var(--step-2); margin-bottom: var(--space-3xs); }
.notice--success { border-left-color: var(--color-green); background: var(--color-green-50); }
.notice--error   { border-left-color: var(--color-danger);  background: var(--color-danger-tint); }

/* --------------------------------------------------------------------------
   20. Aside cards
   -------------------------------------------------------------------------- */
.form-aside { display: grid; gap: var(--space-m); }
.aside-card {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-l);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  background: var(--color-surface);
}
.aside-card__title {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}
.aside-card p { color: var(--color-text-soft); }
.aside-card .btn { justify-self: start; margin-top: var(--space-2xs); }
.aside-card { border-left: 4px solid var(--color-blue); }
.aside-card__title { color: var(--color-blue); }
.aside-card--urgent { border-left-color: var(--color-green); background: var(--color-green-50); }
.aside-card--urgent .aside-card__title { color: var(--color-green-800); }

/* --------------------------------------------------------------------------
   21. Team
   -------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); } }

.team-card {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  background: var(--color-background);
  transition: box-shadow var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft);
}
.team-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.team-card { border-top: 3px solid var(--color-blue); }
.team-card--director { border-top-color: var(--color-green); }

.team-card__portrait {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-blue-50), var(--color-green-50));
}
.team-card__portrait img { width: 100%; height: 100%; object-fit: cover; }
.team-card__doctor-icon {
  display: grid;
  place-items: center;
  width: min(16rem, 76%);
  aspect-ratio: 6 / 5;
  color: var(--color-blue);
}
.team-card__doctor-avatar { width: 100%; height: 100%; overflow: visible; }
.team-card__avatar-halo { fill: rgb(255 255 255 / 0.72); stroke: var(--color-border); stroke-width: 2; }
.team-card__avatar-head { fill: var(--color-blue-200); }
.team-card__avatar-coat { fill: #fff; stroke: var(--color-border); stroke-width: 2; }
.team-card__avatar-shirt { fill: var(--color-blue-50); }
.team-card__avatar-lapel,
.team-card__avatar-stethoscope { fill: none; stroke: var(--color-blue); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.team-card__avatar-scope { fill: var(--color-green); stroke: #fff; stroke-width: 3; }
.team-card__avatar-mark { fill: var(--color-green); }
.team-card__avatar-cross { fill: #fff; }

.team-card__badge {
  justify-self: start;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-s);
  background: var(--color-green);
  color: var(--color-blue-800);
  font-size: var(--step--1);
  font-weight: 600;
}

.team-card__body { display: grid; gap: var(--space-3xs); align-content: start; padding: var(--space-m); }
.team-card__name { font-size: var(--step-2); color: var(--color-blue); }
.team-card__credentials { color: var(--color-green-800); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.02em; }
.team-card__role { color: var(--color-muted); font-size: var(--step--1); }
.team-card__bio { margin-top: var(--space-2xs); color: var(--color-text-soft); }
.team-card__link { margin-top: var(--space-2xs); }

/* --------------------------------------------------------------------------
   22. Service list (services page)
   -------------------------------------------------------------------------- */
.service-list { display: grid; gap: 0; border-top: 1px solid var(--color-border); }

.service-row {
  --card-accent: var(--color-blue);
  --card-tint: var(--color-blue-100);
  --card-mark: var(--color-blue);
  display: grid;
  gap: var(--space-m);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  /* Anchor links from the homepage cards must clear the sticky header. */
  scroll-margin-top: calc(var(--header-height) + var(--space-m));
}
@media (min-width: 48rem) {
  .service-row { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-xl); }
}
.service-row--green {
  --card-accent: var(--color-green-700);
  --card-tint: var(--color-green-100);
  --card-mark: var(--color-green);
}

.service-row__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-m);
  background: var(--card-tint);
  color: var(--card-accent);
}
.service-row__icon svg { width: 1.9rem; height: 1.9rem; }
.service-row__title { font-size: var(--step-3); margin-bottom: var(--space-2xs); color: var(--color-blue); }
.service-row__lead { color: var(--card-accent); font-weight: 700; margin-bottom: var(--space-2xs); }
.service-row__copy { color: var(--color-text-soft); max-width: var(--measure); }

.service-row__details-title {
  margin-top: var(--space-m);
  margin-bottom: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}
/* The tick marks inherit each row's accent, so a green service's list reads
   green and a blue service's reads blue. */
.service-row__details li::before { border-color: var(--card-accent); }
.service-row__actions { margin-top: var(--space-m); }

/* --------------------------------------------------------------------------
   23. Resources
   -------------------------------------------------------------------------- */
.resource-list { display: grid; gap: var(--space-m); }
@media (min-width: 48rem) { .resource-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.resource-card {
  padding: var(--space-l);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-green);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  background: var(--color-surface);
}
.resource-card__title { font-size: var(--step-2); margin-bottom: var(--space-2xs); color: var(--color-blue); }
.resource-card__title a { text-decoration: none; }
.resource-card__title a:hover { text-decoration: underline; }
.resource-card__copy { color: var(--color-text-soft); }

/* --------------------------------------------------------------------------
   24. Split layout, tick lists, prose
   -------------------------------------------------------------------------- */
.split { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 62rem) { .split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-2xl); } }
.split__aside { display: grid; gap: var(--space-m); }

.tick-list { display: grid; gap: var(--space-2xs); }
.tick-list li { position: relative; padding-left: 1.75rem; color: var(--color-text-soft); }
.tick-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.85rem;
  height: 0.45rem;
  border-left: 2.5px solid var(--color-green-700);
  border-bottom: 2.5px solid var(--color-green-700);
  transform: rotate(-45deg);
}
.tick-list--lg { gap: var(--space-s); font-size: var(--step-1); margin-top: var(--space-m); }

.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--step-3); margin-top: var(--space-xl); margin-bottom: var(--space-s); color: var(--color-blue); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--step-2); margin-top: var(--space-l); margin-bottom: var(--space-2xs); }
.prose p { margin-bottom: var(--space-s); color: var(--color-text-soft); }
.prose ul { list-style: disc; padding-left: 1.25rem; margin-bottom: var(--space-s); }
.prose li { margin-bottom: var(--space-3xs); color: var(--color-text-soft); }

/* --------------------------------------------------------------------------
   25. Homepage density
   The client asked for a tighter homepage ("the current space is too wide and
   wasteful"). Everything here is scoped to body.home, so the shared
   components keep their roomier rhythm on the inner pages. Desktop tightens
   the most; the fluid minimums keep phone spacing comfortable.
   -------------------------------------------------------------------------- */
/* The page container (--width-page) is shared with the header, so the
   homepage keeps the site-wide width and tightens its vertical rhythm. */
.home {
  --space-section: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}
/* The homepage task tiles already offer call and directions first thing, so
   the site-wide phone bar would only repeat them. */
body.home .mobile-actions { display: none; }
.home .section__head { margin-bottom: var(--space-l); }
.home .section__title { font-size: var(--step-3); max-width: 26ch; }
.home .section--about { background: var(--color-background); }
.home .section--services { background: var(--color-surface); }
.home .section--team { background: var(--color-background); }
.home .section--location { background: var(--color-surface); border-top: 1px solid var(--color-border); }
.home .section--reviews { background: var(--color-background); }
.home .announcement-card { padding: var(--space-m); }

/* A heading on the left and its one action on the right, instead of an
   intro paragraph stacked under a full-width title. */
.section__head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-l);
}

/* About: heading and intro beside three short points, one row on desktop. */
.about-strip {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.about-strip__head { display: grid; justify-items: start; gap: var(--space-2xs); }
.about-strip__head .eyebrow { margin-bottom: 0; }
@media (min-width: 62rem) {
  .about-strip { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.6fr); gap: var(--space-2xl); }
}
.pillars--compact { border-top: 0; gap: var(--space-m); }
@media (min-width: 48rem) { .pillars--compact { gap: var(--space-l); } }
.pillars--compact .pillar {
  padding: var(--space-s) 0 0;
  border-top: 2px solid var(--color-blue-100);
}
.pillars--compact .pillar::before { top: -2px; }
.pillars--compact .pillar__title { font-size: var(--step-1); }
.pillars--compact .pillar__copy { font-size: var(--step--1); line-height: 1.55; }

/* Services: same storefront panel, roughly half the height. */
.service-panel--compact .service-panel__bar { padding-block: var(--space-xs); }
.service-panel--compact .service-panel__body { padding: var(--space-l) var(--gutter); }
.service-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
}
.service-panel--compact .service-panel__lead { font-size: var(--step-3); max-width: none; }
.service-panel--compact .service-panel__intro { margin-top: var(--space-3xs); }
.service-panel--compact .service-panel__also { margin-top: var(--space-l); padding-top: var(--space-m); }
.service-grid--compact { gap: var(--space-s); }
.service-grid--onPanel.service-grid--compact { margin-top: var(--space-l); }
.service-card--compact .service-card__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-m);
}
.service-card--compact .service-card__icon { margin: 0; flex-shrink: 0; width: 2.75rem; height: 2.75rem; }
.service-card--compact .service-card__icon svg { width: 1.45rem; height: 1.45rem; }
.service-card__text { display: grid; gap: var(--space-3xs); min-width: 0; }
.service-card--compact .service-card__title { font-size: var(--step-1); }
.service-card--compact .service-card__title::after {
  content: ' \2192';
  color: var(--card-accent);
  font-family: var(--font-body);
  font-size: 0.85em;
}
.service-card--compact .service-card__copy { font-size: var(--step--1); line-height: 1.5; }
/* The closing tile fills the last grid slot with the route to the full list,
   instead of leaving a hole in the panel. */
.service-card--all { background: transparent; border: 1px dashed rgb(255 255 255 / 0.55); }
.service-card--all .service-card__link { align-items: center; height: 100%; border-top-color: var(--color-green); }
.service-card--all .service-card__title { color: #fff; }
.service-card--all .service-card__title::after { color: var(--color-green); }
.service-card--all .service-card__copy { color: rgb(255 255 255 / 0.85); }
.service-card--all:hover { background: rgb(255 255 255 / 0.08); border-color: #fff; }

/* Team: portrait beside the name rather than a tall photo above it. */
.team-grid--home { gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
@media (min-width: 64rem) { .team-grid--home { gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } }
.team-grid--home .team-card { grid-template-columns: 9rem minmax(0, 1fr); }
.team-grid--home .team-card__portrait { aspect-ratio: auto; min-height: 11rem; }
.team-grid--home .team-card__doctor-icon { width: 88%; }
.team-grid--home .team-card__body { padding: var(--space-s) var(--space-m); align-content: center; }
.team-grid--home .team-card__bio { font-size: var(--step--1); line-height: 1.5; }
@media (max-width: 26rem) {
  .team-grid--home .team-card { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .team-grid--home .team-card__portrait { min-height: 9rem; }
}

/* Location: a shorter map beside the address. */
.home .location-grid { gap: var(--space-l); }
.home .location-grid__details { gap: var(--space-2xs); }
.home .location-grid__details .eyebrow { margin-bottom: 0; }
.location-grid__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }
@media (min-width: 56rem) {
  .home .location-grid { grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.5fr); gap: var(--space-2xl); }
  .home .location-grid__map { aspect-ratio: 21 / 9; }
}

/* Reviews: a one-line empty state instead of a boxed placeholder. */
.reviews-empty {
  padding: var(--space-s) var(--space-m);
  border-left: 4px solid var(--color-green);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  background: var(--color-surface);
  color: var(--color-text-soft);
}
.home .review-card { padding: var(--space-m); }