/* Eturnal Rest -- cemetery detail page (overhaul: real-photo hero + premium
   listing layout). Loaded after base.css. Real brand: slate-blue, Merriweather
   + Lato. The hero uses the cemetery's REAL photo (c.logo) with a blue gradient
   overlay; if the photo is null/fails, a calm brand-blue gradient hero is used. */

/* ============================================================
   HERO  -- full-width, real cemetery photo as the background
   ============================================================ */
.cem-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: linear-gradient(
    150deg,
    var(--blue-600),
    var(--blue-800) 60%,
    var(--blue-900)
  );
  isolation: isolate;
}
@media (min-width: 720px) {
  .cem-hero {
    min-height: 540px;
  }
}

/* the real photo lives in its own layer so we can parallax/zoom it without
   moving the text. Starts slightly zoomed + dimmed, settles on reveal. */
.cem-hero__media {
  position: absolute;
  inset: -4% -2%; /* bleed so the zoom never shows an edge */
  z-index: -2;
  background-size: cover;
  background-position: center;
  transform: scale(1.12);
  opacity: 0;
  transition:
    transform 1.6s var(--ease-out),
    opacity 0.9s var(--ease-out);
  will-change: transform, opacity;
}
.cem-hero.is-ready .cem-hero__media {
  transform: scale(1.02);
  opacity: 1;
}

/* dark blue gradient overlay so white text is always legible on any photo */
.cem-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to top,
      rgba(15, 28, 36, 0.92) 0%,
      rgba(20, 38, 48, 0.6) 38%,
      rgba(29, 55, 68, 0.28) 70%,
      rgba(29, 55, 68, 0.32) 100%
    ),
    linear-gradient(105deg, rgba(20, 38, 48, 0.55), rgba(20, 38, 48, 0) 55%);
}
/* when there is no real photo, lean on the brand gradient + a soft texture */
.cem-hero--brand .cem-hero__scrim {
  background:
    radial-gradient(
      120% 90% at 15% 0%,
      rgba(255, 255, 255, 0.1),
      transparent 55%
    ),
    linear-gradient(to top, rgba(15, 28, 36, 0.55), rgba(29, 55, 68, 0) 70%);
}

.cem-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-8) 24px var(--space-7);
  color: #fff;
}

.cem-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: var(--space-5);
}
.cem-hero__back:hover {
  color: #fff;
  text-decoration: none;
}

.cem-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-4);
}
/* badges sit on a dark photo -- give them a frosted backing */
.cem-hero__badges .badge {
  backdrop-filter: blur(4px);
}
.cem-hero__badges .badge--verified {
  background: rgba(47, 125, 91, 0.92);
  color: #fff;
}
.cem-hero__badges .chip--avail {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  backdrop-filter: blur(4px);
}

.cem-hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  margin: 0 0 0.25em;
  max-width: 18ch;
  text-shadow: 0 2px 20px rgba(13, 24, 31, 0.45);
}
.cem-hero__loc {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 var(--space-5);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.cem-hero__loc .dot {
  opacity: 0.5;
}
.cem-hero__type {
  color: rgba(255, 255, 255, 0.78);
}

/* key facts strip overlaid on the hero (plots available, price range) */
.cem-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.cem-hero__fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cem-hero__fact b {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1;
  color: #fff;
}
.cem-hero__fact span {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
}

/* ============================================================
   BODY  -- premium two-column under the hero
   ============================================================ */
.cem-body {
  padding: var(--space-8) 0 var(--space-9);
}
.cem-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-7);
  align-items: start;
}

/* writeup / description */
.cem-about {
  margin-bottom: var(--space-7);
}
.cem-about h2 {
  font-size: 1.6rem;
}
.cem-about p {
  color: var(--ink-2);
  max-width: 66ch;
}
.cem-about--generic .cem-about__note {
  font-size: 0.85rem;
  color: var(--ink-3);
}

/* map */
.cem-map-wrap {
  margin-bottom: var(--space-7);
}
.cem-map-wrap h2 {
  font-size: 1.6rem;
}
.cem-map {
  height: 340px;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line-cool);
  box-shadow: var(--shadow-sm);
  z-index: 0;
}
.cem-map__cap {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin-top: 8px;
}
.leaflet-container {
  font-family: var(--font-sans);
  background: var(--blue-50);
}

