/* ============================================================================
   CRS Fine Stone & Surfaces — kiosk stylesheet
   Portrait touchscreen, 1080×1920. Dark, editorial, gallery-grade.

   Direction: a high-end stone gallery after hours. The wall is a deep warm
   near-black; every surface is a polished slab catching a single overhead
   light (a soft top sheen + hairline edge); brass is the gallery hardware —
   frames, index plates, wall labels, the wayfinding pin. Fraunces carries the
   voice, Archivo the data, italic serif the descriptions, PlexMono the small
   tracked eyebrow/label text (wayfinding, property keys, step counters).

   Rules of the house:
   - EVERY color literal (hex / rgb / rgba / named) lives in the :root block
     below. No color literal appears in any component rule.
   - Type only ever names a family through --font-serif / --font-sans / --font-mono.
   ============================================================================ */

:root {
  /* --- warm near-black gallery wall, espresso/charcoal undertone --- */
  --bg:          #0E0A06;
  --bg-hi:       #191309;   /* top of the ambient gallery light */
  --bg-lo:       #080503;   /* floor / bottom of the vignette */

  /* --- polished-slab surfaces: a quiet, clear elevation ramp --- */
  --surface:     #1B140D;   /* base slab: cards, rows, plaques */
  --surface-2:   #241C13;   /* raised / lit top of a slab */
  --surface-3:   #2F241A;   /* pressed / active */

  /* --- marble-white ink; brightest reserved for marquee headings --- */
  --text-hi:     #FBF6EC;   /* key display headings only */
  --text:        #F1EBDD;   /* marble-white body + most headings */
  --muted:       #B4A78D;
  --faint:       #857868;

  /* --- hairlines & walls --- */
  --line:        #372D22;
  --line-soft:   #26201A;

  /* --- aged champagne-brass; ONE hue everywhere via the channel tokens --- */
  --brass-rgb:      200,173,120;   /* the calmed brass (replaces the old 201,164,92) */
  --champagne-rgb:  233,207,152;   /* pale champagne wash */
  --accent:      #C8AD78;   /* the brand brass, aged into champagne */
  --accent-soft: #EAD6A6;   /* champagne highlight */
  --accent-deep: #8B6A33;   /* bronze, for gradient edges */
  --accent-ink:  #14100B;   /* dark ink placed on brass */

  /* --- raw channels reused inside composed tokens (kept out of components) --- */
  --brass-06:    rgba(var(--brass-rgb),0.06);
  --brass-10:    rgba(var(--brass-rgb),0.10);
  --brass-16:    rgba(var(--champagne-rgb),0.16);
  --brass-22:    rgba(var(--champagne-rgb),0.22);
  --brass-40:    rgba(var(--brass-rgb),0.40);
  --brass-glow:  rgba(var(--brass-rgb),0.52);
  --lit-02:      rgba(255,255,255,0.03);
  --lit-06:      rgba(255,255,255,0.06);
  --shadow-strong: rgba(0,0,0,0.85);
  --shadow-deep:   rgba(0,0,0,0.90);
  --ink-70:      rgba(8,6,4,0.70);
  --ink-22:      rgba(8,6,4,0.22);
  --ink-40:      rgba(8,6,4,0.40);
  --ink-94:      rgba(6,4,3,0.94);

  /* --- composed tokens: gradients, sheens, scrims, glows --- */
  --page-bg:     radial-gradient(130% 78% at 50% -12%, var(--bg-hi) 0%, var(--bg) 44%, var(--bg-lo) 100%);
  --slab-face:   linear-gradient(168deg, var(--surface-2) 0%, var(--surface) 58%, var(--surface) 100%);
  --plaque-face: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  --slab-sheen:  inset 0 1px 0 var(--brass-10), inset 0 0 0 1px var(--lit-02);
  --tile-veil:   linear-gradient(180deg, var(--ink-22) 0%, var(--ink-22) 40%, var(--ink-40) 58%, var(--ink-70) 78%, var(--ink-94) 100%);
  --topbar-line: linear-gradient(90deg, transparent 0%, var(--accent-deep) 16%, var(--accent-soft) 50%, var(--accent-deep) 84%, transparent 100%);
  --gold-rule:   linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%);
  --gold-rule-fade: linear-gradient(90deg, var(--accent-deep) 0%, transparent 100%);
  --gold-face:   linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 52%, var(--accent-deep) 100%);
  --card-shadow: 0 24px 60px -30px var(--shadow-strong);
  --tile-shadow: 0 28px 66px -30px var(--shadow-deep);
  --float-shadow: 0 16px 38px -14px var(--shadow-deep);
  --brass-frame: inset 0 0 0 1px var(--brass-22);
  --brass-frame-soft: inset 0 0 0 1px var(--brass-16);
  --hover-glow:  0 0 0 2px var(--brass-glow), 0 28px 66px -26px var(--shadow-deep);
  --img-tint:    grayscale(0.34) saturate(0.88) contrast(1.03) brightness(0.62);
  --img-tint-photo: saturate(1.02) contrast(1.05) brightness(0.95);
  --btn-face:    linear-gradient(180deg, var(--brass-10) 0%, transparent 100%);
  --row-alt:     rgba(var(--champagne-rgb),0.03);
  --ink-shadow:    0 2px 18px var(--shadow-strong);
  --ink-shadow-lg: 0 3px 20px var(--shadow-deep);
  --eyebrow-shadow: 0 2px 10px var(--shadow-deep);

  /* --- HOME hero: a clean dark masthead (no photo). Ambient gallery light on
     the espresso wall + a lit crest — no aisle backdrop (customers are already
     standing in the warehouse). --- */
  --pure-black:  #000000;   /* the one true black, reserved for the attract screen */
  --hero-spot:   radial-gradient(72% 54% at 50% 32%,
                   rgba(var(--champagne-rgb),0.11) 0%,
                   rgba(var(--champagne-rgb),0.045) 36%,
                   transparent 70%);
  --crest-halo:  radial-gradient(circle at 50% 50%,
                   rgba(var(--champagne-rgb),0.42) 0%,
                   rgba(var(--brass-rgb),0.20) 34%,
                   rgba(var(--brass-rgb),0.06) 56%,
                   transparent 74%);
  --hero-hairline: linear-gradient(90deg, transparent 0%, var(--accent-deep) 18%, var(--accent-soft) 50%, var(--accent-deep) 82%, transparent 100%);
  /* attract-screen backdrop: espresso glow melting to true black */
  --ss-bg: radial-gradient(122% 92% at 50% 30%, var(--bg-hi) 0%, var(--bg-lo) 44%, var(--pure-black) 100%);
  /* wordmark fill — marble white with a champagne band that sweeps across for
     the periodic sheen (background-position animated). */
  --wordmark-fill: linear-gradient(100deg,
    var(--text-hi) 0%, var(--text-hi) 42%,
    var(--accent-soft) 49%, var(--text-hi) 50%, var(--accent-soft) 51%,
    var(--text-hi) 58%, var(--text-hi) 100%);
  --crest-glow-soft: drop-shadow(0 3px 10px var(--shadow-deep));
  --crest-glow-lit:  drop-shadow(0 0 16px rgba(var(--champagne-rgb),0.42)) drop-shadow(0 3px 10px var(--shadow-deep));
  --crest-glow-bloom: drop-shadow(0 0 34px rgba(var(--champagne-rgb),0.72)) drop-shadow(0 0 64px rgba(var(--brass-rgb),0.36)) drop-shadow(0 3px 10px var(--shadow-deep));

  /* --- isometric warehouse scene tokens (the signature) ------------------ */
  /* floor + drafting grid + hairline gold walls */
  --wh-floor:      rgba(20,16,11,0.78);        /* the iso floor slab */
  --grid-line:     rgba(var(--brass-rgb),0.06);      /* faint drafting grid */
  --floor-edge:    rgba(var(--brass-rgb),0.34);      /* gold hairline floor perimeter */
  --wall-line:     rgba(var(--brass-rgb),0.32);      /* hairline gold walls */
  --wall-plane:    rgba(var(--brass-rgb),0.05);      /* translucent back-wall plane */
  --tick:          rgba(var(--brass-rgb),0.46);      /* ruler tick marks */

  /* zone floors — muted, color-coded, standalone SVG fills, keyed to the real
     plan's tints (Porcelain warm-tan, Quartz green, Natural slate-blue, Staging
     orange, Sink mauve, Pins neutral) — elegant + desaturated for wayfinding */
  --zone-porcelain-face:  rgba(200,173,120,0.20);  /* warm tan — porcelain */
  --zone-quartz-face:     rgba(120,168,132,0.20);  /* muted green — quartz */
  --zone-natural-face:    rgba(88,122,172,0.26);   /* slate-blue — natural stones */
  --zone-staging-face:    rgba(198,142,86,0.22);   /* warm orange — staging */
  --zone-sink-face:       rgba(168,132,178,0.20);  /* mauve — future sink display */
  --zone-pins-face:       rgba(180,167,141,0.12);  /* neutral — pins strip */
  --zone-edge:            rgba(var(--brass-rgb),0.30);   /* gold zone outline */
  --room-face:            rgba(var(--champagne-rgb),0.10);  /* front-corner office floor regions */
  --room-wall:            rgba(var(--brass-rgb),0.16);

  /* A-frame slab racks — a muted stone palette; each leaning slab a real stone
     tint (cream marble → veined white → sage green → warm grey → slate → char),
     the shaded (+u) slope darkened by a CSS brightness filter so one token set
     serves both slopes. These are the brightest thing in the dark hall, exactly
     as lit slabs are in the warehouse — the product glows. */
  --slab-cream:     #C7BCA0;   /* marble cream */
  --slab-vein:      #D8CFBB;   /* veined white — lightest */
  --slab-sage:      #8FA085;   /* muted green marble */
  --slab-stone:     #A69E8B;   /* warm grey granite */
  --slab-slate:     #7C818B;   /* cool grey-blue */
  --slab-char:      #45464C;   /* charcoal / black slab */
  --slab-edge:      rgba(18,13,9,0.55);            /* thin seam between slabs */
  --rack-edge:      rgba(var(--brass-rgb),0.30);   /* hairline where slabs meet the floor */
  --ridge:          #E7DCC4;   /* bright top-spine highlight */

  /* the division wall inside Natural Stones (two segments, two openings) —
     a warm plaster wall, light enough to read as built structure among the racks */
  --divider-face:   #4A3D2C;
  --divider-top:    #5E4E38;
  --divider-end:    #342A1E;

  /* the gold wayfinding route */
  --route-stroke:   #EAD6A6;
  --route-glow:     drop-shadow(0 0 6px var(--brass-glow));

  /* you-are-here pin + gallery label plates */
  --pin-ring:       rgba(var(--brass-rgb),0.55);
  --plate-face:     rgba(28,22,16,0.86);
  --plate-edge:     rgba(var(--brass-rgb),0.28);
  --chip-face:      rgba(var(--champagne-rgb),0.05);    /* stone-type directory chips */
  --chip-face-lit:  rgba(var(--champagne-rgb),0.10);

  /* --- rhythm --- */
  --font-serif:  "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:   "Archivo", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:   "PlexMono", ui-monospace, "SF Mono", monospace;
  --gutter:      56px;
  --measure:     980px;
  --radius:      16px;
  --radius-lg:   22px;
  --tap:         64px;
  --topbar-h:    120px;
}

