/* ============================================================================
   CORNWALL GRAVEL - COMPONENTS
   Feature-level components. Depends on the tokens in site.css.
   ============================================================================ */

/* ============================================================================
   .on-dark  -  a dark panel sitting inside a light section
   Anything with a light-surface default has to be re-stated here, exactly as
   it is for .hero / .section--deep / .site-footer in site.css. Use this class
   instead of inline background styles, or ghost buttons end up dark-on-dark.
   ============================================================================ */

.on-dark {
  background: var(--deep);
  border-color: var(--deep-3);
  color: var(--on-deep);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5 { color: var(--on-deep); }
.on-dark p, .on-dark li, .on-dark .muted, .on-dark .lede { color: var(--on-deep-2); }
.on-dark strong { color: var(--on-deep); }
.on-dark .eyebrow { color: var(--rust-air); }
.on-dark a:not(.btn):not(.card--link) { color: var(--blueprint-air); }
.on-dark .btn--ghost { color: var(--on-deep); border-color: var(--deep-3); }
.on-dark .btn--ghost:hover {
  border-color: var(--on-deep-2); background: rgba(246,244,240,.07); color: var(--on-deep);
}
.on-dark :focus-visible { outline-color: var(--amber); }
.on-dark .calc__row { border-bottom-color: var(--deep-3); }
.on-dark .field__hint { color: var(--on-deep-2); }
.on-dark .pill { background: var(--deep-2); border-color: var(--deep-3); color: var(--on-deep-2); }

/* ============================================================================
   HERO
   ============================================================================ */

.hero {
  position: relative;
  background: var(--deep);
  color: var(--on-deep);
  padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 6rem));
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero h1, .hero h2 { color: var(--on-deep); }

/* Strata: layered rock-seam bands drawn in CSS, parallaxed on scroll.
   Seams are limestone, rust and gold - the brand read as geology. */
.hero__strata {
  position: absolute; inset: -12% -5% -5% -5%; z-index: -2;
  opacity: .62;
  background:
    linear-gradient(178deg, transparent 0 38%, rgba(201,192,178,.06)  38% 47%, transparent 47%),
    linear-gradient(176deg, transparent 0 55%, rgba(208,80,0,.085)    55% 63%, transparent 63%),
    linear-gradient(181deg, transparent 0 71%, rgba(247,204,24,.055)  71% 79%, transparent 79%);
}

/* Horizon: a single gold rule raking across the hero, like the light line
   along the top of a working face. One hairline, so it costs no contrast. */
/* Vignette: pulls the corners down so the centre reads as lit. This is the
   single biggest contributor to the "cinematic" feel and it only ever makes
   the ground DARKER, so it can never cost text contrast. */
.hero__vignette {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 92% 78% at 38% 42%, transparent 42%, rgba(6,8,10,.55) 100%),
    linear-gradient(to bottom, rgba(6,8,10,.35) 0%, transparent 26%, transparent 68%, rgba(6,8,10,.5) 100%);
}
.hero__grid {
  position: absolute; inset: 0; z-index: -2; opacity: .5;
  background-image:
    linear-gradient(to right, rgba(246,244,240,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(246,244,240,.05) 1px, transparent 1px);
  background-size: clamp(48px, 7vw, 88px) clamp(48px, 7vw, 88px);
  -webkit-mask-image: radial-gradient(ellipse 130% 90% at 22% 8%, #000 12%, transparent 74%);
          mask-image: radial-gradient(ellipse 130% 90% at 22% 8%, #000 12%, transparent 74%);
}
/* Two light sources, both brand. The rust bloom sits top-right and the gold
   bloom bottom-left, so the headline column runs through the darkest part of
   the frame - the drama is in the corners, never behind the copy. */
.hero__glow {
  position: absolute; z-index: -2;
  width: 66vw; height: 66vw; max-width: 980px; max-height: 980px;
  right: -16vw; top: -24vw;
  background: radial-gradient(circle,
    rgba(208,80,0,.34) 0%, rgba(184,68,0,.16) 38%, transparent 68%);
  pointer-events: none;
}
.hero__glow--amber {
  right: auto; left: -20vw; top: auto; bottom: -32vw;
  width: 54vw; height: 54vw;
  background: radial-gradient(circle,
    rgba(247,204,24,.17) 0%, rgba(247,204,24,.05) 40%, transparent 70%);
}

.hero__inner { position: relative; z-index: 1; }

.hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
@media (max-width: 1000px) { .hero__layout { grid-template-columns: minmax(0, 1fr); align-items: start; } }

.hero__title {
  font-family: var(--font-display);
  /* The min() arm is a narrow-phone guard: it caps the clamp's 52px floor
     below about 430px so a long forced line can never out-grow the column. */
  font-size: min(clamp(3.25rem, 8.4vw, 7.25rem), calc(13.4vw - 6px));
  font-weight: 800;
  font-stretch: 86%;
  line-height: .88;
  letter-spacing: -.038em;
  margin: 0 0 var(--s-5);
  color: var(--on-deep);
}

.hero__title em {
  font-style: normal;
  color: var(--amber);
}
.hero__lede {
  font-size: var(--t-lg); line-height: 1.5; color: var(--on-deep-2);
  max-width: 54ch; margin-bottom: var(--s-6);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* Right-hand credential rail */
.hero__rail {
  border-left: 1px solid var(--deep-3);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  display: grid; gap: var(--s-5);
}
@media (max-width: 1000px) {
  .hero__rail { border-left: 0; border-top: 1px solid var(--deep-3); padding-left: 0; padding-top: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
.rail-item__num {
  font-family: var(--font-display); font-weight: 800; font-stretch: 88%;
  font-size: var(--t-2xl); line-height: 1; letter-spacing: -.03em;
  color: var(--on-deep); display: block; font-variant-numeric: tabular-nums;
}
.rail-item__label {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--on-deep-2);
  margin-top: var(--s-2); display: block; line-height: 1.5;
}

/* Compact page hero for interior pages */
.hero--page { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.hero--page .hero__title { font-size: var(--t-3xl); }
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  list-style: none; margin: 0 0 var(--s-5); padding: 0;
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase;
}
.breadcrumb li { margin: 0; color: var(--on-deep-2); }
.breadcrumb a { color: var(--on-deep-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--amber); }
.breadcrumb li + li::before { content: '/'; margin-right: var(--s-2); color: var(--deep-3); }

/* ============================================================================
   PROOF STRIP - static credential band under the hero

   This replaced a scrolling marquee. Two things went wrong with the marquee
   and both were structural, not tuning: a seamless loop needs the list
   duplicated, so the page literally showed every credential twice, and the
   sideways travel read as a horizontal scrollbar rather than as motion.
   Under prefers-reduced-motion it became an actual scrollbar.
   This holds still, states each credential once, and reflows onto full rows
   instead of overflowing - so there is nothing to scroll at any width.
   ============================================================================ */

.proofstrip {
  border-block: 1px solid var(--rule);
  background: var(--canvas-sunk); padding-block: var(--s-4);
}
/* Six credentials never fit one line at any width we support, and letting
   flex wrap them freely lands on a lopsided 4/2, 3/2/1 or 1/1/2/1/1 that
   reads as a line that ran out of room rather than a designed block. So the
   split is pinned by grid at every size: three columns on desktop, two in
   the tablet band, one centred column on phones. Every row is full.
   960px is the floor for three columns and 621px the floor for two - below
   each, the longest item ("OPSS Specification Aggregate", 253px) stops
   fitting its share of the content box and wraps inside its own cell. */
.proofstrip__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center; align-items: center;
  gap: var(--s-4) var(--s-5);
  max-width: 62rem; margin: 0 auto; padding: 0; list-style: none;
}
@media (max-width: 959px) {
  .proofstrip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .proofstrip__list { grid-template-columns: 1fr; gap: var(--s-2); }
}
.proofstrip__item {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  margin: 0;  /* base li carries a bottom margin; grid gap owns spacing here */
}
/* Decorative marker only - rust is graphics-grade contrast, never text. */
.proofstrip__item::before {
  content: ''; flex: none; width: 6px; height: 6px;
  background: var(--rust); transform: rotate(45deg);
}
@media (max-width: 620px) {
  .proofstrip { padding-block: var(--s-3); }
  .proofstrip__item { letter-spacing: .06em; }
}

/* ============================================================================
   TIMELINE - the 1949 heritage story
   ============================================================================ */

.timeline { position: relative; display: grid; gap: 0; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--rule-strong);
}
.section--deep .timeline::before { background: var(--deep-3); }
.tl-item { position: relative; padding-left: calc(var(--s-7) + var(--s-2)); padding-bottom: var(--s-7); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--canvas); border: 3px solid var(--rust);
}
.section--deep .tl-item::before { background: var(--deep); border-color: var(--amber); }
.tl-item__year {
  font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .12em; color: var(--amber-deep); display: block; margin-bottom: var(--s-2);
}
.section--deep .tl-item__year { color: var(--amber); }
.tl-item h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.tl-item p { color: var(--ink-2); font-size: var(--t-base); }
.section--deep .tl-item p { color: var(--on-deep-2); }

/* ============================================================================
   AGGREGATE CALCULATOR
   ============================================================================ */

.calc {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 0; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--card);
}
@media (max-width: 900px) { .calc { grid-template-columns: minmax(0, 1fr); } }

.calc__form { padding: clamp(1.5rem, 3vw, 2.5rem); }
.calc__out {
  background: var(--deep); color: var(--on-deep);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: var(--s-5);
}
.calc__out h3 { color: var(--on-deep); font-size: var(--t-lg); margin: 0; }

.calc__dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 520px) { .calc__dims { grid-template-columns: minmax(0, 1fr); } }