/* ---- summary "At a glance" card (sticky on desktop) ---- */
.cem-summary {
  position: sticky;
  top: 90px;
  background: var(--white);
  border: 1px solid var(--line-cool);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-6);
}
.cem-summary h2 {
  font-size: 1.3rem;
  margin-bottom: var(--space-4);
}
.cem-summary__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cem-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--line);
}
.cem-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.cem-row__label {
  color: var(--ink-2);
  font-size: 0.95rem;
}
.cem-row__val {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--blue-700);
  font-size: 1.12rem;
  text-align: right;
}
.cem-history-note {
  margin-top: var(--space-4);
  font-size: 0.9rem;
  color: var(--blue-800);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.cem-summary__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.cem-summary__cta .btn {
  width: 100%;
  justify-content: center;
}
.cem-website {
  margin-top: var(--space-4);
  font-size: 0.92rem;
  text-align: center;
}
.cem-price-note {
  font-size: 0.84rem;
  color: var(--ink-3);
  margin: 12px 0 0;
}

/* ============================================================
   LISTINGS  -- plots for sale (real data, no seller email)
   ============================================================ */
.cem-listings {
  margin-top: var(--space-7);
}
.cem-listings h2 {
  font-size: 1.7rem;
}
.cem-listings__intro {
  color: var(--ink-2);
  max-width: 66ch;
  margin-bottom: var(--space-5);
}
.listing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.listing {
  background: var(--white);
  border: 1px solid var(--line-cool);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}
.listing:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.listing__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.listing__type {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-700);
}
/* Paid-placement label, injected by seo-live.js on cards holding
   preferred placement (sql/118). Same pill as /buy's .listing__feat-tag. */
.listing__feat-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-900, #16323f);
  color: var(--white, #fff);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.listing__title {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  color: var(--blue-900);
  line-height: 1.34;
  margin: 0;
  flex: 1;
}
.listing__price {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.32rem;
  color: var(--blue-700);
}
.listing__price--ask {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-3);
}
.listing__feenote {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.listing__cta {
  margin-top: auto;
}
.listing-disclaimer {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin-top: var(--space-4);
}

/* ============================================================
   INQUIRY  -- native form (replaces mailto)
   ============================================================ */
.cem-inquiry {
  margin-top: var(--space-8);
}
.cem-inquiry__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-7);
  align-items: start;
}
.cem-inquiry__copy h2 {
  font-size: 1.7rem;
}
.cem-inquiry__copy p {
  color: var(--ink-2);
  max-width: 50ch;
}
.cem-inquiry__points {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}
.cem-inquiry__points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  color: var(--ink-2);
  font-size: 0.96rem;
}
.cem-inquiry__points li::before {
  content: "\2713";
  color: var(--blue-600);
  font-weight: 700;
  flex: 0 0 auto;
}
/* honeypot: visually + accessibly hidden but present in the DOM */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- error / not found ---- */
.cem-notfound {
  text-align: center;
  padding: var(--space-9) 0;
}
.cem-notfound .cem-cta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-5);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .cem-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .cem-summary {
    position: static;
  }
  .cem-inquiry__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .listing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .cem-hero {
    min-height: 420px;
  }
  .cem-hero__inner {
    padding: var(--space-7) 20px var(--space-6);
  }
  .cem-hero__facts {
    gap: var(--space-5);
  }
  .listing-grid {
    grid-template-columns: 1fr;
  }
  .cem-map {
    height: 280px;
  }
}

/* Listing photo (original plot photo from the old site, or pool placeholder)
   + the every-card image disclaimer (client review 2026-06-10). */
.listing__photo {
  aspect-ratio: 16 / 9;
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--blue-50);
}
.listing__photo {
  position: relative;
}
.listing__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Neutral badge for a default plot-type image (never blames the seller). */
.listing__photo-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  max-width: calc(100% - 16px);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: rgba(29, 55, 68, 0.72);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}
.listing__img-note {
  font-size: 0.74rem;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.35;
}

/* ---- listing photo carousel (dependency-free, ER.carousel) --------------- */
/* Sits in the same negative-margin 16/9 frame the single .listing__photo used,
   so a multi-photo listing and a single-image one line up identically. The
   track slides horizontally; each slide is 100% wide. */
