/* ============================================================
   Subiaco mark: the seedling that draws itself as the page scrolls.

   Ported from the supplied SubiacoMark component. Token names and
   relationships are kept from the supplied CSS so the two stay
   recognisable to each other.

   ONE SUBSTITUTION: --mark is the brand vine #2B6559, not the supplied
   oklch(0.45 0.066 168) (~#1f6f5c). The logo pack marks the vine teal
   "never change". Override this one line to go back to the supplied green.

   Its own stylesheet: styles.css is byte-identical to Eglinton's and
   must stay that way.
   ============================================================ */

.smc-mark {
  --mark:         #2B6559;
  --mark-light:   color-mix(in oklab, var(--mark) 52%, #ffffff);
  --mark-deep:    color-mix(in oklab, var(--mark) 62%, #16383F);  /* forest, never black */
  --mark-spec:    rgba(252, 255, 253, 0.75);
  --mark-shadow:  color-mix(in srgb, var(--mark) 28%, transparent);
  --glass-top:    color-mix(in srgb, var(--mark-light) 35%, transparent);
  --glass-bottom: color-mix(in srgb, var(--mark) 12%, transparent);
  --aura: radial-gradient(circle,
            color-mix(in srgb, var(--mark-light) 25%, transparent), transparent 70%);

  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  perspective: 1200px;
}

.smc-mark__aura {
  position: absolute;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  background: var(--aura);
  filter: blur(8px);
  pointer-events: none;
}

.smc-mark__stage {
  position: relative;
  width: min(78vmin, 100%);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  will-change: transform;
}

.smc-mark__svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 30px 60px var(--mark-shadow));
}

/* Line art. pathLength="1" normalises every path, so the draw is a plain
   0 to 1 dash offset regardless of the path's real length. */
.smc-mark__line {
  fill: none;
  stroke: url(#smcStroke);
  stroke-width: 17;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.smc-mark__spec {
  fill: none;
  stroke: var(--mark-spec);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .85;
}

.smc-mark__body { fill: url(#smcGlass); opacity: 0; }

/* No JS, or the driver never runs: show the finished seedling rather than an
   empty frame. The grown state is the one that carries the meaning. */
.smc-mark:not([data-ready]) .smc-mark__line,
.smc-mark:not([data-ready]) .smc-mark__spec { stroke-dashoffset: 0; }
.smc-mark:not([data-ready]) .smc-mark__body { opacity: 1; }

/* ---- The scroll runway ----
   The hero becomes a tall runway and its grid pins to the viewport, so the
   mark stays on screen for the whole growth. Without this the mark scrolls
   away at about one screen, with the leaves barely started. */
.hero--runway {
  min-height: var(--mark-runway, 320vh);
  align-items: flex-start;
  /* .hero ships overflow:hidden. That makes it the scrollport for its sticky
     child, so the grid never sticks and the mark scrolls away with the leaves
     barely started. This is the whole reason the growth was invisible. */
  overflow: visible;
}
.hero--runway .hero__grid {
  position: sticky;
  top: 0;
  min-height: 100svh;
  align-content: center;
}
/* Anchored to the first screen, not the bottom of a 320vh section. */
.hero--runway .hero__scroll { top: calc(100svh - 4rem); bottom: auto; }

@media (max-width: 900px) {
  /* No pin on a small screen. The mark and the hero copy together do not fit in
     one viewport, and pinning a grid taller than the screen crops it. The runway
     is short instead, so the sprout finishes growing within the first screen of
     scrolling and the mark is still in view while it does.

     The stroke also has to grow. 17 user units in a 1920 viewBox is about 1.3px
     once the stage is phone sized, which reads as a spider web rather than a
     drawn line. The supplied value assumed a 78vmin full-screen stage. */
  /* No pin here, so a tall runway would just be dead space below the content:
     the hero measured 1462px around 760px of content. The hero keeps its natural
     height and mark.js drives progress from the window instead. */
  .hero--runway { min-height: auto; }
  .hero--runway .hero__grid { position: static; min-height: 0; }
  .smc-mark__stage { width: min(70vmin, 100%); }
  .smc-mark__line { stroke-width: 30; }
  .smc-mark__spec { stroke-width: 9; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--runway { min-height: auto; align-items: center; }
  .hero--runway .hero__grid { position: static; min-height: 0; }
}


/* ============================================================
   Google Business Profile map.

   The drawn map sits behind as the card's background, so a blocked or failed
   frame falls back to something on brand rather than an empty white box.
   Artifact previews block third-party frames outright, which is exactly when
   this matters.
   ============================================================ */
.visit__map {
  background: url("../img/map.svg") center / cover no-repeat;
}
.visit__map iframe {
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
  display: block;
  background: transparent;
}


/* ============================================================
   Dr Michael Allen: a green band, not a new component.

   .sec-green is Eglinton's existing treatment (About, Appointments), so the
   practitioner block is the brand's own card, restated. The section head keeps
   its 30ch measure: overriding that was what made the headline look wrong.
   ============================================================ */
.gp-band {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
}
.gp-band__body { min-width: 0; }
.gp-band .eyebrow { color: var(--oak); }

.gp__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-h3); line-height: var(--lh-snug);
  color: var(--bone); margin: .35rem 0 0;
}
.gp__creds {
  font-size: var(--fs-eyebrow); letter-spacing: .1em; text-transform: uppercase;
  color: var(--oak); margin: .4rem 0 1.1rem;
}
.gp__bio { color: var(--dark-text); margin: 0 0 1.4rem; max-width: 60ch; }
.gp__label {
  font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase;
  color: var(--dark-muted); margin: 0 0 .7rem;
}

/* Glass chips, the same material as the buttons. */
.gp__interests { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.gp__interests li {
  padding: .45em .95em; border-radius: var(--radius-pill);
  font-size: .82rem; color: var(--bone);
  background: color-mix(in srgb, var(--bone) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--bone) 26%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bone) 30%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);
}

.gp__portrait {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid color-mix(in srgb, var(--bone) 34%, transparent);
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--ink) 70%, transparent);
}
.gp__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }

/* ============================================================
   Liquid glass, carried across from the front door.

   Same material language: a translucent fill that blurs what is behind it, a
   specular highlight on the top edge, a shadowed underside for thickness, and a
   sheen that sweeps on approach. Both layers stay present in every state so
   background-position can animate.
   ============================================================ */
.btn {
  position: relative;
  background-image:
    linear-gradient(105deg, transparent 34%, rgba(255,255,255,.30) 50%, transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.04) 55%, rgba(255,255,255,.14));
  background-size: 220% 100%, 100% 100%;
  background-position: -70% 0, 0 0;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 color-mix(in srgb, var(--ink) 22%, transparent),
    0 10px 24px -14px color-mix(in srgb, var(--ink) 65%, transparent);
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              background-position var(--dur-slow) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover, .btn:focus-visible { background-position: 170% 0, 0 0; }

/* The ghost button is the one that reads as true glass: it has no fill of its
   own, so it takes its colour from whatever it sits on. */
.btn--ghost, .btn--ghost-light {
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  background-color: color-mix(in srgb, var(--bone) 42%, transparent);
}
.btn--ghost-light { background-color: color-mix(in srgb, var(--bone) 14%, transparent); }

/* Nav pill and its call to action, same material as the front door's controls. */
/* Measured: the toolbar's own links were 3.05:1 and the Call chip 2.2:1, because
   the pill is only 58% forest over a light page, so its light text sat on a
   mid-tone. Deepening the pill gives that text a real ground. */
.nav__inner { background: color-mix(in srgb, var(--forest) 86%, transparent); }
.nav__links a { color: var(--bone); }
.nav__call {
  padding: .5em 1.05em; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bone) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--bone) 60%, transparent);
  color: var(--forest);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__call:hover { background: var(--oak); color: var(--ink); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn--ghost, .nav__call { background-color: color-mix(in srgb, var(--bone) 78%, transparent); }
}

/* ============================================================
   Glassmorphism where sections meet.

   Instead of a hard rule between bands, a frosted seam: a soft gradient that
   fades out at both edges, with a hairline of light through the middle. Reads
   as two panes of glass meeting rather than a drawn line.
   ============================================================ */
