/* ==========================================================================
   Victoria Memorials — components.css
   Reusable page components. Mobile-first; larger-screen refinements are
   kept beside each component so it can be understood in one place.
   ========================================================================== */

/* ---------- Media frames ---------- */
.frame { position: relative; overflow: hidden; border-radius: var(--radius-m); background: var(--c-stone-soft); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
/* <picture> wrappers must fill their frame so the <img> can cover it */
.frame picture, .hero__media picture, .card__media picture, .category-card__media picture, .cta-band__bg picture, .compare__visual picture { display: block; width: 100%; height: 100%; }
.frame--arch { border-radius: var(--radius-arch); }
.frame--tall { aspect-ratio: 4 / 5; }
.frame--wide { aspect-ratio: 16 / 10; }
.frame--square { aspect-ratio: 1; }
.frame--landscape { aspect-ratio: 4 / 3; }
.frame figcaption, .media-note {
  font-size: var(--fs-xs); color: var(--c-muted); letter-spacing: .02em; margin-top: .6rem; line-height: 1.5;
}
.frame-caption { position: absolute; left: .75rem; bottom: .75rem; z-index: 2; padding: .3rem .65rem; border-radius: 999px; background: rgba(246, 243, 236, .92); color: var(--c-charcoal); font-size: .72rem; letter-spacing: .04em; }
.figure { margin: 0; }
.figure figcaption { font-size: var(--fs-xs); color: var(--c-muted); margin-top: .65rem; line-height: 1.5; }

/* Decorative botanical emblem watermark */
.emblem-watermark { position: absolute; pointer-events: none; opacity: .07; width: clamp(220px, 30vw, 420px); }

/* Ornamental divider using the brand symbol */
.ornament { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0 auto var(--space-l); color: var(--c-stone); }
.ornament::before, .ornament::after { content: ""; height: 1px; width: 3.5rem; background: currentColor; opacity: .6; }
.ornament img { width: 26px; height: auto; }

/* ==========================================================================
   Home hero
   ========================================================================== */
.hero {
  position: relative; min-height: clamp(620px, 100svh, 980px); display: grid; align-items: end;
  color: var(--c-ivory); isolation: isolate; overflow: hidden; background: #1d2a25;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 50% 50%); transform: scale(1.04); animation: hero-settle 2.6s var(--ease-out) forwards; }
@keyframes hero-settle { to { transform: scale(1); } }
.hero::before { /* readable overlay: soft evergreen wash, stronger toward text */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(20, 34, 29, .55) 0%, rgba(20, 34, 29, .08) 28%, rgba(20, 34, 29, .1) 50%, rgba(20, 34, 29, .78) 100%),
    linear-gradient(90deg, rgba(20, 34, 29, .55) 0%, rgba(20, 34, 29, 0) 70%);
}
.hero__inner { padding-block: calc(var(--header-h) + 3rem) clamp(3rem, 2rem + 5vw, 6.5rem); display: grid; gap: var(--space-xl); }
.hero__content { max-width: 44rem; }
.hero .eyebrow { color: var(--c-stone-soft); }
.hero h1 { color: var(--c-ivory); margin-bottom: .45em; }
.hero h1 em { color: #E7D8C4; }
.hero__lead { font-size: var(--fs-lead); font-weight: 300; line-height: 1.65; color: rgba(246, 243, 236, .92); max-width: 36rem; margin-bottom: 2rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-size: .85rem; color: rgba(246, 243, 236, .85); border-top: 1px solid rgba(246, 243, 236, .25); padding-top: 1.25rem; list-style: none; margin: 0; padding-left: 0; }
.hero__meta li { margin: 0; display: inline-flex; align-items: center; gap: .55rem; }
.hero__meta .icon { width: 1.05rem; height: 1.05rem; color: var(--c-stone-soft); }
.hero__scroll { display: none; }

/* ==========================================================================
   Inner page hero
   ========================================================================== */
.page-hero { position: relative; padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(3rem, 2.4rem + 4vw, 6rem); overflow: hidden; }
.page-hero__grid { display: grid; gap: var(--space-xl); align-items: center; }
.page-hero h1 { margin-bottom: .4em; }
.page-hero .lead { max-width: 40rem; margin-bottom: 2rem; }
.page-hero__media { position: relative; }
.page-hero__media .frame { aspect-ratio: 4 / 4.4; }
.page-hero--center { text-align: center; }
.page-hero--center .lead { margin-inline: auto; }
.page-hero--center .btn-group { justify-content: center; }
.page-hero--dark { background: var(--c-evergreen); color: var(--c-on-dark-muted); }
.page-hero--dark h1 { color: var(--c-ivory); }
.page-hero--dark .lead { color: var(--c-on-dark-muted); }
.page-hero--dark .eyebrow { color: var(--c-sage); }
.page-hero--dark .breadcrumbs, .page-hero--dark .breadcrumbs a { color: var(--c-on-dark-muted); }
.page-hero--dark .breadcrumbs [aria-current] { color: var(--c-ivory); }

/* Breadcrumbs */
.breadcrumbs { font-size: .82rem; color: var(--c-muted); margin-bottom: 1.75rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.breadcrumbs li { margin: 0; display: inline-flex; align-items: center; gap: .35rem; }
.breadcrumbs li + li::before { content: "/"; opacity: .5; }
.breadcrumbs a { color: var(--c-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-evergreen); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--c-evergreen); }

/* Jump links / on-page navigation */
.jump-nav { border-block: 1px solid var(--c-line); background: var(--c-paper); position: sticky; top: calc(var(--header-h) - 14px); z-index: 20; }
.jump-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75rem; overflow-x: auto; scrollbar-width: none; }
.jump-nav ul::-webkit-scrollbar { display: none; }
.jump-nav li { margin: 0; flex: none; }
.jump-nav a { display: block; padding: 1rem 0; font-size: .88rem; color: var(--c-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.jump-nav a:hover, .jump-nav a.is-active { color: var(--c-evergreen); border-bottom-color: var(--c-evergreen); }

/* ==========================================================================
   Split layouts (image + text)
   ========================================================================== */
.split { display: grid; gap: var(--space-xl); align-items: center; }
.split__media { position: relative; }
.split__body > :last-child { margin-bottom: 0; }
.split__accent { position: absolute; width: 42%; right: -6%; bottom: -10%; border: 8px solid var(--c-ivory); box-shadow: var(--shadow-m); }
.section--alt .split__accent { border-color: var(--c-ivory-deep); }

/* Intro statement (home) */
.statement { font-family: var(--ff-serif); font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.35rem); line-height: 1.35; color: var(--c-evergreen); letter-spacing: -.01em; text-wrap: balance; margin: 0; }
.statement em { color: var(--c-stone-text); }
.values-row { display: grid; gap: 1.5rem; margin-top: var(--space-xl); padding-top: var(--space-l); border-top: 1px solid var(--c-line); }
.value h3 { font-family: var(--ff-sans); font-size: 1rem; font-weight: 500; color: var(--c-evergreen); margin: 0 0 .35rem; letter-spacing: 0; }
.value p { color: var(--c-muted); font-size: .95rem; margin: 0; }
.value .icon { width: 1.6rem; height: 1.6rem; color: var(--c-stone-text); margin-bottom: .85rem; stroke-width: 1.25; }

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  position: relative; display: flex; flex-direction: column; background: var(--c-paper);
  border: 1px solid var(--c-line); border-radius: var(--radius-m); overflow: hidden;
  transition: transform var(--dur-m) var(--ease-out), box-shadow var(--dur-m) var(--ease), border-color var(--dur-m);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--c-line-strong); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-stone-soft); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.045); }
