/* ============================================================================
   THE BUST HUB — stylesheet
   Warm ivory plaster, charcoal text, restrained bronze. One dark gallery room.
   All texture is drawn in code (see assets/img/plaster.svg, paper.svg) —
   nothing is hotlinked and nothing needs licensing. See ASSET-CREDITS.md.

   Order: tokens → base → layout → header → hero → featured → steps →
          configurator → gallery → help → faq → final cta → modal → form →
          footer → text pages → sticky cta → motion
   Business text lives in assets/js/config.js.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --ivory:      #f6f1e7;   /* page */
  --paper:      #fffcf6;   /* cards and panels */
  --plaster:    #ede5d6;   /* warm alternating band */
  --stone:      #ded3c0;   /* pedestals, hairline blocks */

  --charcoal:   #23211e;   /* all primary text; primary button */
  --charcoal-deep: #1a1815;/* the dark gallery room */
  --body-2:     #564f45;   /* secondary text — AA on ivory, plaster and paper */

  --bronze:      #8a6a3b;  /* rules, ornament, focus — non-text uses */
  --bronze-ink:  #7d5f2e;  /* bronze at small text sizes on light */
  --bronze-lite: #cda86a;  /* bronze at small text sizes on charcoal */

  --line:      rgba(35, 33, 30, 0.13);
  --line-firm: rgba(35, 33, 30, 0.28);
  --line-dark: rgba(246, 241, 231, 0.16);

  --finish-marble: #e9e4da;
  --finish-wood:   #8a5730;
  --finish-black:  #262420;

  /* The graffiti layer from the previous revision is kept but switched off.
     Set --paint-veil above 0 to bring it back. */
  --paint-veil: 0;

  --display: "Cormorant Garamond", "Bodoni Moda", Georgia, serif;
  --body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.87rem);
  --step-0:  clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1:  clamp(1.18rem, 1.1rem + 0.4vw, 1.42rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.15vw, 2.35rem);
  --step-3:  clamp(2.2rem, 1.65rem + 2.5vw, 3.6rem);
  --step-4:  clamp(3rem, 2rem + 4.4vw, 5.8rem);

  --gutter: clamp(1.15rem, 4vw, 3.25rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --radius: 3px;
  --arch: 50% 50% var(--radius) var(--radius) / 30% 30% 0 0;
  --shell: 1180px;

  --shadow-soft: 0 2px 5px rgba(35, 33, 30, 0.04), 0 18px 40px -26px rgba(35, 33, 30, 0.4);
  --shadow-lift: 0 6px 14px rgba(35, 33, 30, 0.07), 0 40px 70px -38px rgba(35, 33, 30, 0.55);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background-color: var(--ivory);
  background-image: url("../img/plaster.svg");
  background-size: 420px 420px;
  color: var(--charcoal);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0;
}
h3 { font-weight: 600; line-height: 1.25; }

p { margin: 0 0 1em; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--bronze-ink); outline-offset: 3px; border-radius: 2px; }
.band--dark :focus-visible, .site-footer :focus-visible { outline-color: var(--bronze-lite); }
::selection { background: var(--bronze); color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px;
  background: var(--charcoal); color: var(--ivory);
  padding: 0.75rem 1.15rem; z-index: 300; font-weight: 500;
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 0.6rem; }

/* ---------- 3. Layout ---------- */
.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.shell--narrow { width: min(100% - (var(--gutter) * 2), 860px); margin-inline: auto; }

.band { padding-block: var(--section-y); position: relative; }
.band--plaster { background: var(--plaster); }
.band--paper { background: var(--paper); }

