/* Kalamunda Veterinary Hospital — Cat Vaccination page (cat-vaccination.html only).

   Isolation: every rule is scoped to body.cvx-page and uses cvx- hooks. Do NOT style the older cat-vax-*
   classes here: dog-vaccination.html still carries body.cat-vax-page, so the legacy .cat-vax-page rules in
   style.css / theme-dark.css also reach Dog Vaccination. Dog's own system (css/kvh-service.css, .svc-*) is
   not loaded on this page, and this file is not loaded on Dog.

   Page architecture (hooks in cat-vaccination.html):
     1. Hero                              #cat-vax-hero      .cvx-hero
     2. Protecting your cat               #cat-vax-overview  .cvx-section.cvx-why
     3. Vaccination through life          #cat-vax-program   .cvx-section.cvx-journey
          stages: .cvx-stages > .cvx-stage[data-stage=1|2], then #cat-vax-aftercare.cvx-stage--aftercare[data-stage=3]
     4. Diseases                          #cat-vax-diseases  .cvx-section.cvx-dis
          .cvx-dis-list > article.cvx-disease#feline-panleukopenia … #chlamydia-felis
     5. Booking CTA                       #cat-vax-booking   .cvx-section.cvx-cta
     6. Get In Touch (shared, #banner-2)  7. Footer (shared, #footer-1)

   Step 1 (foundation): tokens and section boundaries only; the page looks exactly as before. */

/* ---------- Tokens: the same values as Dog Vaccination's system (css/kvh-service.css), Cat-scoped ---------- */
.cvx-page {
  --cvx-navy: var(--kvh-navy);               /* #1a2a8c */
  --cvx-navy-deep: #131f6b;
  --cvx-blue: var(--kvh-blue);               /* #3d7fc4: lines, icons, large text */
  --cvx-blue-ink: #2f6db3;                   /* small blue text (5.3:1) */
  --cvx-surface-pale: #f1f6fb;
  --cvx-surface-neutral: #f7f8fa;
  --cvx-ink: #1f2937;
  --cvx-muted: #5b6474;
  --cvx-line: #e3e8f0;
  --cvx-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px rgba(26, 42, 140, 0.06);
  --cvx-alert-bg: #fffbeb;
  --cvx-alert-line: #b45309;
  --cvx-alert-ink: #92400e;
  --cvx-radius: 8px;                         /* controls */
  --cvx-radius-media: 12px;                  /* photos, callouts */
  --cvx-radius-feature: 16px;                /* the one large panel */
  --cvx-measure: 38em;
  --cvx-section-y: var(--kvh-section-y);
  --cvx-dur-fast: 180ms;
  --cvx-dur: 260ms;
  --cvx-dur-slow: 350ms;
  --cvx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}



/* ---------- 1. Hero (#cat-vax-hero.cvx-hero) ----------
   The Dog Vaccination hero's logic in Cat's own classes: a navy field with the copy on the left and the
   photograph on the right ~52%, its left edge a soft curved fade into the navy (CSS mask); the breadcrumb
   inside the hero (the spinning seal is a homepage-only detail). Selectors that set the section, h1 and
   paragraphs include #cat-vax-hero because the legacy #cat-vax-hero rules (style.css, theme-dark.css,
   kvh-site.css: building photo, h1/p sizes, text shadows) carry ID specificity; no !important needed. */
#cat-vax-hero.cvx-hero { position: relative; z-index: 0; display: flex; align-items: center; min-height: 580px; overflow: hidden; isolation: isolate;
  background: linear-gradient(120deg, var(--cvx-navy-deep) 0%, var(--cvx-navy) 58%, #1f3399 100%); color: #fff; }
.cvx-hero-inner { position: relative; z-index: 2; }
.cvx-hero-copy { max-width: 560px; padding: 56px 0 72px; }

/* the photograph: replace the file, not the CSS (object-position keeps the right of the frame, where the cat sits) */
.cvx-hero-photo { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; width: 52%; margin: 0; }
.cvx-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%;
  -webkit-mask-image: radial-gradient(ellipse 100% 130% at 100% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 130% at 100% 50%, #000 58%, transparent 100%); }
/* the cat photo's pale wall is far brighter than the navy: a soft navy veil over the photo's left edge
   keeps the join a gradual tonal change instead of a light band */
.cvx-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23, 37, 128, 0.55) 0%, rgba(23, 37, 128, 0.22) 30%, rgba(23, 37, 128, 0) 55%); pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 100% 130% at 100% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 130% at 100% 50%, #000 58%, transparent 100%); } /* same fade as the photo, so the veil never shows as an edge */