.card__body { padding: 1.5rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.card__kicker { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--c-stone-text); font-weight: 500; margin: 0 0 .5rem; }
.card__title { font-size: 1.4rem; margin: 0 0 .5rem; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole-card link */
.card__text { color: var(--c-muted); font-size: .95rem; margin: 0 0 1.25rem; }
.card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .9rem; font-weight: 500; color: var(--c-evergreen); }
.card__foot .icon { transition: transform var(--dur-m) var(--ease-out); }
.card:hover .card__foot .icon { transform: translateX(4px); }
.card:focus-within { box-shadow: var(--focus); }
.card:focus-within :focus-visible { outline: none; }
a.card { text-decoration: none; color: inherit; }
.card__icon { width: 2rem; height: 2rem; color: var(--c-evergreen); margin-bottom: 1rem; stroke-width: 1.25; }
.card__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.card__tags li { margin: 0; font-size: .74rem; padding: .2rem .6rem; border-radius: 999px; background: var(--c-ivory-deep); color: var(--c-muted); }

/* Category cards — arch-topped imagery */
.category-grid { display: grid; gap: var(--space-l) var(--space-m); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) clamp(1.5rem, 3vw, 2.75rem); } }
/* Phones: a calm horizontal swipe row instead of a very long stack */
@media (max-width: 599.98px) {
  .category-grid, .swatch-row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 76%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 1rem; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
  .category-grid > *, .swatch-row > * { scroll-snap-align: start; }
  .swatch-row { grid-auto-columns: 42%; }
  .swipe-hint { display: block; }
}
.swipe-hint { display: none; font-size: var(--fs-xs); color: var(--c-muted); margin: -.25rem 0 1rem; }
.swatch-row { display: grid; gap: var(--space-m); grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
@media (min-width: 600px) and (max-width: 899.98px) { .swatch-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.category-card { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.category-card__media { position: relative; aspect-ratio: 4 / 4.6; border-radius: var(--radius-arch); overflow: hidden; background: var(--c-stone-soft); margin-bottom: 1.25rem; }
.category-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.category-card:hover .category-card__media img { transform: scale(1.05); }
.category-card__num { font-family: var(--ff-serif); font-style: italic; color: var(--c-stone-text); font-size: 1rem; margin-bottom: .2rem; }
.category-card h3 { font-size: 1.45rem; margin: 0 0 .45rem; transition: color var(--dur-s); }
.category-card p { color: var(--c-muted); font-size: .94rem; margin: 0 0 .9rem; }
.category-card .link-arrow { margin-top: auto; align-self: flex-start; }
.category-card:hover h3 { color: var(--c-evergreen-deep); }
.category-card:hover .link-arrow { background-size: 100% 1px; }
.category-card:hover .link-arrow .icon { transform: translateX(4px); }
.category-card:focus-visible { outline-offset: 6px; }

/* Feature tiles (services, personalisation) */
.feature { padding: 1.75rem 0 0; border-top: 1px solid var(--c-line-strong); }
.feature__num { font-family: var(--ff-serif); font-style: italic; color: var(--c-stone-text); font-size: 1.05rem; display: block; margin-bottom: .75rem; }
.feature h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.feature p { color: var(--c-muted); margin-bottom: 1rem; }
.feature .icon { width: 2rem; height: 2rem; stroke-width: 1.2; color: var(--c-evergreen); margin-bottom: 1rem; }
.section--dark .feature { border-top-color: rgba(246, 243, 236, .2); }
.section--dark .feature p { color: var(--c-on-dark-muted); }
.section--dark .feature__num { color: var(--c-stone); }
.section--dark .feature .icon { color: var(--c-stone); }

/* Icon list */
.check-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.check-list li { position: relative; padding-left: 1.9rem; margin: 0 0 .7rem; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 1.05rem; height: .55rem; border-left: 1.5px solid var(--c-evergreen); border-bottom: 1.5px solid var(--c-evergreen); transform: rotate(-45deg) translateY(-2px); }
.section--dark .check-list li::before { border-color: var(--c-stone); }
.dash-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.dash-list li { position: relative; padding-left: 1.6rem; margin: 0 0 .6rem; }
.dash-list li::before { content: ""; position: absolute; left: 0; top: .82em; width: .9rem; height: 1px; background: var(--c-stone-text); }

/* Definition-style rows */
.spec-list { margin: 0; display: grid; border-top: 1px solid var(--c-line); }
.spec-list > div { display: grid; gap: .25rem 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--c-line); }
.spec-list dt { font-weight: 500; color: var(--c-evergreen); }
.spec-list dd { margin: 0; color: var(--c-muted); }
.section--dark .spec-list, .section--dark .spec-list > div { border-color: rgba(246, 243, 236, .2); }
.section--dark .spec-list dt { color: var(--c-ivory); }
.section--dark .spec-list dd { color: var(--c-on-dark-muted); }

/* ==========================================================================
   Process steps (horizontal) and timeline (vertical)
   ========================================================================== */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-l); counter-reset: step; }
