/* Charles Lipton Memorials, token-led sheet.
   Source of truth: design-docs/DESIGN (9).md (Vivid style reference).
   Adaptation for the audience: reading copy runs 17px (not the spec's 14px);
   every other token follows the reference exactly. */

:root {
  /* Colors */
  --color-vivid-violet: #5a3d99;   /* deepened, desaturated: heritage/premium, not techy */
  --color-accent-deep: #47306f;
  --color-lilac-veil: #f4edff;
  --color-orchid-whisper: #e9d4fb;
  --color-periwinkle-glow: #9292ff;
  --color-onyx: #24282d;
  --color-graphite: #333333;
  --color-slate: #79797f;
  --color-mist: #bbbbc1;
  --color-frost: #eceef2;
  --color-stone: #f5f5f4;
  --color-pure-white: #ffffff;
  --gradient-hero-dusk: linear-gradient(251deg, rgb(248, 240, 237) -9.1%, rgb(242, 228, 240) 36.43%, rgb(170, 147, 234) 105.93%);
  --gradient-amethyst-bloom: radial-gradient(circle at 0px 100%, rgb(247, 236, 238) 0px, rgb(231, 215, 239) 60%, rgb(199, 164, 230) 68%, rgb(159, 127, 225) 100%);

  /* Typography. Playfair Display (600/700) gives headings serif warmth with
     real weight; Satoshi carries all UI, body and controls per the system. */
  --font-satoshi: 'Satoshi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --text-caption: 12px;
  --text-body: 17px;          /* audience adaptation: spec 14px is too small for our readers */
  --leading-body: 1.6;
  --text-subheading: 20px;
  --tracking-subheading: -0.18px;
  --text-heading-sm: 24px;
  --tracking-heading-sm: -0.24px;
  --text-heading: 36px;
  --leading-heading: 1.17;
  --tracking-heading: -0.4px;
  --text-heading-lg: 52px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -1.04px;
  --text-display: 60px;
  --leading-display: 1.04;
  --tracking-display: -1.26px;

  /* Spacing / layout */
  --spacing-8: 8px; --spacing-16: 16px; --spacing-24: 24px; --spacing-32: 32px;
  --spacing-40: 40px; --spacing-48: 48px; --spacing-56: 56px; --spacing-80: 80px;
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 32px;

  /* Radius */
  --radius-cards: 24px;
  --radius-buttons: 100px;
  --radius-buttons-small: 10px;

  /* Shadow, top nav only, per the system */
  --shadow-xl: rgba(0, 0, 0, 0.08) 0px 8px 32px 0px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-pure-white);
  color: var(--color-graphite);
  font-family: var(--font-satoshi);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--color-vivid-violet); }

.wrap { max-width: var(--page-max-width); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { color: var(--color-onyx); font-family: var(--font-display); font-weight: 600; }
h1 { font-size: clamp(38px, 5vw, var(--text-display)); line-height: var(--leading-display); letter-spacing: -0.5px; }
h2 { font-size: clamp(30px, 4vw, var(--text-heading)); line-height: var(--leading-heading); letter-spacing: -0.3px; }
h3 { font-size: 22px; letter-spacing: 0; }
.h-lg { font-size: clamp(34px, 4.5vw, var(--text-heading-lg)); line-height: var(--leading-heading-lg); letter-spacing: -0.5px; }
.lede { font-size: 19px; color: var(--color-graphite); }
.muted { color: var(--color-slate); }
.center { text-align: center; }

.kicker {
  display: inline-block; font-size: var(--text-caption); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-vivid-violet);
  margin-bottom: var(--spacing-16);
}

