/* ==========================================================================
   Soggy Pawz Pet Spawz — site styles
   Rebuilt from the approved design handoff. Tokens are the source of truth;
   nothing below should hard-code a colour that exists as a token.
   ========================================================================== */

/* Fonts are loaded via <link> in index.html so they start downloading before
   this stylesheet has parsed. */

:root {
  --color-bg: #f4f0fb;
  --color-surface: #e8e0f7;
  --color-text: #2c2340;
  --color-heading: #7e3ce4;
  --color-divider: color-mix(in srgb, #2c2340 13%, transparent);

  --color-accent: #7c3aed;
  --color-accent-100: #f2ebfd;
  --color-accent-200: #e2d1fb;
  --color-accent-300: #cbb0f5;
  --color-accent-400: #a97fe9;
  --color-accent-500: #8b5cf6;
  --color-accent-600: #7c3aed;
  --color-accent-700: #6d28d9;
  --color-accent-800: #5b21b6;
  --color-accent-900: #4c1d95;

  --color-accent-2: #3cc7c6;
  --color-accent-2-100: #e6faf9;
  --color-accent-2-200: #c3f2f0;
  --color-accent-2-300: #94e6e3;
  --color-accent-2-400: #5fd6d4;
  --color-accent-2-500: #2fbfbe;
  --color-accent-2-600: #17959a;
  --color-accent-2-700: #0f767d;
  --color-accent-2-800: #0d5b63;
  --color-accent-2-900: #0a4249;

  --color-lav-100: #f1ecfa;
  --color-lav-200: #e4dbf5;
  --color-lav-300: #d0c1ee;
  --color-lav-500: #a68fd8;
  --color-lav-700: #6d55a4;

  --color-neutral-100: #f8f6fc;
  --color-neutral-200: #f0ecf7;
  --color-neutral-300: #e2dcee;
  --color-neutral-400: #c8bedd;
  --color-neutral-500: #a294bd;
  --color-neutral-600: #7d6e9a;
  --color-neutral-700: #5e5079;
  --color-neutral-800: #433858;
  --color-neutral-900: #2a2338;

  /* "Rainbow ribbon" — the client-approved tie-dye. Drives every rainbow
     accent on the page: hero frame, gallery borders, card top strips,
     icon chip rings, pricing frame. Never sits behind body text. */
  --tiedye: linear-gradient(115deg, #ff9ec4 0%, #ffd88a 18%, #b7f5a8 36%,
            #7fe3dd 54%, #7fc8f5 72%, #b79bf5 88%, #ff9ec4 100%);

  --shadow-sm: 0 1px 3px color-mix(in srgb, #2c2340 12%, transparent);
  --shadow-md: 0 8px 22px color-mix(in srgb, #2c2340 13%, transparent);
  --shadow-lg: 0 20px 48px color-mix(in srgb, #2c2340 17%, transparent);

  --font-heading: "Caprasimo", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --pad: 32px;
}

/* — base — */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden;
}

/* Caprasimo ships weight 400 only — asking for bold triggers ugly synthetic
   bolding, so headings are pinned to 400 everywhere. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 8.8px;
}
h6 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
p { margin: 0 0 13.2px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.sec-head { text-align: center; margin: 0 auto 44px; }
.sec-head h6 { color: var(--color-accent-2-600); }
.sec-h2 { font-size: 40px; color: var(--color-heading); margin-top: 6px; }
.sec-lede {
  font-size: 16px;
  margin-top: 10px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* — buttons —
   The design system defaults buttons to the display face; this page
   deliberately overrides that to the body face at 600. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .005em;
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8.8px 15.8px;
  transition: background .18s;
}
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

/* — tags — */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: 999px;
}
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — floating pearlescent bubbles —
   Decorative only. Hidden below 620px and for reduced-motion users. */
.deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.98), rgba(255,255,255,.3) 22%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at 74% 22%, rgba(255,216,138,.55), transparent 46%),
    radial-gradient(circle at 82% 68%, rgba(127,227,221,.6), transparent 48%),
    radial-gradient(circle at 26% 78%, rgba(255,158,196,.55), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(183,155,245,.16), rgba(183,155,245,.42) 78%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 0 18px rgba(255,255,255,.6),
              inset -7px -10px 20px rgba(183,155,245,.3),
              0 8px 20px rgba(44,35,64,.12);
}
@keyframes floaty  { 0%,100% { transform: translateY(0) }    50% { transform: translateY(-16px) } }
@keyframes floaty2 { 0%,100% { transform: translateY(0) }    50% { transform: translateY(-26px) } }
@keyframes floaty3 { 0%,100% { transform: translateY(0) }    50% { transform: translateY(-10px) } }
@keyframes floaty4 { 0%,100% { transform: translate(0,0) }   50% { transform: translate(6px,-20px) } }
@keyframes floaty5 { 0%,100% { transform: translate(0,0) }   50% { transform: translate(-8px,-14px) } }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
.nav-row {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
}
.brand img { width: 64px; height: 64px; flex: none; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-heading); font-size: 19px; color: var(--color-heading); }
.brand-sub {
  font-family: var(--font-heading);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent-2-600);
  margin-top: 3px;
}
.nav-spacer { flex: 1; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  font-weight: 600;
}
.nav-links a { color: var(--color-text); text-decoration: none; }
.nav-links a:hover { color: var(--color-accent); }
.nav-cta { padding: 10px 20px; white-space: nowrap; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 70px var(--pad) 40px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
}
.hero-eyebrow {
  display: block;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent-2-700);
}
.hero-title {
  font-size: 60px;
  line-height: 1.02;
  margin: 18px 0 0;
  color: var(--color-heading);
  text-wrap: balance;
}
.hero-sub {
  font-family: var(--font-heading);
  font-size: 27px;
  line-height: 1.1;
  margin: 9px 0 0;
  color: var(--color-accent-2-600);
}
.hero-lede {
  font-size: 19px;
  line-height: 1.55;
  margin: 22px 0 0;
  max-width: 30em;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-actions .btn { padding: 14px 26px; font-size: 15px; white-space: nowrap; }
/* The phone is plain text by client request — not a link, not a button. */
.phone-plain {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 19px;
  color: var(--color-accent-700);
  padding: 14px 4px;
  white-space: nowrap;
}
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.hero-media { position: relative; }
.hero-frame {
  position: relative;
  border-radius: 38px;
  padding: 8px;
  background: var(--tiedye);
  box-shadow: var(--shadow-lg);
}
.hero-frame > div { border-radius: 30px; overflow: hidden; aspect-ratio: 4/5; }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-badge {
  position: absolute;
  bottom: -22px;
  left: -22px;
  background: #fff;
  border-radius: 20px;
  padding: 14px 18px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-badge-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-accent-2-100);
  align-items: center;
  justify-content: center;
  color: var(--color-accent-2-600);
  flex: none;
}
.hero-badge strong {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-heading);
  font-size: 16px;
}
.hero-badge small { font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

/* ==========================================================================
   How it works
   ========================================================================== */
.band-down { background: linear-gradient(180deg, transparent, var(--color-accent-100)); }
.band-up { background: linear-gradient(180deg, var(--color-accent-100), transparent); }

#how { padding: 80px 0; margin-top: 40px; }
#how .sec-head { max-width: 32em; margin-bottom: 48px; }
#how .sec-lede { font-size: 17px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ── the tie-dye frame ─────────────────────────────────────────────────────
   The same ring as the hero photo, on every card. Two background layers do
   it with no inner wrapper: the gradient fills the border box, flat white
   fills the padding box. The transparent border is what the gradient shows
   through, so both layers need their box explicitly — see .gal-tile for why
   the default origin gets this wrong.
   Card padding below is reduced by the 8px ring so the interior is unchanged. */
.card,
.review-card,
.faq-card {
  border: 8px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--tiedye) border-box;
}

