/* Harmony clinic design system (reference build: Cabbagetown Animal Hospital, Design C "Neighbourhood")
   Plain CSS by design: this site's sibling (design-a) runs on the Tailwind Play CDN,
   which this session hit three separate real bugs with (silently-empty generated
   rules for colliding theme keys, and JIT reprocessing corrupting styles on dynamic
   class changes). A 7+ page site is the wrong place to inherit that fragility. */

/* Palette taken from the Harmony logo itself, each colour with one job:
   pink (the logotype) = actions, links, small accents; periwinkle slate (the
   "veterinary services" line) = structure, dark bands, secondary labels;
   warm neutrals = calm backgrounds. Text pairs were checked against WCAG AA:
   --brand and --secondary on white are 5.5:1 and 5.1:1. */
:root {
  --ink: #1D2036;
  --ink-soft: #565662;
  --paper: #FFFFFF;
  --bg: #FCFAF8;
  --sage: #FCE7EE;
  --linen: #F6F1EE;
  --brand: #CC1B53;
  --brand-hover: #A0143B;
  --dark: #2E3250;
  --tint-rgb: 46,50,80;
  --secondary: #626B9E;
  --calm: #F02B6C;
  --line: #ECE6E3;
  --field-border: #85828D;
  --terracotta: #D97E52;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --shadow-soft: 0 1px 8px rgba(0,0,0,.04);
  --shadow-card: 0 12px 32px -12px rgba(var(--tint-rgb),.14);
  --max: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.6;
  overscroll-behavior-x: none;
}
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--calm); outline-offset: 3px; }
:where(a, button, summary):focus:not(:focus-visible) { outline: none; }

/* Shared easing: fast start, soft landing. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 1024px) { .container { padding: 0 1.5rem; } }

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.15; }
h3 { font-size: 1.25rem; line-height: 1.3; }
p { margin: 0; color: var(--ink-soft); }
.lede { font-size: 1.1rem; line-height: 1.6; max-width: 60ch; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 9999px; font-weight: 700; font-size: 15px; padding: .85rem 1.6rem; text-decoration: none; white-space: nowrap; cursor: pointer; border: none; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s var(--ease-out), color .2s ease; }
.btn:disabled { opacity: .6; cursor: progress; }
@media (max-width: 560px) {
  .hero-cta .btn { width: 100%; white-space: normal; text-align: center; }
}
.btn-primary { background: var(--brand); color: var(--paper); box-shadow: var(--shadow-card); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-ghost { background: transparent; color: var(--brand); border: 1.5px solid rgba(var(--tint-rgb),.28); }
.btn-ghost:hover { background: var(--sage); }
@media (prefers-reduced-motion: no-preference) { .btn:active { transform: scale(.98); } }

@media (prefers-reduced-motion: no-preference) {
  .cta-pop.pop-pending { opacity: 0; transform: scale(.85); }
  .cta-pop.pop-in { animation: cta-pop .55s cubic-bezier(.34,1.56,.64,1) forwards; }
  @keyframes cta-pop { 0% { opacity: 0; transform: scale(.85); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
}

/* Header / nav */
header.site { position: sticky; top: 0; z-index: 50; background: rgba(252,250,248,.92); backdrop-filter: blur(10px); box-shadow: var(--shadow-soft); transition: box-shadow .25s ease; }
header.site.is-scrolled { box-shadow: 0 6px 24px -10px rgba(var(--tint-rgb),.18); }
.topbar { background: rgba(231,237,230,.8); border-bottom: 1px solid var(--line); font-size: 12px; padding: .4rem 0; color: var(--ink-soft); }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; row-gap: .15rem; }
.topbar .container > * { min-width: 0; }
.topbar .pill { display: inline-flex; align-items: center; gap: .4rem; background: var(--paper); border-radius: 9999px; padding: .15rem .6rem; font-weight: 700; color: var(--secondary); font-size: 10.5px; }
.topbar .pill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--calm); }
/* Header shares the page's content width so its edges line up with the
   headings and cards below it. */
header.site .container { max-width: var(--max); }
/* Desktop keeps one row. Smaller screens use a Menu disclosure when JavaScript
   is available; the full link list remains visible without JavaScript. */