/* ---------- Buttons: pills globally, 10px inside cards ---------- */
.btn {
  display: inline-block; background: var(--color-vivid-violet); color: #fff;
  border: 0; border-radius: var(--radius-buttons); padding: 14px 30px;
  font-family: var(--font-satoshi); font-size: 16px; font-weight: 500;
  text-decoration: none; cursor: pointer; transition: background .2s;
}
.btn:hover { background: var(--color-accent-deep); }
.btn-ghost {
  background: transparent; color: var(--color-vivid-violet);
  border: 1px solid var(--color-vivid-violet);
}
.btn-ghost:hover { background: var(--color-vivid-violet); color: #fff; }
.btn-card {
  display: inline-block; border-radius: var(--radius-buttons-small);
  background: var(--color-lilac-veil); color: var(--color-vivid-violet);
  padding: 14px 24px; font-weight: 500; font-size: 16px; text-decoration: none;
  transition: background .2s;
}
.btn-card:hover { background: var(--color-orchid-whisper); }

/* ---------- Top navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; background: var(--color-pure-white);
  box-shadow: var(--shadow-xl);
}
.nav-inner { display: flex; align-items: center; gap: var(--spacing-24); height: 72px; }
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; line-height: 1.1; }
.logo-mark { display: flex; flex: 0 0 auto; }
.logo-text { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: 0; color: var(--color-onyx); white-space: nowrap; }
.logo-text small { display: block; font-family: var(--font-satoshi); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-slate); margin-top: 3px; white-space: nowrap; }
.nav-links { display: flex; gap: var(--spacing-24); margin: 0 auto; }
.nav-links a { color: var(--color-slate); font-weight: 500; font-size: 15px; text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-vivid-violet); }
.nav-phone { display: flex; align-items: center; gap: var(--spacing-16); }
.nav-phone .tel { color: var(--color-onyx); font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; }
.nav-toggle { display: none; background: none; border: 0; font-size: 26px; color: var(--color-onyx); cursor: pointer; }

/* ---------- Hero: full-width image header ---------- */
.hero {
  background-image:
    /* Strong clean backing behind the copy (left ~38%), then clears fully by
       70% so the right third of the photograph reads at full contrast. */
    linear-gradient(90deg, rgba(251,249,255,.97) 0%, rgba(250,248,255,.93) 38%, rgba(250,248,255,.6) 56%, rgba(255,255,255,0) 76%),
    url('/img/hero-cemetery.jpg');
  background-size: cover;
  background-position: center 72%;
}
/* padding-block only: this element also carries .wrap, whose 24px side
   padding must survive (a padding shorthand here zeroed it on mobile) */
.hero-inner { padding-block: clamp(88px, 12vw, 150px); }
.hero-copy { max-width: 620px; }
.hero-copy p { max-width: 44ch; margin-top: var(--spacing-24); font-size: 19px; }
.trust-line { max-width: 44ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--spacing-16); margin-top: var(--spacing-32); align-items: center; }
/* Primary reads first; ghost gets a frosted backing so it stays legible where
   the scrim has cleared over the photograph. */
.hero-ctas .btn { padding: 16px 34px; font-size: 17px; box-shadow: 0 6px 20px rgba(90,61,153,.28); }
.hero-ctas .btn-ghost { background: rgba(255,255,255,.72); box-shadow: none; backdrop-filter: blur(2px); }
.hero-ctas .btn-ghost:hover { background: var(--color-vivid-violet); color: #fff; }
.trust-line { margin-top: var(--spacing-24); font-size: 15px; font-weight: 500; color: var(--color-graphite); }
.trust-line strong { color: var(--color-onyx); }

/* ---------- Credibility strip (award-badge row pattern) ---------- */
.cred { border-bottom: 1px solid var(--color-frost); }
.cred-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.cred-item { padding: var(--spacing-24) var(--spacing-16); text-align: center; border-left: 1px solid var(--color-frost); }
.cred-item:first-child { border-left: 0; }
.cred-item b { display: block; color: var(--color-onyx); font-size: 15px; font-weight: 600; }
.cred-item span { font-size: 13px; color: var(--color-slate); }

/* ---------- Sections & cards ---------- */
.section { padding: var(--section-gap) 0; }
.section-alt {
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(233,212,251,.55) 0%, rgba(244,237,255,.35) 45%, transparent 75%),
    radial-gradient(80% 120% at 0% 100%, rgba(244,237,255,.6) 0%, transparent 65%),
    var(--color-stone);
}
.section-head { text-align: center; max-width: 62ch; margin: 0 auto var(--spacing-48); }
.section-head p { margin-top: var(--spacing-16); color: var(--color-graphite); }

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-16); }
.cards-3 { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-24); }

