/* ==========================================================================
   Petlife — petlifeindia.co
   Clean, modern, minimalist. Green used as accent, never as a wall.
   Display: Fraunces · Body: Figtree · Script accent: Caveat
   ========================================================================== */

:root {
  /* ---- Core brand ----------------------------------------------------------
     --primary   logo, main headings, primary buttons, active icons, links
     --secondary secondary icons, success indicators
     --accent    UI glows, success states, button hover/active                */
  --primary:        #1F6B3C;
  --secondary:      #4A8E62;
  --accent:         #7EC98A;

  --primary-dark:   #185632;
  --primary-light:  #2D6B43;
  --success:        #38B34A;
  --light-green:    #DDEBDD;
  --surface-bg:     #F5F8F4;
  --bg-white:       #FFFFFF;

  /* ---- Decorative background palette ---------------------------------------
     Used only by the .deco layer: blurred organic blobs, paw glyphs, dotted
     grids and wave shapes. Never for text or controls.                       */
  --blob-dark:      #2F6B45;
  --blob-mid:       #4F8A5E;
  --blob-sage:      #DCEEDF;
  --blob-faint:     #F4F8F5;

  --text-primary:     #2F343A;
  --text-secondary:   #68717A;
  --text-placeholder: #9AA3AA;
  --border-color:     #E3E6E3;

  --btn-gradient: linear-gradient(135deg, #2D6B43 0%, #185632 100%);

  /* Single warm tone, reserved for star glyphs only — green stars misread. */
  --star: #E0A63F;

  --shadow-sm:   0 1px 2px rgba(47,52,58,0.04);
  --shadow-card: 0 2px 12px rgba(47,52,58,0.06);
  --shadow-lift: 0 10px 28px rgba(47,52,58,0.10);
  --shadow-deep: 0 24px 56px rgba(47,52,58,0.14);

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Figtree", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script:  "Caveat", "Bradley Hand", cursive;

  --container: 1160px;
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Page-wide green wash — the same family of greens the header sits on, carried
     the whole way down so no band of the page is bare white. Fixed attachment so
     it reads as one continuous field rather than repeating per section. */
  background:
    radial-gradient(900px 620px at 10% 4%,   rgba(220,238,223,0.85), transparent 62%),
    radial-gradient(820px 700px at 92% 20%,  rgba(126,201,138,0.26), transparent 64%),
    radial-gradient(900px 720px at 6% 44%,   rgba(79,138,94,0.16),   transparent 60%),
    radial-gradient(880px 700px at 96% 64%,  rgba(220,238,223,0.75), transparent 62%),
    radial-gradient(820px 680px at 18% 86%,  rgba(47,107,69,0.13),   transparent 60%),
    var(--bg-white);
  background-attachment: fixed;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
em { font-style: italic; }
:focus-visible { outline: 3px solid rgba(29,107,60,0.45); outline-offset: 3px; border-radius: 6px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 760px; }
.container--mid { max-width: 920px; }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-block;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--primary);
  background: var(--light-green);
  padding: 7px 16px;
  border-radius: 50px;
  margin-bottom: 20px;
}
.eyebrow--center { display: table; margin-left: auto; margin-right: auto; }

.section { padding: 104px 0; }
.section--tight { padding: 84px 0; }
/* Translucent, so the page-wide green wash and the paw layer read through the
   alternating sections instead of being covered by a flat panel. */
.section--surface { background: rgba(220,238,223,0.42); }
.section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--primary);
  max-width: 660px;
}
.section__title em { color: var(--primary); font-weight: 600; }
.section__title--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__sub { color: var(--text-secondary); font-size: 1.05rem; max-width: 540px; margin-top: 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  border-radius: 50px; padding: 14px 28px; min-height: 46px;
  border: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .25s var(--ease), border-color .25s var(--ease);
}
.btn--primary {
  background: var(--btn-gradient); color: #fff;
  box-shadow: 0 2px 8px rgba(24,86,50,0.18);
}
/* Accent green carries the hover/active glow on every primary control. */
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(24,86,50,0.24), 0 0 0 4px rgba(126,201,138,0.32);
}
.btn--primary:active { transform: translateY(0); box-shadow: 0 0 0 5px rgba(126,201,138,0.45); }
.btn--outline {
  background: transparent; color: var(--primary);
  border: 1.5px solid var(--primary);
}
.btn--outline:hover { transform: translateY(-2px); background: var(--light-green); box-shadow: var(--shadow-sm); }
.btn--ghost {
  background: var(--bg-white); color: var(--text-primary);
  border: 1px solid var(--border-color);
}
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-sm); }
.btn--sm { padding: 10px 20px; font-size: 14px; min-height: 40px; }
.btn--full { width: 100%; border-radius: 14px; padding: 16px 20px; margin-top: 6px; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ---------- Badges & status dots ---------- */
.badge {
  font-size: 11px; font-weight: 600; border-radius: 50px;
  padding: 4px 11px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.badge--green   { background: var(--light-green); color: var(--primary); }
.badge--neutral { background: var(--surface-bg); color: var(--text-secondary); }
.badge--grey    { background: var(--surface-bg); color: var(--text-secondary); }

/* Live dot — the one intentional loop: faint, slow, non-distracting. */
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; position: relative; flex-shrink: 0;
  background: var(--success);
}
.dot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; background: var(--success);
  animation: dotPulse 2.5s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1);   opacity: .45; }
  50%      { transform: scale(1.2); opacity: .12; }
}
.dot--muted { background: var(--text-placeholder); }
.dot--muted::after { display: none; }

/* ==========================================================================
   NAV
   ========================================================================== */
/* The header floats as a white pill over the hero's decorative layer, rather than
   spanning the full viewport width. On scroll it tightens and gains a stronger
   sage ring; the pill itself never changes colour, so the logo keeps its contrast. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 28px 0;
  transition: padding .3s var(--ease);
}
.nav__inner {
  max-width: 1240px; margin: 0 auto;
  padding: 10px 14px 10px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  background: rgba(247,252,248,0.78);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(126,201,138,0.5);
  border-radius: 60px;
  box-shadow: 0 2px 10px rgba(47,107,69,0.05);
  transition: background .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
/* backdrop-filter establishes a CSS containing block, which traps the mobile
   menu's position:fixed overlay inside this small rounded pill instead of the
   viewport - its "full-screen" white background then only covers the pill,
   and the menu links render outside it with nothing solid behind them. The
   burger click handler in main.js toggles this class purely to drop the
   blur while the menu is open, freeing the overlay to fill the screen as
   intended. Background stays solid so the pill itself doesn't look empty. */
.nav.nav--menu-open .nav__inner {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: var(--bg-white);
}
.nav.is-scrolled, .nav.is-solid { padding: 10px 0; }
.nav.is-scrolled .nav__inner, .nav.is-solid .nav__inner {
  background: rgba(255,255,255,0.94);
  border-color: rgba(126,201,138,0.55);
  box-shadow: 0 8px 26px rgba(47,107,69,0.12);
}
.nav.is-solid { position: sticky; }

@media (max-width: 1300px) { .nav__inner { margin: 0 20px; } }
.nav__logo { display: flex; align-items: center; gap: 11px; }
/* The supplied brand file is a square tile with its dark-green field baked in,
   so the corners are rounded in CSS rather than by altering the asset itself. */
