/*
 * Smithville General Services
 * One stylesheet, one self-hosted font, no scripts.
 *
 * Palette comes from the rebar yard: concrete, mill-scale black bar,
 * green epoxy-coated bar, and the caution yellow painted on machine guards.
 * The tread-plate texture is the background tile from the original site.
 */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
}

:root {
  --concrete: #E6E8E3;
  --slab: #F5F6F2;
  --mill: #17212A;
  --mill-lift: #232F3A;
  --steel: #55606A;
  --steel-on-dark: #A9B4BC;
  --epoxy: #17694A;
  --epoxy-bright: #4DBE92;
  --caution: #F2BC1B;
  --fault: #A1321A;

  --bar: 6px;                 /* thickness of the bar rules */
  --plate-size: 400px;        /* displayed size of the tread-plate tile */
  --gutter: clamp(1rem, 4vw, 3rem);
  --band: clamp(3.5rem, 8vw, 6.5rem);

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Surface tokens: the colours of whatever sits on the current background.
     These are the values for a light (concrete) surface. Dark surfaces
     redefine them once, in the "Tread plate" section, and every component
     inside follows without needing its own dark rule. */
  --ink: var(--mill);
  --ink-soft: var(--mill-lift);
  --ink-quiet: var(--steel);
  --ink-inverse: var(--slab);
  --accent: var(--epoxy);
  --accent-ink: #fff;
  --accent-hover: #115439;
  --rule: var(--mill);
  --focus: var(--mill);
}

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

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

body {
  margin: 0;
  background: var(--concrete);
  color: var(--mill);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.55;
  font-stretch: 100%;
  font-synthesis: none;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { display: block; max-width: 100%; }

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

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

h1, h2, h3 { text-wrap: balance; }

h1 {
  font-size: clamp(2.5rem, 4.6vw + 1rem, 4.75rem);
  font-weight: 800;
  font-stretch: 122%;
  line-height: 1.02;
  letter-spacing: -0.022em;
}

h2 {
  font-size: clamp(1.7rem, 1.8vw + 1rem, 2.5rem);
  font-weight: 760;
  font-stretch: 118%;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

h3 {
  font-size: 1.25rem;
  font-weight: 720;
  font-stretch: 112%;
  line-height: 1.25;
}

.lede {
  color: var(--ink-soft);
  font-size: clamp(1.15rem, 0.6vw + 1rem, 1.375rem);
  line-height: 1.5;
  max-width: 38em;
}

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--mill);
  color: var(--slab);
}
.skip:focus { top: 0.5rem; }

/* ---------- Setup notice (only while config.php holds placeholders) ---------- */

.setup-note {
  padding: 0.55rem var(--gutter);
  background: var(--fault);
  color: #fff;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.setup-note code { font-family: inherit; font-weight: 700; }

/* ---------- Buttons: round-ended, like cut bar stock ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.6rem 1.6rem;
  border: 3px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 720;
  font-stretch: 110%;
  line-height: 1.15;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--ink-inverse); }
.btn--call { min-height: 2.75rem; padding: 0.4rem 1.2rem; background: var(--mill); color: var(--slab); white-space: nowrap; }
.btn--call:hover { background: var(--epoxy); }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Header ---------- */

.site-head { background: var(--concrete); }
.site-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  padding-block: 1.1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  color: var(--mill);
  text-decoration: none;
}
.brand__mark { width: 2.4rem; height: 2.4rem; flex: none; color: var(--epoxy); }
.brand__name {
  font-weight: 800;
  font-stretch: 122%;
  font-size: 1.15rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.brand__rest { display: block; font-weight: 560; font-stretch: 100%; font-size: 0.95rem; letter-spacing: 0; color: var(--steel); }

.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; }
.site-nav a {
  display: inline-block;
  padding-block: 0.5rem;
  color: var(--mill);
  font-weight: 620;
  text-decoration: none;
  border-bottom: var(--bar) solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--steel); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--epoxy); }

/* ---------- Hero ---------- */

.hero { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4.5rem); overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.hero__text > * + * { margin-top: 1.6rem; }
.hero__text .actions { margin-top: 2.2rem; }
.hero__art { position: relative; margin-right: calc(var(--gutter) * -0.5); }