.cards-2 { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-24); }
.card {
  border-radius: var(--radius-cards); padding: var(--card-padding);
  background: var(--color-lilac-veil); display: flex; flex-direction: column; gap: 10px;
}
.cards > .card:nth-child(even) { background: var(--color-orchid-whisper); }

/* Image-first product tiles: big photography, no card chrome. Placed after
   the pastel fills above so these overrides always win. */
.cards-photo { gap: var(--spacing-40) var(--spacing-24); }
.cards-photo > .card, .cards-photo > .card:nth-child(even) { background: transparent; padding: 0; gap: 6px; }
.cards-photo > .card .photo {
  aspect-ratio: 3 / 4; border-radius: var(--radius-cards);
  transition: transform .35s ease;
}
.cards-photo > .card:hover .photo { transform: scale(1.015); }
/* Landscape tile grid: ONE crop ratio for every tile, whatever the source
   photo's shape, so image tops, headings and copy line up across each row.
   3:2 suits the mostly-landscape stone photography and keeps wide plaque
   lettering intact; portrait sources set object-position inline. */
.cards-photo.cards-land > .card .photo { aspect-ratio: 3 / 2; }
.cards-photo > .card h3 { margin-top: var(--spacing-16); }
.cards-photo > .card .btn-card { background: var(--color-lilac-veil); margin-top: var(--spacing-8); }

/* Bare photo pairs: no wrappers at all */
.photo-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-24); }
.photo-duo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius-cards); }
.photo-duo figure { position: relative; margin: 0; }
.photo-duo figure img { aspect-ratio: 3 / 4; }
.photo-duo figcaption {
  position: absolute; top: 16px; left: 16px;
  background: rgba(255,255,255,.92); color: var(--color-onyx);
  font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 7px 18px; border-radius: var(--radius-buttons);
}
@media (max-width: 700px) { .photo-duo { grid-template-columns: 1fr; } }
.card p { font-size: 16px; }
.card .btn-card { margin-top: auto; align-self: flex-start; background: rgba(255,255,255,.75); }
.card-white { background: var(--color-pure-white) !important; border: 1px solid var(--color-frost); }
.card-featured { background: var(--gradient-amethyst-bloom) !important; }
.card-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--color-vivid-violet); }

/* ---------- Photo placeholders (to be replaced with real photography) ---------- */
/* Real photography */
.photo { border-radius: var(--radius-cards); width: 100%; height: auto; object-fit: cover; }
.card .photo, .ph-sm.photo { aspect-ratio: 4 / 3; }
/* Wide plaques with edge-to-edge lettering: a near-natural 3:2 crop keeps the
   inscription intact where the tighter 4:3 tile would chop the sides. */
.card .photo.photo-wide { aspect-ratio: 3 / 2; }
.photo-story { aspect-ratio: 5 / 4; height: 100%; max-height: 460px; }

.ph {
  border-radius: var(--radius-cards); background: var(--color-orchid-whisper);
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 260px; padding: var(--spacing-24); position: relative; overflow: hidden;
}
.ph::before { content: ""; position: absolute; inset: 12px; border: 2px dashed rgba(125, 51, 246, .35); border-radius: 16px; }
.ph span { font-size: 14px; font-weight: 500; color: var(--color-vivid-violet); max-width: 30ch; position: relative; }
.ph-tall { min-height: 420px; }
.ph-wide { min-height: 320px; }
.ph-sm { min-height: 180px; }

/* Intentional "period photograph" slot: reads as a captioned archive plate
   awaiting the family scan, not a broken placeholder. */
.ph-archive {
  border-radius: var(--radius-cards); min-height: 320px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; padding: var(--spacing-40) var(--spacing-32);
  background: linear-gradient(155deg, #efe8e0 0%, #e8ddf1 100%);
  border: 1px solid var(--color-frost);
}
.ph-archive .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-vivid-violet); }
.ph-archive .cap { font-family: var(--font-display); font-size: 19px; line-height: 1.3; color: var(--color-onyx); max-width: 24ch; }
.ph-archive svg { width: 34px; height: 34px; color: var(--color-slate); opacity: .55; margin-bottom: 4px; }

