/* Willowmere Veterinary, rebuilt.

   professional      : Poppins, 4/8/12/16/24/32 spacing, explicit interaction
                       states. Its stock palette is an electronics-shop yellow,
                       which would look wrong here, so the tokens are a green-blue system.
   modern-web-design : fluid clamp() type and space scales, AAA contrast,
                       IntersectionObserver reveals, no carousels or autoplay.
   frontend-design   : geometric sans headings over a serif body is the
                       deliberate inversion; the signature is the availability
                       panel, not another hero photograph.

   Bright and clean: aqua-washed surfaces, deep teal structure, mint and sky
   accents. The accents are bright, so they carry decoration and large type
   only; text and buttons use the deep teal. Every text pair clears 7:1. */

:root {
  /* surfaces: bright, aqua-washed, not warm */
  --paper: #FFFFFF;
  --mist: #F1FAF8;        /* page base */
  --mist-2: #DFF3EF;      /* mint band */
  --sky-tint: #E0F0FA;    /* blue band and icon chips */
  --tint-soft: #CFEAE4;   /* dividers, quiet fills */

  /* ink */
  --ink: #0F2429;         /* 15.1:1 on mist */
  --ink-soft: #2F4F55;    /* 8.3:1 on mist, 7.6:1 on mist-2 */

  /* structure */
  --teal: #085553;        /* primary action + dark bands, 8.6:1 with white */
  --teal-2: #063F3E;      /* hover */
  --teal-deep: #094F42;   /* links, eyebrows, prices. 8.9:1 on mist, 8.2:1 on both tints */

  /* accents. Bright by design, so decoration and large type only. */
  --spring: #2ED3B7;      /* mint-green rules and markers */
  --sky: #22A7F0;         /* blue markers */
  --mint-light: #CFF4EC;  /* 7.3:1 on teal, small text on dark */

  --line: #D3E9E4;
  --line-strong: #A9D4CC;

  --display: "Poppins", system-ui, sans-serif;
  --body: "Source Serif 4", Georgia, serif;
  --ui: "Poppins", system-ui, sans-serif;

  /* modern-web-design fluid scales */
  --step--1: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --step-0: clamp(1.0625rem, 1.03rem + 0.2vw, 1.15rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3: clamp(1.9rem, 1.55rem + 1.75vw, 2.9rem);
  --step-4: clamp(2.4rem, 1.8rem + 3vw, 4.2rem);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
  --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --t: 200ms;
  --t-slow: 700ms;

  --sh-1: 0 1px 2px rgba(15, 36, 41, 0.04), 0 8px 20px -10px rgba(15, 36, 41, 0.10);
  --sh-2: 0 2px 6px rgba(15, 36, 41, 0.05), 0 22px 44px -20px rgba(15, 36, 41, 0.16);
  --sh-3: 0 4px 12px rgba(15, 36, 41, 0.06), 0 40px 80px -28px rgba(15, 36, 41, 0.22);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink);
  background: var(--mist);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-6); }
.narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--sp-6); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- type: geometric sans headings, serif body ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; }
h1 { font-size: var(--step-4); line-height: 1.04; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.25; }
.lead { font-size: var(--step-1); color: var(--ink-soft); max-width: 50ch; line-height: 1.5; }
p { max-width: 66ch; }

.eyebrow {
  display: inline-block; font-family: var(--ui);
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal-deep); margin-bottom: var(--sp-4);
}
.eyebrow.on-dark { color: var(--mint-light); }

