/* ============================================================
   Trusty Paws Grooming — Pokesdown, Bournemouth
   Sage green sampled from the client's own logo, on warm off-white.
   Three hues only: sage green, pine dark, cream — plus one honey accent.
   Fonts: Fraunces (display) + Nunito Sans (body).

   Every foreground/background pair below was measured against WCAG 2.1;
   the ratio in each comment is the computed value, not an estimate.
   ============================================================ */

:root {
  --pine: #22301F;         /* dark anchor: header, footer, dark sections (13.9:1 w/ white) */
  --pine-light: #2F412B;   /* raised surfaces on the dark anchor (10.98:1 w/ white) */
  --sage: #607850;         /* the logo green itself — brand identity (4.88:1 on white) */
  --sage-deep: #4E6440;    /* buttons, links, icons, checks (6.52:1 white / 5.93:1 cream) */
  --sage-darker: #3E5133;  /* primary button + FAB hover */
  --sage-soft: #9DB58C;    /* nav hover, eyebrows, focus ring on dark (6.24:1 on pine) */
  --honey: #C9B27A;        /* warm accent — stars on dark (6.71:1 on pine) */
  --honey-deep: #806229;   /* stars on light (5.68:1 white / 5.17:1 cream) */
  --ink: #233225;          /* green-black body text (13.51:1 white / 12.29:1 cream) */
  --grey: #57654F;         /* muted green-grey secondary (6.21:1 white / 5.65:1 cream) */
  --cream: #F7F4EC;        /* warm off-white — alt sections */
  --white: #ffffff;

  /* Tints of the pine anchor, used for borders/shadows/watermarks so no
     stray warm hue survives from the cocoa skin this was re-themed from. */
  --line: rgba(34, 48, 31, 0.10);
  --line-strong: rgba(34, 48, 31, 0.16);
  --overlay-1: rgba(20, 30, 18, 0.92);
  --overlay-2: rgba(20, 30, 18, 0.72);
  --overlay-3: rgba(20, 30, 18, 0.45);

  --radius: 14px;
  --shadow: 0 12px 30px rgba(34, 48, 31, 0.10);
  --shadow-lg: 0 24px 60px rgba(34, 48, 31, 0.18);
  --accent-text: #456039;  /* eyebrow on light (7.03:1 white / 6.4:1 cream) */

  --font-head: 'Fraunces', serif;
  --font-body: 'Nunito Sans', sans-serif;

  /* One easing + duration scale so every animation shares a rhythm. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.18s;
  --t-mid: 0.28s;
  --t-slow: 0.5s;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* Links sitting inside running prose must be identifiable by more than colour,
   so they carry an underline. Nav, buttons, cards and the footer opt out —
   there the link IS the component and an underline just adds noise. */
main p a,
main li a:not(.btn),
.faq__answer a,
.guide a,
.policy a {
  color: var(--sage-deep);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast) ease;
}
main p a:hover, main li a:not(.btn):hover,
.faq__answer a:hover, .guide a:hover, .policy a:hover { color: var(--sage-darker); }
/* On the pine anchor the deep sage is unreadable — pale sage instead. */
.hero p a, .page-hero p a, .section--dark p a, .section--dark li a:not(.btn), .cta-band p a {
  color: var(--sage-soft);
}
.hero p a:hover, .page-hero p a:hover, .section--dark p a:hover,
.section--dark li a:not(.btn):hover, .cta-band p a:hover { color: var(--white); }
/* The contact list is icon + link rows, not prose. */
.contact__list a { text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--font-head); margin: 0; line-height: 1.12; letter-spacing: -0.015em; }
p { margin: 0; }

/* Accessibility: skip link + visible keyboard focus */
.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 200;
  background: var(--pine);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--sage-deep);
  outline-offset: 2px;
  border-radius: 4px;
}
/* One focus colour cannot serve both surfaces: --sage-deep is 6.52:1 on white
   but only 1.6:1 on the pine anchor. Dark contexts take the pale sage instead
   (6.24:1 on pine), so the ring stays visible wherever focus lands. */