/* Map embed frame */
.map-embed { border: 0; width: 100%; height: 260px; border-radius: var(--radius-cards); display: block; }

/* ---------- Split (editorial) blocks ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-56); align-items: center; }
.split .kicker { margin-bottom: var(--spacing-8); }
.split p + p { margin-top: var(--spacing-16); }

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-16); counter-reset: step; }
.step { border-radius: var(--radius-cards); background: var(--color-pure-white); border: 1px solid var(--color-frost); padding: var(--card-padding); }
.step::before {
  counter-increment: step; content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 100px; margin-bottom: var(--spacing-16);
  background: var(--color-lilac-veil); color: var(--color-vivid-violet); font-weight: 700; font-size: 18px;
}
.step h3 { margin-bottom: var(--spacing-8); }
.step p { font-size: 16px; }

/* ---------- Area chips & lists ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--spacing-8); justify-content: center; }
.chip {
  border-radius: var(--radius-buttons); background: var(--color-lilac-veil);
  color: var(--color-vivid-violet); padding: 10px 22px; font-weight: 500; font-size: 15px; text-decoration: none;
}
.chip:hover { background: var(--color-orchid-whisper); }

/* ---------- FAQ / definition rows ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--color-frost); padding: var(--spacing-16) 0; }
.faq summary { font-weight: 600; color: var(--color-onyx); font-size: 18px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; color: var(--color-vivid-violet); font-size: 22px; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: var(--spacing-16); }

/* ---------- Google reviews widget ---------- */
.reviews { padding: var(--spacing-56) 0; }
.reviews-head { display: flex; align-items: center; gap: var(--spacing-16); margin-bottom: var(--spacing-24); }
.reviews-score { display: flex; align-items: center; gap: 10px; font-size: 22px; color: var(--color-onyx); }
.reviews-score b { font-size: 26px; }
.reviews-sub { font-size: 15px; color: var(--color-slate); }
.reviews-links { font-size: 14.5px; margin-top: 4px; }
.reviews-links a { color: var(--color-vivid-violet); font-weight: 500; text-decoration: none; }
.reviews-links a:hover { text-decoration: underline; }
.stars .star { color: #fbbc04; font-size: 19px; letter-spacing: 1px; }
.stars .star-off { color: var(--color-mist); }
.reviews-arrows { margin-left: auto; display: flex; gap: var(--spacing-8); }
.rev-arrow { background: none; border: 0; color: var(--color-slate); font-size: 22px; cursor: pointer; padding: 8px; }
.rev-arrow:hover { color: var(--color-vivid-violet); }
.rev-track {
  display: flex; gap: var(--spacing-16); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--spacing-8); scrollbar-width: none;
}
.rev-track::-webkit-scrollbar { display: none; }
.rev-card {
  flex: 0 0 340px; scroll-snap-align: start; background: var(--color-stone);
  border-radius: var(--radius-cards); padding: var(--spacing-24);
  display: flex; flex-direction: column;
}
.rev-top { display: flex; align-items: center; gap: 12px; }
.rev-avatar {
  width: 42px; height: 42px; border-radius: 100px; background: var(--color-orchid-whisper);
  color: var(--color-vivid-violet); font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.rev-name { font-weight: 600; color: var(--color-onyx); font-size: 15.5px; }
.rev-when { font-size: 13px; color: var(--color-slate); }
.rev-g { margin-left: auto; }
.rev-stars { margin: 10px 0 6px; }
.rev-stars .star { font-size: 16px; }
.rev-text {
  font-size: 15.5px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 560px) { .rev-card { flex-basis: 290px; } .reviews-arrows { display: none; } }

/* ---------- Single testimonial pull-quote ---------- */
.testimonial {
  background: var(--color-lilac-veil); border-radius: var(--radius-cards);
  padding: var(--spacing-40) var(--spacing-32); text-align: center; margin: 0;
}
.testimonial blockquote {
  font-family: var(--font-display); font-size: clamp(20px, 2.6vw, 26px); line-height: 1.45;
  color: var(--color-onyx); max-width: 40ch; margin: var(--spacing-16) auto;
}
.testimonial figcaption { font-size: 14.5px; color: var(--color-slate); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--gradient-amethyst-bloom); border-radius: var(--radius-cards); padding: var(--spacing-56) var(--spacing-32); text-align: center; }
.cta-band p { max-width: 55ch; margin: var(--spacing-16) auto 0; }
.cta-band .btn { margin-top: var(--spacing-32); }
.cta-band .tel-big { display: block; margin-top: var(--spacing-16); font-size: var(--text-heading-sm); font-weight: 700; color: var(--color-onyx); text-decoration: none; }

