/* Gerard Excavation Inc. - v3 "heavy iron" design by JT Digital Marketing.
   Logo black + logo orange (#ff7f00) + logo silver, Anton display type, scroll-driven motion.
   Tokens first, then base, then components, top of page to bottom.
   All motion is decoration: gated behind prefers-reduced-motion, and the
   .reveal classes are only added by JS, so no-JS visitors see everything. */

/* ---------- fonts (self-hosted, only the weights used) ---------- */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/anton-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-latin.woff2') format('woff2');
}

/* ---------- tokens ---------- */

:root {
  --coal: #000000;       /* logo black: header, heroes, bands, footer */
  --coal-2: #191919;     /* raised dark surface */
  --accent: #ff7f00;     /* logo orange; text on it must be coal (8.3:1) */
  --silver: #b5b8bd;     /* logo silver: secondary text on dark surfaces */
  --paper: #f4f4f5;      /* neutral site background, silver-tinted */
  --white: #ffffff;
  --ink: #101113;
  --ink-soft: #5b6067;   /* 5.9:1 on paper */
  --line: #dddee1;

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;

  --container: 1200px;
  --gutter: 24px;
  --section: clamp(64px, 9vw, 120px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- base ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.04;
  margin: 0 0 20px;
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 6.5vw, 84px); }
h2 { font-size: clamp(28px, 3.6vw, 46px); }
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 21px;
  line-height: 1.15;
  margin: 0 0 10px;
}
.accent { color: var(--accent); }
/* on light backgrounds the orange accent needs a coal plate to stay legible */
main .section .accent, .page-head .accent { color: inherit; }

p, ul, ol { margin: 0 0 16px; max-width: 70ch; }
/* the 70ch measure is for prose; layout lists span their container */
.site-nav ul, .photo-grid, .spec-ledger, .build-index, .footer-grid ul { max-width: none; }

a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { background: var(--accent); color: var(--coal); text-decoration-color: var(--coal); }

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

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--coal);
  padding: 8px 16px;
  z-index: 100;
}
.skip-link:focus { left: 8px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

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

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 4px;
  background: var(--accent);
  flex-shrink: 0;
}

/* ---------- scroll progress bar (CSS scroll-driven animation) ----------
   Browsers without animation-timeline simply never show the bar. */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 90;
}
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: progress-grow linear both;
    animation-timeline: scroll(root);
  }
  @keyframes progress-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
}

/* ---------- unconfirmed content (TODO_CONFIRM) ----------
   Hidden by default so nothing unconfirmed can ship, even without JS.
   main.js adds .show-todos to <body> while config.showTodos is true. */

[data-todo] { display: none; }
.show-todos [data-todo] {
  display: revert;
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
  position: relative;
}
.show-todos [data-todo]::before {
  content: 'confirm: ' attr(data-todo);
  position: absolute;
  top: -22px;
  left: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--coal);
  background: var(--accent);
  padding: 1px 6px;
  z-index: 5;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--coal);
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo-link { text-decoration: none; display: block; flex-shrink: 0; }
.logo-link:hover { background: none; }
/* client logo (black background, blends with the coal header) */
/* bumped 58 -> 74 -> 90px per the client (2026-10-10, again 2026-10-12);
   the 520px-wide source stays sharp at 2x up to ~100px tall */