.topbar :focus-visible,
.header :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.section--dark :focus-visible,
.cta-band :focus-visible,
.footer :focus-visible,
.call-fab:focus-visible {
  outline-color: var(--sage-soft);
}

/* ===== Motion =================================================
   Scroll reveal: JS adds .reveal, IntersectionObserver adds .is-visible.
   Transform/opacity only, so nothing reflows.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow) ease, transform var(--t-slow) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Hero entrance — choreographed on load, eyebrow first, trust strip last.
   Deliberately a CSS animation, not a JS-toggled class: the content must never
   depend on script to become visible. `both` fill holds the start frame during
   the delay and the end frame afterwards, so nothing flashes or gets stranded. */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero__content > * { animation: heroRise 0.42s var(--ease-out) both; }
.hero__content > *:nth-child(1) { animation-delay: 0.04s; }
.hero__content > *:nth-child(2) { animation-delay: 0.12s; }
.hero__content > *:nth-child(3) { animation-delay: 0.20s; }
.hero__content > *:nth-child(4) { animation-delay: 0.28s; }
.hero__content > *:nth-child(5) { animation-delay: 0.36s; }

/* Section-title underline draws itself in when the title reveals. */
.section__title::after { transform: scaleX(0); transform-origin: center; }
.section__title--left::after { transform-origin: left center; }
.section__title.is-visible::after {
  transform: scaleX(1);
  transition: transform 0.55s var(--ease-out) 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__content > * { animation: none; opacity: 1; transform: none; }
  .section__title::after { transform: scaleX(1); }
  * { animation: none !important; transition-duration: 0.01ms !important; }
}

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) ease,
              background var(--t-fast) ease, color var(--t-fast) ease;
  white-space: nowrap;
}
.btn--primary {
  background: var(--sage-deep);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(78, 100, 64, 0.30);
}
.btn--primary:hover {
  background: var(--sage-darker);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(78, 100, 64, 0.38);
}
/* Press feedback — settles back under the resting position, then releases. */
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.09s; }
.btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.5);
  color: inherit;
}
.section--dark .btn--ghost, .hero .btn--ghost { border-color: rgba(255,255,255,0.6); color: var(--white); }
.btn--ghost:hover { background: rgba(255,255,255,0.12); }
#reviews .btn--ghost, .reviews__cta .btn--ghost { border-color: var(--sage-deep); color: var(--sage-deep); }
#reviews .btn--ghost:hover, .reviews__cta .btn--ghost:hover { background: var(--sage-deep); color: var(--white); }
.btn--lg { padding: 15px 30px; font-size: 1rem; }
.btn--block { width: 100%; }

/* ===== Topbar ===== */
.topbar {
  background: var(--pine);
  color: rgba(255,255,255,0.85);
  font-size: 0.82rem;
}
.topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 24px;
  gap: 12px;
}
.topbar__item a { font-weight: 600; color: var(--white); }
.topbar__badge { display: none; }
@media (min-width: 720px) { .topbar__badge { display: block; } }
/* Below 720px the badge is hidden and the topbar is just these two links, so
   grow their tap area to the 44px minimum. The strip absorbs the extra height
   rather than the links overhanging into the header. */
@media (max-width: 719px) {
  .topbar__inner { padding: 0 24px; }
  .topbar__item a { display: inline-block; padding: 13px 0; }
}

/* ===== Header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(24, 34, 22, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: box-shadow var(--t-mid) ease;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  gap: 16px;
}
/* Header lockup: emblem + wordmark side by side. The supplied logo is a tall
   stacked lockup whose wordmark turns to mush at header size, so the emblem is
   used as the mark and the wordmark is set live in Fraunces to match it. */
