/* ===========================================================================
   home.css — the homepage only, loaded from cms/home.html.

   The page had no photograph anywhere on it, on a veterinary clinic's website,
   while fifty real photos of the clinic's own patients sat unused. So the
   whole design here is built around getting a real animal in front of the
   visitor immediately, and around one claim: this is Georgia's first smart pet
   platform.

   Two visual registers on purpose, matching the two things being said:
     · warm  — the hero, the members wall, the gallery. Photographs, the brand's
               taupe/gold, generous air. "People who will look after your cat."
     · cool  — the platform band. Dark ground, precise motion, glass. "And a
               piece of software that actually works."
   Mixing them evenly would blur both; alternating them is what makes each one
   land.

   Everything reuses tokens.css. Motion goes through the existing
   [data-reveal] observer in main.js rather than a second system.
   =========================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-block-size: min(92svh, 54rem);
  padding-block: var(--sp-9) var(--sp-8);
  overflow: clip;
}

.hero__media {
  position: absolute;
  /* Overscanned top/bottom, not a plain inset:0 — static/js/main.js slides
     this whole layer a little as the page scrolls (the classic parallax
     depth cue: background moves slower than the content in front of it).
     Without the extra height, sliding it would peel back to blank space at
     the hero's own top/bottom edge; .hero's overflow:clip trims the excess
     the rest of the time. */
  inset-inline: 0;
  inset-block: -8%;
  z-index: -2;
  will-change: transform;
}
.hero__media img,
.hero__media video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 38%;
}
@media (max-width: 40rem) {
  /* A landscape photo cropped to a phone shows only a narrow vertical slice.
     Biasing upward lands on the animal's head rather than on the floor. */
  .hero__media img, .hero__media video { object-position: center 28%; }
}

/* A slow drift. At this scale it reads as the photograph breathing rather
   than as an animation, which is the point — a clinic shouldn't feel busy. */
@media (prefers-reduced-motion: no-preference) {
  .hero__media img { animation: hero-drift 28s var(--ease-in-out, ease-in-out) infinite alternate; }
  /* No drift on video — it is already moving, and scaling it as well just
     makes the footage look unstable. */
}
@keyframes hero-drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(0, -1.5%, 0); }
}

/* Two scrims, not one: a vertical wash so the text sits on real darkness, and
   a warm multiply so the photo takes on the brand's colour instead of looking
   like a stock image dropped onto the page. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgb(28 24 18 / .88) 0%, rgb(28 24 18 / .55) 45%, rgb(28 24 18 / .2) 100%),
    linear-gradient(135deg, rgb(94 78 40 / .35), transparent 60%);
}

.hero__inner { position: relative; z-index: 1; }

/* The hero animates on load rather than through the [data-reveal] observer the
   rest of the page uses. Above-the-fold content must never depend on an
   observer firing: if JS is slow, blocked, or still parsing, a scroll-reveal
   leaves the most important thing on the site invisible. These keyframes run
   from the stylesheet, so the worst case is that they're already finished. */
@media (prefers-reduced-motion: no-preference) {
  .hero__inner > * {
    animation: hero-in .7s var(--ease-out, cubic-bezier(.22,.61,.36,1)) backwards;
  }
  .hero__inner > *:nth-child(1) { animation-delay: .05s; }
  .hero__inner > *:nth-child(2) { animation-delay: .15s; }
  .hero__inner > *:nth-child(3) { animation-delay: .25s; }
  .hero__inner > *:nth-child(4) { animation-delay: .35s; }
  .hero__inner > *:nth-child(5) { animation-delay: .45s; }
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .28);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
}
.hero__badge .dot {
  inline-size: .5rem;
  block-size: .5rem;
  border-radius: var(--r-full);
  background: var(--accent-400, #e8c14a);
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__badge .dot { animation: pulse 2.4s ease-in-out infinite; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgb(232 193 74 / .55); }
  50%      { opacity: .75; box-shadow: 0 0 0 .45rem rgb(232 193 74 / 0); }
}

/* ── Hero vertical rhythm ─────────────────────────────────────────────────
   The six things in the hero do not have six equal relationships, so they
   must not sit on one uniform gap. Read down the hero and there are three
   acts, and the spacing is what tells them apart:

     badge · headline · lede   one claim, held together tightly
     buttons · review score    one ask, with its proof pinned underneath
     stats                     the evidence, set apart by a rule

   This block owns all of it outright. .hero__inner used to carry .stack--lg,
   which sets margin-block-start on every child — and .hero h1, .hero__lede
   and .hero__rating each declared `margin: 0`, silently cancelling it for
   three of the six. Measured, the real gaps were 0 / 0 / 24 / 0 / 16px: the
   badge, headline and lede were literally touching, held apart only by their
   own leading. Explicit values here, and no .stack on the container, so a
   reset like that can't quietly delete the spacing again. */
.hero__inner > * { margin-block: 0; }
.hero h1 {
  color: #fff;
  font-size: var(--fs-5xl);
  line-height: 1.03;
  letter-spacing: -.025em;
  text-wrap: balance;
  max-inline-size: 18ch;
  margin-block-start: var(--sp-4);   /* 16 — the badge is a label on the headline */
  text-shadow: 0 2px 24px rgb(0 0 0 / .3);
}
.hero__lede {
  color: rgb(255 255 255 / .85);
  font-size: var(--fs-lg);
  max-inline-size: 46ch;
  margin-block-start: var(--sp-5);   /* 24 — same act, but 80px type needs air */
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-6);   /* 32 — the break from reading to acting */
}

