/* Irish Cremation Walls, funeral-director edition.
   Chaptered editorial: every chapter lands on its own ground (granite or paper)
   with a hard cut, and the folio at the top is the only chrome.
   Type sizes come only from the --sc-t-* ramp in scrollcraft.css. */

:root {
  --granite: #131614;
  --granite-2: #1b1f1d;
  --bone: #ece6da;
  --bone-soft: #aaa497;
  --gilt: #cda862;
  --gilt-ink: #17140d;

  --paper: #eee9df;
  --paper-2: #e4ddcf;
  --ink: #181b19;
  --ink-soft: #57544b;
  --gilt-deep: #7a5c1e;

  --sc-canvas: var(--granite);
  --sc-surface: var(--granite-2);
  --sc-ink: var(--bone);
  --sc-ink-soft: var(--bone-soft);
  --sc-accent: var(--gilt);
  --sc-accent-ink: var(--gilt-ink);
  --sc-font-display: "Newsreader", Georgia, serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-shadow-color: 150 12% 4%;

  --folio-h: 64px;
}

/* ------------------------------------------------------------- grounds -- */
.ch { position: relative; }
.ch--dark {
  --sc-canvas: var(--granite); --sc-surface: var(--granite-2);
  --sc-ink: var(--bone); --sc-ink-soft: var(--bone-soft);
  --sc-accent: var(--gilt); --sc-accent-ink: var(--gilt-ink);
  background: var(--granite); color: var(--bone);
}
.ch--light {
  --sc-canvas: var(--paper); --sc-surface: var(--paper-2);
  --sc-ink: var(--ink); --sc-ink-soft: var(--ink-soft);
  --sc-accent: var(--gilt-deep); --sc-accent-ink: var(--paper);
  background: var(--paper); color: var(--ink);
}
body { background: var(--granite); }

h1, h2, h3 {
  font-family: var(--sc-font-display);
  font-weight: 600;
  letter-spacing: var(--sc-track-tight);
  line-height: var(--sc-leading-tight);
  text-wrap: balance;
  margin: 0;
}
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--sc-accent); }
p { margin: 0; }
strong { font-weight: 600; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -999px; top: 12px; z-index: 100;
  background: var(--gilt); color: var(--gilt-ink); padding: var(--sc-3) var(--sc-5);
  border-radius: var(--sc-r-pill); font-weight: 600;
}
.skip:focus { left: 12px; }

/* ------------------------------------------------------------- buttons -- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--sc-5);
  border-radius: var(--sc-r-pill); border: 0;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-text); font-size: var(--sc-t-sm); font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out);
}
.pill:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .pill:hover { transform: translateY(-1px); background: color-mix(in oklab, var(--sc-accent) 86%, var(--sc-ink)); }
}
.pill--sm { min-height: 40px; padding: 0 var(--sc-4); font-size: var(--sc-t-xs); }

.textlink {
  display: inline-flex; align-items: center; gap: var(--sc-2); min-height: 44px;
  font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink);
  text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--sc-accent) 70%, transparent);
  text-underline-offset: 0.35em;
  transition: text-decoration-color var(--sc-d-fast) var(--sc-ease-out);
}
.textlink::after { content: "→"; transition: transform var(--sc-d-fast) var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .textlink:hover { text-decoration-color: var(--sc-accent); }
  .textlink:hover::after { transform: translateX(3px); }
}

/* --------------------------------------------------------------- folio -- */
.folio {
  position: fixed; inset: 0 0 auto; z-index: var(--sc-z-chrome);
  height: var(--folio-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sc-5);
  padding-inline: var(--sc-gutter);
  color: var(--ink);
  background: var(--paper);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  transition: background-color var(--sc-d-base) var(--sc-ease-out), color var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out);
}
.folio[data-ground="dark"] {
  color: var(--bone); background: var(--granite);
  border-bottom-color: color-mix(in oklab, var(--bone) 10%, transparent);
}
.folio-mark {
  display: inline-flex; align-items: center; gap: var(--sc-3);
  font-family: var(--sc-font-display); font-size: var(--sc-t-base); font-weight: 600;
  letter-spacing: var(--sc-track-snug); text-decoration: none; min-height: 44px;
}
.folio-mark svg { color: var(--gilt); }
.folio-index { position: relative; justify-self: start; }
.folio-chapter {
  display: inline-flex; align-items: baseline; gap: var(--sc-3);
  min-height: 44px; padding: 0 var(--sc-3); border: 0; background: none; cursor: pointer;
  font-size: var(--sc-t-xs); color: inherit;
}
.folio-chapter svg { align-self: center; opacity: 0.6; transition: transform var(--sc-d-fast) var(--sc-ease-out); }
.folio-chapter[aria-expanded="true"] svg { transform: rotate(180deg); }
.folio-num { font-variant-numeric: tabular-nums; color: var(--gilt-deep); font-weight: 600; }
.folio[data-ground="dark"] .folio-num { color: var(--gilt); }
.folio-title { opacity: 0.8; }
.folio-list {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 16rem;
  background: var(--granite-2); color: var(--bone);
  border-radius: var(--sc-r-md); box-shadow: var(--sc-e3), var(--sc-edge);
  padding: var(--sc-2);
  transform-origin: top left;
  animation: folio-in var(--sc-d-base) var(--sc-ease-out);
}
@keyframes folio-in { from { opacity: 0; transform: scale(0.97) translateY(-4px); } }
.folio-list ol { list-style: none; margin: 0; padding: 0; }
.folio-list a {
  display: flex; gap: var(--sc-4); align-items: baseline;
  padding: var(--sc-3) var(--sc-4); border-radius: var(--sc-r-sm);
  font-size: var(--sc-t-sm); text-decoration: none;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out);
}
.folio-list a span { font-size: var(--sc-t-xs); color: var(--gilt); font-variant-numeric: tabular-nums; min-width: 1.5em; }
.folio-list a:hover, .folio-list a:focus-visible { background: color-mix(in oklab, var(--bone) 8%, transparent); }
.folio-list li:last-child { margin-top: var(--sc-2); padding-top: var(--sc-2); border-top: 1px solid color-mix(in oklab, var(--bone) 10%, transparent); }

