/* =====================================================================
   Iona Mathieson — Veterinary Ophthalmology
   styles.css — token system + all global components
   ---------------------------------------------------------------------
   Built from Brand Guidelines V1.1 (June 2026) and the build brief.
   Single stylesheet. Class-scoped to avoid specificity clashes.
   Display: Commune (self-hosted). Body: Manrope (self-hosted).
   ===================================================================== */

@font-face{
  font-family:"Commune";
  src:url("../fonts/GC commune.woff2") format("woff2"),
      url("../fonts/GC commune.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* Manrope — self-hosted variable font (weights 400–800 in one file per subset).
   Was hotlinked from Google Fonts; serving it ourselves keeps visitor IPs off
   Google's servers (an undisclosed transfer under UK GDPR) and removes the only
   third-party render dependency. Subsets are latin + latin-ext, taken from the
   Google Fonts v20 build; the unicode-ranges are copied verbatim so the browser
   only fetches latin-ext when a page actually uses those glyphs. */
@font-face{
  font-family:"Manrope";
  src:url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Manrope";
  src:url("../fonts/manrope-latin-ext.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------- */
:root{
  /* Brand palette (exact, from brief §4) */
  --navy-darkest:#041A2F; /* headings, footer, deepest blocks */
  --navy:#042A4C;         /* primary brand, buttons, dark sections */
  --cyan:#0ADAFE;         /* accent, CTA emphasis, "eyeshine" glow */
  --cyan-pale:#C2F6FF;    /* soft section fills */
  --off-white:#F9F9F9;    /* page background */
  --grey:#E8E6E1;         /* cards, subtle section bands — soft stone */
  --ink:#0a2236;          /* readable body navy */
  --ink-soft:rgba(10,34,54,0.66);

  /* Derived / support */
  --cyan-ink:#066b7d;          /* darkened cyan that PASSES contrast on white */
  --line:rgba(4,42,76,0.12);   /* hairline borders on light — decorative dividers only */
  --line-interactive:rgba(4,42,76,0.45); /* ≥3:1 on off-white/grey — resting border for inputs, option cards, ghost buttons */
  --line-dark:rgba(255,255,255,0.14);
  --white:#ffffff;

  /* Typography */
  --font-display:"Commune", Georgia, "Times New Roman", serif;
  --font-weight-display:400;
  --font-body:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --sp-1:.5rem; --sp-2:.75rem; --sp-3:1rem; --sp-4:1.5rem;
  --sp-5:2rem;  --sp-6:3rem;   --sp-7:4rem;  --sp-8:6rem;

  /* Radii */
  --r-sm:10px; --r-md:18px; --r-lg:24px; --r-xl:28px; --r-pill:999px;

  /* Shadows (soft) */
  --shadow-sm:0 1px 2px rgba(4,26,47,.06), 0 2px 8px rgba(4,26,47,.05);
  --shadow-md:0 8px 24px rgba(4,26,47,.08), 0 2px 8px rgba(4,26,47,.05);
  --shadow-lg:0 20px 48px rgba(4,26,47,.14);
  --shadow-cyan:0 14px 40px rgba(10,218,254,.28);

  /* Layout */
  --container:1450px;
  --container-narrow:820px;
  --sticky-nav:5.5rem;
  --stack-step:0.7rem;

  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:.18s; --t-med:.32s; --t-slow:.7s;

  /* Focus ring. Measured: cyan on off-white was 1.60:1, on grey 1.35:1 — both well
     under the 3:1 WCAG UI-component minimum, so the outer ring is navy on light
     surfaces instead (10:1+). Cyan stays for --focus-dark, where it's already 10.45:1
     against navy-darkest. */
  --focus:0 0 0 3px var(--off-white), 0 0 0 6px var(--navy);
  --focus-dark:0 0 0 3px var(--navy-darkest), 0 0 0 6px var(--cyan);
}

/* ---------------------------------------------------------------------
   2. Reset & base
   --------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* Author rules like .btn{display:inline-flex} otherwise beat the UA [hidden] rule on
   specificity, so an element carrying both a component class and the hidden attribute
   renders anyway. Confirmed live: the triage result's [hidden][data-triage-cta] "Book a
   test" button was showing before any option was selected. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(1.125rem,1.08rem + .2vw,1.1875rem);
  line-height:1.65;
  color:var(--ink);
  background:var(--off-white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;display:block;height:auto}
ul,ol{margin:0;padding:0}
li{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea,button{font-family:inherit;font-size:inherit}
/* outline is transparent (not none) so forced-colors / Windows High Contrast mode still
   paints a system-supplied ring — box-shadow alone is invisible there */
:focus-visible{outline:3px solid transparent;outline-offset:3px;box-shadow:var(--focus);border-radius:6px}
.section--navy :focus-visible,
.section--navy-darkest :focus-visible,
.on-dark :focus-visible,
.footer :focus-visible,
.nav :focus-visible{box-shadow:var(--focus-dark)}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-5) 0}

/* ---------------------------------------------------------------------
   3. Typography
   --------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:var(--font-weight-display);
  font-synthesis:none;
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--navy-darkest);
  margin:0;
}
:is(.trust__big,.triage__result-test,.step__num,.price-row--head .price-row__name,.band__stat,.cred__year,.footer__name){
  font-weight:var(--font-weight-display);
  font-synthesis:none;
}
h1{font-size:clamp(2.4rem,1.8rem + 3vw,4rem)}
h2{font-size:clamp(1.9rem,1.5rem + 2vw,2.9rem)}
h3{font-size:clamp(1.25rem,1.1rem + .8vw,1.6rem)}
h4{font-size:clamp(1.05rem,1rem + .4vw,1.25rem)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong{font-weight:700}
small{font-size:.82em}
.lede{font-size:1.125rem;color:var(--ink-soft);line-height:1.55}

/* Inline link style for body copy */
.link{color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-color:var(--cyan);text-underline-offset:3px;text-decoration-thickness:2px;transition:color var(--t-fast)}
.link:hover{color:var(--cyan-ink)}
.section--navy .link,.section--navy-darkest .link,.on-dark .link,.footer .link{color:var(--cyan);text-decoration-color:rgba(10,218,254,.5)}

/* ---------------------------------------------------------------------
   4. Layout — container & sections
   --------------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.container--narrow{max-width:var(--container-narrow)}

.section{padding-block:clamp(3.5rem,2.5rem + 5vw,6.5rem)}
.section--tight{padding-block:clamp(2.5rem,2rem + 3vw,4rem)}
.section--light{background:var(--off-white)}
.section--grey{background:var(--grey)}
.section--cyan-pale{background:var(--cyan-pale)}
.section--navy{background:var(--navy);color:#eaf6ff}
.section--navy-darkest{background:var(--navy-darkest);color:#dcebf7}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4,
.section--navy-darkest h1,.section--navy-darkest h2,.section--navy-darkest h3,.section--navy-darkest h4{color:#fff}
.section--navy .lede,.section--navy-darkest .lede{color:rgba(255,255,255,.78)}
.on-dark{color:#eaf6ff}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark .lede{color:rgba(255,255,255,.78)}

/* ---------------------------------------------------------------------
   5. Accessibility helpers
   --------------------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:50%;top:-60px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:.6rem 1.1rem;border-radius:0 0 var(--r-sm) var(--r-sm);z-index:1000;transition:top var(--t-fast)}
.skip-link:focus{top:0}

/* ---------------------------------------------------------------------
   6. Section head (eyebrow + H2 + lede)
   --------------------------------------------------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-body);
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);margin:0 0 1rem;
}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--cyan)}
.section--navy .eyebrow,.section--navy-darkest .eyebrow,.on-dark .eyebrow{color:var(--cyan)}
.section--navy .eyebrow::before,.section--navy-darkest .eyebrow::before,.on-dark .eyebrow::before{background:var(--cyan)}

/* Pill badge — softer than eyebrow for hero intros */
.pill{
  display:inline-flex;align-items:center;
  font-family:var(--font-body);
  font-size:.82rem;font-weight:700;letter-spacing:.04em;
  color:var(--navy-darkest);
  background:rgba(4,42,76,.07);
  padding:.45rem .95rem;border-radius:var(--r-pill);
  margin:0 0 1.1rem;
}
.section-head{margin-bottom:clamp(1.25rem,1rem + 1.5vw,2rem)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head .lede{margin-top:1rem;font-size:1.125rem;line-height:1.55;color:var(--ink-soft)}

/* ---------------------------------------------------------------------
   7. Buttons
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:700;font-size:1rem;line-height:1;
  padding:.95rem 1.5rem;border-radius:var(--r-pill);
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
  white-space:nowrap;text-align:center;
}
.btn:hover{transform:none}
.btn:active{transform:none}
.btn svg{width:1.05em;height:1.05em}

.btn-primary{background:var(--cyan);color:var(--navy-darkest)}
.btn-primary:hover{background:#3ee6ff}

.btn-secondary{background:var(--navy);color:#fff}
.btn-secondary:hover{background:#063a66}

.btn-ghost{background:transparent;color:var(--navy);border:2px solid var(--line-interactive);}
.btn-ghost:hover{border-color:var(--navy);background:rgba(4,42,76,.04)}

/* On-dark variants */
.on-dark .btn-ghost,.section--navy .btn-ghost,.section--navy-darkest .btn-ghost,.footer .btn-ghost{color:#fff;border-color:var(--line-dark)}
.on-dark .btn-ghost:hover,.section--navy .btn-ghost:hover,.section--navy-darkest .btn-ghost:hover,.footer .btn-ghost:hover{border-color:var(--cyan);background:rgba(10,218,254,.08)}

.btn-block{width:100%}
.btn-lg{padding:1.1rem 1.9rem;font-size:1.05rem}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}

/* Quiet text link with arrow */
.arrow-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--navy);transition:gap var(--t-fast),color var(--t-fast)}
.arrow-link::after{content:"→";transition:transform var(--t-fast)}
.arrow-link:hover{color:var(--cyan-ink)}
.arrow-link:hover::after{transform:translateX(3px)}
.section--navy .arrow-link,.section--navy-darkest .arrow-link,.on-dark .arrow-link,.footer .arrow-link{color:var(--cyan)}

/* ---------------------------------------------------------------------
   8. Eyeshine — signature iris motif
   Concentric cyan rings + luminous core. Bold once (hero), quiet elsewhere.
   --------------------------------------------------------------------- */
.eyeshine{position:relative;aspect-ratio:1;border-radius:50%;flex:none;
  background:
    radial-gradient(circle at 50% 50%,
      var(--cyan) 0 6%,
      rgba(10,218,254,.0) 6% 13%,
      rgba(10,218,254,.55) 13% 17%,
      rgba(10,218,254,.0) 17% 27%,
      rgba(10,218,254,.32) 27% 31%,
      rgba(10,218,254,.0) 31% 44%,
      rgba(10,218,254,.18) 44% 47%,
      rgba(10,218,254,.0) 47% 62%,
      rgba(10,218,254,.10) 62% 64%,
      rgba(10,218,254,.0) 64% 100%);
}
.eyeshine::before{/* outer glow */
  content:"";position:absolute;inset:-18%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(10,218,254,.45),rgba(10,218,254,0) 65%);
  filter:blur(6px);z-index:-1;
  animation:breathe 6s ease-in-out infinite;
}
.eyeshine::after{/* luminous core */
  content:"";position:absolute;inset:42%;border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#fff,var(--cyan) 60%,rgba(10,218,254,.4));
  box-shadow:0 0 24px rgba(10,218,254,.8);
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}

