/* American Design and Contracting — site shell
   Brand values are injected by build.mjs from content/site.json + the logo sample.
   See docs/SHELL-BUILD-NOTES.md. Mobile-first; no framework. */

:root {
  /* --red is sampled exactly off images/logo.png (#FF0000).
     --red-ink is the same hue darkened only enough to clear WCAG AA on white,
     used for text/links/buttons. Graphic accents use the exact sampled red. */
  --red: #FF0000;
  --red-ink: #D40000;
  --blue: #0A2A5E;
  --white: #FFFFFF;
  --ink: #1A1A1A;
  --muted: #5C6470;
  --line: #DFE3E8;
  --wash: #F5F7FA;
  --wash-2: #ECEFF3;
  --black: #000000;

  --wrap: 76rem;
  --gap: 1.25rem;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(10, 42, 94, .08), 0 8px 24px rgba(10, 42, 94, .08);
  --shadow-lift: 0 2px 4px rgba(10, 42, 94, .10), 0 16px 40px rgba(10, 42, 94, .16);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* Long unbreakable strings (emails, URLs) wrap instead of forcing a horizontal
     scroll at 320–430px. `anywhere` also lets grid/flex tracks shrink below the
     string's min-content width. */
  overflow-wrap: anywhere;
  /* Safety net: root causes are fixed below, but nothing on the page may ever pan
     sideways on a phone. `clip` (not hidden) keeps the sticky header working. */
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
iframe, video, embed, object { max-width: 100%; }

/* The hidden attribute wins over any display rule a class sets (wizard steps, form
   fields, nav buttons all toggle it). */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--blue);
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.125rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--red-ink); text-underline-offset: .18em; }
a:hover { color: var(--blue); }

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

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: var(--white);
  padding: .75rem 1.25rem; font-weight: 700;
}
.skip-link:focus { left: 0; }

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

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

.siteheader {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 3px solid var(--red);
  box-shadow: 0 1px 0 rgba(10, 42, 94, .06);
}

/* Mobile header row: logo | phone | Menu. Flex, not a rigid grid — the phone and
   Menu button never shrink, and the logo absorbs whatever width is left (down to
   a floor), so Menu is always fully on-screen at 320–430px. Desktop (≥60rem)
   switches back to the original two-column grid below. */
.siteheader__bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: .625rem 1.25rem;
}

.logo { display: block; line-height: 0; flex: 0 1 190px; min-width: 4.5rem; }
.logo img { width: 190px; max-width: 100%; }

