@import url("tokens.css");

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-surface-page);
}
img, picture, svg { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

h2 {
  font-family: var(--font-heading-primary);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
}
h3 {
  font-family: var(--font-heading-secondary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
}
/* Real <h1> added per page (Phase 4 accessibility fix — source had none).
   Visually matches the existing hero/page-title treatment, not a new style. */
h1 {
  font-family: var(--font-heading-primary);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: var(--font-weight-h2);
}

/* ---------- Container discipline (4.1b) — one width, full-bleed backgrounds ---------- */
.section {
  padding-block: clamp(2rem, 5vw, 4rem);
  padding-inline: var(--gutter);
}
.section > .inner {
  max-width: var(--container);
  margin-inline: auto;
}
.section--bleed { padding-inline: 0; }
.section--bleed > .inner { padding-inline: var(--gutter); }
.prose { max-width: var(--measure); }

/* ---------- Focus states (accessibility floor, 4.3) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--color-brand-primary);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-heading-primary);
  font-size: var(--font-size-button);
  font-weight: 700;
  line-height: var(--line-height-button);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-button-text-on-brand);
  background: var(--color-brand-primary);
  border: none;
  border-radius: var(--radius-button);
  padding: 0.85em 1.75em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--color-brand-accent-red);
  color: var(--color-text-on-red);
}
.link-caps-red {
  display: inline-block;
  margin-block-start: 0.5rem;
  font-family: var(--font-heading-primary);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-brand-accent-red);
  text-decoration: none;
}
.link-caps-red:hover, .link-caps-red:focus-visible { text-decoration: underline; }
.accent-red { color: var(--color-brand-accent-red); }
.text-cyan { color: var(--color-brand-primary-text); } /* text use only; see tokens.css */

/* Services page: light-grey rounded callout panel around each block's closing paragraph */
.callout-panel {
  background: var(--color-surface-header-row);
  border-radius: 8px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-block-start: 1.5rem;
}
.callout-panel p { margin: 0; }

/* ---------- Header / nav (grey band: nav + veteran badge) ---------- */
.site-header { background: var(--color-surface-header-row); }
.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2.5rem;
  padding-block: 0.85rem;
}
.main-nav { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; margin-inline-end: auto; }
.main-nav a {
  font-family: var(--font-heading-primary);
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-nav);
  letter-spacing: var(--letter-spacing-nav);
  text-decoration: none;
}
.main-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.veteran-badge { height: 42px; width: auto; }

/* Services dropdown */
.nav-item.has-dropdown { position: relative; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  min-width: 230px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  padding-block: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  z-index: 30;
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown li { margin: 0; }
.nav-dropdown a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--color-text-primary);
  white-space: nowrap;
}
.nav-dropdown a:hover, .nav-dropdown a:focus-visible { background: var(--color-surface-page); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}
@media (max-width: 767px) {
  .nav-toggle { display: block; order: -1; }
  .site-header .inner { flex-wrap: wrap; justify-content: space-between; }
  .main-nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    width: 100%;
    padding-block: 1rem;
    margin-inline-end: 0;
  }
  .main-nav[data-open="true"] { display: flex; }
  .nav-item.has-dropdown { width: 100%; }
  /* Live's mobile header genuinely overlaps and misbehaves — kept fix (Chase
     confirmed): the dropdown just renders as a permanently-expanded indented
     list here rather than reproducing a broken hover-only interaction. */
  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding-inline-start: 1rem;
    margin-block: 0.25rem 0.5rem;
  }
}

