/* Pictou Splash Pad — site styles
   Palette taken straight from the Society's wave logo: the deep blue of the
   lettering, the lighter blues of the wave itself, on a ground the colour of
   water in sunlight.
   Light-theme only by design: this is a brochure site, not an app. */

:root {
  --brand: #1d55a0;          /* the blue of the logo lettering */
  --brand-dark: #143c73;
  --brand-ink: #0e2a52;      /* near-black blue for dark surfaces */
  --accent: #2b9fd4;         /* the wave */
  --accent-dark: #1b7fae;
  --sea: #8fd0ee;

  --ink: #12233a;
  --body: #44546a;
  --muted: #6b7c92;

  --paper: #ffffff;
  --sand: #f1f8fc;
  --sand-deep: #dceef8;
  --line: #cfe3ef;

  --wrap: 1180px;
  --gap: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 10px;
  --shadow: 0 1px 2px rgba(11, 30, 43, .06), 0 8px 24px rgba(11, 30, 43, .08);
  --shadow-lg: 0 2px 4px rgba(11, 30, 43, .08), 0 18px 44px rgba(11, 30, 43, .14);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 750;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.2rem); }
h3 { font-size: clamp(1.12rem, 1.04rem + .4vw, 1.32rem); }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-underline-offset: .18em; }
a:hover { color: var(--accent-dark); }

/* Last-resort guard against sideways scroll. `anywhere` (unlike `break-word`)
   also shrinks the element's min-content width, which is what actually stops a
   long email or URL forcing a grid column wider than the viewport.
   Reset it wherever these sit in a flex row — there it lets a child collapse
   to one character per line. */
a, p, dd, li, code, blockquote { overflow-wrap: anywhere; }

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

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.narrow { max-width: 46rem; margin-inline: auto; }
.center { text-align: center; }

/* Hidden from sight, still present for assistive tech. Clipped rather than
   pushed off-canvas: content at left:-9999px can be scrolled to on mobile,
   which reads as the page drifting sideways. */
.visually-hidden, .skip, .hp {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.hp > * { width: 1px; height: 1px; min-width: 0; padding: 0; border: 0; }

.skip:focus {
  position: fixed; top: 1rem; left: 1rem; width: auto; height: auto;
  margin: 0; padding: .75rem 1.25rem; overflow: visible; clip: auto;
  clip-path: none; border-radius: 6px; background: var(--ink); color: #fff; z-index: 200;
}

.muted { color: var(--muted); }
.lede { font-size: clamp(1.06rem, 1rem + .4vw, 1.25rem); color: var(--ink); }
.caption { margin-top: .75rem; font-size: .92rem; color: var(--muted); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem; border: 2px solid transparent; border-radius: 999px;
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }

.btn-ghost { border-color: currentColor; color: var(--brand); background: transparent; }
.btn-ghost:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.btn-on-dark { border-color: rgba(255,255,255,.75); color: #fff; background: transparent; }
.btn-on-dark:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------- notice bar ---------- */

.notice-bar {
  margin: 0; padding: .65rem 1rem; text-align: center;
  background: var(--accent); color: #fff; font-weight: 650; font-size: .95rem;
}

/* ---------- header and navigation ---------- */

.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(1.6) blur(8px);
  border-bottom: 1px solid var(--line);
}

.head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 80px;
}

/* The wave logo is 458x300 and sits on white. Capped by height so it keeps its
   proportions, and kept modest so the seven nav items still fit on one line. */
.brand { display: block; flex: none; }
.brand img { width: auto; height: 58px; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; flex: none;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper); cursor: pointer;
}
.bars, .bars::before, .bars::after {
  display: block; width: 22px; height: 2px; background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -7px; }
.bars::after { top: 7px; }
[aria-expanded="true"] .bars { background: transparent; }
[aria-expanded="true"] .bars::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .bars::after { transform: translateY(-7px) rotate(-45deg); }

/* --- mobile: a single scrollable panel, submenus always expanded ---------
   Sixteen pages across five sections is too many to hide behind tap-to-open
   accordions on a phone; showing the children indented is fewer taps and no
   guessing. */