.navrow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; padding-top: .7rem; padding-bottom: .55rem; }
.navrow .brand { order: 1; }
.navrow .nav-actions { order: 2; }
.navrow nav.primary { order: 3; }
@media (min-width: 1220px) {
  .navrow { flex-wrap: nowrap; height: 76px; padding-top: 0; padding-bottom: 0; gap: 1rem; }
  .navrow nav.primary { order: 2; }
  .navrow .nav-actions { order: 3; }
  .brand { gap: .75rem; }
}
.brand { display: flex; align-items: center; gap: 1.1rem; text-decoration: none; flex-shrink: 0; }
.brand .mark { width: 40px; height: 40px; border-radius: 9999px; background: var(--brand); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.brand .name { font-weight: 800; font-size: 1.05rem; color: var(--ink); line-height: 1.2; }
@media (max-width: 420px) { .brand .name { font-size: .88rem; max-width: 32vw; white-space: normal; line-height: 1.15; display: inline-block; vertical-align: top; } .brand .mark { width: 34px; height: 34px; } .brand .mark .material-symbols-outlined { font-size: 18px; } .brand { gap: .5rem; } }
.brand .by { display: flex; align-items: center; gap: .2rem; font-size: 11.5px; font-weight: 700; color: var(--secondary); margin-top: .15rem; }
.brand .by img { height: 14px; width: auto; opacity: .92; margin-left: -2px; }
@media (max-width: 420px) { .brand .by { margin-top: .1rem; } .brand .by img { height: 12px; } }
nav.primary { display: flex; align-items: center; gap: .25rem; flex-basis: 100%; max-width: 100%; min-width: 0; margin: 0; padding: .1rem; }
nav.primary a { padding: .45rem .8rem; border-radius: 9999px; text-decoration: none; font-size: 14px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; flex-shrink: 0; transition: background-color .15s, color .15s; }
nav.primary a:hover { color: var(--ink); background: var(--linen); }
nav.primary a[aria-current="page"] { background: var(--sage); color: var(--ink); }
.nav-toggle { display: none; }
@media (max-width: 1219px) {
  .navrow nav.primary { flex-direction: column; align-items: stretch; border-top: 1px solid var(--line); padding-top: .5rem; margin-top: .15rem; max-height: calc(100svh - 5rem); overflow-y: auto; }
  nav.primary a { display: flex; align-items: center; min-height: 44px; white-space: normal; border-radius: .6rem; }
  .has-menu nav.primary:not(.is-open) { display: none; }
  .has-menu .nav-toggle { order: 2; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .5rem .75rem; margin-left: auto; border: 1px solid var(--field-border); border-radius: 9999px; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; }
  .nav-toggle::after { content: ""; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
  .nav-glide { display: none; }
  .nav-cta { min-height: 44px; }
}
/* Desktop: one compact row with every destination visible. */
@media (min-width: 1220px) {
  nav.primary { flex: 0 1 auto; max-width: none; margin: 0; padding: .25rem; gap: 0; background: var(--linen); border-radius: 9999px; -webkit-mask-image: none !important; mask-image: none !important; }
  nav.primary a { padding: .45rem .62rem; font-size: 13.5px; }
}
.nav-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.nav-cta .cta-short { display: none; }
.nav-cta[href$="pre-book.html"]::before { content: "event_available"; font-family: "Material Symbols Outlined"; font-feature-settings: "liga"; font-size: 18px; line-height: 1; font-weight: 400; }
@media (min-width: 1220px), (max-width: 560px) {
  .nav-cta .cta-long { display: none; }
  .nav-cta .cta-short { display: inline; }
}
@media (max-width: 560px) {
  .navrow { column-gap: .5rem; }
  .nav-actions { gap: .35rem; }
  .nav-cta { padding: .6rem 1.05rem; font-size: 14px; }
}

/* Sections */
section { padding: 3.5rem 0; }
section.tight { padding: 2.25rem 0; }
.section-head { max-width: 42rem; margin-bottom: 2rem; }
.section-head .eyebrow { display: none; } /* intentionally unused: see design-taste-frontend eyebrow restraint rule */
.two-col { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.two-col > * { min-width: 0; }
.field-row > * { min-width: 0; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.1fr .9fr; gap: 3rem; } }
/* Tall content (e.g. a form) beside a short intro: start both at the top, and keep
   the intro in view while the visitor works down the other column. */
.two-col.align-top { align-items: start; }
@media (min-width: 900px) { .two-col.align-top > :first-child { position: sticky; top: 7rem; } }
.two-col.reverse { direction: rtl; }
.two-col.reverse > * { direction: ltr; }

/* Cards */
.card { background: var(--paper); border-radius: var(--radius); padding: 1.75rem; }
.service-question { display: flex; gap: .9rem; background: var(--linen); border-radius: var(--radius); padding: .9rem 1.1rem; margin-top: .9rem; }
.service-question .thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.service-question .body { flex: 1; min-width: 0; }
.service-question .q { display: flex; align-items: flex-start; gap: .4rem; font-weight: 800; color: var(--ink); font-size: 14.5px; margin-bottom: .3rem; }
.service-question .q .material-symbols-outlined { font-size: 18px; color: var(--calm); flex-shrink: 0; margin-top: 1px; }
.service-question p { font-size: 13.5px; color: var(--ink-soft); }
.service-question a { color: var(--brand); font-weight: 700; }
@media (max-width: 420px) { .service-question { flex-direction: column; } .service-question .thumb { width: 100%; height: 120px; } }
.card-soft { background: var(--linen); border-radius: var(--radius); padding: 1.75rem; }

/* New Clients: pathway selector cards */
.pathway-card { background: var(--paper); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-card); display: flex; flex-direction: column; height: 100%; }
.pathway-card .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.pathway-card .head .material-symbols-outlined { font-size: 26px; color: var(--secondary); }
.pathway-card h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.pathway-card .lede { font-size: 14px; color: var(--ink-soft); margin-bottom: 1rem; }
.pathway-point { display: flex; gap: .7rem; margin-bottom: .9rem; align-items: flex-start; }
.pathway-point .material-symbols-outlined { font-size: 19px; color: var(--calm); flex-shrink: 0; margin-top: 2px; }
.pathway-point strong { display: block; font-size: 14px; color: var(--ink); margin-bottom: .1rem; }
.pathway-point span.detail { font-size: 13px; color: var(--ink-soft); }
.pathway-card .foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.pathway-card .foot .note { font-size: 12.5px; color: var(--ink-soft); }

/* New Clients: fear-free photo row */
.approach-card { background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.approach-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
.approach-card .body { padding: 1.35rem; }
.approach-card .tag-line { display: flex; align-items: center; gap: .35rem; font-size: 12.5px; font-weight: 700; color: var(--secondary); margin-bottom: .4rem; }
.approach-card .tag-line .material-symbols-outlined { font-size: 16px; }
.approach-card h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.approach-card p { font-size: 13.5px; color: var(--ink-soft); }

/* Pet Health Guides grid: filter pills + photo-topped guide cards. */
.guide-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.guide-filter { font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); background: var(--paper); border: 1.5px solid var(--line); border-radius: 9999px; padding: .5rem 1rem; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.guide-filter:hover { border-color: var(--calm); }
.guide-filter.active { background: var(--brand); color: var(--paper); border-color: var(--brand); }
.guide-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .guide-grid { grid-template-columns: repeat(3, 1fr); } }
.guide-card { background: var(--paper); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; box-shadow: var(--shadow-card); transition: transform .25s var(--ease-out), box-shadow .25s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.guide-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -14px rgba(var(--tint-rgb),.22); }
  a.guide-card:hover .guide-media img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: no-preference) {
  .guide-card.is-entering { animation: guide-in .35s var(--ease-out) both; }
  @keyframes guide-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
}
.guide-card .guide-media { position: relative; aspect-ratio: 4/3; background: var(--sage); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; color: var(--ink-soft); border-bottom: 1.5px dashed rgba(var(--tint-rgb),.18); overflow: hidden; }
.guide-card .guide-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.guide-card .guide-media .material-symbols-outlined { font-size: 30px; color: var(--brand); opacity: .6; }
.guide-card .guide-media span.cap { font-size: 11.5px; font-weight: 700; text-align: center; padding: 0 .75rem; }
.guide-card .guide-badge { position: absolute; top: .65rem; left: .65rem; background: rgba(23,29,24,.78); color: #fff; font-size: 11.5px; font-weight: 700; padding: .3rem .65rem; border-radius: 9999px; }
.guide-card .guide-time { position: absolute; top: .65rem; right: .65rem; background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 700; padding: .3rem .6rem; border-radius: 9999px; }
.guide-card .guide-body { padding: 1.35rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.guide-card h3 { font-size: 1.02rem; color: var(--ink); }
.guide-card p { font-size: 13.5px; color: var(--ink-soft); flex: 1; }
.guide-card .guide-cta { font-size: 13.5px; font-weight: 700; color: var(--brand); display: inline-flex; align-items: center; gap: .25rem; }
.guide-card.is-stub { box-shadow: none; background: transparent; outline: 1.5px dashed rgba(var(--tint-rgb),.22); outline-offset: -1.5px; }
.guide-card.is-stub .guide-media img { filter: grayscale(.7); opacity: .55; }
.guide-card.is-stub .guide-media { background: var(--linen); }
.guide-card.is-stub .guide-cta { color: var(--ink-soft); }
.guide-card.is-hidden { display: none; }

.map-embed { border-radius: var(--radius); overflow: hidden; box-shadow: 0 12px 30px rgba(var(--tint-rgb),.12); background: var(--linen); }
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-embed.tall iframe { min-height: 320px; }
.map-embed.short iframe { min-height: 200px; }
.grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.trust-pillar { display: flex; gap: .85rem; align-items: flex-start; }

.check-list { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-top: 1rem; }
.check-list .item { display: flex; align-items: center; gap: .4rem; font-size: 14px; font-weight: 700; }
.check-list .material-symbols-outlined { font-size: 18px; color: var(--calm); }
.step-list { display: grid; gap: 1.25rem; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 900px) { .step-list { grid-template-columns: repeat(3, 1fr); } }
.step-list .step { position: relative; padding-left: 2.75rem; }
.step-list .step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 9999px; background: rgba(250,247,242,.15); color: var(--paper); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.trust-pillar .material-symbols-outlined { font-size: 21px; color: var(--brand); background: var(--sage); border-radius: 999px; padding: .5rem; flex-shrink: 0; }
.trust-pillar h3 { font-size: .95rem; font-weight: 800; color: var(--ink); margin-bottom: .2rem; }
.trust-pillar p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; margin: 0; }

.access-card { background: var(--paper); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-card); }
.access-card .icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--sage); color: var(--brand); margin-bottom: .9rem; }
.access-card .icon-badge .material-symbols-outlined { font-size: 21px; }
.access-card h3 { font-size: 1rem; margin-bottom: .4rem; }
.access-card p { font-size: 13.5px; color: var(--ink-soft); }
.access-card strong { color: var(--ink); }
.access-card { display: flex; flex-direction: column; }
.access-card p { flex: 1; }
.access-link { margin-top: .9rem; font-size: 13.5px; font-weight: 700; color: var(--brand); text-decoration: none; }
.access-link:hover { text-decoration: underline; }