.brand { display: inline-flex; align-items: center; gap: 11px; padding: 5px 0; }
.brand__mark { height: 42px; width: auto; flex-shrink: 0; }
.brand__logo { height: 48px; width: auto; }
.nav {
  display: none;
  gap: 28px;
  font-weight: 600;
  font-size: 0.95rem;
}
.nav a { color: rgba(255,255,255,0.88); position: relative; padding: 6px 0; transition: color 0.2s ease; }
.nav a:hover { color: var(--sage-soft); }
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--sage-soft);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-mid) var(--ease-out);
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.nav a.active { color: var(--sage-soft); }
.nav a.active::after { transform: scaleX(1); }
.nav--mobile-open a::after { display: none; }
.nav--mobile-open a.active { color: var(--sage-soft); }
.header__cta { display: none; }
.header__cta.btn--primary {
  background: var(--sage-soft);
  color: var(--pine);
  box-shadow: 0 8px 20px rgba(157, 181, 140, 0.30);
}
.header__cta.btn--primary:hover {
  background: #B4C9A5;
  box-shadow: 0 12px 26px rgba(157, 181, 140, 0.42);
}
@media (min-width: 900px) {
  .nav { display: flex; margin-left: auto; margin-right: 24px; }
  .header__cta { display: inline-flex; }
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;   /* 44x44 minimum touch target */
  height: 44px;
  padding: 0 4px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast) ease;
}
/* Hamburger folds into a cross — the state change animates rather than snapping. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.nav--mobile-open {
  display: flex !important;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--pine);
  flex-direction: column;
  padding: 16px 24px 24px;
  gap: 4px;
  box-shadow: var(--shadow);
}
.nav--mobile-open a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }

/* ===== Split hero (home) =====================================
   All of the client's photography is portrait, shot close. A full-bleed
   landscape hero would have to crop out either her face or the dog, so the
   home page sets the copy BESIDE a tall image instead of over a letterboxed
   one. Interior pages keep the banner treatment (.page-hero), where the
   image is mostly overlay anyway.
   ============================================================ */
.hero--split {
  min-height: 0;
  display: block;
  overflow: visible;
  background: var(--pine);
}
.hero--split .hero__grid {
  display: grid;
  gap: 44px;
  align-items: center;
  padding: 56px 0 64px;
}
.hero--split .hero__content { padding: 0; max-width: 580px; }
.hero--split .hero__portrait {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 340px;
}
.hero--split .hero__portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}
/* Offset outline plate — depth from the brand's own line-art language
   rather than another drop shadow. Purely decorative. */
.hero--split .hero__portrait::before {
  content: "";
  position: absolute;
  inset: 20px -20px -20px 20px;
  border: 2px solid rgba(157, 181, 140, 0.5);
  border-radius: 18px;
  z-index: 0;
}
@media (min-width: 900px) {
  .hero--split .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 72px;
    padding: 84px 0 92px;
  }
  .hero--split .hero__portrait { max-width: 430px; }
}
/* Below the breakpoint the plate would poke past the container edge. */
@media (max-width: 899px) {
  .hero--split .hero__grid { padding: 44px 0 56px; }
  .hero--split .hero__portrait { max-width: 300px; }
  .hero--split .hero__portrait::before { inset: 14px -14px -14px 14px; }
}
/* The banner hero's trust strip is one wide row with divider rules between
   items. In the split hero the column is far narrower, so that row wraps and
   the dividers strand themselves mid-line. Here it wraps as a plain list. */
.hero--split .hero__trust {
  gap: 10px 26px;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 22px;
  margin-top: 4px;
}
.hero--split .hero__trust li { padding: 0; }
.hero--split .hero__trust li::after { display: none; }

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--white);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--overlay-1) 15%, var(--overlay-2) 50%, var(--overlay-3) 100%);
}
.hero__content { position: relative; z-index: 1; padding: 100px 24px 80px; max-width: 720px; }
.eyebrow {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--accent-text);
  margin-bottom: 14px;
}
.hero .eyebrow, .section--dark .eyebrow { color: var(--sage-soft); }
.eyebrow--center { display: block; text-align: center; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; margin-bottom: 20px; }
.hero__lede { font-size: 1.1rem; color: rgba(255,255,255,0.86); max-width: 560px; margin-bottom: 32px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 20px; font-size: 0.92rem; color: rgba(255,255,255,0.9); font-weight: 500; }
@media (min-width: 620px) {
  .hero__trust {
    gap: 0;
    margin-top: 4px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.18);
  }
  .hero__trust li { position: relative; padding: 0 22px; }
  .hero__trust li:first-child { padding-left: 0; }
  .hero__trust li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 15px;
    background: rgba(255,255,255,0.22);
  }
}