.section:not(.sec-green) + .section:not(.sec-green)::before {
  content: "";
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: min(100% - 2 * var(--gutter), 1240px); height: 1px;
  background: linear-gradient(to right,
    transparent,
    color-mix(in srgb, var(--pine) 30%, transparent) 18%,
    color-mix(in srgb, var(--oak) 38%, transparent) 50%,
    color-mix(in srgb, var(--pine) 30%, transparent) 82%,
    transparent);
}
.section { position: relative; }
/* Sections that already sit on their own card need no seam above them. */
.sec-green::before, .section:has(> .container > .sec-green)::before { display: none; }

/* ============================================================
   Footer: gold section headings.
   ============================================================ */
.footer h4 { color: var(--oak); }

/* ============================================================
   No black. The palette runs on the slate near-black --ink, the deep teal
   --forest and the vine. Pure black is not in the brand pack and reads harsh
   against these grounds. styles.css is byte identical to Eglinton's and cannot
   be edited, so its two black shadows are overridden here instead.
   ============================================================ */
.footer__brandmark-track span {
  filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--ink) 30%, transparent));
}
/* The black shadow being replaced belongs to .nav__inner. Putting its inset white
   highlight on .acknowledge__inner drew a 1px white rule straight across the
   flags. Corrected to the element that actually owns it. */
.nav__inner {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
              0 18px 42px -24px color-mix(in srgb, var(--ink) 62%, transparent);
}

/* ============================================================
   Mobile. Most visitors arrive here.
   ============================================================ */
@media (max-width: 900px) {
  .gp-band { grid-template-columns: 1fr; gap: clamp(1.25rem, 1rem + 2vw, 2rem); }
  .gp__portrait { order: -1; max-width: 300px; margin-inline: auto; }
  .gp__bio { max-width: none; }
}


/* ============================================================
   No black, anywhere. Brand greens only.

   The palette runs on the deep teal --forest and the vine. Headings and body
   copy both take a green, not the neutral slate, so nothing on the page reads
   as black. styles.css is byte identical to Eglinton's, so every one of these
   is an override here rather than an edit there.
   ============================================================ */
body {
  --text: #16383F;                                              /* forest */
  --text-muted: color-mix(in srgb, #16383F 72%, var(--bone));
}
h1, h2, h3, h4,
.section-head h2, .fees__policy-h, .fees__card-title, .faq summary,
.svc__card h3, .appt__way-body h3, .detail h3, .recruit__title, .stat-card__num {
  color: var(--forest);
}
.hero h1 { color: var(--forest); }
.hero h1 .accent { color: var(--oak); }

/* ============================================================
   Green buttons go gold on hover, never navy.
   ============================================================ */
.btn--primary:hover, .btn--primary:focus-visible,
.banner__cta:hover, .banner__cta:focus-visible,
.recruit__cta:hover, .recruit__cta:focus-visible,
.fees__pdf:hover, .fees__pdf:focus-visible {
  background-color: var(--oak);
  border-color: var(--oak);
  color: var(--ink);
}
.btn--cream:hover { background-color: var(--oak); color: var(--ink); }

/* ============================================================
   Our care: the head fills the width instead of leaving the right half blank.
   The heading keeps its own measure, the lead moves alongside it.
   ============================================================ */
.svc .section-head {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: end;
}
.svc .section-head .eyebrow { grid-column: 1; }
.svc .section-head h2 { grid-column: 1; max-width: 18ch; }
.svc .section-head .section-head__lead { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; }

/* ============================================================
   Tighter rhythm. The default band spacing left the page feeling loose.
   ============================================================ */
:root { --section-y: clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem); }
.hero__grid { gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }

@media (max-width: 900px) {
  .svc .section-head { grid-template-columns: 1fr; row-gap: .9rem; }
  .svc .section-head h2 { max-width: none; }
  .svc .section-head .section-head__lead { grid-column: 1; grid-row: auto; }
  /* The square wrapper reserved a full column of height for a much smaller
     stage, which is the dead space that sat above the hero eyebrow. */
  .smc-mark { width: min(70vmin, 100%); margin-inline: auto; }
  .hero__visual { margin-bottom: .5rem; }
}


/* ============================================================
   Audit corrections. Every value below was measured, not guessed.
   ============================================================ */

/* Gold needs two values. On the light ground it has to go darker to clear 3:1
   for large text (brand gold measured 2.66). On the dark grounds it has to go
   lighter to clear 4.5:1 (measured 4.36 against the footer's gradient). */