.logo-link img { display: block; height: 90px; width: auto; }
@media (max-width: 460px) {
  .logo-link img { height: 64px; }
}
.wordmark { display: inline-flex; flex-direction: column; line-height: 1; }
.wordmark-name {
  font-family: var(--font-display);
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white);
}
.logo-link:hover .wordmark-name { color: var(--accent); }
.wordmark-sub {
  margin-top: 5px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.site-nav { margin-left: auto; }
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}
.site-nav a {
  display: block;
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 10px 11px;
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 3px no-repeat;
  transition: background-size 0.25s var(--ease-out);
}
.site-nav a:hover {
  color: var(--accent);
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 3px no-repeat;
}
.site-nav a[aria-current='page'] {
  color: var(--accent);
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 3px no-repeat;
}
.site-nav .nav-phone a {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.site-nav .nav-phone a:hover { color: var(--white); }

.header-cta { flex-shrink: 0; }

.nav-toggle { display: none; }

/* the desktop nav dropped the phone link 2026-10-10: the Forestry Mulching
   tab plus the bigger logo fill the 1200px container. The number still
   lives in the burger dropdown, the mobile call bar, the CTA, and the
   footer. */
@media (min-width: 1200px) {
  .site-nav .nav-phone { display: none; }
}

@media (max-width: 1199px) {
  .site-nav .nav-toggle { display: block; }
  .nav-toggle > summary {
    list-style: none;
    cursor: pointer;
    color: var(--white);
    font-weight: 600;
    font-size: 15px;
    padding: 10px 16px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
  }
  .nav-toggle > summary::-webkit-details-marker { display: none; }
  .nav-toggle > summary::before { content: '\2630\00a0\00a0'; color: var(--accent); }
  .nav-toggle[open] > summary::before { content: '\2715\00a0\00a0'; }

  .site-nav ul { display: none; }
  .nav-toggle[open] + ul {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--coal);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.45);
    padding: 10px 16px 18px;
  }
  .nav-toggle[open] + ul a { padding: 14px 12px; font-size: 17px; }
}
@media (max-width: 767px) {
  .site-header .header-cta { display: none; } /* the mobile call bar covers this */
  .site-header .container { gap: 12px; }
  .wordmark-name { font-size: 25px; }
  .wordmark-sub { letter-spacing: 0.22em; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  background: var(--coal);
  display: flex;
  align-items: flex-end;
  min-height: clamp(320px, 46vw, 520px);
  overflow: hidden;
}
.hero picture, .hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: no-preference) {
  .hero img { animation: hero-settle 7s var(--ease-out) both; }
  @keyframes hero-settle {
    from { transform: scale(1.07); }
    to { transform: scale(1); }
  }
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.3) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: clamp(56px, 8vw, 110px);
  padding-bottom: clamp(40px, 6vw, 84px);
}
.hero h1 { color: var(--white); margin-bottom: 12px; max-width: 16ch; }
.hero .eyebrow { color: #d9dbdf; }
.hero .eyebrow::before { background: var(--accent); }
.hero-lead {
  color: #e2e4e7;
  font-size: clamp(17px, 2vw, 21px);
  max-width: 54ch;
  margin-bottom: 0;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* ---------- home hero: the split slab (2026-09-26) ----------
   Coal slab of stacked display type on the left; the job photo as a
   full-height panel on the right; a hard diagonal cut with an orange seam
   between them, like a cross-section cut into earth. The seam leans the
   same way as the survey tape below, and the tape band's top border is
   gone so the two coal surfaces read as one field.
   Motion: each headline line rises out of a mask and the photo panel
   presses in from the right on load (CSS only, runs once, both guarded by
   prefers-reduced-motion). No-JS visitors get the finished layout. */

.hero-split {
  position: relative;
  background: var(--coal);
  display: flex;
  align-items: center;
  /* shorter than the original 88vh: the fleet photo is a wide 2.16:1
     panorama, and a shorter panel crops far less of its width */
  min-height: clamp(520px, 78vh, 760px);
  overflow: hidden;
  overflow: clip;
}
.hero-split-inner { position: relative; z-index: 2; width: 100%; }
.hero-split-copy {
  max-width: 640px;
  padding: clamp(48px, 7vw, 96px) 0;
}
.hero-split .eyebrow { color: #d9dbdf; }
/* Stenciled spec-plate lead: uppercase, dusty tone, dirt-worn letterforms.
   The grain is an OVERLAY of black speckles (assets/grit.svg) on the black
   slab, painted by ::after - visually identical to eroding the letters, but
   if the image ever fails to load the text simply renders clean. Never use
   mask-image on real copy: a failed mask load hides the whole element
   (that bug shipped briefly on 2026-09-26). Axe reads the solid `color`,
   so contrast stays intact. */
.hero-split .hero-lead {
  position: relative;
  max-width: 46ch;
  font-size: clamp(13px, 1.15vw, 15px);
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  word-spacing: 0.12em;
  color: #cfc9bd;
}
.hero-split .hero-lead::after {
  content: "";
  position: absolute;
  inset: 0;
  /* grit.png is rasterized from grit.svg (Safari can mis-render SVG
     turbulence filters in CSS backgrounds; the PNG is identical everywhere) */
  background: url('/assets/grit.png');
  pointer-events: none;
}

.hero-split-title { margin: 0 0 24px; }
.hl-mask { display: block; overflow: hidden; }
.hl { display: block; color: var(--white); line-height: 1.02; }
.hl-top, .hl-out { font-size: clamp(30px, 3.5vw, 54px); letter-spacing: 0.02em; }
.hl-big {
  font-size: clamp(78px, 10.5vw, 164px);
  line-height: 0.9;
  color: var(--accent);
}
/* third line: hollow letterforms (skip where text-stroke is unsupported) */
@supports (-webkit-text-stroke: 2px #fff) {
  .hl-out {
    color: transparent;
    -webkit-text-stroke: 2px var(--silver);
  }
}

/* the photo panel: orange backing clipped to the diagonal; the photo is
   clipped 10px tighter along the same angle, so the sliver of backing that
   shows through IS the seam (one element, no alignment drift) */
.hero-split-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  background: var(--accent);
  /* bottom vertex at 6% (not 0): with the wider panel the seam would
     otherwise lean under the CTA buttons at 1920 */
  clip-path: polygon(24% 0, 100% 0, 100% 100%, 6% 100%);
}
.hero-split-media picture,
.hero-split-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-split-media img {
  clip-path: polygon(calc(24% + 10px) 0, 100% 0, 100% 100%, calc(6% + 10px) 100%);
  /* the fleet photo is a wide 2.16:1 shot; bias the crop left so the
     Gerard-branded truck stays in frame */
  object-position: 30% 55%;
}

@media (prefers-reduced-motion: no-preference) {
  /* photo panel presses in from the right */
  .hero-split-media { animation: slab-press 0.8s var(--ease-out) both; }
  @keyframes slab-press {
    from { transform: translateX(5%); opacity: 0; }
  }
  /* then keeps the slow settle the old hero had */
  .hero-split-media img { animation: hero-settle 7s var(--ease-out) both; }
  /* headline lines rise out of their masks, heavy stagger */
  .hl { transform: translateY(110%); animation: line-rise 0.6s var(--ease-out) forwards; }
  .hl-top { animation-delay: 0.05s; }
  .hl-big { animation-delay: 0.16s; }
  .hl-out { animation-delay: 0.27s; }
  @keyframes line-rise {
    to { transform: translateY(0); }
  }
  /* supporting copy arrives last */
  .hero-split .eyebrow,
  .hero-split .hero-lead,
  .hero-split .hero-actions {
    opacity: 0;
    animation: copy-rise 0.55s var(--ease-out) forwards;
  }
  .hero-split .eyebrow { animation-delay: 0s; }
  .hero-split .hero-lead { animation-delay: 0.42s; }
  .hero-split .hero-actions { animation-delay: 0.52s; }
  @keyframes copy-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
}

@media (max-width: 899px) {
  .hero-split { display: block; min-height: 0; }
  .hero-split-copy {
    max-width: none;
    padding: clamp(40px, 9vw, 64px) 0 clamp(32px, 7vw, 52px);
  }
  .hl-top, .hl-out { font-size: clamp(27px, 7.2vw, 44px); }
  .hl-big { font-size: clamp(68px, 19vw, 122px); }
  /* photo becomes a slab below the copy, diagonal along its top edge,
     rising to the right like the survey tape */
  .hero-split-media {
    position: relative;
    width: 100%;
    height: clamp(250px, 66vw, 430px);
    clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%);
  }
  .hero-split-media img {
    clip-path: polygon(0 calc(14% + 8px), 100% 8px, 100% 100%, 0 100%);
  }
}

/* dark heading strip for pages without a photo hero */
.page-head { background: var(--coal); }
.page-head .container {
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(48px, 7vw, 88px);
}
.page-head h1 { color: var(--white); margin: 0; }

/* ---------- reveal-on-scroll (classes added only by JS) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
  transition-delay: 0ms;
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- site tape (the numbers, printed on a survey tape) ---------- */

.tape-band {
  background: var(--coal);
  /* no top border: the split hero above is also coal, and the two must
     read as one continuous field so the tape looks docked into the hero */
  padding: clamp(36px, 5vw, 60px) 0;
  /* clip, not hidden: overflow:hidden makes this a scroll container and the
     row's view() timeline would track it instead of the viewport */
  overflow: hidden;
  overflow: clip;
}
.tape {
  background: var(--accent);
  width: 106%;
  margin-left: -3%;
  transform: rotate(-1.4deg);
  overflow: hidden;
  overflow: clip;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}
.tape-row {
  display: flex;
  justify-content: space-evenly;
  align-items: end;
  gap: 24px;
  width: 114%;
  padding: 34px 5vw 20px;
  /* printed tick marks along the top edge: fine ticks with a tall tick
     every fifth, like a real tape (they slide with the row) */
  background-image:
    repeating-linear-gradient(to right, var(--coal) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(to right, var(--coal) 0 3px, transparent 3px 130px);
  background-size: 100% 10px, 100% 20px;
  background-repeat: no-repeat;
  background-position: top left;
}
/* scrolling pulls the tape: scrubbed by the band's own trip through the
   viewport, not a timer */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tape-row {
      animation: tape-pull 1s linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes tape-pull {
  from { transform: translateX(0); }
  to { transform: translateX(-11%); }
}
.tape-stop { display: grid; gap: 2px; justify-items: start; flex-shrink: 0; }
.tape-num {
  font-family: var(--font-display);
  font-size: clamp(42px, 5.5vw, 66px);
  line-height: 1;
  color: var(--coal);
  font-variant-numeric: tabular-nums;
}
.tape-unit { font-size: 0.42em; vertical-align: 0.62em; letter-spacing: 0.04em; }
.tape-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coal);
}
@media (max-width: 700px) {
  /* no scrub on small screens: the 114% + translate trick pushes facts off
     both edges when the row wraps. Static full-width tape, all four facts. */
  .tape-row {
    flex-wrap: wrap;
    gap: 20px 34px;
    justify-content: space-around;
    padding-bottom: 26px;
    width: 100%;
    animation: none;
  }
}

/* ---------- dig index (service ledger; photo fills the letters) ----------
   Each service is a full-width ledger row. When a row is "lit" (hover or
   :focus-visible anywhere, .is-fill added by JS as the row crosses the middle
   of the screen on scroll) the job photo shows through the letterforms via
   background-clip: text. JS sets the background-image lazily from data-photo
   and adds .has-photo; without JS the rows are a plain ink index. */

.dig-index { padding: clamp(44px, 7vw, 88px) 0; }
/* ledger head: eyebrow left, tally note right */
.dig-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(16px, 2.6vw, 26px);
}
.dig-head .eyebrow { margin: 0; }
.dig-tally {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
}
.dig-ledger { border-top: 3px solid var(--ink); }
.dig-row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 22px);
  padding: clamp(12px, 1.8vw, 20px) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}