/* Getting here: verified parking lots with one-tap directions */
.getting-sub { display: flex; align-items: center; gap: .45rem; font-size: 1.05rem; margin-bottom: 1rem; }
.getting-sub .material-symbols-outlined { color: var(--calm); font-size: 22px; }
.lot-card { background: var(--paper); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: .8rem; }
.lot-head { display: flex; align-items: center; gap: .8rem; }
.lot-head > div { flex: 1; min-width: 0; }
.lot-head strong { display: block; font-size: 1rem; color: var(--ink); }
.lot-head span:not(.lot-badge):not(.lot-walk) { font-size: 13px; color: var(--ink-soft); }
.lot-badge { width: 38px; height: 38px; border-radius: 999px; background: #087a35; color: #fff; font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lot-walk { font-size: 12px; font-weight: 700; color: var(--brand); background: var(--sage); padding: .3rem .65rem; border-radius: 999px; white-space: nowrap; }
.lot-card p { font-size: 13.5px; }
@media (max-width: 560px) {
  .lot-head { flex-wrap: wrap; row-gap: .45rem; }
  .lot-head > div { flex: 1 1 calc(100% - 38px - .8rem); }
  .lot-head span:not(.lot-badge):not(.lot-walk) { display: block; line-height: 1.4; }
  .lot-walk { order: 3; margin-left: calc(38px + .8rem); }
}
.lot-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin-top: auto; }
.btn-sm { padding: .55rem 1rem; font-size: 13.5px; gap: .35rem; }
.btn-sm .material-symbols-outlined { font-size: 17px; }
.lot-rates { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-left: auto; }
.before-you-come h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.before-you-come ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; }
.before-you-come li { font-size: 14px; color: var(--ink-soft); }
.before-you-come li strong { color: var(--ink); }
.before-you-come a { color: var(--brand); font-weight: 700; }