body {
  --oak-on-light: color-mix(in srgb, var(--oak) 80%, var(--ink));   /* 3.60:1 on bone */
  --oak-on-dark:  color-mix(in srgb, var(--oak) 85%, var(--bone));  /* 6.17:1 on ink */
}
.hero h1 .accent, .banner__accent { color: var(--oak-on-light); }
.footer h4, .footer__tagline { color: var(--oak-on-dark); }
.footer__privacy { color: color-mix(in srgb, var(--bone) 78%, transparent); }
.hero__scroll { color: color-mix(in srgb, var(--forest) 88%, transparent); }
.btn--primary { color: #ffffff; }

/* The credit link worked but nothing said it was a link: no colour, no
   underline. This is why it kept reading as a broken redirect. */
.footer__credit a {
  color: var(--oak-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.footer__credit a:hover { color: var(--bone); }

/* ============================================================
   Fees policy card: it had zero padding, so the copy sat on the border, and
   the headings barely outranked the body. Now a glass card with real air.
   ============================================================ */
.fees__policy-card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bone) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--pine) 18%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55),
              0 18px 42px -26px color-mix(in srgb, var(--ink) 55%, transparent);
  gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}
.fees__policy-h {
  font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem);
  line-height: var(--lh-snug);
  margin-bottom: .5rem;
}
.fees__policy-item p { margin-top: 0; }

/* ============================================================
   Areas of interest: an even two-up grid rather than pills wrapping at random.
   ============================================================ */
.gp__interests {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}
.gp__interests li { text-align: center; }

/* The band and its portrait share the family's rounding. */
.gp-band { border-radius: var(--radius-xl); }
.gp__portrait { border-radius: var(--radius-lg); }

@media (max-width: 900px) {
  .gp__interests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fees__policy-card { padding: clamp(1.25rem, 1rem + 2vw, 1.75rem); }
}
@media (max-width: 420px) {
  .gp__interests { grid-template-columns: 1fr; }
}

/* Links on the dark footer were pine, which measured 2.56:1 there. */
.footer a { color: var(--oak-on-dark); }
/* Raised specificity: this link resolved to pine at 2.56:1 on the dark footer
   and a plain .footer__privacy a did not win the cascade. */
.footer .footer__privacy a, footer.footer p.footer__privacy a { color: var(--oak-on-dark); }
.footer a:hover { color: var(--bone); }
.footer__links a { color: color-mix(in srgb, var(--bone) 88%, transparent); }
.footer__links a:hover { color: var(--oak-on-dark); }

/* Margin on the primary button: its glass sheen sits over the fill, so the
   effective ground is lighter than pine alone. */
.btn--primary { background-color: color-mix(in srgb, var(--pine) 88%, var(--forest)); }


/* ============================================================
   Headings on the dark bands.

   Making every heading --forest turned the headings that sit ON the green
   cards into dark green on dark green: the appointments card titles measured
   1.22:1, the recruitment title 1:1. Light grounds keep the green, dark grounds
   take the off-white. Measured, not eyeballed.
   ============================================================ */
.sec-green h1, .sec-green h2, .sec-green h3, .sec-green h4,
.gp-band h1, .gp-band h2, .gp-band h3, .gp-band h4,
.recruit h2, .recruit h3,
.acknowledge h2, .acknowledge h3,
.banner h2, .banner h3,
.footer h2, .footer h3,
.appt__way-body h3, .gp__name {
  color: var(--bone);
}

/* Supporting copy on those same dark bands. */
.sec-green .eyebrow, .gp-band .eyebrow, .recruit__eyebrow { color: var(--oak-on-dark); }
.gp__creds, .recruit__tag { color: var(--oak-on-dark); }
.about__sub, .about__values span, .sec-green .lead, .sec-green .muted,
.appt__types li, .appt__note { color: color-mix(in srgb, var(--bone) 90%, transparent); }
.gp__label { color: color-mix(in srgb, var(--bone) 82%, transparent); }

/* The footer keeps its gold section headings. */
.footer h4 { color: var(--oak-on-dark); }

/* Contact links on the light ground were pine at 3.57:1. */
.detail a, .hours a { color: var(--forest); }
.detail a:hover { color: var(--pine); }