.nav { display: none; }
.nav.open {
  display: block; position: absolute; inset: 100% 0 auto;
  background: var(--paper); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: .5rem clamp(1rem, 4vw, 2rem) 1.5rem;
  max-height: calc(100vh - 80px); overflow-y: auto;
}
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul > li + li { border-top: 1px solid var(--line); }
.nav a {
  display: block; padding: .85rem .25rem; color: var(--ink);
  font-weight: 650; text-decoration: none;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent-dark); }

.nav .has-sub > ul { margin: 0 0 .6rem .9rem; border-left: 2px solid var(--sand-deep); }
.nav .has-sub > ul a { padding: .55rem .9rem; font-weight: 500; font-size: .95rem; color: var(--body); }

.btn-tickets { width: 100%; margin-top: 1rem; }

/* --- desktop: a real menu bar with hover/focus dropdowns ----------------- */
@media (min-width: 68rem) {
  .nav-toggle { display: none; }
  .nav {
    display: flex !important; position: static; align-items: center;
    gap: 1.25rem; padding: 0; border: 0; box-shadow: none;
    max-height: none; overflow: visible;
  }
  .nav > ul { display: flex; align-items: center; gap: .35rem; }
  .nav > ul > li + li { border-top: 0; }
  .nav > ul > li { position: relative; }
  .nav > ul > li > a {
    padding: .55rem .7rem; font-size: .97rem; border-radius: 6px; white-space: nowrap;
  }
  .nav > ul > li > a:hover { background: var(--sand); }
  .nav > ul > li > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); border-radius: 6px 6px 0 0; }

  /* Dropdowns. Opened on hover and on keyboard focus — :focus-within is what
     makes them reachable by tab, which a hover-only menu never is. */
  .nav .has-sub > ul {
    position: absolute; top: 100%; left: 0; min-width: 15rem;
    margin: 0; border: 1px solid var(--line); border-left: 1px solid var(--line);
    border-radius: 0 0 8px 8px; background: var(--paper);
    box-shadow: var(--shadow-lg); padding: .35rem;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
  }
  .nav .has-sub:hover > ul,
  .nav .has-sub:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
  .nav .has-sub > ul a { padding: .55rem .7rem; border-radius: 5px; font-size: .95rem; white-space: nowrap; }
  .nav .has-sub > ul a:hover { background: var(--sand); color: var(--accent-dark); }

  /* A caret, so a parent with children looks different from one without. */
  .nav .has-sub > a::after {
    content: ""; display: inline-block; width: 6px; height: 6px; margin-left: .45rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }

  .btn-tickets { width: auto; margin: 0; padding: .65rem 1.2rem; font-size: .95rem; white-space: nowrap; }
}

/* ---------- sections ---------- */

