/* ==========================================================================
   Kalamunda Veterinary Hospital — shared site layer (Oct 2026 client feedback)
   Loaded on every page after the existing stylesheets. Extends the approved
   design system (DESIGN.md): Kalamunda Navy, Hills Blue, Clean White, Deep Ink,
   Inter, 8px controls, 12px media. On the homepage, brand fills use
   var(--primary) so they follow the existing light/dark theme switch.
   ========================================================================== */

:root {
  --kvh-navy: #1a2a8c;
  --kvh-blue: #3d7fc4;
  --kvh-ink: #111827;
  --kvh-text: rgba(17, 24, 39, 0.74);
  --kvh-line: rgba(26, 42, 140, 0.14);
  --kvh-soft: rgba(61, 127, 196, 0.07);
  --kvh-brand: var(--primary, #1a2a8c);
  --kvh-focus: 0 0 0 3px #fff, 0 0 0 5px #3d7fc4;
}

/* ---------- Focus visibility (keyboard users) ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--kvh-blue);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { outline: none; box-shadow: var(--kvh-focus) !important; }
/* menu.css removes the outline from every .wsmenu link (.wsmenu a:focus), which left the desktop
   nav and header CTA with no keyboard indicator; restore the site ring for keyboard focus only. */
.wsmenu a:focus-visible,
.wsmenu > .wsmenu-list > li > a:focus-visible,
.wsmobileheader a:focus-visible,
.wsmobileheader [role="button"]:focus-visible { outline: 2px solid var(--kvh-blue); outline-offset: 2px; border-radius: 4px; }
.wsmenu > .wsmenu-list > li.header-btn > a:focus-visible { outline-offset: 3px; border-radius: 8px; }
/* The template's "a { transition: all 0.4s }" animated every focus ring in from a thick text-coloured
   box. Keep the colour fades, but let the ring appear immediately. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible { transition-property: color, background-color, border-color, opacity; }

/* ---------- Navigation ---------- */
@media (min-width: 992px) {
  /* Keyboard: open dropdowns while focus is inside them (mirrors the hover rules in fade-down.css) */
  .wsmenu > .wsmenu-list > li:focus-within > ul.sub-menu,
  .wsmenu > .wsmenu-list > li:focus-within > .wsmegamenu {
    opacity: 1;
    visibility: visible;
    transform: rotateX(0deg);
  }
  /* Escape closes the dropdown until focus or the pointer leaves */
  .wsmenu > .wsmenu-list > li.kvh-dropdown-closed > ul.sub-menu,
  .wsmenu > .wsmenu-list > li.kvh-dropdown-closed > .wsmegamenu {
    opacity: 0;
    visibility: hidden;
  }
  .wsmenu > .wsmenu-list > li.kvh-current > a { color: var(--kvh-brand); }
  .kvh-generated-page .wsmenu > .wsmenu-list > li.kvh-current > a,
  .about-page .wsmenu > .wsmenu-list > li.kvh-current > a { color: var(--kvh-navy); }
  .wsmenu > .wsmenu-list > li.header-btn.kvh-current > a { color: #fff; }

  /* Seven top-level items + appointment button: keep the header on one line on laptops */
  .wsmenu > .wsmenu-list > li > a { white-space: nowrap; }
  .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li.title {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kvh-blue);
  }
}
/* The template spaced 5 items with 18px/32px padding; the new IA has 7 items, so tighten
   the spacing to keep logo + menu + button on one row (otherwise the menu wraps under
   the logo and overlaps the hero). */
@media (min-width: 992px) {
  /* Logo and menu share one non-wrapping row, so the menu can never drop under the logo. */
  .wsmainwp { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: nowrap; }
  .wsmainwp > .desktoplogo { float: none; flex: 0 0 auto; }
  .wsmainwp > .wsmenu { float: none; flex: 0 1 auto; min-width: 0; }
  .wsmainwp::before, .wsmainwp::after { display: none; } /* clearfix pseudo-elements would become flex items */
  .wsmenu > .wsmenu-list > li > a { padding-left: 11px; padding-right: 11px; }
  .wsmenu > .wsmenu-list > li[aria-haspopup] > a { padding-right: 28px; }
  .wsmenu > .wsmenu-list > li.header-btn > a { margin-left: 10px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .wsmenu { font-size: 13.5px; }
  .wsmenu > .wsmenu-list > li > a,
  .wsmenu > .wsmenu-list > li[aria-haspopup] > a { padding-left: 8px; padding-right: 8px; }
  .wsmenu > .wsmenu-list > li > a > .wsarrow { display: none; }
  .wsmenu > .wsmenu-list > li.header-btn > a { padding: 5px 12px; margin-left: 6px; }
  .desktoplogo img { max-width: 150px; height: auto !important; }
}
.wsmenu-list a[aria-current="page"] { font-weight: 600; }
#wsnavtoggle { cursor: pointer; }

/* ---------- Heading semantics: same look, corrected levels ---------- */
#hero-1 .hero-txt h1.white-color {
  color: #fff;
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  margin: 240px 0 0;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}
@media (max-width: 768px) {
  #hero-1 .hero-txt h1.white-color { margin-top: 20px; font-size: 2.4rem; }
}
h2.h3-md { font-size: 2.625rem; }
.section-title h2.h3-md { line-height: 1; margin-bottom: 20px; }
.txt-block h2.h3-md { margin-bottom: 30px; }
#banner-2 .banner-txt h2.h3-lg { margin-bottom: 16px; color: #fff; }
#about-5 .txt-block h2.h3-md,
.kvh-home-head h2.h3-md,
#doctors-1 .section-title h2.h3-md,
#banner-2 .banner-txt h2.h3-lg { font-size: var(--kvh-h2-size); font-weight: 600; line-height: var(--kvh-heading-lh); letter-spacing: -0.02em; }
.doctor-meta h3.h5-sm { font-size: 1.1875rem; margin-bottom: 5px; }
.doctor-meta h3.h5-sm a { color: inherit; }
.doctor-meta h3.h5-sm a:hover { color: var(--kvh-brand); }
.footer h2.h5-xs { font-size: 1.125rem; line-height: 1; letter-spacing: 0; margin-bottom: 25px; }
.kvh-generated-page .footer h2.h5-xs,
.about-page .footer h2.h5-xs { color: var(--kvh-navy); }
.s h2.dr-name { font-family: inherit; font-size: var(--kvh-h3-size); line-height: 1.3; letter-spacing: -0.01em; }
.s h3.section-label { font-family: inherit; line-height: 1.4; }
/* Eyebrow labels: one size, weight and tracking (colours unchanged) */
.s .eyebrow,
.s h3.section-label,
#banner-2 .banner-eyebrow,
#banner-2 .kvh-band-hours-panel .kvh-hours-label,
.kvh-team-overview-label,
.kvh-milestones dt { font-size: var(--kvh-eyebrow-size); font-weight: 600; letter-spacing: var(--kvh-eyebrow-ls); text-transform: uppercase; }
@media (max-width: 1199.98px) {
  h2.h3-md { font-size: 2.125rem; }
  .txt-block h2.h3-md { margin-bottom: 20px; }
  .footer h2.h5-xs { font-size: 1.2rem; margin-bottom: 20px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .footer h2.h5-xs { font-size: 1.09375rem; }
}

/* ---------- Footer: address, hours, links ---------- */
.kvh-footer-address { margin: 18px 0 0; font-style: normal; line-height: 1.6; }
.kvh-footer-address a { color: inherit; }
.footer-info .foo-email { margin-top: 14px; }
.kvh-hours-list abbr { text-decoration: none; border: 0; cursor: default; }
.kvh-hours-list dt { white-space: nowrap; }
.kvh-hours-label {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--kvh-brand);
}
.kvh-generated-page .kvh-hours-label,
.about-page .kvh-hours-label { color: var(--kvh-blue); }
.kvh-hours .kvh-hours-label + .kvh-hours-list { margin-bottom: 18px; }
.kvh-hours-list { margin: 0 0 18px; }
.kvh-hours-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(17, 24, 39, 0.07);
  font-size: 0.9375rem;
  line-height: 1.45;
}
/* Footer readability: slightly larger small print */
.footer .kvh-hours-list > div { font-size: 1rem; padding: 5px 0; }
.footer .kvh-hours-label { font-size: 0.875rem; }
.footer .footer-info p.p-sm,
.footer .kvh-footer-note { font-size: 0.9875rem; line-height: 1.6; }
.footer .kvh-footer-address,
.footer .footer-info .foo-email { font-size: 1rem; }
.kvh-hours-list > div:last-child { border-bottom: 0; }
.kvh-hours-list dt { font-weight: 400; color: inherit; }
.kvh-hours-list dd { margin: 0; font-weight: 600; color: var(--kvh-ink); text-align: right; white-space: nowrap; }
#footer-1 .footer-box { padding-left: 0; }
@media (min-width: 992px) { #footer-1 .col-lg-3 + .col-lg-3 .footer-box { padding-left: 8%; } }
.kvh-footer-links { list-style: none; margin: 0; padding: 0; }
.kvh-footer-links li { margin: 0 0 8px; }
.kvh-footer-links a { color: inherit; font-size: 1rem; }
.kvh-footer-links a:hover { color: var(--kvh-brand); text-decoration: underline; }
.kvh-footer-phone { margin: 0; font-size: 1.5rem; font-weight: 900; letter-spacing: 0.5px; line-height: 1.2; }
.kvh-footer-note a { text-decoration: underline; }

/* ---------- Homepage additions ---------- */
.kvh-home-eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kvh-brand);
}
.kvh-home-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 30px; }
.kvh-text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--kvh-brand); }
.kvh-generated-page .kvh-text-link { color: var(--kvh-navy); }
.kvh-text-link:hover { text-decoration: underline; color: var(--kvh-brand); }
/* Arrows: one treatment wherever a link or button carries one (text links, Services rows, team CTA).
   0.8em of the label, 8px from it, a 3px nudge on hover/focus. */
.kvh-text-link i.fa-arrow-right,
.kvh-svc-list i.fa-arrow-right,
.btn i.fa-arrow-right { font-size: 0.8em; transition: transform 0.2s ease; }
.btn i.fa-arrow-right { margin-left: 8px; }
.kvh-text-link:hover i.fa-arrow-right, .kvh-text-link:focus-visible i.fa-arrow-right,
.kvh-svc-list a:hover i.fa-arrow-right, .kvh-svc-list a:focus-visible i.fa-arrow-right,
.btn:hover i.fa-arrow-right, .btn:focus-visible i.fa-arrow-right { transform: translateX(3px); }

/* Homepage vertical rhythm: one small scale instead of per-section values.
   section = space between major homepage sections (and inside tinted/photo bands)
   related = tighter gap between closely related blocks (History > Dr Houghton, Team > Emergency)
   head    = section heading row > section content */
:root { --kvh-section-y: 80px; --kvh-related-y: 56px; --kvh-head-gap: 40px; }
/* Homepage type scale. px-based on purpose: the template drops the root font size to 14px
   below 768px, which was shrinking body copy to 13-14px on phones.
   h2 = major section headings   h3 = subsection headings   lead = section intros
   body = paragraphs   small = roles, bios, dates' descriptions, attributions   eyebrow = uppercase labels */