/* Team: a simple grid of person cards (photo, name, role, short bio). */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 2.5rem 1.75rem; }
.person { display: flex; flex-direction: column; }
.person-body { padding-top: 1.1rem; }
.person-name { font-size: 1.2rem; font-weight: 800; color: var(--ink); line-height: 1.25; letter-spacing: -.01em; }
.person-role { font-size: 14.5px; font-weight: 600; color: var(--secondary); margin-top: .2rem; }
.person-bio { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin-top: .7rem; max-width: 42ch; text-wrap: pretty; }
.person-note { font-size: 13px; color: var(--ink-soft); margin-top: .7rem; }
.person-join { justify-content: center; align-items: flex-start; align-self: start; aspect-ratio: 4 / 5; background: var(--sage); border-radius: var(--radius); padding: 1.75rem; }
.person-join .person-bio { margin-bottom: 1.1rem; }
.team-tag { font-size: 12.5px; font-weight: 700; color: var(--secondary); margin-bottom: .25rem; }

/* Portrait frame. When a person has an intro clip (data-video), the whole photo is a
   play button; the clip plays in place with sound, native controls, and captions. */
.team-media { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--sage); }
.team-media .team-photo, .team-media .team-avatar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease, transform .6s var(--ease-out); }
.team-avatar { display: flex; align-items: center; justify-content: center; background: var(--sage); color: var(--brand); font-size: clamp(3rem, 8vw, 4.5rem); font-weight: 700; letter-spacing: .04em; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .person:hover .team-photo { transform: scale(1.03); } }
.team-media video.team-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; background: var(--ink); }
.team-media.is-playing .team-photo, .team-media.is-playing .team-avatar { opacity: 0; }
.team-media.is-playing video.team-video { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.video-trigger { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: flex-end; justify-content: flex-start; }
.video-trigger:focus-visible { outline-offset: -4px; }
.video-pill { margin: .75rem; display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .95rem .45rem .6rem; border-radius: 999px; background: rgba(23,29,24,.74); color: #fff; font: inherit; font-size: 13px; font-weight: 700; line-height: 1; transition: background .2s ease, transform .2s var(--ease-out); }
.video-pill .material-symbols-outlined { font-size: 20px; }
.video-trigger:hover .video-pill, .video-trigger:focus-visible .video-pill { background: rgba(23,29,24,.92); transform: translateY(-1px); }
.video-close { position: absolute; top: .6rem; right: .6rem; z-index: 3; width: 36px; height: 36px; border-radius: 999px; border: 0; background: rgba(255,255,255,.92); color: var(--ink); display: none; align-items: center; justify-content: center; cursor: pointer; }
.video-close .material-symbols-outlined { font-size: 20px; }
.team-media.is-playing .video-trigger { display: none; }
.team-media.is-playing .video-close { display: inline-flex; }
.team-media.no-video .video-trigger, .team-media.no-video .video-close { display: none; }
@media (prefers-reduced-motion: reduce) { .team-media .team-photo, .team-media .team-avatar, .team-media video.team-video { transition: none; } }

/* FAQ accordion */
details.faq { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.4rem; margin-bottom: .6rem; }
details.faq summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .chev { transition: transform .25s var(--ease-out); flex-shrink: 0; color: var(--ink-soft); }
details.faq[open] summary .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  details.faq[open] > p { animation: faq-in .25s var(--ease-out); }
  @keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* Hero photo settles in on load: a slow, subtle zoom-out that makes the page
   feel alive on arrival without delaying anything (it starts fully visible). */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo-wrap img { animation: hero-settle 1.6s var(--ease-out) both; }
  @keyframes hero-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
  .hero-caption { animation: caption-in .8s .35s var(--ease-out) both; }
  @keyframes caption-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* Primary buttons gain a little depth on hover (clickable things only). */
@media (hover: hover) {
  .btn-primary:hover { box-shadow: 0 14px 30px -12px rgba(var(--tint-rgb),.35); }
}

/* Scroll reveal (states added by site.js only when motion is allowed). */
@media (prefers-reduced-motion: no-preference) {
  .reveal-pending { opacity: 0; transform: translateY(14px); }
  .reveal-in { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
}
details.faq p { margin-top: .75rem; font-size: 15px; }
.faq-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; align-items: start; }
@media (min-width: 900px) { .faq-grid.cols-2 { grid-template-columns: 1fr 1fr; } }

/* Forms */
label.field-label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: .35rem; }
input, select, textarea {
  width: 100%; font: inherit; font-size: 16px; padding: .8rem 1rem; border-radius: .6rem;
  border: 1px solid var(--field-border); background: var(--paper); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.field { margin-bottom: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 640px) { .field-row.cols-2 { grid-template-columns: 1fr 1fr; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sr-only[href="#main"]:focus { position: fixed; top: .75rem; left: .75rem; z-index: 100; width: auto; height: auto; margin: 0; padding: .75rem 1rem; overflow: visible; clip: auto; white-space: normal; border-radius: .5rem; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-card); }
.hp-field { display: none; }

@keyframes field-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--tint-rgb),.45); } 70% { box-shadow: 0 0 0 12px rgba(var(--tint-rgb),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--tint-rgb),0); } }
.field-pulse { animation: field-pulse 1s ease-out 2; border-radius: .6rem; }