/* The dark room. One per page, for the gallery. */
.band--dark {
  background-color: var(--charcoal-deep);
  background-image: url("../img/plaster.svg");
  background-size: 420px 420px;
  color: var(--ivory);
}
.band--dark h2, .band--dark h3 { color: var(--ivory); }
.band--dark .section-head p { color: #bcae97; }
.band--dark .eyebrow { color: var(--bronze-lite); }

.eyebrow {
  font-size: var(--step--1); letter-spacing: 0.32em; text-transform: uppercase;
  font-weight: 500; color: var(--bronze-ink); margin: 0 0 1.3rem;
  display: flex; align-items: center; gap: 0.9rem;
}
.eyebrow::after { content: ""; height: 1px; flex: 1; background: currentColor; opacity: 0.35; }

.section-head { max-width: 46ch; margin-bottom: clamp(2.4rem, 5vw, 3.75rem); }
.section-head h2 { font-size: var(--step-3); }
.section-head p { margin-top: 1.2rem; color: var(--body-2); font-size: var(--step-1); line-height: 1.6; }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--body); font-size: var(--step-0); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1.05rem 2rem; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  min-height: 52px;
}
.btn--primary { background: var(--charcoal); color: var(--ivory); }
.btn--primary:hover { background: #6f5427; }
.btn--ghost { border-color: var(--line-firm); color: var(--charcoal); background: transparent; }
.btn--ghost:hover { border-color: var(--charcoal); background: rgba(35, 33, 30, 0.04); }
.band--dark .btn--primary { background: var(--ivory); color: var(--charcoal); }
.band--dark .btn--primary:hover { background: var(--bronze-lite); }
.band--dark .btn--ghost { border-color: var(--line-dark); color: var(--ivory); }
.band--dark .btn--ghost:hover { border-color: var(--ivory); background: rgba(246, 241, 231, 0.08); }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* A quiet text link with a bronze rule under it */
.link-quiet {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--bronze-ink); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  font-size: var(--step-0);
}
.link-quiet:hover { color: var(--charcoal); }

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(246, 241, 231, 0.9);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.wordmark { display: inline-flex; align-items: baseline; gap: 0.5rem; text-decoration: none; }
.wordmark__the {
  font-family: var(--body); font-size: 0.6rem; letter-spacing: 0.42em;
  text-transform: uppercase; color: var(--bronze-ink); font-weight: 500;
}
.wordmark__name { font-family: var(--display); font-size: 1.6rem; letter-spacing: 0.01em; font-weight: 600; }
.wordmark img { max-height: 42px; width: auto; }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.site-nav a {
  text-decoration: none; font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500; color: var(--body-2); transition: color 0.2s var(--ease);
}
.site-nav a:hover { color: var(--charcoal); }
.site-header .btn { padding: 0.75rem 1.35rem; min-height: 46px; font-size: 0.76rem; }
@media (max-width: 760px) { .site-nav { display: none; } }

/* ---------- 6. Hero ---------- */
.hero { padding-block: clamp(2.75rem, 7vw, 6rem) var(--section-y); position: relative; overflow: hidden; }
.hero::before {
  /* Raking daylight across a plaster wall. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(80% 55% at 76% 8%, rgba(255, 252, 246, 0.95), transparent 62%),
    linear-gradient(196deg, rgba(255, 252, 246, 0.7) 0%, transparent 46%),
    radial-gradient(55% 45% at 12% 92%, rgba(138, 106, 59, 0.09), transparent 70%);
}
.hero__grid {
  position: relative; display: grid; gap: clamp(2.5rem, 6vw, 4.5rem);
  grid-template-columns: 1fr; align-items: center;
}
.hero h1 { font-size: var(--step-4); max-width: 13ch; }
.hero__lede { font-size: var(--step-1); color: var(--body-2); max-width: 44ch; margin-top: 1.5rem; line-height: 1.6; }

/* Facts sit with the call to action, not in a separate card */
.hero__specs { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.7rem; max-width: 46ch; }
.hero__specs li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: baseline; font-size: var(--step-0); }
.hero__specs li::before {
  content: ""; width: 5px; height: 5px; background: var(--bronze);
  transform: rotate(45deg); margin-top: 0.55rem;
}
.hero__specs strong { font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2.25rem; }
.hero__trust { margin-top: 1.75rem; font-size: var(--step--1); color: var(--body-2); max-width: 42ch; }