.nav__logo img, .footer__logo img, .app-hero__logo img {
  flex-shrink: 0; display: block; border-radius: 24%;
}
/* Scaled down from the 46px in the markup to match the tightened footer. */
.footer__logo img { width: 37px; height: 37px; }
.nav__logo-lock { display: flex; flex-direction: column; line-height: 1; }
.nav__logo-text {
  font-family: var(--font-display); font-weight: 700; font-size: 23px;
  color: var(--primary); letter-spacing: -0.02em;
}
.nav__logo-tag {
  font-size: 9.5px; font-weight: 700; color: var(--text-secondary);
  letter-spacing: 0.16em; text-transform: uppercase; margin-top: 3px;
}
.nav__links { display: flex; gap: 38px; }
.nav__links a {
  font-size: 14.5px; font-weight: 500; color: var(--text-primary);
  position: relative; padding: 6px 0;
  transition: color .25s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current] { color: var(--primary); font-weight: 600; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; border-radius: 2px;
  background: var(--primary); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current]::after { transform: scaleX(1); }
.nav__actions { display: flex; align-items: center; gap: 6px; }
.nav__icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--primary); background: transparent;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.nav__icon:hover { background: var(--light-green); transform: translateY(-2px); }
.nav__phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--primary);
  padding: 9px 14px; border-radius: 50px; margin-right: 8px;
  transition: background .25s var(--ease);
}
.nav__phone:hover { background: var(--light-green); }
.nav__burger {
  display: none; flex-direction: column; justify-content: center;
  align-items: center; gap: 5px;
  width: 42px; height: 42px; padding: 0;
  background: var(--surface-bg); border: 1px solid var(--border-color);
  border-radius: 50%; cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.nav__burger:hover { background: var(--light-green); border-color: var(--primary); }
.nav__burger span {
  width: 18px; height: 2px; border-radius: 2px; background: var(--text-primary);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
/* Bars sit at 0 / 7 / 14px (2px tall, 5px gap), so the outer two travel 7px to
   meet in the middle and cross. Keep in step with the height/gap above. */
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   DECORATIVE LAYER — blurred organic blobs, paw glyphs, dotted grids, waves.
   Purely presentational: the container is aria-hidden in the markup and
   pointer-events:none here, so it never intercepts a click or reaches a
   screen reader. Everything sits on the white page background.
   ========================================================================== */
.deco {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}

/* Blobs — irregular border-radius plus a heavy blur reads as an organic wash.
   Opacities stay inside the 20–60% band the design system specifies. */
/* A sage wash across the top of the section, so the header sits on green rather
   than on bare white. Strongest behind the nav, gone by mid-hero. */
.deco__wash {
  position: absolute; inset: 0 0 auto 0; height: 68%;
  background:
    linear-gradient(180deg, rgba(220,238,223,0.95) 0%, rgba(220,238,223,0.45) 42%, rgba(244,248,245,0) 100%);
}

.deco__blob { position: absolute; filter: blur(70px); will-change: transform; }
.deco__blob--1 {
  width: 560px; height: 500px; top: -150px; right: -110px;
  background: var(--blob-dark); opacity: 0.34;
  border-radius: 62% 38% 45% 55% / 55% 48% 52% 45%;
}
.deco__blob--2 {
  width: 500px; height: 450px; top: 140px; left: -150px;
  background: var(--blob-mid); opacity: 0.42;
  border-radius: 44% 56% 62% 38% / 48% 58% 42% 52%;
}
.deco__blob--3 {
  width: 620px; height: 520px; bottom: -220px; left: 28%;
  background: var(--blob-sage); opacity: 0.6;
  border-radius: 55% 45% 38% 62% / 42% 55% 45% 58%;
}
.deco__blob--4 {
  width: 700px; height: 560px; top: -60px; left: 12%;
  background: var(--blob-faint); opacity: 0.55;
  border-radius: 48% 52% 58% 42% / 60% 44% 56% 40%;
}
/* Two extra accents so the green carries across the full width of the header. */
.deco__blob--5 {
  width: 380px; height: 340px; top: -110px; left: 30%;
  background: var(--blob-mid); opacity: 0.3;
  border-radius: 58% 42% 50% 50% / 46% 56% 44% 54%;
}
.deco__blob--6 {
  width: 340px; height: 320px; top: 60px; right: 26%;
  background: var(--accent); opacity: 0.28;
  border-radius: 50% 50% 42% 58% / 54% 44% 56% 46%;
}

/* Dotted grids — 15–25% opacity, masked so they fade rather than end abruptly. */
.deco__dots {
  position: absolute; opacity: 0.22;
  background-image: radial-gradient(var(--secondary) 1.7px, transparent 1.7px);
  background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
}
.deco__dots--1 { width: 190px; height: 150px; top: 128px; right: 8%; }
.deco__dots--2 { width: 160px; height: 130px; bottom: 96px; left: 5%; }

/* Paw glyphs — transparent, drifting very slowly. */
.deco__paw { position: absolute; color: var(--primary); opacity: 0.16; }
.deco__paw--1 { width: 74px; top: 152px; left: 7%;  transform: rotate(-18deg); animation: deco-drift 13s ease-in-out infinite; }
.deco__paw--2 { width: 52px; top: 300px; right: 14%; transform: rotate(24deg);  animation: deco-drift 17s ease-in-out infinite 1.4s; }
.deco__paw--3 { width: 42px; bottom: 84px; left: 42%; transform: rotate(-9deg);  animation: deco-drift 15s ease-in-out infinite .7s; opacity: 0.2; }

@keyframes deco-drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -16px; }
}

/* Organic wave closing the section. */
.deco__wave {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: 190px; color: var(--blob-mid); opacity: 0.18;
}

@media (prefers-reduced-motion: reduce) {
  .deco__paw { animation: none; }
}
@media (max-width: 720px) {
  .deco__blob { filter: blur(50px); }
  .deco__dots--1, .deco__paw--2 { display: none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; padding: 182px 0 84px; overflow: hidden; }
.hero__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 56px; align-items: center;
  position: relative; z-index: 1;
}
.hero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.3rem, 4.1vw, 3.4rem);
  line-height: 1.1; letter-spacing: -0.02em;
  margin-bottom: 22px; max-width: none;
}
.hero__title em { color: var(--primary); }
.hero__tagline {
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  color: var(--primary); line-height: 1.1;
  margin: -6px 0 20px;
}
.hero__sub { font-size: 1rem; color: var(--text-secondary); max-width: none; margin-bottom: 26px; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.hero__proof { display: flex; align-items: center; gap: 12px; color: var(--text-secondary); font-size: 12.5px; }
.hero__proof strong { color: var(--text-primary); font-weight: 600; }
.hero__stars { color: var(--star); letter-spacing: 2px; font-size: 13px; }

/* Forced line breaks.
   The exact line counts requested for the hero, join and contact copy are only
   achievable at a known column width, so the breaks are inserted as markup and
   switched off below 1120px — under that the columns are too narrow to honour
   them and the text reflows naturally instead of breaking in the wrong place. */
.lb { display: none; }
@media (min-width: 1120px) { .lb { display: inline; } }

/* Zero-commission promise, stated up front */
.hero__promise {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--light-green); color: var(--primary);
  border-radius: 50px; padding: 9px 18px;
  font-size: 13.5px; font-weight: 600; margin-bottom: 22px;
}
.hero__promise strong { font-weight: 700; }