.siteheader__phone { margin: 0 0 0 auto; font-size: .9375rem; flex: 0 0 auto; }
.siteheader__phone a {
  text-decoration: none; color: var(--blue); text-align: right;
  /* ≥44px tap target even when the note is hidden and only the number remains */
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  min-height: 2.75rem;
}
.siteheader__phone a:hover strong { color: var(--red-ink); }
.siteheader__phone-note { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.siteheader__phone strong { font-size: 1.0625rem; white-space: nowrap; }

.navtoggle {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  flex: 0 0 auto; min-width: 2.75rem; min-height: 2.75rem;
  background: var(--blue); color: var(--white);
  border: 0; border-radius: var(--radius);
  padding: .625rem .875rem;
  font: inherit; font-weight: 700; font-size: .875rem;
  cursor: pointer;
}

/* Tight phones (≤420px): drop the "CALL OR TEXT" label, shrink the number a notch
   and tighten gutters so logo + number + Menu fit on one row. The number itself
   stays tappable. */
@media (max-width: 26.25rem) {
  .siteheader__bar { gap: .5rem; padding-inline: 1rem; }
  .siteheader__phone-note { display: none; }
  .siteheader__phone strong { font-size: 1rem; }
  .navtoggle { padding: .5rem .625rem; }
}
/* Narrowest phones (≤340px): Menu becomes the 44×44 icon button; the "Menu" text
   stays in the accessible name. */
@media (max-width: 21.25rem) {
  .navtoggle { gap: 0; padding: .5rem; }
  .navtoggle__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}
.navtoggle__box { display: block; width: 18px; height: 12px; position: relative; }
.navtoggle__bar, .navtoggle__bar::before, .navtoggle__bar::after {
  position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.navtoggle__bar { top: 5px; }
.navtoggle__bar::before { content: ""; top: -5px; }
.navtoggle__bar::after { content: ""; top: 5px; }

.nav { display: none; border-top: 1px solid var(--line); background: var(--white); }
.nav.is-open { display: block; }
.nav__list {
  list-style: none; margin: 0;
  padding: .5rem 1.25rem 1rem;
  max-width: var(--wrap); margin-inline: auto;
}
.nav__item { border-bottom: 1px solid var(--line); }
.nav__item:last-child { border-bottom: 0; }
.nav__link {
  display: block; padding: .8125rem .25rem;
  color: var(--blue); font-weight: 600; text-decoration: none;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--red-ink); }
.nav__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.nav__link--cta {
  margin-top: .625rem; text-align: center;
  background: var(--red-ink); color: var(--white);
  border-radius: var(--radius); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
}
.nav__link--cta:hover, .nav__link--cta[aria-current="page"] { background: var(--blue); color: var(--white); }

@media (min-width: 60rem) {
  .navtoggle { display: none; }
  .siteheader__bar { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding-bottom: .5rem; }
  .logo { min-width: 0; }
  .siteheader__phone { margin-left: 0; }
  .siteheader__phone a { text-align: right; }
  .nav { display: block; border-top: 0; }
  .nav__list { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; padding: 0 1.25rem .625rem; }
  .nav__item { border-bottom: 0; }
  .nav__link { padding: .375rem 0; }
  .nav__link--cta { margin-top: 0; padding: .5rem 1rem; }
}

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

.hero { position: relative; background: var(--blue); color: var(--white); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.hero__media video { width: 100%; height: 100%; object-fit: cover; opacity: .7; display: block; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(10, 42, 94, .62) 30%, rgba(10, 42, 94, .45));
}
@media (max-width: 48rem) {
  /* Tall phone viewports show mostly the dark left stop of the 115deg wash;
     lighten it and lift the poster/fallback opacity so mobile (which often
     blocks video autoplay) matches the desktop brightness. */
  .hero::after {
    background: linear-gradient(115deg, rgba(10, 42, 94, .48) 30%, rgba(10, 42, 94, .35));
  }
  .hero__media img { opacity: .7; }
}
@media (orientation: portrait) and (max-width: 48rem) {
  /* Portrait phones make the hero much taller than the 16:9 source's sweet spot,
     so the left-weighted wash + solid .hero background read as a flat navy wall.
     Take the overlay well past the landscape value to a near-flat light wash, let
     the video zoom taller to fill the tall box, and protect headline legibility
     with a local scrim behind the copy only — not a full-bleed overlay. */
  .hero::after {
    background: linear-gradient(115deg, rgba(10, 42, 94, .32) 30%, rgba(10, 42, 94, .22));
  }
  /* Video/img already object-fit:cover height:100%; make the tall box explicit and
     lift the poster/fallback further so no section navy shows through. */
  .hero__media, .hero__media img, .hero__media video { height: 100%; }
  .hero__media img { opacity: .8; }
  /* Local scrim behind the text stack so the lighter wash keeps headline contrast. */
  .hero__inner {
    background: linear-gradient(180deg, rgba(10, 42, 94, .0) 0%, rgba(10, 42, 94, .38) 22%, rgba(10, 42, 94, .38) 100%);
    border-radius: 12px;
  }
  .hero__inner h1 { text-shadow: 0 1px 10px rgba(10, 42, 94, .55); }
}
.hero__inner {
  position: relative; z-index: 1;
  max-width: var(--wrap); margin-inline: auto;
  padding: 3rem 1.25rem 2.5rem;
}
.hero--page .hero__inner { padding: 2.25rem 1.25rem 2rem; }
.hero__kicker {
  margin: 0 0 .625rem;
  font-size: .8125rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--white);
}
.hero__kicker::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 1.75rem; height: 3px; background: var(--red);
  margin-right: .5rem;
}
.hero h1 { color: var(--white); max-width: 20ch; text-transform: uppercase; letter-spacing: .01em; }
.hero__lead {
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.8vw, 1.5rem);
  font-weight: 700; line-height: 1.25;
  color: var(--white);
  margin: 0 0 .75rem;
}
.hero__sub { max-width: 56ch; font-size: 1.125rem; color: rgba(255, 255, 255, .92); }
.hero__sub p { margin-bottom: .625rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.btn {
  display: inline-block;
  padding: .875rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 800; font-size: 1rem;
  text-decoration: none; text-align: center;
  border: 2px solid transparent;
}
.btn--primary { background: var(--red-ink); color: var(--white); }
.btn--primary:hover { background: var(--white); color: var(--blue); }
.btn--ghost { border-color: rgba(255, 255, 255, .7); color: var(--white); }
.btn--ghost:hover { background: var(--white); color: var(--blue); }
.btn--solid { background: var(--blue); color: var(--white); }
.btn--solid:hover { background: var(--red-ink); color: var(--white); }

/* ---------- trust band (experienceLine + projectsCompleted) ---------- */

.trustband {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem;
}
.trustband__line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800; letter-spacing: -.01em;
}
.trustband__stat { margin: 0; display: flex; align-items: baseline; gap: .4rem; }
.trustband__value { font-family: var(--font-display); font-weight: 800; line-height: 1; }
.trustband__label { text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; font-weight: 700; }

/* hero variant — deliberately large, this is the top trust signal */
.trustband--hero {
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 3px solid var(--red);
  color: var(--white);
}
.trustband--hero .trustband__line { font-size: clamp(1.125rem, 3.2vw, 1.5rem); color: var(--white); }
.trustband--hero .trustband__value { font-size: clamp(1.75rem, 5vw, 2.5rem); color: var(--white); }
.trustband--hero .trustband__label { color: rgba(255, 255, 255, .85); }

/* footer variant */
.trustband--footer {
  justify-content: center; text-align: center;
  background: var(--red);
  color: var(--white);
  padding: 1.125rem 1.25rem;
}
.trustband--footer .trustband__line { font-size: clamp(1rem, 2.6vw, 1.25rem); }
.trustband--footer .trustband__value { font-size: clamp(1.375rem, 3.4vw, 1.75rem); }

