/* ==========================================================================
   Kalamunda Veterinary Hospital — service-page design system (css/kvh-service.css)
   Used on dog-vaccination.html (body.svc-page); load after css/kvh-site.css.
   Builds on the approved site tokens in css/kvh-site.css (navy, blue, type scale, section spacing)
   instead of redefining them. The header, footer and shared "Get In Touch" band are NOT styled here.

   1. Tokens          5. Media slot            9. Components carried over (facts, timeline,
   2. Type            6. CTA panel                accordion, alert, placeholders)
   3. Sections        7. Motion system        10. Responsive
   4. Layouts         8. Playful layer (dormant until used)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
.svc-page {
  /* Colour: the approved Kalamunda palette */
  --svc-navy: var(--kvh-navy);               /* #1a2a8c primary */
  --svc-navy-deep: #131f6b;                  /* hover on navy */
  --svc-blue: var(--kvh-blue);               /* #3d7fc4 royal/clinical blue: lines, icons, large text */
  --svc-blue-ink: #2f6db3;                   /* the same blue, darkened just enough for small text (5.3:1) */
  --svc-surface-pale: #f1f6fb;               /* pale blue surface (= --kvh-soft on white) */
  --svc-surface-neutral: #f7f8fa;            /* soft neutral surface */
  --svc-ink: #1f2937;                        /* body text */
  --svc-muted: #5b6474;                      /* secondary text (6:1 on white) */
  --svc-line: #e3e8f0;                       /* borders and rules */
  --svc-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px rgba(26, 42, 140, 0.06);
  /* Urgent information only (the after-care alert) */
  --svc-alert-bg: #fffbeb;
  --svc-alert-line: #b45309;
  --svc-alert-ink: #92400e;
  /* Shape and space */
  --svc-radius: 8px;                         /* controls, panels */
  --svc-radius-media: 12px;                  /* images (the site's media radius) */
  --svc-radius-feature: 16px;                /* the one large feature panel (CTA) */
  --svc-measure: 38em;                       /* comfortable paragraph width */
  --svc-section-y: var(--kvh-section-y);     /* 80 / 72 / 56px, from the site */
  --svc-gap: clamp(32px, 4vw, 72px);         /* between layout columns */
  /* Motion */
  --svc-dur-fast: 180ms;
  --svc-dur: 260ms;
  --svc-dur-slow: 350ms;
  --svc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --svc-rise: 6px;                           /* small hover/settle movements */
  --svc-reveal-rise: 22px;                   /* scroll entrances */
  --svc-reveal-dur: 700ms;
}