.steps > li { margin: 0; position: relative; counter-increment: step; padding-top: 4.25rem; }
.steps > li::before {
  content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0;
  font-family: var(--ff-serif); font-size: 2.6rem; line-height: 1; color: var(--c-stone);
}
.steps > li::after { content: ""; position: absolute; top: 1.3rem; left: 4rem; right: 0; height: 1px; background: var(--c-line-strong); }
.steps > li:last-child::after { right: 30%; background: linear-gradient(90deg, var(--c-line-strong), transparent); }
.steps h3 { font-size: 1.3rem; margin-bottom: .45rem; }
.steps p { color: var(--c-muted); margin: 0; font-size: .96rem; }
.section--dark .steps > li::before { color: var(--c-stone); }
.section--dark .steps > li::after { background: rgba(246, 243, 236, .22); }
.section--dark .steps p { color: var(--c-on-dark-muted); }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; counter-reset: tl; }
.timeline::before { content: ""; position: absolute; left: 1.55rem; top: .5rem; bottom: .5rem; width: 1px; background: linear-gradient(var(--c-line-strong), var(--c-line-strong) 90%, transparent); }
.timeline > li { position: relative; margin: 0; padding: 0 0 var(--space-xl) 4.75rem; counter-increment: tl; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline__marker {
  position: absolute; left: 0; top: 0; width: 3.1rem; height: 3.1rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--c-ivory); border: 1px solid var(--c-line-strong);
  font-family: var(--ff-serif); font-size: 1.15rem; color: var(--c-evergreen);
  transition: background-color var(--dur-m), color var(--dur-m), border-color var(--dur-m);
}
.timeline > li.is-revealed .timeline__marker, .timeline > li:hover .timeline__marker { background: var(--c-evergreen); color: var(--c-ivory); border-color: var(--c-evergreen); }
.timeline__card { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-m); padding: 1.5rem 1.5rem 1.4rem; }
.timeline__card h3 { font-size: 1.35rem; margin-bottom: .4rem; }
.timeline__card p { color: var(--c-muted); }
.timeline__card > :last-child { margin-bottom: 0; }
.timeline__who { display: inline-flex; gap: .4rem; align-items: center; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-stone-text); font-weight: 500; margin-bottom: .6rem; }
.timeline__note { margin-top: 1rem; padding: .85rem 1rem; background: var(--c-sage-soft); border-radius: var(--radius-s); font-size: .9rem; color: var(--c-charcoal); }

/* ==========================================================================
   Callouts / notices
   ========================================================================== */