/* ---------- layout blocks ---------- */

.section { padding: 2.75rem 0; }
.section--wash { background: var(--wash); }
.section__inner { max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }
.section__heading { margin-bottom: 1.25rem; }
.section__heading a { color: inherit; text-decoration: none; }
.section__heading a:hover { color: var(--red-ink); }

.prose { max-width: 68ch; }
.prose > :first-child { margin-top: 0; }
.prose h3 { margin-top: 1.75rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1em; }
.prose li { margin-bottom: .5rem; }

.contentsection { padding: 2.25rem 0; border-top: 1px solid var(--line); }
.contentsection__heading a { color: inherit; text-decoration: none; }
.contentsection__heading a:hover { color: var(--red-ink); }
.contentsection__heading a::after {
  content: "#"; margin-left: .4rem; color: var(--red);
  opacity: 0; font-weight: 400;
}
.contentsection__heading a:hover::after, .contentsection__heading a:focus-visible::after { opacity: 1; }

.block { padding: 1.5rem; border-radius: var(--radius); background: var(--wash); border-left: 5px solid var(--red); margin: 2rem 0; }
.block--experience { background: var(--blue); color: var(--white); border-left-color: var(--red); }
.block--experience a { color: var(--white); }
.block--sealing-callout { background: var(--wash-2); }
.block .arrowlink { font-weight: 700; }

.process { counter-reset: step; list-style: none; padding-left: 0; }
.process > li {
  counter-increment: step;
  position: relative; padding-left: 3rem; margin-bottom: 1.125rem;
}
.process > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -.1rem;
  width: 2.125rem; height: 2.125rem; border-radius: 50%;
  background: var(--blue); color: var(--white);
  font-family: var(--font-display); font-weight: 800;
  display: grid; place-items: center;
}

/* ---------- cards ---------- */

.cards { display: grid; gap: var(--gap); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

/* whole card is the link target */
.card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none; color: var(--ink);
  overflow: hidden;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--red); color: var(--ink); }
.card__media { aspect-ratio: 16 / 10; background: var(--wash-2); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
/* No photo for this service yet — a neutral brand panel, never a stock stand-in. */
.card__media--empty {
  background:
    linear-gradient(135deg, transparent 46%, var(--red) 46%, var(--red) 54%, transparent 54%),
    linear-gradient(160deg, var(--blue), #123a7a);
}
.card__body { padding: 1.125rem 1.25rem 1.375rem; display: flex; flex-direction: column; gap: .375rem; flex: 1; }
.card__title { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 800; color: var(--blue); margin: 0; }
.card:hover .card__title { color: var(--red-ink); }
.card__meta { margin: 0; color: var(--muted); font-size: .9375rem; }
.card__more { margin-top: auto; padding-top: .625rem; font-weight: 700; color: var(--red-ink); font-size: .9375rem; }
.card__more::after { content: " \203A"; }

.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.linklist a {
  display: block; padding: .875rem 1rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; font-weight: 700; color: var(--blue);
}
.linklist a:hover { border-color: var(--red); color: var(--red-ink); }
.linklist__meta { display: block; font-weight: 400; font-size: .875rem; color: var(--muted); }
@media (min-width: 40rem) { .linklist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .linklist { grid-template-columns: repeat(3, 1fr); } }

.factlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.factlist div { display: flex; flex-direction: column; }
.factlist dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.factlist dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--blue); }
@media (min-width: 40rem) { .factlist { grid-template-columns: repeat(3, 1fr); } }

/* ---------- why-us tiles (homepage; no heading — the tiles stand on their own) ---------- */

.whyus { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .whyus { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .whyus { grid-template-columns: repeat(4, 1fr); } }
.whyus__tile {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.25rem 1.25rem 1.375rem;
  background: var(--white);
  border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.whyus__icon { display: block; width: 2rem; height: 2rem; color: var(--blue); }
.whyus__icon svg { display: block; width: 100%; height: 100%; }
.whyus svg { width: 2rem; height: 2rem; flex-shrink: 0; }
.whyus__lead { margin: 0; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.3; color: var(--blue); }
.whyus__lead strong { font-weight: 800; }
.whyus__text { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--muted); }

/* ---------- cta block (entire block is one <a>) ---------- */

.ctablock {
  display: grid; gap: 0;
  margin: 2.5rem 0 0;
  background: var(--blue); color: var(--white);
  border-radius: var(--radius); overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ctablock:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); color: var(--white); }
.ctablock__media { display: block; max-height: 15rem; overflow: hidden; }
.ctablock__media img { width: 100%; height: 100%; object-fit: cover; }
.ctablock__body { display: block; padding: 1.75rem 1.5rem; }
.ctablock__heading {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.375rem, 3.6vw, 1.875rem); font-weight: 800; line-height: 1.15;
  margin-bottom: .5rem;
}
.ctablock__body p { color: rgba(255, 255, 255, .92); }
.ctablock__action {
  display: inline-block; margin-top: 1rem;
  background: var(--red); color: var(--white);
  padding: .8125rem 1.5rem; border-radius: var(--radius);
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .9375rem;
}
.ctablock:hover .ctablock__action { background: var(--white); color: var(--blue); }
@media (min-width: 48rem) {
  .ctablock { grid-template-columns: 40% 1fr; align-items: stretch; }
  .ctablock__media { max-height: none; }
  .ctablock__body { padding: 2.25rem 2rem; align-self: center; }
}