/* Links sitting on the dark bands. The appointments card link measured 3.57:1
   and the footer privacy link 2.56:1, both pine on a dark ground.

   The footer one carries !important deliberately: its colour is set somewhere the
   cascade would not yield to a more specific selector, and a legibility fix on a
   medical site is worth the bluntness. */
/* The green bands are lighter than the footer, so gold has to go lighter
   again there: 85% measured 4.21:1 on them, 68% clears it. */
.sec-green a, .appt__way-body a, .appt__note a, .recruit a:not(.btn) {
  color: color-mix(in srgb, var(--oak) 68%, var(--bone));
}
.sec-green a:hover, .appt__way-body a:hover { color: var(--bone); }
.footer__privacy a { color: var(--oak-on-dark) !important; }


/* ============================================================
   HotDoc booking widget, sitting where the welcome banner was.

   Framed in glass like the rest of the page so a third party embed does not
   look bolted on. The frame keeps a fixed height because HotDoc cannot report
   its own, and it is lazy: another third party frame on a medical page.
   ============================================================ */
.booking { padding-block: var(--section-y); }
.booking__head { margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2rem); max-width: none; }
.booking__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pine) 22%, transparent);
  background: color-mix(in srgb, var(--bone) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55),
              0 22px 48px -28px color-mix(in srgb, var(--ink) 55%, transparent);
}
/* HotDoc's script sets an inline height on the frame by postMessage, and inline
   beats a stylesheet. So do not set height at all: give it a floor instead, which
   still wins when the widget under-reports or the script never runs, and lets it
   grow when the widget genuinely needs more. */
.booking__frame iframe { width: 100%; min-height: 380px; border: 0; display: block; }

@media (max-width: 900px) {
  .booking__frame iframe { min-height: 340px; }
}


/* The practice details now sit inside the Visit grid, between the map and the
   recruitment card, so they need to span it rather than take a single cell. */
.visit__grid .details--row { grid-column: 1 / -1; }

@media (max-width: 900px) {
  /* Small screens order the grid explicitly (media 1, recruit 2, form 3), so an
     unset order put the details first, above the photo. Matching the media's
     order lets DOM order break the tie: map, then details, then the rest. */
  .visit__grid .details--row { order: 1; }
}


/* ============================================================
   PRIVATE BILLING (Subiaco only)
   Replaces Eglinton's bulk-billing tick list. It carries the same visual weight
   in the fees intro: a quiet pine rule to mark it as its own statement, no card,
   so it reads as part of the section rather than competing with the fees card
   beside it. Colours are brand greens and gold only.
   ============================================================ */
.fees__private {
  margin: 1.6rem 0 0;
  padding-left: clamp(0.9rem, 0.6rem + 0.8vw, 1.3rem);
  border-left: 2px solid color-mix(in srgb, var(--pine) 38%, transparent);
}
.fees__private-h {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
  line-height: var(--lh-snug);
  color: var(--forest);
  margin: 0 0 0.6rem;
}
.fees__private p {
  color: var(--text);
  font-size: 0.97rem;
  line-height: 1.62;
  margin: 0 0 0.75rem;
  max-width: var(--maxw-text);
}
.fees__private p:last-child { margin-bottom: 0; }
/* Inline links: gold on hover, per the brand rule. Underlined so they are not
   colour-only affordances. */
.fees__private a {
  color: var(--pine);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease);
}
.fees__private a:hover,
.fees__private a:focus-visible { color: var(--oak); }


/* ============================================================
   ABOUT: THE SMC SYMBOL (Subiaco only)
   Replaces Eglinton's waiting-area photo with the practice's own mark, the S with
   the sprout growing through it. Geometry comes from img/favicon-source.svg at
   build time, so this and the favicon can never drift apart.

   These are filled shapes, not outlines, so the gradient is the point: each part
   runs light at the top to a deep brand green at the root. Two ramps, so the S and
   the sprout stay readable as separate parts of the logo the way the two colours
   do in the brand file. No card, border, shadow or caption: it is the mark itself,
   not a picture of one.
   ============================================================ */