/* ---------- Utility bar (white band: overlapping logo + social + call) ---------- */
.utility-bar { background: var(--color-surface-utility-bar); position: relative; z-index: 10; }
.utility-bar .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.75rem 0;
  flex-wrap: wrap;
}
.site-logo {
  display: block;
  flex-shrink: 0;
  position: relative;
  z-index: 15;
  margin-block-end: -54px; /* logo deliberately overlaps down into the hero below, matching the source */
}
.site-logo img { width: 150px; height: auto; }
.utility-bar .social-hub { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.utility-bar .social-hub a { display: inline-flex; color: var(--color-text-primary); }
.utility-bar .social-hub svg { width: 22px; height: 22px; }
.call-cta { text-align: right; }
.call-cta-label { display: block; font-weight: 700; font-size: 0.9rem; margin-block-end: 0.35rem; }
.btn-call { font-size: 0.95rem; padding: 0.6em 1.4em; }
@media (max-width: 767px) {
  .utility-bar .inner { justify-content: center; text-align: center; padding-block: 1rem 0; }
  .site-logo { margin-block-end: -34px; }
  .site-logo img { width: 100px; }
  .call-cta { text-align: center; width: 100%; order: 3; margin-block-start: 0.5rem; }
}

/* ---------- Bands (hero, secondary CTA, footer) — red, full-bleed ---------- */
.section--red {
  background-color: var(--color-brand-accent-red);
  color: var(--color-text-on-red);
}
.section--red a { color: var(--color-text-on-red); }
/* Buttons keep the source's dark-on-cyan text even inside red sections (white on cyan is 2.0:1). */
.section--red .btn { color: var(--color-button-text-on-brand); }
.section--red .btn:hover, .section--red .btn:focus-visible { color: var(--color-text-on-red); }
.section--cyan { background-color: var(--color-brand-primary); color: var(--color-button-text-on-brand); }

/* ---------- Hero (home) ---------- */
.hero-ticker {
  font-family: var(--font-heading-secondary);
  letter-spacing: 0.08em;
  font-size: clamp(0.8rem, 1.5vw, 0.95rem);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.hero .subhead { margin-block: 0.75rem 1.5rem; }

/* ---------- Page title band (interior pages) ---------- */
.page-title-band {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  background-color: #444;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.page-title-band .inner { width: 100%; max-width: none; margin: 0; padding: 0; }
.page-title-panel {
  background: rgba(55, 55, 55, 0.74);
  padding: clamp(2rem, 6vw, 3.5rem) var(--gutter);
  max-width: min(560px, 52%);
}
.page-title-panel h1 { margin: 0; color: #ececec; }
.page-title-rule { display: block; width: 220px; max-width: 60%; height: 8px; background: var(--color-brand-primary); margin-block: 1.1rem; }
.page-title-sub { color: #fff; font-size: 1.05rem; margin: 0; }
@media (max-width: 767px) {
  .page-title-band { min-height: 260px; }
  .page-title-panel { max-width: 100%; }
}
.page-title-about, .page-title-404 { background-image: url("/assets/img/about/496622269-2880w.jpg"); }
.page-title-services { background-image: url("/assets/img/services/sales-NEWIMG5-2880w.jpg"); }
.page-title-sales { background-image: url("/assets/img/sales/sales-bg-2880w.jpg"); }
.page-title-contact { background-image: url("/assets/img/contact/Contact-hero-2880w.jpg"); }

/* ---------- CTA bands (dot-texture, phone pill) ---------- */
.band {
  background-repeat: repeat;
  background-image: url("/assets/img/site/NEW1-1920w.png");
}
.band .inner { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.band-logo { flex-shrink: 0; }
.band-logo img { width: 90px; height: auto; }
.band-heading { margin: 0; flex: 1 1 260px; }
.band-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-heading-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 2px solid currentColor;
  border-radius: var(--radius-button);
  padding: 0.75em 1.6em;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
}
.btn-outline:hover, .btn-outline:focus-visible { background: rgba(255, 255, 255, 0.15); }
.band--red { background-color: var(--color-brand-accent-red); color: #fff; }
.band--cyan { background-color: var(--color-brand-primary); color: var(--color-button-text-on-brand); }
.band--cyan .btn-outline { color: var(--color-button-text-on-brand); }
.band--gradient { background-color: var(--color-brand-primary); background-image: linear-gradient(120deg, var(--color-brand-primary), var(--color-brand-accent-red)), url("/assets/img/site/NEW1-1920w.png"); color: #fff; }
.band--gradient .inner { justify-content: center; text-align: center; flex-direction: column; }
.band--grey { background-color: var(--color-surface-header-row); color: var(--color-text-primary); background-image: none; }
.band--grey a { color: var(--color-brand-accent-red); font-weight: 700; }
@media (max-width: 767px) {
  .band .inner { flex-direction: column; text-align: center; }
}

/* ---------- Icon teaser row (home) ---------- */
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}
.teaser-grid img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin-inline: auto;
}
@media (max-width: 767px) {
  .teaser-grid { grid-template-columns: 1fr; }
}

/* ---------- Service / product blocks ---------- */
.content-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.content-split.reverse .split-media { order: 2; }
.content-split.align-start { align-items: start; }
.split-media img { border-radius: 4px; }

/* Contact page: bordered form card + NAP rail */
.contact-card {
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.contact-card h2 { text-transform: uppercase; margin-block-end: 1.5rem; }
.contact-nap h2 { text-transform: uppercase; }
.contact-nap .nap-icon {
  width: 20px; height: 20px;
  filter: none; /* source icons are already dark — legible directly on the white card, unlike the white-on-red footer treatment */
}
.contact-nap p { display: flex; align-items: flex-start; gap: 0.6rem; }
.map-embed--tall iframe { height: 420px; }
.benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-block-end: 0.6rem;
}
.benefit-list img { width: 20px; height: 20px; margin-top: 0.2em; flex-shrink: 0; }
@media (max-width: 767px) {
  .content-split { grid-template-columns: 1fr; }
  .content-split.reverse .split-media { order: 0; }
}

/* About page: photo + red guarantee card, stacked, in the split's right rail */
.guarantee-rail picture { border-radius: 4px; overflow: hidden; }
.guarantee-card {
  background: var(--color-brand-accent-red);
  color: var(--color-text-on-red);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.guarantee-card h2 { color: var(--color-text-on-red); }

/* About page: 3x2 grid of red line-icon "reasons" */
.reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 1.5rem;
  text-align: center;
}
.reason img { width: 90px; height: auto; margin-inline: auto; margin-block-end: 1rem; }
.reason p { font-family: var(--font-heading-primary); font-weight: 700; text-transform: uppercase; font-size: 0.95rem; }
@media (max-width: 767px) {
  .reasons-grid { grid-template-columns: 1fr; }
}

/* ---------- Sales page: per-product intro + callout rows ---------- */
.product-row { scroll-margin-top: 1rem; }
.bg-white { background: #fff; }
.bg-offwhite { background: var(--color-surface-header-row); }
.product-intro {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.product-intro-img { width: 180px; height: auto; flex-shrink: 0; object-fit: contain; }
.product-intro h2 { font-family: var(--font-heading-secondary); font-size: var(--font-size-h3); margin-block-end: 0.5rem; }
.product-callout {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  border-radius: 8px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-block-start: 1.5rem;
}
.callout--cyan { background: var(--color-brand-primary); color: var(--color-button-text-on-brand); }
.callout--red { background: var(--color-brand-accent-red); color: var(--color-text-on-red); }
.product-callout-text { flex: 2 1 320px; }
.product-callout-media { flex: 1 1 220px; display: flex; gap: 1rem; }
.product-callout-media picture { flex: 1; border-radius: 4px; overflow: hidden; }
.product-callout-media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
@media (max-width: 767px) {
  .product-intro { flex-direction: column; text-align: center; }
  .product-callout { flex-direction: column; }
}

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-grid .field-full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-weight: 700;
  margin-block-end: 0.35rem;
  font-size: 0.9rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  padding: 0.65em 0.8em;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}
/* Checkbox/radio inputs must stay their intrinsic size — .field input's
   width:100% (0,1,1) otherwise beats .w-auto (0,1,0) and the control's flex
   basis balloons to fill the row, shoving its label text to the far edge. */
.field input[type="checkbox"],
.field input[type="radio"] {
  width: auto;
  flex: 0 0 auto;
  padding: 0;
}
.field-error {
  color: var(--color-brand-accent-red);
  font-size: 0.85rem;
  margin-block-start: 0.3rem;
  display: none;
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--color-brand-accent-red); }
.field[data-invalid="true"] .field-error { display: block; }
@media (max-width: 767px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer { --vgm-footer-color: #FFFFFF; position: relative; } /* footer's literal text color, confirmed live in Phase 4 */
.footer-photo-bg {
  background-image: linear-gradient(rgba(218, 13, 30, 0.86), rgba(218, 13, 30, 0.86)), url("/assets/img/home/footer-coil.jpg");
  background-size: cover;
  background-position: center;
}
.site-footer .footer-heading { font-family: var(--font-heading-primary); margin-block-end: 0.5rem; }
.footer-icon {
  display: inline-block;
  width: 16px; height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: -2px;
  filter: brightness(0) invert(1); /* the source icons render dark; footer bg is red, so render them white to match the established white-on-red footer text */
}

/* Row 1: rounded contact tiles */
.footer-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-block-end: 2rem;
}
.footer-tile {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}
.footer-tile .footer-icon { width: 22px; height: 22px; flex-shrink: 0; }
.footer-tile-label { display: block; font-size: 0.8rem; opacity: 0.85; margin-block-end: 0.15rem; }
.footer-tile a, .footer-tile address { color: var(--color-text-on-red); font-weight: 700; font-style: normal; }

/* Row 2: logo / quick links / map */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.footer-secondary-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.footer-secondary-nav a { color: var(--color-text-on-red); text-decoration: underline; text-underline-offset: 3px; }
.quick-links { display: flex; flex-direction: column; }
.site-footer .quick-links a { display: block; padding-block: 0.2rem; color: var(--color-text-on-red); text-decoration: none; }
.site-footer .quick-links a:hover { text-decoration: underline; }
.site-footer .map-embed iframe { width: 100%; height: 220px; border: 0; border-radius: 4px; }
@media (max-width: 767px) {
  .footer-tiles { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-secondary-nav, .footer-grid > div:nth-child(2) { justify-content: center; }
}

/* ---------- VGM design credit ---------- */
.vgm-credit {
  font-size: 0.85rem; /* same as .fs-sm, the copyright's size */
  letter-spacing: normal; /* reset — never inherit the footer's tracking */
  color: var(--vgm-footer-color, var(--color-text-on-red));
  padding-block: 0.75rem;
  text-align: center;
}
.vgm-credit[data-vgm-align="right"] { text-align: right; }
.vgm-credit a { color: inherit; }

/* ---------- Gallery + lightbox ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
.gallery-grid a { display: block; border-radius: 4px; overflow: hidden; }
.gallery-grid img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.lightbox[hidden] { display: none; }
.lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem 1rem;
}
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ---------- Utilities (replace one-off inline styles) ---------- */
.mt-05 { margin-block-start: 0.5rem; }
.mt-075 { margin-block-start: 0.75rem; }
.mt-1 { margin-block-start: 1rem; }
.mt-125 { margin-block-start: 1.25rem; }
.mt-15 { margin-block-start: 1.5rem; }
.mt-2 { margin-block-start: 2rem; }
.mb-2 { margin-block-end: 2rem; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.measure-narrow { max-width: 40rem; margin-inline: auto; }
.measure-medium { max-width: 50rem; }
.mx-auto { margin-inline: auto; }
.fs-sm { font-size: 0.85rem; }
.fw-bold { font-weight: 700; }
.fw-normal { font-weight: 400; }
.w-auto { width: auto; }
/* .field label{display:block} (0,1,1) would otherwise beat these (0,1,0) —
   scoped under .field so the flex layout actually wins. */
.field .inline-radio { font-weight: 400; display: inline-flex; align-items: center; gap: 0.4rem; margin-block-end: 0; }
.field .inline-radio + .inline-radio { margin-inline-start: 1rem; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 2.5rem;
  row-gap: 0.5rem;
  margin-block-start: 2rem;
  padding-block: 1.5rem 1rem;
  padding-inline: var(--gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  text-align: center;
}
.footer-legal .footer-copyright { margin: 0; }
/* The design credit sits in the column to the right of the copyright, on the
   same row, at the copyright's size (Chase, Phase 8 final review 2026-09-10).
   The partial's own <style> block is hoisted into <head> by build-site.mjs, so
   the widget can live inside the row wrapper. Wraps under the copyright on
   narrow screens. */
.footer-legal .vgm-credit { font-size: inherit; padding: 0; }
.field .checkbox-field { display: flex; align-items: flex-start; gap: 0.5rem; margin-block-end: 0.35rem; }
.field-label-block { display: block; margin-block-end: 0.35rem; }


/* Community-blurb dark card (home) */
.dark-card { background: #111; color: #fff; padding: 2rem; border-radius: 4px; }
.dark-card h2 { color: #fff; }

/* CTA button on a light background (secondary-cta band's phone link) */
.btn-on-red { background: #fff; color: var(--color-brand-accent-red); }

/* Section background-image treatments — real decorative assets, not CSS approximations */
.hero-home {
  background-image:
    url("/assets/img/site/NEW1-1920w.png"),
    linear-gradient(rgba(218, 13, 30, 0.82), rgba(218, 13, 30, 0.82)),
    url("/assets/img/site/home-bg-1920w.jpg");
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: auto, cover, cover;
  background-position: 0 0, center, center;
}

/* Edge-to-edge 3-photo strip (home, services) — background-image anchors,
   matching how the source implements these (Duda backgroundImage divs, not
   <img> tags); also what verify-design's decorative-asset check matches. */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.photo-strip-item {
  display: block;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}
.photo-strip-1 { background-image: url("/assets/img/home/11683650742-1000h.jpg"); }
.photo-strip-2 { background-image: url("/assets/img/home/1168365074-1000h.jpg"); }
.photo-strip-3 { background-image: url("/assets/img/home/11683650741-1000h.jpg"); }
@media (max-width: 767px) {
  .photo-strip { grid-template-columns: 1fr; }
}

/* Grey rounded promise card (home) */
.promise-card {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: var(--color-surface-header-row);
  border-radius: 8px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.promise-card picture { flex-shrink: 0; }
.promise-card img { width: 140px; height: auto; }
@media (max-width: 767px) {
  .promise-card { flex-direction: column; text-align: center; }
}
.section-construction-bg {
  background-image: linear-gradient(rgba(238, 238, 238, 0.94), rgba(238, 238, 238, 0.94)), url("/assets/img/home/construction-1920w.webp");
  background-size: cover;
  background-position: center;
}
.icon-phone { background-image: url("/assets/img/contact/telephone-2880w.png"); }
.icon-email { background-image: url("/assets/img/site/Email-1-2880w.png"); }
.icon-location { background-image: url("/assets/img/contact/location-2880w.png"); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* .reveal is a hook only: content is visible by default; assets/css/motion.css + motion.js add the choreography. */
.reveal { opacity: 1; transform: none; }

/* ---------- Phase 6: form submission states + honeypot ---------- */
/* Honeypot: off-canvas (not display:none, which naive bots also skip), plus aria-hidden/tabindex=-1 in the markup. */
.field--hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-block-start: 1rem; font-weight: 700; outline: none; }
.form-status:empty { display: none; }
.form-status[data-state="pending"] { color: #4d4d4d; }
.form-status[data-state="ok"] { color: var(--color-text-primary); }
.form-status[data-state="error"] { color: var(--color-brand-accent-red); }
.home-page .form-status { text-align: center; }
.btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }

/* Screen-reader-only text: keeps visible link labels as designed while giving assistive tech (and search engines) a descriptive link name. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Below-the-fold background photos wait for .bg-ready (set by motion.js half a viewport ahead). Gated on html.js so no-JS visitors get every image at once. */
.js [data-lazy-bg]:not(.bg-ready), .js [data-lazy-bg]:not(.bg-ready)::before, .js [data-lazy-bg]:not(.bg-ready) .photo-strip-item, .js [data-lazy-bg]:not(.bg-ready) .photo-strip-item::before { background-image: none !important; }