/* The photo fills the bottom-right corner of the bar drawing. The numbers are
   that corner's position inside the drawing's 576 x 486 viewBox, as
   percentages, so photo and bars scale together at every width. */
.hero__photo {
  position: absolute;
  left: 46.7%;
  top: 59.05%;
  width: 53.3%;
  height: 39.1%;
  object-fit: cover;
  border: 4px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.6);
}

/* Bars lie on the plate: light steel, one epoxy-coated, each casting a shadow. */
.bars { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.6)); }
.bar__steel {
  fill: none;
  stroke: var(--rule);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bar--stirrup .bar__steel { stroke: var(--accent); }
.bar__ribs {
  fill: none;
  stroke: var(--ink-inverse);
  stroke-width: 18;
  stroke-dasharray: 2 9;
  stroke-dashoffset: -12;
  opacity: 0.3;
}

/* Page-load motion: the bars feed out once, then the photo tips up. */
@media (prefers-reduced-motion: no-preference) {
  .bar__steel {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: feed 0.85s cubic-bezier(0.3, 0.1, 0.2, 1) both;
  }
  .bar__ribs { animation: ribs 0.3s linear both; }

  .bar--hook90  .bar__steel { animation-delay: 0.05s; }
  .bar--stirrup .bar__steel { animation-delay: 0.25s; animation-duration: 1.1s; }
  .bar--hook180 .bar__steel { animation-delay: 0.5s; }
  .bar--ubar    .bar__steel { animation-delay: 0.7s; }

  .bar--hook90  .bar__ribs { animation-delay: 0.85s; }
  .bar--stirrup .bar__ribs { animation-delay: 1.3s; }
  .bar--hook180 .bar__ribs { animation-delay: 1.3s; }
  .bar--ubar    .bar__ribs { animation-delay: 1.5s; }

  /* Once the bars are down, the photo tips up off the plate, hinged at its
     bottom edge. */
  .hero__photo {
    transform-origin: 50% 100%;
    animation: tip-up 0.75s cubic-bezier(0.2, 0.75, 0.25, 1) 1.15s both;
  }
}
@keyframes feed {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  2%   { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes ribs {
  from { opacity: 0; }
  to   { opacity: 0.3; }
}
@keyframes tip-up {
  from { opacity: 0; transform: perspective(900px) rotateX(-82deg); }
  35%  { opacity: 1; }
  to   { opacity: 1; transform: perspective(900px) rotateX(0deg); }
}

/* ---------- Bands ---------- */

.band { padding-block: var(--band); overflow-x: clip; }
.band--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--band); }
.band--caution { padding-block: clamp(2rem, 4.5vw, 3.25rem); background: var(--caution); color: var(--mill); }

.page-head { padding-block: clamp(2rem, 5vw, 4rem) clamp(2.25rem, 5vw, 4rem); }
.page-head h1 + .lede { margin-top: 1.4rem; }
.page-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

/* A bar rule: the divider used everywhere a line is needed. */
.trades > li::before,
.service::before,
.steps > li::before,
.scope > li::before,
.facts > li::before,
.terms h2::before {
  content: "";
  display: block;
  height: var(--bar);
  border-radius: var(--bar);
  background: var(--rule);
}

/* ---------- Home: what we repair ---------- */

.trades { margin-top: 2.5rem; }
.trades > li {
  display: grid;
  grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  padding-bottom: 2.25rem;
}
.trades > li::before { grid-column: 1 / -1; margin-bottom: 1.5rem; }
.trades h3 { font-size: clamp(1.35rem, 1vw + 1rem, 1.75rem); font-stretch: 118%; }
.trades p { max-width: 36em; color: var(--ink-soft); }
.more { margin-top: 0.25rem; font-weight: 650; }

/* ---------- Home: makes ---------- */

.quiet-h {
  font-size: 1.125rem;
  font-weight: 560;
  font-stretch: 100%;
  letter-spacing: 0;
  color: var(--ink-quiet);
}
.makes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 1.1em;
  margin-top: 0.75rem;
  font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.makes__note { margin-top: 2rem; max-width: 36em; color: var(--ink-quiet); }

/* KRB feature row: the maker's plate beside the owner's line about it. */
.krb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
  margin-top: 2rem;
}
.krb__logo {
  flex: none;
  width: clamp(9rem, 16vw, 13.5rem);
  height: auto;
  border-radius: 4px;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.55);
}
.krb__line {
  flex: 1 1 16rem;
  max-width: 18em;
  font-size: clamp(1.3rem, 1.2vw + 1rem, 1.9rem);
  font-weight: 720;
  font-stretch: 114%;
  line-height: 1.2;
  text-wrap: balance;
}
.also { margin-top: 3.5rem; }

