/* ==========================================================================
   Eastern Memorials: Lithos
   One hand-written stylesheet. No framework, no build step.

   Palette contract
   ----------------
   --stone   #E8E4DD  page surface        L 0.7787
   --panel   #F3F1EC  raised surfaces     L 0.8801
   --slate   #2B2A28  text, dark slabs    L 0.0232
   --granite #6B6862  rules, large text   L 0.1392
   --moss    #4A5A47  the single accent   L 0.0922

   Derived tones (no new hues, added only to meet WCAG AA against the
   surface each one actually sits on):
   --granite-ink   #605D57  small secondary text  5.18:1 on stone, 5.81:1 on panel
                            (raw --granite is 4.38:1 on stone and fails AA)
   --moss-light    #8FA88A  links + focus on dark slabs  5.56:1 on slate
                            (raw --moss on slate is 1.94:1 and fails)
   --stone-dim     #B8B3AA  secondary text on dark slabs 6.87:1 on slate
   --granite-lift  #8A867E  input borders on dark slabs  3.48:1 on field fill
   --slab          #C9C3B8  the light granite slab       slate on it is 8.18:1
                            Measured on the rendered texture rather than the flat
                            fill: mean 7.24:1, darkest crystal 5.59:1, both clear AA.
   ========================================================================== */

:root {
  /* Brief palette */
  --stone:   #E8E4DD;
  --panel:   #F3F1EC;
  --slate:   #2B2A28;
  --granite: #6B6862;
  --moss:    #4A5A47;

  /* Derived for contrast, same hues */
  --granite-ink:  #605D57;
  --moss-deep:    #3E4C3B;
  --moss-light:   #8FA88A;
  --stone-dim:    #B8B3AA;
  --granite-lift: #8A867E;

  /* Stone surfaces */
  --slab:       #C9C3B8;
  --field-dark: #35332F;

  /* Scored lines */
  --rule:      rgba(107, 104, 98, 0.55);
  --rule-soft: rgba(107, 104, 98, 0.26);
  --rule-dark: rgba(232, 228, 221, 0.22);

  /* Engraved letterpress, drawn from palette values only */
  --engrave-hi: #FAF8F4;
  --engrave-lo: rgba(43, 42, 40, 0.20);

  /* Focus, re-pointed per surface */
  --focus: var(--moss);

  /* Type */
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --read:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --ui:      "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Measure and rhythm */
  --shell:  1140px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --band:   clamp(4rem, 9vw, 7.5rem);
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--stone);
  color: var(--slate);
  font-family: var(--read);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--slate);
  margin: 0;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }

a { color: var(--moss); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--moss-deep); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}
/* Only suppress the ring for pointer users on browsers that support :focus-visible */
:focus:not(:focus-visible) { outline: none; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100%;
  z-index: 50;
  background: var(--slate);
  color: var(--stone);
  font-family: var(--ui);
  font-size: 0.875rem;
  padding: 0.7rem 1.1rem;
  border-radius: 2px;
}
.skip-link:focus { top: 0.75rem; }

/* Off-screen host for the SVG grain filters. Not display:none, so that
   filter references stay resolvable in every engine. */
.svg-defs {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Inscription type
   The single move that carries the identity: display type set large, tracked
   wide, with open leading, so it reads as lettering cut into a face rather
   than a marketing headline. Never all-caps above small-label sizes.
   -------------------------------------------------------------------------- */

.inscribe {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.07em;
  line-height: 1.28;
  text-shadow: 0 1px 0 var(--engrave-hi), 0 -1px 0 var(--engrave-lo);
}

.eyebrow {
  font-family: var(--ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--granite-ink);
  margin: 0 0 1.1rem;
  display: block;
}

.section-title {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  max-width: 26ch;
}

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.7;
  color: var(--slate);
  max-width: 58ch;
}

.note {
  font-family: var(--ui);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--granite-ink);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Masthead
   A quiet masthead, not a marketing header. Phone and the consultation
   action stay reachable at every scroll position.
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--stone);
  border-bottom: 1px solid var(--rule);
}

.masthead-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(0.9rem, 2vw, 1.4rem);
}

.mark {
  text-decoration: none;
  color: inherit;
  margin-right: auto;
  display: block;
}