/* ---------- gallery ---------- */

.gallery { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); margin: 1.25rem 0; }
@media (min-width: 48rem) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 68rem) { .gallery { grid-template-columns: repeat(4, 1fr); } }

.gallery--pending {
  display: block;
  border: 2px dashed var(--line); border-radius: var(--radius);
  padding: 1.5rem; text-align: center; background: var(--wash);
}
.gallery__pending-note { margin: 0; color: var(--muted); font-size: .9375rem; font-style: italic; }

.gallery__item { margin: 0; position: relative; scroll-margin-top: 6rem; }
.gallery__open {
  display: block; width: 100%; padding: 0; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; background: var(--wash-2);
  cursor: pointer; position: relative;
}
.gallery__open:hover { border-color: var(--red); }
.gallery__img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.gallery__number {
  position: absolute; left: .5rem; bottom: .5rem;
  background: rgba(10, 42, 94, .88); color: var(--white);
  font-family: var(--font-display); font-weight: 800; font-size: .8125rem;
  padding: .1875rem .5rem; border-radius: 2px;
}
.gallery__item:target .gallery__open { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255, 0, 0, .35); }
/* "See More" tile: the last cell of a service-page grid, same footprint as a thumb
   (4/3 cell, same border/radius/hover) but plainly not a photo — a washed
   background with a faint blue gradient overlay and the link text centered. */
.gallery__see-more {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; width: 100%; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--wash-2) linear-gradient(135deg, rgba(10, 42, 94, .06), rgba(10, 42, 94, .16));
  color: var(--blue); text-decoration: none;
  font-family: var(--font-display); font-weight: 800; font-size: 1.125rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.gallery__see-more:hover, .gallery__see-more:focus-visible { border-color: var(--red); color: var(--red); }
.gallery__see-more:focus-visible { outline: 3px solid rgba(255, 0, 0, .35); outline-offset: 2px; }
.gallery__see-more-text { text-align: center; padding: .5rem; }
.gallery__caption { font-size: .875rem; color: var(--muted); padding-top: .375rem; }
.gallery__caption-num { font-weight: 700; color: var(--blue); }
/* #43801: shrink the numbered badge on mobile — ~55% of its desktop size and tucked
   closer into the corner. Desktop is unchanged. */
@media (max-width: 47.99rem) {
  .gallery__number {
    left: .3rem; bottom: .3rem;
    font-size: .5rem;
    padding: .1rem .28rem;
  }
}

.gallery__hint { font-size: .9375rem; color: var(--muted); margin-top: 1.25rem; max-width: 68ch; }
.gallery__hint + .cards, .gallery__hint + .gallery { margin-top: 1rem; }
.prose + .gallery, .gallery + .prose { margin-top: 1.25rem; }
.prose:empty { display: none; }

/* ---------- reference grids (colors / patterns / coping) ----------
   Spec images rendered by the build.mjs `refgrid:` mechanism — chart swatches,
   pattern tiles, coping profiles. Same tile chrome as .gallery (border, radius,
   wash, caption type) but no numbers, no lightbox: these are references, not
   portfolio photos. Mobile-first: 2 col (coping 1 col), widening per grid. */
.refgrid { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); margin: 1.25rem 0; }
.refgrid--coping { grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .refgrid--coping { grid-template-columns: repeat(2, 1fr); }
  .refgrid--colors { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 48rem) {
  .refgrid--patterns, .refgrid--coping { grid-template-columns: repeat(3, 1fr); }
  .refgrid--colors { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 68rem) {
  .refgrid--patterns { grid-template-columns: repeat(4, 1fr); }
  .refgrid--colors { grid-template-columns: repeat(5, 1fr); }
}

.refgrid__item { margin: 0; }
.refgrid__media {
  display: block; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; background: var(--wash-2);
}
.refgrid__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.refgrid--colors .refgrid__img { aspect-ratio: 5 / 4; }
.refgrid--coping .refgrid__img { aspect-ratio: 4 / 3; }
.refgrid__item figcaption { font-size: .875rem; line-height: 1.35; color: var(--muted); padding-top: .375rem; }
.refgrid__name { display: block; font-weight: 700; color: var(--ink); }
.refgrid__source { display: block; font-size: .8125rem; }
.refgrid__badge {
  display: inline-block; margin-top: .25rem; padding: .0625rem .5rem;
  border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.5;
  background: var(--blue); color: var(--white);
}
.refgrid__badge--antique { background: var(--white); color: var(--blue); border: 1px solid var(--blue); }
.prose + .refgrid, .refgrid + .prose { margin-top: 1.25rem; }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .92); border: 0; }
.lightbox__frame {
  position: relative; z-index: 1;
  width: min(100%, 72rem); height: 100%;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .5rem; padding: 3.5rem .5rem 1rem;
}
.lightbox__figure { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: .75rem; align-items: center; }
.lightbox__img {
  max-width: 100%; max-height: 74vh; width: auto;
  border-radius: 2px; background: #111;
  animation: lb-in .18s ease;
}
@keyframes lb-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.lightbox__bar {
  display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; justify-content: center;
  color: var(--white); font-size: .9375rem; text-align: center;
  max-width: 60ch;
}
.lightbox__num {
  font-family: var(--font-display); font-weight: 800;
  background: var(--red); color: var(--white);
  padding: .125rem .5rem; border-radius: 2px;
}
.lightbox__caption { color: rgba(255, 255, 255, .92); }
.lightbox__count { color: rgba(255, 255, 255, .6); font-size: .8125rem; }
.lightbox__btn {
  background: rgba(255, 255, 255, .12); color: var(--white);
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%;
  width: 2.75rem; height: 2.75rem; font-size: 1.5rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.lightbox__btn:hover { background: var(--red); border-color: var(--red); }
.lightbox__btn--close { position: absolute; top: .75rem; right: .75rem; font-size: 1.75rem; }
body.lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .ctablock:hover { transform: none; }
}

