/* ==========================================================================
   Self-hosted webfonts (Barlow + Barlow Condensed, latin subset, SIL Open Font
   License 1.1). These were served from fonts.googleapis.com / fonts.gstatic.com
   before. Hosting them here removes two third-party origins from the Content-
   Security-Policy, removes a third-party dependency from the critical render
   path, and stops every visitor's IP being sent to Google just to load a font.
   Total weight: 96 KB for six files.
   ========================================================================== */

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-700.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
}

/* ==========================================================================
   Parker & Sons Contracting — global stylesheet
   Marquette, Michigan

   Contents
   01. Design tokens
   02. Reset & base
   03. Typography
   04. Layout: container, section, grids
   05. Buttons & links
   06. Header: utility bar, masthead, navigation
   07. Hero
   08. Trust strip & stats
   09. Cards: services, projects, area
   10. Editorial rows (text + image)
   11. Process steps
   12. Reviews / testimonials
   13. Forms
   14. FAQ (accordion)
   15. Callout / CTA bands
   16. Footer
   17. Mobile action bar
   18. Utilities & accessibility
   ========================================================================== */

/* 01. DESIGN TOKENS ======================================================= */

:root {
  /* Brand colors. Navy is sampled directly from the company logo (#004D7B). */
  --navy:        #004d7b;
  --navy-dark:   #06304a;
  --navy-ink:    #052438;
  --navy-light:  #0a6497;
  --navy-wash:   #e6eef4;

  /* Safety amber — used sparingly, for primary calls to action only. */
  --amber:       #e08a1e;
  --amber-dark:  #c2740f;

  /* Neutrals. Paper is the warm off-white carried over from the old site. */
  --paper:       #f8f5f2;
  --surface:     #ffffff;
  --surface-alt: #f1ece7;
  --line:        #ddd6cd;
  --line-strong: #c6bcb0;

  /* Text */
  --ink:         #14202a;
  --ink-muted:   #5b6a76;
  --ink-invert:  #ffffff;
  --ink-invert-muted: #bcd0de;

  /* Type */
  --font-display: "Barlow Condensed", "Arial Narrow", Helvetica, sans-serif;
  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --step-hero:  clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);
  --step-h1:    clamp(2.1rem, 1.65rem + 2.1vw, 3.375rem);
  --step-h2:    clamp(1.65rem, 1.4rem + 1.2vw, 2.375rem);
  --step-h3:    clamp(1.2rem, 1.13rem + 0.35vw, 1.45rem);
  --step-lead:  clamp(1.075rem, 1.03rem + 0.25vw, 1.25rem);
  --step-body:  1.0625rem;
  --step-small: 0.9375rem;
  --step-label: 0.8125rem;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Structure */
  --container: 1240px;
  --container-narrow: 760px;
  --gutter: 1.25rem;
  --radius: 4px;
  --radius-lg: 6px;

  --shadow-sm: 0 1px 2px rgba(5, 36, 56, 0.08);
  --shadow-md: 0 6px 20px rgba(5, 36, 56, 0.10);
  --shadow-lg: 0 18px 44px rgba(5, 36, 56, 0.16);

  --header-h: 72px;
}

@media (min-width: 900px) {
  :root { --gutter: 2rem; --header-h: 88px; }
}

/* 02. RESET & BASE ======================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Room for the fixed mobile call bar. */
  padding-bottom: env(safe-area-inset-bottom);
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { background: var(--surface-alt); }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--sp-6) 0;
}

/* 03. TYPOGRAPHY ========================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.005em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--step-h1); text-transform: uppercase; }
h2 { font-size: var(--step-h2); text-transform: uppercase; }
h3 { font-size: var(--step-h3); font-weight: 600; letter-spacing: 0.01em; }
h4 { font-size: 1.05rem; font-weight: 600; }

p { margin: 0 0 var(--sp-4); max-width: 68ch; }

.lead {
  font-size: var(--step-lead);
  line-height: 1.6;
  color: var(--ink);
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--sp-3);
}

.eyebrow--light { color: var(--amber); }

.section-head { max-width: 46rem; margin-bottom: var(--sp-6); }
.section-head p { color: var(--ink-muted); }

ul, ol { padding-left: 1.15rem; margin: 0 0 var(--sp-4); }
li { margin-bottom: var(--sp-2); }
li:last-child { margin-bottom: 0; }

/* Checklist — used for scope-of-work lists on service pages. */
.checklist { list-style: none; padding: 0; }
.checklist li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: var(--sp-3);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  background: var(--navy);
  transform: rotate(45deg);
}
.checklist--light li::before { background: var(--amber); }