.eyeshine--hero{width:min(70%,420px)}
/* Solid dot variant (practice review): the concentric "eyeshine" rings read as fuzzy at
   this size, so the dot markers in the triage options are a plain filled circle. The base
   .eyeshine ring gradient and both pseudo-element layers (outer glow + luminous core) are
   overridden off — `content:none` removes them outright rather than just hiding them.
   The eyeshine treatment itself is untouched for .eyeshine--hero, where it has room to read. */
.eyeshine--dot{
  width:7px;
  background:var(--cyan);
}
.eyeshine--dot::before,
.eyeshine--dot::after{content:none}

/* ---------------------------------------------------------------------
   9. Navigation
   --------------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:100;
  padding:.6rem clamp(1rem,3vw,2rem) 0;
  background:transparent;
  /* Padding is deliberately NOT transitioned. `.nav` is sticky and therefore in flow, so
     animating its padding relayouts everything below it on every scroll toggle. The 2.4px
     drop of the scrolled state is done with a transform on .nav__inner instead — same
     visual, composited only. */
}
.nav__inner{
  display:flex;align-items:center;gap:1.5rem;min-height:72px;padding-block:.6rem;
  /* backdrop-filter is intentionally absent from this list: transitioning a 20px blur
     re-filters the area behind the bar every frame. It snaps on while the background and
     border fade, which reads the same and costs nothing. */
  transition:background var(--t-med),border-color var(--t-med),border-radius var(--t-med),transform var(--t-med);
}
.nav.is-scrolled .nav__inner{transform:translateY(.15rem)}
.nav.is-scrolled .nav__inner{
  background:rgba(249,249,249,.72);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(4,42,76,.08);
  border-radius:var(--r-pill);
  box-shadow:none;
}
.nav__brand{display:inline-flex;align-items:center;margin-right:auto;min-width:0}
.nav__logo{display:block;height:56px;width:auto;flex:none;object-fit:contain;object-position:left center}
.nav__links{display:flex;align-items:center;gap:.4rem}
.nav__scrim{display:none} /* only relevant once .nav__links becomes the fixed mobile panel — see the ≤860px query */
.nav__link{padding:.55rem .8rem;border-radius:var(--r-pill);font-weight:600;font-size:.97rem;color:var(--ink);transition:background var(--t-fast),color var(--t-fast)}
.nav__link:hover{background:rgba(4,42,76,.06)}
.nav__link[aria-current="page"]{color:var(--navy);background:rgba(10,218,254,.14)}
.nav__book{margin-left:.6rem}            /* always-visible standing CTA */
/* flex:none — without it the flex row shrinks this below its declared 46px on narrow
   viewports (measured 38×46 at 375px), and it's the only nav affordance on mobile */