/* Review strip, directly under the hero buttons. Deliberately quiet — stars
   in the brand's gold, everything else at the same weight as the lede. Proof
   works by being present and specific, not by shouting. */
.hero__rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);   /* 12 — proof belongs to the buttons above */
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / .78);
}
.hero__rating a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: inherit;
  text-decoration: none;
}
.hero__rating a:hover { color: #fff; }
.hero__rating strong { color: #fff; font-weight: var(--fw-semibold); }
.hero__stars { display: inline-flex; gap: 1px; color: var(--accent-400, #e8c14a); }
.hero__stars svg { display: block; }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-7);
  margin-block-start: var(--sp-6);   /* 32 — third act, and it carries a rule */
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid rgb(255 255 255 / .18);
}
.hero__stat p:first-child {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  color: #fff;
  line-height: 1.1;
}
.hero__stat p:last-child {
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / .65);
}

@media (max-width: 40rem) {
  .hero { min-block-size: min(88svh, 44rem); }
  /* Leading has to grow as the type shrinks. 1.03 is a deliberate editorial
     setting at the desktop 80px, where the lines are long and the tightness
     reads as confident; at 36px over three short lines the descenders and the
     next line's ascenders end up about 2px apart, which just reads as broken. */
  .hero h1 { font-size: var(--fs-4xl); line-height: 1.12; }
  /* Same three-act rhythm, one step down: at 36px headline type the desktop
     gaps read as gaps rather than as grouping. */
  .hero h1       { margin-block-start: var(--sp-3); }
  .hero__lede    { margin-block-start: var(--sp-4); }
  .hero__actions { margin-block-start: var(--sp-5); }
  .hero__stats   { gap: var(--sp-5); margin-block-start: var(--sp-5); padding-block-start: var(--sp-4); }
  /* Full-width buttons on a phone — a thumb shouldn't have to aim. */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { inline-size: 100%; }

  /* On a phone the whole hero is one column of text, so it starts far higher
     up the photograph — often over a bright area where the desktop scrim's
     gentle top end leaves white text unreadable. Darker and flatter here. */
  .hero__media::after {
    background:
      linear-gradient(to top, rgb(28 24 18 / .9) 0%, rgb(28 24 18 / .62) 50%, rgb(28 24 18 / .34) 100%),
      linear-gradient(135deg, rgb(94 78 40 / .3), transparent 70%);
  }

  /* Three lines, not eight. The full paragraph pushed both calls to action
     below the fold, which is the one thing the hero exists to prevent. */
  .hero__lede {
    font-size: var(--fs-base);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
}

/* ── Members wall ─────────────────────────────────────────────────────────── */
.members {
  /* --section-y, not a hand-picked --sp-9/--sp-10: this page's sections each
     had their own padding, so the gap between adjacent ones ranged from 80px
     to 224px on a phone with no rhythm to it. One token now drives every
     section on the site. */
  padding-block: var(--section-y);
  background: var(--surface-sunken);
  overflow: clip;
}

.members__track {
  display: flex;
  gap: var(--sp-5);
  padding-block: var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.members__track::-webkit-scrollbar { display: none; }

.member {
  flex: none;
  inline-size: 8.5rem;
  text-align: center;
  scroll-snap-align: start;
}
.member img {
  inline-size: 8.5rem;
  block-size: 8.5rem;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 3px solid var(--surface-raised);
  box-shadow: var(--sh-md);
  transition: transform var(--dur-base) var(--ease-out);
}
.member:hover img { transform: translateY(-4px) scale(1.03); }
.member__name {
  margin-block-start: var(--sp-3);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--c-heading);
}
.member__species { font-size: var(--fs-xs); color: var(--c-text-muted); }

/* Each face arrives after the one before it, so the wall assembles itself
   rather than appearing all at once. Capped at 12 — past that the last
   arrivals would be waiting on a delay long enough to look broken. */
.js .members__track > .member { --reveal-delay: 0ms; }
.js .members__track > .member:nth-child(2)  { --reveal-delay: 60ms; }
.js .members__track > .member:nth-child(3)  { --reveal-delay: 120ms; }
.js .members__track > .member:nth-child(4)  { --reveal-delay: 180ms; }
.js .members__track > .member:nth-child(5)  { --reveal-delay: 240ms; }
.js .members__track > .member:nth-child(6)  { --reveal-delay: 300ms; }
.js .members__track > .member:nth-child(7)  { --reveal-delay: 360ms; }
.js .members__track > .member:nth-child(8)  { --reveal-delay: 420ms; }
.js .members__track > .member:nth-child(9)  { --reveal-delay: 480ms; }
.js .members__track > .member:nth-child(10) { --reveal-delay: 540ms; }
.js .members__track > .member:nth-child(11) { --reveal-delay: 600ms; }
.js .members__track > .member:nth-child(n+12) { --reveal-delay: 660ms; }

@media (max-width: 40rem) {
  .member, .member img { inline-size: 6.5rem; }
  .member img { block-size: 6.5rem; }
}

/* ── Services bento ───────────────────────────────────────────────────────
   Every section on this page used to be the same "eyebrow, h2, uniform card
   grid" shape repeated six times running down the page — the eye stops
   registering anything new by the third one. This is the one grid that
   breaks that rhythm: the first service group (whatever the clinic has
   listed first — Treatment & preventive care today) runs bigger than its
   siblings instead of matching them tile-for-tile. */
.bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  gap: var(--sp-5);
  margin-block-start: var(--sp-7);
}
.bento__item:first-child { grid-column: span 2; }
.bento__item .card__title { font-size: var(--fs-lg); }

/* On a phone this one section ran 2655px — 3.3 screens — because each of the
   six cards also listed four services under it. That detail is what the
   /services/ page is for, and every card here already links straight to its
   own section of it. The homepage's job is to show the *shape* of what the
   clinic does, scannable in one thumb-flick, not to reproduce the catalogue. */
@media (max-width: 47.99rem) {
  .bento__item ul { display: none; }
  .bento__item .card__body { gap: var(--sp-3); }
}

@media (min-width: 48rem) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .bento__item:first-child { grid-column: span 3; }
}
@media (min-width: 64rem) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
  }
  /* The featured tile gets room to actually use it — a bigger icon and a
     roomier body — rather than just stretching the same small card. */
  .bento__item:first-child .card__body { justify-content: center; gap: var(--sp-4); }
  .bento__item:first-child .card__icon { inline-size: 3.75rem; block-size: 3.75rem; }
  .bento__item:first-child .card__icon svg { inline-size: 1.875rem; block-size: 1.875rem; }
  .bento__item:first-child .card__title { font-size: var(--fs-xl); }
}