/* Gallery niche: arched plaster recess with a stone pedestal */
.niche { position: relative; padding-bottom: 34px; }
.niche__recess {
  position: relative;
  background: linear-gradient(178deg, var(--stone) 0%, #cfc2ab 58%, #c2b49c 100%);
  border-radius: var(--arch);
  padding: clamp(1.1rem, 3vw, 2rem) clamp(1rem, 3vw, 1.75rem) 0;
  box-shadow: inset 0 6px 30px rgba(35, 33, 30, 0.26), var(--shadow-lift);
  overflow: hidden;
}
.niche__recess::after {
  /* light falling from upper left, the way it does in a real alcove */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(158deg, rgba(255, 252, 246, 0.5) 0%, transparent 45%, rgba(35, 33, 30, 0.16) 100%);
}
.niche__recess img, .niche__recess > svg {
  position: relative; z-index: 1; margin-inline: auto;
  filter: drop-shadow(0 26px 26px rgba(35, 33, 30, 0.3));
}
/* Stone pedestal the niche stands on */
.niche__pedestal {
  height: 34px; width: 76%; margin: 0 auto; position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #d9cdb8 0%, #c6b8a0 55%, #b6a790 100%);
  border-radius: 2px;
  box-shadow: 0 16px 26px -14px rgba(35, 33, 30, 0.5);
}
.niche__caption {
  position: absolute; left: 0; bottom: -1.9rem;
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--body-2);
}
@media (min-width: 940px) { .hero__grid { grid-template-columns: 1.03fr 0.97fr; } }