.calc__result {
  border-top: 2px solid var(--amber); padding-top: var(--s-4);
}
.calc__value {
  font-family: var(--font-display); font-weight: 800; font-stretch: 88%;
  font-size: var(--t-3xl); line-height: 1; letter-spacing: -.035em;
  color: var(--on-deep); font-variant-numeric: tabular-nums;
  display: block;
}
.calc__value small {
  font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .1em; color: var(--amber); margin-left: var(--s-2);
  text-transform: uppercase;
}
.calc__unit-label {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--on-deep-2);
  display: block; margin-bottom: var(--s-2);
}
.calc__breakdown { display: grid; gap: var(--s-3); font-size: var(--t-sm); }
.calc__row {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--deep-3);
  color: var(--on-deep-2);
}
.calc__row strong { color: var(--on-deep); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.calc__note {
  font-size: var(--t-sm); color: var(--on-deep-2); line-height: 1.55;
  padding: var(--s-4); background: rgba(246,244,240,.06);
  border-left: 2px solid var(--amber); border-radius: 0 var(--radius) var(--radius) 0;
}
.calc__foot { margin-top: auto; display: grid; gap: var(--s-3); }

/* Unit toggle */
.unit-toggle {
  display: inline-flex; border: 1px solid var(--rule-strong);
  border-radius: var(--radius); overflow: hidden; background: var(--canvas-sunk);
}
.unit-toggle button {
  min-height: 44px; padding: 0 var(--s-5);
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  background: transparent; border: 0; cursor: pointer; color: var(--ink-3);
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.unit-toggle button[aria-pressed="true"] { background: var(--rust-strong); color: #fff; }

/* ============================================================================
   QUARRY MAP
   ============================================================================ */

.map-layout {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--s-6); align-items: start;
}
@media (max-width: 1000px) { .map-layout { grid-template-columns: minmax(0, 1fr); } }

.map-frame {
  position: relative; background: var(--deep); border: 1px solid var(--deep-3);
  border-radius: var(--radius-lg); overflow: hidden;
  padding: var(--s-4);
}
.map-frame svg { width: 100%; height: auto; display: block; touch-action: manipulation; }

.map-legend {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  padding: var(--s-4) var(--s-2) 0; border-top: 1px solid var(--deep-3);
  margin-top: var(--s-4);
}
.map-legend__item {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--on-deep-2);
}
.map-legend__swatch { width: 12px; height: 12px; border-radius: 50%; flex: none; }

/* Map pins */
.pin { cursor: pointer; }
.pin__hit { fill: transparent; }
.pin__dot {
  fill: var(--amber); stroke: var(--deep); stroke-width: 2;
  transition: r 200ms var(--ease-out), fill 200ms var(--ease-out);
}
.pin__ring {
  fill: none; stroke: var(--amber); stroke-width: 1.5; opacity: 0;
  transition: opacity 200ms var(--ease-out), r 200ms var(--ease-out);
}
.pin__label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: .06em; fill: #AEB8C0; text-transform: uppercase;
  pointer-events: none; transition: fill 200ms var(--ease-out);
}
.pin:hover .pin__dot, .pin:focus-visible .pin__dot { r: 9; }
.pin:hover .pin__ring, .pin:focus-visible .pin__ring { opacity: .8; r: 15; }
.pin:hover .pin__label, .pin:focus-visible .pin__label { fill: #F2F0EC; }
.pin[data-active="true"] .pin__dot { fill: #fff; r: 9; }
.pin[data-active="true"] .pin__ring { opacity: 1; r: 16; stroke: #fff; }
.pin[data-active="true"] .pin__label { fill: #fff; }
.pin[data-dim="true"] { opacity: .22; }
.pin:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.map-river { fill: none; stroke: #1E4A63; stroke-width: 3; opacity: .75; }
.map-land   { fill: #1B2126; stroke: #2A3138; stroke-width: 1; }
.map-road   { fill: none; stroke: #2F383F; stroke-width: 1.5; stroke-dasharray: 5 4; }
.map-city   { fill: #5E6A75; }
.map-city-label {
  font-family: var(--font-body); font-size: 9.5px; font-weight: 500;
  fill: #7A8792; letter-spacing: .02em;
}

/* Quarry list */
.quarry-list { display: grid; gap: var(--s-3); max-height: 640px; overflow-y: auto; padding-right: var(--s-2); }
.quarry-card {
  display: grid; gap: var(--s-2); width: 100%; text-align: left;
  padding: var(--s-4) var(--s-5);
  background: var(--card); border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--radius); cursor: pointer;
  font: inherit; color: inherit;
  transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.quarry-card:hover { border-left-color: var(--amber); background: var(--card); transform: translateX(2px); }
.quarry-card[aria-pressed="true"] {
  border-color: var(--rust); border-left-color: var(--amber);
  border-left-width: 3px; background: rgba(18,69,107,.05);
}
.quarry-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.quarry-card__name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); letter-spacing: -.015em; }
.quarry-card__muni { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.quarry-card__mats { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.quarry-card__mats .pill { font-size: 0.6875rem; padding: 3px var(--s-3); }
.quarry-card__meta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .04em; }

/* Filter bar */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.filter-bar__label {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
  margin-right: var(--s-2);
}
.chip {
  min-height: 40px; padding: 0 var(--s-4);
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-body); font-size: var(--t-sm); font-weight: 500;
  background: var(--card); color: var(--ink-2);
  border: 1px solid var(--rule-strong); border-radius: 100px;
  cursor: pointer; white-space: nowrap;
  transition: all var(--d-fast) var(--ease-out);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--rust-strong); border-color: var(--rust-strong); color: #fff; font-weight: 600;
}

/* ============================================================================
   QUOTE STEPPER
   ============================================================================ */

.stepper { display: grid; gap: var(--s-6); }
.stepper__rail {
  display: flex; align-items: flex-start; gap: 0; list-style: none; margin: 0; padding: 0;
  counter-reset: step;
}
.stepper__rail li {
  flex: 1; margin: 0; position: relative;
  padding-top: var(--s-7);
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  text-align: center;
}
.stepper__rail li::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--canvas); border: 2px solid var(--rule-strong);
  color: var(--ink-3); font-size: var(--t-sm);
  transition: all var(--d-base) var(--ease-out);
}
.stepper__rail li::after {
  content: ''; position: absolute; top: 17px; left: 50%; width: 100%; height: 2px;
  background: var(--rule-strong); z-index: -1;
}
.stepper__rail li:last-child::after { display: none; }
.stepper__rail li[data-state="active"] { color: var(--rust-deep); }
.stepper__rail li[data-state="active"]::before { border-color: var(--rust-strong); background: var(--rust-strong); color: #fff; }
.stepper__rail li[data-state="done"] { color: var(--ink-2); }
.stepper__rail li[data-state="done"]::before { border-color: var(--success); background: var(--success); color: #fff; }
.stepper__rail li[data-state="done"]::after { background: var(--success); }
@media (max-width: 620px) {
  .stepper__rail li { font-size: 0; padding-top: var(--s-6); }
  .stepper__rail li::before { width: 30px; height: 30px; }
}

.step-panel { display: none; }
.step-panel[data-active="true"] { display: block; }
.step-panel h3 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.step-panel > p.lede { margin-bottom: var(--s-6); font-size: var(--t-md); }

.step-nav {
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule);
}
.step-nav__spacer { flex: 1; }

/* Review summary */
.review-list { display: grid; gap: 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.review-row {
  display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  gap: var(--s-4); padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule); background: var(--card);
}
.review-row:last-child { border-bottom: 0; }
.review-row dt {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.review-row dd { margin: 0; font-weight: 500; }
@media (max-width: 560px) { .review-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); } }

/* Form-level status message */
.form-status {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-radius: var(--radius);
  font-size: var(--t-base); font-weight: 500; margin-bottom: var(--s-5);
}
.form-status:empty { display: none; }
.form-status svg { flex: none; margin-top: 3px; }
.form-status[data-tone="error"] { background: rgba(179,38,30,.09); color: #8A1D16; border-left: 3px solid var(--danger); }
.form-status[data-tone="success"] { background: rgba(27,107,58,.09); color: #14522C; border-left: 3px solid var(--success); }
.form-status ul { margin: var(--s-2) 0 0; padding-left: 1.1em; }
.form-status a { color: inherit; font-weight: 600; }

/* ============================================================================
   JOB BOARD
   ============================================================================ */

.job-list { display: grid; gap: var(--s-4); }
.job {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4);
  align-items: center;
  padding: var(--s-5) var(--s-6);
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  transition: border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
.job:hover { border-color: var(--rust); box-shadow: var(--shadow-1); }
@media (max-width: 700px) { .job { grid-template-columns: minmax(0, 1fr); } }
.job__title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); letter-spacing: -.018em; margin: 0 0 var(--s-3); }
.job__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.job__cta { display: flex; gap: var(--s-3); }

.empty-state {
  padding: var(--s-8) var(--s-5); text-align: center;
  border: 1px dashed var(--rule-strong); border-radius: var(--radius-lg);
  color: var(--ink-3);
}
.empty-state h3 { color: var(--ink-2); font-size: var(--t-lg); }

/* ============================================================================
   ACCORDION
   ============================================================================ */

.accordion { border-top: 1px solid var(--rule); }
.acc-item { border-bottom: 1px solid var(--rule); }
.acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 68px; padding: var(--s-4) 0;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600;
  letter-spacing: -.015em; color: var(--ink); text-align: left;
}
.acc-trigger:hover { color: var(--rust-deep); }
.acc-icon { flex: none; width: 20px; height: 20px; position: relative; }
.acc-icon::before, .acc-icon::after {
  content: ''; position: absolute; background: currentColor;
  transition: transform var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out);
}
.acc-icon::before { inset: 9px 0 9px 0; height: 2px; }
.acc-icon::after  { inset: 0 9px 0 9px; width: 2px; }
.acc-trigger[aria-expanded="true"] .acc-icon::after { transform: rotate(90deg); opacity: 0; }
.acc-panel { overflow: hidden; }
.acc-panel[hidden] { display: none; }
.acc-panel__inner { padding: 0 0 var(--s-6); color: var(--ink-2); max-width: var(--measure); }

/* ============================================================================
   SPEC SHEET - aggregate product rows
   ============================================================================ */

.spec-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-5);
  align-items: center; padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 760px) { .spec-item { grid-template-columns: auto minmax(0, 1fr); } .spec-item__cta { grid-column: 2; justify-self: start; } }
.spec-item__swatch {
  position: relative;
  width: 112px; height: 88px; flex: none;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--rule-strong);
  background: var(--canvas-sunk);
}
.spec-item__tex { width: 100%; height: 100%; display: block; background: none; object-fit: cover; }
.spec-item__size {
  position: absolute; left: 0; bottom: 0;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .06em; color: #fff;
  background: rgba(20,24,28,.92); padding: 2px 6px;
  border-top-right-radius: var(--radius);
}
.spec-item__grade {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3); margin: var(--s-2) 0 0;
}
.spec-item__code {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .11em; color: var(--amber-deep); text-transform: uppercase;
  display: block; margin-bottom: var(--s-1);
}
.spec-item__name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); letter-spacing: -.015em; margin: 0 0 var(--s-1); }
.spec-item__desc { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }

/* ============================================================================
   LEADERSHIP
   ============================================================================ */

.person { display: grid; gap: var(--s-4); }
.person__portrait {
  /* Source headshots are 500x600. Capped so a full-width single-column card
     on a phone cannot stretch them past their own resolution. */
  max-width: 264px;
  aspect-ratio: 5 / 6; width: 100%; border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--deep-2), var(--deep));
  border: 1px solid var(--rule); overflow: hidden;
  display: grid; place-items: center; position: relative;
}
.person__initials {
  font-family: var(--font-display); font-weight: 800; font-stretch: 88%;
  font-size: clamp(2.5rem, 5vw, 3.75rem); color: rgba(247,204,24,.82);
  letter-spacing: -.04em;
}
.person__body { min-width: 0; }
.person__name {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg);
  letter-spacing: -.02em; margin: 0 0 var(--s-1); text-wrap: balance;
}
.person__post {
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; color: var(--ink-3); white-space: nowrap;
}
.person__gen {
  font-size: var(--t-sm); color: var(--ink-3); margin: var(--s-2) 0 0;
}
.person__role {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); margin: 0;
}