/* ---------- embed slots ---------- */

.embedslot {
  border: 2px dashed var(--line); border-radius: var(--radius);
  background: var(--wash); padding: 2rem 1.5rem; text-align: center; color: var(--muted);
}
.embedslot__title { font-family: var(--font-display); font-weight: 800; color: var(--blue); margin: 0 0 .5rem; }
/* Elfsight widget container. The widget brings its own styling (Dave's Elfsight
   dashboard); this only gives it air and stops an unloaded widget collapsing the
   section to nothing while it lazy-loads. */
.reviewsembed {
  margin-top: 1.5rem; min-height: 8rem;
  /* The widget must never widen the page on a phone. */
  max-width: 100%; min-width: 0; overflow-x: hidden; overflow-x: clip;
}
.reviewsembed iframe, .reviewsembed img { max-width: 100%; }
.section--reviews { border-top: 1px solid var(--line); }

/* ---------- contact form ----------
   Plain form first (one <fieldset class="form__step"> per question, all visible),
   upgraded by site.js into the one-question-per-step wizard (.form--wizard). */

.form { margin-top: 1.5rem; max-width: 44rem; }
.form__steps { display: grid; gap: 2rem; }
.form__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.form__question {
  padding: 0; margin: 0 0 .875rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.2;
  color: var(--blue); letter-spacing: -.01em;
}
.form__row { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__field { margin: 0; display: grid; gap: .375rem; }
.form__field + .form__field { margin-top: 1rem; }
.form__label { font-weight: 700; color: var(--blue); font-size: .9375rem; }
.form__hint { font-weight: 400; color: var(--muted); font-size: .875rem; }
.form__input {
  font: inherit; color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .625rem .75rem; width: 100%; min-height: 2.75rem;
}
.form__input:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.form__input--area { resize: vertical; min-height: 8rem; }
.form__input--file { padding: .5rem; background: var(--wash-2); }
.form__input[aria-invalid="true"] { border-color: var(--red-ink); }
.form__error { color: var(--red-ink); font-size: .9375rem; font-weight: 600; }
/* Server-side failure notice (#form-error). Shown by :target after the handler's no-JS
   redirect to /contact?err=1#form-error, or by .is-shown if a script wants to raise it. */
.form__error--server {
  display: none;
  border-left: 4px solid var(--red); background: var(--white);
  padding: .75rem 1rem; margin: 0 0 1.5rem;
}
.form__error--server:target, .form__error--server.is-shown { display: block; }
.form__error--server:focus { outline: none; }
.form__error--server a { font-weight: 700; }
.form__actions { margin: 1.5rem 0 0; }
.form__actions .btn, .form__submit { min-height: 3.25rem; }

/* Honeypot — off-screen, never display:none (some bots skip those), never in the tab order. */
.form__hp {
  position: absolute !important; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden; margin: 0;
}

/* Thank-you state. Shown by :target after the handler's no-JS redirect to
   /contact?sent=1#sent, or by .is-shown from the wizard. The sibling selectors hide
   the fields underneath with JS off — nothing left to fill in twice. */
.form__sent {
  display: none;
  border-left: 5px solid var(--red); background: var(--white);
  padding: 1.25rem 1.5rem; margin: 0 0 1.5rem;
}
.form__sent:target, .form__sent.is-shown { display: block; }
.form__sent:focus { outline: none; }
.form__sent-title { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--blue); }
.form__sent:target ~ .form__steps, .form__sent:target ~ .form__grid, .form__sent:target ~ .form__actions,
.form__sent:target ~ .form__hp, .form__sent:target ~ .form__error--server,
.form.is-sent .form__steps, .form.is-sent .form__grid, .form.is-sent .form__actions,
.form.is-sent .form__hp, .form.is-sent .form__error--server,
.form.is-sent .wizard__progress, .form.is-sent .wizard__count, .form.is-sent .wizard__nav,
.form.is-sent .wizard__hint, .form.is-sent .wizard__status { display: none; }