/* ---------- buttons: explicit states, generous targets ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--ui); font-size: 16px; font-weight: 600;
  padding: 16px 28px; border-radius: var(--r-sm); min-height: 56px;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-primary { background: var(--teal); color: var(--mist); box-shadow: var(--sh-1); }
.btn-primary:hover { background: var(--teal-2); box-shadow: var(--sh-2); }
.btn-accent { background: var(--teal-deep); color: var(--mist); box-shadow: var(--sh-1); }
.btn-accent:hover { background: #052E2C; box-shadow: var(--sh-2); }
.btn-outline { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line-strong); }
.btn-outline:hover { box-shadow: inset 0 0 0 2px var(--teal); }
.btn-bone { background: var(--mist); color: var(--teal); box-shadow: var(--sh-1); }
.btn-bone:hover { background: var(--paper); }
.btn-ghost-dark { background: transparent; color: var(--mist); box-shadow: inset 0 0 0 2px rgba(241,250,248,0.45); }
.btn-ghost-dark:hover { background: rgba(241,250,248,0.12); }
.btn-wide { width: 100%; }

.link { color: var(--teal-deep); font-weight: 600; border-bottom: 2px solid var(--tint-soft); padding-bottom: 1px; }
.link:hover { border-bottom-color: var(--teal-deep); }

/* levels-style reassurance under an action */
.under { font-family: var(--ui); font-size: 14.5px; color: var(--ink-soft); margin-top: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.under svg { width: 16px; height: 16px; color: var(--teal-deep); flex: none; }
.under.on-dark { color: var(--mist-2); }
.under.on-dark svg { color: var(--mint-light); }

/* ---------- header ---------- */
.util { background: var(--teal); color: var(--mist); }
.util-in { display: flex; align-items: center; justify-content: center; gap: var(--sp-2) var(--sp-6); flex-wrap: wrap; padding: 6px var(--sp-6); font-family: var(--ui); font-size: 15px; text-align: center; }
.util a { color: var(--mist); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border-bottom: 1px solid rgba(241,250,248,0.4); }
.util .sep { color: var(--mint-light); }

.nav { position: sticky; top: 0; z-index: 50; background: rgba(241,250,248,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--t) var(--ease); }
.nav.stuck { border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); height: 80px; }

.brand { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; }
.brand-mark { width: 40px; height: 40px; border-radius: 50%; background: var(--teal); display: grid; place-items: center; flex: none; }
.brand-mark svg { width: 21px; height: 21px; color: var(--mint-light); }
.brand-txt b { display: block; font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.brand-txt span { display: block; font-family: var(--ui); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-top: 1px; }

.nav-links { display: flex; gap: var(--sp-6); font-family: var(--ui); font-size: 15px; font-weight: 500; }
.nav-links a { color: var(--ink-soft); padding: 8px 0; border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); border-bottom-color: var(--spring); }

.burger { display: none; width: 48px; height: 48px; border-radius: var(--r-sm); place-items: center; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-nav { display: none; flex-direction: column; padding: var(--sp-2) var(--sp-6) var(--sp-6); background: var(--mist); border-bottom: 1px solid var(--line); }
.mobile-nav.open { display: flex; }
.mobile-nav a { font-family: var(--display); font-size: 19px; font-weight: 600; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mobile-nav a:last-child { border-bottom: none; }

/* ---------- hero ---------- */
.hero { padding: var(--sp-16) 0 var(--sp-24); }
.hero-grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: var(--sp-16); align-items: center; }
.hero h1 { margin-bottom: var(--sp-4); }
.hero .lead { margin-bottom: var(--sp-8); }
.hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* identity: service and place, stated first */
.ident { display: inline-flex; align-items: center; gap: var(--sp-3); padding: 10px 18px 10px 12px; margin-bottom: var(--sp-6); background: var(--paper); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.ident-ic { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--sky-tint); color: var(--teal-deep); display: grid; place-items: center; }
.ident-ic svg { width: 19px; height: 19px; }
.ident b { display: block; font-family: var(--ui); font-size: 15.5px; font-weight: 600; line-height: 1.2; }
.ident span { display: block; font-family: var(--ui); font-size: 14px; color: var(--ink-soft); margin-top: 1px; }
/* Deviation from the reference, fixing a bug in it: `.ident span` above also
   matches .ident-ic — which is itself a <span> — so it overrode that rule's
   `display: grid` with `block`. `place-items: center` then stopped applying
   and the pin sat in the top-left of its 34px circle, 7.5px off centre on
   both axes. Restored here at higher specificity (0,2,0 beats 0,1,1). The
   circle keeps its size, so nothing around it moves.
   Sibling chips (.brand-mark, .urgent-ic, .svc-ic) are unaffected — their
   text rules are scoped to .brand-txt / .urgent-txt rather than the parent. */
.ident .ident-ic { display: grid; place-items: center; }

.hero-photo { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-3); }
.hero-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }

/* signature: the availability panel. What a practice must answer first. */
.avail { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; margin-top: var(--sp-8); }
.avail-head { display: flex; align-items: center; gap: var(--sp-2); padding: 14px 22px; background: var(--mist-2); font-family: var(--ui); font-size: 14px; font-weight: 600; }
.avail-head .pip { width: 9px; height: 9px; border-radius: 50%; background: #0F9B7A; flex: none; animation: pip 2.6s infinite; }
@keyframes pip { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }
.avail-rows { padding: var(--sp-2) var(--sp-6) var(--sp-4); }
.avail-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--ui); font-size: 15.5px; }
.avail-row:last-child { border-bottom: none; }
.avail-row b { font-weight: 600; }
.avail-row .val { color: var(--ink-soft); }
.avail-row .val strong { color: var(--teal-deep); font-weight: 600; }

/* ---------- sections ---------- */
section { padding: var(--sp-24) 0; }
section.tight { padding: var(--sp-16) 0; }
.band-paper { background: var(--paper); }
.band-2 { background: var(--mist-2); }
.band-dark { background: var(--teal); color: var(--mist); }
.band-dark h2, .band-dark h3 { color: var(--mist); }
.band-dark p { color: var(--mist-2); }

.sec-head { max-width: 640px; margin-bottom: var(--sp-12); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center p { margin-left: auto; margin-right: auto; }
.sec-head h2 { margin-bottom: var(--sp-3); }

/* ---------- urgent strip, directly under the hero ---------- */
.urgent { background: var(--ink); color: var(--mist); }
.urgent-in { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-6) 0; flex-wrap: wrap; }
.urgent-ic { width: 44px; height: 44px; border-radius: 50%; background: rgba(46,211,183,0.20); color: var(--spring); display: grid; place-items: center; flex: none; }
.urgent-ic svg { width: 22px; height: 22px; }
.urgent-txt { flex: 1; min-width: 260px; }
.urgent-txt b { display: block; font-family: var(--ui); font-size: 16px; font-weight: 600; }
.urgent-txt span { display: block; font-size: 15.5px; color: var(--mist-2); margin-top: 2px; }

/* ---------- services ---------- */
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.svc.two { grid-template-columns: repeat(2, 1fr); }
.svc-card { background: var(--paper); border-radius: var(--r-lg); padding: var(--sp-8); box-shadow: var(--sh-1); display: flex; flex-direction: column; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.svc-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.svc-ic { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--sky-tint); color: var(--teal-deep); display: grid; place-items: center; margin-bottom: var(--sp-6); flex: none; }
.svc-ic svg { width: 26px; height: 26px; }
.svc-card h3 { margin-bottom: var(--sp-2); }
.svc-card p { font-size: 16px; color: var(--ink-soft); }
.svc-card .link { margin-top: auto; padding-top: var(--sp-4); align-self: flex-start; font-size: 15.5px; }
.svc-price { font-family: var(--ui); font-size: 14px; font-weight: 600; color: var(--teal-deep); margin-top: var(--sp-3); }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; }
.split.flip > *:first-child { order: 2; }
.split-photo { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2); }
.split-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ---------- lists ---------- */
.ticks { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-6); }
.ticks li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: 17px; }
.ticks li svg { width: 21px; height: 21px; flex: none; color: var(--teal-deep); margin-top: 3px; }
.band-dark .ticks li svg { color: var(--mint-light); }

