/* ==========================================================================
   Well-Being Solution Clinic, site stylesheet
   ========================================================================== */

:root {
  --ink: #1f2b26;
  --ink-soft: #44544d;
  --green-950: #14271f;
  --green-900: #1d3a31;
  --green-700: #2c5446;
  --green-600: #3a6b58;
  --gold: #b98c3f;
  --gold-soft: #d3b272;
  --cream: #f6f1e6;
  --paper: #fffdf8;
  --line: #e6dfcf;
  --shadow: 0 10px 30px rgba(29, 58, 49, 0.10);
  --shadow-lg: 0 18px 50px rgba(20, 39, 31, 0.18);
  --radius: 14px;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--green-700); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--green-900);
  /* Cormorant at display sizes orphans single words badly on narrow screens. */
  text-wrap: balance;
}

p { text-wrap: pretty; }

.wrap {
  width: min(1160px, 92%);
  margin: 0 auto;
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

.section { padding: 5rem 0; }
.section--cream { background: var(--cream); }
.section--green { background: var(--green-900); color: #e9e4d6; }
.section--green h2, .section--green h3 { color: #f6f1e6; }

.section-head { max-width: 720px; margin-bottom: 3rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1rem; }
.section-head p { color: var(--ink-soft); }
.section--green .section-head p { color: #cfc8b4; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: #a87c32; }

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

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

.btn--outline-light { border-color: rgba(255,255,255,0.85); color: #fff; background: transparent; }
.btn--outline-light:hover { background: rgba(255,255,255,0.14); }

.btn--lg { padding: 1.05rem 2.4rem; font-size: 1.02rem; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 253, 248, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
.brand img { width: 42px; height: 42px; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.32rem;
  color: var(--green-900);
  line-height: 1.1;
}
.brand-name small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

.site-nav { display: flex; align-items: center; gap: 1.7rem; }
.site-nav a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.site-nav a:hover { color: var(--green-700); }
.site-nav a.active { color: var(--green-700); border-bottom-color: var(--gold); }
.site-nav .btn { padding: 0.6rem 1.4rem; }
.site-nav .btn:hover { transform: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--green-900);
  transition: transform 0.2s, opacity 0.2s;
}

@media (max-width: 880px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
    padding: 0.5rem 0 1.2rem;
  }
  .site-nav.open { display: flex; }
  .site-nav a {
    padding: 0.8rem 6%;
    border-bottom: 1px solid var(--line);
  }
  .site-nav a.active { border-bottom-color: var(--line); }
  .site-nav .btn { margin: 1rem 6% 0; text-align: center; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  isolation: isolate;
  color: #fff;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(20, 39, 31, 0.88) 0%, rgba(20, 39, 31, 0.62) 45%, rgba(20, 39, 31, 0.25) 100%);
}
.hero .wrap { padding: 6rem 0; }
.hero .eyebrow { color: var(--gold-soft); }
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  color: #fff;
  max-width: 14ch;
  margin-bottom: 1.3rem;
}
.hero p {
  max-width: 54ch;
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 2.2rem;
}
.hero .btns { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Page hero (interior pages) */
.page-hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding: 6.5rem 0 4.5rem;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: var(--hero-pos, center);
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(20, 39, 31, 0.86) 0%, rgba(20, 39, 31, 0.55) 60%, rgba(20, 39, 31, 0.30) 100%);
}
.page-hero .eyebrow { color: var(--gold-soft); }
.page-hero h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); color: #fff; margin-bottom: 0.8rem; }
.page-hero p { max-width: 60ch; color: rgba(255, 255, 255, 0.88); font-size: 1.08rem; }

/* --------------------------------------------------------------------------
   Trust bar
   -------------------------------------------------------------------------- */
.trust-bar { background: var(--green-900); }
.trust-bar .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 2rem;
  padding: 1.4rem 0;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #e9e4d6;
  font-size: 0.92rem;
  line-height: 1.45;
}
.trust-item svg { flex: 0 0 26px; width: 26px; height: 26px; stroke: var(--gold-soft); }

/* --------------------------------------------------------------------------
   Cards & grids
   -------------------------------------------------------------------------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
@media (max-width: 980px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card img { height: 230px; width: 100%; object-fit: cover; }
.card-body { padding: 1.7rem 1.7rem 1.9rem; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { font-size: 1.45rem; margin-bottom: 0.6rem; }
.card-body p { color: var(--ink-soft); font-size: 0.97rem; flex: 1; }
.card-body ul { color: var(--ink-soft); font-size: 0.97rem; padding-left: 1.2rem; flex: 1; }
.card-body ul li { margin-bottom: 0.3rem; }
.card-body .btn { margin-top: 1.4rem; align-self: flex-start; }

/* --------------------------------------------------------------------------
   Split section (image + text)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 2.2rem; } }
.split img { border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; height: 100%; max-height: 460px; object-fit: cover; }
.split h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin-bottom: 1.1rem; }
.split p { color: var(--ink-soft); margin-bottom: 1rem; }
.split .btn { margin-top: 0.8rem; }

/* --------------------------------------------------------------------------
   Photo gallery
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}
.gallery figure {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--paper);
}
.gallery img { width: 100%; height: 240px; object-fit: cover; transition: transform 0.35s ease; }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption {
  padding: 0.8rem 1.1rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */
.team-photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.team-photo img { width: 100%; }
.team-photo figcaption {
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding: 0.9rem 1.2rem;
  background: var(--cream);
}

.person {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 2.2rem;
}
.person h3 { font-size: 1.6rem; margin-bottom: 0.2rem; }
.person .creds {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.person p { color: var(--ink-soft); font-size: 0.98rem; margin-bottom: 0.8rem; }
.person p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Locations & contact
   -------------------------------------------------------------------------- */
.loc-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 2.2rem;
}
.loc-card h3 { font-size: 1.5rem; margin-bottom: 0.3rem; }
.loc-card .loc-days {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.loc-card address { font-style: normal; color: var(--ink-soft); margin-bottom: 0.9rem; }
.loc-card .note { font-size: 0.92rem; color: var(--ink-soft); background: var(--cream); border-radius: 8px; padding: 0.8rem 1rem; margin-bottom: 1.2rem; }

.contact-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 2.2rem;
}
.contact-card h3 { font-size: 1.5rem; margin-bottom: 0.2rem; }
.contact-card .creds {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.contact-card ul { list-style: none; }
.contact-card li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.45rem 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.contact-card li strong { color: var(--ink); font-weight: 600; min-width: 86px; }
.contact-card a { text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Notice / info banner
   -------------------------------------------------------------------------- */
.notice {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
  padding: 1.2rem 1.5rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.notice svg { flex: 0 0 22px; width: 22px; height: 22px; stroke: var(--gold); margin-top: 0.15rem; }
.notice strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   Invitation

   .notice is a caution affordance: bordered, icon, left bar, and it is the
   right shape for a real constraint ("Sunday appointments are North York
   only"). It is the wrong shape for asking someone to get in touch, which
   ends up looking like a warning. This is the open-door version: centred,
   unboxed, and it ends in a button instead of an inline link.
   -------------------------------------------------------------------------- */
.invite {
  max-width: 640px;
  margin: 3.5rem auto 0;
  padding-top: 2.75rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.invite p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  line-height: 1.35;
  color: var(--green-900);
  text-wrap: balance;
  margin-bottom: 1.6rem;
}
.invite .invite-alt {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 1.1rem 0 0;
}

/* --------------------------------------------------------------------------
   Forms download list
   -------------------------------------------------------------------------- */
.form-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 700px) { .form-list { grid-template-columns: 1fr; } }
.form-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.97rem;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.form-link:hover { transform: translateY(-2px); border-color: var(--gold); }
.form-link svg { flex: 0 0 26px; width: 26px; height: 26px; stroke: var(--green-700); }
.form-link small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.82rem; }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  isolation: isolate;
  color: #fff;
  text-align: center;
  padding: 5.5rem 0;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(20, 39, 31, 0.82);
}
.cta-band h2 { color: #fff; font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1rem; }
.cta-band p { color: rgba(255,255,255,0.85); max-width: 56ch; margin: 0 auto 2.2rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--green-950); color: #b9c4be; font-size: 0.93rem; }
.site-footer .wrap { padding: 4rem 0 2rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }
.site-footer h4 {
  color: #f6f1e6;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.site-footer .footer-brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #f6f1e6;
  margin-bottom: 0.8rem;
}
.site-footer p { margin-bottom: 0.8rem; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 0.55rem; }
.site-footer a { color: #b9c4be; text-decoration: none; }
.site-footer a:hover { color: var(--gold-soft); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 1.6rem;
  font-size: 0.82rem;
  color: #7d8c85;
}

/* --------------------------------------------------------------------------
   Reveal animation
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
  .gallery img, .card { transition: none; }
  .gallery figure:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */
.services-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
@media (max-width: 980px) { .services-cols { grid-template-columns: 1fr; } }

.checklist { list-style: none; }
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.55rem;
  color: var(--ink-soft);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.95rem;
  height: 0.5rem;
  border-left: 2.5px solid var(--gold);
  border-bottom: 2.5px solid var(--gold);
  transform: rotate(-45deg);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green-900);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Review rail

   A horizontal rail of Google reviews. It is a plain scroll container, so
   dragging, swiping, shift-scrolling and arrow keys all work without any
   script. The arrow buttons in the heading row page through it (main.js).
   Nothing moves on its own.
   -------------------------------------------------------------------------- */
.reviews { padding-bottom: 3.5rem; }

.reviews-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.25rem;
}
.reviews-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }

.reviews-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.badge {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* The rail sits in the same column as the heading above it. It bleeds a
   little past the column on each side so card shadows are not cut off hard,
   and the cards themselves line up with the column edges. */
.reviews-rail-wrap {
  --rail-bleed: min(1.25rem, 4vw);
  position: relative;
  width: min(1160px, 92%);
  margin: 0 auto;
}

.reviews-rail {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--rail-bleed);
  scroll-behavior: smooth;
  margin: 0 calc(-1 * var(--rail-bleed));
  padding: 0.5rem var(--rail-bleed) 1.5rem;
  scrollbar-width: none;
}
.reviews-rail::-webkit-scrollbar { display: none; }

/* Soft fades at the column edges, shown only on a side that has more cards.
   main.js sets can-prev and can-next; without script the right fade shows. */
.reviews-rail-wrap::before,
.reviews-rail-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--rail-bleed) + 2.5rem);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.reviews-rail-wrap::before { left: calc(-1 * var(--rail-bleed)); background: linear-gradient(to right, var(--paper) 30%, transparent); }
.reviews-rail-wrap::after { right: calc(-1 * var(--rail-bleed)); background: linear-gradient(to left, var(--paper) 30%, transparent); opacity: 1; }
.reviews-rail-wrap.can-prev::before { opacity: 1; }
.reviews-rail-wrap.is-ready:not(.can-next)::after { opacity: 0; }