.er-carousel {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--blue-50);
  outline: none;
}
.er-carousel:focus-visible {
  box-shadow: inset 0 0 0 2px var(--focus, var(--blue-500));
}
.er-carousel__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.er-carousel__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform var(--dur-3, 0.3s) var(--ease, ease);
  will-change: transform;
}
.er-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
}
.er-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Prev / next controls. Hidden on a single-image carousel. */
.er-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(29, 55, 68, 0.55);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  transition:
    background var(--dur-2, 0.2s) var(--ease, ease),
    opacity var(--dur-2, 0.2s) var(--ease, ease);
}
.er-carousel__nav:hover {
  background: rgba(29, 55, 68, 0.8);
  opacity: 1;
}
.er-carousel__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.er-carousel__nav--prev {
  left: 8px;
}
.er-carousel__nav--next {
  right: 8px;
}
/* Dots along the bottom. */
.er-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.er-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(29, 55, 68, 0.25);
  cursor: pointer;
  transition:
    background var(--dur-2, 0.2s) var(--ease, ease),
    transform var(--dur-2, 0.2s) var(--ease, ease);
}
.er-carousel__dot.is-on {
  background: #fff;
  transform: scale(1.25);
}
.er-carousel__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Small "n / total" counter, top-right. */
.er-carousel__count {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(29, 55, 68, 0.55);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* Neutral badge over the photo (e.g. the representative-image note). */
.er-carousel__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: rgba(29, 55, 68, 0.72);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}
/* Reduced motion: no slide animation (the position change is instant). */
@media (prefers-reduced-motion: reduce) {
  .er-carousel__track {
    transition: none;
  }
}

/* Seller's own plot description (from the original listing). Clamped so long
   write-ups don't blow up the card; the inquiry carries the full context. */
.listing__desc {
  font-size: 0.88rem;
  color: var(--ink-2, var(--ink-3));
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- cemetery page hero: header left, seller CTA card right ----
   Layout decision of 2026-08-13 (Sean): the seller CTA rides beside the page
   header instead of as a full-width band above the About text, About follows
   directly under the header, and the listings come straight after. Stacks to
   one column on small screens, card below the header. */
.cem-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: var(--space-7, 32px);
  align-items: start;
}
/* The H1 gets the whole column so a two-word cemetery name stops wrapping
   after the dash; only the prose is held to a readable measure. */
.cem-top-grid .info-hero {
  max-width: none;
}
.cem-top-grid .info-hero p {
  max-width: 68ch;
}
/* 56px stranded " - <place>" on its own line for a name as ordinary as
   "Pomona Cemetery - Pomona" in a 704px column. Balance handles the genuinely
   long names, which still need two lines and now split evenly. */
.cem-top-grid h1 {
  font-size: clamp(2rem, 3.3vw, 3rem);
  text-wrap: balance;
}
/* Keeps " - <place>" from splitting across lines. */
.cem-title__tail {
  white-space: nowrap;
}
.cem-about {
  margin-top: var(--space-4, 16px);
}
/* The hero and the listings were separated by both sections' padding, which
   read as a dead band under the seller card. */
.cem-top-grid {
  padding-bottom: 0;
}
.section--cem-hero {
  padding-bottom: var(--space-5, 24px);
}
.cem-hero-cta h2 {
  font-size: 1.22rem;
  line-height: 1.3;
}
.cem-hero-cta p {
  font-size: 0.92rem;
}
@media (max-width: 900px) {
  .cem-top-grid {
    grid-template-columns: 1fr;
  }
}

/* FAQ block on the static cemetery pages (cem-price-faq.njk). Native
   details/summary so it works with zero JS; styled to match the info cards. */