.dig-row:hover { background: none; color: var(--ink); } /* opt out of the global orange a:hover */
/* orange survey line draws along the row's rule when lit */
.dig-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .dig-row::after { transition: transform 0.45s var(--ease-out); }
}
.dig-no {
  /* stamped plate: coal chip, silver digits that heat to orange when lit */
  align-self: center;
  font-family: var(--font-display);
  font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: 0.08em;
  color: var(--silver);
  background: var(--coal);
  padding: 5px 8px 4px;
  transition: color 0.3s ease;
}
.dig-word {
  font-family: var(--font-display);
  font-size: clamp(34px, 5.6vw, 64px);
  line-height: 1.08;
  text-transform: uppercase;
  white-space: nowrap; /* a wrapped word maroons its leader; sized to fit instead */
  /* --photo is set by JS on the row; the image only paints in the lit state
     below, so at rest the word is plain ink with no photo rectangle */
  background-size: cover;
  background-position: 50% 62%; /* favor the ground, not the sky */
  transition: color 0.5s ease;
}
/* dotted index leader between the word and the arrow */
.dig-leader {
  flex: 1;
  min-width: 28px;
  align-self: flex-end;
  margin-bottom: 0.45em;
  border-bottom: 3px dotted var(--line);
  transition: border-color 0.3s ease;
}
.dig-arrow {
  font-size: clamp(18px, 2vw, 26px);
  color: var(--ink-soft);
  opacity: 0.35;
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
/* the lit state: photo through the letters (only once JS has set the image,
   and only where background-clip: text is supported so text never vanishes) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .dig-row.has-photo:hover .dig-word,
  .dig-row.has-photo:focus-visible .dig-word,
  .dig-row.has-photo.is-fill .dig-word {
    /* coal tint over the photo + an ink outline so the word stays readable
       even where the photo is bright sky */
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), var(--photo);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ink);
  }
}
.dig-row:hover .dig-no,
.dig-row:focus-visible .dig-no,
.dig-row.is-fill .dig-no { color: var(--accent); }
.dig-row:hover .dig-leader,
.dig-row:focus-visible .dig-leader,
.dig-row.is-fill .dig-leader { border-color: var(--accent); }
.dig-row:hover .dig-arrow,
.dig-row:focus-visible .dig-arrow,
.dig-row.is-fill .dig-arrow { opacity: 1; transform: translateX(4px); color: var(--ink); }
.dig-row:hover::after,
.dig-row:focus-visible::after,
.dig-row.is-fill::after { transform: scaleX(1); }
/* slow drift of the photo inside the letters while lit */
@media (prefers-reduced-motion: no-preference) {
  .dig-row.has-photo:hover .dig-word,
  .dig-row.has-photo:focus-visible .dig-word,
  .dig-row.has-photo.is-fill .dig-word {
    animation: dig-drift 9s ease-in-out infinite alternate;
  }
}
@keyframes dig-drift {
  from { background-position: 50% 48%; }
  to { background-position: 50% 78%; }
}
/* small screens: stack the head, shrink the words so the longest
   ("Forestry Mulching") stays on one line, let the leader collapse first */
@media (max-width: 599px) {
  .dig-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .dig-tally { text-align: left; }
  .dig-word { font-size: clamp(24px, 7.4vw, 34px); }
  .dig-leader { min-width: 0; }
}
/* two-column index spread on wide screens (scoped: the job wall's closer
   row is also a .dig-ledger and keeps the full-size single-row word) */
@media (min-width: 1000px) {
  .dig-index .dig-ledger { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(48px, 6vw, 96px); }
  .dig-index .dig-word { font-size: clamp(34px, 3.4vw, 52px); }
}

/* ---------- route band (towns we serve as a surveyed route) ----------
   Coal band; an orange chalk line draws itself down the page as you scroll
   (animation-timeline: view(), static full line otherwise) and each town is
   a station on the route that scrubs in as it enters the viewport. Lyman is
   the home-base station. Pure CSS - no JS involved. */

.route-band {
  background: var(--coal);
  color: var(--paper);
  padding: calc(var(--section) * 0.85) 0;
  overflow: hidden;
  overflow: clip; /* clip, not hidden: view() timelines must stay on the viewport */
}
.route-band .eyebrow { color: rgba(244, 244, 245, 0.7); justify-content: center; max-width: none; }
.route-band h2 { color: var(--white); text-align: center; max-width: none; }
.route {
  position: relative;
  max-width: 860px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  view-timeline: --route; /* shared by the line draw and the survey head */
}
.route-line {
  position: absolute;
  /* start at the first marker, end at the last one */
  top: clamp(26px, 3.2vw, 46px);
  bottom: clamp(26px, 3.2vw, 46px);
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: var(--accent);
  transform-origin: top;
}
.route-stops {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none; /* opt out of the global prose width on ol */
}
.route-stop {
  position: relative;
  width: 50%;
  padding: clamp(14px, 2.2vw, 24px) clamp(30px, 4.5vw, 60px);
}
.route-stop:nth-child(odd) { text-align: right; }
.route-stop:nth-child(even) { margin-left: 50%; text-align: left; }
.route-marker {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  background: var(--coal);
  border: 3px solid var(--accent);
  transform: rotate(45deg);
}
.route-stop:nth-child(odd) .route-marker { right: -6.5px; }
.route-stop:nth-child(even) .route-marker { left: -6.5px; }
.route-town {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.1;
  text-transform: uppercase;
  --_ink: var(--paper);
  color: var(--_ink);
  -webkit-text-stroke: 1.5px transparent;
}
.route-home .route-town { --_ink: var(--accent); }
.route-home .route-marker { background: var(--accent); }
/* the survey head: an orange plumb diamond that rides the tip of the line
   as it draws. Only shown when the scroll scrub is running. */