.notice {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
  padding: 1.15rem 1.25rem; border-radius: var(--radius-m); background: var(--c-paper);
  border: 1px solid var(--c-line); border-left: 3px solid var(--c-stone); font-size: .94rem; line-height: 1.65;
}
.notice .icon { color: var(--c-stone-text); margin-top: .15rem; }
.notice p { margin: 0; }
.notice p + p { margin-top: .5em; }
.notice strong { color: var(--c-evergreen); }
.notice--sage { background: var(--c-sage-soft); border-left-color: var(--c-evergreen); }
.notice--sage .icon { color: var(--c-evergreen); }
.notice--warn { background: var(--c-rose-soft); border-left-color: #9b6a63; }
.notice--warn .icon { color: #8a5a54; }
.notice--draft { background: #FFF8E8; border: 1px dashed #b28a3c; border-left: 3px solid #b28a3c; }

/* Placeholder block for content awaiting verified business details */
.placeholder-card {
  border: 1.5px dashed var(--c-line-strong); border-radius: var(--radius-m); padding: 1.5rem;
  background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(41, 72, 61, .025) 12px 24px);
}
.placeholder-card__badge { display: inline-block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--c-stone-text); border: 1px solid currentColor; padding: .15rem .55rem; border-radius: 999px; margin-bottom: .85rem; }
.placeholder-photo { display: grid; place-items: center; text-align: center; aspect-ratio: 4 / 5; border-radius: var(--radius-arch); background: var(--c-ivory-deep); border: 1.5px dashed var(--c-line-strong); color: var(--c-muted); font-size: .85rem; padding: 2rem; }
.placeholder-photo img { width: 54px; opacity: .55; margin: 0 auto 1rem; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band { position: relative; overflow: hidden; background: var(--c-evergreen); color: var(--c-on-dark-muted); border-radius: var(--radius-l); isolation: isolate; }
.cta-band__bg { position: absolute; inset: 0; z-index: -1; opacity: .2; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, rgba(41, 72, 61, .96) 30%, rgba(41, 72, 61, .7)); }
.cta-band__inner { display: grid; gap: var(--space-l); padding: clamp(2.25rem, 1.5rem + 4vw, 5rem); align-items: center; }
.cta-band h2 { color: var(--c-ivory); margin-bottom: .4em; }
.cta-band .eyebrow { color: var(--c-sage); }
.cta-band p { margin-bottom: 0; max-width: 34rem; }
.cta-band .btn-group { justify-content: flex-start; }
.cta-band__emblem { position: absolute; right: clamp(-80px, -4vw, -20px); top: 50%; translate: 0 -50%; width: clamp(200px, 26vw, 360px); opacity: .09; z-index: -1; }
.cta-contact { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .9rem; }
.cta-contact li { margin: 0; display: inline-flex; gap: .5rem; align-items: center; }

/* Closing CTA (softer, ivory) */
.closing { text-align: center; }
.closing .lead { max-width: 38rem; margin-inline: auto; }
.closing .btn-group { justify-content: center; margin-top: 2rem; }

/* ==========================================================================
   Accordion (native <details>)
   ========================================================================== */
.accordion { border-top: 1px solid var(--c-line-strong); }
.accordion details { border-bottom: 1px solid var(--c-line-strong); }
.accordion summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; font-family: var(--ff-serif); font-size: clamp(1.1rem, 1.02rem + .35vw, 1.3rem); line-height: 1.35; color: var(--c-evergreen);
  border-radius: 2px;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--c-evergreen-deep); }
.accordion__icon { position: relative; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--c-line-strong); transition: background-color var(--dur-m), border-color var(--dur-m); }
.accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: .8rem; height: 1.5px; background: var(--c-evergreen); translate: -50% -50%; transition: transform var(--dur-m) var(--ease), background-color var(--dur-m); }
.accordion__icon::after { transform: rotate(90deg); }
.accordion details[open] .accordion__icon { background: var(--c-evergreen); border-color: var(--c-evergreen); }
.accordion details[open] .accordion__icon::before, .accordion details[open] .accordion__icon::after { background: var(--c-ivory); }
.accordion details[open] .accordion__icon::after { transform: rotate(0deg); }
.accordion__panel { padding: 0 0 1.6rem; max-width: 62rem; color: var(--c-charcoal); }
.accordion__panel > :last-child { margin-bottom: 0; }
.accordion__panel p, .accordion__panel li { color: #3d3d3a; }
.js .accordion__panel { overflow: hidden; }

/* FAQ tools */
.faq-tools { display: grid; gap: 1rem; margin-bottom: var(--space-l); }
.search-field { position: relative; }
.search-field .icon { position: absolute; left: 1.1rem; top: 50%; translate: 0 -50%; color: var(--c-muted); pointer-events: none; }
.search-field input { width: 100%; min-height: 3.4rem; padding: .85rem 1rem .85rem 3.1rem; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-paper); font-size: 1rem; transition: border-color var(--dur-s), box-shadow var(--dur-s); }
.search-field input:focus { outline: none; border-color: var(--c-evergreen); box-shadow: 0 0 0 3px rgba(41, 72, 61, .15); }
.faq-group { margin-bottom: var(--space-xl); }
.faq-group h2 { font-size: var(--fs-h3); margin-bottom: 1rem; }
.faq-empty { padding: 2rem; text-align: center; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-m); }
mark { background: var(--c-stone-soft); color: inherit; padding: 0 .1em; border-radius: 2px; }