/* ---------- 7. Featured pieces ---------- */
.featured { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.featured figure { margin: 0; }
.featured__frame {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-soft);
}
.featured__frame img { width: 100%; height: 100%; object-fit: cover; }
.featured figcaption { margin-top: 0.85rem; }
.featured figcaption b { display: block; font-family: var(--display); font-size: var(--step-1); font-weight: 600; }
.featured figcaption span { display: block; margin-top: 0.2rem; font-size: var(--step--1); color: var(--body-2); letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- 8. How it works ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps li { padding: clamp(1.5rem, 3vw, 2.1rem) 0; display: grid; gap: 0.5rem 2rem; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps__num { font-family: var(--display); font-size: var(--step-2); color: var(--bronze); line-height: 1; font-weight: 500; }
.steps h3 { font-size: var(--step-1); }
.steps p { margin: 0; color: var(--body-2); max-width: 58ch; }
@media (min-width: 760px) { .steps li { grid-template-columns: 4.5rem 1fr; align-items: start; } }

/* ---------- 9. Configurator ---------- */
.config-grid { display: grid; gap: clamp(2.25rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 960px) { .config-grid { grid-template-columns: 1.02fr 0.98fr; align-items: start; } }

.preview { position: sticky; top: 100px; }
@media (max-width: 959px) { .preview { position: static; } }

/* Product photography leads; the scale drawing supports it */
.preview__photo {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft);
}
.preview__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.preview__photo--none {
  display: grid; place-items: center; aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, #9a663a 0%, #7c4d2a 55%, #8e5c33 100%);
  text-align: center; padding: 2rem;
}
.preview__photo--none p {
  margin: 0; color: #fff8ee; font-size: var(--step--1); letter-spacing: 0.06em; max-width: 26ch; line-height: 1.6;
}
.preview__photo--none strong { display: block; font-family: var(--display); font-size: var(--step-2); margin-bottom: 0.6rem; font-weight: 600; }

.preview__meta {
  margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
}
.preview__label { font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase; color: var(--body-2); }
.preview__price { font-family: var(--display); font-size: var(--step-2); font-weight: 600; }
.preview__note { font-size: var(--step--1); color: var(--body-2); margin: 0.9rem 0 0; }
.preview__disclaimer { font-size: 0.74rem; color: var(--body-2); margin: 0.75rem 0 0; line-height: 1.55; }

.needs-setup {
  display: inline-block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em;
  padding: 0.3rem 0.55rem; border: 1px dashed var(--bronze-ink); color: var(--bronze-ink);
  border-radius: 2px; vertical-align: middle;
}

.opt-group { margin-bottom: clamp(1.9rem, 4vw, 2.6rem); border: 0; padding: 0; margin-inline: 0; }
.opt-group legend {
  font-size: var(--step--1); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--body-2); font-weight: 500; padding: 0; margin-bottom: 1rem;
}
/* Option rows wrap instead of forcing columns. At 320px three fixed columns
   left ~54px of text width for words needing ~90px, which is what made
   "Marble-look" and "Black" collide with their controls. auto-fit lets the row
   drop to two columns, then one, before anything is squeezed. */
.opt-row { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.opt-row--three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }
.opt-row--fulfillment { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }

.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt__face {
  display: block; border: 1px solid var(--line-firm); border-radius: var(--radius);
  /* right padding reserves the tick's corner so no label can run underneath it */
  padding: 1rem 2.1rem 1rem 1rem;
  background: var(--paper); cursor: pointer; height: 100%;
  min-width: 0;            /* lets grid items shrink instead of overflowing */
  overflow-wrap: anywhere; /* long finish names break rather than collide */
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.opt__face strong {
  display: block; font-family: var(--display); font-size: var(--step-1); font-weight: 600;
  line-height: 1.25; hyphens: auto;
}
.opt__face small {
  display: block; color: var(--body-2); font-size: var(--step--1);
  margin-top: 0.25rem; line-height: 1.5;
}
.opt input:hover + .opt__face { border-color: var(--bronze); }
.opt input:checked + .opt__face { border-color: var(--charcoal); box-shadow: inset 0 0 0 1px var(--charcoal); }
.opt input:focus-visible + .opt__face { outline: 2px solid var(--bronze-ink); outline-offset: 3px; }
.opt input:checked + .opt__face::after {
  content: "\2713"; position: absolute; top: 0.5rem; right: 0.6rem;
  font-size: 0.8rem; color: var(--charcoal); font-weight: 600;
}

/* Finish chips: a real photograph where one exists, a material swatch where not */
/* display: block is load-bearing. A <span> is inline by default, and an inline
   box ignores width, height, aspect-ratio, overflow and vertical margin — so
   without this the photo rendered at its full natural height, unclipped, and
   collided with the label text underneath it. The wood swatch, having no image
   inside, collapsed to nothing at all. */
.finish-chip {
  display: block;
  width: 100%; aspect-ratio: 1 / 1; max-height: 190px;
  border-radius: 2px; margin-bottom: 0.75rem;
  overflow: hidden; background: var(--stone);
}
.finish-chip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.finish-chip--swatch { border: 1px solid var(--line-firm); }
.finish-chip--wood { background: linear-gradient(150deg, #9a663a 0%, #7c4d2a 55%, #8e5c33 100%); }
.opt__face .chip-note {
  display: block; font-size: 0.68rem; letter-spacing: 0.06em; color: var(--body-2);
  margin-top: 0.5rem; padding-top: 0.45rem; border-top: 1px solid var(--line);
  text-transform: none; line-height: 1.4;
}

/* Scale drawing, kept but secondary */
.scale-panel {
  margin-top: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); padding: 1.1rem 1.25rem;
}
.scale-panel summary {
  cursor: pointer; list-style: none; font-size: var(--step--1); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--body-2); font-weight: 500; position: relative; padding-right: 1.6rem;
}
.scale-panel summary::-webkit-details-marker { display: none; }
.scale-panel summary::after { content: "+"; position: absolute; right: 0; top: -2px; font-size: 1.1rem; color: var(--bronze-ink); }
.scale-panel[open] summary::after { content: "\2013"; }
.scale-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.1rem; }
.size-fig { width: 100%; height: auto; }
.size-fig__ground { stroke: var(--line-firm); stroke-width: 1; }
.size-fig__bust { fill: var(--charcoal); opacity: 0.85; }
.size-fig__mug { fill: var(--body-2); color: var(--body-2); opacity: 0.4; }
.size-fig__dim line { stroke: var(--bronze); stroke-width: 1.2; }
.size-fig__dim text { fill: var(--bronze-ink); font-family: var(--body); font-size: 9px; font-weight: 500; }
.size-fig__cap { fill: var(--body-2); font-family: var(--body); font-size: 6.5px; letter-spacing: 0.08em; }
.scale-figs figcaption { font-size: var(--step--1); color: var(--body-2); text-align: center; margin-top: 0.3rem; }

/* Material honesty note, order summary, shipping explainer */
.material-note {
  margin: 1.4rem 0 0; font-size: var(--step--1); color: var(--body-2);
  border-left: 2px solid var(--bronze); padding: 0.35rem 0 0.35rem 1rem; max-width: 52ch;
}
.subtotal {
  margin-top: 1.75rem; padding: 1.15rem 1.3rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.subtotal dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; font-size: var(--step--1); }
.subtotal dt { color: var(--body-2); letter-spacing: 0.12em; text-transform: uppercase; }
.subtotal dd { margin: 0; text-align: right; font-weight: 500; }
.subtotal__total { border-top: 1px solid var(--line); margin-top: 0.85rem; padding-top: 0.85rem; }
.subtotal__total dd { font-family: var(--display); font-size: var(--step-1); font-weight: 600; }
.subtotal__note { margin: 0.9rem 0 0; font-size: 0.76rem; color: var(--body-2); line-height: 1.6; }
.config-cta { margin-top: 1.5rem; }
.config-cta .btn { width: 100%; }
.config-aside { margin: 1rem 0 0; font-size: var(--step--1); color: var(--body-2); text-align: center; }

/* ---------- 10. Gallery (dark room) ---------- */
.gallery { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.gallery figure { margin: 0; }
.gallery__frame {
  background: #262320; border: 1px solid var(--line-dark); border-radius: var(--radius);
  overflow: hidden; aspect-ratio: 4 / 5;
  box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.9);
}
.gallery__frame img { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: #bcae97; margin-top: 0.8rem; }
.gallery figcaption .inquire { display: block; letter-spacing: 0.04em; text-transform: none; color: var(--bronze-lite); margin-top: 0.2rem; }

/* ---------- 11. Help / inquiry ---------- */
.help-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 960px) { .help-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.photo-guide { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 1.25rem; }
.photo-guide article { border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius); padding: 1.25rem; }
.photo-guide h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.photo-guide p { margin: 0; color: var(--body-2); font-size: var(--step--1); }
.callout { border-left: 2px solid var(--bronze); padding: 0.4rem 0 0.4rem 1.2rem; color: var(--body-2); margin-top: 2rem; max-width: 62ch; }

.request-panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 3.5vw, 2.25rem); box-shadow: var(--shadow-soft);
}
.request-panel h3 { font-size: var(--step-2); }
.request-panel > p { color: var(--body-2); font-size: var(--step--1); }
[data-request-fields][hidden] { display: none; }