.route-track {
  display: none;
  position: absolute;
  top: clamp(26px, 3.2vw, 46px);
  bottom: clamp(26px, 3.2vw, 46px);
  left: 50%;
  width: 0;
}
.route-head {
  position: absolute;
  top: 0;
  left: 0;
  width: 17px;
  height: 17px;
  margin: -8.5px 0 0 -8.5px;
  background: var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 0 5px rgba(255, 127, 0, 0.22);
}
.route-note {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 244, 245, 0.7);
}
/* terminus: the route runs on past the last station as a fading dashed
   segment, capped with a tilted survey tag (same prop language as the
   footer credit tag) */
.route-end { text-align: center; }
.route-dash {
  display: block;
  width: 3px;
  height: clamp(48px, 6vw, 76px);
  margin: calc(clamp(26px, 3.2vw, 46px) * -0.4) auto clamp(18px, 2.5vw, 26px);
  background: repeating-linear-gradient(to bottom, var(--accent) 0 9px, transparent 9px 18px);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
  mask-image: linear-gradient(to bottom, #000 30%, transparent);
}
.route-end-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 25px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: var(--accent);
  color: var(--coal);
  padding: 10px 20px 9px;
  rotate: -2deg;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
}
.route-end-note {
  max-width: none; /* opt out of the global prose width */
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 244, 245, 0.7);
}
/* mobile: line moves to the left edge, stations stack on one side */
@media (max-width: 720px) {
  .route-line { left: 8px; margin-left: 0; }
  .route-track { left: 9.5px; }
  .route-stop,
  .route-stop:nth-child(odd),
  .route-stop:nth-child(even) { width: 100%; margin-left: 0; padding: 14px 0 14px 40px; text-align: left; }
  .route-stop:nth-child(odd) .route-marker { right: auto; }
  .route-stop:nth-child(odd) .route-marker,
  .route-stop:nth-child(even) .route-marker { left: 3px; }
  .route-end { text-align: left; padding-left: 40px; }
  .route-dash { margin-left: 8px; }
}
/* the survey scrub: line draws down with the head riding its tip, stations
   rise, markers stamp in, town names ink from hollow to solid */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .route-line {
      animation: route-draw 1s linear both;
      animation-timeline: --route;
      /* tip of the line roughly tracks the stations as they set: fully
         drawn once the bottom of the route reaches mid-viewport */
      animation-range: cover 0% cover 75%;
    }
    .route-track { display: block; }
    .route-head {
      animation: head-travel 1s linear both;
      animation-timeline: --route;
      animation-range: cover 0% cover 75%;
    }
    .route-stop {
      view-timeline: --stop;
      animation: stop-set 1s var(--ease-out) both;
      animation-timeline: --stop;
      animation-range: entry 0% entry 90%;
    }
    .route-marker {
      animation: marker-stamp 1s var(--ease-out) both;
      animation-timeline: --stop;
      animation-range: entry 0% contain 12%;
    }
    .route-town {
      animation: town-ink 1s linear both;
      animation-timeline: --stop;
      animation-range: entry 0% contain 15%;
    }
  }
}
@keyframes route-draw {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes head-travel {
  from { top: 0%; opacity: 1; }
  92% { opacity: 1; }
  to { top: 100%; opacity: 0; }
}
/* start fully transparent, not dimmed: a dimmed-but-visible station is a
   color-contrast failure to axe, while opacity 0 is treated as hidden (the
   station is below the viewport at that point of the range anyway) */
@keyframes stop-set {
  from { opacity: 0; translate: 0 26px; }
  to { opacity: 1; translate: 0 0; }
}
/* the station diamond drops in oversized and presses down like a stake */
@keyframes marker-stamp {
  from { transform: rotate(45deg) scale(2.4); opacity: 0; }
  45% { transform: rotate(45deg) scale(2.4); opacity: 0; }
  70% { opacity: 1; }
  to { transform: rotate(45deg) scale(1); opacity: 1; }
}
/* hollow outline first, then the fill inks in */
@keyframes town-ink {
  from { color: transparent; -webkit-text-stroke-color: rgba(244, 244, 245, 0.85); }
  55% { color: transparent; }
  to { color: var(--_ink); -webkit-text-stroke-color: transparent; }
}

/* ---------- sections ---------- */

.section { padding: calc(var(--section) * 0.72) 0; }
main > .section:last-of-type { padding-bottom: var(--section); }
.section-mist { background: var(--white); padding: calc(var(--section) * 0.85) 0; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
@media (max-width: 767px) {
  .two-col { grid-template-columns: 1fr; }
}

.media-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: start;
}
/* the truck source is only 241px wide; render at 150 CSS px (the old site's
   size) so it stays sharp on 2x screens */
.media-row .photo-frame img { width: 150px; height: auto; }
/* -lg: real photos (forestry machines) render at a proper column width */
.media-row .photo-frame-lg img { width: min(420px, 100%); }
@media (max-width: 599px) {
  .media-row { grid-template-columns: 1fr; }
  /* text first on mobile: keeps the photo out of the first viewport so it
     does not compete with the hero LCP download (and reads better) */
  .media-row .photo-frame-lg { order: 2; }
  .media-row .photo-frame-lg img { width: 100%; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  padding: 14px 26px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out), background-color 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-lg { font-size: 16px; padding: 17px 34px; }
.btn-accent { background: var(--accent); color: var(--coal); }
.btn-accent:hover { background: #ff9226; color: var(--coal); }
.btn-dark { background: var(--coal); color: var(--white); }
.btn-dark:hover { background: var(--coal-2); color: var(--white); }
.btn-ghost {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.14); color: var(--white); box-shadow: inset 0 0 0 2px var(--white); }
.header-cta { font-size: 14px; padding: 11px 18px; }

/* ---------- cards (home service teasers) ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 20px;
}
.card { background: none; position: relative; }
.card-media { overflow: hidden; }
.card-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.card:hover .card-media img { transform: scale(1.05); }
.card-body { padding: 18px 0 0; border-top: 4px solid var(--accent); margin-top: 0; }
.card-body h3 a { color: var(--ink); text-decoration: none; }
/* stretched link: the title's hit area covers the whole card, so the photo
   and the "... services ->" line click through to the page */
.card-body h3 a::after { content: ""; position: absolute; inset: 0; }
.card-body h3 a:hover, .card:hover .card-body h3 a { background: var(--accent); }
.card-body p { font-size: 16px; color: var(--ink-soft); margin-bottom: 10px; }
.card-link {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0 !important;
}
@media (max-width: 899px) {
  .card-grid { grid-template-columns: 1fr; max-width: 520px; gap: 40px; }
}

/* ---------- estimate CTA band ---------- */

.cta-band { background: var(--coal); }
.cta-band .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-top: clamp(52px, 7vw, 80px);
  padding-bottom: clamp(52px, 7vw, 80px);
}
.cta-band h2 { color: var(--white); margin-bottom: 8px; }
.cta-band p { margin: 0; font-size: 18px; color: var(--silver); }

/* ---------- photos and galleries ---------- */

/* Every grid is a fixed-row mosaic (2026-10-10): portrait photos from the
   client's new set span two rows (js/gallery.js adds .is-portrait) and dense
   flow backfills, so mixed orientations pack without holes instead of all
   cropping to the same flat 4:3. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(140px, 15vw, 215px);
  grid-auto-flow: dense;
  gap: 14px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.photo-grid li { margin: 0; height: 100%; }
.photo-grid button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--ease-out), filter 0.45s ease;
}
.photo-grid .is-portrait { grid-row: span 2; }
/* two-photo grids (forestry page) run as a full-width pair */
.photo-grid-pair { grid-template-columns: repeat(2, 1fr); }
.photo-grid button:hover img { transform: scale(1.06); filter: brightness(1.06); }
@media (max-width: 767px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(110px, 26vw, 170px); gap: 8px; }
}