/* Pending notice — only rendered while business.formEmail is unset (action="#"). */
.form__pending {
  border-left: 4px solid var(--red); background: var(--white);
  padding: .75rem 1rem; margin: 0 0 1.5rem; color: var(--muted); font-size: .9375rem;
}
.form__pending a { font-weight: 700; }

/* ---------- quote wizard (JS-enhanced form) ----------
   One question per screen, lots of air. --red-ink (AA on white) for the progress
   bar, buttons and selected state; the true logo red stays on graphic accents. */

.form--wizard { position: relative; }
.form--wizard .form__steps { display: block; }
.form--wizard .form__step { display: none; }
.form--wizard .form__step.is-active { display: block; animation: wiz-in .16s ease-out both; }
.form--wizard .form__step.is-active.is-back { animation-name: wiz-in-back; }
@keyframes wiz-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes wiz-in-back { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* The question text gets its own, slightly longer entrance so it reads as "asked". */
.form--wizard .form__question {
  font-size: clamp(1.5rem, 4vw, 2.125rem); margin: 0 0 1.5rem;
  animation: wiz-q .24s ease-out both;
}
.form--wizard .is-active .form__question { animation-delay: .04s; }
@keyframes wiz-q { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.form--wizard .form__field + .form__field { margin-top: 1.25rem; }
.form--wizard .form__label { font-size: 1rem; }
.form--wizard .form__input { font-size: 1.125rem; padding: .875rem 1rem; min-height: 3.25rem; }
.form--wizard .form__input--area { min-height: 10rem; }

.wizard__progress {
  height: 4px; border-radius: 2px; overflow: hidden;
  background: var(--wash-2); margin: 0 0 .625rem;
}
.wizard__bar { display: block; height: 100%; width: 0; background: var(--red-ink); transition: width .25s ease; }
.wizard__count {
  margin: 0 0 2.25rem;
  font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted);
}

/* Big tap targets built from each <select>'s options; the select keeps the value. */
.wizard__choices { display: grid; gap: .625rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .wizard__choices { grid-template-columns: repeat(2, 1fr); } }
.wizard__choice {
  font: inherit; font-size: 1.0625rem; font-weight: 600; text-align: left; line-height: 1.3;
  color: var(--blue); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.125rem; min-height: 3.5rem; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wizard__choice:hover { border-color: var(--red); box-shadow: var(--shadow); transform: translateY(-1px); }
.wizard__choice[aria-pressed="true"] {
  border-color: var(--red-ink); color: var(--red-ink);
  box-shadow: inset 0 0 0 2px var(--red-ink);
}

.wizard__nav { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 2rem; }
/* Mobile: Back / Continue share the row (or stack full-width when it's too tight);
   from 40rem they go back to content-sized buttons. */
.wizard__nav .btn { min-height: 3.25rem; padding-inline: 1.75rem; flex: 1 1 8rem; }
@media (min-width: 40rem) { .wizard__nav .btn { flex: 0 0 auto; } }
.wizard__back { border-color: var(--line); color: var(--blue); background: var(--white); }
.wizard__back:hover { background: var(--wash); border-color: var(--blue); }
.wizard__hint { margin: .75rem 0 0; font-size: .8125rem; color: var(--muted); display: none; }
@media (hover: hover) and (pointer: fine) { .wizard__hint { display: block; } }

.wizard__status {
  border-left: 5px solid var(--red); background: var(--white);
  padding: 1rem 1.25rem; margin-top: 1.5rem;
}
.wizard__status a { font-weight: 700; }
.form[aria-busy="true"] .wizard__nav .btn { opacity: .6; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .form--wizard .form__step.is-active, .form--wizard .form__question { animation: none; }
  .wizard__choice:hover { transform: none; }
}

/* ---------- /free-estimate guided wizard (.wiz) ----------
   Plain form first: every .wiz__screen is visible with JS off (the JS-only screens
   ship with `hidden`). site.js adds .wiz--on / .form--wizard and shows one screen at
   a time; the progress bar, Back/Next row and tap targets reuse the wizard__* rules
   above, the service grid reuses .cards/.card from the homepage. */

.wiz { max-width: 48rem; }
.wiz__screens { display: grid; gap: 2rem; }
.wiz__screen { min-width: 0; }
.wiz .form__question { display: block; }
.wiz .form__field { gap: .625rem; }
.wiz .form__field .form__question { margin-bottom: .25rem; }
.wiz__lead { font-size: 1.125rem; color: var(--muted); max-width: 48ch; margin: 0 0 1.5rem; }
.wiz__actions { margin: 0; }
.wiz__actions .btn { min-height: 3.25rem; padding-inline: 2rem; }
.wiz__noscript {
  border-left: 4px solid var(--red); background: var(--white);
  padding: .75rem 1rem; margin: 1.5rem 0 0; color: var(--muted); font-size: .9375rem;
}
.wiz__noscript a { font-weight: 700; }

/* Address type-ahead (Photon) on the wizard's town field. site.js wraps the input in
   .wiz__addr and drops a role="listbox" under it; nothing renders with JS off. Reuses
   the .form__input border/radius and .wizard__choice colors; rows are 3rem tap targets. */
.wiz__addr { display: block; position: relative; }
.wiz__addr-list {
  list-style: none; margin: .25rem 0 0; padding: .25rem 0;
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); max-height: 16rem; overflow-y: auto;
}
.wiz__addr-item {
  margin: 0; padding: .75rem 1rem; min-height: 3rem; display: flex; align-items: center;
  font-size: 1.0625rem; line-height: 1.3; color: var(--blue); cursor: pointer;
}
.wiz__addr-item + .wiz__addr-item { border-top: 1px solid var(--wash-2); }
.wiz__addr-item:hover, .wiz__addr-item.is-active { background: var(--wash); color: var(--red-ink); }
.wiz__addr-item[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--red-ink); }