/* ==========================================================================
   Chips / filters
   ========================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .5rem 1.05rem;
  border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-paper); color: var(--c-charcoal);
  font-size: .9rem; line-height: 1.2; cursor: pointer; transition: background-color var(--dur-s), color var(--dur-s), border-color var(--dur-s);
}
.chip:hover { border-color: var(--c-evergreen); color: var(--c-evergreen); }
.chip[aria-pressed="true"] { background: var(--c-evergreen); border-color: var(--c-evergreen); color: var(--c-ivory); }
.chip[aria-pressed="true"]::before { content: ""; width: .55rem; height: .3rem; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg) translateY(-1px); }
.chip:focus-visible { outline: none; box-shadow: var(--focus); }

.filters { display: grid; gap: 1.5rem; padding: 1.5rem; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-l); }
html:not(.js) [data-js-only] { display: none !important; }
.filters__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.filters__groups { display: grid; gap: 1.5rem; }
.filters__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.filters__group legend { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--c-stone-text); font-weight: 500; margin-bottom: .75rem; padding: 0; }
.filters__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.filters__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: var(--space-l) 0 var(--space-m); }
.filters__count { font-size: .95rem; color: var(--c-muted); margin: 0; }
.filters__count strong { color: var(--c-evergreen); font-weight: 600; }
.filters__toggle { display: inline-flex; }
.btn-reset { background: none; border: 0; padding: .5rem .25rem; color: var(--c-evergreen); text-decoration: underline; text-underline-offset: .25em; font-size: .9rem; min-height: 44px; }
.btn-reset:hover { color: var(--c-evergreen-deep); }
.style-grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
.style-card { animation: card-in 500ms var(--ease-out) both; }
.style-card[hidden] { display: none; }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } }
.no-results { padding: 2.5rem; text-align: center; border: 1px dashed var(--c-line-strong); border-radius: var(--radius-l); }
.no-results h3 { margin-bottom: .5rem; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: 1.35rem; }
.form-row { display: grid; gap: 1.35rem; }
.field { display: grid; gap: .45rem; min-width: 0; }
.field label, .field .label, .fieldset legend { font-size: .9rem; font-weight: 500; color: var(--c-charcoal); }
.field .optional, .fieldset .optional { font-weight: 400; color: var(--c-muted); font-size: .82rem; }
.field .hint { font-size: .82rem; color: var(--c-muted); margin: -.15rem 0 0; line-height: 1.5; }
.input, .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="search"], .field select, .field textarea {
  width: 100%; min-height: 3.2rem; padding: .8rem 1rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius-s);
  background: #fff; color: var(--c-charcoal); font-size: 1rem; line-height: 1.4; appearance: none;
  transition: border-color var(--dur-s), box-shadow var(--dur-s), background-color var(--dur-s);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field select { padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2329483D' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--c-evergreen-soft); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-evergreen); box-shadow: 0 0 0 3px rgba(41, 72, 61, .16); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #A23B32; background: #FFFBFA; }
.field-error { display: flex; gap: .4rem; align-items: flex-start; font-size: .84rem; color: #9A3129; margin: 0; }
.field-error:empty { display: none; }
.field-error::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #9A3129; color: #fff; font-size: .7rem; font-weight: 600; margin-top: .12rem; }

.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset legend { padding: 0; margin-bottom: .65rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.9rem; padding: .55rem 1.1rem; border: 1px solid var(--c-line-strong); border-radius: 999px; background: #fff; font-size: .92rem; transition: background-color var(--dur-s), border-color var(--dur-s), color var(--dur-s); }
.choice span::before { content: ""; width: .95rem; height: .95rem; border-radius: 50%; border: 1px solid var(--c-line-strong); background: #fff; transition: box-shadow var(--dur-s), border-color var(--dur-s); flex: none; }
.choice input[type="checkbox"] + span::before { border-radius: 3px; }
.choice input:hover + span { border-color: var(--c-evergreen); }
.choice input:checked + span { border-color: var(--c-evergreen); background: var(--c-sage-soft); color: var(--c-evergreen); }
.choice input:checked + span::before { border-color: var(--c-evergreen); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px var(--c-evergreen); }
.choice input:focus-visible + span { box-shadow: var(--focus); }

.consent { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; padding: 1.1rem 1.2rem; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-s); font-size: .9rem; line-height: 1.6; }
.consent input { width: 1.5rem; height: 1.5rem; margin: .15rem 0 0; accent-color: var(--c-evergreen); }
.consent.has-error { border-color: #A23B32; }
.consent .field-error { grid-column: 1 / -1; }
.form-status { padding: 1.1rem 1.25rem; border-radius: var(--radius-s); font-size: .95rem; line-height: 1.6; }
.form-status:empty { display: none; }
.form-status--error { background: #FBEDEB; border: 1px solid #E3BDB7; color: #6E241E; }
.form-status--info { background: #FFF8E8; border: 1px solid #E9D3A1; color: #5B4512; }
.form-status--success { background: var(--c-sage-soft); border: 1px solid var(--c-sage); color: var(--c-evergreen-deep); }
.form-status h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.form-status p:last-child { margin-bottom: 0; }
.form-config-note { display: grid; grid-template-columns: auto 1fr; gap: .75rem; padding: .9rem 1.1rem; margin-bottom: 1.5rem; border-radius: var(--radius-s); background: #FFF8E8; border: 1px dashed #C9A45A; font-size: .86rem; line-height: 1.55; color: #5B4512; }
.form-config-note .icon { color: #8C6A22; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form-actions .small { margin: 0; color: var(--c-muted); }
.btn .spinner { display: none; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
.btn.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.file-drop { display: grid; gap: .5rem; padding: 1.25rem; border: 1.5px dashed var(--c-line-strong); border-radius: var(--radius-m); background: var(--c-paper); text-align: center; }

/* Contact page layout */
.contact-layout { display: grid; gap: var(--space-xl); align-items: start; }
.contact-card { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-l); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); box-shadow: var(--shadow-s); }
.contact-aside { display: grid; gap: var(--space-l); }
.contact-detail { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.contact-detail li { margin: 0; display: grid; grid-template-columns: 2.6rem 1fr; gap: .9rem; align-items: start; }
.contact-detail .icon-wrap { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-sage-soft); color: var(--c-evergreen); }
.contact-detail .label { display: block; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--c-stone-text); font-weight: 500; }
.contact-detail .value { color: var(--c-charcoal); }

/* ==========================================================================
   Memorial finder (home teaser + full wizard)
   ========================================================================== */