.card {
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8.8px;
}
.step-card {
  border-radius: 28px;
  padding: 30px 24px 24px;
  text-align: center;
}
.step-card h3 { font-size: 22px; color: var(--color-heading); }
.step-card p { color: color-mix(in srgb, var(--color-text) 72%, transparent); margin: 8px 0 0; }

/* ==========================================================================
   Services
   ========================================================================== */
#services { max-width: var(--wrap); margin: 0 auto; padding: 84px var(--pad); }
.services-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.services-head h6 { color: var(--color-accent-2-600); }
.services-head h2 { font-size: 40px; color: var(--color-heading); margin-top: 6px; max-width: 14em; }
.services-head .btn { padding: 12px 24px; }
#services .grid-3 { gap: 20px; }

.service-card {
  border-radius: 24px;
  padding: 24px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.service-chip {
  position: relative;
  display: inline-flex;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  padding: 3px;
  background: var(--tiedye);
  align-items: center;
  justify-content: center;
}
.service-chip > span {
  display: inline-flex;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  align-items: center;
  justify-content: center;
}
.service-card h3 { font-size: 20px; color: var(--color-heading); margin: 2px 0 0; }
.service-card p {
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: 0;
  font-size: 14.5px;
}
.services-note {
  text-align: center;
  margin-top: 28px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  font-size: 14.5px;
}
.phone-inline { color: var(--color-accent-700); font-weight: 600; }

/* ==========================================================================
   Pricing
   ========================================================================== */
#pricing { padding: 84px 0; }
#pricing .sec-head { max-width: 34em; margin-bottom: 34px; }
#pricing .sec-head h6 { color: var(--color-accent-2-700); }

.tier-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
}
.tier-tab {
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  padding: 11px 20px;
  transition: background .18s;
  background: #fff;
  color: var(--color-accent-700);
  box-shadow: var(--shadow-sm);
}
.tier-tab[aria-selected="true"] { background: var(--color-accent-600); color: #fff; box-shadow: none; }

.price-frame {
  border-radius: 28px;
  padding: 7px;
  background: var(--tiedye);
  box-shadow: var(--shadow-md);
}
.price-body { background: #fff; border-radius: 22px; overflow: hidden; }
/* --price-cols is set by app.js — the column count changes per pricing tab. */
.price-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(var(--price-cols, 3), minmax(0, .62fr));
  gap: 18px;
  align-items: center;
  padding: 16px 26px;
  background: #fff;
}
.price-row.is-alt { background: var(--color-accent-100); }
.price-head {
  background: var(--color-accent-200);
  padding-top: 18px;
  padding-bottom: 18px;
}
.price-head > div {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--color-heading);
}
.price-head > div + div { text-align: right; }
.price-name { font-weight: 700; font-size: 15.5px; color: var(--color-text); }
.price-breeds {
  font-size: 13px;
  font-style: italic;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  margin-top: 2px;
}
.price-cell {
  text-align: right;
  font-family: var(--font-heading);
  font-size: 19px;
  color: var(--color-accent-700);
}
.price-note {
  text-align: center;
  margin-top: 22px;
  font-size: 14.5px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

/* ==========================================================================
   Reviews
   ========================================================================== */
#reviews { background: var(--color-surface); padding: 84px 0; }
#reviews .sec-head { max-width: 30em; }
/* Designed to sit on one line; released to wrap only on small screens. */
#reviews .sec-h2 { white-space: nowrap; }
#reviews .grid-3 { gap: 22px; align-items: start; }

.review-card {
  border-radius: 26px;
  padding: 22px;
  box-shadow: var(--shadow-md);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}
.stars { color: var(--color-accent-2-500); font-size: 17px; letter-spacing: 3px; }
.review-card blockquote { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--color-text); }
.review-card figcaption {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}
.review-initial {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent-200);
  color: var(--color-heading);
  font-family: var(--font-heading);
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex: none;
}
.review-who { line-height: 1.3; }
.review-who strong { color: var(--color-heading); font-weight: 600; }
.review-who small { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.reviews-cta { text-align: center; margin-top: 38px; }
.reviews-cta .btn { padding: 13px 26px; }
.reviews-cta .stars { letter-spacing: 2px; margin-right: 8px; }

/* ==========================================================================
   Gallery
   ========================================================================== */
#gallery { max-width: var(--wrap); margin: 0 auto; padding: 84px var(--pad); }
#gallery .sec-head { max-width: 30em; margin-bottom: 40px; }
#gallery .sec-lede { color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* Rows take their height from the square tiles, so the tall first tile comes
   out as exactly two of them plus the gap — no fixed row height to keep in
   sync with the column width. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 16px;
}
.gal-tile {
  aspect-ratio: 1;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  display: block;
  /* A transparent border reveals the tie-dye behind it. background-origin has
     to be border-box: left at the default (padding-box) the gradient is sized
     to the image area only, and the ring shows a stretched edge colour rather
     than the rainbow — which is what made this look wrong next to the hero
     frame and the pricing panel. */
  border: 5px solid transparent;
  background: var(--tiedye) border-box;
}
.gal-tile:first-child { grid-row: span 2; aspect-ratio: auto; }
.gal-tile img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Service area
   ========================================================================== */