.nav__toggle{display:none;flex:none;width:46px;height:46px;border-radius:var(--r-sm);margin-left:.3rem;align-items:center;justify-content:center}
.nav__toggle:hover{background:rgba(4,42,76,.06)}
.nav__toggle-bars{position:relative;width:22px;height:2px;background:var(--navy-darkest);border-radius:2px;transition:background .01s var(--t-fast)}
.nav__toggle-bars::before,.nav__toggle-bars::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--navy-darkest);border-radius:2px;transition:transform var(--t-fast)}
.nav__toggle-bars::before{top:-7px}
.nav__toggle-bars::after{top:7px}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars{background:transparent}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before{transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------------------------------------------------------------------
   10. Hero
   --------------------------------------------------------------------- */
.hero{position:relative;background:var(--off-white);overflow-x:clip}
.hero__inner{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:end;
  padding-top:clamp(2.5rem,2rem + 5vw,5.5rem);
  padding-bottom:0;
}
.hero__copy{align-self:center;padding-bottom:clamp(2.5rem,2rem + 5vw,5.5rem)}
.hero__visual{
  position:relative;display:flex;align-items:flex-end;justify-content:flex-end;
  min-height:clamp(280px,40vw,520px);width:100%;
  margin-right:calc(-1 * clamp(1.1rem,4vw,2rem));
}
.hero__dog{
  width:auto;max-width:100%;
  max-height:clamp(300px,44vw,560px);height:auto;
  margin-left:auto;
  object-fit:contain;object-position:right bottom;
}
.hero__title{margin:.2rem 0 1.1rem}
.hero__support{font-size:1.125rem;color:var(--ink-soft);margin-bottom:1.8rem;line-height:1.55}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.3rem}
.hero__micro{display:flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--ink-soft);font-weight:600}
.hero__micro svg{width:1.05em;height:1.05em;color:var(--cyan-ink);flex:none}

/* ---------------------------------------------------------------------
   11. Trust strip
   --------------------------------------------------------------------- */
.trust{background:var(--navy-darkest);color:#fff}
.trust__inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding-block:clamp(1.8rem,1.4rem + 1.6vw,2.6rem)}
.trust__item{display:flex;flex-direction:column;gap:.25rem}
.trust__big{font-family:var(--font-display);font-size:1.4rem;color:var(--cyan)}
.trust__label{font-size:.9rem;color:rgba(255,255,255,.72);line-height:1.4}
.triage__actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}

/* ---------------------------------------------------------------------
   12. Triage tool
   --------------------------------------------------------------------- */
.triage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:start}
.triage__options{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
/* 5 options in a 2-column grid otherwise leaves an empty cell beside the last one —
   give it the full row deliberately instead */
.triage__options .triage__option:last-child:nth-child(odd){grid-column:1/-1}
.triage__option{display:flex;align-items:center;gap:.85rem;text-align:left;width:100%;
  padding:1rem 1.1rem;border-radius:var(--r-md);background:var(--white);border:2px solid var(--line-interactive);
  transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.triage__option:hover{border-color:rgba(10,218,254,.7);box-shadow:var(--shadow-sm)}
.triage__option[aria-pressed="true"]{border-color:var(--cyan);box-shadow:var(--shadow-md);background:#fff}
.triage__option-label{font-weight:700;color:var(--navy-darkest);line-height:1.25}
.triage__panel{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:clamp(1.5rem,1.2rem + 1.5vw,2.2rem);min-height:100%;box-shadow:var(--shadow-lg)}
.triage__panel .eyebrow{color:var(--cyan)}
.triage__result-test{font-family:var(--font-display);font-size:1.6rem;line-height:1.08;color:#fff;margin:.3rem 0 .2rem}
.triage__result-price{font-size:1.05rem;color:var(--cyan);font-weight:700;margin-bottom:1rem}
.triage__result-body{color:rgba(255,255,255,.82);margin-bottom:1.4rem}
.triage__placeholder{color:rgba(255,255,255,.6);font-style:italic}

/* ---------------------------------------------------------------------
   13. Cards & grids
   --------------------------------------------------------------------- */
.grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.4rem,1.1rem + 1vw,1.9rem);box-shadow:var(--shadow-sm);transition:box-shadow var(--t-med)}
.card--hover:hover{box-shadow:var(--shadow-md)}
.card--media{padding:0;overflow:hidden}
.card__media{overflow:hidden;background:var(--grey)}
.card__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.card__body{padding:clamp(1.2rem,1rem + 1vw,1.6rem)}
.card__icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:rgba(10,218,254,.14);color:var(--navy);margin-bottom:1rem}
.card__icon svg{width:26px;height:26px}
.card h3{margin-bottom:.5rem}
.card__price{font-weight:800;color:var(--navy);font-size:1.05rem}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.2rem;flex-wrap:wrap}

/* Service card with eyeshine dot */
.service-card .eyeshine--dot{margin-bottom:1rem}

/* Services — intro left, compact sticky stack right */
.section--services{padding-block:clamp(2.5rem,2rem + 3vw,4rem)}
.services-layout{
  display:grid;grid-template-columns:1fr 2fr;
  gap:clamp(1.5rem,3vw,2.5rem);align-items:start;
}
.services-layout__intro{
  position:sticky;top:var(--sticky-nav);align-self:start;
}
.services-layout__intro .lede{margin-top:.75rem}
.services-stack{
  display:flex;flex-direction:column;gap:0;
  padding-bottom:1.5rem;
}
.service-panel{
  position:sticky;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:1rem;align-items:center;
  padding:1rem 0;
  background:var(--grey);
  border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:0;box-shadow:none;
}
.service-panel + .service-panel{margin-top:-1px}
.service-panel:nth-child(1){top:var(--sticky-nav);z-index:1}
.service-panel:nth-child(2){top:calc(var(--sticky-nav) + var(--stack-step));z-index:2}
.service-panel:nth-child(3){top:calc(var(--sticky-nav) + var(--stack-step) * 2);z-index:3}
.service-panel:nth-child(4){top:calc(var(--sticky-nav) + var(--stack-step) * 3);z-index:4}
/* .service-panel__num (the 01/02/03/04 markers) removed per practice review. Deleted rather
   than kept-but-unused: the services are a catalogue, not a sequence, so the numbering was
   never carrying information — and at cyan-on-stone it measured 1.35:1, effectively invisible.
   The genuine ordered sequence on the homepage ("Four steps to a tested dog") keeps its
   .step__num, which is the case numbering actually earns. */
.service-panel h3{
  font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);
  margin-bottom:.4rem;
}
.service-panel p{
  font-size:1.125rem;line-height:1.55;color:var(--ink-soft);
  margin-bottom:0;
}
.service-panel__foot{
  display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;
  margin-top:.85rem;padding-top:0;border-top:0;
}
.service-panel__price{font-weight:800;color:var(--navy);font-size:.94rem}
.service-panel__media{
  border-radius:12px;overflow:hidden;background:var(--grey);
}
.service-panel__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
}

/* Split section — image + content side by side */
.split-section{display:grid;grid-template-columns:2fr 1fr;gap:clamp(2rem,4vw,4.5rem);align-items:start}
.split-section--media-left{grid-template-columns:1fr 2fr}
.split-section--media-left .split-section__media{order:-1}
.split-section--form-right{grid-template-columns:1fr 2fr}
.split-section__media{border-radius:var(--r-lg);overflow:hidden;background:var(--grey);align-self:start}
.split-section__media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;max-height:clamp(220px,26vw,340px)}
.split-section__content h2{margin-bottom:clamp(1.5rem,1rem + 2vw,2.2rem)}