/* ---------- Advice / article cards ---------- */
.article-card { background: var(--color-pure-white); border: 1px solid var(--color-frost); border-radius: var(--radius-cards); padding: var(--card-padding); display: flex; flex-direction: column; gap: 10px; }
.article-card time { font-size: 13px; color: var(--color-slate); }
.article-card a.title { color: var(--color-onyx); font-weight: 600; font-size: 20px; text-decoration: none; letter-spacing: -0.18px; }
.article-card a.title:hover { color: var(--color-vivid-violet); }
.article-body { max-width: 720px; margin: 0 auto; }
.article-body h2 { margin: var(--spacing-40) 0 var(--spacing-16); }
.article-body p + p { margin-top: var(--spacing-16); }
.article-body ul { margin: var(--spacing-16) 0 0 22px; }
.article-body li + li { margin-top: 6px; }
.article-body ol { margin: var(--spacing-16) 0 0 22px; }
.article-body h3 { margin: var(--spacing-24) 0 var(--spacing-8); font-size: var(--text-subheading); }
.article-body table { width: 100%; border-collapse: collapse; margin: var(--spacing-24) 0; font-size: 16px; }
.article-body th, .article-body td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--color-frost); vertical-align: top; }
.article-body th { background: var(--color-lilac-veil); color: var(--color-onyx); font-weight: 600; }
.article-body .table-scroll { overflow-x: auto; }
.article-hero { aspect-ratio: 16 / 9; margin-bottom: var(--spacing-32); }
.article-summary { background: var(--color-lilac-veil); border-radius: var(--radius-cards); padding: var(--spacing-24) var(--card-padding); margin-bottom: var(--spacing-32); }
.article-body .article-summary h2 { margin: 0 0 var(--spacing-8); font-size: var(--text-subheading); }
.article-summary ul { margin-top: var(--spacing-8); }
.article-author { display: flex; gap: var(--spacing-16); align-items: center; margin-top: var(--spacing-48); padding-top: var(--spacing-24); border-top: 1px solid var(--color-frost); font-size: 15px; }
.article-author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
@media (max-width: 640px) { .article-body table { font-size: 15px; } .article-body th, .article-body td { padding: 10px; } }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--spacing-16); max-width: 560px; }
.form label { font-weight: 600; color: var(--color-onyx); font-size: 15px; display: grid; gap: 6px; }
.form input, .form textarea, .form select {
  font-family: var(--font-satoshi); font-size: 16px; color: var(--color-graphite);
  border: 1px solid var(--color-frost); border-radius: var(--radius-buttons-small);
  padding: 13px 14px; background: var(--color-pure-white); width: 100%;
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--color-vivid-violet); border-color: transparent; }
.form .btn { justify-self: start; }
.form-note { font-size: 14px; color: var(--color-slate); }

/* ---------- Footer ---------- */
footer.site {
  background:
    radial-gradient(80% 140% at 8% 100%, rgba(233,212,251,.5) 0%, rgba(244,237,255,.3) 50%, transparent 80%),
    var(--color-stone);
  margin-top: var(--section-gap);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--spacing-40); padding: var(--spacing-56) 0 var(--spacing-40); }
.footer-grid h4 { font-size: 16px; margin-bottom: var(--spacing-16); }
.footer-grid ul { list-style: none; display: grid; gap: 8px; }
.footer-grid a { color: var(--color-slate); text-decoration: none; font-size: 15px; }
.footer-grid a:hover { color: var(--color-vivid-violet); }
.footer-grid .tel { font-size: 22px; font-weight: 700; color: var(--color-onyx); text-decoration: none; }
.footer-legal { border-top: 1px solid var(--color-frost); padding: var(--spacing-24) 0; font-size: 13.5px; color: var(--color-slate); display: flex; flex-wrap: wrap; gap: var(--spacing-16); justify-content: space-between; }