/* ---------- job wall (home): four "core samples", one per trade. Tall
   contained strips; the hovered/focused one widens and its stamp heats
   orange. Static links to /gallery/, so no JS and nothing to lazy-build.
   The closer is a single dig-ledger row. */
.jw-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(16px, 2.6vw, 26px);
  padding-bottom: 14px;
  border-bottom: 3px solid var(--ink);
}
.jw-head .eyebrow { margin: 0; }
.jw-tally {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
}
.cores {
  display: flex;
  gap: 12px;
  height: clamp(380px, 38vw, 540px);
}
.core {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  transition: flex-grow 0.55s var(--ease-out);
}
.core img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.45s ease;
}
/* keep the excavator (upper half of the portrait shot) in frame on the
   short mobile bands */
.core:nth-child(1) img { object-position: 50% 38%; }
.core:hover,
.core:focus-visible { flex-grow: 2.4; }
.core:hover img,
.core:focus-visible img { filter: brightness(1.06); }
.core:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* the trade stamp: coal chip, numbered like the dig index; heats orange
   (accent bg, black text - the validated pairing) on the open strip */
.core-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper);
  background: var(--coal);
  padding: 8px 14px 7px 12px;
  transition: background 0.3s ease, color 0.3s ease;
}
.core-no { color: var(--accent); transition: color 0.3s ease; }
.core:hover .core-tag,
.core:focus-visible .core-tag { background: var(--accent); color: var(--coal); }
.core:hover .core-no,
.core:focus-visible .core-no { color: var(--coal); }
.job-wall .jw-more { margin-top: clamp(24px, 3.4vw, 40px); }
@media (max-width: 767px) {
  /* phones: the strips stack as wide bands; no expansion, every stamp lit */
  .cores { flex-direction: column; height: auto; gap: 8px; }
  .core { flex: none; height: clamp(120px, 36vw, 180px); }
}
@media (max-width: 599px) {
  .jw-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .jw-tally { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .core, .core img, .core-tag, .core-no { transition: none; }
}
/* the develop: tiles rise and ink from gray to full color as they cross
   into view, same scrubbed language as the route band. Extended from the
   home strip to every photo grid 2026-10-10. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .photo-grid li {
      animation: tile-develop 1s var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 5% entry 95%;
    }
  }
}
@keyframes tile-develop {
  from { opacity: 0; translate: 0 30px; filter: grayscale(1) brightness(0.75); }
  50% { opacity: 1; translate: 0 0; filter: grayscale(1) brightness(0.88); }
  to { opacity: 1; translate: 0 0; filter: grayscale(0) brightness(1); }
}

/* gallery page: field index (a dig-ledger of anchors) + trade chapters.
   Replaced the filter tabs 2026-10-10: instead of hiding photos behind
   pills, the page is a ledger of four chapters you can read end to end. */
.gal-lede { margin-bottom: clamp(28px, 4.4vw, 48px); }
/* photo count on each index row, filled by js/gallery.js */
.dig-count {
  font-family: var(--font-display);
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
}
/* phones: "Forestry Mulching" plus a count overflows the row; the chapter
   heads below carry the counts anyway */
@media (max-width: 599px) {
  .gal-index .dig-count { display: none; }
}
/* chapter sections: anchor targets clear the sticky header (90px logo + padding) */
.chapter { scroll-margin-top: 130px; }
.chap-head {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 22px);
  margin-bottom: clamp(18px, 2.8vw, 30px);
  padding-bottom: 14px;
  border-bottom: 3px solid var(--ink);
}
.chap-head .dig-no { align-self: center; }
.chap-word {
  margin: 0;
  font-size: clamp(26px, 4.2vw, 54px);
  line-height: 1.08;
  text-transform: uppercase;
  white-space: nowrap;
}
.chap-leader {
  flex: 1;
  min-width: 28px;
  align-self: flex-end;
  margin-bottom: 0.45em;
  border-bottom: 3px dotted var(--line);
}
.chap-tally {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
}
@media (max-width: 599px) {
  .chap-word { font-size: clamp(20px, 6.2vw, 26px); }
  .chap-leader { min-width: 0; }
}

/* lightbox */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(96vw, 1100px);
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.92); }
.lightbox figure { margin: 0; background: var(--coal); padding: 10px; }
.lightbox img {
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
}
/* counter bar: position counter only, right-aligned (no caption text -
   lightbox captions were removed site-wide 2026-09-26) */
.lightbox .lb-caption {
  display: flex;
  justify-content: flex-end;
  padding: 10px 2px 0;
}
.lightbox .lb-count {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--accent);
  white-space: nowrap;
}
.lightbox .lightbox-controls {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0 0;
}
.lightbox .lightbox-controls button {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--coal);
  color: var(--accent);
  border: 0;
  padding: 9px 16px;
  cursor: pointer;
}
.lightbox .lightbox-controls button:hover { background: var(--coal-2); }

/* ---------- testimonials ---------- */