/* ---------- reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* kiosk hardening */
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: none;
  touch-action: manipulation;
  overflow: hidden;               /* only designated containers scroll */
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--page-bg);
  background-attachment: fixed;
}

/* the renderer emits many <button>s — strip all UA chrome */
button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: none;
}

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

/* Reusable editorial devices ------------------------------------------------ */
/* .u-eyebrow  — small brass kicker (composed inline where needed via ::before) */

/* ============================================================================
   TOP BAR — a brass gallery plaque. Hidden on home; shown on every section.
   ============================================================================ */
#topbar {
  position: relative;
  flex: 0 0 auto;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 0 var(--gutter);
  background: var(--plaque-face);
  box-shadow: var(--card-shadow), var(--slab-sheen);
  z-index: 5;
}
#topbar[hidden] { display: none; }
#topbar::after {                            /* hairline brass underline */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--topbar-line);
}

#homeBtn {
  flex: 0 0 auto;
  min-width: 196px;
  height: var(--tap);
  padding: 0 32px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 23px;
  letter-spacing: 0.03em;
  color: var(--accent-soft);
  border: 1px solid var(--accent-deep);
  border-radius: 999px;
  background: var(--btn-face);
}
#homeBtn:active {
  color: var(--accent-ink);
  background: var(--gold-face);
  border-color: var(--accent-soft);
}

#topbarTitle {
  position: relative;
  padding-top: 22px;                        /* room for the brand kicker */
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.02;
  letter-spacing: -0.008em;
  color: var(--text-hi);
}
#topbarTitle::before {                      /* persistent brand kicker above the section name */
  content: "CRS Fine Stone & Surfaces";
  position: absolute;
  top: 0; left: 1px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ============================================================================
   VIEW SHELL — each view is its own full-height scroll container
   ============================================================================ */
#views { flex: 1 1 auto; min-height: 0; position: relative; }