/* --- Phone --- */
.hero__phone-wrap { position: relative; display: flex; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-white); border: 1px solid var(--border-color);
  border-radius: 50px; padding: 10px 16px;
  font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-lift);
}
.chip__star { color: var(--star); }
.chip--float { position: absolute; z-index: 3; }
.chip--rating { top: 8%; left: -14%; }
.chip--live { bottom: 19%; right: -8%; }

.phone {
  width: 318px; border-radius: 44px;
  background: #23282E; padding: 10px;
  box-shadow: var(--shadow-deep);
  transform: rotate(2deg);
  transition: transform .5s var(--ease);
}
.phone:hover { transform: rotate(0deg) translateY(-4px); }
.phone__screen {
  border-radius: 36px; overflow: hidden;
  background: var(--surface-bg);
  display: flex; flex-direction: column;
  height: 688px; position: relative;
}
.app-hero {
  background: linear-gradient(160deg, #185632 0%, #1D6B3C 45%, #2D6B43 100%);
  padding: 22px 20px 44px; position: relative;
}
.app-hero__nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.app-hero__logo { display: flex; align-items: center; gap: 7px; color: #fff; font-weight: 700; font-size: 16px; letter-spacing: -0.3px; }
.app-bell {
  position: relative; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.26);
  display: grid; place-items: center; color: #fff;
}
.app-bell__dot {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #FF6B57; border: 1.5px solid #1D6B3C;
}
.app-hero__greet { color: rgba(255,255,255,0.78); font-size: 12px; margin-bottom: 5px; }
.app-hero__title { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.25; margin-bottom: 16px; }
.app-gps {
  background: var(--bg-white); border-radius: 16px; padding: 12px 14px;
  display: flex; align-items: center; gap: 11px;
  box-shadow: 0 8px 22px rgba(24,86,50,0.18);
  position: relative; z-index: 2;
}
.app-gps__icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: var(--btn-gradient);
  display: grid; place-items: center; font-size: 15px;
}
.app-gps__text { display: flex; flex-direction: column; line-height: 1.3; }
.app-gps__text strong { font-size: 12.5px; font-weight: 600; }
.app-gps__text span { font-size: 10.5px; color: var(--text-secondary); }
.app-gps__arrow { margin-left: auto; color: var(--primary); font-size: 18px; font-weight: 700; }
.app-hero__curve {
  position: absolute; left: -10%; right: -10%; bottom: -26px; height: 60px;
  background: var(--surface-bg); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
/* Sits above the hero's curve overlay (which would otherwise clip the first
   icon row) and clears the floating nav pill at the bottom. */
.app-body {
  position: relative; z-index: 1;
  padding: 26px 16px 86px; flex: 1;
}

/* Services: 4 columns x 2 rows, nothing clipped */
.app-cats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px 4px; margin-bottom: 14px;
}
.app-cat {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 500; color: var(--text-secondary);
  text-align: center; min-width: 0;
}
.app-cat__icon {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--light-green);
  display: grid; place-items: center; font-size: 19px;
}
.app-cat:nth-child(even) .app-cat__icon { background: var(--surface-bg); }

/* Vaccination reminder */
.app-vax {
  display: flex; align-items: center; gap: 10px;
  background: #FFF4E2; border: 1px solid #F5DFBC;
  border-radius: 14px; padding: 10px 11px; margin-bottom: 10px;
}
.app-vax__icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: #FBE3C0; display: grid; place-items: center; font-size: 15px;
}
.app-vax__text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.app-vax__text strong { font-size: 11px; font-weight: 700; color: #7A4E12; }
.app-vax__text span { font-size: 9.5px; color: #A07536; }
.app-vax__cta {
  margin-left: auto; flex-shrink: 0;
  background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: 50px; padding: 5px 12px;
}

.app-card {
  background: var(--bg-white); border-radius: 16px; padding: 11px;
  display: flex; gap: 11px;
  border: 1px solid var(--border-color);
}
.app-card__avatar {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  background: var(--light-green);
  display: grid; place-items: center; font-size: 20px;
}
.app-card__info { display: flex; flex-direction: column; min-width: 0; }
.app-card__info strong { font-size: 13.5px; font-weight: 600; }
.app-card__service { font-size: 10.5px; font-weight: 500; color: var(--primary); }
.app-card__meta { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.app-card__meta .badge { font-size: 9.5px; padding: 2px 8px; }
.app-card__rating { font-size: 11px; font-weight: 700; }
.app-card__rating::first-letter { color: var(--star); }
.app-nav {
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  background: var(--primary-dark); border-radius: 50px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 9px 6px;
  box-shadow: 0 10px 24px rgba(24,86,50,0.28);
}
.app-nav__tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 13px; opacity: .55;
  padding: 3px 0; border-radius: 12px;
}
.app-nav__tab i { font-style: normal; font-size: 7px; color: #fff; font-weight: 500; letter-spacing: -0.1px; }
.app-nav__tab--active { opacity: 1; background: rgba(255,255,255,0.14); }
.app-nav__tab--active i { font-weight: 700; }

/* ==========================================================================
   PROMISE BAND — 0% commission, stated plainly
   ========================================================================== */
/* Sits directly under the hero, so it carries generous padding on both sides to
   separate the value proposition from the hero above and the body content below. */
.promise { padding: 68px 0 108px; }
.promise__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border-color); border-radius: 22px;
  overflow: hidden; background: var(--bg-white);
}
.promise__item { padding: 38px 32px; border-right: 1px solid var(--border-color); }
.promise__item:last-child { border-right: none; }
.promise__num {
  font-family: var(--font-display); font-size: 2rem; font-weight: 600;
  color: var(--primary); display: block; line-height: 1.1; margin-bottom: 6px;
}
.promise__item h3 { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.promise__item p { font-size: 14px; color: var(--text-secondary); }

/* ==========================================================================
   PHOTO GALLERY (static — no looping motion)
   ========================================================================== */
.gallery { padding: 0 0 96px; }
.gallery__grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
.gallery figure {
  border-radius: 16px; overflow: hidden; background: var(--surface-bg);
  border: 1px solid var(--border-color);
  transition: transform .3s var(--ease), border-color .25s var(--ease);
}
.gallery figure:hover { transform: translateY(-4px); border-color: var(--primary); }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery figcaption {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  text-align: center; padding: 9px 6px; background: var(--bg-white);
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 50px; }
.service {
  background: var(--bg-white); border-radius: 20px; padding: 26px 24px;
  display: flex; flex-direction: column; align-items: flex-start;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.service:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: var(--shadow-card);
}
.service__icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--tint, var(--surface-bg));
  display: grid; place-items: center; font-size: 26px;
  margin-bottom: 16px;
  transition: transform .25s var(--ease);
}
.service:hover .service__icon { transform: scale(1.06); }
.service h3 { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; margin-bottom: 7px; }
.service p { font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; }
.service__link { font-size: 14px; font-weight: 600; color: var(--primary); margin-top: auto; }

.script-band {
  font-family: var(--font-script); font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  color: var(--primary); text-align: center; margin-top: 50px; line-height: 1.2;
}
.script-band em { color: var(--success); font-style: normal; }

/* ==========================================================================
   THE GARDEN WALK (how it works) — trail draws with scroll, not on a loop
   ========================================================================== */