/* Three whole cards across the column on desktop, two on tablets, and on
   phones one card with the edge of the next showing. */
.review-card {
  flex: 0 0 calc((100% - 3rem) / 3);
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.review-stars { display: flex; gap: 0.15rem; margin-bottom: 1rem; }
.review-stars svg { width: 18px; height: 18px; fill: var(--gold); }

.review-card blockquote {
  margin: 0 0 1.25rem;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
}

.review-card figcaption { margin-top: auto; }
.review-author { display: block; font-weight: 600; color: var(--ink); }
.review-meta { display: block; font-size: 0.87rem; color: #7d8c85; }


.reviews-foot { margin-top: 2rem; text-align: center; }

@media (max-width: 980px) {
  .review-card { flex-basis: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 640px) {
  .reviews-rail { gap: 1rem; }
  .review-card { flex-basis: 86%; padding: 1.5rem; }
  .reviews-rail-wrap::before, .reviews-rail-wrap::after { width: calc(var(--rail-bleed) + 1.25rem); }
}

/* Arrow scrolling is instant for everyone who has asked for less motion.
   */
@media (prefers-reduced-motion: reduce) {
  .reviews-rail { scroll-behavior: auto; }
  .reviews-rail-wrap::before, .reviews-rail-wrap::after { transition: none; }
}

/* --------------------------------------------------------------------------
   Focus states

   Keyboard users previously got only the browser default outline, which is
   close to invisible against the gold buttons. :focus-visible keeps the ring
   off mouse clicks while guaranteeing it for keyboard and assistive tech.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--green-900);
  outline-offset: 3px;
  border-radius: 4px;
}

/* A dark ring disappears against the dark photographic sections, so flip it. */
.hero :focus-visible,
.page-hero :focus-visible,
.cta-band :focus-visible,
.section--green :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--gold-soft);
}

.btn:focus-visible { outline-offset: 4px; }

/* Only suppress the legacy outline where :focus-visible has replaced it. */
:focus:not(:focus-visible) { outline: none; }

/* Kill the 300ms tap delay and the grey flash on mobile. */
a, button, .btn, summary, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Fees page */
.fee-block { margin-top: 2.5rem; }
.fee-block h2 { margin-bottom: 1rem; }
.fee-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 8px; }
.fee-table { width: 100%; border-collapse: collapse; color: var(--ink); }
.fee-table th, .fee-table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.fee-table thead th { background: var(--cream); font-weight: 600; font-size: .9rem; }
.fee-table tbody tr:last-child td { border-bottom: 0; }
.fee-table td:first-child { white-space: nowrap; }
.fee-amount { font-weight: 600; }
.fee-hst { color: var(--ink-soft); font-size: .8rem; }
.fee-book { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.fee-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fee-info { max-width: 760px; }
.fee-info > div + div { margin-top: 2rem; }
@media (max-width: 480px) {
  .fee-table th, .fee-table td { padding: .75rem .6rem; }
}

/* --------------------------------------------------------------------------
   Services cards (homepage "Our services" and the /services hub)
   Added 2026-10-10 for the homepage rebuild. Text only cards, no images.
   Four across on wide screens, two on tablets, one under 700px.
   -------------------------------------------------------------------------- */
.section-head h1 { font-size: clamp(2.3rem, 5vw, 3.2rem); margin-bottom: 1rem; }
.section-head--solo { margin-bottom: 0; }
.section-head .btn { margin-top: 1.2rem; }

.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 1080px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
.svc-grid--hub { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
@media (max-width: 700px) { .svc-grid, .svc-grid--hub { grid-template-columns: 1fr; } }

.svc-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.6rem 1.7rem;
}
.svc-card h2,
.svc-card h3 { font-size: 1.45rem; margin-bottom: 0.5rem; }
.svc-card h2 a,
.svc-card h3 a { color: inherit; text-decoration: none; }
.svc-card h2 a:hover,
.svc-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.svc-card p { color: var(--ink-soft); font-size: 0.97rem; flex: 1; }
.svc-grid--hub .svc-card { padding: 2rem 2rem 2.1rem; }
.svc-grid--hub .svc-card h2 { font-size: 1.6rem; }

.svc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.5rem; margin-top: 1.3rem; }
.svc-actions .btn { padding: 0.6rem 1.6rem; }
.svc-more {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--green-700);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}
.svc-all { text-align: center; margin-top: 2.5rem; }