/* breadcrumb */
.cvx-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 0 0 32px; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; }
.cvx-crumbs li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.82); }
.cvx-crumbs li + li::before { content: ""; width: 6px; height: 6px; border-top: 1.5px solid rgba(255, 255, 255, 0.55); border-right: 1.5px solid rgba(255, 255, 255, 0.55); transform: rotate(45deg); }
.cvx-crumbs a { position: relative; color: #fff; text-decoration: none; transition: color var(--cvx-dur-fast) var(--cvx-ease); }
.cvx-crumbs a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } /* 44px tap area */
.cvx-crumbs a:hover { color: #cfe2f7; text-decoration: underline; text-underline-offset: 3px; }
.cvx-crumbs [aria-current] { color: rgba(255, 255, 255, 0.82); }

/* type */
#cat-vax-hero .cvx-hero-eyebrow { max-width: none; margin: 0 0 14px; color: #b9d3f0; font-size: var(--kvh-eyebrow-size); font-weight: 600; letter-spacing: var(--kvh-eyebrow-ls); line-height: 1.4; text-shadow: none; text-transform: uppercase; }
#cat-vax-hero .cvx-hero-copy h1 { margin: 0; color: #fff; font-size: clamp(40px, 22px + 2.6vw, 60px); font-weight: 600; line-height: 1.06; letter-spacing: -0.025em; text-shadow: none; }
#cat-vax-hero .cvx-hero-lede { max-width: 30em; margin: 18px 0 0; color: rgba(255, 255, 255, 0.9); font-size: 19px; line-height: 1.55; text-shadow: none; }

/* actions: primary white, secondary outlined (the Dog hero's pair) */
.cvx-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.cvx-btn.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0; padding: 12px 24px; border: 2px solid transparent; border-radius: var(--cvx-radius); font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none;
  transition: background-color var(--cvx-dur) var(--cvx-ease), border-color var(--cvx-dur) var(--cvx-ease), color var(--cvx-dur) var(--cvx-ease); }