@media (max-width: 720px) {
  .folio { gap: var(--sc-3); }
  .folio-mark span { display: none; }
  .folio-chapter { padding-left: 0; }
  .folio-list { position: fixed; top: calc(var(--folio-h) + 8px); left: var(--sc-gutter); right: var(--sc-gutter); min-width: 0; }
}

/* -------------------------------------------------------- title page -- */
.title { padding-top: var(--folio-h); }
.title-grid {
  min-height: calc(100svh - var(--folio-h));
  display: grid; gap: var(--sc-7);
  padding-block: var(--sc-8) var(--sc-7);
  align-items: end;
}
.kicker { font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); }
.title-h1 { margin-top: var(--sc-5); font-size: var(--sc-t-3xl); line-height: 1; letter-spacing: -0.035em; max-width: 13ch; }
.title-sub { margin-top: var(--sc-6); font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); max-width: 34ch; }
.title-actions { margin-top: var(--sc-7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-6); }

.plate { margin: 0; }
.plate-frame { overflow: hidden; aspect-ratio: 1536 / 919; background: var(--granite); }
.plate-frame img { width: 100%; height: 110%; margin-top: -3%; object-fit: cover; object-position: 50% 50%; }
.plate figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }

@media (min-width: 960px) {
  .title-grid { grid-template-columns: 7fr 6fr; gap: var(--sc-7); padding-bottom: var(--sc-8); align-items: center; }
  .title-h1 { max-width: 15ch; }
}

/* ---------------------------------------------------- 01 the question -- */
.question { padding-block: var(--sc-section); }
.question-grid { display: grid; gap: var(--sc-7); justify-items: center; text-align: center; }
.question-lede { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); font-weight: 500; line-height: 1.14; letter-spacing: var(--sc-track-snug); max-width: 24ch; text-wrap: balance; }
.question-turn { display: grid; justify-items: center; }
.question-you { font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-xl); color: var(--sc-accent); line-height: 1.25; max-width: 30ch; text-wrap: balance; }
.question-turn .sc-body { margin-top: var(--sc-4); max-width: 48ch; }
.question-turn::before { content: ""; width: 48px; height: 1px; background: var(--sc-accent); margin-bottom: var(--sc-6); }