/* ---------------------------------------------------------------------
   14. How it works — numbered steps
   --------------------------------------------------------------------- */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.5rem)}
.steps--list{display:grid;grid-template-columns:1fr;gap:0}
.step{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem 1.4rem 1.4rem;box-shadow:var(--shadow-sm)}
.step--list{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;padding:1.35rem 0;border:0;border-radius:0;box-shadow:none;background:transparent;border-bottom:1px solid var(--line)}
.step--list:last-child{border-bottom:0;padding-bottom:0}
.step--list:first-child{padding-top:0}
.step__num{counter-increment:step;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--cyan);font-family:var(--font-display);font-size:1.2rem;margin-bottom:1rem}
.step--list .step__num{width:40px;height:40px;font-size:1.05rem;margin-bottom:0}
.step__num::before{content:counter(step)}
.step h3{font-size:1.15rem;margin-bottom:.4rem}
.step--list h3{font-size:1.08rem;margin-bottom:.25rem}
.step p{font-size:1.125rem;color:var(--ink-soft)}
.step--list p{font-size:1.125rem}

/* ---------------------------------------------------------------------
   15. Pricing
   --------------------------------------------------------------------- */
.price-table{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.price-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:1.05rem clamp(1.1rem,2vw,1.6rem);border-bottom:1px solid var(--line)}
.price-row:last-child{border-bottom:0}
.price-row--head{background:var(--navy-darkest);color:#fff}
.price-row--head .price-row__name{color:#fff;font-family:var(--font-display);font-size:1.15rem}
.price-row--head .price-row__amt{color:#fff}
.price-row--featured{background:rgba(10,218,254,.07)}
.price-row__name{font-weight:700;color:var(--navy-darkest)}
.price-row__sub{display:block;font-weight:500;font-size:.88rem;color:var(--ink-soft);margin-top:.15rem}
.price-row__amt{font-weight:800;color:var(--navy);font-size:1.1rem;white-space:nowrap}
.price-row__amt small{font-weight:600;color:var(--ink-soft)}

.notes{display:grid;gap:.7rem;margin-top:1.5rem}
/* Dot via absolute positioning — NOT display:flex, which fragments mixed
   text/<strong>/<a> content into separate flex items that cannot shrink */
.note{position:relative;padding-left:1.4rem;font-size:1.125rem;color:var(--ink-soft)}
.note::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--cyan)}

/* ---------------------------------------------------------------------
   16. Audience / breeders band
   --------------------------------------------------------------------- */
.band{position:relative;overflow:hidden}
.band--breeders.section{
  overflow:visible;
  padding-bottom:0;
  background:
  radial-gradient(90% 120% at 100% 0%,rgba(10,218,254,.16),rgba(10,218,254,0) 60%),
  var(--navy);
}
.band__inner{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.5rem,3vw,3rem);align-items:center}
.band--breeders .band__inner{
  align-items:stretch;
  min-height:clamp(260px,32vw,360px);
}
.band--breeders .band__inner > div:first-child{
  align-self:center;
  padding-bottom:clamp(2.5rem,2rem + 3vw,4rem);
}
.band--breeders .band__aside{
  position:relative;align-self:end;
  min-height:100%;overflow:visible;
}
.band--breeders .band__dog{
  position:absolute;left:50%;bottom:0;
  transform:translateX(-50%);
  width:min(100%,420px);
  height:clamp(300px,42vw,480px);
  object-fit:contain;object-position:center bottom;
  display:block;pointer-events:none;
}
.band__stat{
  position:absolute;right:0;bottom:clamp(2.5rem,7vw,5rem);z-index:2;
  font-family:var(--font-display);font-size:clamp(2.5rem,2rem + 3vw,3.6rem);color:var(--cyan);line-height:1;
  background:rgba(4,26,47,.55);backdrop-filter:blur(8px);
  padding:1rem 1.2rem;border-radius:var(--r-md);border:1px solid var(--line-dark);
}
.band__stat small{display:block;font-family:var(--font-body);font-size:.95rem;color:rgba(255,255,255,.7);font-weight:600;margin-top:.4rem;letter-spacing:.02em}

/* ---------------------------------------------------------------------
   17. About / credentials
   --------------------------------------------------------------------- */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.about__media{border-radius:var(--r-lg);overflow:hidden;background:var(--grey)}
.about__photo{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.creds{display:grid;gap:.2rem}
.cred{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.cred:last-child{border-bottom:0}
.cred__year{font-family:var(--font-display);color:var(--cyan-ink);font-size:1.05rem;white-space:nowrap}
.cred__text{color:var(--ink);font-weight:500}
.cred__text strong{color:var(--navy-darkest)}

/* ---------------------------------------------------------------------
   17b. Inner page hero & service layouts
   --------------------------------------------------------------------- */
.page-hero{background:var(--off-white)}
/* Stone hero — replaces a removed banner; pair with a light/white following section.
   Pages using it also need `<body class="has-stone-hero">` so the strip behind the
   transparent sticky nav matches the hero instead of showing the off-white page bg. */
.page-hero--stone{background:var(--grey)}
/* The homepage uses `.hero`, a different component from `.page-hero`, so it needs its
   own modifier to take the same treatment. Both are single-class selectors, so this
   only beats `.hero{background:var(--off-white)}` (defined earlier) by source order —
   keep it below that rule. */
.hero--stone{background:var(--grey)}
body.has-stone-hero{background:var(--grey)}
.page-hero__inner{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,3vw,3rem);align-items:end;
  padding-top:clamp(2rem,1.5rem + 4vw,3.5rem);padding-bottom:0;
}
.page-hero__copy{align-self:center;padding-bottom:clamp(2rem,2rem + 3vw,3.5rem)}
.page-hero__visual{display:flex;align-items:flex-end;justify-content:center;min-height:clamp(200px,30vw,340px)}
.page-hero__dog{width:min(100%,400px);max-height:clamp(240px,34vw,380px);object-fit:contain;object-position:center bottom}
.page-hero__price{font-weight:800;color:var(--navy);font-size:.94rem;margin:.85rem 0 0}
.page-hero--compact .page-hero__inner{padding-top:clamp(1.5rem,1rem + 3vw,2.5rem)}
.page-hero--compact .page-hero__copy{padding-bottom:clamp(1.5rem,1rem + 3vw,2.5rem)}
.page-hero--compact .page-hero__dog{max-height:clamp(200px,28vw,300px)}
.page-hero--solo .page-hero__inner{grid-template-columns:1fr;max-width:52rem}
.page-hero--solo .page-hero__copy{padding-bottom:clamp(1.5rem,1rem + 3vw,2.5rem)}

/* UNUSED as of the hero-consistency pass — every rectangular-photo hero now uses the framed
   (rounded-corner) treatment instead. Kept, not deleted, so the circle is restorable from
   markup alone — same call as .trust and .cta-band__checks.
   Circular hero photo — for rectangular photography (not cut-outs): 1:1, centre-cropped, clipped to a circle */
.page-hero__visual--circle{align-items:center;padding-block:clamp(1.5rem,1rem + 2vw,2.5rem)}
.page-hero__visual--circle .page-hero__dog{
  width:clamp(240px,24vw,340px);aspect-ratio:1;height:auto;max-height:none;
  object-fit:cover;object-position:50% 30%;border-radius:50%;
  box-shadow:var(--shadow-md);
}

/* Featured service hero — framed photo + floating card (gonioscopy mock) */
.page-hero--featured .page-hero__inner{
  grid-template-columns:1fr 1fr;align-items:center;
  padding-top:clamp(2rem,1.5rem + 4vw,4rem);gap:clamp(2rem,3vw,4rem);
}
.page-hero--featured .page-hero__copy{padding-bottom:clamp(2rem,1.5rem + 3vw,3rem)}
.page-hero--featured h1{margin-bottom:1rem}
.page-hero--featured .lede{margin-bottom:1.6rem}
.page-hero--featured .hero__cta{margin-bottom:0}
.page-hero__price-block{margin-top:1.15rem}
.page-hero__price-line{font-size:.94rem;color:var(--navy);margin:0;line-height:1.4}
.page-hero__price-line strong{font-weight:800}
.page-hero__price-note{font-size:.88rem;color:var(--ink-soft);margin:.2rem 0 0}
.page-hero__trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:.65rem 1rem;
  margin-top:clamp(1.75rem,1.25rem + 2vw,2.5rem);
  padding-top:clamp(1.25rem,1rem + 1vw,1.75rem);border-top:1px solid var(--line);
}
.page-hero__trust-label{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
.page-hero__trust-badges{display:flex;flex-wrap:wrap;gap:.45rem}
.page-hero__trust-badges span{
  font-size:.78rem;font-weight:700;padding:.32rem .7rem;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);color:var(--navy);
}
.page-hero__visual--framed{
  position:relative;align-items:center;justify-content:center;
  min-height:auto;padding-bottom:clamp(1.5rem,1rem + 2vw,2.5rem);
}
.page-hero__frame{
  margin:0;width:100%;max-width:min(100%,520px);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--grey);
}
/* object-position is biased above centre for the same reason the circle variant is: dog
   photography puts the head in the upper half, and a centred crop decapitates tall sources.
   It only has an effect on PORTRAIT sources — a landscape source in a 1:1 frame is scaled to
   height and cropped horizontally, so the vertical value is inert for those. */
