/* ==========================================================================
   Will Case & Partners — site.css
   Tokens first. Brand colours come from the current site's stylesheet;
   swap --brand / --brand-deep / --gold and everything follows.
   No web fonts: system serif + system sans, so no third-party requests.
   ========================================================================== */

/* Self-hosted type, subset to Latin — 72KB total, no third-party requests.
   EB Garamond carries the headings, the quote and the phone numbers. */
@font-face { font-family: "EB Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/ebgaramond-500.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url("/assets/fonts/ebgaramond-italic-400.woff2") format("woff2"); }

:root {
  /* Palette taken from the current wcase.co.uk stylesheet (April 2026):
       claret #8F1C35 — headings, links, nav bar   |  gold #AC8D33 — nav hover, sidebar links
       plus the site's own darker claret shades #631E2D / #3C1A21 and dark gold #6F4F21.
     Confirm against the logo file when it arrives; these are the site's colours, not
     necessarily the logo's exact values. */
  --paper:      #FAF8F7;   /* page ground, barely off-white */
  --paper-2:    #F1EDEB;   /* bands */
  --white:      #FFFFFF;
  --ink:        #231B1E;
  --ink-2:      #5A4E51;   /* secondary text — 7:1 on the band */
  --rule:       #DCD3D4;

  --brand:      #8F1C35;   /* claret — links, headings, buttons (8.8:1 on white) */
  --brand-deep: #631E2D;   /* plate and call-bar ground */
  --brand-ink:  #3C1A21;   /* plate hover */
  --gold:       #AC8D33;   /* the brand gold: large text, borders and rules only — 3.2:1 on white, too low for small text */
  --brass:      #6F4F21;   /* dark gold for small labels on light grounds (6.7:1) */
  --brass-lt:   #C9AB5A;   /* gold for text on the claret plate (5.4:1) */

--flag-bg:    #FFF1A8;
  --flag-ink:   #4A3B00;

  --gold-tint:  #F7F0DE;   /* pale gold band */
  --hero-edge:  #4A1522;   /* darker claret for the hero's edges */

  --display: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans:  "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;

  --measure: 66ch;
  --wrap: 1120px;
  --radius: 2px;
}

/* --------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;          /* 18px — this audience is often older, often on a phone at night */
  line-height: 1.6;
  padding-bottom: 4.5rem;        /* clears the mobile call bar */
}
@media (min-width: 900px) { body { padding-bottom: 0; } }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.15; margin: 0 0 .6em; color: var(--ink); }
h1 { font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -.005em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.45rem; }
.h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
p  { margin: 0 0 1em; }
a  { color: var(--brand); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-deep); }
strong { font-weight: 600; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.3em; }

:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.measure { max-width: var(--measure); }
.muted { color: var(--ink-2); }
.small { font-size: .95rem; }

/* Eyebrow: the one sans element, letterspaced small caps. Used only where it
   labels something (a section, a plate), never as decoration. */
.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: .75rem;
}
.eyebrow::before {   /* the logo's gold square, as a marker */
  content: ""; display: inline-block; width: .55em; height: .55em; background: var(--gold);
  margin-right: .65em; vertical-align: .08em;
}
.hero .eyebrow::before { display: none; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--brand-deep); color: var(--white); padding: .6rem 1rem; z-index: 100;
}
.skip:focus { left: .5rem; top: .5rem; }

/* Preview-only note; the live build removes it */
/* ---- Hayden's dev toggle -------------------------------------------------
   Flags, the preview banner and the "still to do" markers are all hidden by
   default, so a client looking at the preview sees a clean site with no
   flash of yellow on load. Add ?dev to any URL to switch them on; the choice
   is remembered in that browser until ?dev=0. See site.js.
   The flags stay in the page source either way, so build.py's --live refusal
   is still the thing that stops them reaching a live deployment. -------- */
.preview-note,
.flag,
.devonly,
.todo { display: none; }

html.dev .devonly { display: block; }
html.dev .preview-note {
  display: block;
  background: var(--flag-bg); color: var(--flag-ink);
  font-family: var(--sans); font-size: .85rem; text-align: center; padding: .4rem 1rem;
}
html.dev .flag {
  background: var(--flag-bg); color: var(--flag-ink);
  font-family: var(--sans); font-size: .85rem; padding: .1em .4em; border-radius: var(--radius);
  display: inline-block; margin: .2rem 0;
}
html.dev .todo {
  display: block;
  font-family: var(--sans); font-size: .85rem; color: var(--flag-ink);
  background: var(--flag-bg); border: 1px dashed var(--flag-ink);
  border-radius: var(--radius); padding: .5rem .7rem; margin: .4rem 0;
}