.mark-name {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  letter-spacing: 0.15em;
  line-height: 1.2;
  color: var(--slate);
  text-shadow: 0 1px 0 var(--engrave-hi), 0 -1px 0 var(--engrave-lo);
}

.mark-line {
  display: block;
  font-family: var(--ui);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--granite-ink);
  margin-top: 0.3rem;
}

.mark:hover .mark-name { color: var(--moss-deep); }

.masthead-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.masthead-nav a {
  font-family: var(--ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--granite-ink);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
}
.masthead-nav a:hover { color: var(--slate); border-bottom-color: var(--granite); }
.masthead-nav a[aria-current="page"] { color: var(--slate); border-bottom-color: var(--slate); }

.masthead-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem clamp(0.9rem, 2vw, 1.5rem);
}

.tel {
  font-family: var(--ui);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.tel:hover { color: var(--moss-deep); border-bottom-color: var(--moss); }

/* --------------------------------------------------------------------------
   Buttons
   Square edges, 2px at most. No lift, no shadow, no bounce.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--ui);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
  padding: 0.85rem 1.4rem;
  border-radius: 2px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms linear, color 160ms linear, border-color 160ms linear;
}

.btn-primary {
  background: var(--moss);
  color: var(--stone);       /* 5.83:1 */
  border-color: var(--moss);
}
.btn-primary:hover { background: var(--moss-deep); border-color: var(--moss-deep); color: var(--stone); }

.btn-quiet {
  background: transparent;
  color: var(--slate);
  border-color: var(--granite);
}
.btn-quiet:hover { background: var(--panel); color: var(--slate); border-color: var(--slate); }

.btn-link {
  font-family: var(--ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--moss);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  padding: 0.25rem 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: color 160ms linear, border-color 160ms linear;
}
.btn-link:hover { color: var(--moss-deep); border-bottom-color: var(--moss); }

/* --------------------------------------------------------------------------
   Bands and rules
   Section transitions are whitespace plus one hairline. Never a color block.
   -------------------------------------------------------------------------- */

.band { padding-block: var(--band); }
.band + .band { border-top: 1px solid var(--rule); }
.band-tight { padding-block: clamp(3rem, 6vw, 5rem); }

.band-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* --------------------------------------------------------------------------
   Granite surfaces
   Grain is rendered, not photographed: two SVG turbulence layers, one fine
   soft-light pass for the speckle and one coarse multiply pass for mottling.
   -------------------------------------------------------------------------- */

.grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.grain-crystal { mix-blend-mode: overlay;  opacity: 0.72; }
.grain-mottle  { mix-blend-mode: multiply; opacity: 0.32; }

/* --------------------------------------------------------------------------
   Hero slab
   A single held image of a stone face. No slideshow, no carousel, no autoplay.
   The one moment of motion on the site is a slow opacity settle, no movement.
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }

@keyframes settle { from { opacity: 0; } to { opacity: 1; } }

.slab-title {
  font-size: clamp(2.15rem, 6.2vw, 4.25rem);
  letter-spacing: 0.055em;
  line-height: 1.16;
  color: var(--slate);            /* 8.18:1 flat, 5.59:1 at the darkest crystal */
  /* Sandblasted letter bed: shadow above the glyph, light catch below. */
  text-shadow: 0 1px 0 rgba(250, 248, 244, 0.75), 0 -1px 0 rgba(43, 42, 40, 0.30);
}

.slab-kicker {
  font-family: var(--ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--slate);
  display: block;
  margin-bottom: clamp(1.1rem, 2.5vw, 1.6rem);
}

.hero-below {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3rem) 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Cards
   Square edges. A scored line across the top, no shadow, no lift on hover.
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 2.2vw, 1.75rem);
}

.card-grid-wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}

.card {
  --card-pad: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
  background: var(--panel);
  border: 1px solid var(--rule-soft);
  border-top: 1px solid var(--granite);
  border-radius: 2px;
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  transition: border-color 160ms linear, background-color 160ms linear;
}
.card:hover { border-color: var(--rule); border-top-color: var(--slate); }

.card-title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: 0.045em;
  line-height: 1.3;
  text-shadow: 0 1px 0 var(--engrave-hi), 0 -1px 0 var(--engrave-lo);
}