/* Footer */
footer.site { background: var(--dark); color: rgba(250,247,242,.85); padding: 3rem 0 1.5rem; margin-top: 3rem; }
footer.site h2 { color: var(--paper); font-size: 14px; margin-bottom: .75rem; }
footer.site a { color: rgba(250,247,242,.8); text-decoration: none; font-size: 14.5px; }
footer.site a:hover { color: var(--paper); }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 800px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-links { display: flex; flex-direction: column; gap: .55rem; }
.foot-backed-by { display: flex; align-items: center; gap: .55rem; margin-top: 1.1rem; }
.foot-backed-by span { font-size: 12px; font-weight: 600; color: rgba(250,247,242,.55); }
.foot-backed-by img { height: 20px; width: auto; opacity: .95; }
.foot-bottom { border-top: 1px solid rgba(250,247,242,.16); margin-top: 2.5rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 13px; color: rgba(250,247,242,.6); }

/* Utility */
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.flex { display: flex; } .items-center { align-items: center; } .gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; }
.flex-wrap { flex-wrap: wrap; }
.text-sm { font-size: 13.5px; }
.muted { color: var(--ink-soft); }
.balance { text-wrap: balance; }
.icon { display: inline-flex; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }

.hero-photo-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.hero-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.hero-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 3.5rem 1.25rem 1.25rem; background: linear-gradient(to top, rgba(29,32,54,.95) 0%, rgba(29,32,54,.9) 55%, rgba(29,32,54,0) 100%); color: var(--paper); }
.hero-caption strong { display: block; margin-bottom: .2rem; }
.hero-caption span { font-size: 13.5px; color: rgba(250,247,242,.85); }

.hero-meta { display: flex; flex-direction: column; gap: .45rem; font-size: 13px; color: var(--ink-soft); }
.hero-meta .item { display: flex; align-items: center; gap: .4rem; }
.hero-meta .material-symbols-outlined { font-size: 16px; color: var(--calm); }
.hero-meta .flag-icon { font-size: 14px; line-height: 1; }

.photo-placeholder { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--linen); border: 1.5px dashed rgba(var(--tint-rgb),.18); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; color: var(--ink-soft); margin-bottom: 1rem; }
.photo-placeholder .material-symbols-outlined { font-size: 28px; color: var(--brand); opacity: .6; }
.photo-placeholder span { font-size: 12px; font-weight: 700; letter-spacing: .01em; text-align: center; padding: 0 .5rem; }
img.photo-placeholder { border: none; object-fit: cover; height: auto; }
.avatar-sm { width: 56px; height: 56px; border-radius: 9999px; background: var(--brand); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 800; margin-bottom: .9rem; }