/* The pill that sits bottom-left once dev mode is on. */
.devbar {
  position: fixed; left: .75rem; bottom: .75rem; z-index: 200;
  display: flex; align-items: center; gap: .5rem;
  background: #1c1c1c; color: #fff; border-radius: 999px;
  font-family: var(--sans); font-size: .8rem; line-height: 1;
  padding: .45rem .5rem .45rem .85rem;
  box-shadow: 0 3px 14px rgba(0,0,0,.35);
}
.devbar-count { opacity: .75; }
.devbar button {
  font: inherit; cursor: pointer; border: 0; border-radius: 999px;
  background: var(--gold); color: #1c1c1c; padding: .35rem .7rem;
}
.devbar button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media print { .devbar { display: none; } }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .95rem;
  letter-spacing: .02em;
  padding: .8rem 1.3rem;
  background: var(--brand);
  color: var(--white);
  text-decoration: none;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 1.2;
}
.btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--white); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 600; }
.btn-gold:hover { background: #987A2A; border-color: #987A2A; color: var(--white); }
.btn-quiet { background: transparent; color: var(--brand); }
.btn-quiet:hover { background: var(--brand); color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 0; }

/* Text link with an arrow, for card and block footers */
.more { font-family: var(--sans); font-size: .95rem; text-decoration: none; }
.more::after { content: " →"; }
.more:hover { text-decoration: underline; }

/* --------------------------------------------------------------- call button
   The one call to action. Solid, large, high-contrast, no outlines.
   Default: claret on light grounds (8.8:1). On dark grounds add .btn-call-gold (5.4:1). */
.btn-call {
  display: inline-flex; align-items: center; gap: .7rem;
  min-height: 3.5rem; padding: .85rem 1.6rem;
  background: var(--brand); color: var(--white);
  font-family: var(--display); font-size: clamp(1.5rem, 3vw, 1.75rem); line-height: 1;
  text-decoration: none; border-radius: 4px;
  transition: background .15s ease, transform .15s ease;
}
.btn-call:hover { background: var(--brand-ink); color: var(--white); }
.btn-call:active { transform: translateY(1px); }
.btn-call svg { width: 1.15em; height: 1.15em; flex: none; }
.btn-call-gold { background: var(--gold); color: var(--white); }
.btn-call-gold:hover, .btn-call-gold:focus-visible, .btn-call-gold:active { background: var(--gold); color: var(--ink); }
.btn-call-gold:focus-visible { outline-color: var(--white); }
.call-note { display: block; margin-top: .6rem; font-family: var(--sans); font-size: .9rem; color: var(--ink-2); }
.hero .call-note, .section-dark .call-note { color: rgba(255,255,255,.78); }
.call-stack { display: flex; flex-direction: column; align-items: flex-start; }
@media (prefers-reduced-motion: reduce) { .btn-call { transition: none; } }

/* --------------------------------------------------------------- header */
/* ---- Header -------------------------------------------------------------
   Reversed to match the burgundy header block on the printed price lists:
   white wordmark, gold rule, gold tagline. The logo swaps to the reversed
   SVG, whose own ground is the same --brand-deep, so there is no seam.
   Contrast on #631E2D: white 11.97:1, gold label 5.39:1. --------------- */
.site-header { background: var(--brand-deep); border-bottom: 2px solid var(--gold); }
.header-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0;
}
.lockup { display: block; flex: 0 1 auto; }
.lockup img { width: min(100%, 230px); height: auto; }
@media (min-width: 900px) { .lockup img { width: 300px; } }
.header-phone { display: none; text-decoration: none; color: var(--white); text-align: right; }
.header-phone-label { display: block; font-family: var(--sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-lt); }
.header-phone-number { display: block; font-size: 1.5rem; line-height: 1.1; color: var(--white); }
.header-phone:hover .header-phone-number { color: var(--brass-lt); }
@media (min-width: 900px) { .header-phone { display: block; } }

.nav-toggle {
  font-family: var(--sans); font-size: .9rem; background: none;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: var(--radius); padding: .55rem .9rem; color: var(--white); cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
}
.nav-toggle:hover { border-color: var(--brass-lt); color: var(--brass-lt); }
.nav-toggle-bars { display: block; width: 18px; height: 2px; background: currentColor;
                   box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.site-nav { border-top: 1px solid rgba(255,255,255,.18); background: var(--brand-deep); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
@media (min-width: 900px) { .site-nav ul { margin-left: -.9rem; } }  /* first label aligns with the logo above */
.site-nav a {
  display: block; padding: .55rem .9rem; margin: .25rem 0; font-family: var(--sans); font-size: .95rem;
  color: var(--white); text-decoration: none; border-radius: 4px;
}
.site-nav a:hover { color: var(--white); background: rgba(255,255,255,.12); }
/* The page you're on is a gold block with dark claret text — the whole word,
   centred, announced to screen readers by aria-current as well as shown. */
.site-nav a[aria-current="page"] { background: var(--brass-lt); color: var(--brand-ink); }
.site-nav a[aria-current="page"]:hover { background: var(--gold); color: var(--brand-ink); }

/* Mobile: collapsed by default (JS toggles); without JS the nav simply shows */
@media (max-width: 899px) {
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; padding: .5rem 0; gap: 0; }
  .site-nav a { padding: .8rem .75rem; margin: 0; border-radius: 4px; }
  .site-nav li + li a { border-top: 1px solid rgba(255,255,255,.14); }
  .site-nav a[aria-current="page"] { border-color: transparent; }
}

/* --------------------------------------------------------------- sections */
.section { padding: 2.5rem 0; }
@media (min-width: 900px) { .section { padding: 3.5rem 0; } }
.section-band { background: var(--paper-2); }
.section-white { background: var(--white); }
.section-gold { background: var(--gold-tint); }
.section-dark { background: var(--brand-deep); color: var(--paper); }
.section-dark h2, .section-dark h3 { color: var(--paper); }
.section-dark a:not(.btn):not(.btn-call) { color: var(--brass-lt); }
.section + .section { border-top: 1px solid var(--rule); }
.section-dark + .section, .section + .section-dark { border-top: 0; }

/* --------------------------------------------------------------- hero
   Deep claret ground with the brand's initial as a watermark. When the
   photograph arrives it goes behind this as a background image with the same
   claret over it at ~85% — the type stays white, nothing else changes. */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 20% 0%, var(--brand-deep) 0%, var(--hero-edge) 100%);
  color: var(--white);
  padding: 3.5rem 0 4rem;
  border-bottom: 3px solid var(--gold);
}
@media (min-width: 900px) { .hero { padding: 5.5rem 0 6rem; } }
.hero .wrap { position: relative; z-index: 1; }
.hero .eyebrow { color: var(--brass-lt); }
.hero h1 { color: var(--white); margin-bottom: .6rem; max-width: 14ch; }
.hero-lede { font-size: 1.3rem; color: rgba(255,255,255,.82); max-width: 34ch; }
.hero-urgent { font-size: 1.2rem; margin: 1.75rem 0 1.5rem; max-width: 42ch; color: var(--white); }
.hero-plate { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.hero .more { color: var(--brass-lt); }
.hero .call-note a, .section-dark .call-note a { color: var(--brass-lt); }
.hero .more:hover { color: var(--white); }
.hero-amp {
  /* a W has no descender and is far wider than the ampersand it replaced, so it
     needs less hang below the baseline and a touch more off the right edge */
  position: absolute; right: .17em; bottom: -.14em; z-index: 0;
  font-family: var(--display); font-style: italic; font-size: clamp(12rem, 34vw, 27rem); line-height: 1;
  color: var(--gold); opacity: .09; pointer-events: none; user-select: none;
}
.reveal { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.reveal:nth-child(2) { animation-delay: .08s; }
.reveal:nth-child(3) { animation-delay: .16s; }
.reveal:nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } }

/* --------------------------------------------------------------- blocks */
.panel { background: var(--white); padding: 2rem; border-radius: 4px; }
@media (min-width: 900px) { .panel { padding: 2.5rem 3rem; } }
.panel-dark { background: var(--brand-deep); color: var(--paper); }
.panel-dark h2, .panel-dark h3 { color: var(--paper); }
.panel-dark a:not(.btn):not(.btn-call) { color: var(--brass-lt); }
.panel-dark .eyebrow { color: var(--brass-lt); }

.two-col { display: grid; gap: 2rem; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: 3rem; } }

.cards { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px)  { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(4, 1fr); } }
.card {
  background: var(--white); border-top: 3px solid var(--gold); border-radius: 0 0 4px 4px;
  padding: 1.5rem; display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(35,27,30,.05), 0 6px 20px rgba(35,27,30,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) { .card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(35,27,30,.08); } }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }
.card h3 { font-size: 1.35rem; margin-bottom: .5rem; color: var(--brand); }
.card p { flex: 1; color: var(--ink-2); font-size: 1rem; }
.card .price { color: var(--ink); font-weight: 600; }

.branches { display: grid; gap: 1.25rem; padding: 0; margin: 0; list-style: none; }
@media (min-width: 700px) { .branches { grid-template-columns: 1fr 1fr; } }
.branch { background: var(--white); border-left: 3px solid var(--gold); border-radius: 0 4px 4px 0; padding: 1.75rem; box-shadow: 0 1px 2px rgba(35,27,30,.05), 0 6px 20px rgba(35,27,30,.05); }
.branch h3 { margin-bottom: .4rem; color: var(--brand); }
.branch address { font-style: normal; margin-bottom: .6rem; }
.branch .branch-phone { font-family: var(--display); font-size: 1.7rem; text-decoration: none; display: inline-block; margin-bottom: .4rem; }

.quote { margin: 0; padding: 0 0 0 2.6rem; position: relative; }
.quote::before {
  content: "\201C"; position: absolute; left: 0; top: -.35rem;
  font-family: var(--display); font-size: 4rem; line-height: 1; color: var(--gold);
}
.quote p { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.35; max-width: 34ch; margin-bottom: .9rem; color: var(--ink); }
.quote cite { font-style: normal; font-family: var(--sans); font-size: .9rem; color: var(--ink-2); }

.prose { max-width: var(--measure); }
.dropcap::first-letter {
  font-family: var(--display); font-size: 3.6em; line-height: .85; float: left;
  padding: .08em .1em 0 0; color: var(--brand);
}
.prose h2 { margin-top: 2rem; }
.prose h2:first-child { margin-top: 0; }
.lede { font-size: 1.25rem; color: var(--ink-2); max-width: var(--measure); }

/* Page header for inner pages */
.page-head { background: radial-gradient(ellipse at 20% 0%, var(--brand-deep) 0%, var(--hero-edge) 100%); color: var(--white); padding: 2.75rem 0 2.5rem; border-bottom: 3px solid var(--gold); }
.page-head h1 { color: var(--white); margin-bottom: .4rem; font-size: clamp(2.1rem, 4.5vw, 3.2rem); }
.page-head .eyebrow { color: var(--brass-lt); }
.page-head .lede { margin-bottom: 0; color: rgba(255,255,255,.82); }