.finder-teaser { display: grid; gap: var(--space-xl); align-items: center; }
.section--dark .finder-teaser__panel a:not(.btn) { color: var(--c-evergreen); }
.section--dark .finder-teaser__panel .eyebrow { color: var(--c-stone-text); }
.section--dark .finder-teaser__panel .eyebrow::before { background: var(--c-stone-text); }
.finder-teaser__panel { background: var(--c-paper); border-radius: var(--radius-l); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--shadow-l); color: var(--c-charcoal); }
.finder-teaser__q { font-family: var(--ff-serif); font-size: 1.45rem; color: var(--c-evergreen); margin: 0 0 1.25rem; line-height: 1.3; }
.finder-teaser__opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: 1.25rem; }
.section--dark .finder-teaser__opts a, .finder-teaser__opts a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .9rem 1rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius-s); text-decoration: none; color: var(--c-charcoal); font-size: .93rem; background: #fff; transition: border-color var(--dur-s), background-color var(--dur-s), color var(--dur-s); }
.finder-teaser__opts a:hover { border-color: var(--c-evergreen); background: var(--c-sage-soft); color: var(--c-evergreen); }
.finder-teaser__opts .icon { width: 1rem; height: 1rem; color: var(--c-stone-text); }
.finder-teaser__progress { display: flex; gap: .35rem; margin-bottom: 1.25rem; }
.finder-teaser__progress span { height: 3px; flex: 1; border-radius: 3px; background: var(--c-line); }
.finder-teaser__progress span:first-child { background: var(--c-evergreen); }

.wizard { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-l); box-shadow: var(--shadow-m); overflow: hidden; }
.wizard__head { padding: 1.5rem clamp(1.25rem, .8rem + 2vw, 2.5rem) 1.25rem; border-bottom: 1px solid var(--c-line); }
.wizard__progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; list-style: none; margin: 0; padding: 0; }
.wizard__progress li { margin: 0; }
.wizard__progress button { width: 100%; background: none; border: 0; padding: .4rem 0 0; display: grid; gap: .5rem; text-align: left; color: var(--c-muted); font-size: .74rem; line-height: 1.3; }
.wizard__progress button::before { content: ""; height: 4px; border-radius: 4px; background: var(--c-line); transition: background-color var(--dur-m) var(--ease); }
.wizard__progress button[disabled] { cursor: default; }
.wizard__progress .is-done button::before { background: var(--c-sage); }
.wizard__progress .is-current button::before { background: var(--c-evergreen); }
.wizard__progress .is-current button { color: var(--c-evergreen); font-weight: 500; }
.wizard__progress .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wizard__count { display: flex; justify-content: space-between; align-items: center; margin-top: .9rem; font-size: .85rem; color: var(--c-muted); }
.wizard__body { padding: clamp(1.5rem, 1rem + 2.5vw, 3rem) clamp(1.25rem, .8rem + 2vw, 2.5rem); min-height: 26rem; }
.wizard__step { animation: step-in 480ms var(--ease-out) both; }
.wizard__step[data-dir="back"] { animation-name: step-in-back; }
@keyframes step-in { from { opacity: 0; transform: translateX(18px); } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-18px); } }
.wizard__step:focus { outline: none; }
.wizard__q { font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem); margin-bottom: .4rem; }
.wizard__help { color: var(--c-muted); margin-bottom: 1.75rem; max-width: 40rem; }
.option-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); border: 0; padding: 0; margin: 0; }
.option { position: relative; }
.option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.option__card {
  display: flex; flex-direction: column; gap: .6rem; height: 100%; padding: 1.15rem 1.15rem 1.2rem;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-m); background: #fff;
  transition: border-color var(--dur-s), box-shadow var(--dur-m), background-color var(--dur-s), transform var(--dur-m) var(--ease-out);
}
.option__icon { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-ivory-deep); color: var(--c-evergreen); transition: background-color var(--dur-s), color var(--dur-s); }
.option__icon .icon { width: 1.35rem; height: 1.35rem; stroke-width: 1.3; }
.option__title { font-weight: 500; color: var(--c-charcoal); line-height: 1.35; }
.option__desc { font-size: .84rem; color: var(--c-muted); line-height: 1.5; }
.option__check { position: absolute; top: .9rem; right: .9rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1px solid var(--c-line-strong); background: #fff; transition: background-color var(--dur-s), border-color var(--dur-s); }
.option__check::after { content: ""; position: absolute; left: 50%; top: 45%; width: .5rem; height: .28rem; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: translate(-50%, -50%) rotate(-45deg); opacity: 0; }
.option input:hover + .option__card { border-color: var(--c-evergreen); transform: translateY(-2px); box-shadow: var(--shadow-s); }
.option input:checked + .option__card { border-color: var(--c-evergreen); background: #F3F6F2; box-shadow: inset 0 0 0 1px var(--c-evergreen); }
.option input:checked + .option__card .option__icon { background: var(--c-evergreen); color: var(--c-ivory); }
.option input:checked + .option__card .option__check { background: var(--c-evergreen); border-color: var(--c-evergreen); }
.option input:checked + .option__card .option__check::after { opacity: 1; }
.option input:focus-visible + .option__card { box-shadow: var(--focus); }
.wizard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem clamp(1.25rem, .8rem + 2vw, 2.5rem); border-top: 1px solid var(--c-line); background: var(--c-ivory); }
.wizard__foot .btn-group { margin-left: auto; }
.wizard__skip { background: none; border: 0; color: var(--c-muted); text-decoration: underline; text-underline-offset: .25em; font-size: .9rem; min-height: 44px; padding: 0 .25rem; }
.wizard__skip:hover { color: var(--c-evergreen); }

/* Results */
.results { margin-top: var(--space-xl); }
.wizard__body[hidden] + .wizard__foot, .wizard__body[hidden] { display: none; }
.results-intro { display: grid; gap: 1rem; margin-bottom: var(--space-l); }
.results-intro h2 { margin-bottom: .25rem; }
.result-grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); margin-bottom: var(--space-l); }
.result-card { position: relative; }
.result-card .card__media { aspect-ratio: 4 / 3; }
.result-card__why { font-size: .86rem; color: var(--c-muted); padding-top: .85rem; margin-top: auto; border-top: 1px solid var(--c-line); }
.result-card__why strong { color: var(--c-evergreen); font-weight: 500; }
.result-rank { position: absolute; top: .75rem; left: .75rem; z-index: 2; background: var(--c-evergreen); color: var(--c-ivory); font-size: .72rem; letter-spacing: .06em; padding: .25rem .65rem; border-radius: 999px; }
.summary-list { margin: 0; display: grid; gap: 0; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: #fff; }
.summary-list > div { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--c-line); align-items: center; }
.summary-list > div:last-child { border-bottom: 0; }
.summary-list dt { font-size: .8rem; color: var(--c-muted); grid-column: 1; }
.summary-list dd { margin: 0; font-weight: 500; color: var(--c-charcoal); grid-column: 1; }
.summary-list button { grid-column: 2; grid-row: 1 / span 2; background: none; border: 0; color: var(--c-evergreen); text-decoration: underline; text-underline-offset: .2em; font-size: .85rem; min-height: 44px; }
.next-steps { display: grid; gap: var(--space-m); }