.about__leaf {
  position: relative;
  margin: 0;
  display: grid;
  place-items: center;
  min-height: clamp(240px, 26vw, 420px);
}
.about__leaf-svg {
  width: auto;
  height: clamp(260px, 32vw, 420px);
  max-width: 100%;
  display: block;
  /* High enough to read as the logo, held back just enough that the heading and
     copy beside it stay the first thing the eye lands on. */
  opacity: 0.82;
  filter: drop-shadow(0 10px 30px color-mix(in srgb, var(--forest) 45%, transparent));
}
.about__mark-s      { fill: url(#smcAboutS); }
.about__mark-sprout { fill: url(#smcAboutSprout); }

/* Narrow screens: the mark stacks above the copy, so it takes less height. It is
   decoration and must not push the reading matter down the page. */
@media (max-width: 900px) {
  .about__leaf { min-height: 0; }
  .about__leaf-svg { height: 200px; opacity: 0.9; }
}


/* ============================================================
   FOOTER: DIVIDER UNDER THE BRAND AND LINKS BLOCK
   The footer grid ran straight into the brandmark watermark and the legal block
   with nothing between them. A single hairline closes the brand block off.

   It is a gradient rather than a flat border so it fades out at both ends instead
   of butting into the gutters, which is what keeps it quiet on a dark ground.
   ============================================================ */
.footer__grid {
  position: relative;
  /* The rule needs room to breathe, so the 3rem margin becomes padding above it
     and a smaller margin below. Same total spacing, line sits inside it. */
  margin-bottom: 2rem;
  padding-bottom: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
}
.footer__grid::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, #FFFFFF 20%, transparent) 12%,
    color-mix(in srgb, #FFFFFF 20%, transparent) 88%,
    transparent 100%);
}
/* ============================================================
   DR ALLEN: AVAILABILITY STATUS (Subiaco only)
   The pulsing marker that sat on the skin checks feature card now sits here.
   On the card it decorated a service; on the practitioner it says something
   actionable, that this is the GP you can book with.

   Same treatment as .svc__feature-badge so it is the component moved, not a new
   one invented: oak-tinted pill, forest text, pine dot, the shared
   comingSoonPulse keyframes already in styles.css.
   ============================================================ */
.gp__status { margin: 0.55rem 0 0; }
.gp__status-pill {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--forest);
  background: color-mix(in srgb, var(--oak) 32%, #fff);
  border: 1px solid color-mix(in srgb, var(--oak) 55%, transparent);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.95rem 0.5rem 1.75rem;
  box-shadow: var(--shadow-soft);
}
.gp__status-pill::before {
  content: "";
  position: absolute;
  left: 0.8rem;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--pine);
  animation: comingSoonPulse 1.8s var(--ease) infinite;
}
/* A pulsing dot is exactly the kind of motion reduced-motion is asking about. */
@media (prefers-reduced-motion: reduce) {
  .gp__status-pill::before { animation: none; }
}


/* ============================================================
   AUDIT PASS, 07/09. Five layout faults reported on the live site.
   ============================================================ */

/* B. "Come visit our new space" was capped at .section-head's 30ch measure, so a
   54px heading sat in a 395px column inside a 1200px container with the right
   two thirds empty. This head has no lead paragraph beside it, so it simply spans. */
#visit .section-head { max-width: none; }
#visit .section-head h2 { max-width: 22ch; }

/* C. The About type scale ran 54px heading, 22px subtitle, 24px lead: the subtitle
   was smaller than the body copy underneath it, which is what read as unbalanced.
   The subtitle now sits a clear step above the lead, so the scale descends. */
.about__sub {
  font-size: clamp(1.35rem, 1.15rem + 0.85vw, 1.8rem);
  line-height: 1.35;
  margin: 0.1rem 0 0.85rem;
}

/* D. The status pill had 0px beneath it and butted straight into the bio. */
.gp__status { margin: 0.9rem 0 1.35rem; }

/* F. Audit: the footnote asterisk was oak on bone at 2.66:1, under the 4.5:1 for
   normal text. It carries meaning (it ties Saturday to the opening-phase note),
   so it is not decorative and has to be legible. Chocolate is the palette's warm
   neutral and takes it to about 7:1 without losing the warm accent. */
.hours__star { color: var(--chocolate); }

/* G. Audit: the standalone fallback link HotDoc injects under its widget was a
   16px target. WCAG 2.5.8 wants 24px, and inline-in-a-sentence does not apply
   because this one stands alone. */
.HotDocLink--fallback a {
  display: inline-block;
  padding-block: 0.3rem;
  min-height: 24px;
}


/* ============================================================
   PASS 10/09
   ============================================================ */

/* 4. The divider was under the whole footer grid. It belongs directly after the
   tagline and before Explore. Stacked on a phone that is between the first block
   and the second, so the rule moves onto the brand block and the grid-level one
   is switched off there. Desktop keeps its under-grid rule, where the three
   columns sit side by side and a line after the tagline would be a vertical
   slice through the middle of them. */
@media (max-width: 760px) {
  .footer__grid::after { display: none; }
  .footer__grid > div:first-child {
    position: relative;
    padding-bottom: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
    margin-bottom: clamp(0.4rem, 0.3rem + 0.6vw, 0.9rem);
  }
  .footer__grid > div:first-child::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, #FFFFFF 20%, transparent) 12%,
      color-mix(in srgb, #FFFFFF 20%, transparent) 88%,
      transparent 100%);
  }
}

/* 2. The About description was three paragraphs with no space between them and
   two sizes: a 19px lead over 16.3px body, which read as two different
   descriptions rather than one. They now share a size on a phone and are spaced. */
#about .lead,
#about .muted { margin: 0 0 0.95rem; }
#about .muted:last-of-type { margin-bottom: 0; }
@media (max-width: 900px) {
  #about .lead,
  #about .muted {
    font-size: 1.0625rem;
    line-height: 1.62;
  }
}