/* Price tables (Prices page) */
.price-table { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; font-size: 1rem; }
.price-table th, .price-table td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.price-table th { font-family: var(--sans); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.price-table td.num, .price-table th.num { text-align: right; white-space: nowrap; }

.testimonials { display: grid; gap: 2.5rem; max-width: 52rem; }
.testimonials .quote p { font-size: clamp(1.2rem, 2vw, 1.45rem); max-width: none; }

/* --------------------------------------------------------------- heritage portraits
   Archive prints, upscaled 4x from the old site's 150px thumbnails (EDSR).
   Mounted like prints, static — not part of a slider. */
.heritage { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .heritage { grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; } }
.portraits { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
@media (min-width: 900px) { .portraits { flex-direction: column; gap: 2rem; } }
.portraits figure { margin: 0; width: min(45%, 280px); }
@media (min-width: 900px) { .portraits figure { width: 280px; } }
.portraits img { width: 100%; height: auto; display: block; background: var(--white); padding: 6px; border: 1px solid var(--rule); box-shadow: 0 2px 6px rgba(35,27,30,.08); }
.portraits-row { flex-direction: row !important; gap: 1.5rem 2.5rem !important; margin: .5rem 0 2rem; }
.portraits-row figure { width: min(45%, 260px) !important; }
.portraits figcaption { font-family: var(--sans); font-size: .8rem; color: var(--ink-2); margin-top: .5rem; line-height: 1.35; }

/* --------------------------------------------------------------- photographs */
.photo-band { margin: 0; background: var(--white); padding: 2rem 0 0; }
.photo-band img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 1px 2px rgba(35,27,30,.05), 0 8px 24px rgba(35,27,30,.08); }
.photo-band figcaption { font-family: var(--sans); font-size: .85rem; color: var(--ink-2); margin-top: .75rem; }
.branch-photo { padding-top: 0; overflow: hidden; }
.branch-photo > img { width: calc(100% + 3.5rem); max-width: none; margin: 0 -1.75rem 1.25rem; height: auto; display: block; }

/* min-width:0 stops a wide child (the slider track) forcing a grid column
   wider than the page and nudging the whole layout sideways on a phone. */
.venues { display: grid; gap: 3rem; }
.venues > * { min-width: 0; }
@media (min-width: 900px) { .venues { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.venues .h2 { margin-bottom: .6rem; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; margin: 1.25rem 0 0; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 4px; display: block; }
.gallery .wide { grid-column: 1 / -1; }
.gallery .wide img { aspect-ratio: 16 / 10; }
.gallery figcaption { font-family: var(--sans); font-size: .8rem; color: var(--ink-2); margin-top: .4rem; }
/* Portrait product shots (scatter tubes, bears) need a taller crop than 4:3,
   and both ashes galleries take more columns than two once there's room. */
.gallery-tall img { aspect-ratio: 3 / 4; }
/* Catalogue shots come on white and must not be cropped — show them whole on a card. */
.gallery-product img { object-fit: contain; background: #fff; }

/* ----------------------------------------------------------- reels
   A row that drifts along on its own, stops when you point at it or tab
   into it, and has arrows for turning through by hand. With no JS it is
   simply a row you can scroll or swipe, which is no loss. */
.reel { position: relative; margin-top: 1.25rem; }
.reel-window { overflow: hidden; border-radius: 4px; }
.reel-track { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; align-items: flex-start;
              overflow-x: auto; scrollbar-width: none;   /* smooth only for the arrows, set in JS */
              -webkit-overflow-scrolling: touch; }
.reel-track::-webkit-scrollbar { display: none; }
.reel-item { flex: 0 0 auto; margin: 0; }
.reel-item figure { margin: 0; }
.reel-item img { height: 13.5rem; width: auto; max-width: none; border-radius: 4px; display: block; }
.reel-item figcaption { font-family: var(--sans); font-size: .8rem; color: var(--ink-2); margin-top: .4rem; max-width: 15rem; }

.reel-product .reel-item img { background: #fff; padding: .5rem; }

/* Tall reels (scatter tubes) hold portrait images. Letting each one size
   itself left a ragged row with uneven gaps, so every item gets the same
   footprint here -- the tubes all share one proportion, so nothing is
   cropped, and the row reads as evenly as the landscape urn reel does. */
.reel-tall .reel-track { gap: .75rem; }
.reel-tall .reel-item { width: 7.4rem; }
.reel-tall .reel-item img {
  height: 16rem; width: 100%; object-fit: cover; object-position: center top;
}
.reel-tall .reel-item figcaption {
  max-width: 100%; margin-top: .5rem; font-size: .75rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.05rem;
}



.reel-btn { position: absolute; top: 38%; transform: translateY(-50%); z-index: 2;
            width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.12);
            background: rgba(255,255,255,.94); color: var(--brand); font-size: 1.4rem; line-height: 1;
            cursor: pointer; display: grid; place-items: center; padding: 0;
            box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.reel-btn:hover { background: #fff; border-color: var(--brand); }
.reel-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.reel-prev { left: -.5rem; }
.reel-next { right: -.5rem; }
@media (min-width: 1180px) { .reel-prev { left: -1.4rem; } .reel-next { right: -1.4rem; } }

/* ----------------------------------------------------- memorial book
   A two-page spread: the memorial on the left leaf, its details and the
   stone swatches on the right. Without JS every leaf is on the page in
   order and reads as a list; with JS one shows at a time and turns. */
.book { margin-top: 1.5rem; }
.book-leaves { list-style: none; margin: 0; padding: 0; }
.leaf { display: grid; gap: 1.5rem; margin: 0 0 2.5rem; background: #FBF9F6; border: 1px solid rgba(0,0,0,.07);
        border-radius: 3px; padding: 1.5rem 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 24px -18px rgba(0,0,0,.4); }
.leaf:focus { outline: none; }
.leaf-left { display: grid; place-items: center; align-content: center; gap: .75rem; }
.leaf-left img { width: auto; max-width: 100%; max-height: 340px; height: auto; display: block; }
.leaf-folio { font-family: var(--sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.leaf-right > :first-child { margin-top: 0; }
.leaf .ref { font-family: var(--sans); font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .4rem; }
.leaf h3 { margin: 0 0 .6rem; }
.leaf .spec { font-family: var(--sans); font-size: .8rem; color: var(--ink-2); margin: .85rem 0 0; }
.leaf h4 { font-family: var(--sans); font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin: 1.4rem 0 .5rem; }
.leaf-changes { margin: 0; padding-left: 1.1rem; }
.leaf-changes li { margin-bottom: .4rem; }

/* the spine only exists once both leaves sit side by side */
@media (min-width: 860px) {
  .leaf { grid-template-columns: 1fr 1fr; gap: 0; padding: 2rem; }
  .leaf-left { border-right: 1px solid rgba(0,0,0,.09); padding-right: 2rem;
               background: linear-gradient(to right, transparent 90%, rgba(0,0,0,.035)); }
  .leaf-right { padding-left: 2rem; background: linear-gradient(to left, transparent 90%, rgba(0,0,0,.035)); }
}

/* stone swatches */
.swatches { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
            gap: .6rem .5rem; margin: 0; padding: 0; }
.swatches .sw img { width: 100%; height: 30px; object-fit: cover; border-radius: 2px; display: block; }
.sw-name { display: block; font-family: var(--sans); font-size: .62rem; line-height: 1.25; color: var(--ink-2); margin-top: .2rem; }
.sw.is-this img { outline: 2px solid var(--brand); outline-offset: 1px; }
.sw.is-this .sw-name { color: var(--brand); font-weight: 600; }
.sw-here { display: block; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
/* On a phone the thirty-nine stones fold away so a page stays a page.
   Open by default, so with no JavaScript nothing is hidden. */
.stones > summary { font-family: var(--sans); font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
                    color: var(--ink-2); margin: 1.4rem 0 .5rem; cursor: pointer; }
.stones > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (min-width: 860px) {
  .stones > summary { cursor: default; list-style: none; }
  .stones > summary::-webkit-details-marker { display: none; }
}

.book-nav { display: none; }
.book.is-live .leaf { display: none; }
.book.is-live .leaf.is-current { display: grid; }
.book.is-live .book-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: .25rem; }
.book-page { font-family: var(--sans); font-size: .85rem; color: var(--ink-2); min-width: 7rem; text-align: center; }
.book-nav .btn[disabled] { opacity: .4; cursor: default; }

/* the turn: the leaf you were reading lifts and swings away on the spine,
   uncovering the next one underneath — the old page moves, not the new. */
.book.is-live .book-leaves { position: relative; perspective: 2000px; }
.leaf.is-leaving { display: grid; position: absolute; left: 0; right: 0; top: 0; z-index: 3;
                   backface-visibility: hidden; pointer-events: none; }
.leaf.is-leaving.turn-fwd  { transform-origin: left center;  animation: page-away-fwd .55s cubic-bezier(.4,.05,.55,1) both; }
.leaf.is-leaving.turn-back { transform-origin: right center; animation: page-away-back .55s cubic-bezier(.4,.05,.55,1) both; }
@keyframes page-away-fwd {
  from { transform: rotateY(0deg); box-shadow: 0 0 0 rgba(0,0,0,0); }
  to   { transform: rotateY(-108deg); box-shadow: 26px 0 44px -22px rgba(0,0,0,.5); }
}
@keyframes page-away-back {
  from { transform: rotateY(0deg); box-shadow: 0 0 0 rgba(0,0,0,0); }
  to   { transform: rotateY(108deg); box-shadow: -26px 0 44px -22px rgba(0,0,0,.5); }
}
@media (prefers-reduced-motion: reduce) { .leaf.is-leaving { display: none; } }
@media (min-width: 700px) {
  .gallery-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.photo-missing > div { aspect-ratio: 16 / 10; background: var(--paper-2); border-radius: 4px; display: grid; place-items: center; font-family: var(--sans); font-size: .85rem; color: var(--ink-2); }

/* --------------------------------------------------------------- slider
   Without JS the slides lay out as a plain two-column gallery. With JS they
   become a fading slideshow: 2.5s a slide, paused on hover, focus or the
   Pause button, and never auto-playing for anyone who prefers reduced motion. */
.slider { margin-top: 1.25rem; }
.slider-viewport { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
.slide { margin: 0; }
.slide-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 4px; }
.slide-open img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 4px; display: block; }
.slide figcaption { font-family: var(--sans); font-size: .8rem; color: var(--ink-2); margin-top: .4rem; }
.slider-controls { display: none; }

.js .slider-viewport { display: block; position: relative; aspect-ratio: 16 / 10; }
.js .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.js .slide.is-active { opacity: 1; pointer-events: auto; }
.js .slide-open, .js .slide-open img { height: 100%; }
.js .slide-open img { aspect-ratio: auto; object-fit: contain; background: #fff; }   /* whole picture, never a crop */
.js .slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: .6rem .9rem; color: var(--white); font-size: .85rem;
  background: linear-gradient(to top, rgba(35,27,30,.72), rgba(35,27,30,0)); border-radius: 0 0 4px 4px;
}
.js .slider-controls { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; }
.slider-btn {
  font-family: var(--sans); font-size: .85rem; line-height: 1; min-width: 2.5rem; min-height: 2.5rem; padding: 0 .75rem;
  background: var(--white); color: var(--brand); border: 1px solid var(--rule); border-radius: 4px; cursor: pointer;
}
.slider-btn:hover { border-color: var(--brand); }
.slider-btn[data-prev], .slider-btn[data-next] { font-size: 1.5rem; padding: 0; }
.slider-pause[aria-pressed="true"] { background: var(--brand); color: var(--white); border-color: var(--brand); }
.slider-dots { display: flex; gap: .4rem; list-style: none; margin: 0 0 0 auto; padding: 0; }
.slider-dots button { width: .7rem; height: .7rem; border-radius: 50%; border: 1px solid var(--brand); background: transparent; padding: 0; cursor: pointer; }
.slider-dots button[aria-current="true"] { background: var(--brand); }
@media (prefers-reduced-motion: reduce) { .js .slide { transition: none; } }

.slider-contain .slide-open img { object-fit: contain; background: var(--paper-2); padding: 1.25rem; }
.slider-contain .slide-open { background: var(--paper-2); }
.supplier-contact { font-family: var(--sans); font-size: .9rem; color: var(--ink-2); margin-top: 1rem; }

/* --------------------------------------------------------------- lightbox */
.lightbox { border: 0; padding: 0; background: var(--white); border-radius: 6px; max-width: min(96vw, 1100px); max-height: 94vh; box-shadow: 0 24px 80px rgba(0,0,0,.4); }
.lightbox::backdrop { background: rgba(35,27,30,.82); }
.lightbox img { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; margin: 0 auto; }
.lightbox-caption { font-family: var(--display); font-size: 1.25rem; margin: 1rem 1.5rem .25rem; color: var(--ink); }
.lightbox-link { margin: 0 1.5rem 1.25rem; }
.lightbox-close {
  position: absolute; top: .5rem; right: .5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 0; background: var(--white); color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.lightbox-close:hover { color: var(--brand); }

.coverage { margin: 1.5rem 0 0; max-width: 46rem; }
.coverage svg, .coverage img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 1px 2px rgba(35,27,30,.05), 0 8px 24px rgba(35,27,30,.07); }
.coverage figcaption { font-family: var(--sans); font-size: .9rem; color: var(--ink-2); margin-top: .75rem; max-width: 60ch; }

/* --------------------------------------------------------------- google reviews */
.stars { color: var(--gold); letter-spacing: .08em; font-size: 1.05em; }
.rating-line { font-family: var(--sans); font-size: .95rem; color: var(--ink-2); margin: 1rem 0 .5rem; }
.reviews-summary { font-size: 1.15rem; margin-bottom: 1.5rem; }
.reviews { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 800px) { .reviews { grid-template-columns: 1fr 1fr; } }
.review blockquote { margin: 0; background: var(--white); padding: 1.5rem; border-radius: 4px; height: 100%; box-shadow: 0 1px 2px rgba(35,27,30,.05), 0 6px 20px rgba(35,27,30,.05); }
.review p { font-size: 1.05rem; margin-bottom: 1rem; }
.review footer { font-family: var(--sans); font-size: .85rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; }
.review cite { font-style: normal; font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------- faq */
.faq { max-width: var(--measure); margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-family: var(--display); font-size: 1.3rem; line-height: 1.3; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 1.5rem; color: var(--brand); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--brand); }
.faq .answer { padding: 0 0 1.25rem; color: var(--ink); max-width: 60ch; }
.faq .answer p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- enquiry branching */
.choices { display: grid; gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .choices { grid-template-columns: repeat(3, 1fr); } }
.choice {
  display: block; width: 100%; text-align: left; background: var(--white); border: 2px solid var(--rule);
  border-radius: 4px; padding: 1.25rem 1.4rem; cursor: pointer; font: inherit; color: var(--ink);
  transition: border-color .15s ease;
}
.choice:hover { border-color: var(--brand); }
.choice[aria-pressed="true"] { border-color: var(--brand); background: var(--paper-2); }
.choice strong { display: block; font-family: var(--display); font-size: 1.35rem; margin-bottom: .2rem; color: var(--brand); }
.choice span { font-family: var(--sans); font-size: .9rem; color: var(--ink-2); }
.branch { margin-top: 2.5rem; }
.js .branch[hidden] { display: none; }
.fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
.fieldset legend { font-family: var(--sans); font-size: .9rem; font-weight: 600; margin-bottom: .5rem; padding: 0; }
.check { display: flex; gap: .6rem; align-items: flex-start; margin: .4rem 0; font-size: 1.05rem; }
.check input { width: 1.2rem; height: 1.2rem; margin-top: .3rem; flex: none; }

/* The consent tick every enquiry form now requires before it will send. */
.check-consent {
  font-size: .95rem; color: var(--ink-2); line-height: 1.5;
  margin: 1.25rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--rule);
}
.check-consent a { color: var(--brand); }

/* --------------------------------------------------------------- documents */
.docs { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; max-width: 40rem; }
.docs a {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  background: var(--white); padding: .9rem 1.1rem; border-radius: 4px; text-decoration: none;
  box-shadow: 0 1px 2px rgba(35,27,30,.05), 0 4px 14px rgba(35,27,30,.05); color: var(--ink);
}
.docs a:hover { color: var(--brand); }
.docs .type { font-family: var(--sans); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); flex: none; }
.callout { background: var(--gold-tint); border-left: 3px solid var(--gold); padding: 1.25rem 1.5rem; border-radius: 0 4px 4px 0; max-width: var(--measure); }
.callout p:last-child { margin-bottom: 0; }
.helplines { list-style: none; padding: 0; margin: 1rem 0; max-width: var(--measure); }
.helplines li { padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.helplines strong { font-family: var(--display); font-size: 1.2rem; display: block; }
.helplines a { font-family: var(--display); font-size: 1.3rem; text-decoration: none; }
.map-slot { background: var(--paper-2); border-radius: 4px; min-height: 12rem; display: grid; place-items: center; color: var(--ink-2); font-family: var(--sans); font-size: .9rem; margin-top: 1rem; }

/* ---- Click-to-load map -------------------------------------------------
   Google is not contacted until the visitor presses the button, so the page
   sets no third-party cookies on arrival. Once loaded, a small toggle swaps
   between the map and Street View. ----------------------------------- */
.map-embed { position: relative; margin-top: 1rem; border-radius: 4px; overflow: hidden; background: var(--paper-2); }
.map-load {
  display: flex; flex-direction: column; gap: .3rem; align-items: center; justify-content: center;
  width: 100%; min-height: 12rem; padding: 1.5rem 1rem; cursor: pointer; text-align: center;
  border: 1px dashed var(--rule); border-radius: 4px; background: var(--paper-2); color: var(--ink-2);
  font-family: var(--sans);
}
.map-load strong { font-size: 1rem; color: var(--brand); }
.map-load span { font-size: .78rem; }
.map-load:hover { background: var(--white); border-color: var(--gold); }
.map-load:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.map-embed iframe { display: block; width: 100%; height: 18rem; border: 0; }
.map-toggle {
  display: flex; gap: .4rem; padding: .5rem; background: var(--paper-2);
  border-top: 1px solid var(--rule);
}
.map-toggle button {
  font-family: var(--sans); font-size: .78rem; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--white);
  color: var(--ink-2); padding: .3rem .75rem;
}
.map-toggle button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--white); }
.map-toggle button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Third-party embeds load only when asked for, so the page makes no request
   to Google until the visitor chooses to. Works without JS via the plain link. */
.embed { position: relative; aspect-ratio: 16 / 10; background: var(--paper-2); border-radius: 4px; overflow: hidden; margin-top: 1rem; }
.embed-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; text-align: center; padding: 1.5rem; }
.embed-cover p { margin: 0; font-family: var(--sans); font-size: .85rem; color: var(--ink-2); max-width: 30ch; }
.embed-cover .btn { font-size: .95rem; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }

/* --------------------------------------------------------------- forms */
.form { max-width: 34rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-family: var(--sans); font-size: .9rem; margin-bottom: .35rem; color: var(--ink); }
.field .hint { font-family: var(--sans); font-size: .8rem; color: var(--ink-2); margin: -.2rem 0 .4rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1.05rem; padding: .7rem .8rem;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); color: var(--ink);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); outline: 3px solid rgba(154,123,63,.35); outline-offset: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-family: var(--sans); font-size: .95rem; margin-top: 1rem; }
.form-status[data-state="error"] { color: #A33A1E; }
.form-status[data-state="sent"] { color: var(--brand); }

/* --------------------------------------------------------------- footer */
.site-footer { background: var(--brand-deep); color: rgba(255,255,255,.85); border-top: 3px solid var(--gold); margin-top: 0; }
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--brass-lt); }
.footer-logo { display: block; width: min(100%, 320px); height: auto; margin-bottom: 1.25rem; }
.footer-grid { display: grid; gap: 2rem; padding: 3rem 0 2.5rem; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.footer-col p { margin-bottom: .5rem; font-size: 1rem; }
.footer-sub { color: rgba(255,255,255,.7); max-width: 32ch; }
.footer-any-hour { margin: 1.25rem 0 .75rem !important; }
.footer-any-hour .eyebrow { color: var(--brass-lt); }
.footer-phone { font-family: var(--display); font-size: 1.9rem; text-decoration: none; }
.footer-h a { color: var(--brass-lt); text-decoration: none; }
.footer-h a:hover { color: var(--white); text-decoration: underline; }
.footer-h { font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-lt); margin-bottom: .75rem; }
.site-footer .muted { color: rgba(255,255,255,.62); }
.footer-legal { border-top: 1px solid rgba(255,255,255,.16); padding: 1.5rem 0 2rem; font-size: .9rem; color: rgba(255,255,255,.7); }
.footer-legal p { margin-bottom: .75rem; }
.footer-legal a { color: var(--white); }
.footer-legal a:hover { color: var(--brass-lt); }
.legal-links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-bottom: 1.25rem; font-family: var(--sans); font-size: .85rem; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; border-top: 1px solid rgba(255,255,255,.16); padding-top: 1.25rem; }
.footer-copy { margin: 0; color: rgba(255,255,255,.62); font-family: var(--sans); font-size: .85rem; }
.credit { display: inline-flex; align-items: center; gap: .75rem; font-family: var(--sans); font-size: .85rem; line-height: 1.3; color: rgba(255,255,255,.75); text-decoration: none; }
.credit img { width: 44px; height: 44px; border-radius: 8px; flex: none; }
.credit strong { color: var(--white); font-weight: 600; }
.credit:hover strong { color: var(--brass-lt); text-decoration: underline; }