#area { padding: 84px 0; }
.area-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 48px;
  align-items: center;
}
.area-grid h6 { color: var(--color-accent-2-600); }
.area-grid h2 { font-size: 40px; color: var(--color-heading); margin-top: 6px; }
.area-lede {
  font-size: 17px;
  color: color-mix(in srgb, var(--color-text) 74%, transparent);
  margin-top: 12px;
}
.area-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }

.map-wrap {
  position: relative;
  background: #fff;
  border-radius: 32px;
  padding: 14px;
  box-shadow: var(--shadow-lg);
}
.map-wrap svg { width: 100%; height: auto; display: block; border-radius: 22px; background: #eef4fb; }
.map-pill {
  position: absolute;
  bottom: 28px;
  right: 30px;
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
#faq { max-width: 820px; margin: 0 auto; padding: 84px var(--pad); }
#faq .sec-head { margin-bottom: 38px; }
#faq h2 { font-size: 40px; color: var(--color-heading); margin-top: 6px; }

.faq-card {
  border-radius: 26px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-item { border-bottom: 1px solid var(--color-divider); }
.faq-item:last-child { border-bottom: 0; }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: 22px 18px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  color: var(--color-heading);
}
.faq-q svg { flex: none; transition: transform .2s; }
.faq-q[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq-a {
  padding: 0 18px 24px;
  font-size: 15.5px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.faq-a[hidden] { display: none; }

/* ==========================================================================
   CTA + footer
   ========================================================================== */
.site-footer {
  background: var(--color-accent-800);
  color: var(--color-accent-100);
  padding: 72px 0 34px;
  position: relative;
  overflow: hidden;
}
.footer-orb {
  position: absolute;
  top: -40px;
  right: -30px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.5), rgba(255,255,255,.06) 46%, rgba(60,199,198,.26) 74%, transparent);
  animation: floaty3 8s ease-in-out infinite;
  pointer-events: none;
}
.footer-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); position: relative; }