.walk { padding: 104px 0 60px; position: relative; }
.walk__stage { position: relative; max-width: 980px; margin: 40px auto 0; padding: 20px 24px 60px; min-height: 1200px; }
.walk__path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.walk__paw {
  position: absolute; left: var(--x); top: var(--y);
  font-size: 24px; transform: translate(-50%,-50%) scale(0.9);
  opacity: 0;
  transition: transform .6s var(--ease), opacity .6s var(--ease);
}
.walk__paw.is-stamped { transform: translate(-50%,-50%) scale(1); opacity: .55; }

.walk-step {
  position: relative; z-index: 2;
  width: min(400px, 82%);
  background: var(--bg-white); border: 1px solid var(--border-color);
  border-radius: 22px; padding: 30px;
  box-shadow: var(--shadow-card);
  margin-bottom: 120px;
}
.walk-step--left  { margin-right: auto; }
.walk-step--right { margin-left: auto; }
.walk-step:last-child { margin-bottom: 0; margin-left: auto; margin-right: auto; }
.walk-step__marker {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary); background: var(--light-green);
  border-radius: 50px; padding: 5px 13px; margin-bottom: 14px;
}
.walk-step h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; margin-bottom: 10px; line-height: 1.25; }
.walk-step > p { font-size: 15px; color: var(--text-secondary); }
.walk-step__vignette { margin-top: 20px; }

.mini-gps { display: flex; align-items: center; gap: 12px; background: var(--surface-bg); border-radius: 14px; padding: 13px 16px; }
.mini-gps__icon { width: 38px; height: 38px; border-radius: 11px; background: var(--btn-gradient); display: grid; place-items: center; font-size: 17px; }
.mini-gps div { display: flex; flex-direction: column; line-height: 1.35; }
.mini-gps strong { font-size: 14px; }
.mini-gps em { font-style: normal; font-size: 12px; color: var(--primary); font-weight: 600; }

.mini-otp { display: flex; gap: 9px; }
.mini-otp span {
  width: 46px; height: 54px; border-radius: 12px;
  background: var(--surface-bg); border: 1.5px solid var(--border-color);
  display: grid; place-items: center; font-size: 22px; font-weight: 700;
}
.mini-otp__active { border-color: var(--primary) !important; background: var(--bg-white) !important; box-shadow: 0 0 0 3px rgba(29,107,60,0.12); }
.mini-caption { font-size: 13px; color: var(--primary); font-weight: 600; margin-top: 12px; }