/* Mobile hero: designed for thumb + small viewport, not a shrunk desktop */
@media (max-width: 619px) {
  .hero { min-height: auto; }
  .hero__content { padding: 72px 24px 56px; }
  .hero__lede { font-size: 1rem; margin-bottom: 26px; }
  .hero__actions { flex-direction: column; margin-bottom: 28px; }
  .hero__actions .btn { width: 100%; }
  .hero__trust { flex-direction: column; gap: 10px; border-left: 3px solid var(--sage-soft); padding-left: 14px; }
}

/* ===== Sections — generous rhythm on desktop, tighter on mobile ===== */
.section { padding: 110px 0; scroll-margin-top: 96px; }
@media (max-width: 719px) { .section { padding: 64px 0; } }
.section--alt { background: var(--cream); }
.section--dark { background: var(--pine); color: var(--white); }
.section__title {
  text-align: center;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 800;
  max-width: 640px;
  margin: 0 auto 16px;
}
.section__title::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  border-radius: 3px;
  background: var(--sage);
  margin: 18px auto 0;
}
/* The pale sage would wash out on white; on the pine anchor the full-strength
   sage is the one that disappears. Each surface takes the one that reads. */
.section--dark .section__title::after { background: var(--sage-soft); }
.section__title--left { text-align: left; margin: 0 0 18px; max-width: none; }
.section__title--left::after { margin-left: 0; margin-right: auto; }
.section__lede {
  text-align: center;
  color: var(--grey);
  max-width: 560px;
  margin: 0 auto 48px;
  font-size: 1.05rem;
}
.section--dark .section__lede, .section--dark p { color: rgba(255,255,255,0.75); }

/* ===== Services grid ===== */
.grid--services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  counter-reset: svc;
}
.card {
  position: relative;
  /* Column flex so the price line can be pushed to the bottom and stay on a
     shared baseline across a row, however long the description runs. */
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) ease, border-color var(--t-mid) ease;
}
.card::after {
  counter-increment: svc;
  content: "0" counter(svc);
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  color: rgba(34, 48, 31, 0.14);
  letter-spacing: 0.02em;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(78, 100, 64, 0.38); }
.card:active { transform: translateY(-2px) scale(0.99); transition-duration: 0.09s; }
.card__icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sage-deep);
  margin-bottom: 18px;
  transition: transform var(--t-mid) var(--ease-out);
}
.card:hover .card__icon { transform: scale(1.06) rotate(-3deg); }
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.card p { color: var(--grey); font-size: 0.96rem; line-height: 1.55; }
.card__price {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.card__price strong { color: var(--sage-deep); font-family: var(--font-head); font-size: 1.02rem; }

/* Secondary services — compact chip list */
.services-more { margin-top: 44px; text-align: center; }
.services-more__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 22px;
}
.services-more__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
}
.services-more__list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(34, 48, 31, 0.05);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) ease;
}
.services-more__list li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage-deep);
  flex-shrink: 0;
}
.services-more__list li:hover { transform: translateY(-2px); border-color: rgba(78, 100, 64, 0.42); }

/* ===== Why choose us ===== */
.why__grid { display: grid; gap: 48px; align-items: center; }
.why__media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.why__list { display: flex; flex-direction: column; gap: 16px; margin: 26px 0 30px; }
.why__list li { padding-left: 30px; position: relative; color: var(--grey); line-height: 1.5; }
.why__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sage-deep);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.why__list strong { color: var(--ink); }
@media (min-width: 860px) {
  .why__grid { grid-template-columns: 1fr 1.1fr; }
}