.section { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.section-tint { background: var(--sand); }
.page-head {
  padding-block: clamp(2rem, 5vw, 3.25rem);
  background: var(--brand); color: rgba(255,255,255,.9);
}
.page-head h1 { color: #fff; }
.page-head .lede { color: rgba(255,255,255,.9); }
.page-head a { color: #fff; }
.crumb { margin-bottom: .5rem; font-size: .92rem; }

/* ---------- hero ---------- */

.hero { position: relative; display: grid; isolation: isolate; }
.hero > img {
  grid-area: 1 / 1; width: 100%; height: clamp(320px, 52vh, 560px);
  object-fit: cover;
}
.hero::after {
  content: ""; grid-area: 1 / 1; z-index: 1;
  background: linear-gradient(180deg, rgba(7,29,43,.25) 0%, rgba(7,29,43,.72) 100%);
}
.hero-inner {
  grid-area: 1 / 1; z-index: 2; align-self: end;
  padding-block: clamp(1.75rem, 5vw, 3.25rem); color: #fff;
}
.hero-inner h1 { color: #fff; }
.hero-inner .lede { color: rgba(255,255,255,.92); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.5rem; }

/* ---------- grids and cards ---------- */

.grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
.grid > * { min-width: 0; }
@media (min-width: 44rem) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-body { padding: 1.35rem; }
.card-body > :last-child { margin-bottom: 0; }

.more { display: inline-block; margin-top: .6rem; font-weight: 700; text-decoration: none; }
.more::after { content: " \2192"; }
.more:hover { text-decoration: underline; }

.rounded { border-radius: var(--radius); box-shadow: var(--shadow); }

.split { display: grid; gap: var(--gap); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 52rem) { .split { grid-template-columns: 1fr 1fr; } }

.shot { margin: 0; }
.shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.shot figcaption { margin-top: .6rem; font-size: .9rem; color: var(--muted); }

.panel-note {
  margin-top: var(--gap); padding: 1.35rem 1.5rem;
  background: var(--paper); border-left: 4px solid var(--sea); border-radius: 0 8px 8px 0;
}

.gallery-shop { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 56rem) { .gallery-shop { grid-template-columns: repeat(5, 1fr); } }
.gallery-shop img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; }

/* ---------- call-to-action band ---------- */

.cta-band {
  background: var(--brand); color: #fff; text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); max-width: 42rem; margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-top: 1.5rem; }

/* ---------- hours ---------- */

.hours { margin: 0 0 1rem; }
.hours > div {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem;
  padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.14);
}
.hours > div:last-child { border-bottom: 0; }
.hours dt { font-weight: 650; }
.hours dd { margin: 0; }
/* On a light background the white divider is invisible. */
.section .hours > div, .hours-lg > div { border-bottom-color: var(--line); }
.hours-lg > div { padding: .7rem 0; font-size: 1.05rem; }

.admission-note {
  margin-top: 1rem; padding: .85rem 1.1rem;
  background: var(--sand-deep); border-radius: 8px; font-weight: 600; color: var(--ink);
}

.addr-block {
  padding: 1.25rem 1.4rem; background: var(--sand);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.addr { font-style: normal; }

.route-list { list-style: none; margin: 1rem 0 0; padding: 0; max-width: 42rem; }
.route-list li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.route-list li:last-child { border-bottom: 0; }
.route-list span { font-weight: 650; color: var(--ink); }

.map-embed { margin-top: 1.5rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.map-embed iframe { display: block; width: 100%; height: clamp(280px, 45vh, 420px); border: 0; }

/* ---------- forms ---------- */

.form { margin-top: 1.25rem; }
.field { margin-bottom: 1.1rem; }
.row { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .row { grid-template-columns: 1fr 1fr; } }
label { display: block; margin-bottom: .35rem; font-weight: 650; color: var(--ink); }
input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=time], input[type=number], select, textarea {
  width: 100%; padding: .7rem .8rem; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; color: var(--ink); background: var(--paper);
}
textarea { min-height: 8rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); }
.hint { margin: .4rem 0 0; font-size: .88rem; color: var(--muted); }

.alert { padding: 1rem 1.2rem; border-radius: 8px; margin-bottom: 1.25rem; }
.alert p:last-child { margin-bottom: 0; }
.alert ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.alert.ok { background: #e7f5ec; border: 1px solid #7fc79b; color: #14532d; }
.alert.err { background: #fdecec; border: 1px solid #e39c9c; color: #7f1d1d; }
.alert.info { background: #eef4fa; border: 1px solid #9fc0e0; color: #0b3c5d; }

/* ---------- long-form legal pages ---------- */

.prose h2 { margin-top: 2.2rem; }
.prose code { background: var(--sand-deep); padding: .1rem .35rem; border-radius: 4px; font-size: .92em; }

/* ---------- footer ---------- */

.site-foot { background: var(--brand-ink); color: rgba(255,255,255,.82); padding-top: clamp(2.75rem, 6vw, 4rem); }
.site-foot h2 { color: #fff; font-size: 1rem; letter-spacing: .07em; text-transform: uppercase; }
.site-foot a { color: #fff; }
.site-foot a:hover { color: var(--sea); }
.site-foot .muted { color: rgba(255,255,255,.6); }

.foot-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; padding-bottom: 2.5rem; }
@media (min-width: 48rem) { .foot-grid { grid-template-columns: repeat(3, 1fr); } }
/* An email address is one long unbreakable string; without this it sets the
   column's minimum width and pushes the page sideways on a phone. */
.foot-grid > * { min-width: 0; }
.foot-grid a { overflow-wrap: anywhere; }

.social { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.foot-legal {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  align-items: center; padding-block: 1.35rem;
  border-top: 1px solid rgba(255,255,255,.14); font-size: .89rem;
}
.foot-legal p { margin: 0; }
.foot-legal a + a { margin-left: 1.25rem; }

/* ==========================================================================
   Wild Salmon Unlimited components
   ==========================================================================
   One set of patterns, reused. A list of news items, projects, links or
   documents is the same object in different clothes, so they share the same
   row: optional thumbnail at a fixed width, text beside it, one column below
   44rem. Doing it once is what makes the pages look like one site.
   ========================================================================== */

/* Only the measure. NOT the margins.
   Most prose sections are <div class="wrap narrow">, so setting margin-inline
   here overrides .wrap's own `margin-inline: auto` and drags the whole
   container to the left edge of the viewport, while the heading above it stays
   in the centred wrap. That is what put the first section of every page hard
   against the left with the right half empty. */
.narrow { max-width: 46rem; }

.eyebrow {
  display: block; margin-bottom: .5rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sea);
}
.page-head .crumb { margin-bottom: .4rem; font-size: .9rem; color: rgba(255, 255, 255, .75); }
.more-wrap { margin-top: 2rem; }
.home-links { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 1.5rem; }

/* --- notices, quotes, video ---------------------------------------------- */
.notice-panel {
  padding: 1.5rem 1.75rem; background: var(--sand);
  border-left: 5px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0;
}
.notice-panel h2 { margin-top: 0; color: var(--brand); }

.tick-list { list-style: none; margin: 0 0 1.15em; padding: 0; }
.tick-list li { position: relative; padding: .35rem 0 .35rem 1.9rem; }
.tick-list li::before {
  content: ""; position: absolute; left: .25rem; top: .95rem;
  width: .55rem; height: .3rem; border-left: 2.5px solid var(--brand);
  border-bottom: 2.5px solid var(--brand); transform: rotate(-45deg);
}

.pull-quote {
  margin: 2rem 0 0; padding: 1.35rem 1.6rem;
  background: var(--sand); border-left: 5px solid var(--sea); border-radius: 0 8px 8px 0;
}
.pull-quote p { font-size: 1.02rem; }
.pull-quote cite { display: block; margin-top: .7rem; font-style: normal; font-weight: 700; color: var(--brand); font-size: .9rem; }

/* A fixed-width iframe pushes a phone sideways; give it a ratio instead. */
.video { margin: 1.75rem 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

/* --- Herring Cove palette ------------------------------------------------
   Taken from the hospital's own logo, which is named for its colour:
   herring-cove-logo-color-hex-114170.gif. */
:root {
  --brand: #114170;
  --brand-dark: #0c2f52;
  --brand-ink: #0a2440;
  --accent: #c2410c;         /* the warm counterweight, used for actions */
  --accent-dark: #9a3412;
  --sea: #7fb2d1;
  --urgent: #b3261e;         /* emergencies only — nothing else wears this */
}

/* --- the emergency strip -------------------------------------------------
   Sits above the header on every page. Someone whose animal is in trouble at
   9pm should not have to find a menu, open a page and read down it. */
.emergency-strip {
  background: var(--urgent);
  color: #fff;
  font-size: .92rem;
}
.emergency-strip .wrap {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .3rem 1.5rem; padding-block: .55rem;
}
.emergency-strip strong { font-weight: 750; }
.emergency-strip .emg { white-space: nowrap; }
.emergency-strip a {
  color: #fff; font-weight: 750; text-decoration: underline;
  text-underline-offset: .15em;
}
.emergency-strip a:hover { color: #ffe4e0; }

/* On a phone the strip stacks rather than scrolling sideways. */
@media (max-width: 40rem) {
  .emergency-strip .wrap { flex-direction: column; gap: .15rem; }
  .emergency-strip .emg { white-space: normal; }
}

/* --- the emergency page -------------------------------------------------- */
.emergency-head { background: var(--urgent); }
.emergency-head .lede { color: rgba(255, 255, 255, .94); }

.emergency-cards {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; gap: var(--gap); grid-template-columns: 1fr;
}
@media (min-width: 44rem) { .emergency-cards { grid-template-columns: repeat(2, 1fr); } }

.emergency-card {
  padding: 1.75rem; background: var(--paper);
  border: 2px solid var(--urgent); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.emergency-card h2 { margin-bottom: .6rem; font-size: 1.25rem; }

/* The number is the whole point of the page, so it is set at a size you can
   read across a room and is a dialling link on every device. */
.emg-number { margin: 0 0 .8rem; }
.emg-number a {
  display: inline-block;
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.4rem);
  font-weight: 800; letter-spacing: -.01em;
  color: var(--urgent); text-decoration: none;
}
.emg-number a:hover { text-decoration: underline; }

.emg-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.emg-list li {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .1rem 1rem; padding: .45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.emg-list li:last-child { border-bottom: 0; }
.emg-list a { font-weight: 700; white-space: nowrap; }

.urgent-note { margin-bottom: 2rem; }
.info-card.urgent { border-color: var(--urgent); }
.info-card.urgent h2 { color: var(--urgent); }

/* --- home cards ---------------------------------------------------------- */
.info-card { border-top: 4px solid var(--brand); }
.info-card h2 { font-size: 1.2rem; }

/* --- services ------------------------------------------------------------ */
.services {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--gap); grid-template-columns: 1fr;
}
@media (min-width: 44rem) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .services { grid-template-columns: repeat(3, 1fr); } }
.service {
  padding: 1.5rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.service h2 { font-size: 1.15rem; color: var(--brand); margin-bottom: .5rem; }
.service p { margin: 0; font-size: .96rem; }

/* --- the team ------------------------------------------------------------
   A row per person, not a card grid. The bios range from 184 to 1,595
   characters, so equal-height cards would be badly ragged. */
.team { list-style: none; margin: 0; padding: 0; }

.person {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
  padding: 1.75rem 0; border-bottom: 1px solid var(--line);
}
.person:last-child { border-bottom: 0; }

.person-photo {
  flex: 0 0 13rem; max-width: 100%;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: top center;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
/* Someone whose photograph has not been paired with their name yet keeps the
   same shape, so the row does not collapse and the page stays even. */
.person-photo-blank {
  display: block;
  background: linear-gradient(160deg, var(--sand-deep), var(--sand));
}

/* min-width:0 lets the text shrink rather than forcing the row wider. */
.person-body { flex: 1 1 24rem; min-width: 0; }
.person-body h3 { margin-bottom: .15rem; font-size: 1.2rem; }
.person-role {
  margin: 0 0 .75rem; font-size: .82rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--brand);
}
.person-body p:last-child { margin-bottom: 0; }

/* The bios carry blank lines between paragraphs; preserve them without
   needing markup in the JSON. */
.person-bio { white-space: pre-line; }

@media (max-width: 40rem) {
  .person-photo { flex: 0 0 auto; width: 10rem; }
}

.btn-book { width: 100%; margin-top: 1rem; }
@media (min-width: 68rem) {
  .btn-book { width: auto; margin: 0; padding: .65rem 1.2rem; font-size: .95rem; white-space: nowrap; }
}

/* --- quick links ---------------------------------------------------------
   Three captioned photographs on the home page, as the old site had them. */
.quick-links {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--gap); grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .quick-links { grid-template-columns: repeat(3, 1fr); } }

.quick-links a {
  display: block; text-align: center; text-decoration: none;
  color: var(--brand); font-weight: 750;
}
.quick-links img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.quick-links a:hover img { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.quick-links span { display: block; margin-top: .85rem; font-size: 1.05rem; }
.quick-links a:hover span { color: var(--accent-dark); text-decoration: underline; }

/* --- hero: the hospital banner -------------------------------------------
   The banner the hospital chose is 1500x500 — a 3:1 strip. The shared hero
   forces a tall fixed height with object-fit: cover, which crops a wide image
   like this through the middle and takes the kittens' heads off. Here the
   hero takes the image's own proportions, with a floor so the overlaid text
   still has somewhere to sit on a narrow screen. */
.hero > img {
  height: auto;
  aspect-ratio: 3 / 1;
  min-height: 260px;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 44rem) {
  /* On a phone a 3:1 strip is a letterbox. Crop tighter so the picture still
     reads as a picture. */
  .hero > img { aspect-ratio: 16 / 10; }
}

/* --- the online store ----------------------------------------------------
   Asked for prominently: it sits directly under the banner, in the brand
   colour, so it reads as part of the hospital rather than an advert. */
.store-band { background: var(--brand); color: #fff; }
.store-band .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem 2rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.store-band h2 { margin: 0 0 .3rem; color: #fff; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); }
.store-band p { margin: 0; color: rgba(255, 255, 255, .9); max-width: 42rem; }

.btn-store {
  flex: none; background: #fff; color: var(--brand);
  font-size: 1.05rem; padding: .85rem 2.25rem;
}
.btn-store:hover { background: var(--sand); color: var(--brand-dark); }

.nav-shop { font-weight: 750; }
@media (min-width: 68rem) { .nav-shop { color: var(--accent-dark); } }

/* --- per-page header banners ---------------------------------------------
   Roughly 3:1 strips, one per interior page, sitting above the title band.
   Given their own ratio rather than a fixed height, so the animal in them is
   not cropped through the middle; tighter on a phone where 3:1 is a letterbox. */
.page-banner {
  width: 100%; aspect-ratio: 3 / 1; object-fit: cover; object-position: center;
}
@media (max-width: 44rem) { .page-banner { aspect-ratio: 16 / 9; } }

/* Shallower on the emergency page. Somebody opening it has a sick animal, and
   the phone numbers should not be pushed below the fold by a photograph. */
.page-banner-short { aspect-ratio: 5 / 1; }
@media (max-width: 44rem) { .page-banner-short { aspect-ratio: 3 / 1; } }

.contact-photo { margin-top: 1.5rem; aspect-ratio: 1; object-fit: cover; }

/* ==========================================================================
   Pictou Splash Pad components
   ========================================================================== */

/* --- odds and ends -------------------------------------------------------- */
.small { font-size: .9rem; }
.sub { margin-top: 2.5rem; color: var(--brand); }
.wide { width: 100%; height: auto; }
.empty {
  text-align: center; color: var(--muted);
  padding: 2.5rem 1rem; border: 2px dashed var(--line); border-radius: var(--radius);
  background: var(--paper);
}
.btn-lg { padding: .95rem 2rem; font-size: 1.05rem; }
.btn-donate { white-space: nowrap; }

/* The vision statement is the one sentence the whole project rests on, so it
   gets the room to be read rather than being another paragraph. */
.vision {
  max-width: 46ch; margin: 0 auto 2.5rem; text-align: center;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.5;
  color: var(--brand); font-weight: 600; text-wrap: balance;
}

/* --- figures and media pairs --------------------------------------------- */
.figure { margin: 0; }
.figure img { width: 100%; height: auto; border-radius: var(--radius); display: block; box-shadow: var(--shadow); }
.figure figcaption { margin-top: .6rem; font-size: .88rem; color: var(--muted); }
.split-media { align-items: start; gap: var(--gap); }

/* --- quotes --------------------------------------------------------------- */
.quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem;
          grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.quotes > li {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.25rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column; justify-content: space-between;
}
.quotes blockquote { margin: 0 0 1rem; }
.quotes blockquote p { margin: 0; font-size: 1.02rem; }
.quotes .attrib { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--body); }
.quotes-kids > li { background: var(--sand-deep); border-color: transparent; }

/* --- the board ------------------------------------------------------------ */
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap);
         grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.member { text-align: center; }
.member h3 { margin: .9rem 0 .1rem; font-size: 1.1rem; }
.member-role { margin: 0; color: var(--accent-dark); font-weight: 600; font-size: .92rem; }
.member-photo {
  width: 100%; max-width: 15rem; margin-inline: auto; aspect-ratio: 1;
  object-fit: cover; border-radius: 50%; display: block;
  border: 4px solid var(--paper); box-shadow: var(--shadow);
}
.member-photo-blank { background: var(--sand-deep); }

/* --- sponsors ------------------------------------------------------------- */
.level + .level { margin-top: 2.5rem; }
.level-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem;
  margin-bottom: 1.25rem; padding-bottom: .6rem; border-bottom: 2px solid var(--sea);
  color: var(--brand); font-size: 1.2rem;
}
.level-range { font-weight: 500; font-size: .92rem; color: var(--muted); letter-spacing: 0; }

.sponsors { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem;
            grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.sponsor {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; text-align: center; box-shadow: var(--shadow);
}
/* Logos arrive at every shape and size. `contain` on a fixed box keeps a wide
   wordmark and a square crest the same visual weight without distorting either. */
.sponsor img { width: 100%; height: 7rem; object-fit: contain; display: block; margin-bottom: .9rem; }
.sponsor-name { margin: 0; font-weight: 650; color: var(--ink); line-height: 1.35; }
.sponsor-amount { margin: .3rem 0 0; font-size: .88rem; color: var(--muted); }

/* --- donation tiers ------------------------------------------------------- */
.tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem;
         grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.tier {
  background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow);
}
.tier h3 { margin-bottom: .15rem; color: var(--brand); }
.tier-range { margin: 0 0 .75rem; font-weight: 700; color: var(--accent-dark); }

/* --- news cards ----------------------------------------------------------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap);
         grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.cards-wide { 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;
}
.card > a { display: block; }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.card-body { padding: 1.35rem; }
.card-body h2, .card-body h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.card-body h2 a, .card-body h3 a { text-decoration: none; }
.card-body h2 a:hover, .card-body h3 a:hover { text-decoration: underline; }
.card-date { margin: 0 0 .3rem; font-size: .84rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.card-sub { margin: 0 0 .75rem; color: var(--accent-dark); font-weight: 600; }

/* --- a single news post --------------------------------------------------- */
.post-image { width: 100%; height: auto; border-radius: var(--radius); margin-bottom: 1.75rem; box-shadow: var(--shadow); }
.post-nav {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  margin: 2.5rem 0 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.post-nav a { max-width: 20rem; text-decoration: none; font-weight: 650; }
.post-nav a:hover { text-decoration: underline; }
.post-nav span { display: block; font-size: .8rem; text-transform: uppercase;
                 letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.post-nav .next { margin-left: auto; text-align: right; }

/* --- contact ------------------------------------------------------------- */
.connect { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .6rem; }
.connect a { font-weight: 600; }

@media (max-width: 40rem) {
  .member-photo { max-width: 11rem; }
  .sponsor img { height: 5.5rem; }
}

/* --- page header bands ----------------------------------------------------
   Every page on the DNN site opened with a full-width photograph about 514px
   tall, carrying the page title. These are CSS backgrounds rather than <img>
   because that is what they are: decoration behind text, not content. The
   photograph is passed in per page as --head-image.

   A dark scrim sits over the picture. Without it the white title is unreadable
   wherever the photo goes pale — and every one of these is a bright, sunlit,
   high-key image, so that is most of the frame. */
.page-head, .hero {
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(13rem, 26vw, 21rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background-color: var(--brand-dark);
  background-image: var(--head-image, none);
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
}
.page-head::before, .hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,32,60,.34), rgba(9,32,60,.62));
}
.page-head > *, .hero > * { position: relative; }
.page-head h1, .hero h1 { color: #fff; text-shadow: 0 2px 18px rgba(6,22,42,.55); }
.page-head p, .hero p { color: rgba(255,255,255,.94); }
.page-head .crumb a { color: rgba(255,255,255,.9); }

.hero { min-height: clamp(19rem, 42vw, 31rem); }
.hero-kicker {
  margin: 0 0 .35rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; font-size: .82rem; color: rgba(255,255,255,.92);
}
.hero-lede {
  max-width: 34ch; margin-inline: auto;
  font-size: clamp(1.05rem, .95rem + .6vw, 1.35rem);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.6rem; }
.hero-actions .btn-ghost { border-color: #fff; color: #fff; }
.hero-actions .btn-ghost:hover { background: #fff; color: var(--brand); }