/* Dignity Tombstones — approved design (Oct 2026).
   Type: Montserrat only, the full weight range carries the hierarchy:
     900 hero headline · 800 section headings, numbers · 700 labels, buttons · 600 names
     500 nav, captions · 400 body · 300 italic accents, leads · 200 big block numerals · 100 rating figure
   Colour: graphite + gold on dark bands, ink on paper. Gold is never body text on light grounds.
   Contrast pairs are checked in tests/site.test.mjs. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/montserrat-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/montserrat-italic.woff2) format("woff2"); }

:root {
  --ink: #1c1d21;
  --ink-soft: #4a4b52;
  --paper: #f6f5f1;
  --paper-2: #ece8df;
  --line: #d8d4ca;
  --gold: #c9a24a;
  --gold-deep: #765812;
  --graphite: #1f2125;
  --night: #141518;
  --slate: #3a3f47;
  --green: #1e5a48;
  --wa: #0b7a3e;
  --cream-text: #e2ddd1;
  --focus: #4d90fe;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Montserrat", system-ui, sans-serif; font-weight: 400; font-size: 16.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[id] { scroll-margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 820px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 12px 16px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

.display { text-transform: uppercase; letter-spacing: -.01em; font-weight: 800; line-height: 1.05; }
.display em { display: block; font-style: italic; font-weight: 300; text-transform: none; letter-spacing: -.02em; color: var(--gold); font-size: 1.12em; }
.hand { font-style: italic; font-weight: 300; text-transform: none; letter-spacing: -.01em; color: var(--gold-deep); font-size: 1.15em; }
.eyebrow { display: block; font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.eyebrow--dark { color: var(--gold-deep); }
.lead { color: var(--ink-soft); font-weight: 300; margin: 0 0 24px; }
.textlink { display: inline-block; margin-top: 22px; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--gold); }
.after-list { margin-top: 28px; }

/* ---- header ---- */
.stripe { height: 4px; background: var(--gold); }
.top { background: #fff; border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.top .wrap { height: 64px; display: flex; align-items: center; justify-content: space-between; }
.top .logo img { width: 132px; height: 40px; }
.nav-wide { display: none; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 9px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; height: 2px; background: var(--ink); }
.menu nav { position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.16); padding: 8px; }
.menu nav a { display: block; padding: 12px 14px; text-decoration: none; font-weight: 600; border-radius: 6px; }
.menu nav a[aria-current="page"] { color: var(--gold-deep); background: var(--paper); }
@media (min-width: 960px) {
  .top .wrap { height: 76px; }
  .top .logo img { width: 160px; height: 48px; }
  .menu { display: none; }
  .nav-wide { display: flex; gap: 24px; font-size: 15px; font-weight: 500; }
  .nav-wide a { text-decoration: none; }
  .nav-wide a[aria-current="page"] { color: var(--gold-deep); font-weight: 700; }
}

/* ---- buttons (48px+ tap targets) ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 10px; font: inherit; font-weight: 700; font-size: 15px; letter-spacing: .01em; text-decoration: none; border: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: #b8913c; }
.btn--ghost { border-color: #fff; color: #fff; background: transparent; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--wa { background: var(--wa); color: #fff; }
.btn--line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--block { display: flex; width: 100%; }
@media (max-width: 380px) { .btn { white-space: normal; } }

/* =====================================================================
   HOME HERO (approved): photo on the right on desktop; on phones the whole
   scene on top, dissolving into a blurred copy of itself. Paragraphs, then
   buttons and numbers sharing the same two rows. On phones the hero is
   sized to its content so the buttons and numbers sit right under the text,
   inside the first screen.
   ===================================================================== */
.hero5 { position: relative; overflow: hidden; color: #fff; background: var(--night); }
.hero5__blur { display: none; }
.hero5__photo { position: absolute; top: 0; right: 0; width: 56%; height: 100%; }
.hero5__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero5__photo::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, #141518 0%, rgba(20,21,24,.88) 6%, rgba(20,21,24,.5) 15%, rgba(20,21,24,.15) 24%, rgba(20,21,24,0) 30%),
  linear-gradient(0deg, rgba(20,21,24,.55) 0%, rgba(20,21,24,0) 18%); }