/* ============================================================================
   CALLOUT / CTA BAND
   ============================================================================ */

.cta-band {
  background: var(--rust-strong); color: #fff;
  padding-block: clamp(3rem, 6vw, 5rem);
  position: relative; overflow: hidden;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.86); }
.cta-band::after {
  content: ''; position: absolute; right: -8%; top: -60%;
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  background: radial-gradient(circle, rgba(247,204,24,.22) 0%, transparent 64%);
  pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: center; justify-content: space-between; }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.cta-band .btn--ghost:hover { background: rgba(246,244,240,.13); border-color: #fff; color: #fff; }
.cta-band :focus-visible { outline-color: var(--amber); }

/* ============================================================================
   COMPARE PAGE
   ============================================================================ */

.compare-shell {
  position: relative; border: 1px solid var(--rule-strong); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--deep);
  aspect-ratio: 16 / 10;
}
@media (max-width: 700px) { .compare-shell { aspect-ratio: 3 / 4; } }
.compare-pane { position: absolute; inset: 0; overflow: hidden; }
.compare-pane iframe, .compare-pane img { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; object-position: top center; }
.compare-pane--after { clip-path: inset(0 0 0 var(--split, 50%)); }
.compare-handle {
  position: absolute; top: 0; bottom: 0; left: var(--split, 50%);
  width: 4px; background: var(--amber); transform: translateX(-50%);
  cursor: ew-resize; z-index: 5;
}
.compare-handle::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.compare-range {
  position: absolute; inset: auto 0 0 0; z-index: 6; width: 100%;
  opacity: 0; height: 56px; cursor: ew-resize; margin: 0;
}
.compare-range:focus-visible + .compare-handle { outline: 3px solid #fff; outline-offset: 3px; }
.compare-tag {
  position: absolute; top: var(--s-4); z-index: 4;
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: var(--s-2) var(--s-4); border-radius: 100px;
  background: rgba(20,24,28,.82); color: #fff; backdrop-filter: blur(6px);
}
.compare-tag--before { left: var(--s-4); }
.compare-tag--after { right: var(--s-4); background: var(--amber); color: #1A1204; }

.audit-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4) var(--s-5);
  padding: var(--s-5) 0; border-bottom: 1px solid var(--rule);
  align-items: start;
}
.audit-item__icon {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgba(179,38,30,.1); color: var(--danger);
}
.audit-item__icon--fixed { background: rgba(27,107,58,.1); color: var(--success); }
.audit-item h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.audit-item p { font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--s-2); }
.audit-item code {
  font-family: var(--font-mono); font-size: 0.8125rem;
  background: var(--canvas-sunk); padding: 2px 6px; border-radius: 2px;
  color: var(--ink); word-break: break-word;
}
/* That chip is for inline code inside prose. Inside a dark <pre> block it
   paints a light box behind every line, so strip it back to plain text. */
.audit-item pre code {
  background: none; padding: 0; border-radius: 0;
  color: inherit; font-size: inherit;
}

/* ============================================================================
   MISC
   ============================================================================ */

.note-band {
  background: rgba(247,204,24,.11); border-left: 3px solid var(--amber);
  padding: var(--s-5) var(--s-6); border-radius: 0 var(--radius) var(--radius) 0;
}
.note-band p { color: var(--ink-2); font-size: var(--t-base); }
.note-band strong { color: var(--ink); }

.icon-tile {
  width: 52px; height: 52px; border-radius: var(--radius);
  display: grid; place-items: center; flex: none;
  background: var(--rust-tint); color: var(--rust-deep);
}
.section--deep .icon-tile { background: rgba(255,138,71,.14); color: var(--rust-air); }

.split-media {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 900px) { .split-media { grid-template-columns: minmax(0, 1fr); } }
.split-media--flip > *:first-child { order: 2; }
@media (max-width: 900px) { .split-media--flip > *:first-child { order: 0; } }

.figure-frame {
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--canvas-sunk); position: relative;
}
.figure-frame img { width: 100%; display: block; }
.figure-frame figcaption {
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .06em;
  color: var(--ink-3); border-top: 1px solid var(--rule); background: var(--card);
}

/* ============================================================================
   SMALL-SCREEN CORRECTIONS
   Everything below was found by measuring real layouts at 375px, not guessed.
   ============================================================================ */

/* Long URLs and header names inside <code> must be allowed to break, or a
   single token like /services-products/construction/road-construction/
   sets the min-content width of its whole grid track. */
code, .spec, pre {
  overflow-wrap: anywhere;
  word-break: break-word;
}
pre { max-width: 100%; overflow-x: auto; }
pre code { word-break: normal; }

/* Breadcrumb links are 15px tall as bare text - give them a real hit area */
.breadcrumb a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 2px;
}
.breadcrumb li + li::before { align-self: center; }

/* Filter chips: 40px is under the 44px minimum */
.chip { min-height: 44px; }

/* The compaction checkbox is a 13px native control - enlarge it and give the
   whole label a 44px target. */
.calc__form .choice input[type="checkbox"] {
  width: 22px; height: 22px; accent-color: var(--blueprint);
  flex: none; cursor: pointer;
}
.calc__form .choice {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 44px; cursor: pointer; font-size: var(--t-base);
}

/* Map pins scale down with the SVG. At 375px the viewBox renders at ~0.42,
   so a 22-unit hit radius became ~18px on screen. 30 units clears the WCAG
   2.5.8 minimum, and the quarry list beside the map is the full-size
   equivalent control for anyone who cannot hit them. */
.pin__hit { r: 30; }

@media (max-width: 620px) {
  /* Nav row at 375px is brand + CTA + toggle and does not fit. The CTA lives
     in the drawer, so drop it from the bar and keep brand + toggle. */
  .nav-actions .btn { display: none; }
  .brand__name { font-size: 0.9375rem; }
  .brand__sub  { font-size: 0.625rem; letter-spacing: 0.14em; }
  /* The mark is 380x177 - a fixed square box squashed it. Height only. */
  .brand__mark { width: auto; height: 38px; }
  .site-nav .wrap { gap: var(--s-3); }

  /* Stepper rail: hide the words, keep the numbered circles */
  .stepper__rail li { min-width: 0; }

  /* Section eyebrow rules can push a line over the edge */
  .eyebrow { flex-wrap: wrap; }
}

/* Horizontal reveals translate 26px sideways before they fire. Off-screen
   that pushes past the viewport edge and would produce a horizontal
   scrollbar were it not for overflow-x on the body. On narrow screens,
   reveal upward instead - the motion reads the same and never overflows. */
@media (max-width: 700px) {
  .js-motion [data-reveal="left"],
  .js-motion [data-reveal="right"] { transform: translateY(24px); }
}

/* ============================================================================
   COMMUNITY & SPONSORSHIP
   Built to take real logos: drop them into assets/img/sponsors/ and replace
   the placeholder .sponsor__logo mark with an <img>.
   ============================================================================ */

.sponsor {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4); align-items: start;
  padding: var(--s-5) 0; border-bottom: 1px solid var(--rule);
}
.sponsor__logo {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  color: var(--rust-deep);
}
.section--deep .sponsor__logo, .on-dark .sponsor__logo { color: var(--amber); }
.section--deep .sponsor, .on-dark .sponsor { border-bottom-color: var(--deep-3); }
.sponsor__logo svg { width: 100%; height: 100%; }
.sponsor__name {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-md);
  letter-spacing: -.015em; margin: 0 0 var(--s-2);
}
.sponsor__detail { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }
.section--deep .sponsor__detail, .on-dark .sponsor__detail { color: var(--on-deep-2); }

/* ============================================================================
   ASSOCIATIONS & CERTIFICATIONS
   These are other organisations' trademarks. They are drawn for light
   grounds, so each gets its own white tile - never inverted, recoloured or
   forced to match our palette.
   ============================================================================ */

.assoc-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-4);
  align-items: stretch;
}

.assoc-tile {
  display: grid; place-items: center;
  min-height: 96px; padding: var(--s-4) var(--s-5);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  transition: border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
.assoc-tile img {
  max-width: 100%; max-height: 52px; width: auto; height: auto;
  object-fit: contain; background: none;
  filter: grayscale(1); opacity: .72;
  transition: filter var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out);
}
.assoc-tile:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.assoc-tile:hover img,
.assoc-tile:focus-visible img { filter: grayscale(0); opacity: 1; }

/* On dark sections the tiles stay white - the marks need it */
.section--deep .assoc-tile, .on-dark .assoc-tile { border-color: transparent; }
.section--deep .assoc-tile img, .on-dark .assoc-tile img { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .assoc-tile img { filter: none; opacity: 1; }
}

/* Full cards */
.assoc-card { display: flex; flex-direction: column; gap: var(--s-3); }
.assoc-card__logo {
  display: grid; place-items: center;
  height: 62px; margin-bottom: var(--s-2);
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: var(--s-3);
}
.assoc-card__logo img { max-height: 40px; max-width: 100%; width: auto; object-fit: contain; background: none; }
.assoc-card__logo--text {
  font-family: var(--font-display); font-weight: 800; font-stretch: 88%;
  font-size: var(--t-lg); letter-spacing: -.02em; color: var(--ink-3);
}
.assoc-card h3 { font-size: var(--t-md); margin: 0; }
.assoc-card__full {
  font-family: var(--font-mono); font-size: var(--t-xs); line-height: 1.6;
  letter-spacing: .04em; color: var(--amber-deep); margin: 0 0 var(--s-2);
}
.assoc-card p { font-size: var(--t-sm); }

/* A 112px texture tile plus copy does not fit a 320px content column */
@media (max-width: 560px) {
  .spec-item__swatch { width: 76px; height: 62px; }
  .spec-item { gap: var(--s-4); }
}

/* ---------------------------------------------------------------------------
   AGGREGATE FIELD
   Canvas layer of drifting crushed stone. Sits above the static strata and
   grid, below all content. Purely decorative: aria-hidden, never focusable,
   and pointer-events none so it can never intercept a click on a button.
   --------------------------------------------------------------------------- */
.agg-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  background: none;
}

/* Leadership: five people. A rigid 3-up leaves an orphan pair on the second
   row, so the grid is auto-fit and the cards simply flow - 5 / 3+2 / 2 / 1
   depending on width, with no breakpoint doing anything clever. */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: var(--s-6) var(--s-5);
}
.person__photo { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--deep-2); }
.person__role { line-height: 1.5; }

/* ---------------------------------------------------------------------------
   HERO LOCKUP
   The mark plus the name, so the brand is present the moment the page loads
   rather than only in the 40px nav.

   Sizing note: the supplied mark is a 133x57px raster - the artwork inside a
   200x133 PNG that was saved from a JPEG. It is therefore capped at 132px
   wide, which is the largest it renders without going soft on a 2x display.
   The TYPE carries the scale instead of the bitmap. Supply a vector or a
   large PNG and .hero__mark can grow without any other change.
   --------------------------------------------------------------------------- */