/* ==========================================================================
   Materials: swatch explorer
   ========================================================================== */
.swatch-explorer { display: grid; gap: var(--space-l); align-items: start; }
.swatch-stage { position: relative; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 1; background: #222; box-shadow: var(--shadow-l); }
.swatch-stage img { width: 100%; height: 100%; object-fit: cover; transition: opacity 450ms var(--ease); }
.swatch-stage img.is-fading { opacity: 0; }
.swatch-stage__label { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding: .7rem 1rem; background: rgba(246, 243, 236, .94); border-radius: var(--radius-s); font-size: .85rem; }
.swatch-stage__label strong { font-family: var(--ff-serif); font-weight: 400; font-size: 1.1rem; color: var(--c-evergreen); }
.swatch-panel h3 { font-size: 1.7rem; margin-bottom: .35rem; }
.swatch-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: .65rem; }
.swatch-list li { margin: 0; }
.swatch-btn { display: grid; gap: .4rem; width: 100%; background: none; border: 0; padding: 0; text-align: center; font-size: .74rem; line-height: 1.3; color: var(--c-muted); }
.swatch-btn img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid var(--c-ivory); box-shadow: 0 0 0 1px var(--c-line-strong); transition: box-shadow var(--dur-s), transform var(--dur-m) var(--ease-out); }
.swatch-btn:hover img { transform: scale(1.05); }
.swatch-btn[aria-pressed="true"] { color: var(--c-evergreen); font-weight: 500; }
.swatch-btn[aria-pressed="true"] img { box-shadow: 0 0 0 2px var(--c-evergreen); }
.swatch-btn:focus-visible { outline: none; }
.swatch-btn:focus-visible img { box-shadow: var(--focus); }
.segmented { display: inline-flex; padding: .3rem; border-radius: 999px; background: var(--c-ivory-deep); border: 1px solid var(--c-line); gap: .2rem; flex-wrap: wrap; }
.segmented button { min-height: 2.6rem; padding: .45rem 1.1rem; border-radius: 999px; border: 0; background: transparent; font-size: .88rem; color: var(--c-muted); transition: background-color var(--dur-s), color var(--dur-s), box-shadow var(--dur-s); }
.segmented button:hover { color: var(--c-evergreen); }
.segmented button[aria-pressed="true"], .segmented button[aria-selected="true"] { background: #fff; color: var(--c-evergreen); box-shadow: var(--shadow-s); font-weight: 500; }
.segmented button[disabled] { opacity: .45; cursor: not-allowed; }
.segmented button:focus-visible { outline: none; box-shadow: var(--focus); }
.swatch-facts { margin-top: 1.5rem; }
.rating { display: inline-flex; gap: .25rem; vertical-align: middle; }
.rating span { width: .65rem; height: .65rem; border-radius: 50%; background: var(--c-line-strong); }
.rating span.on { background: var(--c-evergreen); }

/* Data/comparison tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-paper); }
.data-table { min-width: 640px; font-size: .93rem; }
.data-table caption { text-align: left; padding: 1rem 1.25rem; font-size: .85rem; color: var(--c-muted); caption-side: bottom; border-top: 1px solid var(--c-line); }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 1rem 1.25rem; border-bottom: 1px solid var(--c-line); }
.data-table thead th { font-family: var(--ff-serif); font-weight: 400; font-size: 1.1rem; color: var(--c-evergreen); background: var(--c-ivory-deep); }
.data-table tbody th { font-weight: 500; color: var(--c-evergreen); width: 22%; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table td { color: #3d3d3a; }

/* ==========================================================================
   Traditional vs contemporary comparison
   ========================================================================== */
.compare { display: grid; gap: var(--space-l); }
.compare__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.compare__stage { display: grid; gap: var(--space-l); align-items: center; }
.compare__visual { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-l); overflow: hidden; background: var(--c-ivory-deep); }
.compare__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 600ms var(--ease), transform 900ms var(--ease-out); }
.compare__visual img:not(.is-active) { opacity: 0; transform: scale(1.03); }
.compare__aspects { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.compare__aspects li { margin: 0; display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--c-line); }
.compare__aspects .k { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-stone-text); font-weight: 500; padding-top: .15rem; }
.compare__aspects .v { color: var(--c-charcoal); }
.compare__panel[hidden] { display: none; }
.compare__panel { animation: card-in 450ms var(--ease-out) both; }