.hero5__inner { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; }
.hero5 h1 { font-weight: 900; letter-spacing: -.02em; line-height: 1.04; margin: 10px 0 0; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.hero5 h1 em { margin-top: 4px; }
.hero5 .quote { font-style: italic; font-weight: 500; margin: 0 0 6px; }
.hero5 .sub { font-weight: 300; margin: 0; color: var(--cream-text); }
.hero5__action { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); grid-auto-rows: 44px; column-gap: 14px; row-gap: 10px; align-items: stretch; border-top: 1px solid rgba(255,255,255,.14); }
.hero5__action .btn { min-height: 0; height: 100%; width: 100%; }
.m { display: flex; flex-direction: column; justify-content: center; border-left: 2px solid var(--gold); padding-left: 10px; line-height: 1.1; }
.m b { font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.m b .gold { color: var(--gold); }
.m span { font-size: 10.5px; font-weight: 500; color: var(--cream-text); margin-top: 3px; }
.m--pair { flex-direction: row; justify-content: flex-start; gap: 10px; }
.m--pair > div { display: flex; flex-direction: column; }
br.d, br.m { display: none; }

@media (max-width: 959px) {
  .hero5 { display: flex; flex-direction: column; }
  .hero5__blur { display: block; position: absolute; inset: 0; overflow: hidden; }
  .hero5__blur img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; transform: scale(1.35); filter: blur(22px) brightness(.38) saturate(1.2); }
  .hero5__blur::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,21,24,0) 30%, rgba(20,21,24,.55) 70%, rgba(20,21,24,.85) 100%); }
  .hero5__photo { position: relative; z-index: 1; flex: none; width: 100%; height: min(250px, 36svh);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); }
  .hero5__photo img { object-position: 50% 45%; }
  .hero5__photo::after { content: none; }
  .hero5__inner { margin-top: -30px; padding-bottom: 22px; }
  .hero5 .eyebrow { font-size: 10.5px; letter-spacing: .16em; }
  .hero5 h1 { font-size: 22px; margin-top: 6px; }
  .hero5 h1 em { margin-top: 2px; }
  br.m { display: inline; }
  .hero5__copy { margin-top: 8px; }
  .hero5 .quote { font-size: 13.5px; line-height: 1.45; margin-bottom: 4px; }
  .hero5 .sub { font-size: 13px; line-height: 1.45; }
  .hero5__action { margin-top: 12px; padding-top: 12px; }
  .hero5__action .btn { font-size: 12px; padding: 0 8px; gap: 6px; }
  .hero5__action .btn svg { width: 15px; height: 15px; }
  .m span { white-space: nowrap; }
  .m--pair { align-items: flex-start; padding-top: 1px; }
  .m--pair span { line-height: 1.15; }
}
@media (min-width: 960px) {
  .hero5 { min-height: 640px; display: flex; align-items: center; }
  .hero5__inner { padding-top: 72px; padding-bottom: 72px; }
  .hero5__inner > * { max-width: 520px; }
  br.d { display: inline; }
  .hero5 h1 { font-size: 54px; }
  .hero5__copy { margin: 22px 0 0; }
  .hero5 .quote { font-size: 17px; }
  .hero5 .sub { font-size: 16px; }
  .hero5__action { grid-template-columns: 240px auto; grid-auto-rows: 50px; column-gap: 28px; row-gap: 12px; justify-content: start; margin-top: 30px; padding-top: 24px; max-width: none; }
  .m { padding-left: 14px; }
  .m b { font-size: 24px; }
  .m span { font-size: 12px; }
  .m--pair { gap: 28px; align-items: center; }
}

/* =====================================================================
   PAGE HERO (canvas — locked — and the inner pages): dark band, label,
   headline, photo to the side on desktop and phone.
   ===================================================================== */