.page-hero__frame img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 30%;display:block}
/* UNUSED — the floating card that sat over the hero photo was removed from all three service
   heroes (practice review: "clunky"). Kept, not deleted, so it is restorable from markup alone.
   Note .page-hero__visual--framed keeps `position:relative` for this reason. */
.page-hero__card{
  position:absolute;left:clamp(-1rem,-2vw,-1.75rem);bottom:0;z-index:1;
  max-width:min(280px,calc(100% - 1.5rem));
  background:var(--white);border-radius:var(--r-md);padding:1.05rem 1.15rem;
  box-shadow:var(--shadow-md);border:1px solid var(--line);
}
.page-hero__card-eyebrow{
  display:flex;align-items:center;gap:.45rem;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .45rem;
}
.page-hero__card-eyebrow .eyeshine--dot{width:26px;flex:none}
.page-hero__card-title{
  font-family:var(--font-display);font-size:clamp(1.15rem,1.05rem + .5vw,1.35rem);
  line-height:1.15;margin:0 0 .35rem;color:var(--navy-darkest);
}
.page-hero__card-text{font-size:1.125rem;color:var(--ink-soft);margin:0;line-height:1.45}

.card--form{padding:clamp(1.25rem,1rem + 1.5vw,1.75rem);box-shadow:var(--shadow-md)}
.card--form h2{font-size:1.4rem;margin-bottom:1rem}
.contact-form{max-width:52rem}
/* Turnstile renders a fixed-size iframe; let it shrink rather than overflow the card on mobile */
.contact-form__turnstile{margin-bottom:1rem;max-width:100%;overflow:hidden}
/* Honeypot: off-screen for everyone, sighted or not — unlike .sr-only, a honeypot
   must stay unreachable/unreadable by assistive tech too, not just visually hidden */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

.service-section{padding-block:clamp(2rem,2rem + 3vw,3.5rem)}

.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.5rem)}
.card-grid--3{grid-template-columns:repeat(3,1fr)}
.card-grid .card--media{display:grid;grid-template-columns:120px 1fr;align-items:stretch;padding:0;overflow:hidden}
.card-grid .card--media .card__media img{aspect-ratio:1;min-height:100%;object-fit:cover}
.card-grid .card--media .card__body{display:flex;flex-direction:column;justify-content:center;padding:1rem 1.1rem}
.card-grid .card--media h3{font-size:1.1rem;margin-bottom:.35rem}
.card-grid .card--media p{font-size:1.125rem;color:var(--ink-soft);margin-bottom:0}
.card-grid .card__foot{margin-top:.85rem;flex-wrap:wrap}

.related-links{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.related-links a{font-weight:700;color:var(--navy);font-size:.94rem}
.related-links a:hover{color:var(--cyan-ink)}
.related-links__label{font-weight:700;color:var(--ink-soft);font-size:.94rem}

.resources-row{
  display:grid;grid-template-columns:minmax(0,1.75fr) auto;
  gap:clamp(1.25rem,2.5vw,2rem);align-items:stretch;
}
.bva-banner{
  display:flex;flex-direction:column;gap:clamp(.85rem,1rem + .5vw,1.15rem);
  background:var(--cyan-pale);border-radius:var(--r-lg);
  padding:clamp(1.25rem,1rem + 1.5vw,1.85rem);color:var(--navy-darkest);
}
.bva-banner__head{display:flex;align-items:flex-start;gap:.85rem}
.bva-banner__icon{
  flex:none;width:40px;height:40px;display:grid;place-items:center;
  background:#fff;border-radius:var(--r-sm);box-shadow:var(--shadow-sm);
}
.bva-banner__icon svg{width:18px;height:18px;color:var(--navy-darkest)}
.bva-banner__title{
  font-family:var(--font-display);font-size:clamp(1.35rem,1.15rem + .75vw,1.75rem);
  line-height:1.15;margin:0;padding-top:.1rem;
}
.bva-banner__text{font-size:1.125rem;line-height:1.55;color:var(--ink);margin:0}
.btn-navy{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.45rem;
  background:var(--navy-darkest);color:#fff;border:0;border-radius:var(--r-pill);
  padding:.72rem 1.2rem;font-size:.9rem;font-weight:700;font-family:var(--font-body);
  text-decoration:none;transition:background var(--t-fast);
}
.btn-navy:hover{background:var(--navy);color:#fff}
.btn-navy svg{width:14px;height:14px;flex:none}

.resources-card{
  flex:0 1 auto;width:auto;min-width:min(100%,260px);margin-left:0;
  align-self:stretch;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);
}
.resources-card__head{
  display:flex;align-items:center;
  padding:1rem 1.15rem .8rem;border-bottom:1px solid var(--line);
}
.resources-card__title{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy-darkest);margin:0;
}
.resources-card__list{list-style:none;margin:0;padding:0}
.resources-card__list li{border-bottom:1px solid var(--line)}
.resources-card__list li:last-child{border-bottom:0}
.resources-card__list a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.15rem;font-size:.94rem;font-weight:600;color:var(--navy-darkest);
  text-decoration:none;transition:background var(--t-fast);
}
.resources-card__list a:hover{background:var(--grey)}
.resources-card__list a svg{flex:none;width:16px;height:16px;color:var(--cyan-ink)}