.card p { font-size: 1rem; line-height: 1.7; }

.card-foot { margin-top: auto; padding-top: 0.4rem; }

/* Specification rows inside a memorial-type card */
.spec { margin: 0; }
.spec div + div { margin-top: 0.85rem; }

.spec dt {
  font-family: var(--ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--granite-ink);      /* 5.81:1 on --panel */
  margin-bottom: 0.25rem;
}

.spec dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--slate);
}

/* --------------------------------------------------------------------------
   Process steps
   Numbered because this genuinely is a sequence, and a family needs to know
   the order. The "You decide / We handle" marker is the load-bearing part:
   it says at a glance which parts they never have to touch.
   -------------------------------------------------------------------------- */

.steps { list-style: none; }

.step {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: clamp(1.25rem, 3.5vw, 3rem);
}

.step-mark { padding-top: 0.15rem; }

.step-num {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--granite);          /* large text, 4.38:1 clears the 3:1 floor */
  font-variant-numeric: lining-nums;
}

.step-who {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: var(--ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--granite-ink);
  border-top: 1px solid var(--rule);
  padding-top: 0.45rem;
}
.step-who[data-who="us"] { color: var(--moss); border-top-color: var(--moss); }

.step-body {
  border-left: 1px solid var(--rule-soft);
  padding-left: clamp(1.25rem, 3.5vw, 3rem);
  padding-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
}

.step:last-child .step-body { padding-bottom: 0; }

.step-title {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  letter-spacing: 0.045em;
  margin-bottom: 0.5rem;
}

.step-body p { max-width: 56ch; font-size: 1rem; }

/* --------------------------------------------------------------------------
   Stone samples
   Value and grain vary; hue does not. These are grain renderings, and the
   copy underneath says so plainly rather than passing them off as samples.
   -------------------------------------------------------------------------- */

.stones {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.stone { min-width: 0; }

.swatch {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--rule-soft);
  background: var(--swatch-base, var(--granite));
}

.swatch::after {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border: 1px solid rgba(43, 42, 40, 0.18);
  z-index: 2;
  pointer-events: none;
}