.quote-block, .spot-quote { margin: 0; padding: 0; }
.quote-block::before, .spot-quote::before {
  content: '\201C';
  display: block;
  font-family: var(--font-display);
  font-size: 84px;
  line-height: 0.9;
  height: 0.48em;
  overflow: hidden;
  color: var(--accent);
  margin-bottom: 16px;
}
.quote-block p, .spot-quote p { max-width: 62ch; font-size: 17px; margin-bottom: 14px; }
.quote-block footer strong, .spot-quote footer strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.quote-block footer span, .spot-quote footer span {
  display: block;
  margin-top: 2px;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* estimates page: one lead quote, then a two-column wall */
.quote-lead { margin: 40px 0 52px; }
.quote-lead p { font-size: clamp(19px, 2.3vw, 24px); }
.quote-wall { columns: 2; column-gap: 64px; }
.quote-wall .quote-block {
  break-inside: avoid;
  margin-bottom: 46px;
  page-break-inside: avoid; /* older engines */
}
@media (max-width: 860px) { .quote-wall { columns: 1; } }

/* home page: the quote deck - a full-bleed coal band. Ledger head like the
   dig index, intro column left, the rotating spotlight right, and a giant
   hollow quote mark watermarked behind it all. */
.quote-deck {
  position: relative;
  background: var(--coal);
  color: var(--paper);
  padding: calc(var(--section) * 0.85) 0;
  overflow: hidden;
  overflow: clip;
}
/* watermark: a huge open-quote drawn in outline only (faint solid where
   text-stroke is unsupported); pure decoration */
.quote-deck::before {
  content: '\201C';
  position: absolute;
  /* Anton draws the mark in the top ~0.4em of its box; this drops the
     visible glyph behind the spotlight column, clear of the head rule */
  top: 0.26em;
  right: -0.06em;
  font-family: var(--font-display);
  font-size: clamp(260px, 34vw, 540px);
  line-height: 1;
  color: rgba(181, 184, 189, 0.1);
  pointer-events: none;
}
@supports (-webkit-text-stroke: 2px #fff) {
  .quote-deck::before {
    color: transparent;
    -webkit-text-stroke: 2px rgba(181, 184, 189, 0.28);
  }
}
.qd-head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(20px, 3vw, 36px);
  padding-bottom: 14px;
  border-bottom: 3px solid rgba(244, 244, 245, 0.22);
}
.quote-deck .eyebrow { color: #d9dbdf; margin: 0; }
.qd-tally {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
  text-align: right;
}
.qd-grid {
  position: relative;
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (min-width: 960px) {
  .qd-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
.quote-deck h2 { color: var(--white); }
.qd-intro p { color: #c9ccd0; }
.qd-intro a { color: var(--white); }
/* on coal, the spotlight speaks paper and orange */
.quote-deck .quote-spotlight { margin-top: 0; }
.quote-deck .spot-quote p {
  color: var(--white);
  font-size: clamp(19px, 2.3vw, 27px);
  line-height: 1.5;
  max-width: 50ch;
}
.quote-deck .spot-quote footer strong { color: var(--accent); }
.quote-deck .spot-quote footer span { color: var(--silver); }
.quote-deck .spot-progress { background: rgba(244, 244, 245, 0.18); max-width: 420px; }
/* two coal bands meet here; a hairline keeps the CTA legible as its own row */
.quote-deck + .cta-band { border-top: 1px solid rgba(244, 244, 245, 0.16); }

/* home page: rotating spotlight, one quote at a time */
.quote-spotlight { margin-top: 36px; }
.spot-stage { display: grid; align-items: start; }
/* JS keeps the stage height matched to the active quote so short quotes do
   not leave a gap; the height eases between slides. */
@media (prefers-reduced-motion: no-preference) {
  .spot-stage { transition: height 0.45s ease; }
}
.spot-quote { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.spot-quote.is-active { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .spot-quote { transition: opacity 0.5s ease, visibility 0s linear 0.5s; }
  .spot-quote.is-active { transition: opacity 0.5s ease 0.15s; }
}
.spot-quote p { font-size: clamp(18px, 2.2vw, 23px); }

/* entrance: the glyph stamps in, then the quote and attribution rise */
@media (prefers-reduced-motion: no-preference) {
  .spot-quote.is-active::before {
    animation: spot-stamp 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  }
  .spot-quote.is-active p { animation: spot-rise 0.55s ease 0.1s both; }
  .spot-quote.is-active footer { animation: spot-rise 0.55s ease 0.22s both; }
}
@keyframes spot-stamp {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes spot-rise {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* the 7s cycle, drawn as a filling orange line (JS adds it only when motion
   is allowed; .is-playing restarts the fill, .is-paused freezes it) */
.spot-progress {
  display: block;
  position: relative;
  overflow: hidden;
  height: 3px;
  max-width: 340px;
  margin-top: 26px;
  background: var(--line);
}
.spot-progress::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
.quote-spotlight.is-playing .spot-progress::before {
  animation: spot-fill 7s linear both;
}
.quote-spotlight.is-paused .spot-progress::before { animation-play-state: paused; }
@keyframes spot-fill { to { transform: scaleX(1); } }

/* numbered index stamps (the spotlight lives on the coal deck) */
.spot-ticks { display: flex; margin-top: 14px; margin-left: -14px; }
.spot-tick {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: rgba(244, 244, 245, 0.6);
  transition: color 0.2s ease;
}
.spot-tick::after {
  content: '';
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 7px;
  height: 3px;
  background: transparent;
  transition: background 0.2s ease;
}
.spot-tick:hover { color: var(--white); }
.spot-tick.is-active { color: var(--accent); }
.spot-tick.is-active::after { background: var(--accent); }
.spot-tick:focus-visible { outline: 3px solid var(--accent); outline-offset: -6px; }

/* ---------- estimate form (dark panel) ---------- */

.estimate-form {
  max-width: 760px;
  background: var(--coal);
  color: #dfe1e4;
  padding: clamp(26px, 4.5vw, 48px);
  scroll-margin-top: 90px;
}
.form-head { margin-bottom: 28px; }
.form-head h2 {
  color: #fff;
  font-size: clamp(26px, 3.4vw, 34px);
  margin-bottom: 10px;
}
.form-head p { color: var(--silver); max-width: none; margin: 0; }
.estimate-form a { color: #fff; text-decoration-color: var(--accent); }
.estimate-form a:hover { color: var(--accent); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
  margin-bottom: 22px;
  align-items: start;
}
.estimate-form .field { min-width: 0; }
.estimate-form > .field { margin-bottom: 22px; }
.estimate-form label,
.estimate-form legend {
  display: block;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9ba1a9;
  margin-bottom: 8px;
  padding: 0;
}
.estimate-form input[type='text'],
.estimate-form input[type='email'],
.estimate-form input[type='tel'],
.estimate-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 17px;
  color: #fff;
  padding: 12px 14px;
  background: #1d1d1f;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.estimate-form ::placeholder { color: #8b9098; opacity: 1; }
.estimate-form input:focus,
.estimate-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 127, 0, 0.25);
}
.estimate-form textarea { min-height: 130px; resize: vertical; }

.pill-fieldset { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.form-grid .pill-fieldset { margin-bottom: 0; }
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { position: relative; display: inline-block; }
.pill input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.pill span {
  display: inline-block;
  padding: 9px 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  color: #dfe1e4;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pill:hover span { border-color: rgba(255, 255, 255, 0.6); }
.pill input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--coal);
}
.pill input:focus-visible + span {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.estimate-form .btn { width: 100%; text-align: center; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* honeypot: hidden from people, present for bots */
.hp-field { position: absolute; left: -9999px; }

.form-status { font-weight: 600; padding: 12px 16px; margin-bottom: 20px; }
.form-status.success { background: var(--accent); color: var(--coal); }
.form-status.error { background: #fbe9dd; color: #8f2c0c; }

/* ---------- service-page strata (2026-09-26, septic first) ----------
   The service pages read as layers of cut ground: coal and paper sections
   separated by hard diagonal wedges, the same geometry language as the
   home hero seam. The wedges are pseudo-elements that hang over the next
   section, so the neighbor needs the matching .pad-*-cut clearance class.
   Everything here is static - no animation on these pages by request. */

.strata { position: relative; --cut: clamp(26px, 4vw, 60px); }
/* tighter rhythm than .section - the cuts already read as separation,
   so the strata do not need the full section gap on top (2026-09-26) */
.strata-coal { background: var(--coal); padding: calc(var(--section) * 0.55) 0; }
.strata-paper { padding: calc(var(--section) * 0.55) 0; }
.strata-coal h2, .strata-coal h3 { color: var(--white); }
.strata-coal p { color: #c9ccd1; }
.strata-coal .eyebrow { color: #d9dbdf; }

/* coal wedge below the slab; the -seam variant slips an orange band under
   the diagonal, echoing the home hero seam */
.cut-below-seam::before,
.cut-below-seam::after,
.cut-below::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--cut);
  clip-path: polygon(0 0, 100% 0, 0 100%); /* slab runs deeper on the left */
  pointer-events: none;
}
.cut-below-seam::before { background: var(--accent); translate: 0 9px; }
.cut-below-seam::after, .cut-below::after { background: var(--coal); }
/* coal wedge above the slab, leaning the other way. Uses ::after so it
   never collides with the .show-todos [data-todo]::before label */
.cut-above::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: var(--cut);
  background: var(--coal);
  clip-path: polygon(0 100%, 100% 0, 100% 100%); /* rises to the right */
  pointer-events: none;
}
/* the diagonal wedge itself reads as the section break, so the clearance
   only needs the wedge height plus a modest breath - not a full gap */
.pad-top-cut { padding-top: calc(var(--section) * 0.45 + var(--cut, clamp(26px, 4vw, 60px))); }
.pad-bottom-cut { padding-bottom: calc(var(--section) * 0.3 + var(--cut, clamp(26px, 4vw, 60px))); }

/* statement slab: three stacked display words + the intro copy */
.statement-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.statement { margin: 0; }
.st-line {
  display: block;
  font-size: clamp(46px, 6vw, 100px);
  line-height: 0.95;
  letter-spacing: 0.01em;
}
.st-white { color: var(--white); }
.st-orange { color: var(--accent); }
.st-hollow { color: var(--silver); }
@supports (-webkit-text-stroke: 2px #fff) {
  .st-hollow { color: transparent; -webkit-text-stroke: 2px var(--silver); }
}
.statement-copy .btn { margin-top: 10px; }
@media (max-width: 899px) {
  .statement-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* field guide: numbered explainer entries on paper */
.field-guide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 52px) clamp(36px, 5vw, 72px);
  margin-top: clamp(20px, 3vw, 36px);
}
.fg-item { border-top: 1px solid var(--line); padding-top: 18px; }
.fg-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(44px, 4.5vw, 68px);
  line-height: 1;
  color: var(--ink);
  margin-bottom: 12px;
}
@supports (-webkit-text-stroke: 2px #fff) {
  .fg-num { color: transparent; -webkit-text-stroke: 2px var(--ink); }
}
.fg-item h3 { margin-bottom: 8px; }
.fg-item p { margin: 0; }
@media (max-width: 767px) {
  .field-guide { grid-template-columns: 1fr; }
}

/* "when to call" strip: coal panel, same family as the home fact stack */
.fg-call {
  background: var(--coal);
  border-top: 6px solid var(--accent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  padding: clamp(24px, 3.5vw, 44px);
  display: grid;
  grid-template-columns: 1.5fr auto;
  gap: clamp(24px, 3.5vw, 48px);
  align-items: center;
  margin-top: clamp(32px, 4.5vw, 56px);
}
.fg-call h3 { color: var(--white); }
.fg-call p { color: #c9ccd1; margin: 0; }
.fg-call a:not(.btn) { color: var(--white); }
.fg-call-actions { display: flex; flex-direction: column; gap: 12px; }
.fg-call-actions .btn { text-align: center; }
@media (max-width: 767px) {
  .fg-call { grid-template-columns: 1fr; }
}

/* survey-stake steps: numbered stations off a vertical orange line */
.stake-steps {
  list-style: none;
  counter-reset: stake;
  margin: 10px 0 0;
  padding: 0;
  max-width: 760px;
  position: relative;
}
.stake-steps::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--accent);
}
.stake-steps li {
  counter-increment: stake;
  position: relative;
  padding: 0 0 32px 104px;
  color: #c9ccd1;
  max-width: 70ch;
}
.stake-steps li:last-child { padding-bottom: 0; }
.stake-steps li::before {
  content: counter(stake, decimal-leading-zero);
  position: absolute;
  left: 38px;
  top: -10px;
  font-family: var(--font-display);
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1;
  color: var(--accent);
}
.stake-steps li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 26px;
  height: 3px;
  background: var(--accent);
}
.stake-steps strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 21px;
  color: var(--white);
  margin-bottom: 6px;
}
@media (max-width: 599px) {
  .stake-steps li { padding-left: 78px; }
  .stake-steps li::before { left: 30px; }
  .stake-steps li::after { width: 20px; }
}

/* spec ledger: the full excavation service list as numbered plates.
   Numbers are ink, not orange - orange text never sits on paper (2.3:1) */
.spec-ledger {
  list-style: none;
  counter-reset: spec;
  margin: clamp(24px, 3.5vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(36px, 5vw, 72px);
}
.spec-ledger li {
  counter-increment: spec;
  position: relative;
  border-top: 1px solid var(--line);
  padding: 14px 0 14px 58px;
}
.spec-ledger li::before {
  content: counter(spec, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 14px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
}
.spec-ledger li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 3px;
  background: var(--accent);
}
.spec-ledger strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 18px;
  color: var(--ink);
}
.spec-ledger span { color: var(--ink-soft); font-size: 15px; }
@media (max-width: 767px) {
  .spec-ledger { grid-template-columns: 1fr; }
}

/* paper intro as two columns so the copy does not leave half the page empty */
.lede-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  margin-bottom: clamp(20px, 3vw, 36px);
}
.lede-grid p:last-child { margin-bottom: 0; }
@media (max-width: 899px) {
  .lede-grid { grid-template-columns: 1fr; gap: 0; }
}

/* build index: landscaping's short list as big display plates */
.build-index {
  list-style: none;
  counter-reset: build;
  margin: clamp(20px, 3vw, 32px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(36px, 5vw, 72px);
}
.build-index li {
  counter-increment: build;
  position: relative;
  border-top: 1px solid var(--line);
  padding: 16px 0 16px 64px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.1;
  color: var(--ink);
}
.build-index li::before {
  content: counter(build, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 20px;
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--ink-soft);
}
.build-index li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 3px;
  background: var(--accent);
}
@media (max-width: 767px) {
  .build-index { grid-template-columns: 1fr; }
}

/* big pull quote */
.quote-band { background: var(--white); padding: calc(var(--section) * 0.6) 0; }
/* the quote band and the section after it are both light, so their
   paddings would stack into a big empty gap - halve the follower's top */
.quote-band + .section { padding-top: calc(var(--section) * 0.35); }
.big-quote { margin: 0; max-width: 940px; }
.big-quote::before {
  content: '';
  display: block;
  width: 64px;
  height: 6px;
  background: var(--accent);
  margin-bottom: 24px;
}
.big-quote blockquote { margin: 0; }
.bq-line {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(30px, 4.6vw, 62px);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: none;
  text-wrap: balance;
}
.big-quote figcaption {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bq-more { margin: 14px 0 0; }
/* longer quotes drop a size so they stay a statement, not a wall */
.bq-long { font-size: clamp(24px, 3.2vw, 44px); }
/* quote inside a coal strata (excavation / landscaping) */
.strata-coal .bq-line { color: var(--white); }
.strata-coal .big-quote figcaption { color: #c9ccd1; }
.strata-coal .bq-more a { color: var(--white); }

/* photo spread: first tile leads at double size. The lead image is
   absolutely positioned so its intrinsic ratio (some leads are portrait)
   never inflates the grid rows - the small 4/3 tiles set the rhythm and
   the lead crops to fill its 2x2 area. */
.photo-grid-feature li:first-child { grid-column: span 2; grid-row: span 2; position: relative; }
.photo-grid-feature li:first-child button { position: absolute; inset: 0; }
.photo-grid-feature li:first-child img { height: 100%; aspect-ratio: auto; }
@media (max-width: 767px) {
  .photo-grid-feature li:first-child { grid-column: 1 / -1; grid-row: span 2; }
}
.grid-more { font-weight: 600; }

/* ---------- about facts (home page): copy + coal fact panel ---------- */

.about-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(40px, 5.5vw, 80px);
  align-items: start;
}
/* first paragraph reads as a lede */
.about-grid .lede {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--ink);
}
/* orange underline swash on the key word in the h2 */
.u-mark {
  background: linear-gradient(var(--accent), var(--accent)) 0 92% / 100% 0.13em no-repeat;
  padding-bottom: 0.06em;
}
/* the facts sit on a coal panel so the block anchors the white section */
.fact-stack {
  display: grid;
  gap: 0;
  background: var(--coal);
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) clamp(10px, 1.4vw, 18px);
  border-top: 6px solid var(--accent);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
}
.fact {
  padding: 16px 0 16px 18px;
  border-left: 3px solid var(--accent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 2px;
}
.fact:last-child { border-bottom: 0; }
.fact strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.fact span { font-size: 17px; color: var(--white); line-height: 1.45; }
@media (max-width: 899px) {
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- contact map ---------- */

.js-map iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
  filter: grayscale(0.35) contrast(1.02);
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--coal);
  color: var(--silver);
  border-top: 6px solid var(--accent);
}
.site-footer a { color: var(--white); text-decoration-color: var(--accent); }
.site-footer a:hover { background: var(--accent); color: var(--coal); }
.footer-wordmark { margin-bottom: 18px; }
.footer-wordmark .wordmark-name { font-size: 30px; }
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-top: clamp(56px, 6vw, 80px);
  padding-bottom: 48px;
}
.site-footer h2 {
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.site-footer .footer-h2-gap { margin-top: 28px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer li a { text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; }
.site-footer p { margin-bottom: 10px; }
.site-footer .footer-contact li { color: var(--silver); line-height: 1.5; margin-bottom: 12px; }

/* Chamber of Commerce badge: monochrome silver stamp of the chamber mark,
   sitting straight on the coal like the rest of the footer's silver text.
   Deliberately not a link. */
.chamber-badge { display: inline-block; margin-top: 16px; line-height: 0; }
.chamber-badge img { display: block; width: 128px; height: auto; opacity: 0.85; }

/* brand column: short tag line and a display-type phone number */
.footer-brand .footer-tag {
  max-width: 30ch;
  margin-bottom: 22px;
  line-height: 1.55;
}
.site-footer .footer-phone {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 42px);
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--accent);
  text-decoration: none;
}
.site-footer .footer-phone:hover { background: none; color: var(--white); }
.footer-phone-note {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
}
.site-footer .social-links { display: flex; gap: 16px; margin-top: 4px; }
.site-footer .social-links a { display: inline-flex; padding: 4px; }
.site-footer .social-links a:hover { background: none; }
.site-footer .social-links svg { width: 26px; height: 26px; fill: var(--white); }
.site-footer .social-links a:hover svg { fill: var(--accent); }
.site-footer .where-we-work {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 18px;
  padding-bottom: 8px;
  font-size: 15px;
}
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 18px;
  padding-bottom: 22px;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* the designer credit as a little orange survey tag: angled like the tape
   band, floating gently (decoration - guarded), pops flat on hover */
.site-footer a.site-credit,
.site-footer a.site-credit:hover {
  color: var(--coal); /* orange always carries black text */
  background: var(--accent);
}
.site-credit {
  display: inline-grid;
  gap: 1px;
  justify-items: start;
  background: var(--accent);
  color: var(--coal);
  text-decoration: none;
  padding: 8px 16px 9px;
  rotate: -2deg;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  transition: rotate 0.25s var(--ease-out), scale 0.25s var(--ease-out), box-shadow 0.25s ease;
}
.site-credit .sc-by {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.site-credit .sc-name {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-credit:hover,
.site-credit:focus-visible {
  rotate: 0deg;
  scale: 1.06;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
}
@media (prefers-reduced-motion: no-preference) {
  .site-credit { animation: credit-bob 3.4s ease-in-out infinite; }
  .site-credit:hover, .site-credit:focus-visible { animation-play-state: paused; }
}
@keyframes credit-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}
@media (max-width: 1023px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; }
}

/* ---------- sticky mobile call bar ---------- */

.call-bar { display: none; }
@media (max-width: 767px) {
  .call-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--coal);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
  }
  .call-bar a {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--white);
    text-decoration: none;
    padding: 15px 8px;
  }
  .call-bar a + a { background: var(--accent); color: var(--coal); }
  .call-bar.call-bar-hidden { display: none; }
  body { padding-bottom: 64px; } /* room for the call bar */
}

/* ---------- before/after slider (landscaping, only if photos exist) ---------- */

.ba-slider { overflow: hidden; }