/* ---------- proof: the number row ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.stat { text-align: center; }
.stat b { display: block; font-family: var(--display); font-size: var(--step-3); font-weight: 600; letter-spacing: -0.03em; color: var(--teal-deep); line-height: 1; }
.band-dark .stat b { color: var(--mint-light); }
.stat span { display: block; font-family: var(--ui); font-size: 14.5px; color: var(--ink-soft); margin-top: var(--sp-2); }
.band-dark .stat span { color: var(--mist-2); }

/* ---------- team ---------- */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.member { background: var(--paper); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); }
.member img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.member-body { padding: var(--sp-6); }
.member h3 { font-size: 19px; margin-bottom: 2px; }
.member .role { font-family: var(--ui); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: var(--sp-3); }
.member p { font-size: 15.5px; color: var(--ink-soft); }

/* ---------- reviews ---------- */
.rev-head { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-8); }
.rev-score { display: flex; align-items: baseline; gap: var(--sp-2); }
.rev-score b { font-family: var(--display); font-size: var(--step-2); font-weight: 600; }
.stars { color: var(--teal-deep); letter-spacing: 2px; font-size: 18px; }
.rev-count { font-family: var(--ui); font-size: 15px; color: var(--ink-soft); }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.review { background: var(--paper); border-radius: var(--r-lg); padding: var(--sp-8); box-shadow: var(--sh-1); }
.review .stars { font-size: 15px; margin-bottom: var(--sp-3); }
.review p { font-size: 16.5px; margin-bottom: var(--sp-4); }
.review cite { font-style: normal; font-family: var(--ui); font-size: 14px; font-weight: 600; color: var(--ink-soft); }

/* ---------- pricing ---------- */
.prow { display: flex; justify-content: space-between; gap: var(--sp-6); align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.prow:last-child { border-bottom: none; }
.band-dark .prow { border-bottom-color: rgba(241,250,248,0.2); }
.prow b { font-family: var(--ui); font-weight: 600; }
.prow span { display: block; font-size: 15.5px; color: var(--ink-soft); margin-top: 2px; }
.band-dark .prow span { color: var(--mist-2); }
.prow .amt { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--teal-deep); white-space: nowrap; }
.band-dark .prow .amt { color: var(--mint-light); }
.pcard { background: var(--paper); border-radius: var(--r-xl); padding: var(--sp-8); box-shadow: var(--sh-2); }

/* pricing.html stacks its three fee cards inside ONE <section class="tight">,
   separated by margin-bottom:var(--sp-6). The page builder renders each card
   as its own section instead, so consecutive card sections collapse the
   padding between them and reproduce that single-group rhythm: the first
   keeps the section's top padding, the gaps become sp-6, and the last keeps
   the section's bottom padding. A lone card section matches neither selector
   and keeps the normal .tight padding. */
.pcard-group + .pcard-group { padding-top: 0; }
.pcard-group:has(+ .pcard-group) { padding-bottom: var(--sp-6); }

/* Same idea for the .notice callout: contact.html and quality-of-life.html
   both place it INSIDE the section it annotates, separated only by a margin.
   Rendered as its own section, it drops the preceding section's bottom
   padding and supplies the gap itself (see BlockUrgentNotice.astro). */
section:has(+ .notice-card) { padding-bottom: 0; }

/* about.html's badge row hangs off the bottom of the credentials section
   (<div style="margin-top:var(--sp-12)">) instead of standing on its own. */
section:has(+ .badges-attached) { padding-bottom: 0; }
.pbig { font-family: var(--display); font-size: var(--step-4); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--teal); }
.band-dark .pbig { color: var(--mint-light); }
.pbig sup { font-size: 0.4em; vertical-align: super; }