.cvx-btn-on-dark.btn { background: #fff; border-color: #fff; color: var(--cvx-navy); }
.cvx-btn-on-dark.btn:hover, .cvx-btn-on-dark.btn:focus-visible { background: #e8eef7; border-color: #e8eef7; color: var(--cvx-navy); }
.cvx-btn-ghost.btn { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.cvx-btn-ghost.btn:hover, .cvx-btn-ghost.btn:focus-visible { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; }
.cvx-arrow { display: inline-block; font-size: 0.8em; }

/* motion: the copy settles in as one block on load; nothing else moves */
@keyframes cvx-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cvx-hero-copy { animation: cvx-rise var(--cvx-dur-slow) var(--cvx-ease) both; }
@keyframes cvx-settle { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes cvx-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
.cvx-hero-photo img { transform-origin: 78% 40%; animation: cvx-settle 600ms var(--cvx-ease) both, cvx-drift 22s ease-in-out 600ms infinite alternate; } /* settles in, then a very slow drift towards the cat */

@media (min-width: 992px) and (max-width: 1199.98px) {
  #cat-vax-hero.cvx-hero { min-height: 560px; }
  .cvx-hero-photo { width: 46%; }
  .cvx-hero-copy { max-width: 470px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  #cat-vax-hero.cvx-hero { min-height: 500px; margin-top: 70px; } /* clears the fixed 70px mobile header */
  .cvx-hero-photo { width: 44%; }
  .cvx-hero-copy { max-width: 370px; padding: 48px 0 64px; }
  #cat-vax-hero .cvx-hero-lede { font-size: 17px; }
  .cvx-hero-photo img { object-position: 95% 50%; }
}
@media (max-width: 767.98px) {
  /* Phones: copy first on the navy field, then the cat strip, its top edge curving softly into the navy.
     The image is drawn 160% wide and shifted left, so the strip shows the right of the frame (the cat). */
  #cat-vax-hero.cvx-hero { flex-direction: column; align-items: stretch; min-height: 0; margin-top: 70px; }
  .cvx-hero-inner { order: 1; }
  .cvx-hero-copy { max-width: none; padding: 32px 0 28px; }
  .cvx-crumbs ol { margin-bottom: 22px; }
  #cat-vax-hero .cvx-hero-lede { font-size: 17px; }
  .cvx-hero-actions { margin-top: 24px; }
  .cvx-hero-photo { position: relative; order: 2; width: 100%; height: 280px; overflow: hidden; }
  .cvx-hero-photo img { width: 160%; max-width: none; margin-left: -55%; object-position: 50% 45%;
    -webkit-mask-image: radial-gradient(ellipse 94% 118% at 65% 100%, #000 70%, transparent 92%);
    mask-image: radial-gradient(ellipse 94% 118% at 65% 100%, #000 70%, transparent 92%); }
  .cvx-hero-photo::after { background: linear-gradient(180deg, rgba(23, 37, 128, 0.5) 0%, rgba(23, 37, 128, 0.15) 30%, rgba(23, 37, 128, 0) 50%);
    -webkit-mask-image: radial-gradient(ellipse 94% 118% at 65% 100%, #000 70%, transparent 92%);
    mask-image: radial-gradient(ellipse 94% 118% at 65% 100%, #000 70%, transparent 92%); }
}
@media (max-width: 575.98px) {
  .cvx-hero-actions .cvx-btn.btn { flex: 1 1 100%; }
}

/* ---------- 2. Protecting your cat (#cat-vax-overview.cvx-why) ----------
   White section. Left: eyebrow, heading, lead and body copy. Right: a large 4:5 photograph with a small
   white "Protection for life" note under it, right-aligned and overlapping only the photo's bottom
   edge (the scrubs), so it never covers either face. One background device: a pale-blue organic shape behind the photo's upper left. One icon: a
   small outlined shield with a paw. h2 and paragraph selectors include .cvx-why to outrank the legacy
   .cat-vax-page h2 rule (style.css), which Dog Vaccination's body also matches. */
.cvx-page .cvx-why { padding: clamp(72px, 7.5vw, 108px) 0; background: #fff; }
.cvx-why-grid { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 56px clamp(40px, 5.5vw, 88px); align-items: center; }

.cvx-page .cvx-eyebrow { margin: 0 0 12px; color: var(--cvx-blue-ink); font-size: var(--kvh-eyebrow-size); font-weight: 600; letter-spacing: var(--kvh-eyebrow-ls); line-height: 1.4; text-transform: uppercase; }
.cvx-page .cvx-why h2 { margin: 0 0 24px; color: var(--cvx-navy); font-size: clamp(32px, 20px + 1.8vw, 46px); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.cvx-page .cvx-why-intro p:not(.cvx-eyebrow) { max-width: 34em; margin: 0 0 18px; color: var(--cvx-ink); font-size: 17px; line-height: 1.7; }
.cvx-page .cvx-why-intro p.cvx-lead { color: #111827; font-size: 19px; line-height: 1.6; }
.cvx-page .cvx-why-intro p:last-child { margin-bottom: 0; }

.cvx-why-visual { position: relative; z-index: 0; display: flex; flex-direction: column; }
.cvx-why-visual::before { content: ""; position: absolute; z-index: -1; top: -48px; left: -56px; width: 72%; height: 74%;
  border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; background: var(--cvx-surface-pale); pointer-events: none; }
.cvx-why-photo { width: 80%; margin: 0; overflow: hidden; border-radius: var(--cvx-radius-feature); background: #e9edf3; aspect-ratio: 4 / 5; }
.cvx-why-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform var(--cvx-dur-slow) var(--cvx-ease); }
.cvx-why-photo:hover img { transform: scale(1.025); }

.cvx-why-note { position: relative; align-self: flex-end; width: min(310px, 62%); margin-top: -72px; padding: 22px 24px 10px; border: 1px solid var(--cvx-line); border-radius: var(--cvx-radius-media); background: #fff; box-shadow: var(--cvx-shadow); }
.cvx-shield { display: block; width: 32px; height: 32px; margin-bottom: 12px; }
.cvx-shield-body { fill: var(--cvx-surface-pale); stroke: var(--cvx-blue); stroke-width: 1.6; stroke-linejoin: round; transition: fill var(--cvx-dur) var(--cvx-ease); }
.cvx-shield-paw { fill: var(--cvx-blue); }
.cvx-why-note:hover .cvx-shield-body { fill: #e1edf9; }
.cvx-page .cvx-why-note .cvx-why-note-label { margin: 0 0 6px; color: var(--cvx-blue-ink); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; }
.cvx-page .cvx-why-note h3 { margin: 0 0 8px; color: var(--cvx-navy); font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.cvx-page .cvx-why-note p { margin: 0; color: var(--cvx-ink); font-size: 15.5px; line-height: 1.6; }
.cvx-page .cvx-why-note .cvx-why-note-link { margin-top: 4px; }
.cvx-why-note-link a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--cvx-navy); font-weight: 600; text-decoration: none; }
.cvx-why-note-link a:hover { color: var(--cvx-blue-ink); text-decoration: underline; text-underline-offset: 4px; }
.cvx-why-note-link .cvx-arrow { transition: transform var(--cvx-dur-fast) var(--cvx-ease); }
.cvx-why-note-link a:hover .cvx-arrow, .cvx-why-note-link a:focus-visible .cvx-arrow { transform: translateX(3px); }

/* scroll reveal (js/kvh-cat-vaccination.js adds html.cvx-motion and .is-in): blocks fade up 22px over 700ms, as on
   Dog Vaccination; hidden only while .cvx-motion is on, and every block that has come into view (or been
   scrolled past) is revealed. The photo follows 80ms after the text. */
.cvx-motion .cvx-reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--cvx-ease), transform 700ms var(--cvx-ease); }
.cvx-motion .cvx-reveal.is-in { opacity: 1; transform: none; }
.cvx-motion .cvx-why-visual.cvx-reveal { transition-delay: 80ms; }

@media (max-width: 1199.98px) {
  .cvx-why-note { margin-top: -40px; } /* narrower photo: overlap only its bottom edge */
}
@media (max-width: 991.98px) {
  .cvx-why-grid { grid-template-columns: minmax(0, 1fr); }
  .cvx-why-intro { max-width: 680px; }
  .cvx-why-visual { width: 100%; max-width: 600px; }
  .cvx-why-photo { width: 80%; }
  .cvx-why-visual::before { left: -32px; }
}
@media (max-width: 575.98px) {
  .cvx-page .cvx-why-intro p:not(.cvx-eyebrow) { font-size: 16px; }
  .cvx-page .cvx-why-intro p.cvx-lead { font-size: 18px; }
  .cvx-why-visual::before { top: -28px; left: -24px; width: 80%; height: 60%; }
  .cvx-why-photo { width: 100%; }
  /* phones: the note sits under the photo, overlapping its lower edge by 16px */
  .cvx-why-note { align-self: stretch; width: auto; margin: -16px 12px 0; padding: 20px 20px 8px; }
}

/* ---------- 3. Vaccination through life (#cat-vax-program.cvx-journey) ----------
   Pale-blue section. Centred intro with a tiny paw between two hairlines. Three stages (01 kitten,
   02 adult cat, 03 after vaccination care) on one thin, gently curving blue line: stages 01 and 03 sit
   22px lower than 02, and the line (inline SVG) passes through each numbered marker; after 03 it fades
   out. Below 992px it becomes a vertical journey with the line down the left. One background device:
   a faint irregular shape behind stages 01-02. */
.cvx-page .cvx-journey { --cvx-journey-gap: clamp(32px, 3.6vw, 52px); --cvx-wave: 22px;
  padding: clamp(80px, 7.5vw, 108px) 0; background: var(--cvx-surface-pale); }
.cvx-journey-head { max-width: 640px; margin: 0 auto clamp(48px, 5vw, 68px); text-align: center; }
.cvx-page .cvx-journey-head .cvx-eyebrow { margin-bottom: 12px; }
.cvx-page .cvx-journey h2 { margin: 0; color: var(--cvx-navy); font-size: clamp(30px, 20px + 1.45vw, 41px); font-weight: 600; line-height: 1.15; letter-spacing: -0.022em; text-wrap: balance; }
.cvx-journey-mark { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }
.cvx-journey-mark::before, .cvx-journey-mark::after { content: ""; width: 32px; height: 1px; background: var(--cvx-blue); opacity: 0.45; }
.cvx-mark-paw { width: 16px; height: 16px; fill: var(--cvx-blue); opacity: 0.55; }

.cvx-journey-track { position: relative; z-index: 0; }
.cvx-journey-track::before { content: ""; position: absolute; z-index: -1; top: 10%; left: -4%; width: 72%; height: 62%;
  border-radius: 52% 48% 60% 40% / 56% 44% 56% 44%; background: #e7eff9; opacity: 0.7; pointer-events: none; } /* the one faint wash, behind 01-02 */
.cvx-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--cvx-journey-gap); margin: 0; padding: 0; list-style: none; }
.cvx-stage { position: relative; min-width: 0; padding-top: var(--cvx-wave); }
.cvx-stage[data-stage="2"] { padding-top: 0; } /* the middle stage sits higher: 01 low, 02 high, 03 low */

/* the line: from the centre of column 01 to the centre of column 03 (the markers sit centred over their photos),
   through 02 (y 33 / 11 / 33 in a 44px band). Column centre = (100% - 2 gaps) / 6 from the left edge. */
.cvx-journey-line { position: absolute; top: 9px; left: calc((100% - 2 * var(--cvx-journey-gap)) / 6); width: calc((100% - 2 * var(--cvx-journey-gap)) * 2 / 3 + 2 * var(--cvx-journey-gap)); height: 44px;
  overflow: visible; fill: none; stroke: var(--cvx-blue); stroke-width: 1.25; stroke-linecap: round; opacity: 0.6; pointer-events: none; }
.cvx-journey-line path { vector-effect: non-scaling-stroke; }
.cvx-journey-track::after { content: ""; position: absolute; top: calc(var(--cvx-wave) + 20px); left: calc((100% - 2 * var(--cvx-journey-gap)) * 5 / 6 + 2 * var(--cvx-journey-gap) + 20px); width: 88px; height: 1.25px;
  background: linear-gradient(90deg, var(--cvx-blue), rgba(61, 127, 196, 0)); opacity: 0.6; pointer-events: none; } /* after 03: care continues */

.cvx-stage-num { position: relative; z-index: 1; display: grid; margin: 0 auto; /* centred over its photo */ place-items: center; width: 40px; height: 40px; border: 1.5px solid #8fb4e0; border-radius: 50%; background: #fff;
  color: var(--cvx-blue-ink); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; line-height: 1; font-variant-numeric: tabular-nums; transition: border-color var(--cvx-dur) var(--cvx-ease); }
.cvx-stage:hover .cvx-stage-num { border-color: var(--cvx-blue); }
.cvx-stage-photo { margin: 28px 0 0; overflow: hidden; border-radius: var(--cvx-radius-feature); background: #e9edf3; aspect-ratio: 4 / 5; }
.cvx-stage-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--cvx-dur-slow) var(--cvx-ease); }
.cvx-stage[data-stage="1"] .cvx-stage-photo img { object-position: 50% 40%; }
.cvx-stage[data-stage="2"] .cvx-stage-photo img { object-position: 50% 30%; }
.cvx-stage-photo:hover img { transform: scale(1.025); }

.cvx-stage-body { padding-top: 24px; }
.cvx-page .cvx-stage-body .cvx-stage-meta { margin: 0 0 8px; color: var(--cvx-blue-ink); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; }
.cvx-page .cvx-stage-body h3 { margin: 0 0 10px; color: var(--cvx-navy); font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.cvx-page .cvx-stage-body p:not(.cvx-stage-meta) { max-width: 36em; margin: 0 0 14px; color: var(--cvx-ink); font-size: 16px; line-height: 1.65; }
.cvx-page .cvx-stage-body p.cvx-stage-lead { color: #111827; font-size: 17px; font-weight: 500; line-height: 1.5; }
.cvx-page .cvx-stage-body p:last-child { margin-bottom: 0; }

/* motion: intro, then the line draws left to right, stages settle 0 / 70 / 140ms apart */
.cvx-motion .cvx-stage.cvx-reveal[data-stage="2"] { transition-delay: 150ms; }
.cvx-motion .cvx-stage.cvx-reveal[data-stage="3"] { transition-delay: 300ms; }
.cvx-motion .cvx-journey-line.cvx-reveal { opacity: 0.6; transform: none; transition-delay: 0s; clip-path: inset(0 100% 0 0); transition: clip-path 1100ms var(--cvx-ease) 120ms; }
.cvx-motion .cvx-journey-line.cvx-reveal.is-in { clip-path: inset(0 0 0 0); }
.cvx-motion .cvx-journey-track::after { opacity: 0; transition: opacity 500ms var(--cvx-ease) 1150ms; }
.cvx-motion .cvx-journey-track:has(.cvx-journey-line.is-in)::after { opacity: 0.6; }

@media (max-width: 991.98px) {
  /* vertical journey: marker | photo | text, the line down the left between markers */
  .cvx-journey-line, .cvx-journey-track::after { display: none; }
  .cvx-stage-num { margin: 0; } /* vertical journey: the marker sits in its own 40px column */
  .cvx-journey-track::before { top: 4%; left: -6%; width: 80%; height: 40%; }
  .cvx-stages { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .cvx-stage, .cvx-stage[data-stage="2"] { display: grid; grid-template-columns: 40px minmax(0, 5fr) minmax(0, 7fr); column-gap: 24px; align-items: start; padding-top: 0; }
  .cvx-stage:not(:last-child)::before { content: ""; position: absolute; top: 48px; bottom: -48px; left: 19.5px; width: 1px; background: var(--cvx-blue); opacity: 0.45; }
  .cvx-stage-photo { margin-top: 0; }
  .cvx-stage-body { padding-top: 4px; }
}
@media (max-width: 575.98px) {
  .cvx-journey-head { text-align: left; }
  .cvx-journey-mark { justify-content: flex-start; }
  .cvx-journey-mark::before { display: none; }
  .cvx-stages { row-gap: 44px; }
  .cvx-stage, .cvx-stage[data-stage="2"] { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; }
  .cvx-stage-num { width: 36px; height: 36px; font-size: 12px; }
  .cvx-stage:not(:last-child)::before { top: 44px; bottom: -40px; left: 17.5px; }
  .cvx-stage-photo { grid-column: 2; aspect-ratio: 4 / 3; }
  .cvx-stage[data-stage="1"] .cvx-stage-photo img { object-position: 50% 30%; }
  .cvx-stage[data-stage="2"] .cvx-stage-photo img { object-position: 50% 18%; }
  .cvx-stage[data-stage="3"] .cvx-stage-photo img { object-position: 50% 15%; } /* keeps the cat's ears and face in the 4:3 strip */
  .cvx-stage-body { grid-column: 2; padding-top: 18px; }
}

/* ---------- 4. Diseases (#cat-vax-diseases.cvx-dis) ----------
   White, clinical. Left-aligned heading in about half the width, with one faint outlined medical cross
   in the space to its right. One full-width vertical index of five expandable rows: number, a small
   outline icon in a pale circle, the name and its other name; the full original text opens underneath
   (js/kvh-cat-vaccination.js: height + opacity, several rows can be open, #id links open a row).
   Bottom padding is short because the booking row below brings its own 72px gap and navy rule. */
.cvx-page .cvx-dis { padding: clamp(80px, 7.5vw, 108px) 0 clamp(16px, 2.5vw, 40px); background: #fff; }
.cvx-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cvx-dis-head { position: relative; max-width: 560px; margin-bottom: clamp(36px, 4vw, 52px); }
.cvx-page .cvx-dis h2 { margin: 0; color: var(--cvx-navy); font-size: clamp(30px, 20px + 1.6vw, 42px); font-weight: 600; line-height: 1.14; letter-spacing: -0.022em; text-wrap: balance; }
.cvx-dis-cross { position: absolute; top: -14px; left: calc(100% + clamp(80px, 22vw, 420px)); width: 150px; height: 150px; fill: none; stroke: #dce7f4; stroke-width: 1; pointer-events: none; }

.cvx-dis-list { border-top: 1px solid var(--cvx-line); }
.cvx-motion .cvx-dis-list.cvx-reveal { transition-delay: 80ms; }
.cvx-disease { position: relative; margin: 0 -20px; padding: 0 20px; scroll-margin-top: 120px; transition: background-color var(--cvx-dur) var(--cvx-ease); } /* #id links land clear of the sticky header */
.cvx-disease::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: var(--cvx-line); } /* divider aligned with the text, not the wash */
.cvx-disease:hover { background: #fafcfe; }
.cvx-disease.is-open { background: #f6f9fd; }
.cvx-dis-heading { margin: 0; font: inherit; }
.cvx-dis-trigger { position: relative; display: grid; grid-template-columns: 36px 42px minmax(0, 1fr); column-gap: 20px; align-items: center; width: 100%; min-height: 104px;
  padding: 26px 56px 26px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: padding var(--cvx-dur) var(--cvx-ease); }
.cvx-disease.is-open .cvx-dis-trigger { padding-top: 30px; }
.cvx-dis-trigger:focus { outline: none; }
.cvx-dis-trigger:focus-visible { outline: 2px solid var(--cvx-blue-ink); outline-offset: 4px; border-radius: var(--cvx-radius); }
.cvx-dis-trigger::after { content: ""; position: absolute; top: 50%; right: 8px; width: 10px; height: 10px; margin-top: -8px; border-right: 2px solid var(--cvx-blue); border-bottom: 2px solid var(--cvx-blue);
  transform: rotate(45deg); transition: transform var(--cvx-dur) var(--cvx-ease); }
.cvx-dis-trigger:hover::after { transform: translateY(2px) rotate(45deg); }
.cvx-dis-trigger[aria-expanded="true"]::after,
.cvx-dis-trigger[aria-expanded="true"]:hover::after { transform: translateY(3px) rotate(-135deg); }
.cvx-dis-num { color: var(--cvx-blue-ink); font-size: 13.5px; font-weight: 600; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.cvx-dis-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cvx-surface-pale); color: var(--cvx-blue); transition: background-color var(--cvx-dur) var(--cvx-ease); }
.cvx-dis-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cvx-dis-trigger:hover .cvx-dis-icon { background: #e6eff9; }
.cvx-disease.is-open .cvx-dis-icon { background: #dbe8f7; }
.cvx-dis-text { display: grid; gap: 6px; }
.cvx-dis-name { color: var(--cvx-navy); font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.cvx-dis-trigger:hover .cvx-dis-name { color: var(--cvx-blue-ink); }
.cvx-dis-aka { color: var(--cvx-blue-ink); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; }

.cvx-dis-panel { overflow: hidden; }
.cvx-dis-panel-inner { max-width: 840px; padding: 0 0 32px 118px; } /* the text starts under the name */
.cvx-page .cvx-dis-panel p { max-width: none; margin: 0 0 16px; color: var(--cvx-ink); font-size: 17px; line-height: 1.72; }
.cvx-page .cvx-dis-panel p:last-child { margin-bottom: 0; }

@media (max-width: 991.98px) {
  .cvx-dis-cross { display: none; }
  .cvx-dis-trigger { grid-template-columns: 30px 40px minmax(0, 1fr); column-gap: 16px; padding-right: 48px; }
  .cvx-dis-icon { width: 40px; height: 40px; }
  .cvx-dis-panel-inner { padding-left: 102px; }
}
@media (max-width: 575.98px) {
  .cvx-disease { margin: 0 -12px; padding: 0 12px; }
  .cvx-disease::after { left: 12px; right: 12px; }
  .cvx-dis-trigger { grid-template-columns: 24px 38px minmax(0, 1fr); column-gap: 12px; min-height: 88px; padding: 22px 36px 22px 0; }
  .cvx-disease.is-open .cvx-dis-trigger { padding-top: 24px; }
  .cvx-dis-icon { width: 38px; height: 38px; }
  .cvx-dis-icon svg { width: 20px; height: 20px; }
  .cvx-dis-name { font-size: 19px; }
  .cvx-dis-trigger::after { right: 4px; }
  .cvx-dis-panel-inner { padding: 0 0 26px; }
  .cvx-page .cvx-dis-panel p { font-size: 16px; line-height: 1.7; }
}

/* ---------- 5. Booking CTA (#cat-vax-booking.cvx-cta) ----------
   An editorial closing statement, not a card: white, a thin Kalamunda-blue rule, then eyebrow + a modest
   heading (left ~40%) and the sentence + two text actions (right ~60%). */
.cvx-page .cvx-cta { padding: clamp(48px, 5vw, 64px) 0 clamp(72px, 7vw, 96px); background: #fff; }
.cvx-cta-inner { display: grid; grid-template-columns: minmax(0, 21fr) minmax(0, 29fr); gap: 20px clamp(40px, 5vw, 72px); align-items: start; padding-top: 40px; border-top: 1px solid var(--cvx-blue); }
.cvx-page .cvx-cta h2 { margin: 0; color: var(--cvx-navy); font-size: clamp(24px, 17px + 0.95vw, 30px); font-weight: 600; line-height: 1.22; letter-spacing: -0.018em; text-wrap: balance; }
.cvx-page .cvx-cta-body p { max-width: 34em; margin: 0; color: var(--cvx-ink); font-size: 17px; line-height: 1.65; }
.cvx-page .cvx-cta-body .cvx-cta-actions { display: flex; flex-wrap: wrap; gap: 4px 36px; margin-top: 14px; }
.cvx-cta-actions a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--cvx-blue-ink); font-size: 16px; font-weight: 600; text-decoration: none; }
.cvx-cta-actions a:hover { color: var(--cvx-navy); text-decoration: underline; text-underline-offset: 4px; }
.cvx-cta-actions .cvx-arrow { transition: transform var(--cvx-dur-fast) var(--cvx-ease); }
.cvx-cta-actions a:hover .cvx-arrow, .cvx-cta-actions a:focus-visible .cvx-arrow { transform: translateX(3px); }

/* ---------- Footer, this page only ----------
   Get In Touch directly above already shows the opening hours, so the shared footer's hours column is
   hidden here and the other three (clinic, Explore, Call Us) are rebalanced 5 : 3 : 4. CSS only: the shared
   footer markup (tools/sync-shell.js) and every other page keep their hours. */
.cvx-page #footer-1 .container > .row > [class*="col-"]:has(.kvh-hours) { display: none; }
@media (min-width: 768px) {
  .cvx-page #footer-1 .container > .row:first-child { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
  .cvx-page #footer-1 .container > .row:first-child > [class*="col-"] { max-width: none; }
  .cvx-page #footer-1 .footer-info { max-width: 360px; }
}

@media (max-width: 991.98px) {
  .cvx-cta-inner { grid-template-columns: minmax(0, 1fr); padding-top: 32px; }
  .cvx-page .cvx-cta h2 { font-size: 26px; }
}
@media (max-width: 575.98px) {
  .cvx-page .cvx-cta h2 { font-size: 24px; }
}
@media (max-width: 575.98px) {
  .cvx-page .cvx-cta-body p { font-size: 16px; }
  .cvx-page .cvx-cta-body .cvx-cta-actions { flex-direction: column; gap: 0; margin-top: 10px; }
}

/* ---------- Second motion layer (as on Dog Vaccination): staggered items, photo settle, playful details ----------
   Keyframe animations started when the parent block gets .is-in, so hover transitions on the same elements
   keep their own timing afterwards. All of it is off with reduced motion, where .cvx-motion is never added. */
@keyframes cvx-item-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cvx-photo-in { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes cvx-pop { 0% { opacity: 0; transform: scale(0.4); } 65% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cvx-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 45% { transform: rotate(11deg); } 70% { transform: rotate(-6deg); } }

/* staggered items: the disease rows (the list itself no longer fades as a block) and the footer columns */
.cvx-motion .cvx-dis-list.cvx-reveal { opacity: 1; transform: none; }
.cvx-motion .cvx-dis-list .cvx-disease,
.cvx-motion .cvx-reveal-group > * { opacity: 0; }
.cvx-motion .cvx-dis-list.is-in .cvx-disease,
.cvx-motion .cvx-reveal-group.is-in > * { animation: cvx-item-in 600ms var(--cvx-ease) both; }
.cvx-motion .cvx-dis-list.is-in .cvx-disease:nth-child(2) { animation-delay: 90ms; }
.cvx-motion .cvx-dis-list.is-in .cvx-disease:nth-child(3) { animation-delay: 180ms; }
.cvx-motion .cvx-dis-list.is-in .cvx-disease:nth-child(4) { animation-delay: 270ms; }
.cvx-motion .cvx-dis-list.is-in .cvx-disease:nth-child(5) { animation-delay: 360ms; }
.cvx-motion .cvx-reveal-group.is-in > :nth-child(2) { animation-delay: 100ms; }
.cvx-motion .cvx-reveal-group.is-in > :nth-child(3) { animation-delay: 200ms; }
.cvx-motion .cvx-reveal-group.is-in > :nth-child(4) { animation-delay: 300ms; }
/* the protection note follows the photo in */
.cvx-motion .cvx-why-visual .cvx-why-note { opacity: 0; }
.cvx-motion .cvx-why-visual.is-in .cvx-why-note { animation: cvx-item-in 600ms var(--cvx-ease) 380ms both; }

/* photos settle from a soft 8% zoom (backwards fill only, so hover zoom still works after) */
.cvx-motion .cvx-why-visual.is-in .cvx-why-photo img,
.cvx-motion .cvx-stage.is-in .cvx-stage-photo img { animation: cvx-photo-in 1200ms var(--cvx-ease) backwards; }

/* journey markers pop in as the line reaches them; their numbers count up (js) */
.cvx-motion .cvx-stage .cvx-stage-num { opacity: 0; }
.cvx-motion .cvx-stage.is-in .cvx-stage-num { animation: cvx-pop 520ms var(--cvx-ease) both; animation-delay: 150ms; }
@media (min-width: 992px) {
  .cvx-motion .cvx-stage.is-in[data-stage="2"] .cvx-stage-num { animation-delay: 650ms; }
  .cvx-motion .cvx-stage.is-in[data-stage="3"] .cvx-stage-num { animation-delay: 1150ms; }
}

/* the two paws give one small wiggle when they appear; the shield's paw again when the note is hovered */
.cvx-shield-paw { transform-box: fill-box; transform-origin: 50% 70%; }
.cvx-motion .cvx-journey-head.is-in .cvx-mark-paw { animation: cvx-wiggle 900ms ease-in-out 500ms; }
.cvx-motion .cvx-why-visual.is-in .cvx-shield { animation: cvx-wiggle 900ms ease-in-out 900ms; }
.cvx-why-note:hover .cvx-shield-paw { animation: cvx-wiggle 900ms ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  .cvx-hero-copy { animation: none; }
  .cvx-hero-photo img, .cvx-why-note:hover .cvx-shield-paw { animation: none; } /* no drift or hover wiggle */
  .cvx-crumbs a, .cvx-btn.btn { transition: none; }
  .cvx-motion .cvx-reveal { opacity: 1; transform: none; transition: none; }
  .cvx-cta-actions .cvx-arrow { transition: none; }
  .cvx-cta-actions a:hover .cvx-arrow, .cvx-cta-actions a:focus-visible .cvx-arrow { transform: none; }
  .cvx-disease, .cvx-dis-trigger, .cvx-dis-trigger::after, .cvx-dis-icon { transition: none; }
  .cvx-dis-trigger:hover::after { transform: rotate(45deg); }
  .cvx-motion .cvx-dis-list.cvx-reveal { transition-delay: 0s; }
  .cvx-motion .cvx-journey-line.cvx-reveal { clip-path: none; transition: none; }
  .cvx-motion .cvx-journey-track::after { opacity: 0.6; transition: none; }
  .cvx-stage-photo img, .cvx-stage-num { transition: none; }
  .cvx-stage-photo:hover img { transform: none; }
  .cvx-why-photo img, .cvx-shield-body, .cvx-why-note-link .cvx-arrow { transition: none; }
  .cvx-why-photo:hover img, .cvx-why-note-link a:hover .cvx-arrow, .cvx-why-note-link a:focus-visible .cvx-arrow { transform: none; }
}