/* ===== Gallery ===== */
.gallery { columns: 1; gap: 18px; }
@media (min-width: 620px) { .gallery { columns: 2; } }
@media (min-width: 980px) { .gallery { columns: 3; } }
.gallery__item {
  margin: 0 0 18px;
  break-inside: avoid;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.gallery__item img { width: 100%; height: auto; display: block; transition: transform 0.4s var(--ease-out); }
/* Masonry rhythm: taller tiles once there is more than one column.
   Columns layout, so this crops to a portrait ratio rather than spanning grid rows. */
@media (min-width: 620px) {
  .gallery__item--tall img { aspect-ratio: 3 / 4; object-fit: cover; }
}
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 16px 14px;
  background: linear-gradient(0deg, rgba(20, 30, 18, 0.85), transparent);
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-mid) ease, transform var(--t-mid) var(--ease-out);
}
.gallery__item:hover figcaption { opacity: 1; transform: translateY(0); }
/* Touch devices have no hover — captions always visible */
@media (hover: none) {
  .gallery__item figcaption { opacity: 1; transform: none; }
}

/* ===== Reviews ===== */
.ratings-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 28px;
  margin: 0 auto 48px;
  padding: 18px 28px;
  max-width: 620px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.ratings-bar__item { display: flex; align-items: center; gap: 10px; }
.ratings-bar__stars { color: var(--honey-deep); font-size: 1.1rem; letter-spacing: 1px; }
.ratings-bar__label { font-size: 0.95rem; color: var(--grey); }
.ratings-bar__label strong { color: var(--ink); font-family: var(--font-head); }
.ratings-bar__divider { width: 1px; height: 28px; background: var(--line-strong); }
@media (max-width: 520px) {
  .ratings-bar { border-radius: 18px; flex-direction: column; }
  .ratings-bar__divider { width: 60px; height: 1px; }
}

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.review-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) ease;
}
.review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.review-card__stars { color: var(--honey-deep); font-size: 1.05rem; margin-bottom: 14px; letter-spacing: 2px; }
.review-card p { color: var(--ink); line-height: 1.6; font-size: 0.98rem; }
.review-card__author { margin-top: 18px; font-weight: 700; font-size: 0.9rem; color: var(--sage-deep); }
.review-card__author span { color: var(--grey); font-weight: 400; }
.reviews__cta { text-align: center; margin-top: 40px; }

/* ===== About ===== */
.about__grid { display: grid; gap: 48px; align-items: center; }
.about__media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.about__content p { color: var(--grey); line-height: 1.65; margin-bottom: 16px; }
.about__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 26px;
}
.about__stats div {
  background: var(--cream);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
}
.about__stats strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--sage-deep);
  /* Counting digits must not reflow the tile as they tick up. */
  font-variant-numeric: tabular-nums;
}
.about__stats span { display: block; font-size: 0.78rem; color: var(--grey); margin-top: 4px; }
@media (min-width: 860px) {
  .about__grid { grid-template-columns: 1.1fr 1fr; }
}

/* ===== Contact ===== */
.contact__grid { display: grid; gap: 48px; }
.contact__list { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.contact__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 1.02rem; line-height: 1.5; }
.contact__list a:hover { color: var(--sage-soft); }
/* Phone/email links are the point of this list on a phone — give them the full
   44px tap height. The 16px row gap keeps the targets comfortably apart. */
@media (max-width: 899px) {
  .contact__list a { display: inline-block; padding: 10px 0; }
  .contact__icon { margin-top: 12px; }
}
.contact__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--sage-soft);
}
.contact__icon svg { width: 22px; height: 22px; display: block; }
.contact__form {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 8px; }
.form-row input, .form-row textarea, .form-row select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 1rem; /* 16px — stops iOS zooming the page on focus */
  resize: vertical;
  color: var(--ink);
  background: var(--white);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.form-row input:hover, .form-row textarea:hover, .form-row select:hover { border-color: var(--sage-deep); }