/* "Not sure what you need?" links */
.help-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  max-width: 880px;
  margin: 0 auto;
}
.help-alt { text-align: center; margin-top: 1.8rem; color: var(--ink-soft); }
@media (max-width: 700px) {
  .help-links { flex-direction: column; align-items: stretch; }
  .help-links .btn { text-align: center; }
}

/* Single Barrie location card and the North York logistics line */
.loc-single { max-width: 560px; margin: 0 auto; }
.loc-alt { text-align: center; margin-top: 1.5rem; font-size: 0.95rem; color: var(--ink-soft); }

/* Text option under the booking band button */
.cta-band .cta-alt { margin: 1.4rem auto 0; font-size: 0.97rem; }
.cta-band .cta-alt a { color: var(--gold-soft); }

/* Visually hidden text for repeated link labels such as "Book" */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   FAQ accordions (native details/summary, no script) and booking band link
   -------------------------------------------------------------------------- */
details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; padding-right: 2rem; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0; color: var(--gold); font-size: 1.25rem; line-height: 1.2; transition: transform 0.15s ease; }
@media (prefers-reduced-motion: reduce) { summary::after { transition: none; } }
details[open] summary::after { transform: rotate(45deg); }
details p { margin-top: 0.6rem; color: var(--ink-soft); }
.cta-band .band-link { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Contrast fixes (2026-10-10)

   White text on the brand gold measured about 2.9:1, below the 4.5:1 needed
   for button-sized text. The button uses a deeper gold so the white label
   stays readable everywhere; the brighter gold stays for accents.
   Footer links were grey with no underline, so it was hard to tell what was
   clickable. They are now light, underlined and turn gold on hover.
   -------------------------------------------------------------------------- */
.btn--gold { background: #8a6527; color: #fff; }
.btn--gold:hover { background: #6f511f; }

.site-footer a {
  color: #e9e4d6;
  text-decoration: underline;
  text-decoration-color: rgba(233, 228, 214, 0.35);
  text-underline-offset: 0.22em;
}
.site-footer a:hover { color: var(--gold-soft); text-decoration-color: currentColor; }

/* Review rail: long reviews are clamped so every card stays the same height. */
.review-card blockquote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Reviews: rating line and arrow buttons (2026-10-20). Nothing auto-scrolls.
   -------------------------------------------------------------------------- */
.reviews-score { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; }
.reviews-rating { font-size: clamp(2rem, 4vw, 2.6rem); }
.reviews-stars { display: inline-flex; gap: 0.15rem; }
.reviews-stars svg { width: 22px; height: 22px; fill: var(--gold); }
.reviews-count {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--green-700);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.reviews-count:hover { color: var(--green-900); }

.reviews-nav { display: flex; gap: 0.6rem; }
.reviews-arrow {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.reviews-arrow svg { width: 20px; height: 20px; fill: none; stroke: var(--green-700); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.reviews-arrow:hover:not(:disabled) { background: var(--cream); border-color: var(--green-700); }
.reviews-arrow:disabled { opacity: 0.35; cursor: default; }

/* --------------------------------------------------------------------------
   Screen size pass (2026-10-20)

   Checked every page from 360px phones to 3440px ultrawide monitors. The
   rules below keep reading widths comfortable, stop wide hero photos from
   being cropped to a thin strip, give small links a full size tap area on
   touch screens, and avoid a single card left alone on the last grid row.
   -------------------------------------------------------------------------- */

/* The menu button kept shrinking below 44px next to a long clinic name. */
.nav-toggle { flex-shrink: 0; }

/* Large screens: the photo heroes keep a sensible height. At 78vh a 1440px
   tall monitor cropped the photo to a narrow band and enlarged it a lot. */
.hero { min-height: min(78vh, 760px); }

/* Body text in the full width column ran to 130 characters a line on the
   service pages. Keep running text at a readable measure, left aligned
   under its heading. */
.section > .wrap.reveal > p,
.section > .wrap > .reveal:not(.section-head):not(.invite):not([style*="center"]) > p,
.section > .wrap > .reveal:not(.section-head):not(.invite):not([style*="center"]) > .checklist,
.section > .wrap > .reveal:not(.section-head):not(.invite):not([style*="center"]) > ul:not([class]),
.section > .wrap > .reveal:not(.section-head):not(.invite):not([style*="center"]) > ol {
  max-width: 68ch;
}

/* Trust bar: four items, so four across, two by two, or one column. Never
   three and an orphan. */
.trust-bar .wrap { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .trust-bar .wrap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trust-bar .wrap { grid-template-columns: 1fr; } }

/* Two column card grids with an odd count: centre the last card instead of
   leaving it stranded on the left. */
@media (min-width: 761px) {
  .grid-2 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.9rem);
  }
}

/* Contact cards: long email addresses wrapped past the card on phones. */
.contact-card li { flex-wrap: wrap; min-width: 0; }
.contact-card li > a,
.contact-card li > span { min-width: 0; overflow-wrap: anywhere; }

/* Touch screens: small text links get a taller tap area without changing
   how they look. */
@media (pointer: coarse), (max-width: 880px) {
  .site-footer li { margin-bottom: 0; }
  .site-footer li a,
  .footer-bottom a,
  .svc-more,
  .reviews-count {
    display: inline-block;
    padding: 0.6rem 0;
  }
  .footer-bottom a { padding-inline: 0.25rem; }
  .reviews-count { padding-block: 0.75rem; }
  .svc-card h2 a,
  .svc-card h3 a { display: inline-block; padding: 0.4rem 0; }
}

/* FAQ: the whole question row is the tap target, not just the text line. */
details { padding: 0; }
summary { padding: 1rem 2rem 1rem 0; }
summary::after { top: 1rem; }
details p { margin-top: 0; padding-bottom: 1rem; }
details p + p { margin-top: -0.4rem; }

/* Small phones: the clinic name and its tagline wrapped onto four lines and
   made the sticky header almost 100px tall. Keep each on one line. */
@media (max-width: 480px) {
  .site-header .wrap { gap: 0.75rem; padding: 0.6rem 0; }
  .brand { gap: 0.55rem; min-width: 0; }
  .brand img { width: 36px; height: 36px; flex-shrink: 0; }
  .brand-name { font-size: 1.12rem; white-space: nowrap; }
  .brand-name small { font-size: 0.56rem; letter-spacing: 0.12em; }
}

/* --------------------------------------------------------------------------
   Staff sign in button (header)
   Desktop: right of the menu. 601-880px: left of the hamburger.
   Phones (600px and below) and 881-1100px: its own row above the header bar.
   -------------------------------------------------------------------------- */
.staff-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.5rem 1.1rem;
  border: 2px solid var(--green-700);
  border-radius: 999px;
  background: var(--paper);
  color: var(--green-900);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background 0.15s, color 0.15s;
}
.staff-signin:hover, .staff-signin:focus-visible { background: var(--green-700); color: #fff; }
.staff-signin svg { flex: 0 0 22px; }

.site-header .brand { order: 0; }
.site-header .site-nav { order: 2; }
.site-header .staff-signin { order: 3; }
.site-header .nav-toggle { order: 4; }

@media (max-width: 880px) {
  .site-header .wrap { gap: 0.75rem; }
  .site-header .brand { margin-right: auto; }
  .site-header .staff-signin { order: 1; }
  .site-header .nav-toggle { order: 2; }
}

@media (max-width: 1100px) and (min-width: 881px) {
  .site-header .wrap { flex-wrap: wrap; row-gap: 0.4rem; }
  .site-header .staff-signin { order: -1; flex-basis: auto; margin-left: auto; width: auto; }
  .site-header .wrap::before { content: ""; order: -1; flex: 1 1 100%; height: 0; }
  .site-header .staff-signin { order: -2; }
  .site-nav { gap: 1.1rem; }
}

@media (max-width: 600px) {
  .site-header .wrap { flex-wrap: wrap; row-gap: 0.4rem; padding: 0.5rem 0 0.6rem; }
  .site-header .staff-signin { order: -2; margin-left: auto; }
  .site-header .wrap::before { content: ""; order: -1; flex: 1 1 100%; height: 0; }
  .site-header .brand { margin-right: 0; }
  .site-header .nav-toggle { margin-left: auto; }
  .brand-name { font-size: 1.2rem; }
}