.cem-faq__item {
  border: 1px solid var(--border, #e3ded6);
  border-radius: 8px;
  background: var(--surface, #fff);
  margin-bottom: 10px;
  padding: 0;
}
.cem-faq__item summary {
  cursor: pointer;
  font-weight: 700;
  padding: 14px 16px;
  list-style-position: inside;
}
.cem-faq__item[open] summary {
  border-bottom: 1px solid var(--border, #e3ded6);
}
.cem-faq__item p {
  margin: 0;
  padding: 12px 16px 14px;
}
.cem-faq__more {
  margin-top: 14px;
  font-size: 0.92rem;
}

/* ---- hero with plots to buy (2026-08-25, revised in review same day) -------
   The first cut put a "For buyers" card in the hero's right column. Sean cut
   it: everything on it repeated the listings section immediately below, and
   the column held the plots lower. With listings present the hero now renders
   no right column at all; this modifier collapses the grid so the header uses
   the full width and the plots start sooner. */
.cem-top-grid--solo {
  grid-template-columns: minmax(0, 1fr);
}
/* With no card beside it the writeup owns the row, so the 68ch reading
   measure comes off and the bio uses the entire page width (Sean,
   2026-08-25). */
.cem-top-grid--solo .info-hero p {
  max-width: none;
}
/* The two prices are the strongest fact on the line, so they carry the
   accent the old buyer card gave its price range. */
.cem-intro__price {
  font-weight: 700;
  color: var(--color-accent, #b4642a);
}
/* The anchor target sits under a sticky header on some breakpoints, so the
   heading is offset rather than tucked beneath it. */
#plots {
  scroll-margin-top: var(--space-7, 32px);
}

/* ---- listing card with no real photo (2026-08-25) -------------------------
   The migration wrote one stock frame into 3,632 listings under 3,632
   filenames, so this grid showed the same watermarked graveyard nine times.
   A repeated photo tells a buyer nothing and makes real inventory read as a
   mock-up, so a listing without its own photograph gets a quiet panel that
   names the plot type and says plainly that no photo was provided.

   Deliberately NOT photographic: it should never be mistaken for a picture of
   the plot. It borrows the page's own surface tokens so it reads as part of
   the card rather than a missing asset. */
.listing__photo--none {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02)),
    var(--color-surface-2, #f1efe9);
  border-bottom: 1px solid var(--color-border, #e2ded4);
}
.listing__photo-type {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text, #2f3a3f);
}
.listing__photo-note {
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted, #7b8388);
}
/* A sold card is context, not an offer, so it recedes once it is grouped at
   the end of the grid. */
.listing--sold {
  opacity: 0.72;
}

/* ---- vertical listing rows on wide screens (2026-08-25) --------------------
   Sean's review call, backed by the product-list research: a plot is a
   spec-driven purchase (type, section, price, availability decide it) and
   most photos are pool placeholders, so the grid gave the fold to images
   that say nothing about the plot. Wide screens now show one listing per
   row, photo on the left, facts on the right, which also puts every price
   on one scannable edge. Phones keep the stacked card exactly as verified
   on 2026-08-25. */
@media (min-width: 641px) {
  .listing-grid {
    grid-template-columns: 1fr;
  }
  .listing {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: var(--space-5);
    align-items: start;
  }
  .listing > * {
    grid-column: 2;
  }
  .listing .listing__photo {
    grid-column: 1;
    grid-row: 1 / span 8;
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 180px;
    margin: calc(var(--space-5) * -1) 0 calc(var(--space-5) * -1)
      calc(var(--space-5) * -1);
    border-radius: var(--radius) 0 0 var(--radius);
  }
}

/* ---- local services panel (paid placements) -----------------------------
   The professional side of the marketplace: a funeral home, broker, monument
   dealer or cremation provider paying to sit beside the cemetery pages that
   name their town.

   RESTRAINT IS THE BRIEF. This sits on a page a family reads while arranging
   a burial, so it reads as a quiet directory rather than an advert block: no
   colour fills, no buttons, no urgency. The panel earns its place by being
   useful, and it is legally required to be identifiable as paid, which the
   note and the per-card line both do. */
.svc-panel {
  border-top: 1px solid var(--blue-100);
  padding-top: var(--space-6);
}
.svc-panel__title {
  font-size: var(--fs-lede);
  margin: 0 0 var(--space-2);
}
.svc-panel__note {
  font-size: var(--fs-meta);
  color: var(--ink-3);
  margin: 0 0 var(--space-5);
  max-width: 62ch;
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-3);
}
.svc-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-4);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius);
  background: var(--white, #fff);
  text-decoration: none;
  color: inherit;
}
a.svc-card:hover {
  border-color: var(--blue-300);
}
a.svc-card:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}
.svc-card__label {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-3);
}
.svc-card__name {
  font-weight: 700;
  color: var(--blue-900);
}
.svc-card__blurb,
.svc-card__phone {
  font-size: var(--fs-meta);
  color: var(--ink-2);
}
/* Every card says so on its face, not only the panel note, because a card
   can be screenshotted or read on its own. */
.svc-card__ad {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--fs-eyebrow);
  color: var(--ink-4, var(--ink-3));
}

/* ---- buyer-introduction opt-in -----------------------------------------
   Deliberately quieter than the newsletter row above it. This asks to pass a
   grieving family's details to a business, so it reads as a genuine question
   with a real "no" rather than an upsell: no accent colour, no emphasis, and
   every box off until they say otherwise. */
.intro-optin {
  border: 1px solid var(--blue-100);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0 0;
}
.intro-optin__legend {
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--ink-2);
  padding: 0 var(--space-1);
}
.intro-optin__note {
  font-size: var(--fs-meta);
  color: var(--ink-3);
  margin: 0 0 var(--space-2);
}
.intro-optin__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-meta);
  color: var(--ink-2);
  padding: 3px 0;
  cursor: pointer;
}