.swatch-barre    { --swatch-base: #B9B5AD; }
.swatch-georgia  { --swatch-base: #ACA69C; }
.swatch-jet      { --swatch-base: #35332F; background-image: linear-gradient(180deg, #3B3934 0%, #2E2C29 100%); }
.swatch-mahogany { --swatch-base: #8E837A; }
.swatch-bahama   { --swatch-base: #9DA0A0; }

.stone-name {
  font-family: var(--display);
  font-size: 1.1875rem;
  letter-spacing: 0.06em;
  line-height: 1.35;
  margin: 0.9rem 0 0.3rem;
}

.stone-note {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--granite-ink);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Details disclosures
   -------------------------------------------------------------------------- */

.disclosures { display: grid; gap: 0; }

.disclosure {
  border-top: 1px solid var(--rule);
}
.disclosure:last-of-type { border-bottom: 1px solid var(--rule); }

.disclosure > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: clamp(1rem, 2.2vw, 1.35rem);
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  letter-spacing: 0.05em;
  color: var(--slate);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary:hover { color: var(--moss-deep); }

.disclosure > summary::after {
  content: "Open";
  font-family: var(--ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--granite-ink);
  flex: none;
}
.disclosure[open] > summary::after { content: "Close"; }

.disclosure-body {
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  max-width: 62ch;
}

.plain-list { list-style: none; display: grid; gap: 0.75rem; }
.plain-list li { padding-left: 1.1rem; position: relative; font-size: 1rem; line-height: 1.7; }
.plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.5rem;
  height: 1px;
  background: var(--granite);
}
.plain-list strong { font-weight: 600; }

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */

.timeline { list-style: none; display: grid; gap: 0; }

.timeline li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  padding-block: clamp(0.9rem, 2vw, 1.2rem);
  border-top: 1px solid var(--rule-soft);
}
.timeline li:first-child { border-top: 1px solid var(--rule); }
.timeline li:last-child { border-bottom: 1px solid var(--rule); }

.timeline-stage {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  letter-spacing: 0.05em;
  color: var(--slate);
}

.timeline-span {
  font-family: var(--ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--granite-ink);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Location facts
   -------------------------------------------------------------------------- */

.facts { list-style: none; display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }

.facts dt {
  font-family: var(--ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--granite-ink);
  margin-bottom: 0.35rem;
}
.facts dd { margin: 0; font-size: 1rem; line-height: 1.7; max-width: 40ch; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* --------------------------------------------------------------------------
   Consultation slab
   Polished black granite, set into the page as an object rather than run
   edge to edge as a color band. The counterweight to the light hero slab.
   -------------------------------------------------------------------------- */

.consult { padding-block: var(--band); border-top: 1px solid var(--rule); }

.dark-slab {
  --focus: var(--moss-light);
  position: relative;
  isolation: isolate;
  background: var(--slate);
  color: var(--stone);
  border-radius: 2px;
  overflow: hidden;
  padding: clamp(2rem, 5.5vw, 4.5rem);
}

.dark-slab::after {
  content: "";
  position: absolute;
  inset: clamp(0.75rem, 2vw, 1.25rem);
  border: 1px solid var(--rule-dark);
  border-radius: 1px;
  pointer-events: none;
  z-index: 2;
}

.dark-slab-inner { position: relative; z-index: 3; }

.dark-slab h2 {
  color: var(--stone);
  text-shadow: none;
}
.dark-slab .eyebrow { color: var(--stone-dim); }
.dark-slab p { color: var(--stone-dim); }         /* 6.87:1 on --slate */
.dark-slab a { color: var(--moss-light); }        /* 5.56:1 on --slate */
.dark-slab a:hover { color: var(--stone); }

.consult-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.form { display: grid; gap: clamp(1.1rem, 2.2vw, 1.4rem); }

.field { display: grid; gap: 0.4rem; min-width: 0; }

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.4rem);
}

.field label {
  font-family: var(--ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone-dim);
}

.field .optional {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--stone-dim);
}

.field input,
.field textarea {
  font-family: var(--ui);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--stone);
  background: var(--field-dark);
  border: 1px solid var(--granite-lift);   /* 3.48:1 on the field fill */
  border-radius: 2px;
  padding: 0.75rem 0.85rem;
  width: 100%;
  transition: border-color 160ms linear, background-color 160ms linear;
}

.field textarea { resize: vertical; min-height: 7.5rem; }

.field input::placeholder,
.field textarea::placeholder { color: var(--granite-lift); opacity: 1; }

.field input:hover,
.field textarea:hover { border-color: var(--stone-dim); }

.field input:focus,
.field textarea:focus { border-color: var(--moss-light); }

.field-error input,
.field-error textarea { border-color: var(--stone); border-width: 2px; padding: calc(0.75rem - 1px) calc(0.85rem - 1px); }

.field-note {
  font-family: var(--ui);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--stone-dim);
  min-height: 0;
}

.field-note:empty { display: none; }

.error-text {
  font-family: var(--ui);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--stone);
  display: flex;
  gap: 0.5rem;
}
.error-text::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 1px;
  background: var(--stone);
  margin-top: 0.7em;
}
.error-text:empty { display: none; }

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
  padding-top: 0.35rem;
}

/* On black granite the primary action inverts: the highest-contrast plate
   on its surface, the way a cut plate sits in a polished face. */
.dark-slab .btn-primary {
  background: var(--stone);
  color: var(--slate);          /* 11.32:1 */
  border-color: var(--stone);
}
.dark-slab .btn-primary:hover { background: var(--moss-light); color: var(--slate); border-color: var(--moss-light); }

.form-foot .note { color: var(--stone-dim); font-size: 0.8125rem; max-width: 34ch; }

/* Summary of what failed, announced once on submit */
.form-summary {
  border: 1px solid var(--stone);
  border-radius: 2px;
  padding: 0.9rem 1.1rem;
  font-family: var(--ui);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--stone);
}
.form-summary[hidden] { display: none; }

/* Confirmation state */
.confirm[hidden] { display: none; }

.confirm {
  border-top: 1px solid var(--moss-light);
  padding-top: clamp(1.5rem, 3vw, 2rem);
}