/* ---------- badges ---------- */
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
.badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 12px 18px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--ui); font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.badge svg { width: 16px; height: 16px; color: var(--teal-deep); flex: none; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.step { position: relative; padding-top: var(--sp-6); border-top: 3px solid var(--spring); }
.band-dark .step { border-top-color: var(--mint-light); }
.step-n { font-family: var(--ui); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-deep); display: block; margin-bottom: var(--sp-2); }
.band-dark .step-n { color: var(--mint-light); }
.step h3 { font-size: 19px; margin-bottom: var(--sp-2); }
.step p { font-size: 16px; color: var(--ink-soft); }
.band-dark .step p { color: var(--mist-2); }

/* ---------- faq ---------- */
.faq { max-width: 800px; margin: 0 auto; }
.qa { background: var(--paper); border-radius: var(--r-md); margin-bottom: var(--sp-3); box-shadow: var(--sh-1); overflow: hidden; }
.qa button { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-6); padding: 22px 26px; font-family: var(--display); font-size: 18px; font-weight: 600; min-height: 64px; }
.qa .chev { width: 22px; height: 22px; flex: none; color: var(--teal-deep); transition: transform var(--t) var(--ease); }
.qa.open .chev { transform: rotate(45deg); }
.qa-body { max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease); }
.qa-body p { padding: 0 26px 24px; color: var(--ink-soft); font-size: 16.5px; }

/* ---------- notice ---------- */
.notice { background: var(--ink); color: var(--mist); border-radius: var(--r-lg); padding: var(--sp-8); }
.notice h3 { color: var(--mist); display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.notice h3 svg { width: 24px; height: 24px; color: var(--mint-light); flex: none; }
.notice p { color: var(--mist-2); font-size: 16.5px; }

/* ---------- area list ---------- */
.areas { columns: 3; column-gap: var(--sp-12); font-family: var(--ui); font-size: 16px; line-height: 2.05; }
.areas span { display: block; break-inside: avoid; color: var(--ink-soft); }

/* ---------- forms ---------- */
.field { margin-bottom: var(--sp-6); }
.field label { display: block; font-family: var(--ui); font-size: 14px; font-weight: 600; color: var(--ink-soft); margin-bottom: var(--sp-2); }
.field input, .field select, .field textarea { font: inherit; font-size: 17px; width: 100%; padding: 15px 16px; border: none; border-radius: var(--r-sm); background: var(--mist); box-shadow: inset 0 0 0 2px var(--line); color: var(--ink); min-height: 56px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { box-shadow: inset 0 0 0 2px var(--teal); }
.field textarea { min-height: 130px; resize: vertical; }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

/* ---------- footer ---------- */
footer { background: var(--teal); color: var(--mist); padding: var(--sp-16) 0 var(--sp-8); }
footer .brand-txt b { color: var(--mist); }
footer .brand-txt span { color: var(--mint-light); }
footer .brand-mark { background: rgba(241,250,248,0.14); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-8); padding-bottom: var(--sp-12); }
.foot-grid h4 { font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mint-light); margin-bottom: var(--sp-4); }
.foot-grid ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.foot-grid a { color: var(--mist-2); font-size: 16px; }
.foot-grid a:hover { color: var(--mist); }
.foot-note { color: var(--mist-2); font-size: 16px; margin-top: var(--sp-4); max-width: 32ch; }
.foot-bottom { border-top: 1px solid rgba(241,250,248,0.18); padding-top: var(--sp-6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); font-size: 15px; color: var(--mist-2); }
.foot-grid > * { min-width: 0; }
.foot-grid a { overflow-wrap: anywhere; }