/* ------------------------------------------------ 02 the ledger (peak) -- */
.ledger-stage { display: flex; align-items: center; padding-top: var(--folio-h); }
.ledger-grid { display: grid; gap: var(--sc-7); align-items: center; }
.ledger-h2 { font-size: var(--sc-t-2xl); line-height: 1.02; max-width: 12ch; }
.ledger-status {
  margin-top: var(--sc-5); min-height: 2.6em;
  font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-xl); line-height: 1.2;
  color: var(--sc-ink-soft);
  transition: color var(--sc-d-slow) var(--sc-ease-out);
}
.ledger-act.is-paid .ledger-status { color: var(--sc-accent); }
.ledger { margin: var(--sc-5) 0 0; border-top: 1px solid var(--sc-hairline); max-width: 26rem; }
.ledger div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sc-4); padding: var(--sc-3) 0; border-bottom: 1px solid var(--sc-hairline); }
.ledger dt { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.ledger dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ledger dd span { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 600; letter-spacing: var(--sc-track-snug); }
.ledger dd small { display: block; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.ledger dd span + small:not([id]) { display: inline; }
.ledger-profit dd span { color: var(--sc-ink-soft); transition: color var(--sc-d-slow) var(--sc-ease-out); }
.ledger-act.is-paid .ledger-profit dd span { color: var(--sc-accent); }
.ledger-fine { margin-top: var(--sc-4); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }

/* The wall: 36 niches, 6 x 6, with an overhanging cap and a plinth. */
.wall { width: min(100%, 36rem, calc((100svh - var(--folio-h) - 8rem) * 0.92)); justify-self: center; filter: drop-shadow(0 30px 40px hsl(150 12% 3% / 0.55)); }
.wall-cap {
  height: 16px; margin-inline: -10px;
  background: linear-gradient(#2c312e, #1c201e);
  box-shadow: inset 0 1px 0 hsl(40 20% 80% / 0.14);
  border-radius: 3px 3px 0 0;
}
.wall-body { position: relative; }
.wall-face {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  padding: 14px;
  background:
    radial-gradient(120% 80% at 30% 0%, #232826 0%, transparent 60%),
    #151816;
}
.niche-cell {
  position: relative; aspect-ratio: 1;
  background: #0b0d0c;
  box-shadow: inset 0 2px 6px hsl(0 0% 0% / 0.6), inset 0 -1px 0 hsl(40 20% 80% / 0.05);
}
.niche-cell i {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, #2e3431 0%, #1a1e1c 55%, #111412 100%);
  box-shadow: inset 0 1px 0 hsl(40 20% 90% / 0.14);
  opacity: 0; transform: scale(0.94);
  transition: opacity 360ms var(--sc-ease-out), transform 360ms var(--sc-ease-out);
}
/* two engraved lines: name and dates */
.niche-cell i::before, .niche-cell i::after {
  content: ""; position: absolute; left: 22%; right: 22%; height: 2px; border-radius: 1px;
  background: hsl(40 12% 70% / 0.45);
}
.niche-cell i::before { top: 44%; }
.niche-cell i::after { top: 56%; left: 32%; right: 32%; }
.niche-cell b {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gilt) 65%, transparent);
  opacity: 0; transition: opacity 360ms var(--sc-ease-out);
}
.niche-cell b::before, .niche-cell b::after {
  content: ""; position: absolute; left: 22%; right: 22%; height: 2px; border-radius: 1px; background: var(--gilt);
}
.niche-cell b::before { top: 44%; }
.niche-cell b::after { top: 56%; left: 32%; right: 32%; }
.niche-cell.is-sold i { opacity: 1; transform: none; }
.niche-cell.is-gilt b { opacity: 1; }

.wall-paid {
  position: absolute; left: -10px; right: -10px; top: 50%; height: 0;
  display: flex; justify-content: center; align-items: center; pointer-events: none;
}
.wall-paid::before {
  content: ""; position: absolute; left: 0; right: 0; top: -0.5px; height: 1px;
  background: var(--gilt);
  transform: scaleX(0); transform-origin: left;
  transition: transform 700ms var(--sc-ease-out);
}
.wall-paid span {
  position: relative; padding: 4px 12px; border-radius: var(--sc-r-pill);
  background: var(--gilt); color: var(--gilt-ink);
  font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.04em;
  opacity: 0; transform: scale(0.95);
  transition: opacity 300ms var(--sc-ease-out) 250ms, transform 300ms var(--sc-ease-out) 250ms;
}
.ledger-act.is-paid .wall-paid::before { transform: scaleX(1); }
.ledger-act.is-paid .wall-paid span { opacity: 1; transform: none; }
.wall-plinth { height: 22px; margin-inline: 4%; background: linear-gradient(#8f8a7f, #6e6a61); }

@media (min-width: 960px) {
  .ledger-grid { grid-template-columns: 5fr 7fr; gap: var(--sc-9); }
  .wall { justify-self: end; }
}
@media (max-width: 959px) {
  .ledger-stage { align-items: flex-start; padding-top: calc(var(--folio-h) + var(--sc-5)); }
  .ledger-grid { gap: var(--sc-5); }
  .wall { order: -1; width: min(72vw, 17rem); justify-self: start; }
  .ledger-h2 { font-size: var(--sc-t-xl); max-width: none; }
  .ledger-status { margin-top: var(--sc-2); font-size: var(--sc-t-lg); min-height: 2.5em; }
  .ledger { margin-top: var(--sc-3); }
  .ledger div { padding: var(--sc-2) 0; }
  .ledger dd span { font-size: var(--sc-t-lg); }
  .wall-face { gap: 5px; padding: 10px; }
}

/* ------------------------------------------------------- 03 why -- */
.why { padding-block: var(--sc-section); }
.why-grid { display: grid; gap: var(--sc-8); }
.why-h2 { font-size: var(--sc-t-2xl); line-height: 1.08; max-width: 18ch; }
.why-points p { padding: var(--sc-5) 0; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); max-width: 46ch; }
.why-points p:last-child { border-bottom: 1px solid var(--sc-hairline); }
.why-points strong { display: block; margin-bottom: var(--sc-2); font-family: var(--sc-font-display); font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); color: var(--sc-ink); }
@media (min-width: 960px) {
  .why-grid { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .why-h2 { grid-column: 1 / span 6; position: sticky; top: calc(var(--folio-h) + var(--sc-7)); }
  .why-points { grid-column: 8 / span 5; }
}

/* ------------------------------------------------------- 04 proof -- */
.proof { padding-block: var(--sc-section); }
.proof-head { max-width: 46rem; }
.proof-h2 { font-size: var(--sc-t-3xl); line-height: 1; }
.proof-head .sc-body { margin-top: var(--sc-6); margin-left: auto; max-width: 52ch; }
@media (min-width: 960px) { .proof-head .sc-body { margin-left: 22%; } }

.proof-photo { margin: var(--sc-8) calc(var(--sc-gutter) * -1) 0; }
.proof-photo img { width: 100%; height: auto; aspect-ratio: 1536 / 919; object-fit: cover; }
@media (min-width: 960px) { .proof-photo { margin-inline: 0 calc(var(--sc-gutter) * -1); } }

.proof-line { list-style: none; margin: var(--sc-8) 0 0; padding: 0; display: grid; gap: var(--sc-5); position: relative; }
.proof-line li { position: relative; padding-left: var(--sc-5); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; }
.proof-line li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 7px; height: 7px; border-radius: 50%; background: var(--sc-accent); }
.proof-line span { display: block; margin-bottom: var(--sc-1); font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: var(--sc-track-snug); color: var(--sc-ink); }
@media (min-width: 960px) {
  .proof-line { grid-template-columns: repeat(5, 1fr); gap: var(--sc-5); padding-top: var(--sc-6); }
  .proof-line::before {
    content: ""; position: absolute; top: 3px; left: 0; right: 0; height: 1px; background: var(--sc-accent);
    transform: scaleX(0); transform-origin: left; transition: transform 1200ms var(--sc-ease-out) 200ms;
  }
  .proof-line.sc-in::before { transform: scaleX(1); }
  .proof-line li { padding-left: 0; padding-right: var(--sc-4); }
  .proof-line li::before { top: calc(var(--sc-6) * -1); }
}

.proof-spec { margin-top: var(--sc-8); }
.spec { margin: 0; display: grid; border-top: 1px solid var(--sc-hairline); border-bottom: 1px solid var(--sc-hairline); }
.spec div { padding: var(--sc-5) 0; display: grid; gap: var(--sc-1); align-content: start; }
.spec div + div { border-top: 1px solid var(--sc-hairline); }
@media (min-width: 760px) {
  .spec { grid-template-columns: repeat(3, 1fr); }
  .spec div + div { border-top: 0; border-left: 1px solid var(--sc-hairline); padding-left: var(--sc-6); }
  .spec div { padding-right: var(--sc-6); }
}
.spec dt { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: 0.02em; }
.spec dd { margin: 0; line-height: 1.25; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); }

.team { margin-top: var(--sc-9); display: grid; gap: var(--sc-7); align-items: end; }
.team-photo { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; max-width: 26rem; }
.team-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
  transition: transform 900ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .team-photo:hover img { transform: scale(1.02); }
}
.team-h3 { font-size: var(--sc-t-xl); max-width: 20ch; margin-bottom: var(--sc-5); }
.team-row { padding: var(--sc-4) 0; border-top: 1px solid var(--sc-hairline); display: grid; gap: var(--sc-1); }
.team-row strong { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); }
.team-row span { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
@media (min-width: 960px) { .team { grid-template-columns: 5fr 7fr; gap: var(--sc-9); } }

/* ------------------------------------------------------- 05 niches -- */
.niches { padding-block: var(--sc-section); }
.niches-h2 { font-size: var(--sc-t-2xl); max-width: 16ch; }
.niche-pair { margin-top: var(--sc-7); display: grid; gap: var(--sc-6); }
.niche { margin: 0; }
.niche img { width: 100%; max-width: 20rem; height: auto; box-shadow: var(--sc-e2); }
.niche figcaption { margin-top: var(--sc-4); display: grid; gap: var(--sc-1); max-width: 34ch; }
.niche figcaption strong { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); }
.niche figcaption span { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.niches-note { margin-top: var(--sc-8); font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-xl); line-height: 1.3; max-width: 30ch; }
@media (min-width: 760px) {
  .niche-pair { grid-template-columns: repeat(2, minmax(0, 20rem)); gap: var(--sc-7); }
  .niches-note { grid-column: 1 / -1; margin-top: 0; }
}
@media (min-width: 1100px) {
  .niche-pair { grid-template-columns: repeat(2, minmax(0, 20rem)) 1fr; }
  .niches-note { grid-column: auto; align-self: center; padding-left: var(--sc-6); max-width: 22ch; }
}