.view {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.view[hidden] { display: none; }

/* consistent inner padding for the text-forward sections */
.faq, .sustainability, .sealing, .comparison, .warehouse-map, .journey {
  padding: 60px var(--gutter) 104px;
}

/* ============================================================================
   HOME — a clean, bold dark masthead: a lit gold crest (breathing halo),
   the Fraunces wordmark with a champagne sheen, the italic tagline → the six
   gallery-plate tiles → the contact plaque. NO photo backdrop — customers are
   already in the warehouse. Renderer emits .home-hero + .tile-grid +
   .home-contact in that DOM order. The bolder intro cascade + ambient motion
   are CSS keyframed and scoped to #view-home:not([hidden]) so they REPLAY on
   every return Home. See the "HOME motion" block below + the reduced-motion
   guard near the bottom.
   ============================================================================ */
.home {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 0 34px;
}

/* ── clean dark hero masthead ─────────────────────────────────────────────── */
.home-hero {
  order: 1;
  position: relative;
  flex: 0 0 auto;
  min-height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 92px var(--gutter) 60px;
  overflow: hidden;
  isolation: isolate;
}
.home-hero::before {                        /* ambient gallery spotlight (drifts) */
  content: "";
  position: absolute;
  inset: -12% -12% 0;
  background: var(--hero-spot);
  z-index: 0;
  pointer-events: none;
}
.home-hero::after {                         /* gold threshold hairline where hero meets tiles */
  content: "";
  position: absolute;
  left: var(--gutter); right: var(--gutter); bottom: 0;
  height: 1px;
  background: var(--hero-hairline);
  z-index: 3;
}
.home-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.home-crest-wrap {
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: 30px;
}
.home-crest-halo {                          /* soft champagne glow behind the crest */
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: var(--crest-halo);
  z-index: 0;
  pointer-events: none;
}
.home-crest {
  position: relative;
  z-index: 1;
  display: block;
  height: 190px;
  width: auto;
  filter: var(--crest-glow-soft);
}
.home-eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 22px;
  text-shadow: var(--eyebrow-shadow);
}
.home-eyebrow::before,
.home-eyebrow::after {                      /* short brass rules flanking the locale */
  content: "";
  width: 48px;
  height: 1px;
  background: var(--gold-rule-fade);
}
.home-eyebrow::before { transform: scaleX(-1); }
.home-wordmark {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 62px;
  line-height: 1.02;
  letter-spacing: 0.004em;
  /* marble-white fill with a champagne band positioned off to the side; the
     sheen animation sweeps it across the letters. */
  background: var(--wordmark-fill);
  background-size: 320% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: var(--ink-shadow-lg);
}
.home-tagline {
  position: relative;
  margin-top: 24px;
  padding-top: 26px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.012em;
  color: var(--accent-soft);
  text-shadow: var(--ink-shadow);
}
.home-tagline::before {                     /* a signature brass vein above the tagline */
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 2px;
  background: var(--gold-rule);
}

/* ── tile plates ─────────────────────────────────────────────────────────── */
.tile-grid {
  order: 2;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 24px;
  min-height: 0;
  margin: 30px var(--gutter) 0;             /* gutter inset (hero stays full-bleed) */
  counter-reset: plate;
}

.tile {
  counter-increment: plate;
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--slab-face);
  box-shadow: var(--tile-shadow), var(--brass-frame-soft);
  isolation: isolate;
}
.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--img-tint-photo);
  z-index: 0;
}
.tile::before {                             /* brass gallery-catalog plate number — a delicate detail */
  content: "0" counter(plate);
  position: absolute;
  top: 22px;
  right: 26px;
  z-index: 2;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.14em;
  color: var(--accent-soft);
  text-shadow: var(--ink-shadow-lg);
}
.tile::after {                              /* unifying veil + bottom scrim for the label */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tile-veil);
  z-index: 1;
}
.tile-label {
  position: absolute;
  left: 32px;
  right: 30px;
  bottom: 30px;
  z-index: 2;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 35px;
  line-height: 1.06;
  letter-spacing: -0.004em;
  color: var(--text-hi);
  text-shadow: var(--ink-shadow-lg);
}
.tile-label::before {                       /* short brass vein above the label */
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-bottom: 16px;
  background: var(--gold-rule);
}
.tile:active { box-shadow: var(--hover-glow), var(--brass-frame); }
.tile:active img { filter: brightness(1.06) saturate(1.05); }

/* contact plaque pinned under the grid */
.home-contact {
  order: 3;
  flex: 0 0 auto;
  margin: 26px var(--gutter) 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 26px;
  text-align: center;
}
.home-contact-phone {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.02em;
  color: var(--accent-soft);
}
.home-contact-hours,
.home-contact-address {
  font-family: var(--font-sans);
  font-size: 20px;
  color: var(--muted);
}
.home-contact-hours::before,
.home-contact-address::before {
  content: "\2022";
  margin-right: 26px;
  color: var(--accent-deep);
}

/* ============================================================================
   HOME motion — an orchestrated entrance + ambient looping life. Every intro
   keyframe is scoped to #view-home:not([hidden]) so the choreography REPLAYS
   automatically each time the kiosk idle-returns Home: router.show("home")
   clears the [hidden] attribute, the view re-enters the render tree, and the
   display:none → shown transition restarts the CSS animations. All of it is
   disabled in the reduced-motion guard at the bottom of the file.
   ============================================================================ */