.cta-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
  background: color-mix(in srgb, #fff 8%, transparent);
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
  border-radius: 30px;
  padding: 40px;
}
/* max-width + balance + 1.15 together are what stop "day" orphaning. */
.cta-grid h2 {
  font-size: 34px;
  color: #fff;
  margin: 0;
  max-width: 13ch;
  text-wrap: balance;
  line-height: 1.15;
}
.cta-grid p { color: var(--color-accent-200); font-size: 16px; margin: 12px 0 0; max-width: 32em; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; }
.btn-teal { background: var(--color-accent-2-500); color: #fff; padding: 15px 26px; font-size: 16px; }
.btn-teal:hover { background: var(--color-accent-2-600); }
.cta-actions .phone-plain {
  display: block;
  text-align: center;
  font-size: 18px;
  color: #fff;
  padding: 6px 0;
}

.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  margin-top: 52px;
  padding-top: 34px;
  border-top: 1px solid color-mix(in srgb, #fff 14%, transparent);
}
.foot-grid h6 { color: var(--color-accent-300); margin-bottom: 12px; }
.foot-col { font-size: 14.5px; }
.foot-col p { margin: 0 0 8px; }
.foot-col a { color: #fff; text-decoration: none; }
.foot-col a:hover { text-decoration: underline; }
.foot-brand .brand-name { color: #fff; }
.foot-brand .brand-sub { color: var(--color-accent-2-300); }
.foot-brand p { color: var(--color-accent-200); margin: 14px 0 0; max-width: 30em; font-size: 14.5px; }
.socials { display: flex; gap: 10px; margin: 4px 0 12px; }
.socials a {
  display: inline-flex;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 13%, transparent);
  color: #fff;
  align-items: center;
  justify-content: center;
  transition: background .18s;
}
.socials a:hover { background: var(--color-accent-2-500); }
.foot-stars { color: var(--color-accent-2-300); letter-spacing: 1px; margin-right: 6px; }
.copyright { margin: 34px 0 0; font-size: 12.5px; color: var(--color-accent-300); }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width: 1080px) {
  .nav-row { flex-wrap: wrap; justify-content: center; row-gap: 14px; }
  .nav-spacer { display: none; }
  .nav-links {
    width: 100%;
    order: 3;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--color-divider);
  }
}