/* Shape gallery (headstone forms) */
.shape-grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.shape { text-align: center; }
.shape .frame { aspect-ratio: 1; margin-bottom: .9rem; }
.shape .frame:not(.frame--arch) { border-radius: var(--radius-m); }
.shape .frame--arch { aspect-ratio: 3 / 4; }
.shape h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.shape p { font-size: .88rem; color: var(--c-muted); margin: 0; }

/* Language / inscription specimen */
.specimen { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.specimen__item { padding: 1.5rem; border-radius: var(--radius-m); background: #24302b; color: #E9E1D2; text-align: center; min-height: 9rem; display: grid; place-content: center; gap: .5rem; background-image: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .06), transparent 60%); }
.specimen__item .sample { font-size: 1.6rem; line-height: 1.4; font-family: var(--ff-serif); }
.specimen__item .lang { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: #BFC9BE; }

/* ==========================================================================
   Sticky consultation bar (mobile)
   ========================================================================== */
.sticky-cta {
  position: fixed; left: .75rem; right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); z-index: 80;
  display: flex; gap: .5rem; padding: .5rem; border-radius: 999px; background: rgba(41, 72, 61, .97);
  box-shadow: 0 18px 40px -16px rgba(20, 34, 29, .7);
  transform: translateY(calc(100% + 2rem)); transition: transform 500ms var(--ease-out);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { flex: 1; min-height: 2.9rem; padding-inline: .9rem; font-size: .88rem; }

/* ==========================================================================
   Misc
   ========================================================================== */
.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.tag-list li { margin: 0; padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--c-line-strong); font-size: .85rem; color: var(--c-evergreen); background: var(--c-paper); }
.section--dark .tag-list li { border-color: rgba(246, 243, 236, .3); color: var(--c-ivory); background: transparent; }

.quote-block { border-left: 2px solid var(--c-stone); padding: .25rem 0 .25rem 1.5rem; margin: var(--space-l) 0; font-family: var(--ff-serif); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); line-height: 1.5; color: var(--c-evergreen); }

.stat-strip { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.stat-strip > div { padding-top: 1rem; border-top: 1px solid var(--c-line-strong); }
.stat-strip strong { display: block; font-family: var(--ff-serif); font-weight: 400; font-size: 1.35rem; color: var(--c-evergreen); line-height: 1.3; }
.stat-strip span { font-size: .9rem; color: var(--c-muted); }

.region-map { position: relative; }
.region-map svg { width: 100%; height: auto; }

.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2.2em; font-size: var(--fs-h3); }
.prose h3 { margin-top: 1.8em; font-size: 1.2rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose li { margin-top: .4em; }

.toc { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-m); padding: 1.25rem 1.5rem; font-size: .92rem; }
.toc h2 { font-family: var(--ff-sans); font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--c-stone-text); font-weight: 500; margin-bottom: .75rem; }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

.illustration-note { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--c-muted); }
.illustration-note::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--c-stone); }

.cemetery-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); list-style: none; padding: 0; margin: 0; }
.cemetery-list li { margin: 0; padding: 1.25rem 1.35rem; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-paper); }
.cemetery-list h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.cemetery-list p { font-size: .88rem; color: var(--c-muted); margin: 0; }

.question-list { counter-reset: q; list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.question-list li { counter-increment: q; margin: 0; position: relative; padding: 1rem 1.25rem 1rem 3.4rem; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-m); }
.question-list li::before { content: counter(q); position: absolute; left: 1.1rem; top: 1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--c-sage-soft); color: var(--c-evergreen); font-size: .8rem; font-weight: 600; display: grid; place-items: center; }

/* Small utilities */
.panel { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-m); padding: 1.5rem; }
.question-list--2col { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.cemetery-list p + p { margin-top: .5rem; }
.section--dark .figure figcaption, .section--dark .media-note { color: var(--c-on-dark-muted); }
.palette { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; padding: 0; margin: 0; }
.palette li { margin: 0; display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; }
.palette .dot { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid var(--c-line-strong); }
.page-hero__media .frame--landscape { aspect-ratio: 4 / 3; }
.specimen__item .small { color: #C9CFC6; line-height: 1.5; }
.mt-s { margin-top: 1rem !important; }
.mt-m { margin-top: 1.5rem !important; }
.mt-l { margin-top: var(--space-l) !important; }

/* Finder: no layout shift — CSS decides between wizard and fallback before JS runs */
html:not(.js) [data-finder] { display: none; }
.js [data-finder-fallback] { display: none; }
.wizard__body { min-height: 30rem; }
.wizard__progress:empty { min-height: 2.6rem; }
@media (max-width: 599.98px) { .wizard__body { min-height: 44rem; } }

/* Scripts not covered by the latin font subsets fall back to a matching serif */
.sample[lang="vi"], .sample[lang="el"], [lang="vi"] .sample, [lang="el"] .sample { font-family: Georgia, "Times New Roman", serif; }
.sample[lang="ar"], .sample[lang="he"] { font-family: "Times New Roman", "Arial Hebrew", "Noto Naskh Arabic", serif; font-size: 1.7rem; }

/* Notices placed inside dark sections keep readable dark text */
.section--dark .notice { color: var(--c-charcoal); }
.section--dark .notice a { color: var(--c-evergreen); }
.shape-grid--landscape .shape .frame { aspect-ratio: 4 / 3; }