.section-block-head{margin-bottom:clamp(1.5rem,1rem + 2vw,2.25rem)}
.section-block-head .lede{margin-bottom:0}
.lede--narrow{margin-bottom:clamp(1.5rem,1rem + 2vw,2.25rem)}

.page-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.page-actions--center{justify-content:center}
.prose-subhead{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);margin:0 0 1rem}
.prose-subhead--spaced{margin:2.5rem 0 1rem}
.text-soft{color:var(--ink-soft)}
.contact-email{display:inline-flex;align-items:center;gap:.5rem;color:var(--navy);font-weight:700;font-size:1.15rem;text-decoration:none;transition:color var(--t-fast)}
.contact-email:hover{color:var(--cyan-ink)}
.contact-legal-note{margin-top:var(--sp-5);font-size:.85rem;color:var(--ink-soft)}
.page-hero__micro{display:flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--ink-soft);font-weight:600;margin-top:1.1rem}
.page-hero__micro svg{width:1.05em;height:1.05em;color:var(--cyan-ink);flex:none}

/* ---------------------------------------------------------------------
   18. FAQ accordion
   --------------------------------------------------------------------- */
.faq{max-width:var(--container-narrow);margin-inline:auto}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;text-align:left;
  padding:1.3rem 0;font-weight:700;font-size:1.08rem;color:var(--navy-darkest)}
.faq__icon{flex:none;position:relative;width:22px;height:22px}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:50%;top:50%;background:var(--cyan-ink);border-radius:2px;transform:translate(-50%,-50%);transition:transform var(--t-med) var(--ease)}
.faq__icon::before{width:14px;height:2px}
.faq__icon::after{width:2px;height:14px}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__panel{overflow:hidden;height:0;transition:height var(--t-med) var(--ease)}
.faq__panel-inner{padding:0 0 1.4rem;color:var(--ink-soft)}

/* ---------------------------------------------------------------------
   19. CTA band
   --------------------------------------------------------------------- */
.section--cta{padding-top:clamp(1rem,.75rem + .5vw,1.25rem);padding-bottom:clamp(2rem,1.5rem + 3vw,3.5rem);background:var(--off-white)}
.cta-band{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:center;
  background:
    radial-gradient(80% 120% at 15% 50%,rgba(10,218,254,.14),rgba(10,218,254,0) 55%),
    radial-gradient(60% 100% at 85% 50%,rgba(10,218,254,.08),rgba(10,218,254,0) 50%),
    var(--navy-darkest);
  border-radius:var(--r-xl);padding:clamp(2rem,1.5rem + 3vw,3.5rem);text-align:left;
}
.cta-band__copy .eyebrow{margin-bottom:1rem}
.cta-band__copy h2{color:#fff;margin-bottom:1rem;text-align:left}
.cta-band__copy .lede{color:rgba(255,255,255,.78);margin-bottom:0;text-align:left}
.cta-band__reassure{color:rgba(255,255,255,.78);font-size:.9rem;line-height:1.5;margin:0 0 1.1rem}
.cta-band__panel{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);padding:clamp(1.25rem,1rem + 1.5vw,1.75rem);
}
.cta-band__checks{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:.7rem}
.cta-band__checks li{
  display:flex;align-items:flex-start;gap:.65rem;
  font-size:.94rem;font-weight:500;color:rgba(255,255,255,.88);line-height:1.45;
}
.cta-band__check-icon{
  flex:none;width:20px;height:20px;margin-top:.1rem;padding:3px;
  border-radius:50%;background:var(--cyan);color:var(--navy-darkest);stroke:var(--navy-darkest);
}
.cta-band__actions{display:flex;flex-direction:column;gap:.65rem}
/* flex-start (not center) so the ghost button's label lines up with the primary's —
   the primary is space-between (label left, chevron right) for its icon, so centering
   only the ghost button read as misaligned against it */
.cta-band__actions .btn{width:100%;justify-content:flex-start}
.cta-band__actions .btn-cta{justify-content:space-between}
.btn-cta{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem .85rem .85rem 1.5rem;text-align:left;
}
.btn-cta__icon{
  flex:none;width:2.25rem;height:2.25rem;display:grid;place-items:center;
  border-radius:50%;background:var(--navy-darkest);color:#fff;
  transition:transform var(--t-med) var(--ease);
}
.btn-cta:hover .btn-cta__icon{transform:scale(1.1)}
.btn-cta__icon svg{width:14px;height:14px}

/* ---------------------------------------------------------------------
   20. Footer
   --------------------------------------------------------------------- */