@keyframes homeRise {                        /* the shared entrance move (bolder) */
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes homeCrestReveal {                 /* crest scales up out of the dark + glow bloom */
  0%   { opacity: 0; transform: scale(0.6);  filter: var(--crest-glow-soft); }
  62%  { opacity: 1;                          filter: var(--crest-glow-bloom); }
  100% { opacity: 1; transform: scale(1);    filter: var(--crest-glow-soft); }
}
@keyframes homeCrestBreath {                  /* ambient gold breath on the crest */
  0%, 72%, 100% { filter: var(--crest-glow-soft); }
  86%           { filter: var(--crest-glow-lit); }
}
@keyframes homeHaloBloom {                    /* the glow behind the crest blooms once */
  0%   { opacity: 0;    transform: scale(0.4); }
  55%  { opacity: 1;    transform: scale(1.2); }
  100% { opacity: 0.62; transform: scale(1); }
}
@keyframes homeHaloBreath {                   /* then breathes softly forever */
  0%, 100% { opacity: 0.5; transform: scale(0.96); }
  50%      { opacity: 0.9; transform: scale(1.07); }
}
@keyframes homeSpotDrift {                    /* the ambient hero spotlight drifts */
  0%, 100% { opacity: 0.85; transform: translate3d(-1.5%, 0, 0) scale(1); }
  50%      { opacity: 1;    transform: translate3d(1.5%, -1%, 0) scale(1.05); }
}
@keyframes homeSheen {                        /* champagne band sweeps the wordmark */
  0%   { background-position: 120% 0; }
  55%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}
@keyframes homeTilePop {                      /* tiles rise + settle with real presence */
  from { opacity: 0; transform: translateY(46px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes homeTileDrift { from { transform: scale(1.03); } to { transform: scale(1.1); } }

/* baseline: hidden until the intro plays (avoids a flash of finished state on
   the very first paint). These only apply while Home is the shown view. */
#view-home:not([hidden]) .home-hero::before { animation: homeSpotDrift 16s ease-in-out infinite; }
#view-home:not([hidden]) .home-crest-halo {
  animation: homeHaloBloom 1.5s cubic-bezier(.2,.7,.25,1) 0.1s both,
             homeHaloBreath 7s ease-in-out 1.7s infinite;
}
#view-home:not([hidden]) .home-crest {
  animation: homeCrestReveal 1.15s cubic-bezier(.2,.7,.25,1) 0.1s both,
             homeCrestBreath 8s ease-in-out 2.6s infinite;
}
#view-home:not([hidden]) .home-eyebrow  { animation: homeRise 0.7s ease 0.6s both; }
#view-home:not([hidden]) .home-wordmark {
  animation: homeRise 0.9s cubic-bezier(.2,.7,.25,1) 0.72s both,
             homeSheen 6.5s ease-in-out 1.9s infinite;
}
#view-home:not([hidden]) .home-tagline { animation: homeRise 0.75s ease 1.02s both; }

/* the six plates cascade in with a bolder pop; each drifts slowly afterward */
#view-home:not([hidden]) .tile { animation: homeTilePop 0.7s cubic-bezier(.2,.75,.25,1) both; }
#view-home:not([hidden]) .tile:nth-child(1) { animation-delay: 0.92s; }
#view-home:not([hidden]) .tile:nth-child(2) { animation-delay: 1.04s; }
#view-home:not([hidden]) .tile:nth-child(3) { animation-delay: 1.16s; }
#view-home:not([hidden]) .tile:nth-child(4) { animation-delay: 1.28s; }
#view-home:not([hidden]) .tile:nth-child(5) { animation-delay: 1.40s; }
#view-home:not([hidden]) .tile:nth-child(6) { animation-delay: 1.52s; }
#view-home:not([hidden]) .home-contact { animation: homeRise 0.7s ease 1.62s both; }
#view-home:not([hidden]) .tile img { animation: homeTileDrift 26s ease-in-out infinite alternate; }
#view-home:not([hidden]) .tile:nth-child(2n) img { animation-duration: 32s; animation-delay: -8s; }
#view-home:not([hidden]) .tile:nth-child(3n) img { animation-duration: 29s; animation-delay: -14s; }

/* ============================================================================
   FAQ — lettered catalog sections + accordion rows
   ============================================================================ */
.faq { max-width: var(--measure); margin: 0 auto; counter-reset: chapter; }

.faq-category {
  counter-increment: chapter;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.006em;
  color: var(--text);
  margin: 52px 0 16px;
  padding-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.faq-category:first-child { margin-top: 6px; }
.faq-category::before {                     /* brass chapter index plate */
  content: counter(chapter, upper-alpha);
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  color: var(--accent);
  border: 1px solid var(--accent-deep);
  border-radius: 999px;
  background: var(--btn-face);
}
.faq-category::after {                      /* trailing brass rule */
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--gold-rule-fade);
  opacity: 0.7;
}

.faq-item { border-bottom: 1px solid var(--line-soft); }

.faq-q {
  width: 100%;
  min-height: var(--tap);
  padding: 26px 60px 26px 0;
  position: relative;
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.3;
  color: var(--text);
}
.faq-q::after {                             /* +/− affordance */
  content: "+";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-weight: 400;                         /* Archivo variable covers 100-900 */
  font-size: 40px;
  line-height: 1;
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.faq-q[aria-expanded="true"] { color: var(--accent-soft); }
.faq-q[aria-expanded="true"]::after {
  content: "\2212";
  color: var(--accent-ink);
  background: var(--gold-face);
  border-color: var(--accent-soft);
}

.faq-a {
  padding: 2px 68px 30px 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.66;
  color: var(--muted);
}
.faq-a[hidden] { display: none; }

/* ============================================================================
   COMPARISON — stone cards grouped by family. Museum wall-labels: a polished
   slab panel, an italic descriptive line, and a hairline-ruled property grid.
   ============================================================================ */
.comparison { max-width: var(--measure); margin: 0 auto; }

/* --- Cards / Table toggle — an elegant segmented control ------------------ */
.cmp-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  margin: 0 0 40px;
  border-radius: 999px;
  background: var(--chip-face);
  box-shadow: var(--brass-frame-soft);
}
.cmp-toggle-btn {
  min-height: 56px;
  padding: 0 34px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.cmp-toggle-btn:active { color: var(--text); }
.cmp-toggle-btn.is-active {
  color: var(--accent-ink);
  font-weight: 700;
  background: var(--gold-face);
  box-shadow: var(--float-shadow);
}

.cmp-table-view[hidden] { display: none; }
.cmp-cards-view[hidden] { display: none; }

.cmp-group + .cmp-group { margin-top: 56px; }

.cmp-group-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.006em;
  color: var(--accent-soft);
  margin: 4px 0 26px;
  padding-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.cmp-group-title::after {                   /* trailing brass rule */
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--gold-rule-fade);
  opacity: 0.7;
}

.cmp-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.stone-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 12px;
  border-radius: var(--radius);
  background: var(--slab-face);
  box-shadow: var(--card-shadow), var(--slab-sheen);
  overflow: hidden;
}
.stone-card::before {                       /* brass seam along the top edge — a quiet hairline */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold-face);
  opacity: 0.62;
}

.stone-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 10px;
}
.stone-blurb {                              /* the signature italic descriptive voice */
  font-family: var(--font-serif);
  font-weight: 600;                         /* Fraunces variable italic covers 100-900 */
  font-style: italic;
  font-size: 21px;
  line-height: 1.4;
  color: var(--accent-soft);
  margin-bottom: 20px;
}

.stone-props {
  display: block;
  border-top: 1px solid var(--line);
}
.stone-prop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.stone-prop-k {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.stone-prop-v {
  flex: 1 1 auto;
  text-align: right;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.35;
  color: var(--text);
}

/* --- Table view — all stones side by side; the wrapper scrolls, not the page */
.cmp-table-scroll {
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--slab-face);
  box-shadow: var(--card-shadow), var(--slab-sheen);
}
.cmp-table {
  width: 100%;
  min-width: 920px;                          /* keeps columns legible; scrolls
                                                 inside the wrapper below that */
  border-collapse: collapse;
}
.cmp-table th,
.cmp-table td {
  padding: 20px 24px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
}
.cmp-table thead th {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  background: var(--surface-2);
  border-bottom: 1px solid var(--gold-rule-fade);
}
.cmp-table thead th:first-child { border-top-left-radius: var(--radius); }
.cmp-table thead th:last-child { border-top-right-radius: var(--radius); }

.cmp-tgroup td {
  padding: 12px 24px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-soft);
  background: var(--surface-3);
  border-bottom: 1px solid var(--gold-rule-fade);
}

.cmp-trow.is-alt { background: var(--row-alt); }

.cmp-tname {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 21px;
  color: var(--text);
}
.cmp-trow td:not(.cmp-tname) {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  color: var(--muted);
}