/* ---------- 2. Type: the site's Inter scale, with an eyebrow / heading / lead / body hierarchy ---------- */
.svc-section .svc-eyebrow { margin: 0 0 12px; color: var(--svc-blue-ink); font-size: var(--kvh-eyebrow-size); font-weight: 600; letter-spacing: var(--kvh-eyebrow-ls); line-height: 1.4; text-transform: uppercase; }
.svc-section h2 { margin: 0; color: var(--svc-navy); font-size: var(--kvh-h2-size); font-weight: 600; line-height: var(--kvh-heading-lh); letter-spacing: -0.02em; text-wrap: balance; }
.svc-section h3 { margin: 0 0 8px; color: var(--svc-navy); font-size: var(--kvh-name-size); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.svc-head { margin-bottom: 24px; }
.svc-layout--stack > :first-child .svc-head { max-width: 760px; margin-bottom: var(--kvh-head-gap); }
.svc-section p { max-width: var(--svc-measure); margin: 0 0 16px; color: var(--svc-ink); font-size: 17px; line-height: var(--kvh-body-lh); }
.svc-section p:last-child { margin-bottom: 0; }
.svc-section .svc-lead { font-size: 19px; line-height: 1.55; }
.svc-section a:not(.btn) { color: var(--svc-blue-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.svc-section a:not(.btn):hover { color: var(--svc-navy); }

/* ---------- 3. Sections and surfaces (not a strict white/grey alternation) ---------- */
.svc-section { position: relative; padding: var(--svc-section-y) 0; }
.svc-surface-white { background: #fff; }
.svc-surface-pale { background: var(--svc-surface-pale); }
.svc-surface-neutral { background: var(--svc-surface-neutral); }
.svc-section--cta { padding: clamp(56px, 6vw, 88px) 0; }   /* white space above and below: the CTA is its own chapter */

/* ---------- 4. Layouts ---------- */
.svc-layout { display: grid; gap: 40px var(--svc-gap); align-items: start; }
.svc-layout > * { min-width: 0; }
.svc-layout--stack { grid-template-columns: minmax(0, 1fr); gap: 0; }

/* ---------- 6. CTA panel: the page's one large navy feature ---------- */
/* A quiet navy panel: message left, actions right, each action set against its line of text (the button
   level with the heading, the call link level with the paragraph). The wrappers use display: contents so
   their children join one grid. */
.svc-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eyebrow eyebrow" "head primary" "body call";
  column-gap: clamp(40px, 6vw, 96px); align-items: center; padding: clamp(30px, 3.2vw, 44px) clamp(28px, 5vw, 64px);
  border-radius: var(--svc-radius-feature); background: linear-gradient(120deg, #18278a 0%, var(--svc-navy) 60%, #1c2e93 100%); }
.svc-cta-copy, .svc-cta .svc-head, .svc-cta-actions { display: contents; }
.svc-section .svc-cta .svc-eyebrow { grid-area: eyebrow; margin-bottom: 12px; color: #b9d3f0; }
.svc-cta h2 { grid-area: head; max-width: 16em; color: #fff; font-size: clamp(28px, 20px + 1.2vw, 36px); line-height: 1.15; letter-spacing: -0.02em; }
.svc-section .svc-cta p:not(.svc-eyebrow) { grid-area: body; max-width: 32em; margin: 14px 0 0; color: rgba(255, 255, 255, 0.86); }
.svc-cta .svc-btn-on-dark.btn { grid-area: primary; justify-self: start; }
.svc-cta .svc-btn-on-dark.btn:hover, .svc-cta .svc-btn-on-dark.btn:focus-visible { background: #fff; border-color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(9, 15, 60, 0.25); }
.svc-cta .svc-btn-on-dark.btn:focus-visible { outline-color: #fff !important; } /* kvh-site.css forces a blue .btn focus ring with !important; white is needed on navy (as #banner-2 does) */
.svc-cta a:hover .svc-arrow, .svc-cta a:focus-visible .svc-arrow { transform: translateX(2px); }
/* the call: the natural alternative, a white text link rather than a second button */
.svc-section .svc-cta .svc-cta-call { grid-area: call; justify-self: start; align-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; padding-left: 2px;
  color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; }
.svc-section .svc-cta .svc-cta-call:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.svc-cta .svc-cta-call:focus-visible { outline-color: #fff; }
.svc-cta-phone { color: #b9d3f0; font-size: 0.85em; }

/* Buttons: solid navy on light backgrounds; white with navy text on dark ones */
.svc-btn.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border: 2px solid transparent; border-radius: var(--svc-radius); font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; transition: background-color var(--svc-dur) var(--svc-ease), border-color var(--svc-dur) var(--svc-ease), color var(--svc-dur) var(--svc-ease), transform var(--svc-dur-fast) var(--svc-ease); }
.svc-btn-primary.btn { background: var(--svc-navy); border-color: var(--svc-navy); color: #fff; }
.svc-btn-primary.btn:hover, .svc-btn-primary.btn:focus-visible { background: var(--svc-navy-deep); border-color: var(--svc-navy-deep); color: #fff; }
.svc-btn-on-dark.btn { background: #fff; border-color: #fff; color: var(--svc-navy); }
.svc-btn-on-dark.btn:hover, .svc-btn-on-dark.btn:focus-visible { background: #e8eef7; border-color: #e8eef7; color: var(--svc-navy); }
.svc-btn-ghost.btn { background: transparent; border-color: rgba(255, 255, 255, 0.85); color: #fff; }
.svc-btn-ghost.btn:hover, .svc-btn-ghost.btn:focus-visible { background: #fff; border-color: #fff; color: var(--svc-navy); }

/* ---------- Hero (.svc-hero) ----------
   A navy colour field with the copy on the left and a photograph filling the right ~48%. The photo's
   left edge is a soft curved fade into the navy (CSS mask), so the two read as one composition. The
   breadcrumb lives inside the hero. (The spinning seal is a homepage-only detail.) Dog Vaccination's own
   hook, so no template hero rules apply. */
.svc-hero { position: relative; z-index: 0; display: flex; align-items: center; min-height: 580px; overflow: hidden; isolation: isolate; background: linear-gradient(120deg, var(--svc-navy-deep) 0%, var(--svc-navy) 58%, #1f3399 100%); color: #fff; }
.svc-hero-inner { position: relative; z-index: 2; }
.svc-hero-copy { max-width: 560px; padding: 56px 0 72px; }

.svc-hero-photo { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; width: 52%; margin: 0; }
.svc-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%); }

.svc-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; }
.svc-crumbs li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.82); }
.svc-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); }
.svc-crumbs a { position: relative; color: #fff; text-decoration: none; transition: color var(--svc-dur-fast) var(--svc-ease); }
.svc-crumbs a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } /* 44px tap area */
.svc-crumbs a:hover { color: #cfe2f7; text-decoration: underline; text-underline-offset: 3px; }
.svc-crumbs [aria-current] { color: rgba(255, 255, 255, 0.82); }

.svc-hero .svc-hero-eyebrow { 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-transform: uppercase; }
.svc-hero h1 { margin: 0; color: #fff; font-size: clamp(40px, 22px + 2.6vw, 60px); font-weight: 600; line-height: 1.06; letter-spacing: -0.025em; }
.svc-hero .svc-hero-lede { max-width: 30em; margin: 18px 0 0; color: rgba(255, 255, 255, 0.9); font-size: 19px; line-height: 1.55; }
.svc-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.svc-hero .svc-btn-ghost.btn { border-color: rgba(255, 255, 255, 0.6); }
.svc-hero .svc-btn-ghost.btn:hover, .svc-hero .svc-btn-ghost.btn:focus-visible { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; }
.svc-hero .svc-arrow { font-size: 0.8em; }


/* Entrance: copy rises 8px in sequence; the photo settles from a 3% zoom. CSS only, once, on load. */
@keyframes svc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes svc-settle { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.svc-hero-copy > * { animation: svc-rise var(--svc-dur-slow) var(--svc-ease) both; }
.svc-hero-copy > :nth-child(2) { animation-delay: 40ms; }
.svc-hero-copy > :nth-child(3) { animation-delay: 80ms; }
.svc-hero-copy > :nth-child(4) { animation-delay: 140ms; }
.svc-hero-copy > :nth-child(5) { animation-delay: 200ms; }
.svc-hero-photo img { transform-origin: 78% 55%; animation: svc-settle 600ms var(--svc-ease) both, svc-drift 22s ease-in-out 600ms infinite alternate; } /* then a very slow drift towards the corgi */
@keyframes svc-drift { from { transform: scale(1); } to { transform: scale(1.06); } }

/* ---------- 7. Motion system ----------
   .svc-reveal       entrance: content fades up 22px as it scrolls into view (js/kvh-service.js adds
                     .svc-motion + .is-in). Hidden only while .svc-motion is on, i.e. only when the script
                     runs; it reveals anything that has come into view, including what the reader jumped past.
   .svc-reveal-group the group itself stays put; its children arrive one after another.
   .svc-lift         hover: lifts 2px.
   photos            hover: scale to 1.02-1.025 inside their rounded frame (the frame clips them).
   .svc-arrow        an arrow icon inside a link nudges 3px on hover. */
.svc-motion .svc-reveal { opacity: 0; transform: translateY(var(--svc-reveal-rise)); transition: opacity var(--svc-reveal-dur) var(--svc-ease), transform var(--svc-reveal-dur) var(--svc-ease); }
.svc-motion .svc-reveal.is-in { opacity: 1; transform: none; }
.svc-lift { transition: transform var(--svc-dur) var(--svc-ease), box-shadow var(--svc-dur) var(--svc-ease); }
.svc-lift:hover { transform: translateY(-2px); box-shadow: var(--svc-shadow); }
.svc-arrow { display: inline-block; transition: transform var(--svc-dur-fast) var(--svc-ease); }
a:hover .svc-arrow, a:focus-visible .svc-arrow { transform: translateX(3px); }

/* ---------- 8. Playful layer (defined, not yet placed) ----------
   Small discoveries only, at most one or two per page:
   .svc-motif-paw    a small paw print in the brand blue, e.g. beside a heading or in a panel corner.
   .svc-motif-line   a short hand-drawn underline under one key phrase. */
.svc-page {
  --svc-paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='21' rx='7' ry='6'/%3E%3Cellipse cx='7' cy='12' rx='3' ry='4'/%3E%3Cellipse cx='13' cy='7' rx='3' ry='4'/%3E%3Cellipse cx='19' cy='7' rx='3' ry='4'/%3E%3Cellipse cx='25' cy='12' rx='3' ry='4'/%3E%3C/svg%3E");
  --svc-line-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M2 6c20-4 38 3 58-1s38-3 58 1' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.svc-motif-paw { display: inline-block; width: 20px; height: 20px; background: var(--svc-blue); opacity: 0.35; -webkit-mask: var(--svc-paw) center / contain no-repeat; mask: var(--svc-paw) center / contain no-repeat; vertical-align: middle; }
.svc-motif-line { position: relative; white-space: nowrap; }
.svc-motif-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.18em; height: 0.3em; background: var(--svc-blue); opacity: 0.5; -webkit-mask: var(--svc-line-squiggle) center / 100% 100% no-repeat; mask: var(--svc-line-squiggle) center / 100% 100% no-repeat; }

/* ---------- 9. Components carried over from the previous iteration (to be refined in later steps) ---------- */
/* Placeholders the clinic must confirm (tools/check-site.js lists them): quiet grey dashed outline */
.svc-confirm { display: inline; padding: 1px 6px; border: 1px dashed #9aa3af; border-radius: 4px; background: transparent; color: var(--svc-muted); font-family: inherit; font-size: 0.82em; font-weight: 500; line-height: 1.6; letter-spacing: 0; text-transform: none; }

/* ---------- "Protecting your dog" (.svc-why): editorial intro + one information panel ----------
   Left: eyebrow, a larger heading, the lead paragraph and the community-health callout (paw icon).
   Right: ONE panel, portrait photo | four facts as a ruled sequence with small blue icons.
   One background device: a faint pale-blue organic shape behind the panel. */
.svc-why { padding: clamp(64px, 7.5vw, 112px) 0; overflow: hidden; }
.svc-why-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 48px clamp(40px, 5vw, 80px); align-items: center; }
.svc-why-intro .svc-head { margin-bottom: 24px; }
.svc-why-intro h2 { font-size: clamp(32px, 20px + 2vw, 48px); line-height: 1.12; letter-spacing: -0.025em; }
.svc-why-intro .svc-lead { max-width: 30em; }
.svc-why-callout { display: flex; gap: 16px; align-items: flex-start; max-width: 34em; margin-top: 28px; padding: 18px 22px 18px 18px; border: 1px solid #dbe7f5; border-radius: 12px; background: var(--svc-surface-pale); }
.svc-why-callout-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--svc-blue); font-size: 17px; box-shadow: 0 1px 2px rgba(26, 42, 140, 0.08); }
.svc-section .svc-why-callout p { margin: 0; color: var(--svc-ink); font-size: 16.5px; line-height: 1.6; }

.svc-why-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); overflow: hidden; border: 1px solid var(--svc-line); border-radius: var(--svc-radius-feature); background: #fff; box-shadow: var(--svc-shadow); }
.svc-motion .svc-why-panel.svc-reveal { transition-delay: 80ms; }  /* settles just after the intro */
/* the one background device: a faint organic shape behind the panel (outside it, so it isn't clipped by the panel) */
.svc-why-grid { position: relative; }
.svc-why-grid::before { content: ""; position: absolute; z-index: 0; top: -56px; right: -96px; bottom: -64px; left: 52%; border-radius: 46% 54% 42% 58% / 58% 44% 56% 42%; background: var(--svc-surface-pale); pointer-events: none; }
.svc-why-intro, .svc-why-panel { position: relative; z-index: 1; }
.svc-why-photo { min-height: 100%; margin: 0; background: #e9edf3; }
.svc-why-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.svc-why-facts { margin: 0; padding: 10px 28px; }
.svc-fact { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 18px 0; border-top: 1px solid var(--svc-line); }
.svc-fact:first-child { border-top: 0; }
.svc-fact-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--svc-surface-pale); color: var(--svc-blue); font-size: 16px; transition: background-color var(--svc-dur) var(--svc-ease), color var(--svc-dur) var(--svc-ease); }
.svc-fact:hover .svc-fact-icon { background: #e1edf9; color: var(--svc-navy); }
.svc-fact dt { margin: 2px 0 4px; color: var(--svc-navy); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; }
.svc-fact dd { margin: 0; color: var(--svc-ink); font-size: 15.5px; line-height: 1.6; }

/* ---------- "Vaccination through life" (.svc-journey): three life stages as one editorial sequence ----------
   A centred intro, then three open columns (no cards): numbered marker, photo, text. One fine, gently
   curving blue line joins the markers; it draws in from the left when the stages come into view.
   Photos sit at slightly different heights (middle one higher). Below 992px it becomes a vertical
   journey with the line running down the left. Background: one soft radial wash behind the stages. */
.svc-journey { --svc-journey-gap: clamp(32px, 3.6vw, 56px); padding: clamp(72px, 8vw, 120px) 0;
  background: radial-gradient(ellipse 72% 58% at 50% 72%, #e5eef9 0%, rgba(229, 238, 249, 0) 100%), var(--svc-surface-pale); }
.svc-journey-head { max-width: 760px; margin: 0 auto clamp(48px, 5vw, 72px); text-align: center; }
.svc-journey-head h2 { font-size: clamp(32px, 20px + 2vw, 48px); line-height: 1.12; letter-spacing: -0.025em; }
.svc-section .svc-journey-head .svc-eyebrow { margin-left: auto; margin-right: auto; }
/* the one small paw: centred between two hairlines under the heading */
.svc-journey-mark { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; }
.svc-journey-mark::before, .svc-journey-mark::after { content: ""; width: 36px; height: 1px; background: var(--svc-blue); opacity: 0.45; }
.svc-journey-mark .svc-motif-paw { width: 18px; height: 18px; opacity: 0.55; }

.svc-journey-track { position: relative; }
.svc-journey-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--svc-journey-gap); margin: 0; padding: 0; list-style: none; }
/* the line runs from the first marker's centre to the last's, behind the markers */
.svc-journey-line { position: absolute; top: 8px; left: calc((100% - 2 * var(--svc-journey-gap)) / 6); width: calc((100% - 2 * var(--svc-journey-gap)) * 2 / 3 + 2 * var(--svc-journey-gap)); height: 24px; overflow: visible; fill: none; stroke: var(--svc-blue); stroke-width: 1.5; stroke-linecap: round; opacity: 0.6; pointer-events: none; }
.svc-journey-line path { vector-effect: non-scaling-stroke; }
/* after 03 the line carries on and fades out: care continues every year */
.svc-journey-track::after { content: ""; position: absolute; top: 20px; left: calc((100% - 2 * var(--svc-journey-gap)) * 5 / 6 + 2 * var(--svc-journey-gap) + 20px); width: 96px; height: 1.5px; background: linear-gradient(90deg, var(--svc-blue), rgba(61, 127, 196, 0)); opacity: 0.6; pointer-events: none; }
.svc-motion .svc-journey-line.svc-reveal { opacity: 0.6; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1100ms var(--svc-ease) 120ms; }
.svc-motion .svc-journey-line.svc-reveal.is-in { clip-path: inset(0 0 0 0); }
.svc-motion .svc-journey-track::after { opacity: 0; transition: opacity 500ms var(--svc-ease) 1150ms; } /* the tail appears once the line has drawn to 03 */
.svc-motion .svc-journey-track:has(.svc-journey-line.is-in)::after { opacity: 0.6; }

.svc-stage { position: relative; min-width: 0; }
.svc-motion .svc-stage.svc-reveal:nth-child(2) { transition-delay: 150ms; }
.svc-motion .svc-stage.svc-reveal:nth-child(3) { transition-delay: 300ms; }
.svc-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 var(--svc-blue); border-radius: 50%; background: #fff; color: var(--svc-blue-ink); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.svc-stage-photo { position: relative; margin: 36px 0 0; overflow: hidden; border-radius: var(--svc-radius-media); background: #e9edf3; aspect-ratio: 4 / 5; }
.svc-stage:nth-child(2) .svc-stage-photo { margin-top: 16px; } /* the middle stage sits a little higher */
.svc-stage-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--svc-dur-slow) var(--svc-ease); }
.svc-stage:nth-child(1) .svc-stage-photo img { object-position: 38% 50%; }
.svc-stage:nth-child(2) .svc-stage-photo img { object-position: 62% 50%; }
.svc-stage-photo:hover img { transform: scale(1.025); }
.svc-stage-body { padding-top: 26px; }
.svc-section .svc-stage-when { margin: 0 0 8px; color: var(--svc-blue-ink); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; }
.svc-stage-when .svc-confirm { letter-spacing: 0; }
.svc-stage h3 { margin-bottom: 10px; }
.svc-section .svc-stage-body p:not(.svc-stage-when) { max-width: 34em; margin-bottom: 0; font-size: 16px; line-height: 1.65; }
.svc-section .svc-stage-body .svc-stage-link { margin-top: 6px; }
.svc-stage-link a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.svc-stage-link .svc-arrow { font-size: 0.8em; }

/* ---------- Diseases (.svc-dis): one two-column list of accordion rows ----------
   Clinical and calm: rows separated by hairlines, not boxes. Each row: a small outline icon in a pale
   circle, the name, the short summary and its label (always visible), and a blue chevron; the detail
   opens underneath (height + opacity, js/kvh-service.js). Open rows get a very pale blue wash.
   One background detail: a faint rounded medical cross in the space beside the heading. */
.svc-dis { padding: clamp(72px, 8vw, 120px) 0; }
.svc-dis > .container { position: relative; }
.svc-dis > .container::before { content: ""; position: absolute; top: -8px; right: 15px; width: 136px; height: 136px; background: var(--svc-surface-pale); opacity: 0.6; pointer-events: none;
  -webkit-mask: var(--svc-cross) center / contain no-repeat; mask: var(--svc-cross) center / contain no-repeat; }
.svc-dis { --svc-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6a1 1 0 0 1 1 1v5h5a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-5v5a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-5H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h5V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }
.svc-dis-head { position: relative; max-width: 540px; }
.svc-dis-head h2 { font-size: clamp(30px, 20px + 1.6vw, 42px); line-height: 1.14; letter-spacing: -0.022em; }
.svc-dis .svc-layout--stack { row-gap: clamp(40px, 4.5vw, 56px); }
.svc-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the two columns share one top rule, so they read as one list */
.svc-acc-columns { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; border-top: 1px solid var(--svc-line); }
.svc-motion .svc-acc-columns.svc-reveal { transition-delay: 80ms; }
.svc-acc-list { margin: 0; padding: 0; list-style: none; }
.svc-acc { position: relative; margin: 0 -16px; padding: 0 16px; scroll-margin-top: 110px; transition: background-color var(--svc-dur) var(--svc-ease); }
.svc-acc::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: var(--svc-line); } /* divider aligned with the text, not the hover wash */
.svc-acc:hover { background: #fafcfe; }
.svc-acc.is-open { background: #f6f9fd; }
.svc-acc .svc-acc-heading { margin: 0; font-family: inherit; font-size: inherit; font-weight: inherit; }
.svc-acc-trigger { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-items: start; width: 100%; min-height: 44px; padding: 22px 40px 22px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: padding var(--svc-dur) var(--svc-ease); }
.svc-acc.is-open .svc-acc-trigger { padding-top: 26px; }
.svc-acc-trigger:focus { outline: none; }
.svc-acc-trigger:focus-visible { outline: 2px solid var(--svc-blue-ink); outline-offset: 4px; border-radius: var(--svc-radius); }
/* chevron: down when closed, rotates up when open; nudges 2px on hover */
.svc-acc-trigger::after { content: ""; position: absolute; top: 31px; right: 6px; width: 9px; height: 9px; border-right: 2px solid var(--svc-blue); border-bottom: 2px solid var(--svc-blue); transform: rotate(45deg); transition: transform var(--svc-dur) var(--svc-ease); }
.svc-acc.is-open .svc-acc-trigger::after { top: 39px; }
.svc-acc-trigger:hover::after { transform: translateY(2px) rotate(45deg); }
.svc-acc-trigger[aria-expanded="true"]::after,
.svc-acc-trigger[aria-expanded="true"]:hover::after { transform: rotate(-135deg); }
.svc-acc-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--svc-surface-pale); color: var(--svc-blue); transition: background-color var(--svc-dur) var(--svc-ease); }
.svc-acc-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svc-acc-trigger:hover .svc-acc-icon { background: #e6eff9; }
.svc-acc.is-open .svc-acc-icon { background: #dbe8f7; }
.svc-acc-text { display: grid; gap: 4px; padding-top: 7px; }
.svc-acc-name { color: var(--svc-navy); font-size: var(--kvh-name-size); font-weight: 600; line-height: 1.3; }
.svc-acc-sum { color: var(--svc-ink); font-size: 15.5px; line-height: 1.55; }
.svc-acc-label { margin-top: 2px; color: var(--svc-muted); font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.svc-acc-trigger:hover .svc-acc-name { color: var(--svc-blue-ink); }
.svc-acc-panel { overflow: hidden; }
.svc-acc-panel-inner { padding: 0 0 26px 56px; }
.svc-acc-panel p { font-size: 16px; }
.svc-acc-panel p:last-child { margin-bottom: 0; }
.svc-acc-panel .svc-acc-aka { color: var(--svc-muted); font-size: 14.5px; }

/* ---------- After vaccination care (.svc-care): a calm split after the clinical Diseases list ----------
   Photograph (left, ~4:3) | eyebrow, heading, lead, paragraph and the advice note (right), the text block
   centred on the photo. The soft neutral surface with one pale-blue tonal wash behind the photograph. */
.svc-care { padding: clamp(72px, 8vw, 120px) 0;
  background: radial-gradient(ellipse 46% 70% at 24% 50%, rgba(225, 235, 247, 0.75) 0%, rgba(225, 235, 247, 0) 100%), var(--svc-surface-neutral); }
.svc-care-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: "photo ." "photo head" "photo body" "photo ."; column-gap: clamp(40px, 5vw, 80px); }
.svc-care-head { grid-area: head; }
.svc-care-body { grid-area: body; }
.svc-care-photo { grid-area: photo; align-self: center; margin: 0; overflow: hidden; border-radius: var(--svc-radius-feature); background: #e9edf3; aspect-ratio: 4 / 3; }
.svc-care-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--svc-dur-slow) var(--svc-ease); }
.svc-care-photo:hover img { transform: scale(1.02); }
.svc-motion .svc-care-head.svc-reveal, .svc-motion .svc-care-body.svc-reveal { transition-delay: 80ms; }
.svc-section .svc-care-body .svc-lead { margin-bottom: 14px; color: #111827; font-weight: 500; }
.svc-care-body p { max-width: 34em; }

/* The advice note: warm, noticeable, not an alarm. Pale amber, a thin warm border, a small "!" mark. */
.svc-section .svc-alert { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; max-width: 34em; margin: 28px 0 0; padding: 18px 20px 10px 18px; border: 1px solid #f3dfb2; border-radius: var(--svc-radius-media); background: var(--svc-alert-bg); color: var(--svc-alert-ink); }
.svc-alert-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -2px; border: 1.5px solid var(--svc-alert-line); border-radius: 50%; color: var(--svc-alert-line); font-size: 12px; }
.svc-section .svc-alert p { margin: 0; color: var(--svc-alert-ink); font-size: 16px; line-height: 1.5; }
.svc-alert strong { font-weight: 600; }
.svc-section .svc-alert a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--svc-alert-ink); font-weight: 700; white-space: nowrap; }
.svc-section .svc-alert a:hover { color: #78350f; }
.svc-section .svc-alert a:focus-visible { outline: 2px solid var(--svc-alert-line); outline-offset: 2px; border-radius: 4px; }
.svc-alert .svc-arrow { font-size: 0.8em; }

/* ---------- 7b. Second motion layer: staggered items, photo settle, playful details ----------
   Keyframe animations (not transitions), 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 .svc-motion is never added. */
@keyframes svc-item-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes svc-photo-in { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes svc-pop { 0% { opacity: 0; transform: scale(0.4); } 65% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes svc-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 45% { transform: rotate(11deg); } 70% { transform: rotate(-6deg); } }

/* staggered items */
.svc-motion .svc-why-panel .svc-fact,
.svc-motion .svc-acc-columns .svc-acc,
.svc-motion .svc-reveal-group > * { opacity: 0; }
.svc-motion .svc-why-panel.is-in .svc-fact,
.svc-motion .svc-acc-columns.is-in .svc-acc,
.svc-motion .svc-reveal-group.is-in > * { animation: svc-item-in 600ms var(--svc-ease) both; }
.svc-motion .svc-why-panel.is-in .svc-fact:nth-child(1) { animation-delay: 250ms; }
.svc-motion .svc-why-panel.is-in .svc-fact:nth-child(2) { animation-delay: 350ms; }
.svc-motion .svc-why-panel.is-in .svc-fact:nth-child(3) { animation-delay: 450ms; }
.svc-motion .svc-why-panel.is-in .svc-fact:nth-child(4) { animation-delay: 550ms; }
.svc-motion .svc-acc-columns.svc-reveal { opacity: 1; transform: none; } /* the rows arrive instead of the block */
.svc-motion .svc-acc-columns.is-in .svc-acc:nth-child(2) { animation-delay: 120ms; }
.svc-motion .svc-acc-columns.is-in .svc-acc:nth-child(3) { animation-delay: 240ms; }
.svc-motion .svc-acc-columns.is-in .svc-acc-list + .svc-acc-list .svc-acc:nth-child(1) { animation-delay: 60ms; }
.svc-motion .svc-acc-columns.is-in .svc-acc-list + .svc-acc-list .svc-acc:nth-child(2) { animation-delay: 180ms; }
.svc-motion .svc-acc-columns.is-in .svc-acc-list + .svc-acc-list .svc-acc:nth-child(3) { animation-delay: 300ms; }
.svc-motion .svc-reveal-group.is-in > :nth-child(2) { animation-delay: 100ms; }
.svc-motion .svc-reveal-group.is-in > :nth-child(3) { animation-delay: 200ms; }
.svc-motion .svc-reveal-group.is-in > :nth-child(4) { animation-delay: 300ms; }

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

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

/* the two paws give one small wiggle when they appear, and the callout paw again on hover */
.svc-why-callout-icon i, .svc-journey-mark .svc-motif-paw { display: inline-block; }
.svc-motion .svc-why-intro.is-in .svc-why-callout-icon { animation: svc-wiggle 900ms ease-in-out 700ms; } /* the circle on arrival, the paw itself on hover */
.svc-motion .svc-journey-head.is-in .svc-motif-paw { animation: svc-wiggle 900ms ease-in-out 500ms; }
.svc-why-callout:hover .svc-why-callout-icon i { animation: svc-wiggle 900ms ease-in-out; }

/* ---------- 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 columns (clinic, Explore, Call Us) are rebalanced. CSS only: the
   shared footer markup (tools/sync-shell.js) and every other page keep their hours. */
.svc-page #footer-1 .container > .row > [class*="col-"]:has(.kvh-hours) { display: none; }
@media (min-width: 768px) {
  .svc-page #footer-1 .container > .row:first-child { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
  .svc-page #footer-1 .container > .row:first-child > [class*="col-"] { max-width: none; }
  .svc-page #footer-1 .footer-info { max-width: 360px; }
}

/* ---------- Reduced motion: no entrances, hovers or transitions ---------- */
@media (prefers-reduced-motion: reduce) {
  .svc-motion .svc-reveal { opacity: 1; transform: none; transition: none; }
  .svc-hero-photo img, .svc-why-callout:hover .svc-why-callout-icon i { animation: none; } /* no drift or hover wiggle */
  .svc-hero-copy > *, .svc-hero-photo img { animation: none; }
  .svc-fact-icon { transition: none; }
  .svc-motion .svc-why-panel.svc-reveal { transition-delay: 0s; }
  .svc-motion .svc-stage.svc-reveal { transition-delay: 0s; }
  .svc-motion .svc-journey-line.svc-reveal { clip-path: none; transition: none; }
  .svc-stage-photo img { transition: none; }
  .svc-stage-photo:hover img { transform: none; }
  .svc-crumbs a { transition: none; }
  .svc-lift, .svc-arrow, .svc-btn.btn, .svc-acc-trigger::after { transition: none; }
  .svc-cta .svc-btn-on-dark.btn:hover, .svc-cta .svc-btn-on-dark.btn:focus-visible, .svc-cta a:hover .svc-arrow, .svc-cta a:focus-visible .svc-arrow { transform: none; }
  .svc-acc, .svc-acc-trigger, .svc-acc-icon { transition: none; }
  .svc-motion .svc-care-head.svc-reveal, .svc-motion .svc-care-body.svc-reveal { transition-delay: 0s; }
  .svc-care-photo img { transition: none; }
  .svc-care-photo:hover img { transform: none; }
  .svc-acc-trigger:hover::after { transform: rotate(45deg); }
  .svc-motion .svc-acc-columns.svc-reveal { transition-delay: 0s; }
  .svc-lift:hover, a:hover .svc-arrow, a:focus-visible .svc-arrow { transform: none; }
}

/* ---------- 10. Responsive (the site's breakpoints: 991.98 / 767.98 / 575.98px) ---------- */
/* "Protecting your dog": side by side from 1200px; below that the intro sits above a full-width panel */
@media (max-width: 1199.98px) {
  .svc-why-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-why-intro { max-width: 720px; }
  .svc-why-grid::before { top: 38%; left: 18%; right: -120px; }
  .svc-why-panel { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
@media (max-width: 575.98px) {
  .svc-why-callout { padding: 16px; gap: 14px; }
  .svc-section .svc-why-callout p { font-size: 16px; }
  .svc-why-panel { grid-template-columns: minmax(0, 1fr); }
  .svc-why-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .svc-why-photo img { object-position: 60% 50%; }
  .svc-why-facts { padding: 4px 20px 8px; }
  .svc-fact { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 16px 0; }
  .svc-fact-icon { width: 36px; height: 36px; font-size: 15px; }
  .svc-why-grid::before { top: 45%; left: 30%; right: -90px; bottom: -40px; }
}
/* "Vaccination through life": three columns from 992px; below that a vertical journey down the left */
@media (max-width: 991.98px) {
  .svc-journey-line, .svc-journey-track::after { display: none; }
  .svc-stage-num { margin: 0; } /* vertical journey: the marker sits in its own 40px column */
  .svc-journey-stages { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .svc-stage { display: grid; grid-template-columns: 40px minmax(0, 5fr) minmax(0, 7fr); column-gap: 28px; align-items: start; }
  .svc-stage:not(:last-child)::before { content: ""; position: absolute; top: 48px; bottom: -48px; left: 19.5px; width: 1px; background: var(--svc-blue); opacity: 0.45; }
  .svc-stage-photo, .svc-stage:nth-child(2) .svc-stage-photo { margin-top: 0; }
  .svc-stage-body { padding-top: 6px; }
}
@media (max-width: 575.98px) {
  .svc-journey-head { text-align: left; }
  .svc-journey-mark { justify-content: flex-start; }
  .svc-journey-mark::before { display: none; }
  .svc-journey-stages { row-gap: 44px; }
  .svc-stage { grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; }
  .svc-stage-num { width: 36px; height: 36px; font-size: 12px; }
  .svc-stage:not(:last-child)::before { top: 44px; bottom: -40px; left: 17.5px; }
  .svc-stage-photo { grid-column: 2; aspect-ratio: 4 / 3; }
  .svc-stage:nth-child(2) .svc-stage-photo img { object-position: 50% 22%; }
  .svc-stage:nth-child(3) .svc-stage-photo img { object-position: 50% 14%; }
  .svc-stage-body { grid-column: 2; padding-top: 20px; }
}
/* After vaccination care: side by side from 992px; tablets put the photograph first, phones the heading first */
@media (max-width: 991.98px) {
  .svc-care { background: radial-gradient(ellipse 80% 40% at 50% 26%, rgba(225, 235, 247, 0.75) 0%, rgba(225, 235, 247, 0) 100%), var(--svc-surface-neutral); }
  .svc-care-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "photo" "head" "body"; }
  .svc-care-photo { margin-bottom: 40px; }
}
@media (max-width: 575.98px) {
  .svc-care-grid { grid-template-areas: "head" "photo" "body"; }
  .svc-care-photo { margin-bottom: 28px; border-radius: var(--svc-radius-media); }
  .svc-section .svc-alert { padding: 16px 16px 8px 14px; column-gap: 12px; }
}
/* Hero: deliberately composed per range rather than collapsing */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .svc-hero { min-height: 560px; }
  .svc-hero-photo { width: 46%; }
  .svc-hero-copy { max-width: 470px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .svc-hero { min-height: 500px; margin-top: 70px; } /* clears the fixed 70px mobile header, as .hero-section does in responsive.css */
  .svc-hero-photo { width: 44%; }
  .svc-hero-copy { max-width: 370px; padding: 48px 0 64px; }
  .svc-hero .svc-hero-lede { font-size: 17px; }
  .svc-hero-photo img { object-position: 95% 50%; }
}
@media (max-width: 767.98px) {
  /* Phones: copy first on the navy field, then the dog, its top edge curving softly into the navy. */
  .svc-hero { flex-direction: column; align-items: stretch; min-height: 0; margin-top: 70px; } /* fixed mobile header */
  .svc-hero-inner { order: 1; }
  .svc-hero-copy { max-width: none; padding: 32px 0 28px; }
  .svc-crumbs ol { margin-bottom: 22px; }
  .svc-hero .svc-hero-lede { font-size: 17px; }
  .svc-hero-actions { margin-top: 24px; }
  /* Phones: the image is drawn 160% wide and shifted left inside its 280px frame, a closer crop that
     keeps the corgi the subject of the strip; the curved fade is centred on the visible part. */
  .svc-hero-photo { position: relative; order: 2; width: 100%; height: 280px; overflow: hidden; }
  .svc-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%); }
}
@media (max-width: 991.98px) {
  .svc-acc-columns { grid-template-columns: minmax(0, 1fr); }
  .svc-dis-head { max-width: 600px; }
  .svc-cta { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "eyebrow eyebrow" "head head" "body body" "primary call"; column-gap: 24px; }
  .svc-cta .svc-btn-on-dark.btn { margin-top: 28px; }
  .svc-section .svc-cta .svc-cta-call { align-self: end; margin-top: 0; }
}
@media (max-width: 575.98px) {
  .svc-section p { font-size: 16px; }
  .svc-section .svc-lead { font-size: 18px; }
  .svc-hero-actions .svc-btn.btn { flex: 1 1 100%; }
  .svc-cta { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "head" "body" "primary" "call"; padding: 32px 24px 22px; }
  .svc-cta .svc-btn-on-dark.btn { justify-self: stretch; margin-top: 24px; }
  .svc-section .svc-cta .svc-cta-call { margin-top: 6px; }
  .svc-acc { margin: 0 -12px; padding: 0 12px; }
  .svc-acc::after { left: 12px; right: 12px; }
  .svc-acc-trigger { grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; padding: 18px 32px 18px 0; }
  .svc-acc.is-open .svc-acc-trigger { padding-top: 22px; }
  .svc-acc-icon { width: 38px; height: 38px; }
  .svc-acc-icon svg { width: 20px; height: 20px; }
  .svc-acc-trigger::after { top: 27px; right: 4px; }
  .svc-acc.is-open .svc-acc-trigger::after { top: 35px; }
  .svc-acc-panel-inner { padding: 0 0 22px 52px; }
  .svc-dis > .container::before { display: none; } /* no free space beside the heading on phones */
}