@media (max-width: 900px) {
  .hero-grid, .area-grid, .cta-grid, .foot-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .gal-tile, .gal-tile:first-child { grid-row: auto; grid-column: auto; aspect-ratio: 1/1; }
  .hero-title { font-size: 44px; }
  .sec-h2, .services-head h2, .area-grid h2, #faq h2 { font-size: 32px; }
  .nav-row { padding-inline: 20px; }
}

@media (max-width: 620px) {
  :root { --pad: 20px; }
  .grid-3 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; gap: 14px; }
  .gal-tile, .gal-tile:first-child { grid-column: auto; aspect-ratio: 4/3; }
  /* On a phone the design's 1.7fr name column squeezed the price columns to
     ~41px, which clipped "$105+" on most cells. Narrowing the name column and
     tightening the gap gives the prices room.

     These must stay fr units: every row is its own grid container, so only
     fr resolves to identical track widths across rows. Sizing the price
     columns to their content instead leaves them ragged down the table. */
  .price-row {
    grid-template-columns: minmax(0, 1.25fr) repeat(var(--price-cols, 3), minmax(0, .62fr));
    gap: 10px;
    padding-inline: 16px;
  }
  .price-cell { font-size: 17px; }
  .price-name { font-size: 14.5px; }
  .price-breeds { font-size: 12px; }
  .hero-title { font-size: 36px; }
  /* Matches the #reviews selector above so the nowrap is actually released. */
  #reviews .sec-h2 { white-space: normal; }
  .deco { display: none; }
  .cta-grid { padding: 28px 22px; }
}

/* Very narrow phones (~320px). The price table is the one thing that can't
   just reflow, so it gets a tighter pass of its own. */
@media (max-width: 360px) {
  .price-row {
    grid-template-columns: minmax(0, 1fr) repeat(var(--price-cols, 3), minmax(0, .62fr));
    gap: 8px;
    padding-inline: 12px;
  }
  .price-cell { font-size: 15.5px; }
  .price-name { font-size: 14px; }
  .price-breeds { font-size: 11.5px; }
}

/* Motion is decorative throughout — none of it conveys meaning. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .deco, .footer-orb { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}