/* Two-column list on wider screens. */
@media (min-width: 720px) {
  .checklist--split { column-count: 2; column-gap: var(--sp-6); }
  .checklist--split li { break-inside: avoid; }
}

/* 04. LAYOUT ============================================================== */

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

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--sp-8); }
@media (min-width: 900px) { .section { padding-block: var(--sp-9); } }

.section--tight { padding-block: var(--sp-7); }
.section--paper { background: var(--paper); }
.section--surface { background: var(--surface); }
.section--alt { background: var(--surface-alt); }
.section--navy {
  background: var(--navy-ink);
  color: var(--ink-invert);
}
.section--navy p { color: var(--ink-invert-muted); }
.section--navy h2, .section--navy h3 { color: var(--ink-invert); }

.grid { display: grid; gap: var(--sp-5); }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 720px) and (max-width: 979px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* 05. BUTTONS & LINKS ===================================================== */

a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--navy-light); }

.btn {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.9rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--navy-ink);
}
.btn--primary:hover { background: var(--amber-dark); border-color: var(--amber-dark); color: var(--navy-ink); }

.btn--navy {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--ink-invert);
}
.btn--navy:hover { background: var(--navy-dark); border-color: var(--navy-dark); color: var(--ink-invert); }

.btn--outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn--outline:hover { background: var(--navy); color: var(--ink-invert); }

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--ink-invert);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: var(--ink-invert); }

.btn--block { width: 100%; }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.0625rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* Arrow link — used for "read more" style navigation. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--navy);
}
.arrow-link::after {
  content: "→";
  transition: transform 120ms ease;
}
.arrow-link:hover { text-decoration: underline; }
.arrow-link:hover::after { transform: translateX(3px); }

/* 06. HEADER ============================================================== */

.utility-bar {
  background: var(--navy-ink);
  color: var(--ink-invert-muted);
  font-size: var(--step-label);
  letter-spacing: 0.02em;
}
.utility-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
  min-height: 38px;
  padding-block: 0.4rem;
}
.utility-bar a { color: var(--ink-invert); text-decoration: none; font-weight: 600; }
.utility-bar a:hover { color: var(--amber); text-decoration: underline; }
.utility-bar__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.utility-bar__list li { margin: 0; }
.utility-bar__hide-sm { display: none; }
@media (min-width: 700px) { .utility-bar__hide-sm { display: inline; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
  padding-block: 0.6rem;
}

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
.brand img { width: auto; height: 52px; background: none; }
@media (min-width: 900px) { .brand img { height: 62px; } }
.brand__text { display: none; }
@media (min-width: 420px) { .brand__text { display: block; } }
.brand__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy-ink);
}
.brand__tag {
  display: block;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 0.22rem;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 18px; height: 12px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: transform 150ms ease, opacity 150ms ease;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: 5px; }
.nav-toggle__bars::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-5px) rotate(-45deg); }

@media (min-width: 1100px) { .nav-toggle { display: none; } }

/* Primary navigation */
.primary-nav { display: none; }
.primary-nav.is-open {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--surface);
  border-bottom: 3px solid var(--navy);
  box-shadow: var(--shadow-lg);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: var(--sp-4) var(--gutter) var(--sp-6);
}

.primary-nav__list { list-style: none; margin: 0; padding: 0; }
.primary-nav__list > li { border-bottom: 1px solid var(--line); margin: 0; }
.primary-nav__list > li > a,
.primary-nav__list > li > .subnav-toggle {
  display: block;
  width: 100%;
  text-align: left;
  /* A <button> takes line-height: normal from the browser rather than
     inheriting it, which made the Services item a different height from its
     <a> neighbours. Inheriting keeps every nav item the same box. */
  line-height: inherit;
  padding: 0.85rem 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--navy-ink);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.primary-nav__list > li > a[aria-current="page"] { color: var(--navy); }

/* Higher specificity than the shared nav-item rule above, so the "+" sits at
   the right edge of the row on mobile. */
.primary-nav__list > li > .subnav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.subnav-toggle::after {
  content: "+";
  font-size: 1.3rem;
  line-height: 1;
  color: var(--navy);
}
.subnav-toggle[aria-expanded="true"]::after { content: "–"; }