/* --------------------------------------------------------------- call bar (mobile) */
.call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--brand-deep); border-top: 2px solid var(--gold);
  padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
}
.call-bar a { display: flex; align-items: baseline; justify-content: center; gap: .75rem; color: var(--paper); text-decoration: none; }
.call-bar-label { font-family: var(--sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-lt); }
.call-bar-number { font-size: 1.3rem; }
@media (min-width: 900px) { .call-bar { display: none; } }

/* --------------------------------------------------------------- consent */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--white); border-top: 1px solid var(--rule); box-shadow: 0 -2px 12px rgba(0,0,0,.06); }
.consent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 0; }
.consent-row p { flex: 1 1 24rem; margin: 0; font-size: .95rem; }
.consent-actions { display: flex; gap: .5rem; }
@media (max-width: 899px) { .consent { bottom: 3.6rem; } }

/* a plain list of what's included, ticked */
.ticks { list-style: none; margin: 1rem 0 0; padding: 0; }
.ticks li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: .7rem; height: .38rem;
                    border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
                    transform: rotate(-45deg); }

/* one approved photograph, where a slider would be silly */
.photo-single { margin: 1.25rem 0 0; }
.photo-single img { width: 100%; height: auto; border-radius: 4px; display: block; }
.photo-single figcaption { font-family: var(--sans); font-size: .8rem; color: var(--ink-2); margin-top: .4rem; }