/* ============================================================================
   WAREHOUSE — the signature: CRS's real floor plan as an interactive isometric
   (2:1) 3-D wayfinding scene. Directory chips (top) tap-to-locate a stone; the
   scene (middle) is ONE inline SVG — an iso floor, span-sized material zones
   with leaning-slab racks, the A–S back-wall ruler, and a standing YOU ARE HERE
   pin; a gold route draws itself from the pin to the tapped zone; the callout
   (bottom) gives the plain directions. Every SVG shape is styled by class here
   — no var() ever lives inside an SVG presentation attribute.
   ============================================================================ */
.warehouse-map {
  max-width: none;
  margin: 0 auto;
  min-height: 100%;                 /* gives the column a definite height so .wh-scene's
                                        flex-grow has real leftover space to expand into —
                                        without this the scene just sizes to its own content
                                        and the reclaimed space goes unused below the callout */
  padding: 36px 14px 48px;          /* tight, near-edge-to-edge sides — this is a full-bleed
                                        graphic, not a reading measure — reclaiming width for
                                        a much bigger scene; content is top-anchored (default
                                        flex-start, matching every other section in this app —
                                        see .sustainability/.faq, which are top-anchored with
                                        quiet space below rather than centered or stretched) */
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* --- directory of stones --------------------------------------------------- */
.wh-directory { flex: 0 0 auto; }
.wh-directory-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; margin-bottom: 20px;
  min-height: 69px;   /* the row's own border-box height once .wh-reset (54px tall) is
                          showing, plus this rule's own 14px padding-bottom + 1px border —
                          reserving that same total with .wh-reset absent (and hence not
                          itself contributing to the row's content height) keeps the row
                          byte-identical whether or not the button is showing; align-items:
                          center (not baseline) so there's no separate ascent/descent delta */
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.wh-directory-title {
  font-family: var(--font-serif); font-weight: 700; font-style: italic;
  font-size: 31px; color: var(--accent-soft);
}
.wh-reset {
  flex: 0 0 auto; min-height: 54px; padding: 0 24px;
  font-family: var(--font-sans); font-weight: 600; font-size: 18px;
  letter-spacing: 0.05em; color: var(--accent-soft);
  border: 1px solid var(--accent-deep); border-radius: 999px;
  background: var(--btn-face);
}
.wh-reset[hidden] { display: none; }
.wh-reset:active { color: var(--accent-ink); background: var(--gold-face); border-color: var(--accent-soft); }

.wh-chips { display: flex; flex-wrap: wrap; gap: 14px; }
.wh-chip {
  min-height: 66px; padding: 0 26px;
  display: inline-flex; align-items: center;
  font-family: var(--font-sans); font-weight: 600; font-size: 22px;
  letter-spacing: 0.02em; color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--chip-face);
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.wh-chip:active { background: var(--chip-face-lit); }
.wh-chip.is-active {
  color: var(--accent-ink); font-weight: 700;
  background: var(--gold-face); border-color: var(--accent-soft);
  box-shadow: var(--float-shadow);
}

/* nested natural-stone types — a secondary row revealed under Natural Stone.
   Indented under a hairline so it reads as a sub-level of the chosen category. */
.wh-subs {
  margin-top: 16px; padding: 16px 0 2px 18px;
  border-left: 2px solid var(--accent-deep);
}
.wh-subs[hidden] { display: none; }
.wh-subs-label {
  display: block; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.wh-subchips { display: flex; flex-wrap: wrap; gap: 12px; }
.wh-subchip {
  min-height: 56px; padding: 0 22px;
  display: inline-flex; align-items: center;
  font-family: var(--font-sans); font-weight: 600; font-size: 19px;
  letter-spacing: 0.01em; color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--chip-face);
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.wh-subchip:active { background: var(--chip-face-lit); }
.wh-subchip.is-active {
  color: var(--accent-ink); font-weight: 700;
  background: var(--gold-face); border-color: var(--accent-soft);
}

/* --- the isometric scene --------------------------------------------------- */
.wh-scene {
  position: relative;
  flex: 1 1 0;                       /* GROW to consume the column's leftover height — the
                                         building is wide but the panel is tall, so the scene
                                         box fills the vertical length rather than sitting in a
                                         fixed band with a void below (the old max-height cap +
                                         height:auto svg was exactly that void). The svg's tall
                                         viewBox + preserveAspectRatio:meet keep the graphic
                                         letterbox-safe inside whatever height this box takes. */
  min-height: 560px;                 /* never collapse below a legible floor plan */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  padding: 16px 10px;
  background: radial-gradient(122% 92% at 50% 2%, var(--bg-hi) 0%, var(--bg) 52%, var(--bg-lo) 100%);
  box-shadow: var(--card-shadow), var(--brass-frame-soft), inset 0 0 100px -44px var(--shadow-deep);
  overflow: hidden;
  touch-action: none;                /* the scene owns pinch/drag — the page must
                                        not scroll or browser-zoom under a gesture */
}
/* fill the box in BOTH dimensions; meet (via the svg's own preserveAspectRatio)
   scales the tall viewBox to fit without ever overflowing + being clipped. */
.wh-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* --- explore controls: rotate · zoom · reset (always visible) --------------
   A vertical brass rail docked bottom-right of the scene. Absolutely placed
   inside the (position:relative, overflow:hidden) scene so it can't spill the
   panel, and appended AFTER the svg so it paints above the geometry. */
.wh-ctrl-cluster {
  position: absolute; right: 18px; bottom: 18px; z-index: 2;
  display: flex; flex-direction: column; gap: 12px;
}
.wh-ctrl {
  width: 60px; height: 60px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent-deep); border-radius: 50%;
  background: var(--slab-face); box-shadow: var(--card-shadow), var(--slab-sheen);
  color: var(--accent-soft);
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .08s ease;
}
.wh-ctrl:active { color: var(--accent-ink); background: var(--gold-face); border-color: var(--accent-soft); transform: scale(0.94); }
.wh-ctrl--reset { margin-top: 6px; border-color: var(--accent); }
.wh-ctrl-glyph {
  font-family: var(--font-mono); font-size: 30px; font-weight: 400; line-height: 1;
}
.wh-ctrl--zoom-in .wh-ctrl-glyph, .wh-ctrl--zoom-out .wh-ctrl-glyph { font-size: 34px; }
.wh-ctrl-ico { width: 28px; height: 28px; display: block; }
.wh-ctrl-ring { fill: none; stroke: currentColor; stroke-width: 1.7; }
.wh-ctrl-dot  { fill: currentColor; }
.wh-ctrl-tick { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* one-time discovery hint, centred over the scene, fades on first touch */
.wh-gesture-hint {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 1; pointer-events: none; max-width: 78%;
  padding: 11px 22px; border-radius: 999px;
  background: var(--plate-face); border: 1px solid var(--plate-edge);
  font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent-soft); text-align: center;
  box-shadow: var(--card-shadow);
  opacity: 1; transition: opacity .5s ease;
}
.wh-gesture-hint.is-gone { opacity: 0; }

/* floor, drafting grid, hairline gold perimeter + back-wall plane.
   Stroke-widths through this whole block are ~1.5× their pre-plan values: the
   building grew from ~13.5 to ~21.6 user-units across, and the viewBox is fit
   to bounds, so every stroke would otherwise render ~40% thinner. */
.wh-floor       { fill: var(--wh-floor); }
.wh-floor-edge  { fill: none; stroke: var(--floor-edge); stroke-width: 2.2; }
.wh-grid-line   { stroke: var(--grid-line); stroke-width: 1.5; }
.wh-wall-plane  { fill: var(--wall-plane); stroke: var(--wall-line); stroke-width: 1.5; }

/* material zones — muted, color-coded floor quads */
.wh-zone-floor { stroke: var(--zone-edge); stroke-width: 1.9; }
.wh-zone--porcelain .wh-zone-floor { fill: var(--zone-porcelain-face); }
.wh-zone--quartz    .wh-zone-floor { fill: var(--zone-quartz-face); }
.wh-zone--natural   .wh-zone-floor { fill: var(--zone-natural-face); }

/* non-chip areas — Staging, Pins, Future Sink Display */
.wh-area-floor { stroke: var(--zone-edge); stroke-width: 1.9; }
.wh-area--staging .wh-area-floor { fill: var(--zone-staging-face); }
.wh-area--pinsr   .wh-area-floor { fill: var(--zone-pins-face); }
.wh-area--pinsl   .wh-area-floor { fill: var(--zone-pins-face); }
.wh-area--sink    .wh-area-floor { fill: var(--zone-sink-face); }

/* A-frame slab racks — leaning stone slabs, both slopes visible from above */
.wh-slab { stroke: var(--slab-edge); stroke-width: 0.9; stroke-linejoin: round; }
.wh-slab--cream { fill: var(--slab-cream); }
.wh-slab--vein  { fill: var(--slab-vein); }
.wh-slab--sage  { fill: var(--slab-sage); }
.wh-slab--stone { fill: var(--slab-stone); }
.wh-slab--slate { fill: var(--slab-slate); }
.wh-slab--char  { fill: var(--slab-char); }
.wh-rack-slope--dim { filter: brightness(0.52); }   /* the shaded, away-facing slope */
.wh-rack-cap        { filter: brightness(1.08); }   /* the front polished slab face */
.wh-rack-ridge { stroke: var(--ridge); stroke-width: 2; stroke-linecap: round; }

/* the division wall inside Natural Stones (two segments, two openings) */
.wh-divider-face { fill: var(--divider-face); stroke: var(--rack-edge); stroke-width: 1; }
.wh-divider-top  { fill: var(--divider-top);  stroke: var(--rack-edge); stroke-width: 1; }
.wh-divider-end  { fill: var(--divider-end);  stroke: var(--rack-edge); stroke-width: 1; }

/* rooms hanging off the front edge */
.wh-room-floor { fill: var(--room-face); stroke: var(--zone-edge); stroke-width: 1.9; }
.wh-room-wall  { fill: var(--room-wall); stroke: var(--wall-line); stroke-width: 1.5; }

/* single aisle letters (A…R) — one per walkway, along the front edge
   (replaces the old per-rack A/B face pairs) */
.wh-aisle {
  fill: var(--accent); font-family: var(--font-serif); font-weight: 700;
  font-size: 30px; letter-spacing: 0.01em;
  paint-order: stroke; stroke: var(--bg-lo); stroke-width: 5px; stroke-linejoin: round;
}

/* floating gallery placards — serif zone/room name + mono sublabel */
.wh-zone-name {
  fill: var(--accent-soft); font-family: var(--font-serif); font-weight: 700;
  font-size: 23px; paint-order: stroke; stroke: var(--bg-lo); stroke-width: 4px; stroke-linejoin: round;
}
.wh-zone-name--natural { fill: var(--text-hi); font-size: 27px; }
.wh-zone-aisle, .wh-area-aisle {
  fill: var(--muted); font-family: var(--font-mono); font-weight: 400;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  paint-order: stroke; stroke: var(--bg-lo); stroke-width: 3.5px; stroke-linejoin: round;
}
.wh-area-name {
  fill: var(--muted); font-family: var(--font-serif); font-weight: 700; font-style: italic;
  font-size: 18px; paint-order: stroke; stroke: var(--bg-lo); stroke-width: 3.5px; stroke-linejoin: round;
}
.wh-room-name {
  fill: var(--accent-soft); font-family: var(--font-serif); font-weight: 700;
  font-size: 18px; paint-order: stroke; stroke: var(--bg-lo); stroke-width: 3.5px; stroke-linejoin: round;
}

/* YOU ARE HERE pin standing at the kiosk (front edge, column J) */
.wh-here-shadow { fill: var(--ink-70); }
.wh-here-stem   { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.wh-here-head   { fill: var(--accent); stroke: var(--accent-soft); stroke-width: 2; }
.wh-here-dot    { fill: var(--accent-ink); }
.wh-here-ring   {
  fill: none; stroke: var(--pin-ring); stroke-width: 3;
  transform-box: fill-box; transform-origin: center;
  animation: wh-ping 2.4s ease-out infinite;
}
.wh-here-plate-bg { fill: var(--plate-face); stroke: var(--plate-edge); stroke-width: 1.4; }
.you-are-here {
  fill: var(--accent-soft); font-family: var(--font-mono); font-weight: 400;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
}
@keyframes wh-ping { 0% { transform: scale(0.5); opacity: 0.85; } 100% { transform: scale(2.7); opacity: 0; } }

/* the gold wayfinding route (draws itself in) */
.wh-route {
  fill: none; stroke: var(--route-stroke); stroke-width: 6;
  stroke-linecap: round; stroke-linejoin: round;
  filter: var(--route-glow);
  stroke-dasharray: 2600; stroke-dashoffset: 2600;
  transition: stroke-dashoffset 1.05s ease;
}
.wh-route.is-drawn { stroke-dashoffset: 0; }

/* selection: glow the target, dim everything else */
.wh-scene.is-selecting .wh-zone,
.wh-scene.is-selecting .wh-area,
.wh-scene.is-selecting .wh-room,
.wh-scene.is-selecting .wh-plate,
.wh-scene.is-selecting .wh-ruler { opacity: 0.28; transition: opacity .3s ease; }
.wh-scene.is-selecting .wh-zone.is-target,
.wh-scene.is-selecting .wh-zone-plate.is-target { opacity: 1; }
.wh-zone.is-target { filter: drop-shadow(0 0 14px var(--brass-glow)); }
.wh-zone.is-target .wh-zone-floor { stroke: var(--accent-soft); stroke-width: 2.6; }
.wh-zone.is-target .wh-slab { filter: brightness(1.14); }
.wh-zone.is-target .wh-rack-slope--dim .wh-slab { filter: brightness(0.62); }
.wh-zone-plate.is-target .wh-zone-name { fill: var(--accent); }

/* --- default hint + directions callout -------------------------------------
   Both share one reserved-height slot (min-height matched to the taller
   callout) so swapping hint <-> callout never shifts the scene above it or
   changes the section's total height between the default and selected
   states. */
.wh-hint {
  flex: 0 0 auto;
  min-height: 196px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--font-serif); font-style: italic; font-weight: 600;
  font-size: 23px; color: var(--muted);
}
.wh-hint[hidden] { display: none; }

.wh-callout {
  flex: 0 0 auto;
  position: relative; overflow: hidden; box-sizing: border-box;
  min-height: 196px;
  padding: 30px 34px 30px 38px;
  border-radius: var(--radius);
  background: var(--slab-face);
  box-shadow: var(--card-shadow), var(--slab-sheen);
}
.wh-callout[hidden] { display: none; }
.wh-callout::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: 4px; background: var(--gold-face);
}
.wh-callout-material {
  font-family: var(--font-serif); font-weight: 700; font-size: 40px;
  line-height: 1.05; letter-spacing: -0.006em; color: var(--text-hi); margin-bottom: 10px;
}
.wh-callout-zone {
  font-family: var(--font-mono); font-weight: 400; font-size: 17px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-soft); margin-bottom: 16px;
}
.wh-callout-dir {
  font-family: var(--font-sans); font-size: 23px; line-height: 1.5; color: var(--muted);
}