/* 3. Subheadings read smaller than the body they sit above, because a display
   serif at 18px has a much smaller x-height than the sans body at 15px. Size
   alone was not the fix: they needed weight and a wider gap over the body. */
.fees__private-h {
  font-size: clamp(1.35rem, 1.15rem + 0.75vw, 1.6rem);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.7rem;
}
.fees__policy-h {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.45rem);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.55rem;
}


/* ============================================================
   1. THE MARK PLAYS ITSELF where there is no scroll runway (phones).
   Timings mirror the SEQ ranges in mark.js across a 2600ms sequence, so the phone
   and the desktop scrub tell the same story at the same proportions.
   Driven by CSS rather than rAF so it survives a background tab or a throttled
   frame loop, and needs no JavaScript once it starts.
   ============================================================ */
@keyframes smcDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes smcFade { from { opacity: 0; }          to { opacity: 1; } }

/* Nothing is showing before its own leg of the sequence starts. */
.smc-mark--selfplay [data-draw] { stroke-dashoffset: 1; }
.smc-mark--selfplay [data-fill] { opacity: 0; }

.smc-mark--selfplay [data-draw="stem"] { animation: smcDraw 832ms 52ms var(--ease) both; }
.smc-mark--selfplay [data-draw="bigLeaf"] { animation: smcDraw 572ms 832ms var(--ease) both; }
.smc-mark--selfplay [data-draw="bigVein"] { animation: smcDraw 364ms 1196ms var(--ease) both; }
.smc-mark--selfplay [data-draw="smallLeaf"] { animation: smcDraw 468ms 1404ms var(--ease) both; }
.smc-mark--selfplay [data-draw="smallVein"] { animation: smcDraw 312ms 1716ms var(--ease) both; }
.smc-mark--selfplay [data-fill="bigFill"] { animation: smcFade 416ms 1248ms var(--ease) both; }
.smc-mark--selfplay [data-fill="smallFill"] { animation: smcFade 364ms 1716ms var(--ease) both; }

/* Reduced motion: show the finished mark rather than animating into it. */
@media (prefers-reduced-motion: reduce) {
  .smc-mark--selfplay [data-draw],
  .smc-mark--selfplay [data-fill] { animation: none; }
  .smc-mark--selfplay [data-draw] { stroke-dashoffset: 0; }
  .smc-mark--selfplay [data-fill] { opacity: 1; }
}

/* ---- Temporary holiday notice: SMC's green button goes gold on hover, never
        to the deep teal (house rule). Shared layout stays in styles.css. ---- */
.notice__cta:hover { background: var(--oak); color: var(--forest); }