.mini-review { background: var(--surface-bg); border-radius: 14px; padding: 16px 18px; }
.mini-review__stars { color: var(--star); letter-spacing: 2px; margin-bottom: 6px; }
.mini-review p { font-size: 14px; font-style: italic; margin-bottom: 8px; }
.mini-review span { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.strip { padding: 40px 0 96px; }
.strip__card {
  background: var(--btn-gradient);
  border-radius: 24px; padding: 44px 30px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  position: relative; overflow: hidden;
}
.strip__card::after {
  content: "🐾"; position: absolute; right: -14px; bottom: -26px;
  font-size: 130px; opacity: .07; transform: rotate(-18deg);
}
.strip__stat { text-align: center; position: relative; }
.strip__stat + .strip__stat::before {
  content: ""; position: absolute; left: -12px; top: 12%; bottom: 12%;
  width: 1px; background: rgba(255,255,255,0.18);
}
.strip__num, .strip__plus {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 600; color: #fff;
}
.strip__num--star::after { content: " ★"; color: #FFD98A; font-size: .55em; vertical-align: .28em; }
.strip__label { display: block; font-size: 13.5px; color: rgba(255,255,255,0.78); margin-top: 4px; }

/* ==========================================================================
   BENTO — why petlife
   ========================================================================== */
.bento {
  display: grid; gap: 18px; margin-top: 50px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "tall a b"
    "tall c c"
    "wide wide wide";
}
.bento > .bento__cell:nth-of-type(1) { grid-area: tall; }
.bento > .bento__cell:nth-of-type(2) { grid-area: a; }
.bento > .bento__cell:nth-of-type(3) { grid-area: b; }
.bento > .bento__cell:nth-of-type(4) { grid-area: c; }
.bento > .bento__cell:nth-of-type(5) { grid-area: wide; }
.bento__cell {
  background: var(--bg-white); border: 1px solid var(--border-color);
  border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.bento__cell:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: var(--shadow-card); }
.bento__cell--wide { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.bento__img { width: 100%; height: 240px; flex: 1; min-height: 240px; object-fit: cover; background: var(--surface-bg); }
.bento__illustration svg { display: block; width: 100%; height: 100%; }
.bento__body { padding: 26px; }
.bento__emoji {
  display: inline-grid; place-items: center;
  width: 50px; height: 50px; border-radius: 15px;
  background: var(--surface-bg); font-size: 23px; margin-bottom: 15px;
}
.bento__body h3 { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; margin-bottom: 8px; line-height: 1.3; }
.bento__body p { font-size: 14.5px; color: var(--text-secondary); }
.bento__badges { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
/* Dual-role toggle: the pill glides between the two modes to show the switch. */
.role-toggle {
  position: relative; display: flex;
  background: var(--surface-bg); border: 1px solid var(--border-color);
  border-radius: 50px; padding: 5px; margin: 0 26px 26px; flex-shrink: 0;
}
.role-toggle__pill {
  position: absolute; top: 5px; bottom: 5px; left: 5px;
  width: calc(50% - 5px);
  background: var(--btn-gradient); border-radius: 50px;
  box-shadow: 0 2px 8px rgba(24,86,50,0.22);
  transition: transform .55s var(--ease);
}
.role-toggle.is-buddy .role-toggle__pill { transform: translateX(100%); }
.role-toggle__opt {
  position: relative; z-index: 1; flex: 1;
  border-radius: 50px; padding: 10px 20px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap; text-align: center;
  color: var(--text-secondary);
  transition: color .35s var(--ease);
}
.role-toggle__opt.is-active { color: #fff; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-card {
  background: var(--bg-white); border: 1px solid var(--border-color);
  border-radius: 24px; padding: 34px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.form-card__title { font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; line-height: 1.2; margin-bottom: 8px; }
.form-card__sub { font-size: 14.5px; color: var(--text-secondary); margin-bottom: 24px; }

.field { display: flex; flex-direction: column; margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 6px; display: flex; align-items: baseline; gap: 6px;
}
.field label span[aria-hidden] { color: var(--primary); }
.field__opt { font-size: 11.5px; font-weight: 500; color: var(--text-placeholder); }

.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: 15px; color: var(--text-primary);
  background: var(--bg-white);
  border: 1px solid var(--border-color); border-radius: 12px;
  padding: 13px 15px; width: 100%;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 108px; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-placeholder); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29,107,60,0.12);
}
.field select { cursor: pointer; padding-right: 42px; }
.field select:invalid { color: var(--text-placeholder); }
.select-wrap { position: relative; }
.select-wrap::after {
  content: "›"; position: absolute; right: 17px; top: 50%;
  transform: translateY(-60%) rotate(90deg);
  color: var(--primary); font-size: 19px; font-weight: 700; pointer-events: none;
}
.field.has-error input, .field.has-error textarea, .field.has-error select, .field.has-error .filedrop {
  border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,0.10);
}
.field__error { font-size: 12.5px; color: #C0392B; margin-top: 6px; display: none; }
.field.has-error .field__error { display: block; }
.field__hint { font-size: 12px; color: var(--text-placeholder); margin-top: 6px; }
.field__hint.is-over { color: #C0392B; font-weight: 600; }

/* File upload */
.filedrop {
  display: flex; align-items: center; gap: 13px;
  border: 1px dashed var(--border-color); border-radius: 12px;
  padding: 15px; cursor: pointer; background: var(--bg-white);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.filedrop:hover { border-color: var(--primary); background: var(--surface-bg); }
.filedrop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.filedrop__ico {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: var(--light-green); color: var(--primary);
  display: grid; place-items: center;
}
.filedrop__text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.filedrop__text strong { font-size: 14px; font-weight: 600; }
.filedrop__text span { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filedrop.has-file { border-style: solid; border-color: var(--success); background: var(--surface-bg); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.form-card__status {
  font-size: 14px; font-weight: 600; margin-top: 14px;
  padding: 13px 16px; border-radius: 12px; display: none;
}
.form-card__status.is-ok    { display: block; background: var(--light-green); color: var(--primary); }
.form-card__status.is-error { display: block; background: #FDF2F1; color: #C0392B; }
.form-card__fine { font-size: 12px; color: var(--text-placeholder); margin-top: 14px; line-height: 1.5; }

/* ==========================================================================
   JOIN US
   ========================================================================== */
.join { padding: 96px 0; }
.join__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 50px; align-items: start; }
.join__copy h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.14; margin-bottom: 16px; }
.join__copy h2 em { color: var(--primary); }
.join__sub { color: var(--text-secondary); font-size: 1rem; margin-bottom: 24px; }
.join__list { list-style: none; margin-bottom: 30px; display: grid; gap: 12px; }
.join__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.join__list li span {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--light-green); color: var(--primary); font-size: 12px; font-weight: 700;
  display: grid; place-items: center; margin-top: 2px;
}
.join__photo { position: relative; }
.join__photo img { border-radius: 20px; width: 100%; height: 290px; object-fit: cover; background: var(--surface-bg); }
.chip--earn { position: absolute; bottom: 16px; left: 16px; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
/* One row, scrolled horizontally. Never wraps. */
.quotes {
  display: flex; flex-wrap: nowrap; gap: 18px;
  overflow-x: auto; overscroll-behavior-x: contain;
  margin-top: 50px; padding: 4px 4px 18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.quotes::-webkit-scrollbar { height: 8px; }
.quotes::-webkit-scrollbar-track { background: var(--surface-bg); border-radius: 50px; }
.quotes::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 50px; }
.quotes::-webkit-scrollbar-thumb:hover { background: var(--primary); }
/* Slightly narrower than a clean third, so the next card always peeks in and
   the row reads as scrollable. */
.quote {
  flex: 0 0 clamp(260px, 82vw, 342px);
  scroll-snap-align: start;
  background: var(--bg-white); border: 1px solid var(--border-color);
  border-radius: 20px; padding: 28px;
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.quote:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: var(--shadow-card); }
.quote__stars { color: var(--star); letter-spacing: 2px; margin-bottom: 14px; }
.quote blockquote { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; font-style: italic; line-height: 1.5; margin-bottom: 22px; }
.quote figcaption { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.quote__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--light-green); color: var(--primary);
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
}
.quote figcaption div { display: flex; flex-direction: column; line-height: 1.3; }
.quote figcaption strong { font-size: 14.5px; font-weight: 600; }
.quote figcaption em { font-style: normal; font-size: 12.5px; color: var(--text-secondary); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { margin-top: 44px; display: grid; gap: 12px; }
.faq__item {
  background: var(--bg-white); border: 1px solid var(--border-color);
  border-radius: 16px;
  transition: border-color .25s var(--ease);
}
.faq__item[open], .faq__item:hover { border-color: var(--primary); }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 19px 24px; font-size: 15.5px; font-weight: 600;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chev { font-size: 20px; color: var(--primary); font-weight: 700; transform: rotate(90deg); transition: transform .25s var(--ease); }
.faq__item[open] .faq__chev { transform: rotate(-90deg); }
.faq__item p { padding: 0 24px 21px; color: var(--text-secondary); font-size: 15px; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { padding: 96px 0; }
.contact__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items: start; }
.contact__aside h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.12; margin-bottom: 16px; }
.contact__aside h2 em { color: var(--primary); }
.contact__sub { color: var(--text-secondary); font-size: 1rem; margin-bottom: 28px; max-width: 460px; }
.contact__list { list-style: none; display: grid; gap: 10px; }
.contact__list li {
  display: flex; align-items: center; gap: 15px;
  background: var(--bg-white); border: 1px solid var(--border-color);
  border-radius: 14px; padding: 15px 18px;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.contact__list li:hover { border-color: var(--primary); transform: translateY(-2px); }
.contact__ico {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: var(--light-green); color: var(--primary);
  display: grid; place-items: center;
}
.contact__list div { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.contact__list strong { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; }
.contact__list a { font-size: 15.5px; font-weight: 600; color: var(--primary); word-break: break-word; }

/* ==========================================================================
   FINAL CTA + COMING SOON STORE BUTTONS
   ========================================================================== */
.cta-final { padding: 24px 0 64px; }
.cta-final__card {
  background: var(--btn-gradient);
  border-radius: 26px; padding: 42px 36px;
  text-align: center; position: relative; overflow: hidden;
}
.cta-final__paw { position: absolute; left: -18px; bottom: -34px; font-size: 130px; opacity: .07; transform: rotate(16deg); }
/* Pet pair above the closing pitch — transparent cutout, so it sits on the green
   gradient without a plate behind it. Portrait crop, so kept narrow to stay in
   proportion with the heading below it. */
/* Anchored to the bottom-right of the card so it costs the section no vertical
   height, balancing the paw watermark on the left. max-height keeps it inside
   the card whatever the card's own height turns out to be, and it is hidden
   outright below 900px rather than faded — a barely-visible photo behind centred
   text reads as a broken image, not as a watermark. */
.cta-final__card h2 {
  font-family: var(--font-display); color: #fff; font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15;
  letter-spacing: -0.015em; margin-bottom: 8px; position: relative;
}
.cta-final__card h2 em { color: #A8DDB0; }
/* No generic `.cta-final__card > p` rule: the only paragraphs left in this card
   are .soon-tag and .script-line, and a descendant rule here outranks both of
   their own class selectors, silently overriding their type sizes. */
/* The two real actions in this banner. They lead the store badges below both by
   position and by colour, because these are the things a visitor can actually do
   today — the badges are informational until the apps are published. */
.cta-final__actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  position: relative; margin-bottom: 18px;
}
.cta-final__btn {
  background: #fff; color: var(--primary-dark);
  box-shadow: 0 8px 22px rgba(0,0,0,0.20);
}
.cta-final__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.26); }
.cta-final__btn--alt {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,0.55); box-shadow: none;
}
.cta-final__btn--alt:hover { background: rgba(255,255,255,0.12); border-color: #fff; box-shadow: none; }

.cta-final__buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }

.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.26);
  color: #fff; border-radius: 14px; padding: 12px 22px;
  cursor: default; position: relative;
}
.store-btn span { display: flex; flex-direction: column; text-align: left; line-height: 1.25; font-weight: 600; font-size: 15px; }
.store-btn span em { font-style: normal; font-weight: 500; font-size: 10.5px; opacity: .72; }
.store-btn svg { opacity: .85; }

/* Final-CTA variant: crisp glass plates — clearly drawn callout buttons that stay
   legible on the green card, but deliberately a step below the solid white action
   buttons above them. No hover response: these are "coming soon" placeholders
   (role="img"), not links, and a hover state would signal a click target that
   does not exist. */
.cta-final__buttons .store-btn {
  background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.45);
  color: #fff; padding: 13px 24px; border-radius: 16px;
}
.cta-final__buttons .store-btn svg { opacity: .95; }
.cta-final__buttons .store-btn span { font-size: 15px; }
.cta-final__buttons .store-btn span em { opacity: .78; }