.faces-row { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.faces-row .stack { display: flex; flex-shrink: 0; }
.faces-row .avatar-xs { width: 38px; height: 38px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin-left: -10px; border: 2px solid var(--paper); background: var(--sage); color: var(--brand); font-size: .8rem; font-weight: 800; }
.faces-row .avatar-xs.filled { background: var(--brand); color: var(--paper); }
.faces-row .avatar-xs:first-child { margin-left: 0; }
.faces-row .avatar-xs .material-symbols-outlined { font-size: 17px; }
.faces-row .caption { font-size: 13px; color: var(--ink-soft); }
.faces-row .caption a { color: var(--brand); font-weight: 700; text-decoration: none; }
.faces-row .caption a:hover { text-decoration: underline; }

@media (min-width: 900px) { .two-col.hero { grid-template-columns: .95fr 1.15fr; gap: 2.5rem; } }
.hero-photo-wrap { height: 340px; }
@media (min-width: 900px) { .hero-photo-wrap { height: 420px; } }

.notice-banner { background: #fff8ec; border: 1px solid #f0dfb8; border-radius: .6rem; padding: .9rem 1.2rem; font-size: 13.5px; color: #6b5115; margin-bottom: 2rem; }

.cookie-banner { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; }
.cookie-banner .inner { max-width: var(--max); margin: .75rem auto; padding: 1rem 1.25rem; border-radius: 1rem; background: var(--ink); color: #fff; box-shadow: 0 20px 40px -12px rgba(0,0,0,.35); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.cookie-banner p { flex: 1 1 260px; margin: 0; font-size: 14px; color: rgba(255,255,255,.88); }
.cookie-banner a { color: #fff; text-decoration: underline; }
.cookie-banner button { border: none; border-radius: 9999px; font-weight: 700; font-size: 14px; cursor: pointer; padding: .6rem 1.2rem; }
.cookie-banner .decline { background: transparent; color: rgba(255,255,255,.75); }
.cookie-banner .accept { background: #fff; color: var(--ink); }

/* Page-to-page transition: the new page fades and rises in while the header stays
   put. Uses cross-document View Transitions (Chrome/Edge 126+, Safari 18.2+); other
   browsers simply navigate as normal. Off for reduced-motion visitors. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  header.site { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: page-out .16s ease-in both; }
  ::view-transition-new(root) { animation: page-in .38s var(--ease-out) both; }
}
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }

/* --- Additions for the Harmony Veterinary Services parent site ---
   This is the network's own site (not a clinic), so the header carries the
   real Harmony wordmark image instead of the clinic mark-and-name lockup. */
.brand { position: relative; }
.brand-lockup { display: flex; align-items: center; }
.brand-lockup img { height: 34px; width: auto; display: block; }
@media (max-width: 420px) { .brand-lockup img { height: 25px; } }
.brand-paw { transform-origin: 50% 60%; transition: filter .25s ease; }
.brand-word { transition: filter .25s ease; }
/* Underline that says "this is a link". */
.brand::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 3px; border-radius: 3px; background: var(--calm); opacity: 0; transition: opacity .2s ease; }
.brand:focus-visible { outline: none; }
.brand:focus-visible::after { opacity: 1; }
.brand:focus-visible .brand-word, .brand:focus-visible .brand-paw { filter: drop-shadow(0 3px 8px rgba(240,43,108,.5)); }
@media (hover: hover) {
  .brand:hover::after { opacity: 1; }
  .brand:hover .brand-word, .brand:hover .brand-paw { filter: drop-shadow(0 3px 8px rgba(240,43,108,.5)); }
}
/* The cue is small and brief (a 34px paw, under a second), so it plays for
   everyone: Eric's Windows reports reduced motion and the gated version
   looked dead to him. A soft pink chip behind the logo is the static cue. */
.brand-lockup { transition: transform .3s var(--ease-out), background-color .2s ease, box-shadow .2s ease; border-radius: 12px; }
.brand::after { transform: scaleX(.2); transition: opacity .2s ease, transform .35s var(--ease-out); }
.brand:focus-visible::after { transform: scaleX(1); }
.brand:focus-visible .brand-lockup { transform: translateY(-1px) scale(1.05); background: var(--sage); box-shadow: 0 0 0 8px var(--sage); }
.brand:focus-visible .brand-paw { animation: paw-wiggle .8s var(--ease-out); }
@media (hover: hover) {
  .brand:hover::after { transform: scaleX(1); }
  .brand:hover .brand-lockup { transform: translateY(-1px) scale(1.05); background: var(--sage); box-shadow: 0 0 0 8px var(--sage); }
  .brand:hover .brand-paw { animation: paw-wiggle .8s var(--ease-out); }
  .brand:active .brand-lockup { transform: scale(.97); }
}
@keyframes paw-wiggle {
  0% { transform: rotate(0); }
  20% { transform: rotate(-18deg); }
  45% { transform: rotate(14deg); }
  70% { transform: rotate(-7deg); }
  100% { transform: rotate(0); }
}

/* Dark call-to-action band and its buttons (one place to restyle both). */
.band-dark { background: var(--dark); }
.band-dark h2 { color: var(--paper); }
.band-dark p { color: rgba(250,247,242,.82); }
.btn-light { background: var(--paper); color: var(--dark); }
.btn-light:hover { background: #fff; }
.btn-outline-light { background: transparent; color: var(--paper); border: 1.5px solid rgba(250,247,242,.4); }
.btn-outline-light:hover { background: rgba(250,247,242,.1); }

/* People cards on the homepage and shared role label. */
.mini-photo { width: 64px; height: 64px; border-radius: 999px; object-fit: cover; margin-bottom: .9rem; }
.role-line { font-size: 14px; font-weight: 700; color: var(--secondary); margin-top: .2rem; }

/* Numbered steps on a light background. */
.steps { display: grid; gap: 1.5rem; grid-template-columns: 1fr; counter-reset: s; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.steps .step { position: relative; padding-left: 3.2rem; }
.steps .step::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 2.3rem; height: 2.3rem; border-radius: 999px; background: var(--sage); color: var(--brand); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.steps h3 { font-size: 1.05rem; }

/* No light strip between a coloured closing band and the footer. */
main:has(> .band-dark:last-child) + footer.site,
main:has(> section[style*="background"]:last-child) + footer.site { margin-top: 0; }


/* Leadership: a longer-form row (photo, credentials, achievement list) for the
   operating leaders, who each carry more career detail than a team card. */
.leader-list { display: grid; gap: 1.5rem; }
.leader-card { display: flex; flex-direction: column; gap: 1.5rem; background: var(--paper); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-card); }
@media (min-width: 700px) { .leader-card { flex-direction: row; align-items: flex-start; padding: 2rem; } }
.leader-card .leader-photo { width: 108px; height: 108px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.leader-card .leader-name { margin-bottom: .1rem; }
.leader-card .leader-role { font-size: 14.5px; font-weight: 700; color: var(--secondary); margin-bottom: .15rem; }
.leader-card .leader-credentials { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 1rem; }
.leader-card .leader-body { min-width: 0; }

/* Shared achievement list, used under leadership bios and in feature cards. */
.achievement-list { margin: .7rem 0 0; padding-left: 1.15rem; display: grid; gap: .5rem; }
.achievement-list li { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.achievement-list li strong { color: var(--ink); }

/* Board: round portraits, and a centred grid so five people sit as 3 + 2. */
.board-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem 1.75rem; }
.board-grid .person { flex: 0 1 100%; }
@media (min-width: 700px) { .board-grid .person { flex-basis: calc((100% - 1.75rem) / 2); } }
@media (min-width: 1000px) { .board-grid .person { flex-basis: calc((100% - 3.5rem) / 3); } }
.person.is-board .team-media { aspect-ratio: 1 / 1; max-width: 132px; border-radius: 999px; }

/* Audience pathway icons sit in a tinted circle, matching the trust-pillar mark. */
.pathway-card .head .material-symbols-outlined.icon-badge-lg { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; background: var(--sage); color: var(--brand); font-size: 24px; }
/* Homepage hero: a rounded photo card, nearly the height of the window, with the text
   laid over the picture at bottom left. Three dark slate gradients sit between photo
   and text (rising from the bottom, from the left, and a faint one from the top so the
   card edge shows against the page). The crop is anchored to the bottom of the picture
   so the puppy's head and the man's face stay upper right, clear of the copy; the text
   column is capped at 44% of the card so it never reaches the face (which starts at
   55% of the photo's width). Below 1080px there is not enough width for that, so the
   photo stacks on top and fades into the slate panel that holds the copy. */
.hero-card-wrap { padding: 1.25rem 0 2.5rem; }
.hero-card { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg); color: #fff; background: #1D2036; display: flex; align-items: flex-end; min-height: clamp(34rem, calc(100svh - 9rem), 60rem); box-shadow: var(--shadow-card); }
.hero-card .hero-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; z-index: -2; }
.hero-card::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, rgba(29,32,54,.95) 0%, rgba(29,32,54,.88) 30%, rgba(29,32,54,.5) 58%, rgba(29,32,54,0) 100%),
    linear-gradient(90deg, rgba(29,32,54,.72) 0%, rgba(29,32,54,.4) 32%, rgba(29,32,54,0) 58%),
    linear-gradient(180deg, rgba(29,32,54,.26) 0%, rgba(29,32,54,0) 30%); }
.hero-card-content { width: clamp(26rem, 44%, 36rem); padding: clamp(1.75rem, 4vw, 3.25rem); }
.hero-card h1 { color: #fff; font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.08; }
.hero-card .lede { color: rgba(255,255,255,.94); font-size: 1.05rem; margin-top: 1.25rem; }
.hero-card .hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero-card .btn-outline-light { background: rgba(255,255,255,.12); }
.hero-card .hero-meta { flex-direction: row; flex-wrap: wrap; gap: .5rem 1.5rem; color: rgba(255,255,255,.94); margin-top: 1.75rem; }
.hero-card .hero-meta .material-symbols-outlined { color: #FF9DBA; }
@media (max-width: 1079px) {
  .hero-card { display: flex; flex-direction: column; align-items: stretch; min-height: calc(100svh - 8rem); }
  .hero-card .hero-card-bg { position: relative; inset: auto; flex: 1 1 18rem; width: 100%; height: auto; min-height: 18rem; object-position: 60% 25%; z-index: 0; }
  .hero-card::after { display: none; }
  .hero-card-content { position: relative; width: auto; margin-top: -6rem; padding: 6rem 1.5rem 2rem; background: linear-gradient(180deg, rgba(29,32,54,0) 0, rgba(29,32,54,.78) 3rem, #1D2036 5.5rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-card .hero-card-bg { animation: hero-settle 1.6s var(--ease-out) both; }
}

/* Homepage practice-owners section: the three points stack in the copy column. */
.owner-points { display: grid; gap: 1rem; }
/* Four pathway cards: keep the copy starting at the same height when a title wraps. */
.pathway-card .head { min-height: 3.6rem; }

/* Canadian and independent ownership strip, shown near the top of the audience pages. */
.owned-strip { padding: 1.75rem 0; border-block: 1px solid var(--line); background: var(--paper); }
.owned-strip .trust-pillar h3 { font-size: 1rem; }

/* Board of Directors: a featured Chairman card, then the directors as cards with
   expertise tags and short highlights. */
.board { display: grid; gap: 1.25rem; }
.board-feature, .board-card { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.6rem; display: flex; flex-direction: column; gap: 1.1rem; }
.board-id { display: flex; align-items: center; gap: 1rem; }
.board-photo { width: 84px; height: 84px; border-radius: 999px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--sage); background: var(--sage); }
.board-name { font-size: 1.15rem; font-weight: 800; color: var(--ink); line-height: 1.25; letter-spacing: -.01em; }
.board-role { font-size: 14px; font-weight: 700; color: var(--secondary); margin-top: .15rem; }
.board-creds { font-size: 13px; color: var(--ink-soft); margin-top: .1rem; }
.board-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.board-tags li { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); background: var(--sage); border-radius: 999px; padding: .28rem .7rem; }
.board-points { display: grid; gap: .65rem; }
.board-points li { position: relative; padding-left: 1.05rem; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.board-points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 999px; background: var(--brand); }
.board-cards { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .board-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .board-cards { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 760px) {
  .board-feature { display: grid; grid-template-columns: minmax(0, 21rem) 1fr; grid-template-areas: "id points" "tags points"; column-gap: 2.5rem; row-gap: 1rem; align-items: start; padding: 2rem; }
  .board-feature .board-id { grid-area: id; }
  .board-feature .board-tags { grid-area: tags; }
  .board-feature .board-points { grid-area: points; align-self: center; }
  .board-feature .board-photo { width: 104px; height: 104px; }
  .board-feature .board-name { font-size: 1.35rem; }
  .board-feature .board-points li { font-size: 15.5px; }
}
.board-tags, .board-points { list-style: none; margin: 0; padding: 0; }
.board-tags li, .board-points li { margin: 0; }
.board-card .board-id { min-height: 6.6rem; }
@media (max-width: 1099px) { .board-card .board-id { min-height: 0; } }

/* "Best for" line under each retirement path, and short checklists under the two leadership paths. */
.best-for { margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--secondary); }
.path-list { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; }
.path-list li { position: relative; padding-left: 1.05rem; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.path-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 999px; background: var(--brand); }
.access-card:has(.best-for) { display: flex; flex-direction: column; }
.access-card .best-for { margin-top: auto; }
.access-card:has(.best-for) p:not(.best-for) { margin-bottom: 1rem; }
@media (min-width: 640px) { .access-card .best-for { min-height: 4.6rem; } }

/* A card grid whose last, shorter row is centred instead of left-aligned. */
@media (min-width: 900px) {
  .grid.center-last { display: flex; flex-wrap: wrap; justify-content: center; }
  .grid.center-last > * { flex: 0 1 calc((100% - 2.5rem) / 3); }
}

/* Cards with a photo on top (faces for each role we co-own with, and the retirement paths). */
.access-card.has-photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.access-card.has-photo .card-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--pos, 50% 25%); background: var(--sage); }
.access-card.has-photo .card-body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.access-card.has-photo .card-body h3 { margin-top: 0; }

/* A row of three photos that breaks up a text section. */
.photo-strip { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2rem; }
.photo-strip img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--pos, 50% 35%); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); background: var(--sage); }
@media (min-width: 700px) { .photo-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .access-card.has-photo:has(.best-for) .card-body > p:first-of-type { min-height: 6.6em; } }
/* Ownership strip titles are plain paragraphs, not headings, so the page heading order stays clean. */
.owned-strip .pillar-title { font-size: 1rem; font-weight: 800; color: var(--ink); line-height: 1.3; margin: 0 0 .2rem; }