/* ── Platform band — the cool register ────────────────────────────────────── */
.platform {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-y);
  background: var(--ink-900, #1c1814);
  color: rgb(255 255 255 / .82);
  overflow: clip;
}
/* A faint grid, the only thing on the page that looks like software. */
.platform::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000, transparent 75%);
}
.platform h2 { color: #fff; text-wrap: balance; }
.platform .eyebrow { color: var(--accent-400, #e8c14a); }
.platform .lede { color: rgb(255 255 255 / .7); }

/* ── Platform showcase ────────────────────────────────────────────────────
   The record card and the four points it illustrates. Two columns once
   there's room — the card is the evidence, the points are the caption —
   stacked on a phone with the card first, because the card is the thing
   worth scrolling for. */
.platform__showcase {
  display: grid;
  gap: var(--sp-7);
  margin-block-start: var(--sp-7);
  align-items: center;
}
@media (min-width: 56rem) {
  .platform__showcase { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-9); }
}

/* The record card itself — a piece of the product, sitting on the dark band.
   Deliberately lighter than its surroundings so it reads as a screen rather
   than as another content block. */
.record {
  background: rgb(255 255 255 / .06);
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  backdrop-filter: blur(10px);
  box-shadow: var(--sh-xl);
}
.record__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block-end: var(--sp-4);
  border-block-end: 1px solid rgb(255 255 255 / .12);
}
.record__avatar {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--r-full);
  background: rgb(232 193 74 / .16);
  color: var(--accent-400, #e8c14a);
  flex: none;
}
.record__name { color: #fff; font-weight: var(--fw-semibold); margin: 0; }
.record__meta { color: rgb(255 255 255 / .55); font-size: var(--fs-xs); margin: 0; }
.record__chip {
  margin-inline-start: auto;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  background: rgb(232 193 74 / .16);
  color: var(--accent-400, #e8c14a);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.record__rows { display: flex; flex-direction: column; }
.record__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-block-end: 1px solid rgb(255 255 255 / .08);
}
.record__row:last-child { border-block-end: 0; }
.record__tick {
  display: grid;
  place-items: center;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  border-radius: var(--r-full);
  background: rgb(126 176 120 / .22);
  color: #9ed494;
  flex: none;
}
.record__tick--due { background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .6); }
.record__label { color: rgb(255 255 255 / .9); font-size: var(--fs-sm); }
.record__value { color: rgb(255 255 255 / .5); font-size: var(--fs-xs); white-space: nowrap; }
.record__row--due .record__label { color: rgb(255 255 255 / .6); }

/* The four points, as rows rather than the card grid they used to be — the
   record card is the visual now, so these can step back and be read. */
.platform__points { display: flex; flex-direction: column; gap: var(--sp-5); }
.ppoint { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.ppoint__icon {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--r-full);
  background: rgb(232 193 74 / .14);
  color: var(--accent-400, #e8c14a);
  box-shadow: 0 0 0 1px rgb(232 193 74 / .18);
  flex: none;
}
.ppoint h3 { color: #fff; font-size: var(--fs-lg); margin: 0 0 var(--sp-1); }
.ppoint p { color: rgb(255 255 255 / .62); font-size: var(--fs-sm); margin: 0; max-inline-size: 46ch; }

/* ── Gallery strip ────────────────────────────────────────────────────────── */
.gallery-strip { padding-block: var(--section-y); overflow: clip; }
/* Set by static/js/main.js once a strip is actually drifting — the snap
   points and any smooth-scroll behaviour would both fight the animation, but
   they should stay in place for anyone the drift is switched off for
   (reduced motion, or a strip short enough to fit on screen). */
.members__track.is-autoscrolling,
.gallery-strip__track.is-autoscrolling {
  scroll-snap-type: none;
  scroll-behavior: auto;
  /* A scrollbar sliding along on its own reads as a page glitch rather than
     as an invitation — the drift itself is what shows there is more here. */
  scrollbar-width: none;
}
.members__track.is-autoscrolling::-webkit-scrollbar,
.gallery-strip__track.is-autoscrolling::-webkit-scrollbar { display: none; }

.gallery-strip__track {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block-end: var(--sp-3);
  scrollbar-width: thin;
}
.gallery-strip figure {
  flex: none;
  inline-size: min(22rem, 78vw);
  margin: 0;
  scroll-snap-align: center;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
  background: var(--surface-sunken);
}
.gallery-strip img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gallery-strip figure:hover img { transform: scale(1.04); }

/* ── Closing call to action ───────────────────────────────────────────────── */
.closing {
  padding-block: var(--section-y);
  background: var(--grad-brand, linear-gradient(135deg, #6b5b3a, #8a7442));
  color: #fff;
  text-align: center;
}
.closing h2 { color: #fff; text-wrap: balance; margin-inline: auto; max-inline-size: 20ch; }
.closing p { color: rgb(255 255 255 / .8); max-inline-size: 46ch; margin-inline: auto; }
.closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-block-start: var(--sp-6);
}
@media (max-width: 40rem) {
  .closing__actions { flex-direction: column; }
  .closing__actions .btn { inline-size: 100%; }
}

/* A white outline button, for use on the dark/photographic grounds above —
   .btn--ghost's dark border disappears against them. */
.btn--on-dark {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgb(255 255 255 / .5);
}
.btn--on-dark:hover { background: rgb(255 255 255 / .12); border-color: #fff; }

/* ── Find us ──────────────────────────────────────────────────────────────
   A map should feel like part of the room, not a widget bolted onto the
   page — so the info card sits physically on top of the map (a floating
   card over a photo is the same trick the hero already uses), and the map
   itself is toned down from Google's stock blues/greens to the site's own
   warm neutrals rather than clashing with everything around it. */
.find-us { padding-block: var(--section-y); }
.find-us__grid { position: relative; }

.find-us__map-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--sh-xl);
  border: 1px solid var(--c-border);
  background: var(--surface-sunken);
}
.find-us__map {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  /* Desaturate and warm Google's default palette toward the site's own
     cream/olive tones — legible, but no longer a jarring bright-blue-and-
     green rectangle dropped into a warm page. */
  filter: grayscale(0.4) sepia(0.12) saturate(1.15) contrast(1.02);
}
.find-us__map--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-subtle);
  inline-size: 100%;
  block-size: 100%;
}

.find-us__card {
  position: relative;
  z-index: 1;
  margin-block-start: calc(-1 * var(--sp-8));
  margin-inline: var(--sp-5);
  background: var(--surface-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.find-us__card h2 { margin-block-start: var(--sp-1); }

.find-us__rows { display: flex; flex-direction: column; gap: var(--sp-3); }
.find-us__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-text);
  text-decoration: none;
}
.find-us__row p { margin: 0; font-size: var(--fs-sm); }
/* These two rows are real actions — they dial the clinic and open a mail
   client — so they get a full 44px target rather than collapsing to the
   height of their own text. */
.find-us__row--link { min-block-size: 2.75rem; transition: color var(--dur-fast) var(--ease-out); }
.find-us__row--link:hover { color: var(--brand-700); }
.find-us__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  color: var(--brand-700);
  flex: none;
}

.find-us__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

@media (min-width: 60rem) {
  /* The card lifts off the flow entirely and floats over the map's lower
     corner — the layered look only works with room to spare, so it stays
     in normal document flow (stacked, map first) below this. */
  .find-us__card {
    position: absolute;
    inset-block-end: var(--sp-6);
    inset-inline-start: var(--sp-6);
    margin: 0;
    max-inline-size: 24rem;
  }
}
@media (max-width: 40rem) {
  .find-us__card { margin-inline: 0; }
  .find-us__actions .btn { flex: 1 1 auto; }
}

/* ── Reasons list (the "Why Zara Vet" band) ───────────────────────────────
   Was a four-card grid identical to the two card grids either side of it.
   Hairline rules instead: a different texture for a different kind of
   content, and roughly half the height on a phone. Lives on .section--brand's
   dark ground, so the rules and body copy are light-on-dark. */
.reasons {
  display: grid;
  gap: 0;
  margin-block-start: var(--sp-6);
}
.reason {
  padding-block: var(--sp-5);
  border-block-start: 1px solid rgb(255 255 255 / .14);
}
.reason:last-child { border-block-end: 1px solid rgb(255 255 255 / .14); }
.reason__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: #fff;
  margin: 0 0 var(--sp-2);
}
.reason__text {
  color: rgb(255 255 255 / .68);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  margin: 0;
  max-inline-size: 54ch;
}

@media (min-width: 48rem) {
  /* Two columns once there's room, so the rules read as a table of reasons
     rather than one very long ladder. */
  .reasons { grid-template-columns: 1fr 1fr; column-gap: var(--sp-7); }
  .reason:nth-child(2) { border-block-start: 1px solid rgb(255 255 255 / .14); }
  .reason:last-child, .reason:nth-last-child(2) { border-block-end: 1px solid rgb(255 255 255 / .14); }
}

/* ── Split pair (Laboratory + Home visits) ────────────────────────────────
   Two related stories that used to be two full-width sections stacked. Side
   by side above 56rem; below that they stack but still share one section's
   padding instead of paying for two. */
.split-pair {
  display: grid;
  gap: var(--sp-8);
}
.split-pair__half {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}
/* One notch down from a full-width section heading: at half the width, the
   page-level h2 size wraps to four or five lines and stops reading as a
   heading at all. */
.split-pair__title { font-size: var(--fs-2xl); margin: 0; }
.split-pair__half .lede { font-size: var(--fs-base); margin: 0; }
.split-pair__half .feature-list { margin: 0; }

@media (min-width: 56rem) {
  .split-pair { grid-template-columns: 1fr 1fr; gap: var(--sp-9); }
}