.subnav {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0 0 0 var(--sp-4);
  border-left: 2px solid var(--line);
}
.subnav[hidden] { display: none; }
.subnav a {
  display: block;
  padding: 0.55rem 0;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.subnav a:hover { color: var(--navy); text-decoration: underline; }

.primary-nav__cta { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }

@media (min-width: 1100px) {
  .primary-nav,
  .primary-nav.is-open {
    display: block;
    position: static;
    padding: 0;
    border: 0;
    box-shadow: none;
    overflow: visible;
    max-height: none;
    background: none;
  }
  .primary-nav__list { display: flex; align-items: center; gap: 1.35rem; }
  .primary-nav__list > li > a,
  .primary-nav__list > li > .subnav-toggle { white-space: nowrap; }
  .primary-nav__list > li { border: 0; position: relative; }
  .primary-nav__list > li > a,
  .primary-nav__list > li > .subnav-toggle {
    padding: 0.5rem 0;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
  }
  /* The hover / current-page underline is positioned, not in the flow.
     The nav links are <a> and Services is a <button>, so when this bar took up
     space it made the button 15px shorter than its neighbours — and because the
     list centres its items, that turned into the word "Services" sitting 4px
     lower than everything else. Taking the bar out of the flow gives every item
     an identical box and keeps the labels on one line. */
  .primary-nav__list > li > a::after,
  .primary-nav__list > li > .subnav-toggle::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 140ms ease;
  }

  /* Services is a flex container so the caret can sit beside its label on
     mobile. On desktop it should hug its text rather than stretch. */
  .primary-nav__list > li > .subnav-toggle {
    width: auto;
    justify-content: flex-start;
  }
  .primary-nav__list > li > a:hover::after,
  .primary-nav__list > li > a[aria-current="page"]::after,
  /* Services is a <button>, so it needs naming separately or it is the one
     nav item that never underlines on hover. */
  .primary-nav__list > li > .subnav-toggle:hover::before,
  .primary-nav__list > li > .subnav-toggle[aria-expanded="true"]::before,
  /* ...and it should read as the active item while you are on a service page,
     where the current-page marker sits on a link inside its submenu. */
  .primary-nav__list > li:has(.subnav [aria-current="page"]) > .subnav-toggle::before {
    transform: scaleX(1);
  }
  .subnav-toggle::after { margin-left: 0.35rem; content: "▾"; font-size: 0.75rem; }
  .subnav-toggle[aria-expanded="true"]::after { content: "▴"; }

  .subnav {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: -1rem;
    /* see .subnav::before below — the visual gap needs an invisible bridge */
    width: 262px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--navy);
    box-shadow: var(--shadow-md);
    padding: var(--sp-2) 0;
    margin: 0;
    z-index: 70;
  }
  /* The dropdown sits a few pixels below the nav item. Without this bridge the
     pointer crosses dead space on the way down, the parent fires mouseleave and
     the menu closes before it can be clicked. The bridge is a descendant of the
     submenu, so the pointer never actually leaves the nav item. */
  .subnav::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.75rem;
    height: 0.75rem;
  }

  .subnav a { padding: 0.6rem 1rem; }
  .subnav a:hover { background: var(--navy-wash); text-decoration: none; }
  .primary-nav__cta { display: none; }
}