/* ------------------------------------------------------- 06 two ways -- */
.ways { padding-block: var(--sc-section); }
.ways-grid { display: grid; gap: var(--sc-8); }
.way { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-5); }
.way-h2 { font-size: var(--sc-t-3xl); line-height: 1; max-width: 12ch; }
.way-h3 { font-size: var(--sc-t-xl); max-width: 16ch; }
.way--main .pill { margin-top: var(--sc-3); }
@media (min-width: 960px) {
  .ways-grid { grid-template-columns: 7fr 5fr; gap: 0; align-items: end; }
  .way--main { padding-right: var(--sc-9); }
  .way--alt { padding-left: var(--sc-8); border-left: 1px solid var(--sc-hairline); }
}

.steps { margin-top: var(--sc-10); }
.steps-h { font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-lg); color: var(--sc-accent); }
.steps-list { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--sc-hairline); }
.steps-list li { padding: var(--sc-5) var(--sc-4) var(--sc-5) 0; border-bottom: 1px solid var(--sc-hairline); display: grid; gap: var(--sc-2); align-content: start; }
.steps-list strong { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); }
.steps-list span { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; }
@media (min-width: 960px) {
  .steps-list { grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--sc-hairline); }
  .steps-list li { border-bottom: 0; padding-right: var(--sc-5); }
  .steps-list li + li { padding-left: var(--sc-5); border-left: 1px solid var(--sc-hairline); }
}