/* ---------- sticky action bar ---------- */
.actionbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--paper); border-top: 1px solid var(--line); padding: 10px 14px; gap: var(--sp-3); box-shadow: 0 -8px 24px -12px rgba(36,30,24,0.2); }
.actionbar .btn { flex: 1; padding: 14px 12px; font-size: 15.5px; min-height: 52px; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .svc, .team, .reviews { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .areas { columns: 2; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .burger { display: grid; }
  .nav-in > .btn { display: none; }
  .hero { padding: var(--sp-12) 0 var(--sp-16); }
  .hero-grid, .split { grid-template-columns: 1fr; gap: var(--sp-8); }
  .split.flip > *:first-child { order: 0; }
  section { padding: var(--sp-16) 0; }
  section.tight { padding: var(--sp-12) 0; }
  .sec-head { margin-bottom: var(--sp-8); }
  .svc, .team, .reviews, .steps { grid-template-columns: 1fr; }
  .two-up { grid-template-columns: 1fr; gap: 0; }
  .actionbar { display: flex; }
  body { padding-bottom: 76px; }
  .areas { columns: 1; }
}

@media (max-width: 700px) {
  .foot-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .avail-head .pip { animation: none; }
}

/* Bridge: multisite designTokens override the skin palette when set.
   Must live on `body`, not `:root` — SiteShell emits the --color-* tokens on
   the body element, and custom properties do not inherit upwards.
   Sites that leave designTokens at the vet preset keep the audited palette.

   The first six tokens map 1:1 to a --color-* SiteShell emits. The rest
   (--teal-deep, --mint-light, --mist-2, --sky-tint, --tint-soft, --line,
   --line-strong) have no direct designTokens equivalent — SiteShell only
   emits 8 colors (primary/primaryDark/secondary/accent/bg/surface/text/
   textMuted), not a whole 15-step palette — so they are derived with
   color-mix() from the closest of those 8 (same technique already used at
   memorial/BlockForm.astro:281). This is a reasonable approximation, not a
   guarantee of the same contrast the audited defaults have: a site with an
   unusually light primary or a near-white surface should still spot-check
   these bands. --spring and --sky are left on the fixed Willowmere values —
   they are purely decorative accents (rule/marker colors), not structural,
   and forcing them from designTokens risks clashing more than it helps. */
body {
  --teal: var(--color-primary, #085553);
  --teal-2: var(--color-primary-dark, #063F3E);
  --ink: var(--color-text, #0F2429);
  --ink-soft: var(--color-text-muted, #2F4F55);
  --paper: var(--color-surface, #FFFFFF);
  --mist: var(--color-bg, #F1FAF8);

  /* Deepest structural teal (links, eyebrows, prices) — one step darker
     than --teal-2, mirroring the ~10% darker relationship between the
     reference's own #094F42 and #063F3E. */
  --teal-deep: color-mix(in srgb, var(--color-primary-dark, #063F3E) 82%, black);
  /* --mint-light is deliberately NOT derived. It colours 10-13px text on dark
     bands (.eyebrow.on-dark, .step-n, .foot-grid h4, footer .brand-txt span,
     .util .sep) — all far below the size at which WCAG AAA relaxes from 7:1 to
     4.5:1. The reference's literal value is audited at 7.3:1 on --teal; a
     color-mix derivation from --color-primary measured 5.96:1 with these same
     defaults, which would break the AAA commitment this skin makes. It stays
     fixed at the value declared in :root above. */
  /* Light surface tints for alternating page bands and quiet fills, each a
     light mix of the page background toward a brand color. */
  --mist-2: color-mix(in srgb, var(--color-bg, #F1FAF8) 90%, var(--color-primary, #085553) 10%);
  --sky-tint: color-mix(in srgb, var(--color-bg, #F1FAF8) 85%, var(--color-secondary, #22A7F0) 15%);
  --tint-soft: color-mix(in srgb, var(--color-surface, #FFFFFF) 80%, var(--color-primary, #085553) 20%);
  /* Borders/dividers — neutral mixes of background and muted text, not tied
     to the brand hue, matching the reference's own near-neutral --line/
     --line-strong. */
  --line: color-mix(in srgb, var(--color-bg, #F1FAF8) 85%, var(--color-text-muted, #2F4F55) 15%);
  --line-strong: color-mix(in srgb, var(--color-bg, #F1FAF8) 62%, var(--color-text-muted, #2F4F55) 38%);
}