/* ---------- 12. FAQ ---------- */
.faq { max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.3rem 2.5rem 1.3rem 0;
  font-family: var(--display); font-size: var(--step-1); font-weight: 600; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
  font-family: var(--body); font-size: 1.3rem; font-weight: 300; color: var(--bronze-ink);
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > div { padding: 0 0 1.4rem; color: var(--body-2); max-width: 66ch; }
.faq details > div a { color: var(--bronze-ink); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- 13. Final call to action ---------- */
.final-cta { text-align: center; }
.final-cta h2 { font-size: var(--step-3); max-width: 18ch; margin-inline: auto; }
.final-cta p { color: var(--body-2); max-width: 48ch; margin: 1.2rem auto 2rem; }
.final-cta .btn { min-width: 260px; }

/* ---------- 14. Modal ---------- */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(0.5rem, 3vw, 2.5rem); overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.modal__backdrop { position: fixed; inset: 0; background: rgba(35, 33, 30, 0.55); backdrop-filter: blur(5px); }
.modal__panel {
  position: relative; width: min(100%, 600px); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 40px 90px -30px rgba(35, 33, 30, 0.6);
  padding: clamp(1.4rem, 4vw, 2.5rem); margin-block: auto;
}
.modal__close {
  position: absolute; top: 0.7rem; right: 0.7rem; width: 46px; height: 46px;
  border: 0; background: transparent; color: var(--body-2); font-size: 1.5rem;
  cursor: pointer; border-radius: 2px;
}
.modal__close:hover { color: var(--charcoal); background: rgba(35, 33, 30, 0.05); }
.modal h2 { font-size: var(--step-2); padding-right: 2.5rem; }

.order-summary { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.05rem 1.2rem; margin: 1.3rem 0 1.6rem; background: var(--ivory); }
.order-summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; font-size: var(--step--1); }
.order-summary dt { color: var(--body-2); letter-spacing: 0.12em; text-transform: uppercase; }
.order-summary dd { margin: 0; text-align: right; font-weight: 500; }
.order-summary__total { border-top: 1px solid var(--line); margin-top: 0.8rem; padding-top: 0.8rem; }
.order-summary__total dd { font-family: var(--display); font-size: var(--step-1); font-weight: 600; }

/* ---------- 15. Forms ---------- */
.field { margin-bottom: 1.2rem; }
.field label, .field .field-legend {
  display: block; font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--body-2); font-weight: 500; margin-bottom: 0.45rem;
}
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea, .field select {
  width: 100%; font: inherit; color: var(--charcoal); background: var(--ivory);
  border: 1px solid var(--line-firm); border-radius: var(--radius);
  padding: 0.85rem 0.95rem; min-height: 50px; font-size: 16px; /* no iOS zoom on focus */
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field textarea { min-height: 92px; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--bronze); }
.field input:focus, .field textarea:focus { background: var(--paper); }
.field .hint { font-size: 0.75rem; color: var(--body-2); margin: 0.45rem 0 0; text-transform: none; letter-spacing: 0; }
.field--invalid input, .field--invalid textarea, .field--invalid select { border-color: #9d3520; }
.error { display: none; color: #8c2f1c; font-size: 0.81rem; margin-top: 0.4rem; }
.field--invalid .error { display: block; }
.req { color: var(--bronze-ink); }

.radio-row { display: grid; gap: 0.55rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.5rem), 1fr)); }
.radio-row .opt__face { padding: 0.8rem 0.5rem; text-align: center; font-size: var(--step--1); line-height: 1.35; }
.radio-row .opt input:checked + .opt__face::after { content: none; }