.hero4 { background: var(--graphite); color: #fff; padding: 28px 0 34px; }
.hero4__grid { display: grid; grid-template-columns: 1fr 42%; grid-template-areas: "head photo" "body body"; column-gap: 16px; row-gap: 24px; align-items: center; }
.hero4__grid--text { grid-template-columns: 1fr; grid-template-areas: "head" "body"; }
.hero4__head { grid-area: head; }
.hero4__head h1 { font-size: 30px; font-weight: 900; letter-spacing: -.02em; margin: 10px 0 0; line-height: 1.02; }
.hero4__photo { grid-area: photo; margin: 0; }
.hero4__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 35%; border-radius: 10px; }
.hero4__body { grid-area: body; }
.hero4__body > p { margin: 0 0 18px; font-weight: 300; color: var(--cream-text); }
.hero4 .ctas { display: flex; flex-direction: column; gap: 12px; }
.stats4 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.stat { border-left: 3px solid var(--gold); padding-left: 10px; }
.stat b { display: block; font-size: 26px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.stat span { display: block; font-size: 12px; font-weight: 500; line-height: 1.35; margin-top: 4px; }
@media (min-width: 960px) {
  .hero4 { padding: 80px 0; }
  .hero4__grid { grid-template-columns: 1.1fr .9fr; grid-template-areas: "head photo" "body photo"; column-gap: 64px; row-gap: 28px; align-items: end; }
  .hero4__grid--text { grid-template-columns: 1fr; grid-template-areas: "head" "body"; }
  .hero4__head { align-self: end; }
  .hero4__head h1 { font-size: 84px; }
  .hero4--inner .hero4__head h1 { font-size: 60px; }
  .hero4__body { align-self: start; }
  .hero4__photo img { aspect-ratio: 4 / 5; border-radius: 12px; }
  .hero4 .ctas { flex-direction: row; }
  .stats4 { max-width: 460px; margin-top: 34px; }
  .stats4 .stat b { font-size: 40px; }
}
.hero4 + .band-form { padding-top: 10px; }
.hero4 + .band-form .wrap { border-top: 1px solid rgba(255,255,255,.14); padding-top: 34px; }
@media (min-width: 960px) { .hero4 + .band-form .wrap { padding-top: 64px; } }

/* ---- dark band with colour-block promises ---- */
.band-dark { background: var(--graphite); color: #fff; padding: 56px 0; }
.band-dark h2 { font-size: 28px; margin: 10px 0 26px; }
.blocks { display: grid; gap: 22px; }
.block__tile { aspect-ratio: 2 / 1; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 18px; }
.block__tile b { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 6px; padding-top: 6px; font-weight: 200; font-size: 76px; line-height: 1; letter-spacing: -.04em; }
.block__tile b i { font-style: normal; font-weight: 800; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; }
.block__tile small { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.t-gold { background: var(--gold); color: var(--ink); }
.t-green { background: var(--green); color: #fff; }
.t-slate { background: var(--slate); color: #fff; }
.t-cream { background: var(--paper-2); color: var(--ink); }
.block p { margin: 12px 0 6px; color: #e6e2d9; }
.block a { font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; border-bottom: 2px solid var(--gold); }
.band-dark .closer { margin: 34px 0 0; font-weight: 600; max-width: 720px; }
@media (min-width: 960px) {
  .band-dark { padding: 88px 0; }
  .band-dark h2 { font-size: 44px; }
  .blocks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .block__tile { aspect-ratio: 16 / 10; }
  .block__tile b { font-size: 64px; }
}

/* ---- paper sections ---- */
.sec { padding: 56px 0; }
.sec--alt { background: var(--paper-2); }
.sec--white { background: #fff; }
.sec h2 { font-size: 28px; margin: 10px 0 8px; }
@media (min-width: 960px) { .sec { padding: 88px 0; } .sec h2 { font-size: 44px; } }

/* ---- swipe rails ---- */
.rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; margin: 0 -20px; padding: 0 20px 8px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.plate { flex: none; width: 58%; scroll-snap-align: start; text-decoration: none; background: #fff; }
.plate img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.plate div { padding: 10px 12px 14px; }
.plate b { font-weight: 600; font-size: 15px; }
.special { flex: none; width: 72%; scroll-snap-align: start; text-decoration: none; }
.special img { width: 100%; aspect-ratio: 800 / 1136; object-fit: cover; }
.special b { display: block; margin-top: 10px; font-size: 16px; font-weight: 700; }
.special span { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--wa); }
.special span svg { width: 16px; height: 16px; }
@media (min-width: 960px) {
  .rail { margin: 0; padding: 0 0 8px; }
  .plate { width: 240px; }
  .rail--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; overflow: visible; }
  .rail--grid .special { width: auto; }
}

/* ---- specials page: two up on phones ---- */
.posters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
.posters .special { width: auto; display: block; }
@media (min-width: 960px) { .posters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

/* ---- gallery page ---- */
.stones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.stones .plate { width: auto; display: block; }
@media (min-width: 720px) { .stones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .stones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

/* ---- Google reviews ---- */
.gscore { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 20px; text-decoration: none; font-size: 15px; color: var(--ink-soft); }
.gscore b { font-weight: 100; font-size: 40px; letter-spacing: -.03em; color: var(--ink); }
.g { width: 20px; height: 20px; flex: none; }
.gstars { color: #9a6a00; letter-spacing: 1px; font-size: 14px; }
.gcard { position: relative; flex: none; width: 82%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--line); padding: 18px; text-decoration: none; color: var(--ink); min-height: 250px; }
.gcard::before { content: "\201C"; position: absolute; right: 52px; top: -6px; font-weight: 100; font-size: 72px; line-height: 1; color: var(--gold); opacity: .6; pointer-events: none; }
.gcard__head { display: grid; grid-template-columns: 40px 1fr 20px; gap: 10px; align-items: center; }
.gcard__head b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.av { width: 40px; height: 40px; border-radius: 50%; background: var(--graphite); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
.gcard__text { font-size: 15px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.gcard__more { margin-top: auto; font-size: 14px; font-weight: 600; color: #1a5fb4; }
.gcard--all { align-items: center; justify-content: center; text-align: center; background: var(--graphite); color: #fff; border: 0; }
.gcard--all::before { content: none; }
.gcard--all .g { width: 36px; height: 36px; }
.gcard--all b { font-weight: 800; text-transform: uppercase; font-size: 18px; }
.gcard--all span { font-size: 14px; color: #c9c4b8; }
@media (min-width: 960px) { .gcard { width: 340px; } }

/* ---- gold offer band ---- */
.band-gold { background: var(--gold); color: var(--ink); padding: 52px 0; }
.band-gold .wrap { display: grid; gap: 22px; align-items: center; }
.band-gold h2 { font-size: 28px; margin: 0 0 10px; }
.band-gold p { margin: 0; font-weight: 500; }
.band-gold img { width: 160px; aspect-ratio: 1; object-fit: cover; box-shadow: 0 12px 26px rgba(0,0,0,.25); }
@media (min-width: 960px) { .band-gold .wrap { grid-template-columns: 240px 1fr auto; gap: 48px; } .band-gold img { width: 240px; } .band-gold h2 { font-size: 52px; } }

/* ---- branches ---- */
.branches { display: grid; border-top: 2px solid var(--ink); list-style: none; padding: 0; margin: 0; }
.branch { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.branch b { display: block; font-size: 17px; font-weight: 700; }
.branch small { color: var(--ink-soft); font-size: 14px; }
.branch a { flex: none; min-height: 46px; display: inline-flex; align-items: center; padding: 0 14px; border: 2px solid var(--ink); border-radius: 10px; font-weight: 600; font-size: 15px; text-decoration: none; }
@media (min-width: 960px) {
  .branches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .branch { flex-direction: column; align-items: flex-start; border-bottom: 0; border-left: 1px solid var(--line); padding: 22px 24px; }
  .branch:first-child { border-left: 0; padding-left: 0; }
}

/* ---- team ---- */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 0 0 40px; }
.team li { background: #fff; }
.team img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.team div { padding: 12px 12px 16px; }
.team h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.team p { margin: 0; font-size: 13.5px; font-style: italic; font-weight: 300; color: var(--ink-soft); line-height: 1.5; }
.team-name { font-size: 20px !important; margin: 0 0 16px !important; }
@media (min-width: 720px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .team { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .team-name { font-size: 26px !important; } }

/* ---- lists ---- */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.ticks li { border-left: 3px solid var(--gold); padding-left: 14px; }
.ticks strong { display: block; font-weight: 700; }
.band-dark .ticks li { color: #e6e2d9; }
.band-dark .ticks strong { color: #fff; }
@media (min-width: 860px) { .ticks.cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 32px; } }
.rows { border-top: 2px solid var(--ink); }
.row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.row b { display: block; font-size: 17px; font-weight: 700; }
.row span { color: var(--ink-soft); font-size: 16px; }
.quotes { display: grid; gap: 18px; }
.quote-card { margin: 0; padding: 20px; background: #fff; border-top: 3px solid var(--gold); }
.quote-card p { margin: 0 0 10px; font-style: italic; }
.quote-card cite { font-style: normal; font-weight: 600; }
@media (min-width: 960px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- FAQ ---- */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 2px solid var(--ink); }
.faq summary { cursor: pointer; padding: 18px 40px 18px 0; font-weight: 700; font-size: 16.5px; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 28px; font-weight: 200; color: var(--gold-deep); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 0 18px; color: var(--ink-soft); }
.faq details > div a { color: var(--gold-deep); font-weight: 600; }

/* ---- long text ---- */
.prose h2 { font-size: 20px !important; margin: 1.8em 0 .5em !important; }
.prose p, .prose li { color: var(--ink-soft); }
.prose a { color: var(--gold-deep); font-weight: 600; }
.plain { padding-left: 1.2em; margin: 0 0 1em; }
.plain li { margin-bottom: .6em; }
.legal h3 { font-size: 16px; margin: 1.4em 0 .4em; }
.legal ul, .legal ol { padding-left: 1.2em; margin: 0 0 1em; }
.legal li { margin-bottom: .5em; }
.legal a { overflow-wrap: anywhere; }
.legal [id] { scroll-margin-top: 90px; }

/* ---- forms (on the dark form band) ---- */
.band-form { background: var(--graphite); color: #fff; padding: 52px 0; }
.band-form .wrap { display: grid; gap: 30px; }
.band-form h2 { font-size: 28px; margin: 10px 0 12px; }
.band-form .side p { color: #e6e2d9; margin: 0 0 18px; }
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label, .field legend { font-weight: 600; font-size: 15px; padding: 0; }
.field .opt { font-weight: 400; color: #c9c4b8; }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field textarea { min-height: 52px; padding: 12px 14px; font: inherit; font-size: 17px; border: 0; border-radius: 6px; background: #fff; color: var(--ink); width: 100%; }
.field textarea { min-height: 140px; resize: vertical; }
.field ::placeholder { color: #6b6c73; opacity: 1; }
.field [aria-invalid="true"] { outline: 3px solid #ff8a80; }
.field .hint { font-size: 14px; color: #c9c4b8; margin: 0; }
.error { color: #ffb4ab; font-weight: 600; font-size: 14px; margin: 0; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice label { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 12px; background: #fff; color: var(--ink); font-weight: 600; font-size: 15px; border: 3px solid #fff; border-radius: 6px; cursor: pointer; }
.choice label:has(input:checked) { border-color: var(--gold); background: #fbf3df; }
.choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.upload { display: grid; gap: 8px; padding: 12px 14px; border: 2px dashed #8d8a82; border-radius: 6px; color: #fff; font-weight: 500; }
.upload input { font: inherit; font-size: 14px; color: #e6e2d9; width: 100%; }
.tick { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 15px; align-items: start; }
.tick input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--gold); }
.tick a { color: var(--gold); font-weight: 600; }
.form-status { padding: 14px 16px; border-radius: 8px; font-weight: 600; }
.form-status--ok { background: #e6f4ea; color: #0d4a24; }
.form-status--err { background: #fde8e7; color: #7a1a14; }
.form-status--ok .btn { margin-top: 10px; }
.hp { position: absolute; left: -9999px; }
@media (min-width: 960px) { .band-form { padding: 88px 0; } .band-form .wrap { grid-template-columns: 5fr 6fr; gap: 64px; } .band-form h2 { font-size: 48px; } }

/* ---- contact ---- */
.cards { display: grid; gap: 20px; }
@media (min-width: 860px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.info b { display: block; font-weight: 700; margin-bottom: 4px; }
.info p { margin: 0; color: var(--ink-soft); }
.map { width: 100%; height: auto; aspect-ratio: 4 / 3; border: 0; border-radius: 10px; background: var(--paper-2); }

/* ---- footer ---- */
.foot { border-top: 1px solid var(--ink); padding: 28px 0 96px; font-size: 14px; color: var(--ink-soft); }
.foot .wrap { display: grid; gap: 14px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 600; color: var(--ink); }
.foot nav a { text-decoration: none; }
.foot .contact { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot .contact a { font-weight: 600; color: var(--ink); }
@media (min-width: 960px) { .foot .wrap { grid-template-columns: 1fr auto; align-items: start; } }

/* ---- the one floating button ---- */
.wa-float { position: fixed; right: 16px; bottom: calc(16px + var(--consent-h, 0px)); z-index: 50; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 14px; border-radius: 99px; background: var(--wa); color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 8px 20px rgba(0,0,0,.3); transition: opacity .2s ease, transform .2s ease; }
.wa-float svg { width: 22px; height: 22px; }
.wa-float[data-hidden="true"] { opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; }

/* ---- small consent bar ---- */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--night); color: var(--cream-text); padding: 10px 20px; font-size: 13.5px; line-height: 1.4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; justify-content: center; }
.consent[hidden] { display: none; }
.consent p { margin: 0; }
.consent .btns { display: flex; gap: 8px; }
.consent button { min-height: 40px; padding: 6px 16px; border-radius: 99px; font: inherit; font-weight: 700; cursor: pointer; }
.consent .ok { background: var(--gold); color: var(--ink); border: 0; }
.consent .no { background: transparent; color: var(--cream-text); border: 2px solid var(--cream-text); }

a.m { text-decoration: none; color: inherit; }
.gap-b { margin-bottom: 22px !important; }

/* fixes after the full-site review */
.m b span { font-size: inherit; margin: 0; color: inherit; white-space: normal; }
.m b .gold { color: var(--gold); }
@media (max-width: 959px) {
  .hero5__inner { justify-content: flex-start; }
  .hero5__copy { margin-top: 14px; }
  .hero4--inner .hero4__grid:not(.hero4__grid--text) .hero4__head h1 { font-size: 22px; }
}
.gap-t { margin-top: 12px; }
.hero5__photo picture, .hero5__blur picture, .hero4__photo picture { height: 100%; }
@media (min-width: 960px) { .hero5__inner > .hero5__head { max-width: 640px; } }
@media (min-width: 960px) { .hero5__inner > .hero5__action { max-width: 640px; } }

/* hero is no longer stretched to the screen: content sits together, nothing pushed below the fold */
@media (max-width: 959px) {
  .hero5 { min-height: 0; }
  .hero5__inner { flex: none; justify-content: flex-start; }
  .hero5__action { margin-top: 16px; }
  .hero5 h1 { font-size: 24px; }
  .hero5 .quote { font-size: 14.5px; }
  .hero5 .sub { font-size: 14px; }
  .hero5__action { grid-auto-rows: 46px; }
  .hero5__action .btn { font-size: 12.5px; }
  .m b { font-size: 18px; }
  .m span { font-size: 11.5px; }
}
/* funeral parlour logos */
.logos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.logos li { border: 1px solid var(--line); border-radius: 8px; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; padding: 8px; background: #fff; }
.logos img { max-height: 100%; width: auto; object-fit: contain; }
@media (min-width: 720px) { .logos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1040px) { .logos { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.m b span { font-weight: inherit; letter-spacing: inherit; }
@media (max-width: 959px) {
  .hero5__action { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .hero5__action .btn { font-size: 12px; padding: 0 6px; }
}
@media (max-width: 959px) and (max-height: 680px) {
  .hero5__photo { height: 200px; }
  .hero5 .sub { display: none; }
}

/* promise tiles carry a real photo; figure and label sit on a dark fade at the foot */
.block__tile--photo { position: relative; overflow: hidden; padding: 0; aspect-ratio: 16 / 10; color: #fff; background: var(--night); }
.block__tile--photo picture, .block__tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.block__tile--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,21,24,.92) 0%, rgba(20,21,24,.55) 38%, rgba(20,21,24,0) 70%); }
.block__label { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.block__label b { display: flex; align-items: baseline; gap: 4px; font-weight: 200; font-size: 58px; line-height: .9; letter-spacing: -.04em; }
.block__label b i { font-style: normal; font-weight: 800; font-size: 18px; letter-spacing: .02em; text-transform: uppercase; color: var(--gold); }
.block__label small { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-align: right; max-width: 55%; color: #fff; }
.block__tile--photo.t-gold { border-bottom: 3px solid var(--gold); }
.block__tile--photo.t-green { border-bottom: 3px solid var(--green); }
.block__tile--photo.t-slate { border-bottom: 3px solid #8a93a0; }
.block__tile--photo.t-cream { border-bottom: 3px solid var(--paper-2); }
@media (min-width: 960px) { .block__tile--photo { aspect-ratio: 4 / 5; } .block__label { flex-direction: column; align-items: flex-start; } .block__label small { text-align: left; max-width: none; } .block__label b { font-size: 64px; } }
.block__tile--photo .block__label b { flex: none; justify-content: flex-start; padding-top: 0; }
.block__tile--photo img { object-position: 50% 35%; }

/* long-form story sections (the old home page's full copy) */
.story { display: grid; gap: 26px; }
.story__text p { color: var(--ink-soft); margin: 0 0 1em; }
.story__text strong { color: var(--ink); font-weight: 700; }
.story__text .btn { margin-top: 8px; }
.story__media { margin: 0; }
.story__media img { width: 100%; height: auto; border-radius: 10px; }
@media (min-width: 960px) { .story { grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; } .story--flip .story__text { order: 2; } }
/* stone testimonials */
.tcard { flex: none; width: 82%; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.tcard img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.tcard__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tcard__stone { font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--gold-deep); }
.tcard blockquote { margin: 0; font-style: italic; font-size: 15.5px; }
.tcard cite { font-style: normal; font-weight: 700; margin-bottom: 6px; }
.tcard .btn { margin-top: auto; align-self: flex-start; min-height: 46px; font-size: 14px; }
@media (min-width: 960px) { .tcard { width: 340px; } }

/* promise figures read at a glance: number and unit both large, label underneath, the whole tile is a link (CEO, 2 Oct) */
.block .block__tile--photo { display: block; border-bottom-width: 3px; font-size: inherit; }
.block__tile--photo::after { background: linear-gradient(0deg, rgba(20,21,24,.95) 0%, rgba(20,21,24,.78) 34%, rgba(20,21,24,.25) 62%, rgba(20,21,24,0) 80%); transition: opacity .2s; }
.block__tile--photo .block__label { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px; bottom: 16px; }
.block__tile--photo .block__label b { align-items: baseline; gap: 8px; font-size: 68px; font-weight: 300; line-height: .85; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.block__tile--photo .block__label b i { font-size: 32px; font-weight: 800; letter-spacing: -.01em; text-transform: none; color: var(--gold); }
.block__tile--photo .block__label small { font-size: 12.5px; letter-spacing: .14em; text-align: left; max-width: none; }
.block__tile--photo:hover img, .block__tile--photo:focus-visible img { transform: scale(1.04); }
.block__tile--photo img { transition: transform .4s ease; }
.block__tile--photo:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (min-width: 960px) { .block__tile--photo .block__label b { font-size: 60px; } .block__tile--photo .block__label b i { font-size: 26px; } }

/* Max & Dex offer on /specials/: offer copy beside the embedded GHL form */
.maxdex__grid { display: grid; gap: 28px; }
.maxdex h2 em { display: block; font-style: normal; color: var(--gold); }
.maxdex .lead { color: var(--cream-text); }
.maxdex__small { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--cream-text); opacity: .85; }
.maxdex__form { background: #fff; border-radius: 12px; overflow: hidden; }
.maxdex__form iframe { display: block; width: 100%; height: 1510px; border: 0; }
@media (min-width: 960px) { .maxdex__form iframe { height: 1440px; } }
@media (min-width: 960px) { .maxdex__grid { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; } }
.maxdex__actions { display: grid; gap: 10px; margin: 22px 0 26px; }
.maxdex__poster { display: block; border-radius: 10px; overflow: hidden; background: #fff; }
.maxdex__poster img { display: block; width: 100%; height: auto; }
.maxdex__label { margin: 22px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.maxdex__stones { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.maxdex__stones a { display: flex; flex-direction: column; justify-content: center; min-height: 58px; padding: 8px 10px; border: 1px solid rgba(201,162,74,.45); border-radius: 8px; color: #fff; text-decoration: none; }
.maxdex__stones a:hover, .maxdex__stones a:focus-visible { border-color: var(--gold); background: rgba(201,162,74,.12); }
.maxdex__stones b { font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.maxdex__stones span { font-size: 13px; font-weight: 500; color: var(--gold); }
#max-dex-form { scroll-margin-top: 80px; }
@media (min-width: 720px) { .maxdex__actions { grid-template-columns: auto auto; justify-content: start; } .maxdex__stones { grid-template-columns: repeat(4, minmax(0, 1fr)); } }