.form-row select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2357654F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.form-row select:invalid { color: var(--grey); }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: 2px solid var(--sage-deep);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(78, 100, 64, 0.18);
}
.form-note { margin-top: 14px; font-size: 0.88rem; text-align: center; color: var(--sage-deep); font-weight: 600; min-height: 1.2em; }
@media (min-width: 860px) {
  .contact__grid { grid-template-columns: 1fr 1.1fr; }
}

/* ===== Footer ===== */
.footer { background: var(--pine); color: rgba(255,255,255,0.75); padding: 32px 0 40px; }
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; font-size: 0.85rem; }
/* Footer repeats the header lockup a touch larger. The supplied stacked lockup
   was tried here and rejected: at any height the footer row can afford, its
   wordmark is too small to read. */
.brand--footer { gap: 13px; }
.brand--footer .brand__mark { height: 52px; }
.brand--footer .brand__text { font-size: 1.08rem; }
.footer__inner a { font-weight: 600; color: var(--white); display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 700px) {
  .footer__inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ===== Floating call button (mobile) ===== */
.call-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sage-deep);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 90;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) ease;
}
.call-fab svg { width: 24px; height: 24px; }
.call-fab:hover { background: var(--sage-darker); }
.call-fab:active { transform: scale(0.92); }
@media (min-width: 900px) { .call-fab { display: none; } }
/* Keep the last section clear of the floating button on mobile. */
@media (max-width: 899px) { .footer { padding-bottom: 96px; } }

/* ===== Text brand (businesses without a logo image) ===== */
/* Wordmark — caps serif with open tracking, echoing the logo's own lettering. */
.brand__text {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.15;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}
.brand__text small {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-soft);
  margin-top: 3px;
}
@media (max-width: 400px) {
  .brand__mark { height: 36px; }
  .brand__text { font-size: 0.92rem; letter-spacing: 0.05em; }
}

/* ===== Inner-page banner ===== */
.page-hero {
  position: relative;
  padding: 120px 0 68px;
  color: var(--white);
  text-align: center;
  overflow: hidden;
  background: var(--pine);
}
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* The client's photographs are the whole point of this build, so the banner
   overlay is only as heavy as the text needs. The vignette keeps the darkest
   part of the gradient behind the centred heading, where contrast is measured,
   while the edges stay light enough to show the dog. */
.page-hero__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 55%, rgba(20, 30, 18, 0.62) 0%, rgba(20, 30, 18, 0.36) 100%),
    linear-gradient(180deg, rgba(20, 30, 18, 0.28) 0%, rgba(20, 30, 18, 0.46) 100%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--sage-soft); }
.page-hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; }
.page-hero p {
  color: rgba(255,255,255,0.82);
  max-width: 620px;
  margin: 14px auto 0;
  font-size: 1.05rem;
}
@media (max-width: 619px) { .page-hero { padding: 92px 0 52px; } }

/* Centred section CTA (e.g. "View all services") */
.section__cta { text-align: center; margin-top: 44px; }

/* ===== Bottom call-to-action band ===== */
.cta-band {
  background: var(--pine);
  color: var(--white);
  text-align: center;
  padding: 72px 0;
}
.cta-band h2 {
  color: var(--white);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800;
  max-width: 640px;
  margin: 0 auto;
}
.cta-band p {
  color: rgba(255,255,255,0.8);
  max-width: 540px;
  margin: 14px auto 28px;
  font-size: 1.05rem;
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.cta-band .btn--ghost { border-color: rgba(255,255,255,0.6); color: var(--white); }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* ===== Price list ============================================
   36 breeds is too many for a card grid — it becomes a wall. Columns keep
   it scannable, and `break-inside: avoid` stops a row splitting across a
   column boundary. Prices are tabular so the right edge stays true.
   ============================================================ */
.pricelist { columns: 1; column-gap: 40px; margin-top: 8px; }
@media (min-width: 620px) { .pricelist { columns: 2; } }
@media (min-width: 980px) { .pricelist { columns: 3; } }
.pricelist li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line-strong);
  break-inside: avoid;
  font-size: 0.95rem;
}
.pricelist li span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--sage-deep);
  white-space: nowrap;
}