/* --------------------------------------------------- collapsible detail
   Reference material that most readers scroll past: the registrar's
   checklist, the long price tables. Open on demand, so the page is short
   for the person skimming at 2am and complete for the one who needs it. */
.fold { border-top: 1px solid var(--rule); margin: 1.25rem 0; }
.fold > summary {
  cursor: pointer; list-style: none; padding: .85rem 2rem .85rem 0; position: relative;
  font-family: var(--display); font-size: 1.1rem; color: var(--brand);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
  content: '+'; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; line-height: 1; color: var(--gold);
}
.fold[open] > summary::after { content: '\2212'; }
.fold > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fold .answer { padding-bottom: 1rem; }
.fold .answer > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- jump links
   A contents strip at the top of the long pages. Doesn't shorten anything,
   but it means nobody has to scroll to find out what is further down. */
.jump { margin: 1.25rem 0 0; padding: 0; list-style: none;
        display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.jump li { margin: 0; }
.jump a {
  display: inline-block; padding: .35rem .7rem; border: 1px solid var(--rule);
  border-radius: 999px; font-family: var(--sans); font-size: .82rem;
  color: var(--ink-2); text-decoration: none; background: var(--white);
}
.jump a:hover, .jump a:focus-visible { border-color: var(--gold); color: var(--brand); }

/* ------------------------------------------------------------ quote cards
   The letters families sent, one at a time, on a card in A6 proportions.
   Without JavaScript every card simply stacks and all six are readable —
   the carousel is an enhancement, never the only way to read them. */
.qcards { margin: 1.5rem auto 0; max-width: 46rem; }
.qcards-stage { display: flex; align-items: center; gap: .75rem; }
.qcards-window { flex: 1 1 auto; min-width: 0; }
.qcards-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }

.qcard {
  background: var(--white); border: 1px solid var(--rule); border-radius: 4px;
  overflow: hidden; margin: 0;
  display: flex; flex-direction: column;
  /* A6 on its side, 148 x 105mm; a long letter may push past it */
  aspect-ratio: 148 / 105;
}
.qcard-head {
  background: var(--brand-deep); border-bottom: 2px solid var(--gold);
  padding: .85rem 1rem; text-align: center; flex: 0 0 auto;
}
.qcard-head img { width: 11rem; max-width: 62%; height: auto; display: inline-block; }
.qcard-body {
  flex: 1 1 auto; margin: 0; padding: 1.75rem 1.6rem;
  display: flex; flex-direction: column; justify-content: center;
}
.qcard-body p {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1rem, 1.02rem + .25vw, 1.2rem); line-height: 1.5;
  color: var(--ink); margin: 0 0 1.1rem;
}
.qcard-body p::before { content: '\201C'; }
.qcard-body p::after  { content: '\201D'; }
.qcard-body cite {
  font-family: var(--sans); font-style: normal; font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2);
}
.qcard-body cite::before { content: ''; display: block; width: 2rem; height: 1px;
                           background: var(--gold); margin: 0 0 .7rem; }
.qcard-foot {
  flex: 0 0 auto; border-top: 1px solid var(--rule); background: var(--paper-2);
  padding: .7rem 1rem; text-align: center;
  display: flex; flex-direction: column; gap: .2rem;
}
.qcard-towns { font-family: var(--sans); font-size: .62rem; letter-spacing: .18em; color: var(--brand); }
.qcard-web   { font-family: var(--sans); font-size: .68rem; letter-spacing: .06em; color: var(--ink-2); }