/* ------------------------------------------------------- 07 faqs -- */
.faqs { padding-block: var(--sc-section); }
.faq-grid { display: grid; gap: var(--sc-7); }
.faq-h2 { font-size: var(--sc-t-2xl); max-width: 12ch; }
.faq-list { border-top: 1px solid var(--sc-hairline); }
.faq-item { border-bottom: 1px solid var(--sc-hairline); }
.faq-item h3 { font-family: var(--sc-font-text); letter-spacing: var(--sc-track-normal); font-weight: 500; }
.faq-q {
  width: 100%; min-height: 64px; padding: var(--sc-4) 0; border: 0; background: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--sc-5);
  font-size: var(--sc-t-base); font-weight: 500; text-align: left; color: inherit;
}
.faq-q::after {
  content: "+"; flex-shrink: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1; color: var(--sc-accent);
  transition: transform var(--sc-d-base) var(--sc-ease-out);
}
.faq-q[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq-a p { padding-bottom: var(--sc-5); max-width: 60ch; color: var(--sc-ink-soft); }
@media (min-width: 960px) { .faq-grid { grid-template-columns: 5fr 7fr; gap: var(--sc-9); } }

/* ------------------------------------------------------- close -- */
.close { padding-block: var(--sc-section) var(--sc-7); }
.close-h2 { font-size: var(--sc-t-3xl); line-height: 1; max-width: 14ch; }
.enquire { display: grid; gap: var(--sc-8); }
.enquire-intro .close-h2 { font-size: var(--sc-t-2xl); max-width: 12ch; }
.enquire-intro .sc-body { margin-top: var(--sc-5); max-width: 40ch; }
.enquire-direct { margin: var(--sc-7) 0 0; border-top: 1px solid var(--sc-hairline); max-width: 24rem; }
.enquire-direct div { display: flex; justify-content: space-between; gap: var(--sc-4); padding: var(--sc-4) 0; border-bottom: 1px solid var(--sc-hairline); }
.enquire-direct dt { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.enquire-direct dd { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); }
.enquire-direct a { text-decoration: none; }
.enquire-direct a:hover { color: var(--sc-accent); }
@media (min-width: 960px) { .enquire { grid-template-columns: 5fr 7fr; gap: var(--sc-9); align-items: start; } }

.enquire-form {
  background: var(--granite-2); padding: var(--sc-6) var(--sc-5);
  border-radius: var(--sc-r-md); box-shadow: var(--sc-e2), var(--sc-edge);
}
@media (min-width: 640px) { .enquire-form { padding: var(--sc-7); } }

.chips { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: var(--sc-2); }
.chips legend { width: 100%; margin-bottom: var(--sc-3); padding: 0; font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sc-4);
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-pill);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.chips input:checked + span { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600; }
.chips input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .chips label:hover span { border-color: var(--sc-accent); color: var(--sc-ink); } .chips label:hover input:checked + span { color: var(--sc-accent-ink); } }