.header-actions { display: none; align-items: center; gap: var(--sp-3); }
@media (min-width: 1100px) { .header-actions { display: flex; } }
.header-phone {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-decoration: none;
  color: var(--navy-ink);
}
.header-phone__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.header-phone__number {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.header-phone:hover .header-phone__number { color: var(--navy); }

/* 07. HERO ================================================================ */

.hero {
  position: relative;
  background-color: var(--navy-ink);
  background-size: cover;
  background-position: center;
  color: var(--ink-invert);
  border-bottom: 5px solid var(--amber);
}

/* Dark wash over the photo so the headline always clears contrast, whatever
   photo gets dropped in. The image itself is set with a style attribute on the
   element (see index.html) so the path resolves against the page. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 36, 56, 0.94) 0%, rgba(5, 36, 56, 0.86) 45%, rgba(5, 36, 56, 0.55) 100%);
}

/* On a phone the hero is tall rather than wide, so the wash runs top-to-bottom
   instead of left-to-right: dark behind the headline, opening up over the photo
   underneath. The lightest stop is held at 0.72 so the meta list below the
   buttons still clears AA against the brightest part of any photo. */
@media (max-width: 767px) {
  .hero::before {
    background: linear-gradient(180deg,
      rgba(5, 36, 56, 0.93) 0%,
      rgba(5, 36, 56, 0.88) 45%,
      rgba(5, 36, 56, 0.72) 100%);
  }
  .page-head::before {
    background: linear-gradient(180deg,
      rgba(5, 36, 56, 0.94) 0%,
      rgba(5, 36, 56, 0.80) 100%);
  }
}

.hero__inner {
  position: relative;
  padding-block: var(--sp-8);
  max-width: 44rem;
}
@media (min-width: 900px) { .hero__inner { padding-block: var(--sp-9); } }

.hero h1 {
  font-size: var(--step-hero);
  color: #fff;
  margin-bottom: var(--sp-4);
}
.hero p {
  font-size: var(--step-lead);
  color: #dbe7ef;
  max-width: 40rem;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem var(--sp-5);
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  font-size: var(--step-small);
  font-weight: 500;
  color: #cddced;
}
.hero__meta li { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.hero__meta li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--amber);
  transform: rotate(45deg);
  flex: none;
}

/* Compact page header for interior pages. */
.page-head {
  background: var(--navy-ink);
  color: var(--ink-invert);
  border-bottom: 5px solid var(--amber);
  background-size: cover;
  background-position: center;
  position: relative;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 36, 56, 0.95) 0%, rgba(5, 36, 56, 0.82) 60%, rgba(5, 36, 56, 0.62) 100%);
}
.page-head__inner { position: relative; padding-block: var(--sp-7); max-width: 46rem; }
@media (min-width: 900px) { .page-head__inner { padding-block: var(--sp-8); } }
.page-head h1 { color: #fff; }
.page-head p { color: #d4e2ec; font-size: var(--step-lead); margin-bottom: 0; }

.breadcrumb {
  font-size: var(--step-label);
  letter-spacing: 0.04em;
  color: #a9c3d5;
  margin-bottom: var(--sp-4);
}
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: #6d8ba3; }
.breadcrumb a { color: #cfe0ec; text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }

/* 08. TRUST STRIP & STATS ================================================= */

.trust-strip {
  background: var(--navy);
  color: #fff;
}
.trust-strip__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4) var(--sp-5);
  list-style: none;
  margin: 0;
  padding-block: var(--sp-5);
}
@media (min-width: 860px) { .trust-strip__list { grid-template-columns: repeat(4, 1fr); } }
.trust-strip__list li { margin: 0; }
.trust-strip__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.trust-strip__label {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b9d3e5;
  margin-top: 0.3rem;
}

/* 09. CARDS =============================================================== */

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }

.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-wash); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: var(--sp-2); }
.card__body p { color: var(--ink-muted); font-size: var(--step-small); margin-bottom: var(--sp-4); }
.card__body .arrow-link { margin-top: auto; }

/* Service card — links the whole tile without nesting interactive elements. */
.card--link { position: relative; }
.card--link .card__title-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card--link:hover { transform: translateY(-2px); }
.card__title-link { color: var(--navy-ink); text-decoration: none; }
.card--link:hover .card__title-link { color: var(--navy); }

/* Featured service — first card spans two columns on desktop. */
@media (min-width: 980px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .service-grid .card--featured { grid-column: span 2; flex-direction: row; }
  .service-grid .card--featured .card__media { aspect-ratio: auto; flex: 1 1 46%; }
  .service-grid .card--featured .card__body { flex: 1 1 54%; justify-content: center; padding: var(--sp-6); }
  .service-grid .card--featured h3 { font-size: 1.7rem; }
  .service-grid .card--featured p { font-size: var(--step-body); }
}

/* Plain bordered panel */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.panel h3 { margin-bottom: var(--sp-3); }
.panel p:last-child, .panel ul:last-child { margin-bottom: 0; }
.panel--amber { border-left-color: var(--amber); }

/* A card that runs the full width of a two-column grid, so an odd number of
   cards doesn't leave one stranded on its own row. */
@media (min-width: 720px) {
  .grid--2 > .card--span { grid-column: 1 / -1; }
  .grid--2 > .card--span { flex-direction: row; }
  .grid--2 > .card--span .card__media { aspect-ratio: auto; flex: 1 1 40%; }
  .grid--2 > .card--span .card__body { flex: 1 1 60%; justify-content: center; }
}