/* ---------- Breadcrumbs ---------- */
.crumbs { font-size: 14px; color: var(--color-slate); padding-top: var(--spacing-24); }
.crumbs a { color: var(--color-slate); text-decoration: none; }
.crumbs a:hover { color: var(--color-vivid-violet); }

/* ---------- Page hero (inner pages): same cemetery image as home ---------- */
.page-hero {
  background-image:
    linear-gradient(90deg, rgba(251,249,255,.96) 0%, rgba(250,248,255,.9) 40%, rgba(250,248,255,.52) 62%, rgba(255,255,255,0) 82%),
    url('/img/hero-cemetery.jpg');
  background-size: cover;
  background-position: center 72%;
  padding: var(--spacing-80) 0;
}
.page-hero h1 { max-width: 22ch; }
.page-hero p { max-width: 48ch; }
.page-hero p { max-width: 60ch; margin-top: var(--spacing-16); font-size: 19px; }

/* ---------- Responsive ---------- */
/* Collapse to the hamburger while there is still room for the inline nav to
   fit. Below the previous 760px cutoff the links, logo and CTA pill all
   wrapped and broke the header on tablets and small laptops. */
@media (max-width: 1080px) {
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-pure-white); box-shadow: var(--shadow-xl);
    flex-direction: column; padding: var(--spacing-24); gap: var(--spacing-16); margin: 0;
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav-phone .btn { display: none; }
}

@media (max-width: 960px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .cred-row { grid-template-columns: repeat(2, 1fr); }
  .cred-item:nth-child(odd) { border-left: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .split, .cards-3, .cards-2 { grid-template-columns: 1fr; }
  /* Mobile hero: copy always sits on a solid brand tint, and the photo gets
     its own fixed-height band BELOW the copy. A percentage gradient over one
     background let long copy run down into the photo and lose legibility. */
  .hero, .page-hero { background: #f6f1ff; }
  .page-hero { padding-bottom: 0; }
  .hero-inner { padding-block: 56px 8px; }
  .hero::after, .page-hero::after {
    content: ""; display: block; height: 150px; margin-top: 32px;
    background:
      linear-gradient(180deg, #f6f1ff 0%, rgba(246,241,255,0) 45%),
      url('/img/hero-cemetery.jpg') center 72% / cover no-repeat;
  }
  .page-hero::after { height: 120px; }
  .logo { gap: 8px; }
  .logo-mark svg { width: 30px; height: 30px; }
  .logo-text { font-size: 17px; white-space: nowrap; }
  .logo-text small { font-size: 8.5px; letter-spacing: 0.08em; margin-top: 2px; white-space: nowrap; }
  .nav-inner { gap: var(--spacing-16); }
  .split-rev .split-media { order: -1; }
}
@media (max-width: 560px) {
  .cards, .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Nav phone: small glyph so the number reads as a tappable call ---------- */
.nav-phone .tel { display: inline-flex; align-items: center; gap: 7px; }
.nav-phone .tel svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ---------- Persistent mobile call/message bar ---------- */
.mobile-cta { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 58px; }
  /* Placed after the base .nav-phone .tel rule so it wins the cascade. */
  .nav-phone .tel { display: none; }
  .mobile-cta {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    box-shadow: 0 -2px 18px rgba(0,0,0,.14);
  }
  .mobile-cta a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px 12px; font-family: var(--font-satoshi); font-weight: 600;
    font-size: 16px; text-decoration: none;
  }
  .mobile-cta a svg { width: 17px; height: 17px; }
  .mobile-cta .call { background: var(--color-vivid-violet); color: #fff; }
  .mobile-cta .msg { background: var(--color-pure-white); color: var(--color-vivid-violet); border-left: 1px solid var(--color-frost); }
}

/* ---------- Area pages ---------- */
.area-list { list-style: none; margin-top: var(--spacing-16); display: grid; gap: 10px; }
.area-list li { padding: 12px 16px; background: var(--color-stone); border-radius: var(--radius-buttons-small); }