/* a long letter gets slightly smaller type rather than a taller card */
.qcard-long .qcard-body p { font-size: clamp(.92rem, .9rem + .25vw, 1.05rem); line-height: 1.45; }

/* with JavaScript the cards stack in one grid cell and fade between */
.js .qcards-list > li { grid-area: 1 / 1; opacity: 0; visibility: hidden;
                       transition: opacity .5s ease; }
.js .qcards-list > li.is-active { opacity: 1; visibility: visible; }
.qcards-list > li + li { margin-top: 1rem; }
.js .qcards-list > li + li { margin-top: 0; }

.qcards-btn {
  flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--rule); background: var(--white); color: var(--brand);
  font-size: 1.4rem; line-height: 1; cursor: pointer; display: none;
}
.js .qcards-btn { display: block; }
.qcards-btn:hover { border-color: var(--gold); }
.qcards-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.qcards-foot { display: none; margin-top: .9rem; align-items: center; gap: .75rem; justify-content: center; }
.js .qcards-foot { display: flex; }
.qcards-dots { display: flex; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.qcards-dots button { width: .55rem; height: .55rem; border-radius: 50%; padding: 0;
                     border: 1px solid var(--brand); background: transparent; cursor: pointer; }
.qcards-dots button[aria-current="true"] { background: var(--brand); }
.qcards-count { font-family: var(--sans); font-size: .8rem; color: var(--ink-2); }
.js .qcards-btn-foot { display: none; }
@media (max-width: 620px) {
  /* the arrows move under the card so it keeps the full width of the screen */
  .js .qcards-stage > .qcards-btn { display: none; }
  .js .qcards-btn-foot { display: block; width: 2.4rem; height: 2.4rem; font-size: 1.2rem; }
  .qcards-foot { gap: .6rem; }
  .qcard-body { padding: 1.4rem 1.15rem; }
  .qcard-head { padding: .7rem 1rem; }
  /* a landscape card cannot hold a long letter at phone width, so below this
     the shape gives way and the card simply takes the height it needs */
  .qcard { aspect-ratio: auto; min-height: 22rem; }
}

/* ---- Step roadmap ------------------------------------------------------
   Used on the direct cremation page to show the whole thing start to
   finish. Built as marked-up text rather than a flat image so it scales,
   stays legible at any size, and Google reads the words. ------------- */
.roadmap { margin: 1.75rem 0 0; padding: 0; list-style: none; position: relative; }
.roadmap::before {
  content: ''; position: absolute; left: 0.95rem; top: 1.2rem; bottom: 1.2rem;
  width: 2px; background: linear-gradient(var(--gold), var(--rule));
}
.roadmap li { position: relative; padding: 0 0 1.4rem 3rem; }
.roadmap li:last-child { padding-bottom: 0; }
.roadmap .step-no {
  position: absolute; left: 0; top: 0; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--brand); color: var(--white);
  font-family: var(--sans); font-size: .8rem; font-weight: 700;
  display: grid; place-items: center; z-index: 1;
  box-shadow: 0 0 0 4px var(--white);
}
.roadmap li:last-child .step-no { background: var(--gold); color: var(--brand-ink); }
.roadmap h4 {
  font-family: var(--display); font-size: 1.05rem; color: var(--brand);
  margin: .15rem 0 .2rem; line-height: 1.25;
}
.roadmap p { font-size: .92rem; color: var(--ink-2); margin: 0; line-height: 1.5; }
.roadmap .step-when {
  display: block; font-family: var(--sans); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brass); margin-bottom: .1rem;
}

/* ---- The people ---------------------------------------------------------
   Same card language as .branch so the About page hangs together. The
   portrait slot is left out rather than stubbed: when photographs arrive an
   <img> goes above the name and nothing else has to change. -------------- */
.people { display: grid; gap: 1.25rem; padding: 0; margin: 1.5rem auto 0; list-style: none;
          max-width: 60rem; }
@media (min-width: 760px) { .people { grid-template-columns: repeat(3, 1fr); } }
.person {
  background: var(--white); border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0; padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(35,27,30,.05), 0 6px 20px rgba(35,27,30,.05);
}
.person h3 { margin: 0 0 .15rem; color: var(--brand); font-size: 1.3rem; }
.person .person-role {
  display: block; font-family: var(--sans); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brass); margin-bottom: .75rem;
}
.person p { font-size: .95rem; margin: 0; color: var(--ink-2); line-height: 1.55; }

/* ---- Back to top --------------------------------------------------------
   Created by JS, so it never appears for anyone who cannot use it. Sits
   above the mobile call bar rather than under it, and below the consent
   banner in stacking order so that always wins. --------------------- */
.to-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
  width: 2.8rem; height: 2.8rem; padding: 0; border-radius: 50%;
  background: var(--brand-deep); color: var(--white); border: 1px solid var(--gold);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 10px rgba(35,27,30,.28);
  opacity: 0; visibility: hidden; transform: translateY(.5rem);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brand); border-color: var(--brass-lt); }
.to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.to-top svg { width: 1.1rem; height: 1.1rem; }
/* clear the mobile call bar */
@media (max-width: 899px) { .to-top { bottom: calc(4rem + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
@media print { .to-top { display: none; } }