/* ---------- Photos ---------- */

.shot img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio, 3 / 2);
  object-fit: cover;
  border-radius: 8px;
  background: var(--mill-lift);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
}
.shot figcaption { margin-top: 0.7rem; font-size: 0.9375rem; line-height: 1.35; color: var(--ink-soft); }
.shot--lead { --ratio: 16 / 9; }
.shot--about { --ratio: 4 / 3; }
.shot--about img { object-position: 28% 50%; }

.shots { display: grid; gap: 1.75rem clamp(1rem, 2.5vw, 2rem); margin-top: 2.5rem; }
.shots--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); --ratio: 1 / 1; }
.shots--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1rem; }

/* Photo motion. Photos further down the page turn over or slide in as they
   scroll into view; the motion is tied to the scroll position, so it needs no
   script. Browsers without scroll-driven animation simply show the photos. */
@media (prefers-reduced-motion: no-preference) {
  .shot--lead { animation: slide-from-right 0.7s cubic-bezier(0.2, 0.75, 0.25, 1) 0.25s both; }

  @supports (animation-timeline: view()) {
    .shots--flip > li,
    .shots--slide > li,
    .shot--about {
      animation: 1ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
    .shots--flip > li { animation-name: turn-over; }
    .shots--slide > li { animation-name: slide-from-right; }
    .shots--slide > li:nth-child(odd) { animation-name: slide-from-left; }
    .shot--about { animation-name: slide-from-right; }

    /* Each photo in a row starts a little after the one before it. */
    .shots > li:nth-child(2) { animation-range: entry 12% entry 97%; }
    .shots > li:nth-child(3) { animation-range: entry 24% cover 34%; }
    .shots > li:nth-child(4) { animation-range: entry 36% cover 38%; }
  }
}
@keyframes turn-over {
  from { opacity: 0; transform: perspective(1100px) rotateY(-78deg); }
  40%  { opacity: 1; }
  to   { opacity: 1; transform: perspective(1100px) rotateY(0deg); }
}
@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(3.5rem); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-from-left {
  from { opacity: 0; transform: translateX(-3.5rem); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---------- Home: steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem clamp(1.25rem, 2.5vw, 2.5rem);
  margin-top: 2.5rem;
  counter-reset: step;
}
.steps > li { counter-increment: step; }
.steps > li::before { margin-bottom: 1.1rem; }
.steps h3::before {
  content: counter(step);
  display: block;
  margin-bottom: 0.35rem;
  font-size: 3.25rem;
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
  color: var(--accent);
}
.steps p { margin-top: 0.5rem; color: var(--ink-soft); }

/* ---------- Call strip ---------- */

.callstrip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 2.5rem;
}
.callstrip__q { font-size: clamp(1.8rem, 2.6vw + 1rem, 3rem); font-weight: 800; font-stretch: 125%; }
.callstrip__a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  font-size: 1.2rem;
}
.callstrip a { color: var(--mill); }
.callstrip__phone { font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem); font-weight: 760; font-stretch: 112%; white-space: nowrap; }

/* ---------- Services ---------- */

.service {
  display: grid;
  grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  padding-bottom: 3rem;
}
.service:first-of-type { margin-top: 2.5rem; }
.service::before { grid-column: 1 / -1; margin-bottom: 1.5rem; }
.service h3 { font-size: clamp(1.35rem, 1vw + 1rem, 1.75rem); font-stretch: 118%; }
.service__body > p { max-width: 36em; color: var(--ink-soft); }

.ticks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 2rem;
  margin-top: 1.25rem;
}
.ticks li { position: relative; padding-left: 1.6rem; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.95rem;
  height: 5px;
  border-radius: 5px;
  background: var(--accent);
}

.scope {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem clamp(1.5rem, 3vw, 3rem);
  margin-top: 2.5rem;
}
.scope > li::before { margin-bottom: 1.1rem; background: var(--accent); }
.scope p { margin-top: 0.5rem; color: var(--ink-quiet); }