/* ============================================================================
   SUSTAINABILITY — stat plaques + case cards
   ============================================================================ */
.sustainability { max-width: var(--measure); margin: 0 auto; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 42px;
}
.stat {
  position: relative;
  padding: 36px 26px 30px;
  border-radius: var(--radius);
  background: var(--slab-face);
  box-shadow: var(--card-shadow), var(--slab-sheen);
  text-align: center;
  overflow: hidden;
}
.stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold-face);
  opacity: 0.72;
}
.stat-value {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 38px;
  line-height: 1.05;
  color: var(--accent-soft);
  margin-bottom: 14px;
}
.stat-label {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.45;
  color: var(--muted);
}

.case-grid { display: flex; flex-direction: column; gap: 18px; }
.case {
  position: relative;
  padding: 26px 30px 26px 34px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.case::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: var(--gold-face);
}
.case-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 26px;
  color: var(--text);
  margin-bottom: 8px;
}
.case-saving {
  font-family: var(--font-sans);
  font-size: 21px;
  line-height: 1.5;
  color: var(--muted);
}
.case-saving::first-line { color: var(--accent-soft); }

/* ============================================================================
   JOURNEY — horizontal scroll-snap stepper with brass nav controls
   ============================================================================ */
.journey { position: relative; padding-bottom: 46px; }
.journey::after {                           /* wayfinding hint under the track */
  content: "Swipe to follow each step  \203A";
  display: block;
  text-align: center;
  margin-top: 28px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}