/* The page's one <h1> sits on the section heading now (no hero on /free-estimate,
   Dave #43744); keep it at the h2 size it was drawn at. Only /free-estimate uses it. */
.section__heading--wiz { font-size: clamp(1.5rem, 4vw, 2.125rem); }
/* Small call/text line under Start — the hero's ghost button used to carry this. */
.wiz__phone { margin: 1rem 0 0; font-size: .9375rem; color: var(--muted); }
.wiz__phone a { font-weight: 700; white-space: nowrap; }

/* One screen at a time once the wizard boots. */
.wiz--on .wiz__screens { display: block; }
.wiz--on .wiz__screen { display: none; }
.wiz--on .wiz__screen.is-active { display: block; }
.wiz--on .wiz__screen--intro .form__question { font-size: clamp(1.625rem, 4.5vw, 2.375rem); }

/* ---- motion polish (Dave #43744) — CSS only, transform/opacity so nothing reflows.
   site.js toggles .is-entering on the screen it just showed (and on the thank-you);
   everything here is gated to the .wiz form and to prefers-reduced-motion: no-preference,
   with a hard reduce override further down. /contact's .form--wizard keeps its own rules. */
@media (prefers-reduced-motion: no-preference) {
  .wiz--on .wiz__screen.is-entering { animation: wiz-screen-in .26s ease-out both; }
  .wiz--on .wiz__screen--done.is-entering { animation: wiz-done-in .45s ease-out both; }
  /* Progress bar width eases (same .25s the shared .wizard__bar rule uses). */
  .wiz--on .wizard__bar { transition: width .25s ease; }
  /* Tap options: light lift on hover, a small press on active. */
  .wiz .wiz__card, .wiz .wizard__choice {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .wiz .wiz__card:active { transform: scale(.98); box-shadow: var(--shadow); }
  .wiz .wizard__choice:active { transform: scale(.98); }
}
/* Hover lift only where hover exists (no sticky scale on touch). */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .wiz .wiz__card:hover { transform: scale(1.02); }
  .wiz .wizard__choice:hover { transform: scale(1.02); }
}
@keyframes wiz-screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wiz-done-in { from { opacity: 0; } to { opacity: 1; } }

/* Service card grid: the homepage .card visuals on a <button>. 2-up on a phone so all
   11 services fit in a couple of thumb-scrolls; 3-up from 40rem. */
.wiz__cards { grid-template-columns: repeat(2, 1fr); gap: .75rem; margin: 0 0 .5rem; }
@media (min-width: 40rem) { .wiz__cards { grid-template-columns: repeat(3, 1fr); gap: var(--gap); } }
.wiz__card {
  font: inherit; text-align: left; cursor: pointer;
  width: 100%; padding: 0; margin: 0;
  -webkit-appearance: none; appearance: none;
}
.wiz__card .card__body { padding: .75rem .875rem .875rem; }
.wiz__card .card__title { font-size: 1rem; line-height: 1.25; }
@media (min-width: 40rem) { .wiz__card .card__title { font-size: 1.0625rem; } }
.wiz__card:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.wiz__card[aria-pressed="true"] {
  border-color: var(--red-ink);
  box-shadow: inset 0 0 0 2px var(--red-ink), var(--shadow);
}
.wiz__card[aria-pressed="true"] .card__title { color: var(--red-ink); }
.wiz__cards + .form__field { margin-top: 1rem; }
.wiz__cards + .form__error, .wiz__screen > .form__error { display: block; margin-top: .75rem; }

/* Tap answers (text permission + follow-up + timeline + availability) reuse .wizard__choice; single column on a phone. */
.wiz .wizard__choices { margin: 0 0 .5rem; }
/* Helper copy on a tap screen. .wiz__note sits UNDER the taps (availability's "No problem —
   we'll reach out…", revealed by site.js after the No tap; `hidden` until then). */
.wiz__help { margin: -.25rem 0 1rem; max-width: 48ch; color: var(--muted); font-size: 1rem; line-height: 1.45; }
.wiz__note { margin: .5rem 0 0; font-weight: 600; color: var(--blue); }
.wiz .wizard__choice:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Buttons row: Back / Skip are quiet, Next / Send lead. */
.wiz__nav .wiz__skip { flex: 0 0 auto; }
.wiz__nav .wizard__next, .wiz__nav .wiz__send { margin-left: auto; }
.wiz--on .form__error--server { margin: 1.25rem 0 0; }