/* ---------- About ---------- */

.prose-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  row-gap: 1.25rem;
}
.prose { max-width: 36em; }
.prose > * + * { margin-top: 1.1em; }

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem clamp(1.5rem, 4vw, 4rem);
}
.facts > li::before { margin-bottom: 1.1rem; }
.facts--stack { grid-template-columns: minmax(0, 1fr); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 2.5rem clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.facts > li {
  font-size: clamp(1.2rem, 0.8vw + 1rem, 1.5rem);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.25;
  text-wrap: balance;
}
.statement {
  max-width: 24em;
  font-size: clamp(1.5rem, 1.8vw + 1rem, 2.4rem);
  font-weight: 740;
  font-stretch: 116%;
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* ---------- Contact ---------- */

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

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.field { margin-bottom: 1.4rem; }
.field label,
.field legend { display: block; margin-bottom: 0.4rem; padding: 0; font-weight: 680; }
.optional { font-weight: 400; color: var(--steel); }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 3.1rem;
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--mill);
  border-radius: 6px;
  background: var(--slab);
  color: var(--mill);
  font: inherit;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline-offset: 1px; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--fault); border-width: 3px; }

.field--choices .choice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding-block: 0.35rem;
  font-weight: 400;
}
.choice input { width: 1.3rem; height: 1.3rem; margin: 0; accent-color: var(--epoxy); }

.field__hint { margin-top: 0.4rem; font-size: 0.9375rem; color: var(--steel); }
.field__error { margin-top: 0.4rem; font-size: 0.9375rem; font-weight: 650; color: var(--fault); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { margin-bottom: 2rem; padding: 1.25rem 1.5rem; border-left: var(--bar) solid; background: var(--slab); }
.notice h2 { font-size: 1.4rem; }
.notice p { margin-top: 0.4rem; }
.notice--ok { border-color: var(--epoxy); }
.notice--error { border-color: var(--fault); }
.notice--error h2 { color: var(--fault); }

.contact__direct { padding: 1.75rem; border-radius: 6px; }
.contact__direct h2 { font-size: 1.4rem; }
.contact__direct a { color: var(--slab); }
.direct { margin-top: 1.25rem; }
.direct dt { margin-top: 1.1rem; font-size: 0.9375rem; color: var(--ink-quiet); }
.direct dd { font-size: 1.2rem; font-weight: 650; overflow-wrap: anywhere; }

/* ---------- Terms ---------- */

.terms { max-width: 46rem; }
.terms > section + section { margin-top: 3rem; }
.terms h2 { font-size: clamp(1.4rem, 1vw + 1rem, 1.8rem); }
.terms h2::before { margin-bottom: 1.1rem; }
.terms__num { color: var(--epoxy); margin-right: 0.3em; }
.terms h3 { margin-top: 1.6rem; font-size: 1.1rem; font-stretch: 105%; }

.terms__defs { margin-top: 1.25rem; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.6rem 1.5rem; }
.terms__defs dt { font-weight: 680; }

.clauses { margin-top: 0.6rem; }
.clauses li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); padding-block: 0.3rem; }
.clauses__n { font-weight: 680; font-variant-numeric: tabular-nums; color: var(--steel); }

.blank { padding: 0.05em 0.3em; border-radius: 3px; background: #F7DE8C; }

.terms__record { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 2px solid var(--steel); font-size: 0.9375rem; color: var(--steel); }
.terms__record dt { margin-top: 1rem; font-weight: 680; color: var(--mill); }
.terms__record dt:first-child { margin-top: 0; }
.terms__record code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.875rem; overflow-wrap: anywhere; }

/* ---------- 404 ---------- */

.lost { padding-block: var(--band); }
.lost > .wrap > * + * { margin-top: 1.5rem; }

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

.site-foot { padding-block: 3rem 2rem; font-size: 1rem; }
.site-foot a { color: var(--slab); text-decoration-thickness: 1px; }
.site-foot__grid { display: grid; grid-template-columns: 1.6fr 1.2fr 1fr; gap: 2rem; }
.site-foot__name { color: var(--slab); font-weight: 760; font-stretch: 115%; font-size: 1.15rem; }
.site-foot__list li + li { margin-top: 0.4rem; }
.site-foot__list a { overflow-wrap: anywhere; }
.site-foot__legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--mill-lift); font-size: 0.875rem; }

/* ---------- Tread plate ----------
 * The diamond-plate tile from the original site.
 *
 * Dark surfaces: the header, the top of every page, the dark bands, the
 * footer and the contact panel. On Home, Services and About (body class
 * "plate-page") every band is a dark surface, so the whole page sits on the
 * plate. Contact and Terms keep a plain concrete body for reading and typing.
 *
 * Each surface lays a flat tint of the mill-scale colour over the tile so
 * the type on it stays readable: more tint behind running text, less behind
 * large type.
 */

.site-head,
.hero,
.page-head,
.band--dark,
.site-foot,
.contact__direct,
.plate-page .band:not(.band--caution) {
  --ink: var(--slab);
  --ink-soft: #D5DBD8;
  --ink-quiet: #B4BEC5;
  --ink-inverse: var(--mill);
  --accent: var(--epoxy-bright);
  --accent-ink: var(--mill);
  --accent-hover: #7AD3AF;
  --rule: #C3CBD0;
  --focus: var(--caution);
  color: var(--ink);
}

/* Tile plus tint, for a dark surface standing on its own. */
.site-head,
.hero,
.page-head,
.band--dark,
.site-foot,
.contact__direct {
  --tint: rgba(23, 33, 42, 0.6);
  background-color: var(--mill);
  background-image: linear-gradient(var(--tint), var(--tint)), url("../img/tread-plate.webp");
  background-size: auto, var(--plate-size);
  background-position: 0 0, left top;
  background-repeat: repeat;
}
/* The header anchors the tile to its bottom edge and whatever follows anchors
   to its top edge, so the pattern runs through the join unbroken. */
.site-head { background-position: 0 0, left bottom; }
.contact__direct { --tint: rgba(23, 33, 42, 0.72); }
.site-foot { --tint: rgba(23, 33, 42, 0.88); color: var(--ink-quiet); }

/* Plate pages: one tile under the whole of <main>, so the pattern never
   breaks between sections. The sections themselves only add their tint. */
.plate-page main {
  background: var(--mill) url("../img/tread-plate.webp") left top / var(--plate-size) repeat;
}
.plate-page .band { --tint: rgba(23, 33, 42, 0.74); }
.plate-page .band--dark { --tint: rgba(23, 33, 42, 0.5); }
.plate-page :is(.hero, .page-head, .band:not(.band--caution)) { background: var(--tint); }

.site-head .brand { color: var(--slab); }
.site-head .brand__mark { color: var(--epoxy-bright); }
.site-head .brand__rest { color: var(--ink-quiet); }
.site-head .site-nav a { color: var(--slab); }
.site-head .site-nav a:hover { border-bottom-color: var(--ink-quiet); }
.site-head .site-nav a[aria-current="page"] { border-bottom-color: var(--epoxy-bright); }

/* Yellow means "call" everywhere on the site. */
.site-head .btn--call { background: var(--caution); color: var(--mill); }
.site-head .btn--call:hover { background: var(--slab); }

/* ---------- Narrow screens ---------- */

@media (max-width: 60rem) {
  .steps,
  .shots--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 48rem) {
  body { font-size: 1.0625rem; }

  .hero__grid,
  .page-head__grid,
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  /* Phones: the top row of bars, then the photo at full width beneath. */
  .hero__art { margin-right: 0; }
  .hero__bars { aspect-ratio: 576 / 266; overflow: hidden; }
  .hero__photo { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-top: 0.5rem; }

  .trades > li,
  .service,
  .prose-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0.6rem; }

  .scope,
  .facts { grid-template-columns: minmax(0, 1fr); }
  .site-foot__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .site-nav { order: 3; width: 100%; }
}

@media (max-width: 34rem) {
  .shots--3 { grid-template-columns: minmax(0, 1fr); }
  .steps,
  .ticks,
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .actions .btn { width: 100%; }
  .terms__defs { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .terms__defs dd { margin-bottom: 0.7rem; }
  .btn--call { padding-inline: 0.9rem; font-size: 0.95rem; }
}

@media print {
  .site-head, .site-foot, .band--caution, .setup-note, .skip { display: none; }
  .shots > li, .shot, .hero__photo { animation: none; }
  body { background: #fff; font-size: 11pt; }
  .blank { background: none; }
}