.confirm h3 {
  color: var(--stone);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 0.06em;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.confirm:focus { outline: none; }
.confirm:focus-visible { outline: 2px solid var(--moss-light); outline-offset: 6px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  align-items: baseline;
}

.footer p,
.footer a {
  font-family: var(--ui);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--granite-ink);
  margin: 0;
}
.footer a:hover { color: var(--slate); }

.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; }

/* --------------------------------------------------------------------------
   Page header for the service page
   -------------------------------------------------------------------------- */

.page-head { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); }

.page-title {
  font-size: clamp(2.15rem, 5.4vw, 3.6rem);
  letter-spacing: 0.06em;
  line-height: 1.18;
  max-width: 16ch;
  text-shadow: 0 1px 0 var(--engrave-hi), 0 -1px 0 var(--engrave-lo);
}

/* --------------------------------------------------------------------------
   Reflow
   -------------------------------------------------------------------------- */

@media (max-width: 62rem) {
  .split,
  .consult-layout,
  .hero-below { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  .masthead-inner { align-items: flex-start; }
  .mark { flex: 1 1 100%; margin-right: 0; }
  .masthead-nav { order: 2; }
  .masthead-actions { order: 3; width: 100%; }

  .step { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .step-mark { display: flex; align-items: baseline; gap: 1rem; padding-top: 0; }
  .step-who { margin-top: 0; }
  .step-body {
    border-left: 0;
    border-top: 1px solid var(--rule-soft);
    padding-left: 0;
    padding-top: 1rem;
    padding-bottom: clamp(2rem, 6vw, 2.75rem);
  }

  .timeline li { grid-template-columns: minmax(0, 1fr); }

  .footer-inner { flex-direction: column; }
}

@media (max-width: 24rem) {
  .masthead-actions { gap: 0.5rem 0.75rem; }
  .btn { padding: 0.75rem 1.05rem; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   Nothing moves that the reader did not ask to move.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-figure { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Corrections and surface overrides
   -------------------------------------------------------------------------- */

/* .form sets display:grid, which outranks the user agent's [hidden] rule.
   Without this the mocked confirmation would render underneath a live form. */
.form[hidden] { display: none; }

/* The sticky masthead would otherwise sit on top of any anchor target. */
:target,
#main,
#consultation { scroll-margin-top: clamp(5.5rem, 15vh, 9.5rem); }

/* On the black slab every accent has to come from the moss tint. Raw --moss
   on --slate is 1.94:1 and fails; --moss-light is 5.56:1. */
.dark-slab .btn-link {
  color: var(--moss-light);
  border-bottom-color: var(--rule-dark);
}
.dark-slab .btn-link:hover {
  color: var(--stone);
  border-bottom-color: var(--stone);
}

/* Light-on-dark reverses the direction a chisel reads, so the engrave is
   dropped entirely on the black slab rather than inverted. */
.dark-slab h2,
.dark-slab h3,
.dark-slab .inscribe {
  color: var(--stone);
  text-shadow: none;
}

.form-summary a {
  color: var(--moss-light);
  text-underline-offset: 0.2em;
}
.form-summary a:hover { color: var(--stone); }

/* Long placeholder tokens and email addresses must not force a sideways
   scroll on a 360px screen. */
.facts dd,
.footer p,
.form-summary { overflow-wrap: break-word; }

/* The crystal layer carries further on near-black stone, where overlay has
   more room to move than it does on a light face. */
.dark-slab .grain-crystal { opacity: 0.85; }

/* --------------------------------------------------------------------------
   Known-count grids
   Both of these sets have a fixed number of items, so the columns are declared
   rather than left to auto-fit, which was orphaning the last card and the
   fifth stone on their own row at desktop width.
   -------------------------------------------------------------------------- */

/* Four services, held at two across. Four columns fit, but they squeezed the
   measure to roughly 22 characters, which is unreadable, and four thin feature
   columns is exactly the template look this page is avoiding. */
.card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 34rem) { .card-grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* Five stones: 1 / 2 / 3 / 5 */
@media (max-width: 26rem) { .stones { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 46rem) { .stones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .stones { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* The materials strip on the service page sits in half a split, so it holds
   at three across and never goes to five. */
.stones-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 46rem) { .stones-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .stones-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================================
   Photography
   Optional. Every slot has rendered granite behind it, so a page with no
   images.js, no network, or a failed request degrades to the stone it
   started as rather than to an empty box.

   Editorial rule: photographs for places and objects, renderings for
   material samples. The five named granites stay rendered, because a stock
   photograph captioned "Barre Gray" would be a claim we cannot support.
   ========================================================================== */

.photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--slab);
  border-radius: 2px;
  /* The inline size must be pinned. With aspect-ratio and an auto width, a
     min-height taller than the ratio allows makes the browser widen the box
     to keep the ratio, which pushed .photo-hero to 395px inside a 320px
     column and put a horizontal scrollbar on every phone. With the width
     definite, min-height stretches the height alone. */
  width: 100%;
  max-width: 100%;
}

.photo > .grain { z-index: 0; }

.photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 600ms linear;
}

.photo > img.is-loaded { opacity: 1; }

/* Unrelated stock photographs arrive in unrelated colour. Desaturating and
   tinting toward the warm neutrals makes a set of them read as one system
   and keeps the page inside its palette. */
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--granite);
  mix-blend-mode: color;
  opacity: 0.55;
}

.photo > img { filter: saturate(0.72) contrast(1.04); }

.photo-hero {
  aspect-ratio: 16 / 9;
  min-height: clamp(17rem, 40vh, 26rem);
}

.photo-band {
  aspect-ratio: 21 / 9;
  min-height: 13rem;
}

.photo-card {
  aspect-ratio: 3 / 2;
  border-radius: 0;
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0.35rem;
}

/* --------------------------------------------------------------------------
   Lettering panel
   A polished panel set into a rougher face, the way a monument carries its
   inscription. It is a solid fill rather than a scrim over the photograph,
   which keeps the engraved text-shadow working (it reads as cut only on a
   light surface) and holds the headline at 11.32:1 whatever photograph
   sits behind it.
   -------------------------------------------------------------------------- */

.hero-figure {
  position: relative;
  margin: 0;
  animation: settle 900ms ease-out both;
}

.lettering-panel {
  position: absolute;
  z-index: 4;
  left: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  max-width: min(calc(100% - 2 * clamp(1rem, 3vw, 2.5rem)), 41rem);
  background: var(--stone);
  /* A defined edge, because against a pale photograph the panel would
     otherwise dissolve into it. Outer edge plus incised margin line is how
     a real lettering panel sits in a face anyway. */
  border: 1px solid var(--granite);
  border-radius: 2px;
  padding: clamp(1.6rem, 3.6vw, 2.9rem);
}

/* The scored margin line, incised in from the edge of the panel. */
.lettering-panel::after {
  content: "";
  position: absolute;
  inset: clamp(0.5rem, 1.2vw, 0.85rem);
  border: 1px solid rgba(43, 42, 40, 0.24);
  border-radius: 1px;
  pointer-events: none;
}

.lettering-panel > * { position: relative; z-index: 1; }

/* Below the two-column threshold the panel stops overlaying and sits under
   the photograph, holding a small overlap so it still reads as set into it. */
@media (max-width: 48rem) {
  .lettering-panel {
    position: static;
    max-width: none;
    margin: -2.5rem clamp(0.75rem, 3vw, 1.5rem) 0;
  }
  .photo-hero { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   Credits
   Unsplash requires the photographer and Unsplash to be credited wherever
   their photographs appear.
   -------------------------------------------------------------------------- */

.photo-credit {
  font-family: var(--ui);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--granite-ink);
  margin: 0.75rem 0 0;
}
.photo-credit:empty { display: none; }
.photo-credit a { color: var(--granite-ink); text-decoration-color: var(--rule); }
.photo-credit a:hover { color: var(--slate); }

.credits {
  border-top: 1px solid var(--rule-soft);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
}
.credits:empty { display: none; }

.credits p {
  font-family: var(--ui);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--granite-ink);
  margin: 0;
  max-width: 70ch;
}
.credits a { color: var(--granite-ink); }
.credits a:hover { color: var(--slate); }

/* A visible standing note that the photography is placeholder stock. */
.demo-note {
  font-family: var(--ui);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--granite-ink);
  border-left: 1px solid var(--granite);
  padding-left: 0.9rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  max-width: 68ch;
}

@media (prefers-reduced-motion: reduce) {
  .hero-figure { animation: none; }
  .photo > img { transition: none; }
}