.soon-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.22); color: #fff;
  border-radius: 50px; padding: 8px 18px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 20px; position: relative;
}
/* Sits between the heading and the actions, so it keeps a tight margin on both
   sides rather than the trailing-line spacing it had at the foot of the card. */
.script-line { font-family: var(--font-script); font-size: clamp(1.4rem, 2.4vw, 1.75rem); color: #A8DDB0 !important; margin: 0 0 22px !important; position: relative; }


/* ==========================================================================
   CAREERS PAGE
   ========================================================================== */
.page-hero { position: relative; overflow: hidden; padding: 162px 0 64px; background: var(--surface-bg); }
.page-hero .deco__wave { z-index: 0; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.2rem, 4.6vw, 3.5rem); line-height: 1.1;
  letter-spacing: -0.02em; margin-bottom: 18px;
}
.page-hero__title em { color: var(--primary); }
.page-hero__sub { font-size: 1.1rem; color: var(--text-secondary); max-width: 560px; margin-bottom: 30px; }
.page-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.page-hero__sub--wide { max-width: none; }
/* Values heading and similar single-line titles: the 660px cap on
   .section__title is what wraps them, not the length of the words. */
.section__title--wide { max-width: none; }

/* --- Careers: photographed header ---------------------------------------
   The office photo sits under a green gradient rather than on its own. The
   gradient is what makes white text legible over an image whose brightness we
   do not control, and it carries the brand green through the whole header. */