/* Photo in a rounded frame, used for the "coming soon" hospital blocks. */
.photo-frame { position: relative; }
.photo-frame img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); }

/* Two short paragraphs set side by side as a contrast. */
.contrast { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 800px) { .contrast { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
.contrast > div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; }
.contrast h3 { font-size: 1.02rem; margin: 0 0 .35rem; }
.contrast p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* Menu hover: a soft highlight glides to the item under the cursor (site.js adds
   .nav-glide and .has-glide). Hover-capable devices only. The glide is a response to the
   visitor's own pointer, so it stays on under reduced motion, only faster. */
nav.primary { position: relative; }
.nav-glide { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 9999px; background: rgba(210, 30, 87, .11); pointer-events: none; opacity: 0; z-index: 0;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), width .4s cubic-bezier(.22, 1, .36, 1), height .4s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; }
nav.primary a { position: relative; z-index: 1; }
@media (hover: hover) {
  nav.primary.has-glide a { transition: color .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
  nav.primary.has-glide a:not([aria-current="page"]):hover,
  nav.primary.has-glide a:not([aria-current="page"]):focus-visible { background: transparent; color: var(--brand); transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  /* A little quicker, still clearly visible. */
  .nav-glide { transition: transform .26s ease-out, width .26s ease-out, height .26s ease-out, opacity .18s ease; }
}