:root {
  --kvh-h2-size: clamp(30px, 20px + 1.6vw, 42px);
  --kvh-h3-size: clamp(20px, 16px + 0.6vw, 24px);
  --kvh-name-size: 20px;
  --kvh-lead-size: clamp(16px, 14.5px + 0.2vw, 17px);
  --kvh-body-size: 16px;
  --kvh-small-size: 15px;
  --kvh-eyebrow-size: 13px;
  --kvh-eyebrow-ls: 0.1em;
  --kvh-heading-lh: 1.2;
  --kvh-body-lh: 1.65;
  --kvh-small-lh: 1.6;
  --kvh-muted: #6b7280;
}
@media (max-width: 991.98px) { :root { --kvh-section-y: 72px; --kvh-related-y: 48px; --kvh-head-gap: 36px; } }
@media (max-width: 767.98px) { :root { --kvh-section-y: 56px; --kvh-related-y: 40px; --kvh-head-gap: 32px; } }

.kvh-home-section { padding: var(--kvh-section-y) 0; }
.kvh-home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: var(--kvh-head-gap); flex-wrap: wrap; }
.kvh-home-head h2 { margin: 0; }
.kvh-services-preview { background: var(--bg-soft, #f8fafc); }
.kvh-svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  border-top: 1px solid rgba(17, 24, 39, 0.1);
}
.kvh-svc-list li { border-bottom: 1px solid rgba(17, 24, 39, 0.1); }
.kvh-svc-list a {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 14px 4px;
  color: var(--kvh-ink);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.kvh-svc-num { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; color: var(--kvh-brand); }
.kvh-svc-list i { color: var(--kvh-brand); }
.kvh-svc-list a:hover,
.kvh-svc-list a:focus-visible { color: var(--kvh-brand); }
.kvh-svc-list a:focus-visible { outline-offset: -2px; }

/* Team preview: closing statistics card in the existing carousel.
   Editorial treatment: light surface, hairline border, brand-colour figures, dark labels. */
.kvh-team-cta-card { height: 100%; }
.kvh-team-cta {
  aspect-ratio: 7 / 8;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-top: 3px solid var(--kvh-brand);
  border-radius: 12px;
  background: var(--bg-soft, #f8fafc);
  color: var(--kvh-ink);
}
.kvh-team-cta-count { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0 0 16px; }
.kvh-team-cta-count + .kvh-team-cta-count { padding-top: 16px; border-top: 1px solid rgba(17, 24, 39, 0.1); }
.kvh-team-cta-count strong { color: var(--kvh-brand); font-size: 2.75rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.kvh-team-cta-count span { color: var(--kvh-ink); font-size: 1rem; font-weight: 500; line-height: 1.35; }
.kvh-team-cta .btn { margin-top: auto; width: 100%; padding-left: 14px; padding-right: 14px; text-align: center; }
/* Narrow 3-up carousel on tablets: compact the card so it keeps the portrait frame's height */
@media (min-width: 768px) and (max-width: 991.98px) {
  .kvh-team-cta { padding: 18px 16px 16px; }
  .kvh-team-cta-count { padding-bottom: 10px; }
  .kvh-team-cta-count + .kvh-team-cta-count { padding-top: 10px; }
  .kvh-team-cta-count strong { font-size: 1.875rem; }
  .kvh-team-cta-count span { font-size: 0.8125rem; }
  .kvh-team-cta .btn { padding: 10px 8px; font-size: 0.8125rem; }
}
.doctors-holder .doctor-1 .hover-overlay img { border-radius: 12px; }

/* Emergency band */
.kvh-emergency-band { padding: 0; }
.kvh-emergency-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px 48px;
  padding: 44px clamp(24px, 5vw, 56px);
  border-radius: 12px;
  background: var(--kvh-brand);
  color: #fff;
  box-shadow: 0 20px 45px rgba(26, 42, 140, 0.18);
}
.kvh-emergency-band h2 { color: #fff; font-size: clamp(1.75rem, 3vw, 2.4rem); margin: 0 0 10px; }
.kvh-emergency-band p { color: rgba(255, 255, 255, 0.9); margin: 0; max-width: 60ch; font-size: var(--kvh-lead-size); line-height: var(--kvh-small-lh); }
.kvh-emergency-band-actions { display: flex; flex-wrap: wrap; gap: 12px; flex: 0 0 auto; }
.kvh-emergency-band-actions .btn i { margin-right: 6px; }

/* Quotes (homepage preview + testimonials page) */
.kvh-quotes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.kvh-quotes.is-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.kvh-quote { margin: 0; padding: 34px 0; border-top: 1px solid var(--kvh-line); height: 100%; display: flex; flex-direction: column; }
.kvh-quotes.is-preview .kvh-quote { padding-bottom: 0; }
.kvh-quote blockquote { margin: 0 0 18px; position: relative; padding-top: 34px; }
.kvh-quote blockquote::before {
  content: "\201C";
  position: absolute;
  top: -14px;
  left: -2px;
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--kvh-blue);
  opacity: 0.55;
}
.kvh-quote blockquote p { margin: 0; color: var(--kvh-ink); font-size: var(--kvh-body-size); line-height: 1.7; }
.kvh-quote figcaption { margin-top: auto; color: var(--kvh-navy); font-weight: 600; font-size: var(--kvh-small-size); }
.kvh-quote figcaption::before { content: "\2014\00a0"; color: var(--kvh-blue); }
.kvh-quotes-cta { margin-top: 48px; }

/* Contact band: opening hours as a deliberate right-hand panel (homepage) */
.kvh-band-hours-panel {
  position: relative;
  padding: 34px 38px 26px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(8, 22, 40, 0.58);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  text-align: left;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}
.kvh-band-hours-title { margin: 0 0 22px; color: #fff; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.kvh-band-hours-group + .kvh-band-hours-group { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
#banner-2 .kvh-band-hours-panel .kvh-hours-label { margin: 0 0 8px; color: rgba(255, 255, 255, 0.72); }
#banner-2 .kvh-band-hours-panel .kvh-hours-list { margin: 0; }
#banner-2 .kvh-band-hours-panel .kvh-hours-list > div { padding: 7px 0; border-color: rgba(255, 255, 255, 0.12); font-size: 1rem; }
#banner-2 .kvh-band-hours-panel .kvh-hours-list dt { color: rgba(255, 255, 255, 0.85); }
#banner-2 .kvh-band-hours-panel .kvh-hours-list dd { color: #fff; }
@media (max-width: 991.98px) {
  .kvh-band-hours-panel { margin-top: 40px; }
}
@media (max-width: 575.98px) {
  .kvh-band-hours-panel { padding: 26px 22px 18px; }
}

/* ---------- Internal pages ---------- */
.kvh-hero-photo .kvh-hero-media-placeholder {
  background:
    linear-gradient(90deg, rgba(26, 42, 140, 0.95) 0%, rgba(26, 42, 140, 0.82) 44%, rgba(61, 127, 196, 0.36) 76%, rgba(61, 127, 196, 0.16) 100%),
    url(../images/banner-2.jpg);
  background-position: center right;
  background-size: cover;
}
.kvh-hero-lede { margin: 22px 0 0; max-width: 46ch; color: rgba(255, 255, 255, 0.9); font-size: 1.125rem; line-height: 1.6; }

.kvh-intro { max-width: 70ch; font-size: 1.125rem; line-height: 1.75; color: var(--kvh-text); margin: 0 0 56px; }

/* Pending content (clearly marked, still presentable) */
.kvh-pending {
  margin: 0 0 26px;
  padding: 18px 22px;
  border-left: 3px solid var(--kvh-blue);
  border-radius: 0 8px 8px 0;
  background: var(--kvh-soft);
}
.kvh-pending p { margin: 0 !important; color: var(--kvh-text); }
.kvh-pending strong { color: var(--kvh-navy); }

/* Meet Our Team (meet-our-team.html): two profile grids (veterinarians, then nurses & receptionists on a
   soft tint), 3 / 2 / 1 columns. One portrait treatment for every photo: 4:5 frame, cover crop with a
   per-person focal point (content/team.js photoPosition), 12px media radius, no filters.
   Collapsed cards show the start of the first biography paragraph (line clamp, not truncated markup);
   "Read profile" reveals the whole biography in place. */
.kvh-team-section { padding: var(--kvh-section-y) 0; scroll-margin-top: 90px; }
.kvh-team-section-alt { background: var(--kvh-soft); }
.kvh-team-section-title { margin: 0 0 var(--kvh-head-gap); color: var(--kvh-navy); font-size: var(--kvh-h2-size); font-weight: 600; line-height: var(--kvh-heading-lh); letter-spacing: -0.02em; }
.kvh-team-profiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 40px; align-items: start; }
.kvh-team-card { min-width: 0; margin: 0; scroll-margin-top: 110px; }
.kvh-team-photo { margin: 0 0 22px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: #e9edf4; }
.kvh-team-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.kvh-team-name { margin: 0 0 4px; color: var(--kvh-navy); font-size: var(--kvh-h3-size); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.kvh-team-role { margin: 0; color: var(--kvh-blue); font-size: var(--kvh-small-size); font-weight: 600; line-height: 1.5; }
.kvh-team-bio { margin-top: 14px; }
.kvh-team-bio p { margin: 0 0 14px; color: rgba(17, 24, 39, 0.8); font-size: var(--kvh-body-size); line-height: var(--kvh-body-lh); }
.kvh-team-bio p:last-child { margin-bottom: 0; }
.kvh-team-card:not(.is-open) .kvh-team-bio p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; margin: 0; }
.kvh-team-card:not(.is-open) .kvh-team-bio p + p { display: none; }
.kvh-team-more {
  display: inline-flex;
  align-items: center;
  margin: 12px 0 0;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid rgba(26, 42, 140, 0.35);
  border-radius: 0;
  background: none;
  color: var(--kvh-navy);
  font: inherit;
  font-size: var(--kvh-small-size);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.kvh-team-more:hover { border-bottom-color: var(--kvh-navy); }
.kvh-team-more[hidden] { display: none; }
/* Nurses & receptionists: the same card, a little lighter. */
.kvh-team-section-alt .kvh-team-name { font-size: 20px; }
.kvh-team-section-alt .kvh-team-card:not(.is-open) .kvh-team-bio p { -webkit-line-clamp: 3; line-clamp: 3; }
/* People with no photo or biography yet: names only, in a ruled row (4 / 2 / 1 columns). */
.kvh-team-names { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid #d4dae6; }
.kvh-team-names li { padding: 18px 0; border-bottom: 1px solid #d4dae6; scroll-margin-top: 110px; }
.kvh-team-names .kvh-team-name { margin: 0; font-size: 18px; }
@media (max-width: 991.98px) {
  .kvh-team-profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
  .kvh-team-names { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
}
/* Phones: still one column, but the portrait sits beside the name (same 4:5 frame) so fifteen full-width
   photos do not make the page several screens longer. */
@media (max-width: 575.98px) {
  .kvh-team-profiles { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .kvh-team-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 20px; }
  .kvh-team-photo { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .kvh-team-name { grid-column: 2; grid-row: 1; align-self: end; }
  .kvh-team-role { grid-column: 2; grid-row: 2; align-self: start; }
  .kvh-team-card > .kvh-team-name:nth-last-child(3) { grid-row: 1 / span 2; align-self: center; }
  .kvh-team-bio,
  .kvh-team-more { grid-column: 1 / -1; justify-self: start; }
  .kvh-team-bio { margin-top: 18px; }
  .kvh-team-names { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
  .kvh-team-more { padding: 10px 0; }
}
.kvh-video-placeholder {
  margin-top: 44px;
  aspect-ratio: 16 / 9;
  max-height: 520px;
  width: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  border-radius: 12px;
  background: var(--kvh-navy);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8125rem;
}
.kvh-video-placeholder i { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); font-size: 1.5rem; padding-left: 5px; }

/* Services */
.kvh-service .kvh-chapter-copy h2 { padding-top: 0; }
.kvh-service .kvh-chapter-copy h2::before { display: none; }
.kvh-service-num { display: block; margin-bottom: 14px; color: var(--kvh-blue); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; }
.kvh-chapter-copy h3.kvh-related-title { margin: 26px 0 10px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kvh-text); }
.kvh-chapter-copy ul.kvh-related,
ul.kvh-related { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.kvh-chapter-copy ul.kvh-related li { padding: 0; }
.kvh-chapter-copy ul.kvh-related li::before { display: none; }
.kvh-related a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--kvh-line);
  border-radius: 8px;
  color: var(--kvh-navy);
  font-weight: 600;
  background: #fff;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.kvh-related a i { font-size: 0.75rem; color: var(--kvh-blue); }
.kvh-related a:hover { background: var(--kvh-navy); border-color: var(--kvh-navy); color: #fff; }
.kvh-related a:hover i { color: #fff; }
.kvh-related.is-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kvh-related.is-columns a { width: 100%; justify-content: space-between; }

/* Pet Care Hub */
.kvh-article-grid { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.kvh-article-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 28px 24px;
  border: 1px solid var(--kvh-line);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.kvh-article-card:hover,
.kvh-article-card:focus-within { border-color: rgba(61, 127, 196, 0.5); box-shadow: 0 20px 40px rgba(26, 42, 140, 0.08); transform: translateY(-2px); }
.kvh-article-tag { color: var(--kvh-blue); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.kvh-article-card h2 { margin: 0 0 8px; font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.02em; }
.kvh-article-card h2 a { color: var(--kvh-navy); }
.kvh-article-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.kvh-article-card h2 a:focus-visible { outline: none; }
.kvh-article-card h2 a:focus-visible::after { box-shadow: var(--kvh-focus); }
.kvh-article-more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--kvh-text); font-size: 0.9375rem; font-weight: 600; }
.kvh-article-more i { font-size: 0.75rem; color: var(--kvh-blue); transition: transform 0.2s ease; }
.kvh-article-card:hover .kvh-article-more i { transform: translateX(4px); }
.kvh-hub-note { max-width: 760px; }

/* Is It an Emergency? */
.kvh-urgent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px 48px;
  padding: clamp(28px, 5vw, 48px);
  border-radius: 12px;
  background: var(--kvh-navy);
  color: #fff;
  box-shadow: 0 20px 45px rgba(26, 42, 140, 0.18);
}
.kvh-urgent h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.75rem, 3.4vw, 2.6rem); letter-spacing: -0.025em; }
.kvh-urgent p { margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 1.125rem; max-width: 52ch; }
.kvh-urgent-call {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 26px 16px 18px;
  border-radius: 8px;
  background: #fff;
  color: var(--kvh-navy);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kvh-urgent-call:hover { color: var(--kvh-navy); transform: translateY(-3px); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2); }
.kvh-urgent-call i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--kvh-blue); color: #fff; font-size: 1.2rem; }
.kvh-urgent-call small { display: block; margin-bottom: 4px; color: var(--kvh-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.kvh-emergency-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 40px 0 80px; }
.kvh-emergency-card { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--kvh-line); border-radius: 12px; background: #fff; }
.kvh-emergency-card.is-after-hours { background: var(--kvh-soft); border-color: transparent; }
.kvh-emergency-card h2 { margin: 0 0 14px; color: var(--kvh-navy); font-size: 1.6rem; letter-spacing: -0.02em; }
.kvh-emergency-card h3 { margin: 22px 0 10px; color: var(--kvh-ink); font-size: 1rem; font-weight: 600; }
.kvh-emergency-card p { color: var(--kvh-text); line-height: 1.7; }
.kvh-emergency-card a { color: var(--kvh-navy); font-weight: 600; }
.kvh-centre-list { list-style: none; margin: 0; padding: 0; }
.kvh-centre-list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--kvh-line); }
.kvh-centre-list li:last-child { border-bottom: 0; }
.kvh-centre-list span { color: var(--kvh-ink); }
.kvh-centre-list a { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.kvh-cases { padding-top: 0; }
.kvh-cases > h2 { margin: 0 0 20px; color: var(--kvh-navy); font-size: clamp(1.9rem, 3.4vw, 2.75rem); letter-spacing: -0.025em; }
.kvh-cases .kvh-related { margin-top: 8px; }
.kvh-disclaimer {
  display: flex;
  gap: 12px;
  margin: 64px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--kvh-line);
  color: var(--kvh-text);
  font-size: 0.9375rem;
  line-height: 1.65;
  max-width: 80ch;
}
.kvh-disclaimer i { color: var(--kvh-blue); margin-top: 4px; }
.kvh-mobile-call { display: none; }

/* Gallery */
.kvh-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.kvh-gallery-tile { margin: 0; }
.kvh-gallery-tile a { display: block; overflow: hidden; border-radius: 12px; }
.kvh-gallery-tile img,
.kvh-gallery-tile .kvh-image-placeholder {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  min-height: 0;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  transition: transform 0.4s ease;
}
.kvh-gallery-tile a:hover img { transform: scale(1.04); }
.kvh-gallery-tile figcaption { margin-top: 12px; color: var(--kvh-navy); font-weight: 600; }
.kvh-gallery-tile.is-pending figcaption { color: var(--kvh-text); font-weight: 500; }
.kvh-gallery-tile .kvh-image-placeholder::before { width: 120px; height: 120px; }

/* Contact page */
.kvh-contact-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.kvh-contact-details h2,
.kvh-contact-form-wrap > h2 { margin: 0 0 26px; color: var(--kvh-navy); font-size: clamp(1.9rem, 3vw, 2.4rem); letter-spacing: -0.025em; }
.kvh-contact-details h2.kvh-hours-title { margin-top: 48px; font-size: 1.6rem; }
.kvh-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.kvh-contact-list li { display: flex; gap: 16px; align-items: flex-start; }
.kvh-ci { flex: 0 0 46px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--kvh-blue); color: #fff; }
.kvh-contact-list h3 { margin: 2px 0 4px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kvh-text); }
.kvh-contact-list a,
.kvh-contact-list address { color: var(--kvh-ink); font-size: 1.125rem; font-weight: 600; font-style: normal; line-height: 1.5; margin: 0; word-break: break-word; }
.kvh-contact-list .kvh-text-link { margin-top: 6px; font-size: 0.9375rem; color: var(--kvh-navy); }
.kvh-contact-details .kvh-hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.kvh-contact-details .kvh-hours .kvh-hours-label { grid-row: 1; }
.kvh-contact-details .kvh-hours .kvh-hours-list { grid-row: 2; }
.kvh-after-hours { margin-top: 10px; padding: 16px 18px; border-radius: 8px; background: var(--kvh-soft); color: var(--kvh-text); font-size: 0.9375rem; line-height: 1.65; }
.kvh-after-hours a { color: var(--kvh-navy); font-weight: 600; }
.kvh-form-intro { color: var(--kvh-text); line-height: 1.7; max-width: 60ch; }
.kvh-form-intro a { color: var(--kvh-navy); font-weight: 600; }
.kvh-contact-form { margin-top: 26px; max-width: none; }
.kvh-req { color: #b42318; }
.kvh-field.has-error input,
.kvh-field.has-error textarea { border-color: #b42318; box-shadow: 0 0 0 1px #b42318; }
.kvh-field-error { margin: 0; color: #b42318; font-size: 0.875rem; font-weight: 500; line-height: 1.45; }
.kvh-field-error::before { content: "\26A0\FE0E\00a0"; }
.kvh-form-errors {
  grid-column: 1 / -1;
  padding: 16px 20px;
  border-radius: 8px;
  border: 1px solid rgba(180, 35, 24, 0.35);
  background: #fef3f2;
  color: #7a271a;
}
.kvh-form-errors p { margin: 0 0 6px; color: inherit; }
.kvh-form-errors ul { margin: 0; padding-left: 20px; }
.kvh-form-errors a { color: #7a271a; text-decoration: underline; }
.kvh-form-actions { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kvh-form-required { margin: 0; color: var(--kvh-text); font-size: 0.875rem; }
.kvh-form-required span { color: #b42318; }
.kvh-contact-form .btn { min-height: 52px; }
.kvh-form-status { grid-column: 1 / -1; padding: 18px 20px; border-radius: 8px; line-height: 1.6; }
.kvh-form-status p { margin: 0; }
.kvh-form-status.is-success { background: #ecfdf3; border: 1px solid #a6f4c5; color: #054f31; }
.kvh-form-status.is-notice { background: #fff; border: 1px solid var(--kvh-blue); color: var(--kvh-ink); }
.kvh-form-status.is-error { background: #fef3f2; border: 1px solid rgba(180, 35, 24, 0.35); color: #7a271a; }
.kvh-form-status a { color: inherit; font-weight: 600; }
.kvh-status-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 14px; }
.kvh-status-actions .btn { color: #fff !important; }
.kvh-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
}

@media (max-width: 991.98px) {
  .kvh-svc-list { grid-template-columns: 1fr; }
  .kvh-quotes.is-preview { grid-template-columns: 1fr; gap: 0; }
  .kvh-quotes.is-preview .kvh-quote { padding-bottom: 28px; }
  .kvh-emergency-band-inner,
  .kvh-urgent { flex-direction: column; align-items: flex-start; }
  .kvh-emergency-grid { grid-template-columns: 1fr; }
  .kvh-contact-layout { grid-template-columns: 1fr; }
  .kvh-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kvh-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .kvh-quotes { grid-template-columns: 1fr; }
  .kvh-related.is-columns { grid-template-columns: 1fr; }
  .kvh-article-grid { grid-template-columns: 1fr; }
  .kvh-contact-details .kvh-hours { grid-template-columns: 1fr; }
  .kvh-contact-details .kvh-hours .kvh-hours-label,
  .kvh-contact-details .kvh-hours .kvh-hours-list { grid-row: auto; }
  /* Sticky call bar on the emergency page */
  .kvh-emergency-page .kvh-mobile-call {
    position: fixed;
    z-index: 999;
    left: 16px;
    right: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    border-radius: 8px;
    background: var(--kvh-navy);
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.3);
  }
  .kvh-emergency-page .kvh-mobile-call:hover { color: #fff; background: var(--kvh-blue); }
  .kvh-emergency-page .footer { padding-bottom: 90px; }
}

@media (max-width: 575.98px) {
  .kvh-home-head { align-items: flex-start; flex-direction: column; }
  .kvh-home-head .btn,
  .kvh-emergency-band-actions,
  .kvh-emergency-band-actions .btn { width: 100%; text-align: center; }
  .kvh-urgent-call { width: 100%; font-size: 1.4rem; }
  .kvh-gallery { grid-template-columns: 1fr; }
  .kvh-centre-list li { flex-direction: column; align-items: flex-start; gap: 0; }
  .kvh-svc-list a { font-size: 1.0625rem; }
  .kvh-form-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .kvh-svc-list a, .kvh-svc-list i, .kvh-text-link i, .btn i, .kvh-article-card, .kvh-article-more i,
  .kvh-gallery-tile img, .kvh-urgent-call { transition: none !important; }
}

/* ==========================================================================
   About Us intro + sub-page navigation (about-us.html only)
   Homepage tokens: --kvh-section-y / --kvh-related-y spacing, --kvh-h2-size,
   eyebrow and body sizes. No cards, shadows or decorative graphics.
   ========================================================================== */
.about-page .about-story { padding: var(--kvh-section-y) 0 var(--kvh-related-y); }
.about-page .about-story-image { margin: 0; }
.about-page .about-story-image > img { border-radius: 12px; box-shadow: none; }
/* "Since April 2009" caption: a flush tab on the photo's lower-left corner, not a floating badge */
.about-page .about-since {
  left: 0;
  bottom: 0;
  min-width: 0;
  padding: 14px 20px 15px;
  border-radius: 0 10px 0 12px;
  box-shadow: none;
}
.about-page .about-since strong { font-size: 17px; font-weight: 600; line-height: 1.25; }
.about-page .about-since span { margin-top: 3px; font-size: 13px; line-height: 1.4; }
.about-page .about-story-copy { padding-left: 0; max-width: 560px; }
.about-page .about-story-copy .about-kicker { display: block; margin-bottom: 12px; font-size: var(--kvh-eyebrow-size); font-weight: 600; letter-spacing: var(--kvh-eyebrow-ls); text-transform: uppercase; }
.about-page .about-story-copy h2 { margin: 0 0 22px; font-size: var(--kvh-h2-size); font-weight: 600; line-height: var(--kvh-heading-lh); letter-spacing: -0.02em; }
.about-page .about-story-copy p { margin: 0 0 14px; font-size: var(--kvh-body-size); line-height: var(--kvh-body-lh); }
.about-page .about-actions { gap: 14px 28px; margin-top: 30px; }
.about-page .about-text-link { display: inline-flex; align-items: center; gap: 8px; font-size: var(--kvh-body-size); font-weight: 600; }
.about-page .about-text-link i { margin: 0; font-size: 0.75em; }

/* Sub-page navigation: a ruled three-column contents strip */
.kvh-about-explore { padding: 0 0 var(--kvh-section-y); }
.kvh-explore-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #d4dae6;
  border-bottom: 1px solid #d4dae6;
}
.kvh-explore-grid li { margin: 0; }
.kvh-explore-grid li + li { border-left: 1px solid #d4dae6; }
.kvh-explore-grid a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 20px;
  height: 100%;
  padding: 26px 28px 28px;
  color: var(--kvh-navy);
  text-decoration: none;
}
.kvh-explore-grid li:first-child a { padding-left: 0; }
.kvh-explore-grid li:last-child a { padding-right: 0; }
.kvh-explore-grid .kvh-home-eyebrow { grid-column: 1 / -1; margin: 0 0 10px; color: var(--kvh-blue); font-size: var(--kvh-eyebrow-size); font-weight: 600; letter-spacing: var(--kvh-eyebrow-ls); text-transform: uppercase; }
.kvh-explore-grid strong { grid-column: 1; align-self: end; font-size: clamp(19px, 15px + 0.5vw, 22px); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.kvh-explore-grid i { grid-column: 2; align-self: end; margin-bottom: 6px; color: var(--kvh-navy); font-size: 0.85rem; transition: transform 0.2s ease; }
.kvh-explore-grid a:hover strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.kvh-explore-grid a:hover i,
.kvh-explore-grid a:focus-visible i { transform: translateX(3px); }
.kvh-explore-grid a:focus-visible { outline-offset: -2px; }
@media (max-width: 991.98px) {
  /* photo, copy and navigation share one centred 640px column on tablets */
  .about-page .about-story-image { max-width: 640px; margin: 0 auto 48px; }
  .about-page .about-story-copy { max-width: 640px; margin: 0 auto; }
  .kvh-explore-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; border-bottom: 0; }
  .kvh-explore-grid li + li { border-left: 0; }
  .kvh-explore-grid li { border-bottom: 1px solid #d4dae6; }
  .kvh-explore-grid a,
  .kvh-explore-grid li:first-child a,
  .kvh-explore-grid li:last-child a { padding: 20px 0 22px; min-height: 64px; }
}
@media (max-width: 575.98px) {
  .about-page .about-story-image { margin-bottom: 36px; }
  .about-page .about-since { padding: 11px 16px 12px; }
  .about-page .about-since strong { font-size: 15px; }
  .about-page .about-since span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .kvh-explore-grid i { transition: none; } }

/* ---------- About Us: a message from Dr John Houghton (#our-promise) ---------- */
.about-page .about-promise { padding: var(--kvh-section-y) 0; }
.about-page .about-promise .row { align-items: flex-start !important; }
.about-page .about-promise-copy { max-width: 620px; padding-right: 0; }
.about-page .about-promise-copy .about-kicker { display: block; margin-bottom: 12px; font-size: var(--kvh-eyebrow-size); font-weight: 600; letter-spacing: var(--kvh-eyebrow-ls); text-transform: uppercase; }
.about-page .about-promise h2 { margin: 0 0 30px; font-size: var(--kvh-h2-size); font-weight: 600; line-height: var(--kvh-heading-lh); letter-spacing: -0.02em; }
.about-page .about-promise h2 small { margin-top: 10px; font-size: var(--kvh-eyebrow-size); letter-spacing: var(--kvh-eyebrow-ls); }
/* The quote is typographic: a thin blue rule and the serif italic, no card */
.about-page .about-promise blockquote {
  margin: 0 0 44px;
  padding: 2px 0 2px 28px;
  border-left: 2px solid var(--kvh-blue);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #2f3a4c;
  font-size: clamp(18px, 16px + 0.35vw, 20px);
  line-height: 1.7;
}
.about-page .about-promise h3 { margin: 0 0 6px; color: var(--kvh-navy); font-size: var(--kvh-eyebrow-size); font-weight: 600; letter-spacing: var(--kvh-eyebrow-ls); text-transform: uppercase; }
/* Guarantees: an understated ruled 01-03 list */
.about-page .about-guarantees { list-style: none; margin: 0; padding: 0; counter-reset: kvh-guarantee; }
.about-page .about-guarantees li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: baseline;
  gap: 0;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid #d4dae6;
  counter-increment: kvh-guarantee;
}
.about-page .about-guarantees li::before { content: counter(kvh-guarantee, decimal-leading-zero); color: var(--kvh-navy); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; }
.about-page .about-guarantees li p { margin: 0; font-size: var(--kvh-body-size); line-height: var(--kvh-body-lh); }
/* Photograph: near its native 350px width (no upscaling blur), no shadow, flush caption tab */
.about-page .about-john { max-width: 380px; margin: 4px 0 0 auto; }
.about-page .about-john img { border-radius: 12px; box-shadow: none; }
.about-page .about-john figcaption {
  left: 0;
  bottom: 0;
  padding: 12px 18px 13px;
  border-radius: 0 10px 0 12px;
  box-shadow: none;
}
.about-page .about-john figcaption strong { font-size: 15px; font-weight: 600; line-height: 1.3; }
.about-page .about-john figcaption span { margin-top: 2px; font-size: 13px; line-height: 1.4; }

/* ---------- About Us: communication + First Aid for Pets resource (#communication) ---------- */
.about-page .about-communication { padding: var(--kvh-section-y) 0; }
.about-page .about-communication-main { max-width: 620px; padding-right: 0; }
.about-page .about-communication-main .about-kicker { display: block; margin-bottom: 12px; font-size: var(--kvh-eyebrow-size); font-weight: 600; letter-spacing: var(--kvh-eyebrow-ls); text-transform: uppercase; }
.about-page .about-communication-main h2 { margin: 0 0 22px; font-size: var(--kvh-h2-size); font-weight: 600; line-height: var(--kvh-heading-lh); letter-spacing: -0.02em; }
.about-page .about-communication-main p { margin: 0 0 14px; font-size: var(--kvh-body-size); line-height: var(--kvh-body-lh); }
.about-page .about-communication-main p:last-child { margin-bottom: 0; }
/* Resource: a quiet editorial aside (label over a navy rule), no card, shadow or icon badge */
.about-page .about-first-aid {
  margin-top: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.about-page .about-first-aid .about-kicker {
  display: block;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--kvh-navy);
  color: var(--kvh-navy);
  font-size: var(--kvh-eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--kvh-eyebrow-ls);
  text-transform: uppercase;
}
.about-page .about-first-aid h3 { margin: 0 0 12px; color: var(--kvh-navy); font-size: var(--kvh-h3-size); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.about-page .about-first-aid p { margin: 0 0 14px; color: rgba(17, 24, 39, 0.78); font-size: var(--kvh-small-size); line-height: var(--kvh-small-lh); }
.about-page .about-first-aid .about-app-note { margin: 0; padding-top: 14px; border-top: 1px solid #d4dae6; color: var(--kvh-navy); font-size: var(--kvh-small-size); font-weight: 600; line-height: 1.5; }
@media (max-width: 991.98px) {
  .about-page .about-communication .row { row-gap: 40px; }
  .about-page .about-communication-main,
  .about-page .about-first-aid { max-width: 640px; margin: 0 auto; }
  .about-page .about-communication .col-lg-4 { max-width: 670px; margin: 0 auto; }
}

/* ---------- About Us: Our Purpose-Built Hospital (#our-facilities) ---------- */
.about-page .about-facilities { padding: var(--kvh-section-y) 0; }
.about-page .about-facilities .section-title { max-width: 680px; margin: 0 auto var(--kvh-head-gap); text-align: center; }
.about-page .about-facilities .section-title .about-kicker { display: block; margin-bottom: 12px; font-size: var(--kvh-eyebrow-size); font-weight: 600; letter-spacing: var(--kvh-eyebrow-ls); text-transform: uppercase; }
.about-page .about-facilities .section-title h2 { margin: 0 0 16px; font-size: var(--kvh-h2-size); font-weight: 600; line-height: var(--kvh-heading-lh); letter-spacing: -0.02em; }
.about-page .about-facilities .section-title p { max-width: 560px; margin: 0 auto; padding: 0; font-size: var(--kvh-lead-size); line-height: var(--kvh-small-lh); }
.about-page .about-facilities .section-title p + p { margin-top: 16px; }
.about-page .about-facilities .section-title .kvh-text-link { font-size: var(--kvh-body-size); }
/* Six facts as one ruled 3 x 2 index (2 x 3 on tablets, a list on phones) */
.about-page .about-facility-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #d4dae6;
  border-bottom: 1px solid #d4dae6;
  counter-reset: kvh-facility;
}
.about-page .about-facility-index li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: baseline;
  margin: 0;
  padding: 28px 32px 30px;
  border-left: 1px solid #d4dae6;
  counter-increment: kvh-facility;
}
.about-page .about-facility-index li::before { content: counter(kvh-facility, decimal-leading-zero); color: var(--kvh-navy); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; }
.about-page .about-facility-index li p { margin: 0; max-width: 30ch; color: var(--kvh-ink); font-size: 17px; font-weight: 500; line-height: 1.5; }
@media (min-width: 992px) {
  .about-page .about-facility-index li:nth-child(3n+1) { padding-left: 0; border-left: 0; }
  .about-page .about-facility-index li:nth-child(3n) { padding-right: 0; }
  .about-page .about-facility-index li:nth-child(n+4) { border-top: 1px solid #d4dae6; }
}
@media (max-width: 991.98px) {
  .about-page .about-promise .row { row-gap: 48px; }
  /* copy, photo and facility index share the centred 640px tablet column used by the intro */
  .about-page .about-promise-copy { max-width: 640px; margin: 0 auto; }
  .about-page .about-promise .col-lg-5 { max-width: 670px; margin: 0 auto; }
  .about-page .about-john { max-width: 380px; margin: 0; }
  .about-page .about-facility-index { max-width: 640px; margin: 0 auto; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .about-page .about-facility-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-page .about-facility-index li { padding: 24px 24px 26px; }
  .about-page .about-facility-index li:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .about-page .about-facility-index li:nth-child(2n) { padding-right: 0; }
  .about-page .about-facility-index li:nth-child(n+3) { border-top: 1px solid #d4dae6; }
}
@media (max-width: 575.98px) {
  .about-page .about-promise blockquote { padding-left: 20px; }
  .about-page .about-facility-index { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .about-page .about-facility-index li { padding: 18px 0 20px; border-left: 0; border-bottom: 1px solid #d4dae6; }
  .about-page .about-facility-index li p { max-width: none; font-size: 16px; }
}

/* Copy-only chapters must stay single-column; kvh-pages.css alternates the column
   widths on even chapters, which otherwise squeezes text-only chapters into ~260px. */
.kvh-chapter:nth-child(even) .kvh-chapter-grid.kvh-copy-only { grid-template-columns: minmax(0, 760px); }
.kvh-chapter:nth-child(even) .kvh-chapter-grid.kvh-copy-only .kvh-chapter-copy { order: 0; }
.kvh-gallery-note { margin-top: 48px; max-width: 760px; }
.kvh-gallery-tile .kvh-image-placeholder { display: grid; place-items: center; }

/* Team carousel controls (Owl renders them unstyled because the holder has no .owl-theme) */
.doctors-holder .owl-nav { display: flex; justify-content: center; gap: 12px; margin-top: 4px; }
.doctors-holder .owl-nav.disabled { display: none; }
.doctors-holder .owl-nav button.owl-prev,
.doctors-holder .owl-nav button.owl-next {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(17, 24, 39, 0.15) !important;
  background: #fff !important;
  color: var(--kvh-brand) !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.doctors-holder .owl-nav button:hover { background: var(--kvh-brand) !important; color: #fff !important; }
.doctors-holder .owl-nav button.disabled { opacity: 0.35; cursor: default; }
.doctors-holder .owl-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.doctors-holder .owl-dots.disabled { display: none; }
.doctors-holder .owl-dot span { display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(17, 24, 39, 0.2); }
.doctors-holder .owl-dot.active span { background: var(--kvh-brand); }
.doctors-holder .doctor-1 { margin-bottom: 30px; }

/* Homepage history: compact milestones + facilities teaser (inside the existing editorial column).
   Tuned so the denser column stays comfortable without growing the section much. */
#about-5 .txt-block .kvh-home-eyebrow { margin-bottom: 10px; }
#about-5 .txt-block h2.h3-md { margin-bottom: 20px; }
#about-5 .txt-block > p { margin-bottom: 12px; font-size: var(--kvh-body-size); line-height: var(--kvh-body-lh); }
/* History timeline: a restrained vertical line with small navy markers; the date is a small
   editorial label above each description (same markup: dl > div > dt + dd). */
.kvh-milestones { margin: 26px 0 0; padding: 0; }
.kvh-milestones > div { position: relative; padding: 0 0 16px 24px; }
.kvh-milestones > div:last-child { padding-bottom: 0; }
.kvh-milestones > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kvh-navy);
}
.kvh-milestones > div:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 17px;
  bottom: -2px;
  width: 1px;
  background: rgba(26, 42, 140, 0.18);
}
.kvh-milestones dt { margin: 0; color: var(--kvh-navy); line-height: 19px; }
.kvh-milestones dd { margin: 2px 0 0; color: rgba(17, 24, 39, 0.82); font-size: var(--kvh-small-size); line-height: var(--kvh-small-lh); }
.kvh-facilities-teaser { margin-top: 30px; }
.kvh-facilities-teaser h3 { margin: 0 0 6px; color: var(--kvh-ink); font-size: var(--kvh-h3-size); line-height: 1.3; letter-spacing: -0.01em; }
.kvh-facilities-teaser p { margin: 0; font-size: var(--kvh-body-size); line-height: var(--kvh-body-lh); }
#about-5 .kvh-home-links { margin-top: 24px; }

/* ---------- Our Facilities: a photographic tour in five chapters ----------
   Every chapter has the same copy block: [01 + heading] | [text], ruled apart on the core container grid.
   When a chapter has a genuine photo (<figure class="kvh-fac-media">, see the PHOTO SLOT comments in
   our-facilities.html) it switches to its photographic layout:
     .kvh-fac-split     image 7/12 | text 5/12        (.is-reversed: text | image)
     .kvh-fac-wide      wide image breaking out of the grid, copy beneath
     .kvh-fac-pair      large image | text, with a smaller second image under the text
     .kvh-fac-quiet     softer tinted chapter, image | text with more air
   Frames: --fac-ratio on the figure (each layout has a default), --fac-focus on the img for the crop. */
.kvh-fac-chapter { padding: var(--kvh-section-y) 0; scroll-margin-top: 90px; }
.kvh-fac-chapter + .kvh-fac-chapter { padding-top: 0; }
/* The rule between chapters spans the whole first row when a chapter becomes a grid. */
.kvh-fac-chapter + .kvh-fac-chapter > .container::before { content: ""; display: block; grid-column: 1 / -1; grid-row: 1; height: 1px; margin-bottom: var(--kvh-section-y); background: #d4dae6; }
.kvh-fac-copy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 64px; align-items: start; }
.kvh-fac-num { display: block; margin: 0 0 14px; color: var(--kvh-blue); font-size: var(--kvh-eyebrow-size); font-weight: 600; letter-spacing: var(--kvh-eyebrow-ls); }
.kvh-fac-head h2 { margin: 0; color: var(--kvh-navy); font-size: var(--kvh-h2-size); font-weight: 600; line-height: var(--kvh-heading-lh); letter-spacing: -0.02em; }
.kvh-fac-text p { max-width: 62ch; margin: 0 0 18px; color: rgba(17, 24, 39, 0.8); font-size: 17px; line-height: 1.7; }
.kvh-fac-text p:last-child { margin-bottom: 0; }
.kvh-fac-text .kvh-fac-action { margin-top: 24px; }
.kvh-fac-media { margin: 0; aspect-ratio: var(--fac-ratio, 4 / 3); overflow: hidden; border-radius: 12px; background: #e9edf4; }
.kvh-fac-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fac-focus, 50% 50%); }

@media (min-width: 992px) {
  /* Photographic chapters: the copy block becomes a single column beside the photo. */
  .kvh-fac-split:has(.kvh-fac-media) .kvh-fac-copy,
  .kvh-fac-pair:has(.kvh-fac-media) .kvh-fac-copy,
  .kvh-fac-quiet:has(.kvh-fac-media) .kvh-fac-copy,
  .kvh-fac-tour.has-video .kvh-fac-copy { display: block; }
  .kvh-fac-split:has(.kvh-fac-media) .kvh-fac-head,
  .kvh-fac-pair:has(.kvh-fac-media) .kvh-fac-head,
  .kvh-fac-quiet:has(.kvh-fac-media) .kvh-fac-head,
  .kvh-fac-tour.has-video .kvh-fac-head { margin-bottom: 24px; }

  .kvh-fac-split:has(.kvh-fac-media) > .container,
  .kvh-fac-tour.has-video > .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 72px; align-items: center; }
  .kvh-fac-split.is-reversed:has(.kvh-fac-media) > .container { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .kvh-fac-split.is-reversed .kvh-fac-media { order: 2; }

  .kvh-fac-wide .kvh-fac-media { --fac-ratio: 16 / 7; width: min(100vw - 48px, 1320px); margin: 0 0 56px 50%; transform: translateX(-50%); }

  .kvh-fac-pair:has(.kvh-fac-media) > .container {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "rule rule" "main copy" "main second";
    grid-template-rows: auto auto 1fr;
    gap: 0 72px;
  }
  .kvh-fac-pair > .container::before { grid-area: rule; }
  .kvh-fac-pair .kvh-fac-media { grid-area: main; --fac-ratio: 4 / 5; }
  .kvh-fac-pair .kvh-fac-copy { grid-area: copy; padding-top: 24px; }
  .kvh-fac-pair .kvh-fac-media.is-secondary { grid-area: second; align-self: end; margin-top: 48px; --fac-ratio: 4 / 3; }

  .kvh-fac-quiet:has(.kvh-fac-media) > .container { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0 96px; align-items: center; }
  .kvh-fac-quiet .kvh-fac-media { --fac-ratio: 3 / 2; }
}
/* The quieter recovery chapter sits on a soft tint once it has its photo; no rule needed either side. */
.kvh-fac-quiet:has(.kvh-fac-media) { padding: calc(var(--kvh-section-y) * 1.25) 0; background: var(--kvh-soft); }
.kvh-fac-quiet:has(.kvh-fac-media) > .container::before,
.kvh-fac-quiet:has(.kvh-fac-media) + .kvh-fac-chapter > .container::before { display: none; }
.kvh-fac-quiet:has(.kvh-fac-media) + .kvh-fac-chapter { padding-top: var(--kvh-section-y); }

@media (max-width: 991.98px) {
  .kvh-fac-copy { grid-template-columns: minmax(0, 1fr); }
  .kvh-fac-head { margin-bottom: 20px; }
  /* Photos first, then the text; frames kept short enough not to fill the screen. */
  .kvh-fac-media { --fac-ratio: 3 / 2 !important; margin-bottom: 32px; }
  .kvh-fac-pair .kvh-fac-media.is-secondary { margin: 32px 0 0; order: 3; }
  .kvh-fac-pair:has(.kvh-fac-media) > .container { display: flex; flex-direction: column; }
}
@media (max-width: 575.98px) {
  .kvh-fac-media { --fac-ratio: 4 / 3 !important; margin-bottom: 24px; }
  .kvh-fac-text p { font-size: 16px; }
}

.kvh-hub-note { margin: 0; color: var(--kvh-text); }
.kvh-hub-note a { color: var(--kvh-navy); font-weight: 600; }

/* No visitor-facing placeholder labels: every internal hero uses the hospital photo */
.kvh-hero-media-placeholder span { display: none !important; }
.kvh-inner-hero .kvh-hero-media-placeholder {
  background:
    linear-gradient(90deg, rgba(26, 42, 140, 0.95) 0%, rgba(26, 42, 140, 0.82) 44%, rgba(61, 127, 196, 0.36) 76%, rgba(61, 127, 196, 0.16) 100%),
    url(../images/banner-2.jpg);
  background-position: center right;
  background-size: cover;
}

/* ==========================================================================
   ART DIRECTION PASS — Kalamunda dark blue
   Primary:   Kalamunda Navy #1a2a8c (theme-dark.css / DESIGN.md; the navy family of the
              hospital seal artwork). Hover/pressed shade #131f6b.
   Secondary: Hills Blue #3d7fc4 (logo-bar blue) for small labels, rules and hover details.
   Cyan/teal is retired. Restraint over decoration: no glows, lifts, glass or blobs.
   ========================================================================== */
:root {
  --kvh-navy: #1a2a8c;
  --kvh-navy-deep: #131f6b;
  --kvh-blue: #3d7fc4;
  --kvh-brand: #1a2a8c;
  --kvh-rule: rgba(17, 24, 39, 0.12);
}

/* ---------- Headings: dark blue for brand headings ---------- */
.steelblue-color,
h2.steelblue-color, h3.steelblue-color, h5.steelblue-color,
.s .dr-name, .s .section-label { color: var(--kvh-navy); }
.doctor-meta h3.h5-sm a { color: var(--kvh-navy); }
.kvh-home-eyebrow, .eyebrow, .about-kicker, .insurance-kicker { font-size: 0.875rem; letter-spacing: 0.08em; color: var(--kvh-blue); }

/* ---------- Buttons: one system ---------- */
.btn,
.btn:hover,
.btn:focus { transform: none !important; box-shadow: none !important; }
.btn { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
/* Primary */
.btn-blue,
.white-color .btn-blue,
.wsmenu > .wsmenu-list > li.header-btn > a {
  background-color: var(--kvh-navy) !important;
  border-color: var(--kvh-navy) !important;
  color: #fff !important;
}
.wsmenu > .wsmenu-list > li.header-btn > a { border-radius: 8px; font-weight: 500; }
.btn-blue:hover, .btn-blue:focus-visible,
.blue-hover:hover,
.wsmenu > .wsmenu-list > li.header-btn > a:hover {
  background-color: var(--kvh-navy-deep) !important;
  border-color: var(--kvh-navy-deep) !important;
  color: #fff !important;
}
/* Secondary on dark backgrounds: white */
.btn-white.blue-color,
.btn-white { background-color: #fff !important; border-color: #fff !important; color: var(--kvh-navy) !important; }
.btn-white.blue-color:hover, .btn-white:hover { background-color: #e9edf8 !important; border-color: #e9edf8 !important; color: var(--kvh-navy-deep) !important; }
/* Secondary outline on dark backgrounds */
.btn-tra-white { background-color: transparent !important; border-color: rgba(255, 255, 255, 0.75) !important; color: #fff !important; }
.btn-tra-white:hover { background-color: rgba(255, 255, 255, 0.1) !important; border-color: #fff !important; color: #fff !important; }
/* Text link */
.kvh-text-link, .about-text-link { color: var(--kvh-navy); text-underline-offset: 3px; }
.kvh-text-link:hover, .about-text-link:hover { color: var(--kvh-navy); text-decoration: underline; }

/* ---------- Hero: photographic navy treatment (detail stays visible) ---------- */
#hero-1 {
  background-image:
    linear-gradient(90deg, rgba(13, 21, 72, 0.84) 0%, rgba(20, 32, 108, 0.58) 40%, rgba(26, 42, 140, 0.22) 70%, rgba(26, 42, 140, 0.10) 100%),
    linear-gradient(0deg, rgba(10, 16, 50, 0.22) 0%, rgba(10, 16, 50, 0) 40%),
    url(../images/banner-2.jpg);
}
.kvh-inner-hero .kvh-hero-media-placeholder,
.kvh-hero-photo .kvh-hero-media-placeholder {
  background:
    linear-gradient(90deg, rgba(13, 21, 72, 0.88) 0%, rgba(20, 32, 108, 0.70) 42%, rgba(26, 42, 140, 0.34) 72%, rgba(26, 42, 140, 0.18) 100%),
    url(../images/banner-2.jpg);
  background-position: center right;
  background-size: cover;
}
.hero-txt h1, .hero-txt h2, .hero-txt p { text-shadow: 0 1px 14px rgba(5, 10, 40, 0.35); }

/* ---------- Spinning seal ----------
   ORIGINAL artwork, rings, transparency and animation (style.css / kvh-pages.css, unchanged).
   Only the POSITION is adjusted: right side of the hero, vertically centred, clear of the
   headline, smaller on tablets and hidden on phones. Rings are expressed as a percentage of the
   seal (220% / 160% = the original 660px / 480px at 300px) so they scale with it. */
.spinning-logo-container::before { width: 220%; height: 220%; }
.spinning-logo-container::after { width: 160%; height: 160%; }
/* Homepage: the configurator's "Spinning logo: Right" setting, made permanent (body.spin-right is
   hard-coded in index.html). Original rule from the removed css/demo-settings.css:
     body.spin-right .spinning-logo-container { right: -110px; }   — "tucked under the right wall"
   Every inner page uses the same geometry (300px emblem, 110px past the right edge, scaled at the
   same ratio on smaller screens). The rings are pseudo-elements of the emblem, so they move with it
   and run off the right edge; the hero's overflow: hidden clips both.
   z-index 1 keeps circles and seal beneath the hero text layer (#hero-1 .container, z-index 2). */
#hero-1 .spinning-logo-container { z-index: 1; }
body.spin-right #hero-1 .spinning-logo-container { right: -110px; }
.kvh-inner-hero .spinning-logo-container,
body .inner-hero-emblem { width: 300px; height: 300px; right: -110px; }
.kvh-inner-hero .spinning-logo-container::before,
.kvh-inner-hero .spinning-logo-container::after { width: auto; height: auto; }
.kvh-inner-hero .spinning-logo-container::before { width: 220%; height: 220%; }
.kvh-inner-hero .spinning-logo-container::after { width: 160%; height: 160%; }
@media (min-width: 992px) and (max-width: 1199.98px) {
  body.spin-right #hero-1 .spinning-logo-container { width: 240px; height: 240px; right: -88px; } /* same -110/300 crop ratio */
  .kvh-inner-hero .spinning-logo-container,
  body .inner-hero-emblem { width: 240px; height: 240px; right: -88px; }
  .kvh-hero-copy { width: calc(100% - 280px); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  #hero-1 .spinning-logo-container,
  .kvh-inner-hero .spinning-logo-container,
  body .inner-hero-emblem { display: block; width: 160px; height: 160px; right: 36px; }
  body.spin-right #hero-1 .spinning-logo-container,
  .kvh-inner-hero .spinning-logo-container,
  body .inner-hero-emblem { right: -59px; } /* 160px emblem, same -110/300 crop ratio */
  /* Keep hero copy clear of the seal on tablets */
  .kvh-hero-copy { width: calc(100% - 200px); }
  .hero-section .hero-txt { max-width: calc(100% - 180px); }
}
@media (max-width: 767.98px) {
  .spinning-logo-container,
  .kvh-inner-hero .spinning-logo-container,
  body .inner-hero-emblem { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-base,
  .logo-text { animation: none !important; }
}

/* ---------- Remove decorative circles/blobs ---------- */
#about-5::before { display: none !important; }

/* ---------- History + Dr Houghton read as one story ---------- */
#about-5 { padding-top: var(--kvh-section-y); padding-bottom: var(--kvh-related-y); }
.s { max-width: 1140px; padding: 0 15px var(--kvh-section-y); margin-top: 0; margin-bottom: 0; }
.s .grid { max-width: none; }
.s .quote-block { border-left-color: var(--kvh-navy); }
.s .g-item::marker { color: var(--kvh-navy); }
.s .img-frame { border: 0; border-radius: 12px; }
.s .cred-pill { color: var(--kvh-blue); }

/* ---------- Team statistics: quieter ---------- */
.kvh-team-cta { background: #fff; border: 1px solid var(--kvh-rule); border-top: 2px solid var(--kvh-navy); }
.kvh-team-cta-count strong { font-size: 2.25rem; font-weight: 600; color: var(--kvh-navy); }
.kvh-team-cta-count span { font-weight: 400; color: rgba(17, 24, 39, 0.8); }

/* ---------- Emergency: contrast, not effects ---------- */
.kvh-emergency-band-inner { background: var(--kvh-navy); box-shadow: none; border-radius: 8px; }
.kvh-urgent { box-shadow: none; border-radius: 8px; }

/* ---------- Testimonials: typographic quotation marks ---------- */
.kvh-quote blockquote::before { color: var(--kvh-navy); opacity: 0.22; }
.kvh-quote figcaption::before { color: var(--kvh-blue); }

/* ---------- Contact band: solid dark blue, two balanced columns ---------- */
/* Original background photo (images/banner-2.jpg, style.css) restored; only its overlay is re-tinted
   from the old teal to Kalamunda navy. Stronger on the left (contact copy), lighter on the right
   so the photograph stays visible, but still dark enough behind the opening-hours column. */
#banner-2 .bg-image.bg-inner::before {
  background: linear-gradient(to right, rgba(14, 22, 78, 0.90) 0%, rgba(18, 29, 100, 0.80) 42%, rgba(26, 42, 140, 0.64) 72%, rgba(26, 42, 140, 0.56) 100%);
}
#banner-2 .ci-icon { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.4); }
/* "Get In Touch" band (homepage + About Us): desaturated navy-slate over the same building photo, so it relates to the
   hero without repeating it. A light tonal shade at top and bottom gives depth; the left column
   (contact copy) stays darkest, the right (opening hours) a little more open. */
#banner-2.kvh-get-in-touch .bg-image.bg-inner::before {
  background:
    linear-gradient(180deg, rgba(9, 16, 38, 0.26) 0%, rgba(9, 16, 38, 0) 38%, rgba(9, 16, 38, 0) 66%, rgba(9, 16, 38, 0.28) 100%),
    linear-gradient(90deg, rgba(12, 23, 60, 0.80) 0%, rgba(16, 32, 78, 0.64) 45%, rgba(21, 41, 94, 0.50) 75%, rgba(23, 45, 100, 0.46) 100%);
}
.kvh-band-hours-panel {
  padding: 4px 0 4px 48px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.kvh-band-hours-title { font-size: var(--kvh-h3-size); line-height: 1.3; margin-bottom: 18px; }
@media (max-width: 991.98px) {
  .kvh-band-hours-panel { margin-top: 44px; padding: 36px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
}

/* ---------- Cards and panels: fewer effects ---------- */
.kvh-article-card { border-radius: 8px; }
.kvh-article-card:hover,
.kvh-article-card:focus-within { transform: none; box-shadow: none; border-color: var(--kvh-navy); }
.kvh-ci { background: transparent; border: 1px solid var(--kvh-navy); color: var(--kvh-navy); }
.kvh-urgent-call i { background: var(--kvh-navy); }
.kvh-urgent-call { box-shadow: none; }
.kvh-urgent-call:hover { transform: none; box-shadow: none; background: #e9edf8; }

/* ---------- Footer: light, dark-blue accents, readable ---------- */
.footer h2.h5-xs { color: var(--kvh-navy) !important; }
.footer .kvh-footer-phone a,
.footer .kvh-footer-phone { color: var(--kvh-navy) !important; }
.footer .kvh-footer-links a:hover,
.footer .foo-email a:hover,
.footer .kvh-footer-address a:hover { color: var(--kvh-navy); }
.footer .kvh-hours-label { color: var(--kvh-blue); }

/* ---------- One logo everywhere (client logo), sized consistently ---------- */
.desktoplogo img,
.smllogo img,
.footer-info img { width: auto; height: 50px; object-fit: contain; }

/* Internal page titles: confident, not oversized */
.kvh-hero-copy h1 { font-size: clamp(2.6rem, 4.6vw, 4.25rem); line-height: 1.02; }

/* Keep a visible keyboard focus ring on buttons (after the no-shadow reset above) */
.btn:focus-visible { outline: 2px solid var(--kvh-blue) !important; outline-offset: 3px; box-shadow: 0 0 0 1px #fff !important; }

/* ==========================================================================
   Homepage "Meet Our Team" (refinement): three portraits + editorial team panel.
   Four columns from 1200px, 2 x 2 from 576px, a single column on phones.
   Bios are the approved homepage excerpts, shortened visually with line-clamp.
   ========================================================================== */
#doctors-1 { padding-top: var(--kvh-section-y); padding-bottom: var(--kvh-related-y); }
#doctors-1 .section-title { margin-bottom: var(--kvh-head-gap); }
#doctors-1 .section-title p { margin-top: 4px; color: var(--kvh-muted); font-size: var(--kvh-lead-size); line-height: var(--kvh-small-lh); }
#banner-2 .banner-txt p { font-size: var(--kvh-lead-size); line-height: var(--kvh-small-lh); }
.kvh-team-grid-home {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 28px;
  align-items: start;
}
.kvh-team-grid-home > li { margin: 0; min-width: 0; }
.kvh-team-grid-home .doctor-1 { margin-bottom: 0; }
.kvh-team-grid-home .hover-overlay { aspect-ratio: 7 / 8; overflow: hidden; border-radius: 12px; }
.kvh-team-grid-home .hover-overlay img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 0; }
.kvh-team-grid-home .doctor-meta { padding-top: 20px; }
.kvh-team-grid-home .doctor-meta h3.h5-sm { margin: 0 0 4px; font-size: var(--kvh-name-size); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.kvh-team-grid-home .doctor-meta span.blue-color { display: block; margin: 0 0 10px; color: var(--kvh-blue); font-size: var(--kvh-small-size); line-height: 1.4; }
.kvh-team-grid-home p.kvh-bio-excerpt {
  margin: 0;
  color: rgba(17, 24, 39, 0.74);
  font-size: var(--kvh-small-size);
  line-height: var(--kvh-small-lh);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* Team overview: an editorial panel the same size as the portraits */
.kvh-team-overview-panel {
  aspect-ratio: 7 / 8;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 22px;
  border-radius: 12px;
  background: #f2f4f8;
  color: var(--kvh-ink);
}
.kvh-team-overview-label {
  margin: 0 0 16px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(26, 42, 140, 0.14);
  color: var(--kvh-navy);
}
.kvh-team-figure { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; line-height: 1.3; }
.kvh-team-figure strong { flex: 0 0 auto; min-width: 1.6em; color: var(--kvh-navy); font-size: 1.75rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.kvh-team-figure span { color: var(--kvh-ink); font-size: var(--kvh-body-size); }
.kvh-team-overview-note { margin: 8px 0 0; color: rgba(17, 24, 39, 0.74); font-size: var(--kvh-small-size); line-height: 1.55; }
.kvh-team-overview-cta { margin-top: auto; align-self: flex-start; padding: 12px 20px; }

@media (max-width: 1199.98px) {
  .kvh-team-grid-home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; }
  .kvh-team-overview-panel { padding: 34px 34px 32px; }
  .kvh-team-figure strong { font-size: 2.125rem; }
}
@media (max-width: 767.98px) {
  .kvh-team-grid-home { grid-template-columns: minmax(0, 460px); justify-content: center; gap: 40px; }
  .kvh-team-grid-home .hover-overlay { aspect-ratio: 4 / 5; }
  .kvh-team-overview-panel { aspect-ratio: auto; padding: 28px 24px; }
  .kvh-team-overview-note { margin-bottom: 22px; }
  .kvh-team-overview-cta { width: 100%; text-align: center; }
}

/* "Get In Touch" band (#banner-2.kvh-get-in-touch: homepage and About Us) and footer on the same vertical rhythm.
   The template's pt-80 left an empty white strip above the photo, and below 992px the
   band's padding was applied twice (.bg-inner + .container). */
#banner-2.kvh-get-in-touch { padding-top: 0; }
#banner-2.kvh-get-in-touch .bg-inner { padding-top: 0; padding-bottom: 0; }
#banner-2.kvh-get-in-touch .container { padding-top: var(--kvh-section-y); padding-bottom: var(--kvh-section-y); }
#banner-2.kvh-get-in-touch + #footer-1 { padding-top: var(--kvh-section-y); }

/* Homepage UI polish */
/* Focus on dark bands (top bar, hero photo, emergency, contact): white ring, since the Hills Blue ring
   falls to ~3:1 against navy. */
.headtoppart a:focus-visible,
#hero-1 a:focus-visible,
.kvh-emergency-band a:focus-visible,
#banner-2 a:focus-visible { outline-color: #fff !important; }
/* Depth from photography, not floating-card shadows */
#about-5 .about-img img { box-shadow: none; }

/* QA fixes */
/* menu.css points the page wrapper at images/bg01.jpg, which does not exist (404 on every page). */
.wsmenucontainer { background-image: none; }
/* Reduced motion: show WOW.js content immediately instead of fading/sliding it in. */
@media (prefers-reduced-motion: reduce) {
  .wow, .animated { animation: none !important; visibility: visible !important; }
}

/* ---------- Health Checks (health-checks.html): editorial pass ----------
   White sections on the site rhythm; the intro pairs the copy (7/12) with one genuine photograph (5/12);
   the three screening groups are ruled columns, not cards. Replaces the old age infographic, card grid
   and "Book an annual check" panel (their remaining style.css rules no longer match anything). */
.health-page .kvh-health-section { padding: var(--kvh-section-y) 0; background: #fff; }
.health-page h2,
.kvh-health-col h3,
.kvh-health-close h3 { text-wrap: balance; }
.health-page h2 { font-size: var(--kvh-h2-size); font-weight: 600; line-height: var(--kvh-heading-lh); letter-spacing: -0.02em; }
.kvh-health-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5.5fr); gap: 0 72px; align-items: center; }
.kvh-health-intro:not(:has(.kvh-health-photo)) { grid-template-columns: minmax(0, 1fr); }
.health-page .health-intro { padding-right: 0; }
.health-page .health-intro h2 { margin-bottom: 24px; }
.health-page .health-intro p { max-width: 36em; }
.kvh-health-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: #e9edf4; }
.kvh-health-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

.health-page .health-checklist { padding-top: 0; }
.health-page .health-checklist > .container::before { content: ""; display: block; height: 1px; margin-bottom: var(--kvh-section-y); background: #d4dae6; }
.kvh-health-head { max-width: 760px; margin-bottom: var(--kvh-head-gap); }
.kvh-health-head h2 { margin: 0; }
/* Subgrid rows keep the three lists starting on one line however the headings wrap. */
.kvh-health-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; border-top: 1px solid var(--kvh-navy); }
.kvh-health-col { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.kvh-health-meta { margin: 0; }
.kvh-health-col { min-width: 0; padding: 26px 40px 0; border-left: 1px solid #e6eaf0; }
.kvh-health-col:first-child { padding-left: 0; border-left: 0; }
.kvh-health-col:last-child { padding-right: 0; }
.kvh-health-num,
.health-page .kvh-health-col .health-check-stage { display: inline-block; margin: 0 0 10px; font-size: var(--kvh-eyebrow-size); font-weight: 600; letter-spacing: var(--kvh-eyebrow-ls); line-height: 1.4; }
.kvh-health-num { margin-right: 14px; color: var(--kvh-blue); }
.health-page .kvh-health-col .health-check-stage { color: var(--kvh-navy); text-transform: uppercase; }
.kvh-health-col h3 { margin: 0 0 18px; color: var(--kvh-navy); font-size: var(--kvh-h3-size); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.kvh-health-col ul { list-style: none; margin: 0; padding: 0; }
.kvh-health-col li { padding: 11px 0; border-top: 1px solid #edf0f5; color: var(--kvh-ink); font-size: var(--kvh-body-size); line-height: 1.5; }

/* Closing note: the section's last thought, on the same three-column grid (heading under column 1,
   sentence from column 2's text edge), with a thin rule above. */
.kvh-health-close { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: baseline; margin-top: 48px; padding-top: 28px; border-top: 1px solid #d4dae6; }
.kvh-health-close h3 { margin: 0; padding-right: 40px; color: var(--kvh-navy); font-size: var(--kvh-h3-size); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.kvh-health-close p { grid-column: 2 / span 2; max-width: 62ch; margin: 0; padding-left: 40px; color: var(--kvh-text); font-size: 17px; line-height: 1.7; }

@media (max-width: 991.98px) {
  .kvh-health-intro { grid-template-columns: minmax(0, 1fr); }
  .kvh-health-photo { max-width: 560px; margin-top: 40px; aspect-ratio: 1 / 1; }
  .kvh-health-photo img { object-position: 50% 30%; }
  .kvh-health-col { padding: 24px 24px 0; }
  .kvh-health-close h3 { padding-right: 24px; }
  .kvh-health-close p { padding-left: 24px; }
}
@media (max-width: 767.98px) {
  .kvh-health-columns { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .kvh-health-col { display: block; }
  .kvh-health-col,
  .kvh-health-col:first-child,
  .kvh-health-col:last-child { padding: 24px 0 0; border-left: 0; }
  .kvh-health-col + .kvh-health-col { margin-top: 28px; border-top: 1px solid #e6eaf0; }
  .kvh-health-close { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 40px; }
  .kvh-health-close h3 { padding-right: 0; }
  .kvh-health-close p { grid-column: auto; padding-left: 0; }
  .kvh-health-photo { margin-top: 32px; }
  .kvh-health-close p { font-size: 16px; }
  /* 44px tap areas without moving anything: an invisible hit area centred on each link. */
  .health-page .health-scroll-link,
  .health-page .health-breadcrumb a { position: relative; }
  .health-page .health-scroll-link::before,
  .health-page .health-breadcrumb a::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}

/* ---------- Cat and Dog Vaccination (cat-vaccination.html, dog-vaccination.html): editorial pass ----------
   Scoped to the kvh-cv-* classes (both pages also carry the older cat-vax-* classes, whose template
   styles are overridden here). One grid throughout: [label / heading 4/12] | [text 8/12]. */
@media (max-width: 767.98px) { #cat-vax-hero h1, #nutrition-hero h1 { font-size: 2.7rem; } } /* as #health-hero */
.kvh-cv-section { padding: var(--kvh-section-y) 0; background: #fff; }
.kvh-cv-section h2 { font-size: var(--kvh-h2-size); font-weight: 600; line-height: var(--kvh-heading-lh); letter-spacing: -0.02em; text-wrap: balance; }
.kvh-cv-section h3 { text-wrap: balance; }
.kvh-cv-ruled { padding-top: 0; }
.kvh-cv-ruled > .container::before { content: ""; display: block; height: 1px; margin-bottom: var(--kvh-section-y); background: #d4dae6; }
.kvh-cv-section .cat-vax-kicker { margin-bottom: 12px; }
.kvh-cv-section p { color: rgba(17, 24, 39, 0.8); font-size: 17px; line-height: 1.7; }
.kvh-cv-section .kvh-text-link { color: var(--kvh-navy); }

/* Opening: copy 7/12 | supporting note (and a future photo) 5/12 */
.kvh-cv-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 72px; align-items: start; }
.kvh-cv-section .cat-vax-intro,
.kvh-cv-section .insurance-intro { padding-right: 0; }
.kvh-cv-section .cat-vax-intro h2,
.kvh-cv-section .insurance-intro h2 { margin-bottom: 24px; }
.kvh-cv-section .cat-vax-intro p,
.kvh-cv-section .insurance-intro p { max-width: 36em; margin-bottom: 18px; }
.kvh-cv-section .cat-vax-intro p:last-child,
.kvh-cv-section .insurance-intro p:last-child { margin-bottom: 0; }
.kvh-cv-photo { margin: 0 0 32px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; }
.kvh-cv-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kvh-cv-note { padding-top: 24px; border-top: 1px solid var(--kvh-navy); }
.kvh-cv-intro .kvh-cv-aside { padding-top: 8px; }
.kvh-cv-note h3 { margin: 0 0 12px; color: var(--kvh-navy); font-size: var(--kvh-h3-size); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.kvh-cv-note p { margin: 0 0 16px; }
.kvh-cv-links { display: flex; flex-wrap: wrap; gap: 4px 32px; margin: 18px 0 0 !important; }
.kvh-cv-links .kvh-text-link { padding: 10px 0; }
.kvh-cv-note .kvh-cv-links { margin-top: 4px !important; }

/* Programme, after-care and closing note share one row pattern */
.kvh-cv-head { max-width: 760px; margin-bottom: var(--kvh-head-gap); }
.kvh-cv-head h2 { margin: 0; }
.kvh-cv-stages { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kvh-navy); }
.kvh-cv-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 12px 64px; align-items: start; margin: 0; padding: 32px 0; }
.kvh-cv-stages .kvh-cv-row + .kvh-cv-row { border-top: 1px solid #e6eaf0; }
.kvh-cv-meta { margin: 0; }
.kvh-cv-num { display: inline-block; margin-right: 14px; color: var(--kvh-blue); font-size: var(--kvh-eyebrow-size); font-weight: 600; letter-spacing: var(--kvh-eyebrow-ls); }
.kvh-cv-section .cat-vax-stage { display: inline; color: var(--kvh-navy); font-size: var(--kvh-eyebrow-size); font-weight: 600; letter-spacing: var(--kvh-eyebrow-ls); text-transform: uppercase; }
.kvh-cv-body > :first-child { margin-top: 0; }
.kvh-cv-body h3 { margin: 0 0 14px; color: var(--kvh-navy); font-size: var(--kvh-h3-size); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.kvh-cv-body p { max-width: 38em; margin: 0 0 16px; }
.kvh-cv-body p:last-child { margin-bottom: 0; }
.kvh-cv-aftercare,
.kvh-cv-close { margin-top: 24px; padding-top: 32px; border-top: 1px solid #d4dae6; }
.kvh-cv-aftercare h2,
.kvh-cv-close h2 { margin: 0; color: var(--kvh-navy); font-size: var(--kvh-h3-size); line-height: 1.3; letter-spacing: -0.01em; }
/* The next step after the article: more air and a navy rule, so it never reads as disease 06. */
.kvh-cv-close { margin-top: 72px; padding-top: 32px; padding-bottom: 0; border-top-color: var(--kvh-navy); }
/* The disease heading sits 16px closer to its list. */
#cat-vax-diseases .kvh-cv-head,
#dog-vax-diseases .kvh-cv-head,
#healthy-diet .kvh-cv-head { margin-bottom: calc(var(--kvh-head-gap) - 16px); }

/* Diseases: the numbered list stays; quieter numbers, rules and a 70-character measure, on the page grid */
.kvh-cv-section .cat-vax-disease-list { max-width: none; margin: 0; border-top: 1px solid var(--kvh-navy); }
.kvh-cv-section .cat-vax-disease-list article { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 64px; padding: 32px 0; border-bottom: 0; }
.kvh-cv-section .cat-vax-disease-list article + article { border-top: 1px solid #e6eaf0; }
.kvh-cv-section .cat-vax-disease-list article:first-child { padding-top: 32px; }
.kvh-cv-section .cat-vax-disease-number { margin: 0 0 6px; color: #b8c4d6; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.4; }
.kvh-cv-section .cat-vax-disease-list h3 { margin: 0; color: var(--kvh-navy); font-size: var(--kvh-h3-size); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.kvh-cv-section .cat-vax-disease-list h3 small { display: block; margin-top: 10px; color: var(--kvh-blue); font-size: var(--kvh-eyebrow-size); font-weight: 600; letter-spacing: var(--kvh-eyebrow-ls); line-height: 1.4; text-transform: uppercase; }
.kvh-cv-section .cat-vax-disease-list p { max-width: 38em; margin: 0 0 14px; color: rgba(17, 24, 39, 0.8); font-size: 17px; line-height: 1.7; }
.kvh-cv-section .cat-vax-disease-list p:last-child { margin-bottom: 0; }

@media (max-width: 991.98px) {
  .kvh-cv-intro { grid-template-columns: minmax(0, 1fr); }
  .kvh-cv-intro .kvh-cv-aside { max-width: 560px; margin-top: 40px; padding-top: 0; }
  .kvh-cv-row,
  .kvh-cv-section .cat-vax-disease-list article { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kvh-cv-meta { margin-bottom: 14px; }
  .kvh-cv-dhead { margin-bottom: 16px; }
}
@media (max-width: 575.98px) {
  .kvh-cv-section p,
  .kvh-cv-section .cat-vax-disease-list p { font-size: 16px; }
  .kvh-cv-row,
  .kvh-cv-section .cat-vax-disease-list article,
  .kvh-cv-section .cat-vax-disease-list article:first-child { padding: 26px 0; }
  .kvh-cv-links { flex-direction: column; gap: 0; }
  .kvh-cv-close { margin-top: 56px; }
}
/* 44px tap areas without moving anything (all widths, so tablets are covered too). */
.cat-vax-scroll-link,
.cat-vax-breadcrumb a,
.insurance-scroll-link,
.insurance-breadcrumb a,
.nutrition-scroll-link,
.nutrition-breadcrumb a { position: relative; }
.cat-vax-scroll-link::before,
.cat-vax-breadcrumb a::before,
.insurance-scroll-link::before,
.insurance-breadcrumb a::before,
.nutrition-scroll-link::before,
.nutrition-breadcrumb a::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

/* ---------- Pet Insurance (pet-insurance.html): the vaccination pages' editorial system (kvh-cv-*) ----------
   Extra pieces: the cover lead-in paragraphs and the six policy differences as a ruled, numbered list. */
.kvh-pi-aside-note { margin-top: 4px !important; padding-top: 14px; border-top: 1px solid #e6eaf0; color: var(--kvh-text) !important; font-size: var(--kvh-small-size) !important; }
.kvh-pi-lead { margin-bottom: 32px; }
.kvh-pi-lead p { max-width: 38em; margin: 0 0 12px; }
.kvh-pi-lead p:last-child { margin-bottom: 0; }
.kvh-pi-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--kvh-navy); }
.kvh-pi-list li { display: flex; align-items: baseline; gap: 0; padding: 20px 0; border-bottom: 1px solid #e6eaf0; }
.kvh-pi-list h3 { margin: 0; color: var(--kvh-navy); font-size: 19px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
@media (max-width: 991.98px) { .kvh-pi-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; } }
@media (max-width: 575.98px) {
  .kvh-pi-list { grid-template-columns: minmax(0, 1fr); }
  .kvh-pi-list li { padding: 16px 0; }
  .kvh-pi-list h3 { font-size: 18px; }
}

/* ---------- Nutritional Advice (nutritional-advice.html): the same kvh-cv-* system ----------
   Nutrients are ruled rows (name | text, no icons); the 01-05 feeding advice uses the disease-list rows;
   "Life Cycle Feeding" is the closing note. */
.kvh-nu-nutrients .kvh-cv-row { padding: 26px 0; }
.kvh-nu-name { margin: 0; color: var(--kvh-navy); font-size: var(--kvh-h3-size); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
#healthy-diet .kvh-pi-lead { margin-bottom: 20px; }
.kvh-nu-remember { color: var(--kvh-navy) !important; font-weight: 600; }
@media (max-width: 991.98px) { .kvh-nu-name { margin-bottom: 10px; } }
@media (max-width: 575.98px) { .kvh-nu-nutrients .kvh-cv-row { padding: 22px 0; } }

/* ---------- Flea and Tick Control (flea-and-tick-control.html): the same kvh-cv-* system ----------
   Hand-built from content/flea-and-tick-control.js (same words, same order); each topic is a ruled row,
   the two Ehrlichia products sit as a ruled pair, and the tick-paralysis tips close the page. */
.kvh-ft-lead { padding-top: 0; }
.kvh-ft-lead h2 { margin: 0; color: var(--kvh-navy); }
.kvh-ft-rows { margin-top: 24px; }
.kvh-ft-products { margin-top: 20px; border-top: 1px solid #e6eaf0; }
.kvh-ft-products p { margin: 0 !important; padding: 14px 0; border-bottom: 1px solid #e6eaf0; }
.kvh-ft-tips { list-style: none; max-width: 38em; margin: 0; padding: 0; }
.kvh-ft-tips li { padding: 12px 0; border-top: 1px solid #e6eaf0; color: rgba(17, 24, 39, 0.8); font-size: 17px; line-height: 1.7; }
.kvh-ft-tips li:first-child { padding-top: 0; border-top: 0; }
@media (max-width: 991.98px) { .kvh-ft-lead h2 { margin-bottom: 16px; } }
@media (max-width: 575.98px) { .kvh-ft-tips li { font-size: 16px; } }
/* 44px tap area for the breadcrumb links on the generated inner pages' shared breadcrumb, this page only. */
.kvh-ft-page .kvh-breadcrumb a { position: relative; }
.kvh-ft-page .kvh-breadcrumb a::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }