/* Brotherly Love Concrete — all visual styling.
   Typography led by design: no photography exists yet and none is invented.
   Photo slots are reserved in src/data/site.mjs so images drop in later without
   a redesign.

   MOBILE RULES BAKED IN (see [Website]/Runners/build/pathways/github-netlify.md 5f):
   - nav panel is pinned left:0 right:0 with box-sizing:border-box so it physically
     cannot exceed the viewport. No overflow-x tricks, which still create scroll
     containers and rubber band on iOS.
   - no backdrop-filter / transform / filter on any ancestor of a fixed element.
   - media queries come AFTER the base rules so the cascade lands the right way.
*/

:root {
  --ink: #12151a;
  --ink-2: #1c2129;
  --ink-3: #2a313c;
  --line: #39414e;
  --paper: #ffffff;
  --paper-2: #f4f5f7;
  --paper-3: #e7e9ed;
  --body: #3d4653;
  --muted: #6d7787;
  --accent: #c2540a;
  --accent-2: #e0670f;
  --display: "Barlow Condensed", "Oswald", "Arial Narrow", "Liberation Sans Narrow", "DejaVu Sans Condensed", sans-serif;
  --text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wrap: 1140px;
}

* { box-sizing: border-box; }

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

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

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

a { color: var(--accent); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- nav ---------- */
.nav {
  background: var(--ink);
  border-bottom: 1px solid var(--ink-3);
  position: relative;
}

.nav__inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 16px;
}

.nav__brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.1;
  min-width: 0;
}

.nav__brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--paper);
}

.nav__brand-sub {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__links a {
  color: #c9cfd9;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__links a:hover { color: var(--paper); }

.nav__links a[aria-current="page"] { color: var(--paper); }

.nav__call {
  background: var(--accent);
  color: var(--paper) !important;
  padding: 11px 18px;
  border-radius: 2px;
  font-weight: 600 !important;
}

.nav__call:hover { background: var(--accent-2); }

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 9px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--paper);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.03em;
  padding: 14px 26px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--text);
  text-align: center;
}

.btn:hover { background: var(--accent-2); border-color: var(--accent-2); }

.btn--lg { padding: 16px 30px; font-size: 16px; }

.btn--full { width: 100%; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn--ghost:hover { background: var(--paper-3); border-color: var(--ink-3); }

/* ---------- hero ---------- */
.hero {
  background: var(--ink);
  color: #d4d9e1;
  padding: 72px 0 80px;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 18px;
  font-weight: 600;
}

.hero__h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 62px;
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--paper);
  margin: 0 0 22px;
  text-transform: uppercase;
}

.hero__sub {
  font-size: 19px;
  line-height: 1.6;
  color: #aab2bf;
  margin: 0 0 32px;
  max-width: 34em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Ghost buttons sit on BOTH the light page and the dark bands. The base rule is the
   light one, so every dark container has to re-declare it or the label renders
   dark on dark and the button reads as an empty box. Caught in a render check
   2026-09-15 on the inner page heads, where it was invisible. */
.hero .btn--ghost,
.pagehead .btn--ghost,
.section--dark .btn--ghost { color: var(--paper); border-color: var(--line); }
.hero .btn--ghost:hover,
.pagehead .btn--ghost:hover,
.section--dark .btn--ghost:hover { background: var(--ink-3); border-color: var(--line); }

/* ---------- bid card (own tokens, never inherits hero contrast) ---------- */
.bidcard {
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-top: 4px solid var(--accent);
  border-radius: 3px;
  padding: 28px;
  color: var(--body);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  min-width: 0;
}

.bidcard__head { margin-bottom: 20px; }

.bidcard__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.1;
}

.bidcard__intro { margin: 0; font-size: 15px; color: var(--muted); }

.bidcard__note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.field { margin-bottom: 14px; min-width: 0; }

.field--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field--split > div { min-width: 0; }

.field label,
.field--split label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}

.field input,
.field textarea,
.field--split input {
  width: 100%;
  max-width: 100%;
  font-family: var(--text);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--paper-3);
  border-radius: 2px;
  padding: 11px 12px;
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  background: var(--paper);
}

.field textarea { resize: vertical; }

.hp { position: absolute; left: -9999px; }

/* ---------- sections ---------- */
.section { padding: 76px 0; }

.section--scope { background: var(--paper-2); }

.section--area { background: var(--paper-2); }

.section--faq { background: var(--paper); border-top: 1px solid var(--paper-3); }

.section--dark { background: var(--ink-2); color: #b9c1cd; }

.kicker {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 12px;
}

.section--dark .kicker { color: var(--accent-2); }

.section__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 28px;
}

.section--dark .section__h { color: var(--paper); }

.lede { font-size: 19px; margin: 0 0 14px; max-width: 42em; }

/* ---------- scope list ---------- */
.scope {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--paper-3);
  border: 1px solid var(--paper-3);
}

.scope__item {
  background: var(--paper);
  padding: 20px 22px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.2;
}

/* ---------- bid band ---------- */
.bid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 52px;
  align-items: start;
}

.bid__p { font-size: 18px; margin: 0 0 28px; }

.svc { list-style: none; margin: 0; padding: 0; }

.svc__item { border-top: 1px solid var(--line); padding: 15px 0; }

.svc__item:last-child { border-bottom: 1px solid var(--line); }

.svc__h {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0;
  line-height: 1.2;
}

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

.card {
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-left: 3px solid var(--accent);
  padding: 26px 24px;
  border-radius: 2px;
}

.section--dark .card {
  background: var(--ink);
  border-color: var(--ink-3);
  border-left-color: var(--accent);
}

.card__h {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.15;
}

.section--dark .card__h { color: var(--paper); }

.card__p { margin: 0; font-size: 16px; }

/* ---------- prose ---------- */
.prose { max-width: 820px; }

.prose__block { margin-bottom: 44px; }

.prose__block:last-child { margin-bottom: 0; }

.prose__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
  padding-top: 18px;
  border-top: 3px solid var(--ink);
}

.prose p { margin: 0 0 16px; }

.prose p:last-child { margin-bottom: 0; }

/* ---------- steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.step { border-top: 3px solid var(--accent); padding-top: 16px; }

.step__n {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  display: block;
  margin-bottom: 6px;
}

.step__h {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 8px;
  line-height: 1.15;
}

.step__p { margin: 0; font-size: 15px; }

/* ---------- page head ---------- */
.pagehead {
  background: var(--ink);
  color: #aab2bf;
  padding: 56px 0 62px;
}

.crumbs {
  font-size: 13px;
  /* --muted (#6d7787) measured 3.5:1 over the photo band, under the 4.5 floor.
     Breadcrumbs are small text, so they need more contrast, not less. */
  color: #9ba5b3;
  margin-bottom: 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.crumbs a { color: #aab2bf; text-decoration: none; }
.crumbs a:hover { color: var(--paper); }

.pagehead__h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 52px;
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 20px;
  max-width: 18em;
}

.pagehead__sub {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 46em;
}

.arealist {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent-2);
  margin: 0 0 8px;
}

.section--area .arealist { color: var(--ink); margin-bottom: 16px; }

.link {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- faq ---------- */
.faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 40px;
  max-width: 980px;
}

.faq__q {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.15;
}

.faq__a { margin: 0; font-size: 16px; }

/* ---------- cta ---------- */
.cta { background: var(--accent); color: #fff; padding: 52px 0; }

.cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cta__h {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 6px;
  line-height: 1.1;
}

.cta__p { margin: 0; font-size: 17px; color: rgba(255, 255, 255, 0.92); max-width: 34em; }

.cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.cta .btn { background: var(--ink); border-color: var(--ink); }
.cta .btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
.cta .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.cta .btn--ghost:hover { background: rgba(255, 255, 255, 0.14); }

/* ---------- contact ---------- */
.contact {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 52px;
  align-items: start;
}

.contact__phone {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.05;
}

.contact__phone a { color: var(--ink); text-decoration: none; }
.contact__phone a:hover { color: var(--accent); }

.contact__note { margin: 0 0 8px; font-size: 16px; }

.contact__kicker2 { margin-top: 32px; }

.contact__area {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.upload { max-width: 620px; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: #99a2b0; padding: 56px 0 0; }

.footer__inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px 40px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.1fr 1fr;
  gap: 36px;
}

.footer__brand {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 8px;
  line-height: 1.1;
}

.footer__tag { margin: 0 0 14px; font-size: 15px; max-width: 30em; }

.footer__phone {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  color: var(--accent-2);
  text-decoration: none;
}

.footer__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 12px;
  font-weight: 600;
}

.footer__list { list-style: none; margin: 0; padding: 0; }

.footer__list li { margin-bottom: 8px; }

.footer__list a { color: #99a2b0; text-decoration: none; font-size: 15px; }
.footer__list a:hover { color: var(--paper); }

.footer__area { margin: 0; font-size: 15px; line-height: 1.9; }

.footer__bar { border-top: 1px solid var(--ink-3); }

.footer__bar p {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 20px 24px;
  font-size: 13px;
  color: var(--muted);
}

/* ================= MEDIA QUERIES — after the base rules, deliberately ========= */

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .bid { grid-template-columns: 1fr; gap: 36px; }
  .contact { grid-template-columns: 1fr; gap: 36px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr 1fr; }
  .scope { grid-template-columns: 1fr 1fr; }
  .faq { grid-template-columns: 1fr; gap: 26px; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .hero__h1 { font-size: 50px; }
  .pagehead__h1 { font-size: 42px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }

  .nav__toggle { display: flex; }

  /* Pinned panel. left/right 0 with border-box means it cannot exceed the
     viewport, so no overflow-x rule is needed and iOS has nothing to rubber band. */
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink-2);
    border-bottom: 1px solid var(--ink-3);
    padding: 8px 24px 20px;
    z-index: 40;
  }

  .nav.is-open .nav__links { display: flex; }

  .nav__links a {
    padding: 14px 0;
    border-bottom: 1px solid var(--ink-3);
    font-size: 15px;
    white-space: normal;
  }

  .nav__call {
    margin-top: 14px;
    border-bottom: none;
    text-align: center;
    padding: 14px 18px;
  }

  .nav__links > * { min-width: 0; max-width: 100%; }

  .hero { padding: 48px 0 56px; }
  .hero__h1 { font-size: 38px; }
  .hero__sub { font-size: 17px; }

  .section { padding: 52px 0; }
  .section__h { font-size: 31px; }
  .pagehead { padding: 40px 0 46px; }
  .pagehead__h1 { font-size: 33px; }
  .pagehead__sub { font-size: 17px; }

  .prose__h { font-size: 27px; }
  .scope { grid-template-columns: 1fr; }
  .scope__item { font-size: 19px; padding: 16px 18px; }
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .footer__inner { grid-template-columns: 1fr; gap: 32px; }

  .bidcard { padding: 22px 18px; }
  .bidcard__title { font-size: 26px; }
  .field--split { grid-template-columns: 1fr; gap: 0; }
  .field--split > div { margin-bottom: 14px; }

  .cta { padding: 40px 0; }
  .cta__h { font-size: 30px; }
  .cta__inner { flex-direction: column; align-items: flex-start; }
  .cta__actions { width: 100%; flex-direction: column; }
  .cta__actions .btn { width: 100%; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .contact__phone { font-size: 33px; }
  .faq__q { font-size: 21px; }
}

/* =============================================================================
   ADDED 2026-09-15 with the service sub-pages, dropdown nav and split layout.

   CASCADE RULE: these are BASE rules appended after the existing media queries,
   so every mobile override for them lives in the NEW media block at the very
   bottom of this file. Never add a base rule below that block.
   ========================================================================== */

/* ---------- nav dropdown ---------- */
.nav__group { position: relative; display: flex; align-items: center; }

.nav__parent { display: inline-block; }

.nav__sub-toggle {
  display: none;
  width: 34px;
  height: 34px;
  margin-left: 2px;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}

.nav__sub-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid #c9cfd9;
  border-bottom: 2px solid #c9cfd9;
  transform: translate(-50%, -70%) rotate(45deg);
}

.nav__group > .nav__parent::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  vertical-align: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* Desktop flyout. No backdrop-filter, no transform on the ancestor, so a fixed
   or absolute child resolves against the viewport as expected. */
.nav__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 246px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-top: 3px solid var(--accent);
  border-radius: 2px;
  padding: 8px 0;
  z-index: 60;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
}

.nav__group:hover .nav__sub,
.nav__group:focus-within .nav__sub { display: block; }

.nav__sub a {
  display: block;
  padding: 10px 18px;
  font-size: 13px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.nav__sub a:hover { background: var(--ink-3); color: var(--paper); }

/* ---------- service card grid (services hub) ---------- */
.scards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.scard {
  display: block;
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-top: 3px solid var(--accent);
  border-radius: 2px;
  padding: 24px 22px;
  color: var(--body);
}

.scard:hover { border-color: var(--accent); background: var(--paper-2); }

.scard__h {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.12;
}

.scard__p { margin: 0 0 14px; font-size: 15px; }

.scard__go {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- split: prose beside a sticky form ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 52px;
  align-items: start;
}

.split .prose { max-width: none; min-width: 0; }

.split__side { position: sticky; top: 24px; min-width: 0; }

/* ---------- related links ---------- */
.rels { display: flex; flex-wrap: wrap; gap: 12px; }

.rel {
  display: inline-block;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  padding: 14px 20px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.15;
}

.rel:hover { border-color: var(--accent); background: var(--paper-2); }

/* ---------- inline figure in prose ---------- */
.prose__figure { margin: 0 0 32px; }

.prose__figure img {
  width: 100%;
  border-radius: 2px;
  border: 1px solid var(--paper-3);
}

/* ---------- select, matched to the text inputs ---------- */
.field select {
  width: 100%;
  max-width: 100%;
  font-family: var(--text);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--paper-3);
  border-radius: 2px;
  padding: 11px 12px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  background-color: var(--paper);
}

/* home service preview links */
.svc__h a, a.svc__h { color: var(--paper); text-decoration: none; display: block; }
a.svc__h:hover { color: var(--accent-2); }

/* =================== NEW MEDIA BLOCK. Nothing base goes below here. ======== */

@media (max-width: 1080px) {
  .split { grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; }
}

@media (max-width: 960px) {
  .scards { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split__side { position: static; }
}

@media (max-width: 760px) {
  .scards { grid-template-columns: 1fr; }
  .rels { flex-direction: column; }
  .rel { width: 100%; }

  /* Dropdown becomes an accordion inside the pinned panel. Pinned left/right with
     border-box means it cannot exceed the viewport, so there is no overflow-x
     rule here and nothing for iOS to rubber band. */
  .nav__group {
    display: block;
    width: 100%;
    min-width: 0;
    position: relative;
    border-bottom: 1px solid var(--ink-3);
  }

  .nav__group > .nav__parent {
    display: block;
    padding: 14px 44px 14px 0;
    border-bottom: 0;
  }

  .nav__group > .nav__parent::after { display: none; }

  .nav__sub-toggle {
    display: block;
    position: absolute;
    top: 4px;
    right: 0;
    width: 40px;
    height: 40px;
  }

  .nav__sub-toggle[aria-expanded="true"]::after {
    transform: translate(-50%, -30%) rotate(225deg);
  }

  .nav__sub {
    position: static;
    display: none;
    min-width: 0;
    max-width: 100%;
    width: auto;
    border: 0;
    border-top: 1px solid var(--ink-3);
    border-radius: 0;
    box-shadow: none;
    padding: 4px 0 10px;
    background: transparent;
  }

  /* hover must NOT open it on touch; only the explicit toggle does */
  .nav__group:hover .nav__sub,
  .nav__group:focus-within .nav__sub { display: none; }

  .nav__group.is-sub-open .nav__sub { display: block; }

  .nav__sub a {
    padding: 11px 0 11px 14px;
    white-space: normal;
    border-bottom: 0;
    font-size: 14px;
  }
}

/* Footer gained a fourth column with the service pages. Re-declared here, below
   the earlier media queries, so the two column and one column steps still win. */
@media (max-width: 1080px) {
  .footer__inner { grid-template-columns: 1.4fr 1fr 1fr; }
}

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

@media (max-width: 560px) {
  .footer__inner { grid-template-columns: 1fr; gap: 30px; }
}

/* Estimator band right column: the ITB checklist, not a service list. */
.svc__wrap { min-width: 0; }

.svc__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  font-weight: 600;
  margin: 0 0 14px;
}

.sidenote {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  border-left: 3px solid var(--paper-3);
  padding-left: 14px;
}

.sidenote a { font-weight: 600; }

/* =============================================================================
   PHOTOS, 2026-09-15.

   TWO CLASSES, AND THE CSS KEEPS THEM APART ON PURPose:
   `.shots` and `.prose__figure` carry HIS OWN WORK as real <img> elements with
   descriptive alt text. `.hero--band` and `.pagehead--band` carry STOCK as a CSS
   background behind a heavy gradient. Stock is never an <img>, never has
   descriptive alt, and never appears in `.shots`.
   ========================================================================== */

/* ---------- stock atmospheric bands ---------- */
.hero--band,
.pagehead--band {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* The overlay is what makes this atmospheric rather than a photo of a job. It is
   heavy on purpose: the text has to win and the image must not read as a claim. */
.hero--band::before,
.pagehead--band::before {
  content: "";
  position: absolute;
  inset: 0;
}

/* THE TWO BANDS NEED DIFFERENT SCRIMS AND THE REASON IS LAYOUT, NOT TASTE.
   Measured against real rendered pixels 2026-09-15: a single shared gradient that
   opened up on the right dropped the hero eyebrow to 1.0:1 and the commercial h1
   to 1.0:1, because rust coloured rebar sat directly behind orange and white text.

   The HERO can afford light on the right: the white form card occupies that half,
   so no text is ever over it.
   The PAGEHEAD cannot: its h1 and sub run the full column width, so it needs a
   near uniform scrim. */
.hero--band::before {
  background: linear-gradient(
    100deg,
    rgba(18, 21, 26, 0.985) 0%,
    rgba(18, 21, 26, 0.965) 46%,
    rgba(18, 21, 26, 0.88) 62%,
    rgba(18, 21, 26, 0.62) 100%
  );
}

.pagehead--band::before {
  background: linear-gradient(
    100deg,
    rgba(18, 21, 26, 0.975) 0%,
    rgba(18, 21, 26, 0.955) 70%,
    rgba(18, 21, 26, 0.9) 100%
  );
}

.hero--band > .wrap,
.pagehead--band > .wrap { position: relative; z-index: 1; }

/* ---------- his work: the gallery ---------- */
.section--work { background: var(--paper-2); border-top: 1px solid var(--paper-3); }

.shots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.shot {
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  background: var(--paper-3);
  aspect-ratio: 3 / 4;
  max-width: 100%;
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.shot:hover img { transform: scale(1.04); }

/* ---------- his work: inline on a service page ---------- */
.prose__figure {
  margin: 0 0 34px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--paper-3);
  max-width: 100%;
}

.prose__figure img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  object-position: center 58%;
  border: 0;
  border-radius: 0;
  display: block;
}

@media (max-width: 960px) {
  .shots { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
  .shots { grid-template-columns: 1fr 1fr; gap: 12px; }
  .prose__figure img { max-height: 320px; }
  /* a lighter gradient on a phone, where the band is nearly all text anyway */
  /* On a phone both bands are almost entirely text, so both get the uniform scrim */
  .hero--band::before,
  .pagehead--band::before {
    background: linear-gradient(
      180deg,
      rgba(18, 21, 26, 0.975) 0%,
      rgba(18, 21, 26, 0.955) 60%,
      rgba(18, 21, 26, 0.94) 100%
    );
  }
}