/* 10. EDITORIAL ROWS ====================================================== */

.row-split { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) {
  .row-split { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }
  .row-split--reverse .row-split__media { order: 2; }
}
.row-split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.row-split__body p:last-child { margin-bottom: 0; }

.figure-caption {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  margin-top: var(--sp-2);
}

/* 11. PROCESS STEPS ======================================================= */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); counter-reset: step; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li {
  margin: 0;
  padding-top: var(--sp-4);
  border-top: 3px solid var(--line);
  counter-increment: step;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
  margin-bottom: var(--sp-3);
}
.steps h3 { margin-bottom: var(--sp-2); }
.steps p { font-size: var(--step-small); color: var(--ink-muted); margin: 0; }
.section--navy .steps li { border-top-color: rgba(255, 255, 255, 0.22); }
.section--navy .steps li::before { color: var(--amber); }

/* 12. REVIEWS ============================================================= */

.review {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.review blockquote {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
}
.review blockquote::before { content: "“"; }
.review blockquote::after { content: "”"; }
.review__stars { color: var(--amber); letter-spacing: 0.16em; font-size: 1.05rem; line-height: 1; }
.review__attrib {
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--ink-muted);
  margin-top: auto;
}
.review__attrib span { display: block; font-weight: 400; }

/* Clearly-marked placeholder block, easy to spot and swap out. */
.placeholder-note {
  border: 2px dashed var(--line-strong);
  background: repeating-linear-gradient(135deg, #f4efe9, #f4efe9 10px, #efe8e0 10px, #efe8e0 20px);
  border-radius: var(--radius);
  padding: var(--sp-5);
  color: #6a5b48;
  font-size: var(--step-small);
}
.placeholder-note strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a6a53;
  margin-bottom: var(--sp-2);
}
.placeholder-note p:last-child { margin-bottom: 0; }

/* 13. FORMS =============================================================== */

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 5px solid var(--navy);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 720px) { .form-card { padding: var(--sp-6); } }

.field { margin-bottom: var(--sp-4); }
.field label {
  display: block;
  font-size: var(--step-small);
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--ink);
}
.field .req { color: #a4331d; }
.field .hint { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--ink-muted); margin-top: 0.15rem; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0, 77, 123, 0.18);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #a4331d;
  background: #fdf6f4;
}

.field-error {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #8f2c19;
  margin-top: 0.3rem;
}
.field-error:empty { display: none; }

.field--check { display: flex; gap: 0.6rem; align-items: flex-start; }
.field--check input { width: auto; margin-top: 0.3rem; flex: none; }
.field--check label { font-weight: 400; font-size: var(--step-small); }

@media (min-width: 640px) {
  .field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--sp-4); }
}

.form-status {
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--step-small);
  font-weight: 500;
}
.form-status[hidden] { display: none; }
.form-status--error { background: #fdf0ec; border: 1px solid #e0b3a6; color: #8f2c19; }
.form-status--ok { background: #eaf4ec; border: 1px solid #a9cbb2; color: #1f5730; }

/* Honeypot — hidden from people, catches naive bots. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 14. FAQ ================================================================= */

.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--navy-ink);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--navy);
  flex: none;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item summary:hover { color: var(--navy); }
.faq-item__body { padding-bottom: var(--sp-5); max-width: 62ch; }
.faq-item__body p:last-child { margin-bottom: 0; }

/* 15. CALLOUT BANDS ======================================================= */

.cta-band {
  background: var(--navy);
  color: #fff;
  border-top: 5px solid var(--amber);
}
.cta-band__inner {
  display: grid;
  gap: var(--sp-5);
  padding-block: var(--sp-7);
  align-items: center;
}
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: 1.4fr 1fr; gap: var(--sp-8); }
}
.cta-band h2 { color: #fff; margin-bottom: var(--sp-3); }
.cta-band p { color: #c8dcea; margin-bottom: 0; }
.cta-band__actions { display: grid; gap: var(--sp-3); }
.cta-band__phone {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  line-height: 1;
}
.cta-band__phone:hover { color: var(--amber); }

/* 16. FOOTER ============================================================== */

.site-footer {
  background: var(--navy-ink);
  color: var(--ink-invert-muted);
  font-size: var(--step-small);
  padding-top: var(--sp-8);
}
.site-footer h2, .site-footer h3 {
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: var(--sp-4);
}
.site-footer a { color: #d7e5ef; text-decoration: none; }
.site-footer a:hover { color: var(--amber); text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.55rem; }
.site-footer p { color: var(--ink-invert-muted); }

.footer-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--sp-7); } }