.hero__lockup {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2rem);
  margin: 0 0 var(--s-7);
}
.hero__mark {
  /* The mark is the company's own 380x177 PNG. At the 340px cap it is
     crisp at 1x and acceptable at 2x; the vector would remove that ceiling. */
  width: clamp(168px, 24vw, 340px);
  height: auto;
  flex: none;
  background: none;          /* override the global img placeholder fill */
}
.hero__lockup-type {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hero__lockup-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 88%;
  font-size: clamp(1.375rem, 2.4vw, 2.25rem);
  letter-spacing: -.025em;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--on-deep);
}
.hero__lockup-sub {
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 1vw, 0.9375rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: 6px;
}

/* Group portrait above the leadership cards. Fixed aspect from the real file
   (800x464) so the row below never shifts while it loads. */
.team-photo {
  /* Native file is 800x464. Capped so it is never upscaled past its own
     resolution - beyond this it just goes soft. */
  max-width: 800px;
  margin: 0 auto var(--s-8);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--canvas-sunk);
}
.team-photo img { width: 100%; height: auto; aspect-ratio: 800 / 464; object-fit: cover; display: block; }
.team-photo figcaption {
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  border-top: 1px solid var(--rule); background: var(--card);
}

/* ============================================================================
   STICKY QUOTE BAR
   A persistent conversion rail that appears once the hero has scrolled away.
   Injected by site.js so all eleven pages stay in sync.

   Three rules it must obey:
   - It must never cover the footer's own CTA, or it competes with itself.
     site.js hides it once the footer is in view.
   - It must be dismissible, and stay dismissed for the session.
   - It must not sit on top of content on short screens, so the body gets
     bottom padding to match while it is showing.
   ============================================================================ */

.quote-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(20,24,28,.96);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-top: 2px solid var(--rust);
  transform: translateY(110%);
  transition: transform var(--d-slow) var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.quote-bar[data-show="true"] { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .quote-bar { transition: none; } }

.quote-bar__in {
  display: flex; align-items: center; gap: var(--s-5);
  padding-block: var(--s-3);
}
.quote-bar__copy { flex: 1 1 auto; min-width: 0; }
.quote-bar__lead {
  display: block;
  font-family: var(--font-display); font-weight: 700; font-stretch: 92%;
  font-size: var(--t-md); letter-spacing: -.02em; color: var(--on-deep);
  line-height: 1.15;
}
.quote-bar__sub {
  display: block; margin-top: 3px;
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--amber);
}
.quote-bar__acts { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.quote-bar__close {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--deep-3);
  border-radius: var(--radius); color: var(--on-deep-2); cursor: pointer;
  transition: color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.quote-bar__close:hover { color: var(--on-deep); border-color: var(--on-deep-2); }

@media (max-width: 900px) {
  .quote-bar__copy { display: none; }          /* buttons carry it on phones */
  .quote-bar__acts { flex: 1 1 auto; }
  .quote-bar__acts .btn { flex: 1 1 0; }
}

/* ============================================================================
   THE CHAIN - scroll-told value chain

   The aside is position: sticky, which means the storytelling effect is pure
   CSS and survives with no JavaScript, no GSAP and no rAF. site.js only
   swaps the step number and label as you pass each one; if that never runs,
   the section still reads correctly as a numbered list beside a fixed panel.
   ============================================================================ */

.chain__layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
@media (max-width: 900px) { .chain__layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }

.chain__aside {
  position: sticky;
  top: calc(var(--nav-h) + clamp(1.5rem, 5vh, 4rem));
  display: grid; gap: var(--s-5); justify-items: start;
}
@media (max-width: 900px) { .chain__aside { position: static; } }

.chain__counter { display: flex; align-items: baseline; gap: var(--s-3); }
.chain__counter-num {
  font-family: var(--font-display); font-weight: 800; font-stretch: 84%;
  font-size: clamp(4.5rem, 11vw, 9rem); line-height: .82;
  letter-spacing: -.05em; color: var(--rust-air);
  font-variant-numeric: tabular-nums;
}
.chain__counter-of {
  font-family: var(--font-mono); font-size: var(--t-md); font-weight: 600;
  letter-spacing: .1em; color: var(--on-deep-2);
}
.chain__aside-label {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--amber);
  margin: 0; min-height: 1.4em;
}

.chain__steps { list-style: none; margin: 0; padding: 0; counter-reset: chain; }
.chain__step {
  position: relative;
  margin: 0;
  /* Vertical padding lives on the trigger, not here, so a collapsed card is
     exactly one button tall and five of them stay compact. */
  padding: 0 0 0 clamp(2.5rem, 5vw, 4rem);
  border-left: 1px solid var(--deep-3);
  /* Resting state is dimmed but still comfortably legible - if the JS never
     runs, every heading stays readable rather than half-invisible. */
  color: var(--on-deep-2);
  transition: color var(--d-slow) var(--ease-out), border-color var(--d-slow) var(--ease-out);
}
.chain__step::before {
  content: attr(data-num);
  position: absolute; left: 0; top: var(--s-5);
  transform: translateX(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--deep); border: 1px solid var(--deep-3);
  font-family: var(--font-mono); font-size: .625rem; font-weight: 600;
  letter-spacing: .04em; color: var(--on-deep-2);
  transition: background var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
}

/* The heading IS the button, so the whole row is the hit target and the
   accessible name is the step title. font:inherit keeps the h3 type scale. */
.chain__head { margin: 0; }
.chain__trigger {
  width: 100%; min-height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  margin: 0; padding: var(--s-5) 0;
  background: none; border: 0;
  font: inherit; color: var(--on-deep-2); text-align: left; cursor: pointer;
  transition: color var(--d-base) var(--ease-out);
}
.chain__trigger:hover { color: var(--on-deep); }
.chain__chev {
  flex: none; width: 11px; height: 11px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--d-base) var(--ease-out);
}
.chain__trigger[aria-expanded="true"] .chain__chev {
  transform: rotate(225deg) translateY(-2px);
}

.chain__panel { overflow: hidden; }
.chain__panel[hidden] { display: none; }
.chain__panel-inner { padding-bottom: var(--s-6); }
.chain__step p { color: inherit; }

.chain__step[data-active="true"] { color: var(--on-deep); border-left-color: var(--rust); }
.chain__step[data-active="true"] .chain__trigger { color: var(--on-deep); }
.chain__step[data-active="true"]::before {
  background: var(--rust-strong); border-color: var(--rust-strong); color: #fff;
}

.chain__own {
  margin-top: var(--s-4);
  font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--amber); opacity: .82;
}

/* Phones get shorter labels so the two actions stay on ONE row. At full
   length they wrapped to two rows and the bar ate 112px of a 375px screen. */
.qb-short { display: none; }
@media (max-width: 900px) {
  .qb-full  { display: none; }
  .qb-short { display: inline; }
  .quote-bar__in { gap: var(--s-3); }
  .quote-bar__acts { gap: var(--s-2); }
  .quote-bar__acts .btn { padding-inline: var(--s-3); font-size: var(--t-sm); }
}

/* ---------------------------------------------------------------------------
   SCROLL CUE
   Bottom-left of the homepage hero. The hero is tall on a wide screen, and a
   first-time visitor needs the signal that the page continues. CSS-only; the
   global reduced-motion rule freezes the dot in its rest position.
   --------------------------------------------------------------------------- */
.scroll-cue {
  position: absolute; left: var(--gutter); bottom: clamp(1.25rem, 2.5vw, 2rem);
  z-index: 2;
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: 44px; padding: 0 var(--s-2) 0 0;
  text-decoration: none; color: var(--on-deep-2);
  transition: color var(--d-base) var(--ease-out);
}
.scroll-cue:hover { color: var(--amber); }
.scroll-cue__label {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
}
.scroll-cue__track {
  position: relative; width: 1px; height: 36px;
  background: rgba(246,244,240,.18); overflow: hidden;
}
.scroll-cue__dot {
  position: absolute; left: -1px; top: 0; width: 3px; height: 10px;
  background: var(--amber); border-radius: 2px;
  animation: cue-drop 1.9s cubic-bezier(.65,.05,.36,1) infinite;
}
@keyframes cue-drop {
  0%   { transform: translateY(-12px); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(38px); opacity: 0; }
}
/* Short viewports and phones: the hero is already one screen, cue is noise */
@media (max-height: 700px), (max-width: 700px) { .scroll-cue { display: none; } }


/* ============================================================================
   HERO - SPLIT REDESIGN
   Content on basalt left; the company's own excavator photo full-height on
   the right behind a quarry-cut diagonal edge; the haul road along the base.
   ============================================================================ */

.hero--split { min-height: min(88vh, 940px); display: flex; align-items: center; }
.hero--split .hero__inner { width: 100%; }

/* --- photo panel --------------------------------------------------------- */
.hero-photo {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(46vw, 760px);
  clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
}
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 38%;
  display: block; background: var(--deep-2);
  /* grade it into the basalt: darker, slightly warm */
  filter: brightness(.82) saturate(.94) contrast(1.04);
}
/* melt the cut edge into the hero ground */
.hero-photo::before {
  content: ''; position: absolute; inset: 0;
  /* The img's filter creates a stacking context, and ::before precedes the
     img in paint order - without a z-index the photo paints OVER this scrim
     and every gradient here silently does nothing. */
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(20,24,28,.88) 0%, rgba(20,24,28,.30) 34%, rgba(20,24,28,0) 58%),
    linear-gradient(to top, rgba(20,24,28,.62) 0%, rgba(20,24,28,0) 34%),
    /* top band: the transparent nav renders over the photo's sky and a white
       house. Measured before this band existed: white links hit 1.25:1 on
       the house. The band holds ~.9 alpha through the whole nav height
       (the top ~8%) before fading, which puts the links above 10:1. */
    linear-gradient(to bottom, rgba(20,24,28,.93) 0%, rgba(20,24,28,.88) 8%, rgba(20,24,28,.30) 18%, rgba(20,24,28,0) 30%);
}
/* gold seam along the cut face */
.hero-photo::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0;
  z-index: 2;
  width: 14%;
  background: linear-gradient(to right, transparent calc(100% - 3px), rgba(247,204,24,.55) calc(100% - 3px));
  clip-path: polygon(100% 0, calc(100% - 3px) 0, 0 100%, 3px 100%);
}
.hero-photo__tag {
  position: absolute; z-index: 3; right: var(--s-4); bottom: var(--s-4);
  padding: 6px 12px;
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-deep-2); background: rgba(20,24,28,.82);
  border: 1px solid var(--deep-3); border-radius: var(--radius);
}

/* --- copy column --------------------------------------------------------- */
.hero-copy { max-width: 58ch; position: relative; }
.hero-copy__eyebrow {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber); margin: 0 0 var(--s-5);
  display: flex; align-items: center; gap: var(--s-3);
}
.hero-copy__eyebrow::before { content: ''; width: 30px; height: 2px; background: var(--rust); flex: none; }
.hero-copy__title {
  font-family: var(--font-display);
  font-size: min(clamp(2.75rem, 5.4vw, 5.25rem), calc(11.4vw - 4px));
  font-weight: 800; font-stretch: 86%;
  line-height: .96; letter-spacing: -.034em;
  margin: 0 0 var(--s-5); color: var(--on-deep);
}
.hero-copy__title em { font-style: normal; color: var(--amber); }
.hero-copy__lede {
  font-size: var(--t-lg); line-height: 1.55; color: var(--on-deep-2);
  max-width: 46ch; margin: 0 0 var(--s-6);
}

/* --- proof strip ---------------------------------------------------------- */
.hero-proof {
  display: grid; grid-template-columns: repeat(4, auto);
  justify-content: start; gap: clamp(1.25rem, 3vw, 3rem);
  margin: var(--s-7) 0 0; padding-top: var(--s-5);
  border-top: 1px solid var(--deep-3);
}
.hero-proof dt {
  font-family: var(--font-display); font-weight: 800; font-stretch: 88%;
  font-size: clamp(1.625rem, 2.2vw, 2.25rem); line-height: 1;
  letter-spacing: -.03em; color: var(--on-deep);
  font-variant-numeric: tabular-nums;
}
.hero-proof dd {
  margin: var(--s-2) 0 0;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--on-deep-2); line-height: 1.5;
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1000px) {
  /* Stack: copy first, photo below it, road at the base. The photo sits
     before the copy in the DOM (it back-fills the desktop panel), so flex
     order puts it back underneath on a phone. */
  .hero--split { min-height: 0; display: flex; flex-direction: column; }
  .hero--split .hero__inner { order: 1; }
  .hero-photo {
    order: 2;
    position: relative; inset: auto; width: 100%; height: 300px;
    clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
    margin-top: var(--s-6);
  }
  .hero-photo::after { display: none; }
  .hero-copy { max-width: 60ch; }
}
@media (max-width: 520px) {
  .hero-proof { grid-template-columns: repeat(2, auto); gap: var(--s-5) var(--s-7); }
  .hero-photo { height: 230px; }
}

/* ---------------------------------------------------------------------------
   TEXTURED STONE SECTION
   A concrete-grey band with a fine fractal-noise grain, for sections that
   should read as "poured" rather than paper. The grain is an inline SVG
   turbulence tile - about 300 bytes, no image request, and it tiles
   seamlessly (stitchTiles). Kept at 7% opacity: texture, not noise.
   Base #E2DFD9 keeps a drop of warmth so the cream cards still belong.
   --------------------------------------------------------------------------- */
.section--stone {
  background-color: #E2DFD9;
  /* Two layers: scattered angular stone silhouettes (drawn by the same
     seeded generator idea as the product tiles - 30 polygons, ~3.5 KB
     inline, deterministic) over a whisper of fractal grain for tooth. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cpolygon points='214.4,159.0 205.9,145.2 218.1,132.3 231.5,140.3 241.4,153.1 229.0,166.8' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='84.1,324.5 87.1,319.5 94.2,318.9 97.4,326.1 92.3,331.6 84.7,331.6' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='75.4,119.6 78.4,119.2 82.3,120.3 81.9,124.6 78.6,127.1 75.2,125.4 74.6,122.4' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='394.2,260.7 391.5,269.0 383.3,270.9 381.4,263.1 386.2,258.4' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='312.2,94.2 298.4,92.2 293.8,81.8 291.9,69.9 303.9,68.5 315.2,69.7 313.7,80.8' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='112.3,155.9 110.5,160.4 106.4,159.1 104.1,156.8 105.3,153.4 108.7,153.8' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='51.5,253.1 50.8,260.6 43.3,261.2 38.5,256.3 39.6,249.0 47.0,248.1' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='128.6,40.4 134.6,37.8 137.4,44.7 131.9,47.8 126.6,45.6' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='213.3,217.9 210.6,213.0 215.5,208.6 221.5,211.3 222.8,217.7 217.6,222.0' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='274.8,250.1 269.7,246.2 268.1,240.4 273.0,234.1 281.0,237.8 280.2,245.7' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='105.3,250.7 99.4,253.9 96.6,247.6 97.7,241.1 104.8,240.3 107.9,245.9' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='331.8,314.5 330.2,304.6 341.8,301.8 347.0,312.4 338.8,318.0' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='188.0,80.9 184.0,73.7 185.8,66.2 193.3,66.2 198.4,71.1 195.6,77.7' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='128.5,290.4 123.0,285.9 124.5,279.6 129.0,276.9 133.6,278.2 137.0,282.4 135.2,288.6' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='91.2,240.6 94.1,231.0 103.7,232.8 108.0,239.5 105.6,248.2 94.8,251.1' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='29.0,242.5 27.6,248.4 21.6,246.9 19.9,241.4 25.1,238.4' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='228.8,212.0 215.8,206.5 217.3,193.5 230.3,187.4 240.0,200.8' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='336.8,82.8 331.5,80.5 334.3,74.8 340.8,74.3 340.5,80.3' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='121.9,156.8 123.4,160.7 119.9,162.9 115.9,162.1 115.4,158.0 118.6,156.4' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='308.2,371.6 308.5,364.6 315.6,364.2 319.1,368.9 319.6,376.1 312.3,375.9' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='119.7,233.8 119.3,227.8 122.0,224.6 127.6,222.6 128.7,228.7 125.4,231.9' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='311.0,389.6 313.3,383.9 319.2,381.3 322.4,388.0 317.0,391.8' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='134.3,144.8 134.3,158.6 121.5,161.8 111.7,155.4 110.2,141.7 123.6,137.1' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='249.2,239.6 243.8,242.3 240.0,237.2 244.1,233.8 247.8,234.9' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='209.6,112.8 209.2,119.6 202.0,120.0 197.9,113.5 204.2,108.3' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='155.4,84.0 154.3,88.4 150.7,90.2 146.0,89.8 145.8,85.1 147.6,81.3 152.6,79.6' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='265.6,207.3 267.3,210.6 264.4,213.2 261.1,211.9 261.1,209.0 262.8,207.5' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='167.1,65.9 168.1,60.3 171.3,56.3 178.0,54.8 179.4,61.6 178.1,67.2 172.6,67.1' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='286.7,165.5 293.6,176.8 291.1,187.1 281.7,187.7 269.6,184.4 272.9,170.4' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='318.9,300.8 317.0,291.7 325.9,288.6 336.5,288.1 339.8,299.0 334.6,309.4 324.2,306.6' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 420px 420px, 280px 280px;
}

/* ---------------------------------------------------------------------------
   HERO PHOTO - AMBIENT DRIFT
   A very slow Ken Burns on the excavator: eases between two framings over
   38 s, alternating, so the panel breathes without ever demanding attention.
   Pure CSS - no JavaScript, nothing to stall. The scale floor of 1.03 keeps
   the drift from ever exposing an edge of the frame.
   --------------------------------------------------------------------------- */
.hero-photo img {
  transform-origin: 62% 40%;   /* drift centres on the machine, not the sky */
  animation: photo-drift 20s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes photo-drift {
  from { transform: scale(1.05); }
  to   { transform: scale(1.17) translate(-3%, -2.2%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo img { animation: none; transform: none; }
}

/* ---------------------------------------------------------------------------
   DARK STONE SECTION
   The textured band, inverted: graphite ground, same deterministic gravel
   tile (the pale flecks carry it on dark), light type, cards stay cream so
   they pop hard. Focus outlines go amber here like every dark surface.
   --------------------------------------------------------------------------- */
.section--stone-dark {
  background-color: #32373D;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cpolygon points='214.4,159.0 205.9,145.2 218.1,132.3 231.5,140.3 241.4,153.1 229.0,166.8' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='84.1,324.5 87.1,319.5 94.2,318.9 97.4,326.1 92.3,331.6 84.7,331.6' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='75.4,119.6 78.4,119.2 82.3,120.3 81.9,124.6 78.6,127.1 75.2,125.4 74.6,122.4' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='394.2,260.7 391.5,269.0 383.3,270.9 381.4,263.1 386.2,258.4' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='312.2,94.2 298.4,92.2 293.8,81.8 291.9,69.9 303.9,68.5 315.2,69.7 313.7,80.8' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='112.3,155.9 110.5,160.4 106.4,159.1 104.1,156.8 105.3,153.4 108.7,153.8' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='51.5,253.1 50.8,260.6 43.3,261.2 38.5,256.3 39.6,249.0 47.0,248.1' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='128.6,40.4 134.6,37.8 137.4,44.7 131.9,47.8 126.6,45.6' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='213.3,217.9 210.6,213.0 215.5,208.6 221.5,211.3 222.8,217.7 217.6,222.0' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='274.8,250.1 269.7,246.2 268.1,240.4 273.0,234.1 281.0,237.8 280.2,245.7' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='105.3,250.7 99.4,253.9 96.6,247.6 97.7,241.1 104.8,240.3 107.9,245.9' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='331.8,314.5 330.2,304.6 341.8,301.8 347.0,312.4 338.8,318.0' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='188.0,80.9 184.0,73.7 185.8,66.2 193.3,66.2 198.4,71.1 195.6,77.7' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='128.5,290.4 123.0,285.9 124.5,279.6 129.0,276.9 133.6,278.2 137.0,282.4 135.2,288.6' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='91.2,240.6 94.1,231.0 103.7,232.8 108.0,239.5 105.6,248.2 94.8,251.1' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='29.0,242.5 27.6,248.4 21.6,246.9 19.9,241.4 25.1,238.4' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='228.8,212.0 215.8,206.5 217.3,193.5 230.3,187.4 240.0,200.8' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='336.8,82.8 331.5,80.5 334.3,74.8 340.8,74.3 340.5,80.3' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='121.9,156.8 123.4,160.7 119.9,162.9 115.9,162.1 115.4,158.0 118.6,156.4' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='308.2,371.6 308.5,364.6 315.6,364.2 319.1,368.9 319.6,376.1 312.3,375.9' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='119.7,233.8 119.3,227.8 122.0,224.6 127.6,222.6 128.7,228.7 125.4,231.9' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='311.0,389.6 313.3,383.9 319.2,381.3 322.4,388.0 317.0,391.8' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='134.3,144.8 134.3,158.6 121.5,161.8 111.7,155.4 110.2,141.7 123.6,137.1' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='249.2,239.6 243.8,242.3 240.0,237.2 244.1,233.8 247.8,234.9' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='209.6,112.8 209.2,119.6 202.0,120.0 197.9,113.5 204.2,108.3' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='155.4,84.0 154.3,88.4 150.7,90.2 146.0,89.8 145.8,85.1 147.6,81.3 152.6,79.6' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='265.6,207.3 267.3,210.6 264.4,213.2 261.1,211.9 261.1,209.0 262.8,207.5' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='167.1,65.9 168.1,60.3 171.3,56.3 178.0,54.8 179.4,61.6 178.1,67.2 172.6,67.1' fill='rgba(255,255,255,0.05)'/%3E%3Cpolygon points='286.7,165.5 293.6,176.8 291.1,187.1 281.7,187.7 269.6,184.4 272.9,170.4' fill='rgba(84,80,72,0.045)'/%3E%3Cpolygon points='318.9,300.8 317.0,291.7 325.9,288.6 336.5,288.1 339.8,299.0 334.6,309.4 324.2,306.6' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 420px 420px, 280px 280px;
}
.section--stone-dark h2 { color: var(--on-deep); }
.section--stone-dark .sec-head p, .section--stone-dark > .wrap > p { color: var(--on-deep-2); }
.section--stone-dark .eyebrow { color: var(--amber); }
.section--stone-dark .link-arrow { color: var(--blueprint-air); }
.section--stone-dark :focus-visible { outline-color: var(--amber); }

/* ---------------------------------------------------------------------------
   HERO VIDEO
   The photo brought to life: a 5-second AI-animated loop generated FROM the
   still (the excavator digs, the operator shifts, the trees move). The still
   <img> stays underneath as the loading state, the poster, and the complete
   fallback - reduced-motion users and anything that cannot play video get
   the photograph, never a black box.
   --------------------------------------------------------------------------- */
.hero-photo__video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 38%;
  filter: brightness(.82) saturate(.94) contrast(1.04);   /* match the still */
}
/* keep the grade + seam + tag above the video */
.hero-photo::before { z-index: 2; }
.hero-photo::after  { z-index: 3; }
.hero-photo__tag    { z-index: 4; }
/* the video replaces the drift; the still keeps drifting only when the
   video is hidden */
.hero-photo:has(.hero-photo__video) img { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-photo__video { display: none; }
}

/* ---------------------------------------------------------------------------
   RANDOMIZED GRAVEL (overrides the single-tile version above)
   Two independently seeded stone tiles at coprime sizes (860px and 620px)
   layered over the noise grain. Their combined repeat period is over
   26,000px, so the eye never catches the pattern recurring - the single
   420px tile visibly repeated across a wide section.
   --------------------------------------------------------------------------- */
.section--stone-dark {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='860' height='860'%3E%3Cpolygon points='406.5,270.4 398.5,272.4 395.5,265.3 396.2,257.7 404.4,257.2 408.5,263.3' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='101.9,434.8 90.4,427.5 89.2,414.3 100.8,409.1 111.4,414.2 108.1,424.2' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='113.0,46.5 103.0,39.9 107.0,28.0 119.9,27.8 125.1,40.8' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='76.8,460.6 78.5,452.8 86.4,451.5 92.9,457.0 90.3,465.6 81.2,468.3' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='705.1,142.7 711.5,147.3 707.5,153.9 701.0,156.4 694.6,151.2 696.9,142.6' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='388.1,528.9 385.1,532.0 380.6,530.2 381.7,525.9 384.3,522.4 388.0,525.0' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='337.8,34.7 342.3,35.4 345.0,39.4 343.3,44.6 338.4,43.3 335.9,41.4 334.6,37.7' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='754.2,202.1 762.5,200.6 768.7,206.2 763.7,214.3 757.0,209.5' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='99.8,629.8 101.2,633.8 99.8,637.5 95.7,640.1 91.8,636.7 93.3,632.5 95.9,630.8' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='86.5,52.0 90.7,51.4 93.0,55.4 92.8,60.7 87.4,61.2 84.2,58.4 81.7,53.8' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='705.9,812.3 709.4,813.2 712.6,816.0 710.7,820.2 706.6,820.2 703.4,818.6 703.0,814.8' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='490.5,602.9 491.5,610.7 488.9,617.5 481.9,615.3 477.4,609.6 481.9,602.7' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='182.6,485.8 182.4,491.5 177.8,494.5 171.3,494.7 167.3,488.1 172.2,482.5 179.1,479.2' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='67.5,586.9 67.1,582.1 70.8,579.3 77.8,579.0 76.8,586.1 72.5,591.9' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='166.7,310.2 160.5,313.2 155.7,312.3 153.0,307.5 156.5,301.5 162.1,305.1' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='593.9,435.5 584.3,446.8 569.7,447.1 566.2,433.6 574.0,425.9 584.4,425.1' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='342.0,455.4 338.4,466.6 334.4,478.3 319.8,478.4 316.4,464.9 320.1,454.3 330.9,447.8' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='446.4,109.2 453.2,108.5 456.6,113.3 455.2,118.3 449.6,121.2 443.4,116.6' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='577.2,34.9 581.2,37.0 581.3,40.4 578.1,42.6 575.1,39.3' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='373.6,815.2 379.6,834.8 363.0,844.9 348.2,834.0 353.2,815.3' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='603.2,743.8 607.7,751.5 599.5,757.8 591.3,751.4 594.3,741.5' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='177.1,776.0 187.8,782.2 186.3,795.1 174.7,797.4 165.2,792.0 168.9,782.2' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='828.1,583.0 833.7,586.2 832.1,592.4 826.6,596.5 819.7,592.3 822.3,585.1' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='179.1,44.7 190.5,51.4 194.6,63.8 183.9,73.4 171.1,67.4 173.5,55.9' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='678.5,205.1 685.0,203.5 690.6,206.6 689.6,212.4 685.9,215.0 680.8,216.5 680.0,211.2' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='459.6,211.6 459.9,204.1 467.2,206.1 469.5,211.7 464.4,215.4' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='251.3,138.3 257.2,140.4 255.4,146.9 249.6,149.4 244.1,145.6 245.5,139.0' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='571.8,51.1 569.8,46.8 573.6,43.8 578.1,44.1 579.2,48.0 579.5,52.4 575.0,55.1' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='516.1,498.3 505.7,509.7 492.5,504.6 484.9,495.0 491.8,485.9 500.2,481.8 514.8,482.6' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='754.2,687.8 753.9,671.5 768.6,673.0 778.8,682.5 767.5,691.8' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='837.8,49.5 833.1,49.3 831.0,45.9 828.8,41.0 834.1,40.0 837.2,42.0 841.2,45.3' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='478.1,308.7 473.8,302.9 477.7,297.3 483.2,298.4 487.8,302.0 483.7,306.2' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='101.0,305.9 96.1,308.5 92.9,304.2 92.5,298.8 98.3,296.2 102.6,300.7' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='816.6,136.0 821.2,136.9 824.4,141.5 822.2,147.8 815.9,146.3 810.6,143.9 813.2,138.7' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='388.5,286.2 391.6,289.4 390.3,293.0 387.3,294.6 382.6,293.0 385.0,288.8' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='622.1,604.8 615.2,605.3 611.3,599.2 615.5,593.8 622.5,592.2 626.0,599.0' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='825.4,217.1 821.2,230.0 808.1,232.6 800.2,224.2 796.1,212.8 807.1,208.1 816.2,209.5' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='450.3,757.0 449.8,761.6 445.9,764.1 441.5,761.5 442.2,756.7 446.3,755.3' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='51.2,344.4 54.3,344.0 54.6,347.1 53.9,349.9 50.6,351.5 48.0,348.8 47.5,344.9' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='832.8,831.6 835.7,830.5 836.8,833.4 835.1,835.8 831.7,834.7' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='153.6,744.6 149.4,755.3 136.5,759.2 133.3,746.6 137.0,738.0 145.9,738.3' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='627.5,573.6 623.9,581.8 616.3,577.5 616.0,570.7 622.6,567.6' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='748.8,490.4 737.6,481.8 747.7,470.9 759.5,472.9 763.2,482.3 759.6,492.6' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='829.2,14.6 828.9,21.7 827.1,26.7 821.9,26.9 817.6,24.1 815.1,17.3 822.1,15.5' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='749.5,394.9 753.5,394.3 756.7,395.7 757.1,400.0 753.1,400.3 750.0,399.1' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='419.4,331.4 422.6,329.5 427.2,328.2 427.8,333.1 424.7,335.8 420.8,335.4' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='346.7,223.5 343.4,223.4 342.6,220.2 343.2,216.7 346.8,216.7 349.1,218.8 349.8,222.1' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='204.9,29.8 204.8,34.4 201.1,38.2 195.0,37.5 194.4,31.6 196.9,27.5 201.6,26.1' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='124.7,800.8 130.3,801.0 133.6,805.0 130.8,809.0 126.3,810.1 122.8,806.2' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='319.4,285.3 320.2,279.7 320.4,274.5 325.9,274.4 328.4,278.4 329.7,283.1 325.2,286.5' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='142.3,510.1 145.6,506.3 150.4,506.2 151.3,510.7 149.8,515.0 144.9,514.4' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='603.5,791.8 604.6,785.8 608.5,781.3 613.4,784.8 615.3,790.7 609.8,795.3' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='767.5,102.8 764.6,107.8 760.3,108.4 755.2,106.3 756.4,99.8 762.3,100.4' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='306.9,576.5 308.9,574.1 311.5,574.9 313.7,577.3 310.9,578.8 308.4,579.1' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='261.0,347.6 267.0,345.2 272.9,351.0 266.9,357.7 257.9,355.4' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='216.4,533.5 201.3,543.4 188.7,537.5 187.9,521.7 203.9,520.5' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='622.9,495.7 625.9,498.6 626.1,502.3 623.7,505.8 618.6,506.0 617.9,501.1 618.0,496.3' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='520.8,272.1 516.8,272.3 515.3,268.4 517.7,265.8 521.2,265.7 522.5,269.0' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='460.8,345.0 465.0,352.6 456.4,355.1 449.2,350.9 454.4,344.6' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='76.3,743.0 71.3,744.2 68.3,738.4 74.0,736.3 78.1,738.7' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='689.8,728.6 684.6,730.4 682.9,725.4 684.4,721.5 688.3,721.5 692.0,724.2' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='491.5,116.7 495.0,115.7 497.1,119.3 494.4,121.8 491.3,122.0 488.9,119.2' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='721.1,678.8 723.3,675.0 725.3,671.4 730.3,672.1 730.0,676.9 729.3,680.9 725.0,680.9' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='20.1,136.0 22.5,133.5 25.9,135.7 25.6,139.9 21.9,140.6 19.5,138.7' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='656.2,27.5 651.0,29.7 647.1,25.3 648.2,19.4 654.1,18.7 658.3,22.5' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='710.9,352.6 709.1,344.5 718.1,343.4 724.4,350.9 716.6,356.1' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='565.0,239.2 559.8,239.5 558.5,234.4 559.9,229.9 564.8,228.3 570.2,230.7 568.1,236.2' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='174.7,485.9 172.1,495.6 164.1,499.0 155.3,494.9 158.8,486.3 165.7,480.2' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='500.0,483.8 497.1,482.9 497.0,480.0 498.3,478.1 500.5,477.8 503.8,478.9 502.0,481.9' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='179.6,500.5 182.1,505.4 181.3,511.2 175.5,512.7 169.5,510.4 170.7,504.3 174.6,501.8' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='509.9,224.9 507.8,233.5 501.9,239.1 498.3,231.8 499.9,224.0' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='563.9,432.5 556.0,423.5 565.2,413.3 577.9,416.9 577.7,428.1 572.8,436.5' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='481.9,139.4 486.1,142.3 486.4,146.8 482.6,148.2 478.6,147.5 479.5,143.6' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='632.5,629.1 628.1,627.2 628.4,622.9 630.9,618.1 635.8,621.1 637.0,626.4' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='674.1,363.3 681.1,364.9 678.5,371.9 672.7,373.6 666.5,370.9 669.6,365.0' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='683.9,179.6 679.9,178.6 681.3,174.9 684.9,173.0 686.1,177.0' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='453.5,457.6 456.2,464.2 449.3,467.7 442.7,463.0 446.3,455.0' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='26.1,253.5 24.3,248.7 24.9,245.5 28.2,244.0 32.2,246.2 30.6,250.7' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='674.4,719.6 667.7,718.2 667.4,711.0 673.3,709.0 677.9,710.8 680.8,716.9' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='181.5,584.3 176.2,584.4 170.7,582.2 173.2,576.9 176.0,572.1 181.6,574.0 184.7,579.2' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='329.0,769.4 332.7,763.0 336.9,769.1 340.6,773.6 337.2,779.4 330.4,779.4 325.3,774.8' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='470.8,237.2 467.5,237.4 466.1,234.9 466.5,231.5 470.1,231.4 471.7,234.2' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='547.6,584.3 551.9,577.6 558.5,580.5 562.6,585.7 557.2,589.2 551.6,590.3' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='834.2,597.3 830.9,594.6 833.9,591.6 837.3,591.4 839.6,594.3 838.2,598.3' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='777.7,67.9 782.6,64.0 787.5,69.5 783.8,76.5 776.3,74.1' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='250.1,458.5 256.0,455.4 260.3,460.9 256.9,467.4 249.0,465.9' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='189.3,89.5 190.2,82.0 198.2,79.3 202.7,85.8 203.2,92.1 198.9,98.4 190.6,97.0' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='396.8,703.8 397.8,695.9 404.8,696.9 410.7,702.4 403.4,706.7' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='135.4,329.4 135.8,337.6 128.3,340.2 121.6,336.7 124.2,330.3 128.7,327.6' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='532.5,245.6 533.3,257.7 523.3,260.3 515.4,254.2 520.2,243.6' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='341.1,223.7 347.8,217.0 358.5,219.2 358.5,230.1 351.4,237.6 342.7,232.4' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='131.2,360.4 129.0,340.9 145.8,338.7 154.0,348.2 149.6,363.1' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='293.6,411.4 296.6,404.3 303.5,402.0 308.0,409.4 301.0,413.0' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='416.1,84.6 416.8,97.7 405.4,99.6 393.1,98.8 392.9,84.8 404.8,80.4' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='646.2,766.1 649.2,776.4 643.5,784.4 631.5,781.2 632.9,767.2' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='339.1,263.0 335.8,270.4 328.6,268.7 325.6,263.7 327.6,257.8 334.1,257.8' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='609.3,624.7 612.4,620.9 616.4,622.0 620.6,625.4 616.3,629.0 612.2,628.3' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='475.2,359.4 471.5,360.7 469.5,357.2 470.0,353.5 473.5,352.6 476.3,353.9 477.1,356.9' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='481.1,168.5 480.3,162.7 486.4,161.3 490.5,165.1 489.0,170.0 484.6,171.0' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='336.4,417.5 341.3,413.3 348.0,414.3 349.4,421.1 344.9,427.4 336.5,425.5' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='278.6,813.3 280.5,818.0 276.4,820.0 272.3,818.4 273.0,813.0' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='159.8,499.6 163.9,504.8 158.6,507.7 154.2,506.3 153.1,500.0' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='204.6,61.8 199.1,66.8 190.9,64.1 188.9,55.4 195.4,50.7 203.2,47.9 205.7,55.7' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='576.0,72.5 571.0,72.0 569.1,67.7 571.7,64.3 576.2,63.9 579.0,68.2' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='427.0,185.1 425.1,191.1 420.0,188.5 418.3,184.2 422.8,182.2' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='738.3,746.4 746.9,752.2 744.1,763.1 730.3,765.7 725.5,750.7' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='62.4,285.5 63.6,280.4 68.9,281.4 69.8,286.2 65.8,288.6' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='29.0,428.3 30.1,415.2 42.0,408.5 50.3,418.2 52.0,430.4 39.9,435.8' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='678.2,354.0 680.0,350.6 683.1,350.3 686.8,351.9 685.5,356.3 681.3,356.6' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='622.4,175.1 631.5,180.5 631.6,192.5 621.6,203.1 612.1,192.5 602.0,183.6 609.1,169.8' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='48.8,775.7 44.2,777.9 40.5,774.3 40.9,768.9 46.3,766.5 51.1,770.5' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='112.1,272.4 111.3,267.7 113.8,263.2 117.9,266.1 119.2,269.5 117.2,274.2' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='104.2,350.2 110.9,342.7 118.1,337.8 126.8,344.3 120.5,352.4 113.1,355.7' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='526.6,180.9 529.5,175.6 534.1,179.8 533.8,185.5 527.0,187.3' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='244.5,442.1 242.1,433.8 247.5,428.2 254.9,431.7 252.9,439.6' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='187.0,653.4 196.2,648.8 204.3,655.0 201.6,667.1 185.6,668.4' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='520.7,515.2 526.5,505.4 539.7,506.1 540.4,518.5 541.6,531.2 529.2,528.5 522.1,524.1' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='293.2,218.5 292.6,234.0 276.2,236.4 271.3,222.3 280.1,209.7' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='297.3,281.6 302.5,284.5 302.3,289.9 298.1,291.6 294.1,290.3 292.0,285.0' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='287.9,660.7 277.8,654.5 277.7,643.6 286.5,636.7 294.0,643.8 294.0,651.8' fill='rgba(20,22,26,0.05)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cpolygon points='41.4,520.9 48.6,522.6 52.9,529.3 45.4,534.7 37.3,529.2' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='54.5,207.9 60.8,203.5 66.5,209.9 64.0,218.0 56.5,217.7 52.9,213.1' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='307.5,362.4 312.2,354.6 318.7,347.5 325.3,354.6 327.9,362.0 323.3,369.4 313.8,370.1' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='70.6,39.0 64.5,38.5 65.3,32.3 69.5,28.2 75.7,30.4 73.8,36.1' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='125.4,196.0 128.1,199.8 124.7,203.0 119.8,203.6 117.8,198.6 121.4,195.5' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='444.6,372.1 437.0,376.2 431.9,368.7 433.7,360.5 440.8,354.7 447.9,360.2 448.8,367.4' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='292.7,334.2 294.8,333.4 296.6,334.8 296.6,336.9 295.5,339.4 292.2,339.6 291.4,336.4' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='440.9,223.2 442.9,225.0 442.8,228.4 439.4,229.5 435.9,228.1 435.6,224.3 438.6,223.2' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='48.5,173.3 59.7,168.3 70.4,174.1 70.5,185.5 65.3,196.6 55.1,190.0 46.8,184.8' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='535.6,168.6 545.5,160.6 554.7,156.9 558.9,166.1 555.6,174.5 546.2,176.1' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='448.9,163.8 454.8,162.8 459.1,165.7 459.6,171.7 453.8,172.1 450.5,169.4' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='285.5,397.4 299.5,398.4 308.7,404.9 308.1,418.7 293.3,424.2 283.3,412.5' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='562.6,140.2 557.5,137.7 559.2,132.4 561.5,126.4 566.6,130.3 572.2,134.0 567.3,138.5' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='275.0,526.0 268.4,523.6 268.4,517.1 274.3,515.2 279.1,519.9' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='326.6,606.8 322.7,601.8 324.9,596.7 328.7,592.0 334.9,594.4 336.9,600.6 334.0,607.4' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='108.7,246.5 108.0,252.1 102.0,252.8 99.8,248.2 99.7,242.4 105.5,242.9' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='134.0,275.2 139.5,272.6 143.7,276.3 145.1,282.3 139.0,284.8 131.7,282.5' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='335.5,393.9 324.6,383.9 333.2,371.3 352.4,370.3 351.3,390.7' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='136.0,481.1 140.4,485.0 138.3,489.9 133.8,492.4 129.4,488.7 132.1,484.4' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='362.1,341.7 361.6,345.5 358.0,347.0 355.3,344.5 355.4,340.7 359.2,338.3' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='509.4,191.1 509.3,194.3 506.6,196.0 502.0,195.5 503.4,191.0 506.5,187.4' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='539.4,532.3 530.0,520.9 537.5,509.4 548.7,513.6 553.1,525.9' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='278.8,239.4 277.8,235.7 281.4,232.0 285.5,235.4 285.3,239.9 281.6,242.9' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='562.8,421.3 564.9,428.5 558.4,431.6 551.2,433.4 545.5,426.7 549.0,418.3 556.9,419.2' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='42.7,203.7 45.5,216.9 40.9,227.1 28.2,228.6 21.7,216.9 26.9,202.8' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='237.3,546.7 231.5,552.6 222.7,551.2 223.6,542.9 227.1,535.6 233.8,540.3' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='539.5,129.7 538.6,133.6 535.0,135.9 532.1,132.7 532.1,128.4 536.1,128.3' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='367.2,400.2 365.0,396.3 366.6,393.2 370.2,390.9 373.6,394.5 371.3,398.4' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='552.8,479.1 545.0,481.7 537.9,477.5 542.3,470.0 548.6,472.6' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='488.3,137.7 486.4,133.3 487.8,129.9 491.8,127.7 493.7,131.8 493.4,136.3' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='193.8,249.9 195.1,243.9 201.8,243.3 203.7,249.0 204.7,253.9 200.1,257.2 194.1,255.7' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='342.5,335.1 338.2,329.3 336.3,322.9 342.9,321.4 348.4,323.9 348.7,330.6' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='349.8,489.3 354.6,486.0 358.1,489.6 356.5,493.1 352.2,494.4' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='297.2,72.5 296.5,77.3 291.8,78.1 285.2,78.2 287.6,72.1 289.4,67.0 296.2,66.0' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='342.9,184.0 347.6,182.8 351.2,187.3 347.3,191.1 342.3,192.7 339.6,187.6' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='529.1,536.4 526.6,531.9 531.1,528.3 536.2,530.4 536.4,535.5 532.8,537.6' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='478.4,555.4 482.5,548.5 490.9,551.4 489.5,559.7 481.4,563.9' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='305.1,535.0 312.3,538.4 309.9,545.1 304.2,546.0 297.1,540.3' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='602.5,485.2 594.0,483.7 592.1,477.3 596.9,470.8 601.5,477.0' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='197.5,344.8 198.7,340.5 203.2,341.8 203.0,345.6 200.0,347.6' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='230.8,233.6 229.7,239.5 223.3,238.5 221.6,233.3 220.9,227.2 227.1,225.4 230.5,229.7' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='535.9,348.3 529.6,349.4 522.7,350.9 523.2,343.9 524.1,337.7 530.8,337.1 536.9,340.9' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='497.1,133.0 489.2,140.5 478.3,143.7 473.6,133.5 472.5,122.4 483.4,119.0 494.8,121.1' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='137.8,100.2 137.2,96.4 137.9,92.9 141.7,91.8 145.0,94.1 144.9,98.2 141.6,99.5' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='207.9,40.8 205.4,35.8 210.6,33.6 214.4,35.8 214.5,39.6 211.9,43.2' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='601.5,97.8 595.2,97.4 592.0,92.9 589.9,86.1 596.7,81.9 601.9,86.9 603.2,91.9' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='572.7,536.9 570.1,523.9 581.0,518.6 592.0,520.5 595.4,532.9 585.0,540.6' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='501.2,273.1 512.9,275.7 521.3,284.6 514.1,294.1 505.5,296.2 496.6,293.1 493.2,282.4' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='218.8,122.2 215.6,124.8 210.9,122.3 213.7,117.7 218.1,118.2' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='34.9,375.5 29.4,383.3 21.7,387.8 16.2,380.2 17.0,370.5 26.2,371.9' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='557.7,95.7 549.7,99.0 536.1,96.6 543.9,85.3 552.2,78.6 558.5,87.2' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='214.8,441.5 217.7,436.5 222.3,440.3 223.0,445.6 218.4,448.3 213.6,446.1' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='352.0,316.7 355.3,310.1 362.1,310.2 367.3,313.7 365.9,319.5 362.2,325.0 356.9,321.1' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='298.4,221.1 300.4,237.9 280.8,244.2 270.6,225.4 284.4,209.7' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='512.4,287.7 509.1,285.9 510.9,282.0 514.9,282.2 517.6,284.9 514.9,287.4' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='444.8,454.9 442.7,459.1 438.3,459.5 437.2,455.9 437.5,452.4 441.0,452.8' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='174.4,178.7 182.3,168.8 196.1,169.0 205.9,180.7 200.2,195.5 185.8,199.3 177.0,189.8' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='200.3,379.3 203.8,375.6 208.5,377.3 208.1,381.4 206.4,384.9 201.9,384.0' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='467.6,122.8 466.3,126.1 463.8,128.6 461.2,126.0 461.0,122.6 464.2,120.8' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='309.8,454.5 310.8,458.1 307.6,460.3 304.0,459.0 303.6,455.1 306.8,453.9' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='56.1,479.2 58.1,483.6 54.5,485.6 52.0,483.7 52.4,480.9' fill='rgba(20,22,26,0.05)'/%3E%3Cpolygon points='445.9,390.4 440.3,390.9 439.2,385.5 441.5,381.3 446.3,382.1 450.5,386.3' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='592.0,117.5 594.2,122.9 589.4,125.3 585.0,124.9 583.0,120.2 586.9,116.9' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='146.8,101.2 142.2,102.4 140.2,98.0 141.0,92.9 147.2,91.5 151.0,97.0' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='65.5,191.1 63.2,186.2 62.8,181.9 66.6,180.2 70.4,180.9 73.7,184.7 70.0,188.1' fill='rgba(255,255,255,0.042)'/%3E%3Cpolygon points='410.7,288.7 411.2,275.7 422.4,267.1 434.0,274.3 440.7,285.8 433.3,298.2 418.4,301.0' fill='rgba(20,22,26,0.05)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 860px 860px, 620px 620px, 280px 280px;
}

/* ---------------------------------------------------------------------------
   STONE-DARK: FULL SURFACE INVERSION
   The textured graphite band now carries whole content sections - split
   copy, timelines, tables, accordions, forms, the quarry map. Everything
   with a light-surface default is re-stated here; cream cards and inputs
   stay light deliberately, and their interior colours are re-asserted so
   the general rules cannot bleed into them.
   --------------------------------------------------------------------------- */
.section--stone-dark { color: var(--on-deep); }
 .section--stone-dark h4 { color: var(--on-deep); }
.section--stone-dark h3 { color: var(--on-deep); }
.section--stone-dark p, .section--stone-dark li { color: var(--on-deep-2); }
.section--stone-dark .lede { color: var(--on-deep-2); }
.section--stone-dark strong { color: var(--on-deep); }
.section--stone-dark a:not(.btn):not(.card--link):not(.chip) { color: var(--blueprint-air); }
.section--stone-dark .btn--ghost { color: var(--on-deep); border-color: #4A525B; }
.section--stone-dark .btn--ghost:hover {
  border-color: var(--on-deep-2); background: rgba(246,244,240,.07); color: var(--on-deep);
}

/* cards and their interiors stay cream-on-dark */
.section--stone-dark .card h3, .section--stone-dark .card h4 { color: var(--ink); }
.section--stone-dark .card p { color: var(--ink-2); }
.section--stone-dark .card li, .section--stone-dark .svc-card ul { color: var(--ink-2); }
.section--stone-dark .card strong { color: var(--ink); }
.section--stone-dark .card a:not(.btn) { color: var(--blueprint); }

/* timeline */
.section--stone-dark .timeline::before { background: #4A525B; }
.section--stone-dark .tl-item__year { color: var(--amber); }
.section--stone-dark .tl-item::before { background: var(--deep); }

/* data table */
.section--stone-dark table.data th,
.section--stone-dark table.data td { color: var(--on-deep); border-bottom-color: #4A525B; }
.section--stone-dark table.data thead th { color: var(--on-deep-2); border-bottom-color: #5A626B; }
.section--stone-dark table.data tbody tr:hover { background: rgba(246,244,240,.06); }

/* accordion */
.section--stone-dark .acc-item { border-bottom-color: #4A525B; }
.section--stone-dark .acc-trigger { color: var(--on-deep); }
.section--stone-dark .acc-trigger:hover { color: var(--amber); }
.section--stone-dark .acc-icon::before, .section--stone-dark .acc-icon::after { background: var(--on-deep-2); }

/* forms: labels light, fields keep their own cream ground */
.section--stone-dark .field > label, .section--stone-dark legend { color: var(--on-deep); }
.section--stone-dark .field__hint { color: var(--on-deep-2); }
.section--stone-dark .field__error { color: #FF9A8F; }
.section--stone-dark .form-status { color: var(--on-deep); }

/* filter bar + unit toggle */
.section--stone-dark .filter-bar__label { color: var(--on-deep-2); }
.section--stone-dark .unit-toggle { background: var(--deep-2); border-color: #4A525B; }
.section--stone-dark .unit-toggle button { color: var(--on-deep-2); }
.section--stone-dark .unit-toggle button[aria-pressed="true"] { background: var(--rust-strong); color: #fff; }

/* eyebrow rule + focus already handled above; keep the map's light panel */
.section--stone-dark .map-frame { border-color: #4A525B; }

/* stone-dark fallout fixes, found by the contrast audit:
   1. the calculator's form half is a cream panel - its interior stays ink
   2. .quarry-card is cream but is not a .card - same re-assertion
   3. danger red needs its on-dark variant for the required asterisk */
.section--stone-dark .calc__form h3,
.section--stone-dark .calc__form .field > label,
.section--stone-dark .calc__form legend { color: var(--ink); }
.section--stone-dark .calc__form p,
.section--stone-dark .calc__form .field__hint { color: var(--ink-3); }
.section--stone-dark .calc__form .unit-toggle { background: var(--canvas-sunk); border-color: var(--rule-strong); }
.section--stone-dark .calc__form .unit-toggle button { color: var(--ink-3); }
.section--stone-dark .calc__form .unit-toggle button[aria-pressed="true"] { background: var(--rust-strong); color: #fff; }
.section--stone-dark .calc__form .field__req { color: var(--danger); }

.section--stone-dark .quarry-card h3,
.section--stone-dark .quarry-card strong { color: var(--ink); }
.section--stone-dark .quarry-card p,
.section--stone-dark .quarry-card li { color: var(--ink-2); }

.section--stone-dark .field__req { color: #FF9A8F; }

/* the quarry card is a <button> with color:inherit - anchor it to ink so
   its name/meta spans do not inherit the section's light text */
.section--stone-dark .quarry-card { color: var(--ink); }

/* ---------------------------------------------------------------------------
   HERO SECONDARY CTA
   An outlined ghost button on the basalt hero reads as stray lines floating
   over the composition - dark ground, dark fill, only the border visible.
   In the hero it becomes a soft filled button instead: no outline at all,
   a whisper of limestone fill that reads as a surface, not a wireframe.
   --------------------------------------------------------------------------- */
.hero .btn--ghost {
  border-color: transparent;
  background: rgba(246,244,240,.09);
  color: var(--on-deep);
}
.hero .btn--ghost:hover {
  border-color: transparent;
  background: rgba(246,244,240,.16);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   COPY COLUMN vs THE DIAGONAL
   The proof strip's grid used auto columns, which refuse to shrink - so the
   strip (and its top rule) ran under the photo's cut edge by up to ~200px on
   mid-size screens. Both the copy column and the strip are now capped to the
   space that actually exists left of the photo:

     photo's left edge:  100vw - min(46vw, 760px)
     column's left edge: the centred wrap's gutter
     minus a 32px breathing gap to the diagonal

   and the strip's columns become minmax(0,1fr) so they compress instead of
   overflowing. Applies only where the photo is a side panel.
   --------------------------------------------------------------------------- */
@media (min-width: 1001px) {
  .hero-copy,
  .hero-copy .hero-proof {
    max-width: min(58ch, calc(100vw - min(46vw, 760px) - max(var(--gutter), (100vw - 1360px) / 2 + var(--gutter)) - 32px));
  }
  .hero-proof {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
    gap: clamp(0.75rem, 1.8vw, 2.5rem);
  }
}

/* ---------------------------------------------------------------------------
   THE SEAM, REDRAWN
   The panel's clip-path edge was doing double duty as the visible diagonal,
   and a hard vector cut over a bright drifting photo aliases - it read as
   tearing at the top against the sky. The visible line is now an SVG overlay
   tracing the same vector: a 7px basalt stroke swallows the aliased boundary,
   and the 2px gold line sits crisp on top. non-scaling-stroke keeps both at
   true screen pixels no matter the panel's size. The old gradient seam is
   retired below.
   --------------------------------------------------------------------------- */
.hero-photo__seam {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 3; pointer-events: none;
}
.hero-photo::after { display: none; }
@media (max-width: 1000px) { .hero-photo__seam { display: none; } }