.fields { margin-top: var(--sc-6); display: grid; gap: 0 var(--sc-6); }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr; } }
.field { position: relative; margin-bottom: var(--sc-5); border-bottom: 1px solid var(--sc-hairline-strong); transition: border-color var(--sc-d-fast) var(--sc-ease-out); }
.field--full { grid-column: 1 / -1; }
.field:focus-within { border-bottom-color: var(--sc-accent); }
.field input, .field textarea {
  width: 100%; border: 0; outline: none; background: transparent; color: var(--sc-ink);
  padding: 22px 0 8px; font-size: var(--sc-t-base);
}
.field textarea { resize: vertical; min-height: 5.5rem; }
.field label {
  position: absolute; left: 0; top: 20px; pointer-events: none;
  font-size: var(--sc-t-base); color: var(--sc-ink-soft);
  transform-origin: left top;
  transition: transform var(--sc-d-base) var(--sc-ease-out), color var(--sc-d-base) var(--sc-ease-out);
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
  transform: translateY(-16px) scale(0.78); color: var(--sc-accent);
}
.field:has([aria-invalid="true"]) { border-bottom-color: #d98060; }
.hp { position: absolute; left: -9999px; }
.enquire-submit { margin-top: var(--sc-3); }
@media (max-width: 639px) { .enquire-submit { width: 100%; } }
.form-status { margin-top: var(--sc-4); min-height: 1.5em; font-size: var(--sc-t-sm); }
.form-status.is-ok { color: var(--sc-accent); }
.form-status.is-err { color: #e0a080; }

.colophon { margin-top: var(--sc-10); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); display: grid; gap: var(--sc-2); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.colophon strong { color: var(--sc-ink); }
.colophon a { text-underline-offset: 0.25em; }
@media (min-width: 960px) { .colophon { grid-template-columns: 1fr auto; } }

/* ---------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .niche-cell i, .niche-cell b, .wall-paid::before, .wall-paid span, .team-photo img, .proof-line::before { transition: none; }
}
.faq-a a { color: var(--sc-ink); text-decoration-color: var(--sc-accent); text-underline-offset: 0.25em; }
.enquire-submit:disabled { opacity: 0.6; cursor: progress; transform: none; }
.form-status:focus { outline: none; }