.footer{background:var(--navy-darkest);color:rgba(255,255,255,.72);padding-block:clamp(3rem,2.5rem + 2vw,4.5rem) 2rem}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.footer__brandline{margin-bottom:1rem}
.footer__logo{display:block;height:72px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.footer__blurb{font-size:1.125rem;line-height:1.6}
.footer__email{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;color:var(--cyan);font-weight:700}
.footer__col h3{color:#fff;font-family:var(--font-body);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:1rem}
.footer__col ul{display:grid;gap:.15rem}
/* display:block + padding-block gives each link a ~44px tap target (was ~25px tall,
   ~35px pitch measured — the only route to Contact/Terms/Privacy is this footer) */
.footer__col a{display:block;padding-block:.45rem;color:rgba(255,255,255,.72);transition:color var(--t-fast)}
.footer__col a:hover{color:var(--cyan)}
.footer__bottom{margin-top:clamp(2rem,3vw,3rem);padding-top:1.6rem;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:.86rem}
.footer__legal{line-height:1.55}
.footer__credit{color:rgba(255,255,255,.85);text-decoration:none;transition:color var(--t-fast)}
.footer__credit:hover{color:#fff}

/* ---------------------------------------------------------------------
   21. Forms
   --------------------------------------------------------------------- */
.field{margin-bottom:1.2rem}
.field > label,.fieldset__legend{display:block;font-weight:700;color:var(--navy-darkest);margin-bottom:.4rem;font-size:.95rem}
.field__hint{font-size:.85rem;color:var(--ink-soft);margin:-.1rem 0 .5rem}
/* Privacy notice at point of collection — sits under the submit button, so it
   needs breathing room above rather than the negative pull a field hint uses. */
.form-privacy{margin:.9rem 0 0;text-align:center;text-wrap:balance}
.req{color:#c0392b}
.input,.select,.textarea{
  width:100%;padding:.85rem 1rem;border:2px solid var(--line-interactive);border-radius:var(--r-sm);
  background:var(--white);color:var(--ink);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.input:hover,.select:hover,.textarea:hover{border-color:rgba(4,42,76,.25)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(10,218,254,.18)}
.textarea{min-height:130px;resize:vertical}
.input:user-invalid,.select:user-invalid,.textarea:user-invalid{border-color:#c0392b}
.field-error{color:#c0392b;font-size:.85rem;margin-top:.35rem;font-weight:600}
.fieldset{border:0;padding:0;margin:0 0 1.2rem}
.fieldset__legend{margin-bottom:.7rem}

/* Selectable option cards (radio/checkbox) */
.option-card{position:relative;display:flex;gap:.85rem;align-items:flex-start;padding:1rem 1.1rem;border:2px solid var(--line-interactive);border-radius:var(--r-md);background:var(--white);cursor:pointer;transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast)}
.option-card:hover{border-color:rgba(10,218,254,.6)}
.option-card input{position:absolute;opacity:0;width:0;height:0}
.option-card__mark{flex:none;width:22px;height:22px;border:2px solid var(--line-interactive);border-radius:50%;margin-top:2px;display:grid;place-items:center;transition:border-color var(--t-fast)}
.option-card__mark--sq{border-radius:6px}
.option-card__mark::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--cyan);transform:scale(0);transition:transform var(--t-fast)}
.option-card__mark--sq::after{border-radius:2px}
.option-card input:checked ~ .option-card__mark{border-color:var(--cyan)}
.option-card input:checked ~ .option-card__mark::after{transform:scale(1)}
.option-card:has(input:checked){border-color:var(--cyan);box-shadow:var(--shadow-cyan);background:rgba(10,218,254,.04)}
.option-card input:focus-visible ~ .option-card__mark{box-shadow:var(--focus)}
.option-card__body{flex:1}
.option-card__title{font-weight:700;color:var(--navy-darkest)}
.option-card__desc{font-size:.9rem;color:var(--ink-soft);margin-top:.15rem}
.option-card__price{font-weight:800;color:var(--navy);white-space:nowrap}

/* ---------------------------------------------------------------------
   22. Placeholder marker
   --------------------------------------------------------------------- */
/* Subtle on-page marker the client can spot */
.ph-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#7a5800;background:#fff3cf;border:1px solid #f0c869;border-radius:var(--r-pill);padding:.2rem .6rem;vertical-align:middle}
.ph-tag::before{content:"●";color:#e0a800;font-size:.7em}

/* ---------------------------------------------------------------------
   23. Misc components
   --------------------------------------------------------------------- */
.callout{display:flex;gap:.9rem;align-items:flex-start;background:var(--cyan-pale);border-radius:var(--r-md);padding:1.2rem 1.3rem;color:var(--navy-darkest)}
.callout svg{flex:none;width:24px;height:24px;color:var(--navy)}
.callout h2,.callout h3,.callout h4{margin-bottom:.3rem}

.tag-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.tag{font-size:.85rem;font-weight:700;color:var(--navy);background:rgba(10,218,254,.14);padding:.4rem .85rem;border-radius:var(--r-pill)}

.prose h2{margin:2.2rem 0 .8rem}
.prose h3{margin:1.8rem 0 .6rem}
.prose p,.prose ul{margin-bottom:1.1rem}
.prose ul{display:grid;gap:.5rem}
/* Bullet dot via absolute positioning — NOT display:flex, which fragments
   mixed text/<strong> content into separate wrapping flex items */
.prose ul li{position:relative;padding-left:1.6rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--cyan)}

.type-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.5rem)}
.type-card{
  display:grid;grid-template-columns:110px 1fr;align-items:stretch;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
.type-card__media{background:var(--grey)}
.type-card__media img{width:100%;height:100%;min-height:100%;object-fit:cover;aspect-ratio:1}
.type-card__body{display:flex;flex-direction:column;justify-content:center;padding:1rem 1.1rem;gap:.35rem}
.type-card h3{font-size:1.05rem;margin:0}
.type-card p{font-size:.94rem;color:var(--ink-soft);margin:0}
.type-card__subhead{font-family:var(--font-body);font-size:.92rem;font-weight:800;color:var(--navy-darkest);margin:.1rem 0 0}
.split-section .prose h2:first-child{margin-top:0}
.split-section .prose h2 + h2{margin-top:1.5rem}

/* ---------------------------------------------------------------------
   24. Scroll reveal (progressive enhancement: only hidden when JS on)
   --------------------------------------------------------------------- */
.js .reveal{opacity:0;transition:opacity .5s var(--ease)}
.js .reveal.is-visible{opacity:1}
.js .reveal[data-delay="1"]{transition-delay:.06s}
.js .reveal[data-delay="2"]{transition-delay:.12s}
.js .reveal[data-delay="3"]{transition-delay:.18s}

/* ---------------------------------------------------------------------
   25. Utilities
   --------------------------------------------------------------------- */
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}
.stack > * + *{margin-top:1rem}
.stack-lg > * + *{margin-top:1.6rem}
.flex{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.flex-between{display:flex;gap:1rem;justify-content:space-between;align-items:center;flex-wrap:wrap}
.maxw-narrow{max-width:var(--container-narrow)}
.nowrap{white-space:nowrap}

/* ---------------------------------------------------------------------
   26. Responsive
   --------------------------------------------------------------------- */
@media (max-width:1000px){
  .trust__inner{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1.4fr 1fr 1fr}
}
@media (max-width:860px){
  .nav.is-scrolled .nav__inner{border-radius:var(--r-lg)}
  .nav__links{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:.25rem;
    background:var(--off-white);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);
    padding:1rem clamp(1.1rem,4vw,2rem) 1.5rem;z-index:2;
    transform:translateY(-120%);transition:transform var(--t-med) var(--ease);max-height:calc(100dvh - 72px);overflow:auto}
  .nav__links.is-open{transform:translateY(0)}
  .nav__link{padding:.85rem 1rem;font-size:1.05rem;border-radius:var(--r-sm)}
  .nav__toggle{display:inline-flex}
  /* Dims the page behind the open mobile menu and gives it something to tap to
     dismiss — previously page content stayed visible/tappable under the panel */
  .nav__scrim{display:block;position:fixed;inset:72px 0 0 0;background:rgba(4,26,47,.4);
    opacity:0;pointer-events:none;transition:opacity var(--t-med) var(--ease);z-index:1}
  .nav__scrim.is-open{opacity:1;pointer-events:auto}
  .hero__inner{grid-template-columns:1fr;gap:2rem;padding-top:clamp(2rem,1.5rem + 4vw,3.5rem)}
  .hero__copy{padding-bottom:0;align-self:auto}
  /* Copy leads once stacked, matching every .page-hero on the site (see the identical
     rule/comment at .page-hero__visual below) — the homepage was the one exception,
     putting a decorative photo above the H1 and pushing the primary CTA to the fold. */
  .hero__visual{min-height:clamp(220px,55vw,340px);justify-content:center;margin-right:0}
  .hero__dog{max-height:clamp(220px,55vw,340px);margin-left:auto;margin-right:auto;object-position:center bottom}
  .services-layout{grid-template-columns:1fr;gap:1.5rem}
  .services-layout__intro{position:static}
  .service-panel{
    position:static;
    grid-template-columns:1fr;
    padding:.85rem 0;
    background:transparent;
  }
  .service-panel__media{order:-1}
  .page-hero__inner{grid-template-columns:1fr;gap:1.5rem;padding-top:clamp(1.5rem,1rem + 3vw,2.5rem)}
  .page-hero__copy{padding-bottom:0}
  /* Copy leads once stacked — the h1 should never be pushed below the photo */
  .page-hero__visual{order:0;min-height:clamp(180px,45vw,260px)}
  .page-hero__dog{max-height:clamp(180px,45vw,260px)}
  /* Must repeat grid-template-columns: the base `.page-hero--featured .page-hero__inner`
     rule is more specific than `.page-hero__inner` above, so it would keep 2 columns. */
  .page-hero--featured .page-hero__inner{grid-template-columns:1fr;align-items:start}
  /* The visual is a flex row on desktop (framed photo + absolutely-placed card).
     Once the card goes static below, it must stack under the photo, not beside it. */
  .page-hero__visual--framed{
    order:0;flex-direction:column;align-items:stretch;
    padding-bottom:clamp(1.5rem,1rem + 2vw,2.5rem);
    width:100%;
  }
  .page-hero__frame{max-width:none}
  /* Full width to the container padding + 4:3, not the square desktop crop —
     was also capped to 420px and centred, leaving visible space either side */
  .page-hero__frame img{aspect-ratio:4/3}
  .page-hero__card{
    position:relative;left:auto;bottom:auto;
    margin:clamp(-2.5rem,-4vw,-1.75rem) 1rem 0;max-width:none;
  }
  .cta-band{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr}
  .card-grid--3{grid-template-columns:1fr}
  .type-cards{grid-template-columns:1fr}
  .type-card{grid-template-columns:90px 1fr}
  .card-grid .card--media{grid-template-columns:100px 1fr}
  .split-section{grid-template-columns:1fr;gap:2rem}
  .split-section--media-left .split-section__media{order:0}
  /* Full width to the container padding — was capped to 420px and centred.
     max-height:none lets the existing 4:3 aspect-ratio (base rule) show through
     at full width instead of the desktop max-height clamp squashing it wider. */
  .split-section__media img{max-height:none}
  .resources-row{grid-template-columns:1fr}
  .resources-card{width:100%}
  .triage{grid-template-columns:1fr}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .card-grid--3{grid-template-columns:repeat(2,1fr)}
  .band__inner,.about{grid-template-columns:1fr;gap:2rem}
  .band--breeders .band__inner{min-height:auto}
  .band--breeders .band__inner > div:first-child{padding-bottom:2rem}
  .band--breeders .band__aside{min-height:clamp(220px,55vw,300px);align-self:end}
  .band--breeders .band__dog{
    position:absolute;left:50%;bottom:0;
    transform:translateX(-50%);
    height:clamp(260px,58vw,360px);
  }
  .band__stat{position:static;margin-top:1rem;justify-self:start}
  .summary{position:static}
}
@media (max-width:620px){
  .trust__inner{grid-template-columns:1fr 1fr;gap:1.2rem}
  .steps{grid-template-columns:1fr}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .grade-cards{grid-template-columns:1fr}
  .triage__options{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .price-row{flex-direction:column;gap:.25rem}
  .progress__step span:last-child{display:none}
  /* .btn is white-space:nowrap, so a long label ("Which test does my dog need?"
     needs 312px) cannot shrink to fit the CTA panel (226px at 375px) and forces
     the whole page to scroll sideways. Once buttons are full-width and stacked,
     let them wrap instead. */
  .btn-lg{padding-inline:1.35rem}
  .cta-band__actions .btn,
  .hero__cta .btn,
  .page-actions .btn{white-space:normal;line-height:1.3}
  /* Band + panel padding nest, costing ~110px of the 320px viewport — trim both
     so the buttons inside have room to breathe. */
  .cta-band{padding:clamp(1.25rem,1rem + 2vw,2rem)}
  .cta-band__panel{padding:1rem}
}
@media (max-width:440px){
  .nav__inner{gap:.75rem}
  .nav__logo{height:44px}
  /* Compact type/padding keeps the nav tight, but min-height holds the tap
     target at 44px (WCAG 2.5.8) — it renders 46px above this breakpoint. */
  .nav__book{padding:.7rem 1rem;font-size:.9rem;min-height:44px}
}
@media (max-width:380px){
  .footer__top{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------
   27. Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js .reveal{opacity:1;transform:none}
  .btn-cta:hover .btn-cta__icon{transform:none}
  .eyeshine::before{animation:none}
  .services-stack .service-panel{position:static}
}

/* ---------------------------------------------------------------------
   28. Booking terms page (terms.html only — every rule .terms- scoped)
   SYNC: .terms-glance summarises the ledger clauses; update both together.
   Appended after §27 so .terms-actions overrides .page-actions by order.
   --------------------------------------------------------------------- */
.terms-hero .page-hero__copy{padding-bottom:clamp(1rem,.75rem + 2vw,1.5rem)}
.terms-hero .page-hero__inner{padding-bottom:clamp(2rem,1.5rem + 3vw,3rem)}

/* At-a-glance card — white on the stone hero, one cell per clause */
.terms-glance{display:grid;grid-template-columns:repeat(2,1fr);background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.terms-glance__item{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.2rem;border-left:1px solid var(--line);transition:background var(--t-fast)}
.terms-glance__item:first-child{border-left:0}
a.terms-glance__item:hover{background:rgba(10,218,254,.07)}
.terms-glance__fig{font-family:var(--font-display);font-weight:var(--font-weight-display);font-synthesis:none;font-size:clamp(1.3rem,1.15rem + .6vw,1.6rem);line-height:1.05;color:var(--navy-darkest)}
.terms-glance__label{font-size:.88rem;font-weight:600;color:var(--ink-soft);line-height:1.4}
.terms-glance__note{font-size:.85rem;font-weight:600;color:var(--ink-soft);margin:.7rem 0 0}

/* Terms ledger — echoes the About page .cred rows (§17) */
.terms-item{display:grid;grid-template-columns:170px minmax(0,1fr);gap:clamp(1rem,2.5vw,2.5rem);padding-block:clamp(1.6rem,1.2rem + 1.5vw,2.4rem);border-top:1px solid var(--line);scroll-margin-top:calc(var(--sticky-nav) + 1rem)}
.terms-item:first-child{border-top:0;padding-top:.25rem}
.terms-item__when{margin:0;padding-top:.55rem;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:var(--cyan-ink)}
/* Zero-JS anchor feedback: the moment label deepens when its row is targeted */
.terms-item:target .terms-item__when{color:var(--navy)}
/* .terms-flow prefix out-specifies .prose h2 (0,2,1 vs 0,1,1) regardless of order */
.terms-flow .terms-item__body h2{margin:0 0 .7rem;font-size:clamp(1.35rem,1.2rem + .8vw,1.7rem)}
.terms-flow .terms-item__body > :last-child{margin-bottom:0}

/* Pending clauses — space deliberately held, not an error */
.terms-item--pending .terms-item__body{background:var(--grey);border-radius:var(--r-md);padding:1.1rem 1.3rem 1.15rem}
.terms-item--pending .terms-item__when{color:var(--ink-soft)}

/* Actions close the ledger like a signature line */
.terms-actions{border-top:1px solid var(--line);padding-top:clamp(1.5rem,1.25rem + 1vw,2rem);margin-top:clamp(2rem,1.5rem + 2vw,2.75rem)}

@media (max-width:860px){
  .terms-item{grid-template-columns:1fr;gap:.5rem}
  .terms-item__when{padding-top:0}
}
@media (max-width:700px){
  .terms-glance{grid-template-columns:1fr}
  .terms-glance__item{border-left:0;border-top:1px solid var(--line)}
  .terms-glance__item:first-child{border-top:0}
}