.page-hero--photo { background: var(--primary-dark); }
.page-hero--photo .page-hero__media {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(105deg, rgba(24,86,50,0.94) 0%, rgba(31,107,60,0.86) 45%, rgba(31,107,60,0.62) 100%),
    url("https://images.unsplash.com/photo-1758518731706-be5d5230e5a5?auto=format&fit=crop&w=1600&q=70");
  background-size: cover; background-position: center;
}
/* Extra bottom room so the CTAs clear the white closing wave entirely. */
.page-hero--photo { padding-bottom: 136px; }
.page-hero--photo .deco__wave { color: var(--bg-white); opacity: 1; z-index: 1; }
/* Solid white pill: the light-green chip disappeared against the green photo. */
.page-hero--photo .eyebrow { color: var(--primary-dark); background: #fff; }
.page-hero--photo .page-hero__title { color: #fff; }
.page-hero--photo .page-hero__title em { color: #A8DDB0; }
.page-hero--photo .page-hero__sub { color: rgba(255,255,255,0.9); }
.page-hero--photo .btn--primary { background: #fff; color: var(--primary-dark); }
.page-hero--photo .btn--primary:hover { background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,0.28); }
/* Opaque, not outlined. A transparent button let the white wave paint straight
   through it, leaving white text on white. Solid fill removes the dependency
   on whatever happens to sit behind it. */
.page-hero--photo .btn--outline {
  background: var(--primary-dark); color: #fff;
  border: 1.5px solid rgba(255,255,255,0.55); border-radius: 6px;
}
.page-hero--photo .btn--outline:hover { background: #12442A; border-color: #fff; }

/* --- Legal pages: header artwork ---------------------------------------- */
.legal-art {
  position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
  width: clamp(96px, 12vw, 148px); height: auto; z-index: 0;
}
@media (max-width: 860px) { .legal-art { display: none; } }

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.value {
  background: var(--bg-white); border: 1px solid var(--border-color);
  border-radius: 20px; padding: 28px;
  border-top: 4px solid var(--primary);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.value:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: var(--shadow-card); }
.value__word { font-family: var(--font-script); font-size: 2.1rem; color: var(--primary); display: block; margin-bottom: 6px; line-height: 1; }
.value p { font-size: 14.5px; color: var(--text-secondary); }

.roles { display: grid; gap: 12px; margin-top: 40px; }
.role {
  background: var(--bg-white); border: 1px solid var(--border-color);
  border-left: 4px solid var(--secondary);
  border-radius: 18px; padding: 24px 26px;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.role:hover { border-color: var(--primary); border-left-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.role__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.role__head h3 { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; }
.role p { font-size: 14.5px; color: var(--text-secondary); }
.role__meta { font-size: 13px !important; color: var(--text-placeholder) !important; margin-top: 8px; }
/* Tools + skills, as a definition list so the label/value pairing is real
   structure rather than styled paragraphs. */
.role__specs {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--border-color);
  display: grid; gap: 9px;
}
.role__specs dt {
  font-size: 10.5px; font-weight: 700; color: var(--secondary);
  letter-spacing: 0.11em; text-transform: uppercase; margin-bottom: 2px;
}
.role__specs dd { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.role__apply {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 600; color: var(--primary); margin-top: 12px;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-body);
}
.role__apply:hover { text-decoration: none; color: var(--primary-dark); }

.apply-wrap { max-width: 720px; margin: 0 auto; }
.apply-note {
  background: var(--surface-bg); border: 1px solid var(--border-color);
  border-radius: 16px; padding: 22px 26px; margin-top: 26px;
  font-size: 14.5px; color: var(--text-secondary);
}
.apply-note strong { color: var(--text-primary); }

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal { padding: 64px 0 96px; }
.legal__meta {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  font-size: 13.5px; color: var(--text-secondary); margin-bottom: 8px;
}
.legal__layout { display: grid; grid-template-columns: 232px 1fr; gap: 56px; align-items: start; }

.legal__toc {
  position: sticky; top: 96px;
  background: var(--surface-bg); border: 1px solid var(--border-color);
  border-top: 4px solid var(--primary);
  border-radius: 18px; padding: 22px;
}
.legal__toc h2 {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-secondary); margin-bottom: 12px;
}
.legal__toc ol { list-style: none; counter-reset: toc; display: grid; gap: 3px; }
.legal__toc li { counter-increment: toc; }
.legal__toc a {
  display: block; font-size: 13.5px; font-weight: 500;
  color: var(--text-primary); padding: 6px 8px; border-radius: 8px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.legal__toc a::before { content: counter(toc) ". "; color: var(--text-placeholder); }
.legal__toc a:hover { background: var(--light-green); color: var(--primary); }

.legal__body { max-width: 720px; }
.legal__body section { scroll-margin-top: 96px; margin-bottom: 40px; }
.legal__body h2 {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 600;
  line-height: 1.25; margin-bottom: 14px;
  color: var(--primary);
}
.legal__body h3 {
  font-size: 15.5px; font-weight: 700; margin: 22px 0 8px;
}
.legal__body p, .legal__body li { font-size: 15.5px; color: var(--text-secondary); line-height: 1.7; }
.legal__body p { margin-bottom: 14px; }
.legal__body strong { color: var(--text-primary); font-weight: 600; }
.legal__body ul, .legal__body ol { margin: 0 0 16px 20px; display: grid; gap: 8px; }
.legal__body li::marker { color: var(--primary); }
.legal__body a { font-weight: 600; }

/* Pull-quote for the points that matter most legally */
.legal-note {
  border-left: 4px solid var(--primary);
  background: var(--surface-bg);
  border-radius: 0 14px 14px 0;
  padding: 18px 22px; margin: 0 0 18px;
}
.legal-note p:last-child { margin-bottom: 0; }
.legal-note--warn { border-left-color: var(--star); background: #FDF8EE; }

.legal__updated {
  background: var(--light-green); color: var(--primary);
  border-radius: 50px; padding: 5px 14px;
  font-size: 12.5px; font-weight: 700;
}

/* Plain-language summary at the top of each policy */
.legal-tldr {
  background: var(--light-green); border: 1px solid rgba(31,107,60,0.22);
  border-radius: 20px; padding: 26px 28px; margin-bottom: 40px;
}
.legal-tldr h2 {
  font-family: var(--font-body) !important;
  font-size: 12px !important; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--primary); margin-bottom: 12px !important;
}
.legal-tldr ul { margin: 0 0 0 18px; }
.legal-tldr li { font-size: 15px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--primary-dark); color: rgba(255,255,255,0.72); padding: 38px 0 18px; }
/* Brand block plus the Company and Legal link columns. */
.footer__top {
  /* brand + Company + Cities + Legal */
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 0.9fr; gap: 22px 40px;
  padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.13);
}
.footer__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.footer__logo > span { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: #fff; }
.footer__logo em {
  font-family: var(--font-body); font-style: normal;
  font-size: 9.5px; font-weight: 700; color: rgba(255,255,255,0.6);
  letter-spacing: 0.16em; text-transform: uppercase; margin-top: 4px;
}
.footer__brand p { font-size: 13px; line-height: 1.5; }
.footer__social { margin-top: 16px; }
.footer__social a {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.09); border-radius: 50px;
  padding: 9px 16px; color: #fff; font-size: 14px; font-weight: 600;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.footer__social a:hover { background: rgba(255,255,255,0.18); transform: translateY(-2px); }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.footer__col h4 {
  color: #fff; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 3px;
}
.footer__col a {
  color: rgba(255,255,255,0.72); font-size: 13.5px;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.footer__col a:hover { color: #fff; transform: translateX(3px); }
.footer__script { font-family: var(--font-script); font-size: 1.344rem; color: #A8DDB0; text-align: center; padding: 14px 0 2px; }

.footer__bottom {
  display: flex; justify-content: space-between; gap: 12px 26px; flex-wrap: wrap;
  align-items: center;
  padding-top: 13px; font-size: 12px; color: rgba(255,255,255,0.58);
  border-top: 1px solid rgba(255,255,255,0.09);
  margin-top: 13px;
}
.footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__legal a {
  color: rgba(255,255,255,0.72); font-size: 13px; font-weight: 500;
  transition: color .25s var(--ease);
}
.footer__legal a:hover, .footer__legal a[aria-current] { color: #fff; }

/* Legal footer area — the platform-role disclaimer and the contact details sit
   together in one panel, with the legal nav bar directly beneath it. */
.footer__legalbar {
  display: grid; grid-template-columns: 1.9fr 1fr; gap: 26px 48px;
  margin-top: 30px; padding: 20px 24px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
}
.footer__legalbar h4 {
  color: #fff; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 11px;
}
/* Single-column variant: terms.html is the only page that still renders this panel
   (disclaimer only, no contact column), so it takes the full width rather than
   leaving the 1fr slot empty. */
.footer__legalbar--single { grid-template-columns: 1fr; }

.footer__legalbar-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer__legalbar-contact a {
  color: rgba(255,255,255,0.72); font-size: 14px;
  transition: color .25s var(--ease);
}
.footer__legalbar-contact a:hover { color: #fff; }

/* Platform-role notice — Petlife introduces, it does not provide the service */
.footer__notice { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,0.62); }
.footer__notice strong { color: rgba(255,255,255,0.9); font-weight: 600; }
.footer__notice a { color: rgba(255,255,255,0.9); font-weight: 600; }

/* ==========================================================================
   SCROLL REVEAL — fade & lift
   ========================================================================== */
.reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal:nth-child(2) { transition-delay: .06s; }
.reveal:nth-child(3) { transition-delay: .12s; }
.reveal:nth-child(4) { transition-delay: .18s; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: 60px; text-align: center; }
  .hero__title { max-width: none; }
  .hero__sub { margin-left: auto; margin-right: auto; }
  .hero__ctas, .hero__proof { justify-content: center; }
  .chip--rating { left: 6%; }
  .chip--live { right: 6%; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__grid { grid-template-columns: repeat(4, 1fr); }
  .gallery figure:nth-child(n+5) { display: none; }
  .promise__grid { grid-template-columns: 1fr; }
  .promise__item { border-right: none; border-bottom: 1px solid var(--border-color); }
  .promise__item:last-child { border-bottom: none; }
  .join__grid, .contact__grid { grid-template-columns: 1fr; gap: 36px; }
  .values { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1.5fr auto auto auto; gap: 30px 34px; }
  .footer__legalbar { grid-template-columns: 1.6fr auto; }
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "tall a" "tall b" "c c" "wide wide";
  }
  .strip__card { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .strip__stat:nth-child(3)::before { display: none; }
}

@media (max-width: 720px) {
  .section { padding: 72px 0; }
  .nav__links {
    position: fixed; inset: 0; z-index: -1;
    background: var(--bg-white);
    flex-direction: column; align-items: center; justify-content: center; gap: 30px;
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
  }
  .nav__links.is-open { opacity: 1; pointer-events: auto; z-index: 99; }
  .nav__links.is-open a { font-size: 21px; }
  /* The open overlay is a fixed, full-viewport layer, so the logo and the burger
     have to be lifted above it — otherwise it paints over the burger and there is
     no way left to close the menu. */
  .nav__logo, .nav__actions { position: relative; z-index: 100; }
  .nav__burger { display: flex; }
  .nav__phone span { display: none; }
  .nav__phone { padding: 9px; background: var(--surface-bg); border-radius: 50%; }
  .nav__logo-tag { display: none; }
  .hero { padding-top: 146px; }
  .services__grid { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery figure:nth-child(n+5) { display: block; }
  .gallery figure:nth-child(n+7) { display: none; }
  .bento { grid-template-columns: 1fr; grid-template-areas: none; }
  .bento > .bento__cell,
  .bento > .bento__cell:nth-of-type(1),
  .bento > .bento__cell:nth-of-type(2),
  .bento > .bento__cell:nth-of-type(3),
  .bento > .bento__cell:nth-of-type(4),
  .bento > .bento__cell:nth-of-type(5) { grid-area: unset; }
  .bento__cell--wide { flex-direction: column; align-items: flex-start; }
  .walk__stage { min-height: 0; }
  .walk__path, .walk__paw { display: none; }
  .walk-step, .walk-step--left, .walk-step--right { width: 100%; margin: 0 0 22px; }
  .strip__card { grid-template-columns: 1fr 1fr; padding: 32px 20px; }
  .strip__stat::before { display: none !important; }
  .form-card { padding: 26px 22px; border-radius: 20px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .join__photo img { height: 230px; }
  .page-hero { padding: 132px 0 48px; }
  .legal { padding: 44px 0 72px; }
  .legal__layout { grid-template-columns: 1fr; gap: 30px; }
  .legal__toc { position: static; }
  .cta-final__card { padding: 36px 22px; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__legalbar { grid-template-columns: 1fr; padding: 18px 18px; }
}

@media (max-width: 560px) {
  .nav__icon { display: none; }
  .store-btn { width: 100%; justify-content: center; }
  /* Store callouts stack full-width; the CTA row becomes a single column so the
     two badges read as one stacked pair rather than an uneven wrap. */
  .cta-final__buttons { flex-direction: column; align-items: stretch; }
  .cta-final__actions { flex-direction: column; align-items: stretch; }
  .cta-final__card { padding: 32px 18px; border-radius: 22px; }
  .cta-final__paw { font-size: 104px; left: -14px; bottom: -26px; }
}

/* ==========================================================================
   STATUS TEXT ANIMATIONS
   Subtle, continuous animations on specific status/trust copy only — no
   change to font, color, size or placement, and no other badge/heading
   sitewide is touched: each rule is scoped to a dedicated hook class
   (.bento__cell--live, .bento__cell--verified) added only to these two
   bento cells, so shared classes like .badge--green (also used for the
   "Internship" tags on careers.html and an unrelated provider card in the
   phone mockup) are unaffected elsewhere. All of it is neutralised by the
   sitewide prefers-reduced-motion rule below.
   ========================================================================== */

/* "Launching soon" — both occurrences (hero proof line, app-store tag). */
.anim-launch { animation: launchPulse 2.4s ease-in-out infinite; }
@keyframes launchPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* Shared soft glow for the two trust/status headings ("Live availability",
   "Verified against government ID") — a breathing text-shadow, so the glyph
   colour itself never changes. */
.glow-heading { animation: headingGlow 3s ease-in-out infinite; }
@keyframes headingGlow {
  0%, 100% { text-shadow: 0 0 0 rgba(31,107,60,0); }
  50%      { text-shadow: 0 0 10px rgba(31,107,60,.35); }
}

/* Live availability — Available / Busy / Closed each pulse at a pace and
   depth that matches what the badge means: Available glows like something
   live, Busy breathes slower and shallower, Closed slower and shallower
   again, so a glance reads the state before the word is even parsed. */
.bento__cell--live .badge--green {
  animation: statusGlowGreen 2.2s ease-in-out infinite;
}
.bento__cell--live .badge--neutral {
  animation: statusBreathe 3.6s ease-in-out infinite;
}
.bento__cell--live .badge--grey {
  animation: statusBreathe 5s ease-in-out infinite;
  animation-delay: -1.5s;
}
@keyframes statusGlowGreen {
  0%, 100% { box-shadow: 0 0 0 rgba(56,179,74,0); }
  50%      { box-shadow: 0 0 9px rgba(56,179,74,.5); }
}
@keyframes statusBreathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .68; }
}

/* Verified against government ID — the two checkmark badges get the same
   green glow language as "Available", since both are a green success state. */
.bento__cell--verified .badge--green {
  animation: statusGlowGreen 2.6s ease-in-out infinite;
}
.bento__cell--verified .badge--green:nth-of-type(2) { animation-delay: .3s; }

/* Live availability bell — small unread-count badge, same idea as a phone's
   notification dot, hinting there's new activity to see inside the app. */
.bento__emoji--notif { position: relative; overflow: visible; }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: #E5484D; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  font-family: var(--font-body); box-shadow: 0 0 0 2px var(--bg-white);
  animation: notifPop 2.4s ease-in-out infinite;
}
@keyframes notifPop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* ==========================================================================
   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; }
  .walk__paw { opacity: .55; transform: translate(-50%,-50%) scale(1); }
}

/* ==========================================================================
   CITY PAGES  (/pet-services/<city>)
   Reuses .strip, .values, .faq and .section from the homepage so a city page
   is recognisably the same site; only the pieces with no existing equivalent
   are defined here.
   ========================================================================== */

.crumbs {
  font-size: 13px; color: var(--text-muted);
  margin-bottom: 18px; letter-spacing: 0.01em;
}
.crumbs a { color: var(--primary); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { margin: 0 6px; opacity: 0.6; }

/* Neighbourhood list. Deliberately a list of few, real areas rather than a
   grid built to look full - padding it is what makes a city page read as
   generated, and locals notice before Google does. */
.areas {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.areas li {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--secondary);
  border-radius: 12px; padding: 18px 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.areas li:hover {
  border-left-color: var(--primary);
  box-shadow: var(--shadow-sm); transform: translateY(-2px);
}
.areas li strong { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.areas li span { display: block; font-size: 0.92rem; color: var(--text-muted); line-height: 1.55; }
.areas__note { margin-top: 22px; font-size: 0.95rem; color: var(--text-muted); }

.local-services {
  display: grid; gap: 22px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.local-service {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 16px; padding: 26px 26px 22px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.local-service:hover {
  border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-3px);
}
.local-service .service__icon { font-size: 1.7rem; display: block; margin-bottom: 12px; }
.local-service h3 { font-size: 1.16rem; margin-bottom: 10px; }
.local-service p { font-size: 0.96rem; line-height: 1.7; color: var(--text-muted); margin-bottom: 12px; }
.local-service p:last-child { margin-bottom: 0; }
/* The veterinary card carries a disclaimer; it must not read as body copy. */
.local-service__note {
  font-size: 0.86rem; font-style: italic;
  border-left: 3px solid var(--secondary);
  padding-left: 12px; margin-top: 14px;
}

.local-cta {
  background: var(--light-green);
  border: 1px solid rgba(31,107,60,0.22);
  border-radius: 20px; padding: 40px 36px; text-align: center;
}
.local-cta h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 12px;
}
.local-cta p {
  max-width: 560px; margin: 0 auto 22px;
  color: var(--text-muted); line-height: 1.7;
}
.local-cta .page-hero__ctas { justify-content: center; }

@media (max-width: 620px) {
  .local-cta { padding: 30px 22px; }
  .areas { grid-template-columns: 1fr; }
}

/* Per-area Pet Buddy count. Sits beside the area name, not below it, so the
   number reads as a fact about that area rather than as a heading. */
.areas__count {
  display: inline-block;
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--primary); background: var(--light-green);
  border-radius: 999px; padding: 3px 10px; margin-bottom: 6px;
}

/* Cities that are genuinely elsewhere (Mangaluru, Nashik) are set apart from
   the neighbourhood list on purpose - folding a city 350km away into a
   neighbourhood grid is the inaccuracy that makes a local page untrustworthy. */
.areas__nearby {
  margin-top: 30px; padding: 22px 24px;
  background: var(--light-green);
  border: 1px solid rgba(31,107,60,0.2);
  border-radius: 14px;
}
.areas__nearby h3 { font-size: 1.02rem; margin-bottom: 8px; color: var(--primary); }
.areas__nearby p { font-size: 0.94rem; line-height: 1.65; color: var(--text-muted); margin: 0; }

/* Cross-links between city pages: each page passes value to its siblings and
   gives a visitor in the wrong city somewhere to go other than back. */
.citylinks {
  display: grid; gap: 16px; margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.citylink {
  display: block; text-decoration: none;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 14px; padding: 20px 22px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.citylink:hover {
  border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-2px);
}
.citylink strong {
  display: block; font-family: var(--font-display);
  font-size: 1.16rem; font-weight: 600; color: var(--text-primary); margin-bottom: 3px;
}
.citylink span { display: block; font-size: 0.88rem; color: var(--text-muted); }

@media (max-width: 620px) {
  .citylinks { grid-template-columns: 1fr; }
}