.check {
  display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: start;
  margin-bottom: 1rem; font-size: 0.88rem; color: var(--body-2); line-height: 1.6;
}
.check input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--charcoal); flex: none; }
.check a { color: var(--bronze-ink); }
.check--invalid { color: #8c2f1c; }

.form-status { display: none; border: 1px solid var(--line-firm); border-radius: var(--radius); padding: 0.95rem 1.05rem; margin-bottom: 1.15rem; font-size: 0.9rem; }
.form-status[data-state] { display: block; }
.form-status[data-state="working"] { border-color: var(--bronze); background: #f5efe2; color: var(--charcoal); }
.form-status[data-state="error"] { border-color: #9d3520; background: #fbf0ed; color: #8c2f1c; }
.form-status[data-state="sent"] { border-color: var(--charcoal); background: var(--ivory); color: var(--charcoal); }
.form-status code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; background: rgba(35, 33, 30, 0.08); padding: 0.12rem 0.35rem; border-radius: 2px; word-break: break-all; }
.form-footnote { font-size: 0.77rem; color: var(--body-2); margin: 1.1rem 0 0; line-height: 1.6; }

/* ---------- 16. Footer ---------- */
.site-footer { background: var(--charcoal); color: var(--ivory); padding-block: clamp(3rem, 6vw, 4.5rem); }
.site-footer .wordmark__the { color: var(--bronze-lite); }
.site-footer__grid { display: grid; gap: 2.25rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.site-footer h3 { font-family: var(--body); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: #bcae97; margin-bottom: 1rem; font-weight: 500; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.site-footer a { color: #ddd2be; text-decoration: none; }
.site-footer a:hover { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; }
.site-footer p { color: #bcae97; }
.site-footer__legal {
  margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark);
  font-size: 0.76rem; color: #ab9f8d; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
}

/* ---------- 17. Text pages ---------- */
.page { padding-block: clamp(3.5rem, 8vw, 6rem); }
.page__intro { max-width: 62ch; }
.page h1 { font-size: var(--step-3); }
.doc { max-width: 74ch; }
.doc h2 { font-size: var(--step-2); margin-top: 3.5rem; }
.doc h3 { font-size: var(--step-1); margin-top: 2rem; }
.doc p, .doc li { color: var(--body-2); }
.doc ul { padding-left: 1.2rem; }
.doc li { margin-bottom: 0.55rem; }
.doc a { color: var(--bronze-ink); }
.doc strong { color: var(--charcoal); font-weight: 600; }
.review-flag { display: block; border-left: 2px solid var(--bronze); background: rgba(138, 106, 59, 0.08); padding: 1rem 1.2rem; margin: 1rem 0 1.6rem; font-size: 0.87rem; color: var(--charcoal); }
.review-flag strong { color: var(--bronze-ink); }
.policy-toc { list-style: none; padding: 0; margin: 2.25rem 0 0; display: grid; gap: 0.65rem; }
.policy-toc a { color: var(--bronze-ink); }

.confirm-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: clamp(1.6rem, 5vw, 3rem); max-width: 720px; box-shadow: var(--shadow-soft); }
.confirm-card .mark { color: var(--bronze); margin-bottom: 1.4rem; }
.confirm-card p { color: var(--body-2); }
.confirm-card strong { color: var(--charcoal); font-weight: 600; }
.next-steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.1rem; }
.next-steps li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; color: var(--body-2); }
.next-steps b { color: var(--bronze-ink); font-family: var(--display); font-size: 1.25rem; font-weight: 600; }

/* ---------- 18. Live bust illustration ---------- */
.bust .bust-body { fill: var(--finish-marble); transition: fill 0.45s var(--ease); }
.bust .bust-plinth { fill: #8d8271; }
.bust .bust-shade { fill: #000; opacity: 0.15; }
.bust .bust-light { fill: #fff; opacity: 0.2; }
.bust .grain-marble, .bust .grain-wood { opacity: 0; transition: opacity 0.45s var(--ease); }
.bust[data-finish="marble"] .grain-marble { opacity: 0.5; }
.bust[data-finish="wood"] .bust-body { fill: var(--finish-wood); }
.bust[data-finish="wood"] .grain-wood { opacity: 0.35; }
.bust[data-finish="black"] .bust-body { fill: var(--finish-black); }
.bust[data-finish="black"] .bust-shade { opacity: 0.4; }

/* ---------- 19. Mobile sticky call to action ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(246, 241, 231, 0.95);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform 0.3s var(--ease);
  display: none;
}
.sticky-cta .btn { width: 100%; min-height: 50px; }
.sticky-cta__price { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--body-2); text-align: center; margin: 0 0 0.5rem; }
@media (max-width: 900px) {
  .sticky-cta { display: block; }
  .sticky-cta.is-visible { transform: translateY(0); }
  body.has-sticky-cta { padding-bottom: 96px; }
}
/* Never sits over the order dialog */
body.modal-open .sticky-cta { transform: translateY(110%); }

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


/* ---------- 21. Size comparison illustration ---------- */
.scale-art { width: 100%; height: auto; margin-top: 1.1rem; }
.scale-art__ground { stroke: var(--line-firm); stroke-width: 1; }
.scale-art__label {
  fill: var(--body-2); font-family: var(--body); font-size: 11px;
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
}
.scale-art__caption {
  margin: 0.6rem 0 0; font-size: 0.75rem; color: var(--body-2); line-height: 1.55;
}
/* Carved marble treatment for the illustration */
.cb-stone { fill: url(#marbleGrad); stroke: #b3a68d; stroke-width: 1.1; stroke-linejoin: round; }
.cb-carve { fill: none; stroke: #bcaf96; stroke-width: 1.1; stroke-linecap: round; }
.cb-vein  { fill: none; stroke: #cabfa8; stroke-width: 0.9; stroke-linecap: round; }

/* ---------- 22. Fulfilment ---------- */
.fulfillment-note {
  margin: 0.9rem 0 0; font-size: var(--step--1); color: var(--body-2); line-height: 1.6;
}

/* ---------- 23. Accessory restriction ---------- */
.accessory-note {
  margin: 1.5rem 0 0; padding: 0.9rem 1.1rem;
  background: var(--paper); border: 1px solid var(--line);
  border-left: 2px solid var(--bronze); border-radius: var(--radius);
  font-size: var(--step--1); color: var(--charcoal); line-height: 1.6; max-width: 62ch;
}
.accessory-note--form { margin: 0 0 1.2rem; background: var(--ivory); }

/* ---------- 24. Coming soon ---------- */
.coming-soon {
  margin-top: 2.5rem; padding: 1.1rem 1.3rem;
  border: 1px dashed var(--line-firm); border-radius: var(--radius);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem;
  max-width: 56ch; background: rgba(255, 252, 246, 0.6);
}
.coming-soon__tag {
  font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--bronze-ink); font-weight: 600; white-space: nowrap;
}
.coming-soon p { margin: 0; font-size: var(--step--1); color: var(--body-2); flex: 1 1 16rem; }
.coming-soon a { color: var(--bronze-ink); }