.journey-track {
  display: flex;
  gap: 34px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 0 var(--gutter);
  padding: 4px 4px 24px;
}
.journey-track::-webkit-scrollbar { height: 8px; }
.journey-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }

.journey-slide {
  flex: 0 0 82%;
  scroll-snap-align: center;
  background: var(--slab-face);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow), var(--brass-frame-soft);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.journey-slide img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  filter: var(--img-tint);
}
.journey-step-num {
  position: absolute;
  top: 20px;
  left: 28px;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 92px;
  line-height: 0.8;
  color: var(--accent-soft);
  text-shadow: var(--ink-shadow-lg);
  z-index: 2;
}
.journey-step-num::before {
  content: "Step ";
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: var(--eyebrow-shadow);
}
.journey-step-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.006em;
  color: var(--text);
  padding: 30px 36px 0;
}
.journey-step-text {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.55;
  color: var(--muted);
  padding: 14px 36px 36px;
}

.journey-nav {
  position: absolute;
  top: 300px;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  font-size: 46px;
  line-height: 1;
  color: var(--accent-ink);
  background: var(--gold-face);
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  box-shadow: var(--float-shadow);
  z-index: 4;
}
.journey-nav-prev { left: calc(var(--gutter) - 20px); }
.journey-nav-next { right: calc(var(--gutter) - 20px); }
.journey-nav:active { background: var(--accent); }

/* ============================================================================
   SEALING — numbered step cards with brass medallions
   ============================================================================ */
.sealing { max-width: var(--measure); margin: 0 auto; }

.step-list { list-style: none; counter-reset: seal; display: flex; flex-direction: column; gap: 26px; }

.step {
  counter-increment: seal;
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--slab-face);
  box-shadow: var(--card-shadow), var(--brass-frame-soft);
  overflow: hidden;
}
.step img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  filter: var(--img-tint);
}
.step-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 32px;
  color: var(--text);
  padding: 30px 36px 0 120px;
  min-height: 96px;
  display: flex;
  align-items: center;
}
.step-title::before {                       /* brass numbered medallion */
  content: counter(seal);
  position: absolute;
  left: 34px;
  margin-top: 4px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 32px;
  color: var(--accent-ink);
  background: var(--gold-face);
  border-radius: 999px;
  box-shadow: var(--float-shadow);
}
.step-text {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.58;
  color: var(--muted);
  padding: 16px 36px 34px;
}

/* ============================================================================
   SCREENSAVER — idle attract mode. A full-screen black cinematic overlay with a
   Canvas light-field of drifting gold motes, the lit CRS crest, the wordmark,
   and a pulsing "Touch to begin" call-to-action. Built + shown/hidden by
   kiosk.js after SCREENSAVER_MS idle; the first touch dismisses it → fresh Home.
   [hidden]{display:none} because #screensaver sets display:flex (an explicit
   display beats the UA [hidden] rule, exactly like .view / #topbar).
   ============================================================================ */
#screensaver {
  position: fixed;
  inset: 0;
  z-index: 100;                     /* above the topbar (z 5) and everything else */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ss-bg);
  overflow: hidden;
  cursor: none;
  touch-action: none;
}
#screensaver[hidden] { display: none; }