/* Thank-you screen: the same #sent panel /contact uses, shown by :target (no JS) or
   .is-shown (wizard). With JS off and no :target it stays hidden like the rest.
   Once the wizard is on, `.wiz--on .wiz__screen { display:none }` (same specificity,
   later in the sheet) used to beat `.form__sent.is-shown` — that's the empty-shell bug
   (Dave #43721). The three-class rules below outrank it on both the fetch-success and
   the ?sent=1 landing paths. */
.wiz .wiz__screen--done { margin: 0; }
.wiz.is-sent .wiz__screens { display: block; }
.wiz.is-sent .wiz__screen:not(.wiz__screen--done) { display: none; }
.wiz.is-sent .wiz__screen--done, .wiz--on .wiz__screen--done.is-shown { display: block; }
.wiz .wiz__screen--done p { margin: 0 0 .75rem; }
.wiz .wiz__screen--done p:last-child { margin-bottom: 0; }
/* No-JS :target case (#sent is nested, so no sibling combinator reaches the rest). */
.wiz:has(.form__sent:target) .wiz__screen:not(.wiz__screen--done),
.wiz:has(.form__sent:target) .form__actions { display: none; }

@media (prefers-reduced-motion: reduce) {
  .wiz--on .wiz__screen.is-active, .wiz--on .wiz__screen.is-entering,
  .wiz--on .wiz__screen--done.is-entering { animation: none; }
  .wiz--on .wizard__bar, .wiz .wiz__card, .wiz .wizard__choice { transition: none; }
  .wiz .wiz__card:hover, .wiz .wiz__card:active,
  .wiz .wizard__choice:hover, .wiz .wizard__choice:active { transform: none; }
}

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

.sitefooter { background: var(--blue); color: rgba(255, 255, 255, .88); margin-top: 3rem; }
.sitefooter__inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: 2.5rem 1.25rem;
  display: grid; gap: 2rem; grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .sitefooter__inner { grid-template-columns: 1.4fr 1fr 1fr; } }
.sitefooter a { color: var(--white); }
.sitefooter a:hover { color: var(--red); }
.logo--footer img { width: 210px; }
.sitefooter__tagline { margin-top: 1rem; color: rgba(255, 255, 255, .8); }
.sitefooter__heading { font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; color: var(--white); }
.sitefooter__heading a { text-decoration: none; }
.sitefooter__heading--spaced { margin-top: 1.75rem; }
/* Footer link lists: ≥44px tap rows on mobile (padding, no gap); the original
   tighter rhythm returns with the ≥48rem footer grid. */
.sitefooter__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sitefooter__list a { text-decoration: none; display: inline-block; padding-block: .5rem; }
.sitefooter__list a:hover { text-decoration: underline; }
@media (min-width: 48rem) {
  .sitefooter__list { gap: .5rem; }
  .sitefooter__list a { padding-block: 0; }
}
.nap { font-style: normal; display: grid; gap: .125rem; margin-top: 1rem; }
.nap__name { font-weight: 700; color: var(--white); }
.nap__phone { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; text-decoration: none; display: inline-block; padding-block: .375rem; }
.nap__note { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.sitefooter__hours { margin-top: 1rem; font-size: .9375rem; }
.sitefooter__hoursnote { display: inline-block; margin-top: .4rem; font-size: .8125rem; opacity: .8; }
/* site.json footerNav[] — secondary flat row above the legal line. */
.sitefooter__links {
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding: 1rem 1.25rem 0;
  max-width: var(--wrap); margin-inline: auto;
}
.sitefooter__linkrow {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  font-size: .9375rem; text-transform: uppercase; letter-spacing: .08em;
}
.sitefooter__linkrow a { text-decoration: none; font-weight: 700; display: inline-block; padding-block: .5rem; }
@media (min-width: 48rem) { .sitefooter__linkrow a { padding-block: 0; } }
.sitefooter__linkrow a:hover { text-decoration: underline; }
.sitefooter__linkrow [aria-current="page"] { color: rgba(255, 255, 255, .7); }
.sitefooter__legal {
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding: 1.25rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  max-width: var(--wrap); margin-inline: auto;
  font-size: .875rem;
}
.sitefooter__legal p { margin: 0; }
.sitefooter__cta { font-weight: 700; }

/* ---------- misc ---------- */

/* padding-block only: the breadcrumb also carries .section__inner, whose
   padding-inline (1.25rem) is the gutter. The old 4-value shorthand zeroed it. */
.breadcrumb { font-size: .875rem; color: var(--muted); padding-block: .875rem 0; }
.breadcrumb a { color: var(--muted); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: .375rem; color: var(--line); }

.arrowlink { display: inline-block; font-weight: 700; }
.hours { display: grid; gap: .25rem; }
.hours__note { margin-top: .6rem; font-size: .9rem; color: var(--muted, #555); }
.contactgrid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .contactgrid { grid-template-columns: 1fr 1fr; } }
.stub-note { display: none; }