.footer-brand img { height: 72px; width: auto; background: none; margin-bottom: var(--sp-4); }
.footer-phone {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff !important;
  line-height: 1.1;
  text-decoration: none !important;
}
.footer-phone:hover { color: var(--amber) !important; }

.footer-legal {
  margin-top: var(--sp-7);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-block: var(--sp-4) var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  justify-content: space-between;
  font-size: 0.8125rem;
  color: #91adc1;
}
.footer-legal p { margin: 0; color: #91adc1; }

/* Extra bottom padding so the mobile call bar never covers footer content. */
@media (max-width: 1099px) {
  .site-footer { padding-bottom: 68px; }
}

/* 17. MOBILE ACTION BAR =================================================== */

.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--navy-ink);
  border-top: 2px solid var(--amber);
  padding-bottom: env(safe-area-inset-bottom);
}
.action-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.95rem 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: #fff;
}
.action-bar a + a { background: var(--amber); color: var(--navy-ink); }
.action-bar svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
@media (min-width: 1100px) { .action-bar { display: none; } }

/* 18. UTILITIES & ACCESSIBILITY =========================================== */

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

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-radius: 2px;
}
.section--navy :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible,
.cta-band :focus-visible { outline-color: #ffc46b; }

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

.stack > * + * { margin-top: var(--sp-4); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.text-muted { color: var(--ink-muted); }
.nowrap { white-space: nowrap; }

/* 19. EX-INLINE STYLES ====================================================
   These rules replace style="" attributes. Inline style attributes can't be
   hashed by a CSP, so keeping them would have forced style-src 'unsafe-inline'
   and given up most of the protection. Keep new styling in here, not in markup.
   ========================================================================== */

/* Addresses shouldn't be italic — the browser default is wrong for our use. */
address { font-style: normal; }

/* Footer: bold lead-ins inside a column ("Hours", "Licensed & insured"). */
.site-footer strong { color: #fff; }

/* Contact page definition list */
.contact-details { margin: var(--sp-6) 0; }
.contact-details dt { font-weight: 600; }
.contact-details dd { margin: 0 0 var(--sp-4); }
.contact-details dd:last-child { margin-bottom: 0; }

/* The oversized phone number, on a light background rather than in the band. */
.cta-band__phone--on-light { color: var(--navy); }
.cta-band__phone--on-light:hover { color: var(--navy-light); }

/* Small print under a form */
.form-footnote {
  font-size: 0.875rem;
  margin: var(--sp-4) 0 0;
}

/* A heading that needs to sit a step down from its default size */
.h2--sm { font-size: 1.25rem; }

/* Spacing utilities — deliberately few. If you need a new one, add it here
   rather than reaching for a style attribute. */
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-6); }
.u-mt-6 { margin-top: 2.5rem; }
.u-mb-6 { margin-bottom: 2.5rem; }
.u-py-5 { padding-block: var(--sp-6); }

/* Page-specific hero and header photographs. Paths are relative to this
   stylesheet, so they start at ../img/. */
.hero--home        { background-image: url("../img/hero-excavator.jpg"); }

/* On a phone the hero is tall and narrow, so only a thin vertical slice of the
   photo shows. Centered, that slice is empty ground between the two machines.
   Shift it right so the wheel loader is what you see. This is tuned to the
   current hero photo; if the photo changes, revisit (or delete) this rule. */
@media (max-width: 767px) {
  .hero--home { background-position: 78% center; }
}
.page-head--excavating   { background-image: url("../img/excavating.jpg"); }
.page-head--demolition   { background-image: url("../img/demolition.jpg"); }
.page-head--driveways    { background-image: url("../img/driveways.jpg"); }
.page-head--septic       { background-image: url("../img/septic.jpg"); }
.page-head--trucking     { background-image: url("../img/trucking.jpg"); }
.page-head--snow-removal { background-image: url("../img/snow-removal.jpg"); }
.page-head--towing       { background-image: url("../img/towing.jpg"); }