.ss-field {                          /* the Canvas light-field */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.ss-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--gutter);
  pointer-events: none;             /* the whole overlay handles the touch */
}
.ss-crest-wrap {
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: 44px;
}
.ss-crest-halo {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: var(--crest-halo);
  z-index: 0;
  pointer-events: none;
  animation: ssHaloBreath 6s ease-in-out infinite;
}
.ss-crest {
  position: relative;
  z-index: 1;
  display: block;
  height: 224px;
  width: auto;
  filter: var(--crest-glow-lit);
  animation: ssCrestBreath 6s ease-in-out infinite;
}
.ss-wordmark {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 66px;
  line-height: 1.02;
  letter-spacing: 0.006em;
  background: var(--wordmark-fill);
  background-size: 320% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: var(--ink-shadow-lg);
  margin-bottom: 80px;
  animation: homeSheen 6s ease-in-out 1s infinite;
}
.ss-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  animation: ssCtaPulse 2.4s ease-in-out infinite;
}
.ss-cta-main {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: 0.36em;
  text-indent: 0.36em;              /* balance the trailing letter-spacing in the pill */
  text-transform: uppercase;
  color: var(--accent-soft);
  padding: 24px 50px;
  border: 1px solid var(--accent-deep);
  border-radius: 999px;
  background: var(--btn-face);
  box-shadow: var(--float-shadow), var(--brass-frame-soft);
}
.ss-cta-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 26px;
  color: var(--muted);
}
@keyframes ssHaloBreath {
  0%, 100% { opacity: 0.5;  transform: scale(0.94); }
  50%      { opacity: 0.95; transform: scale(1.09); }
}
@keyframes ssCrestBreath {
  0%, 100% { filter: var(--crest-glow-lit); }
  50%      { filter: var(--crest-glow-bloom); }
}
@keyframes ssCtaPulse {
  0%, 100% { opacity: 0.72; transform: scale(0.99); }
  50%      { opacity: 1;    transform: scale(1.03); }
}

/* ============================================================================
   SCROLLBARS + reduced motion
   ============================================================================ */
.view::-webkit-scrollbar { width: 10px; }
.view::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  .wh-here-ring { animation: none !important; opacity: 0; }
  .wh-route { stroke-dashoffset: 0 !important; }   /* route appears, never draws */

  /* HOME: no intro, no sheen, no drift — everything at its resting state. The
     wordmark must fall back to a solid fill or background-clip:text leaves it
     transparent; the crest + halo hold their lit resting look. */
  #view-home .home-hero::before,
  #view-home .home-crest-halo,
  #view-home .home-crest,
  #view-home .home-eyebrow,
  #view-home .home-wordmark,
  #view-home .home-tagline,
  #view-home .tile,
  #view-home .tile img,
  #view-home .home-contact { animation: none !important; }
  #view-home .home-crest { filter: var(--crest-glow-soft); }
  #view-home .home-crest-halo { opacity: 0.6; transform: scale(1); }
  #view-home .home-wordmark {
    background: none;
    color: var(--text-hi);
    -webkit-text-fill-color: var(--text-hi);
  }
  #view-home .tile img { transform: none; }

  /* SCREENSAVER: still, lit resting state (the Canvas draws one static frame). */
  #screensaver .ss-crest-halo,
  #screensaver .ss-crest,
  #screensaver .ss-wordmark,
  #screensaver .ss-cta { animation: none !important; }
  #screensaver .ss-crest { filter: var(--crest-glow-lit); }
  #screensaver .ss-crest-halo { opacity: 0.7; transform: scale(1); }
  #screensaver .ss-cta { opacity: 1; transform: none; }
  #screensaver .ss-wordmark {
    background: none;
    color: var(--text-hi);
    -webkit-text-fill-color: var(--text-hi);
  }
}

/* ============================================================================
   NARROW-SCREEN REFINEMENT — phone-width fallback, single column
   ============================================================================ */
@media (max-width: 820px) {
  :root { --gutter: 22px; --topbar-h: 96px; }

  #topbarTitle { font-size: 30px; padding-top: 20px; }
  #topbarTitle::before { font-size: 11px; letter-spacing: 0.22em; }
  #homeBtn { min-width: 0; font-size: 20px; padding: 0 22px; }

  .home-hero { min-height: 0; padding: 48px var(--gutter) 40px; }
  .home-crest { height: 120px; }
  .home-crest-halo { width: 250px; height: 250px; }
  .home-crest-wrap { margin-bottom: 20px; }
  .home-eyebrow { font-size: 12px; letter-spacing: 0.26em; gap: 12px; margin-bottom: 16px; }
  .home-eyebrow::before, .home-eyebrow::after { width: 28px; }
  .home-wordmark { font-size: 38px; }
  .home-tagline { font-size: 26px; margin-top: 18px; padding-top: 20px; }

  .ss-crest { height: 140px; }
  .ss-crest-halo { width: 300px; height: 300px; }
  .ss-crest-wrap { margin-bottom: 30px; }
  .ss-wordmark { font-size: 40px; margin-bottom: 52px; }
  .ss-cta-main { font-size: 22px; letter-spacing: 0.28em; text-indent: 0.28em; padding: 18px 34px; }
  .ss-cta-sub { font-size: 20px; }

  .tile-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; gap: 18px; }
  .tile-label { font-size: 30px; }
  .tile::before { font-size: 22px; }
  .home-contact-phone { font-size: 24px; }
  .home-contact-hours, .home-contact-address { font-size: 16px; }
  .home-contact-hours::before, .home-contact-address::before { display: none; }

  .faq, .sustainability, .sealing, .comparison, .warehouse-map, .journey {
    padding: 32px var(--gutter) 72px;
  }
  .faq-category { font-size: 26px; }
  .faq-category::before { width: 40px; height: 40px; font-size: 19px; }
  .faq-q { font-size: 22px; }
  .faq-a { font-size: 18px; padding-right: 54px; }

  .cmp-cards { grid-template-columns: 1fr; }
  .cmp-group-title { font-size: 27px; }
  .stone-name { font-size: 27px; }
  .cmp-toggle-btn { min-height: 46px; font-size: 13px; padding: 0 22px; }
  .cmp-table { min-width: 720px; }
  .cmp-table th, .cmp-table td { padding: 14px 16px; }
  .cmp-tname { font-size: 18px; }
  .cmp-trow td:not(.cmp-tname) { font-size: 16px; }

  .wh-directory-title { font-size: 22px; }
  .wh-reset { font-size: 15px; min-height: 44px; padding: 0 16px; }
  .wh-chip { min-height: 54px; font-size: 18px; padding: 0 18px; }
  .wh-scene { padding: 12px 8px; }
  .wh-ctrl-cluster { right: 12px; bottom: 12px; gap: 10px; }
  .wh-ctrl { width: 56px; height: 56px; }
  .wh-gesture-hint { font-size: 14px; padding: 9px 16px; bottom: 14px; }
  .wh-callout-material { font-size: 28px; }
  .wh-callout-dir { font-size: 19px; }
  .wh-hint { font-size: 19px; }

  .stat-grid { grid-template-columns: 1fr; }
  .stat-value { font-size: 34px; }

  .journey-slide { flex-basis: 88%; }
  .journey-slide img { height: 360px; }
  .journey-step-num { font-size: 68px; }
  .journey-step-title { font-size: 28px; }
  .journey-nav { top: 190px; width: 60px; height: 60px; font-size: 36px; }

  .step img { height: 260px; }
  .step-title { font-size: 25px; padding-left: 96px; }
}