/* Tiered pricing (bath & dry, puppy, nails) */
.tier { margin-top: 28px; }
.tier:first-of-type { margin-top: 8px; }
.tier__label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 10px;
}
.tier__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line-strong);
  font-size: 0.95rem;
  color: var(--grey);
}
.tier__list li strong { color: var(--ink); font-weight: 600; }
.tier__list li span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--sage-deep);
  white-space: nowrap;
}

/* A priced service block on the services page */
.service-block { margin-bottom: 64px; scroll-margin-top: 110px; }
.service-block:last-of-type { margin-bottom: 0; }
.service-block__head { margin-bottom: 20px; }
.service-block__head h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  margin-bottom: 10px;
}
.service-block__head p { color: var(--grey); line-height: 1.65; max-width: 720px; }

/* Jump links across the top of the services page */
.jumplinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 56px;
}
.jumplinks a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* touch target */
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--sage-deep);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) ease,
              background var(--t-fast) ease, color var(--t-fast) ease;
}
.jumplinks a:hover {
  transform: translateY(-2px);
  background: var(--sage-deep);
  border-color: var(--sage-deep);
  color: var(--white);
}

/* ===== Policy cards ===== */
.policies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px;
}
.policy {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow);
}
.policy h3 { font-size: 1.05rem; margin-bottom: 10px; }
.policy p { color: var(--grey); font-size: 0.94rem; line-height: 1.65; }
.policy p + p { margin-top: 10px; }

/* ===== Education guides ===== */
.guides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}
.guide {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) ease;
}
.guide:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.guide__icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sage-deep);
  color: var(--white);
  margin-bottom: 18px;
}
.guide__icon svg { width: 26px; height: 26px; }
.guide h3 { font-size: 1.12rem; margin-bottom: 10px; }
.guide p { color: var(--grey); font-size: 0.96rem; line-height: 1.6; }
.guide p + p { margin-top: 12px; }
.guide__note {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--grey);
}

/* ===== FAQ ===== */
.faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 56px 20px 24px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
/* Chevron drawn in CSS so it rotates with the open state and needs no icon file. */
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--sage-deep);
  border-bottom: 2px solid var(--sage-deep);
  transform: rotate(45deg);
  transition: transform var(--t-mid) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__item summary:hover { color: var(--sage-deep); }
.faq__answer { padding: 0 24px 22px; color: var(--grey); line-height: 1.7; font-size: 0.97rem; }
.faq__answer p + p { margin-top: 12px; }

/* ===== Review avatars =======================================
   The client publishes a photo of each reviewer's dog alongside the quote.
   Keeping them makes the reviews unmistakably hers rather than generic.
   ============================================================ */
.review-card__head { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; }
.review-card__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--cream);
  box-shadow: 0 2px 8px rgba(34, 48, 31, 0.14);
}
.review-card__meta { min-width: 0; }
.review-card__name { font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.review-card__head .review-card__stars { margin-bottom: 0; font-size: 0.95rem; letter-spacing: 1px; }

/* ===== Cut-out feature ======================================
   The client's own site uses background-removed dog photos as a styling
   device; reusing it keeps her visual language rather than replacing it.
   ============================================================ */
.cutouts {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.cutouts img {
  width: auto;
  height: 180px;
  filter: drop-shadow(0 12px 20px rgba(34, 48, 31, 0.18));
}
/* The middle pup stands slightly forward, so the trio reads as a group
   photo rather than three pasted cut-outs on a line. */
.cutouts img:nth-child(2) { height: 210px; }
@media (max-width: 619px) {
  .cutouts img { height: 118px; }
  .cutouts img:nth-child(2) { height: 138px; }
}

/* ===== Demo notice — this is a template, not a real business ===== */
.demo-note {
  background: var(--cream);
  border-bottom: 1px solid var(--line-strong);
  color: var(--grey);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
  padding: 10px 24px;
}
.demo-note strong { color: var(--ink); }