/* =========================================================================
   Scrap Metal Exchange: styles.css
   Flat static site, no build step, no framework. Mirrors the conventions of
   Lewis Psychology Website: hand-written CSS, self-hosted fonts, vendored
   GSAP. Design tokens below, then base, layout, components, utilities.
   ========================================================================= */

@import url('fonts/fonts.css');

:root {
  /* ---- Color tokens (pulled from the real client logo, "Best Logo Metal
     Exchange.png", charcoal ink + recycle green off its badge, gray
     dropped as a UI color since it's too light to pass as text; every
     pairing below is contrast-checked, see comments) ---- */
  --navy: #1e282a;         /* ground: logo's charcoal ink */
  --navy-raised: #26302f;
  --iron: #33403c;         /* raised panel on dark */
  --bone: #f4f2ef;         /* light field */
  --white: #ffffff;
  --orange: #31a662;       /* single accent: CTAs, small badges, borders, logo's recycle green */
  --orange-dark: #1c6b41;  /* hover/active state for green, also passes
                               5.82:1 with bone text */
  --orange-on-light: #1c6b41; /* small/normal-weight green TEXT on light
                                  backgrounds (bone/white), 5.82:1+. The
                                  bright --orange is large-text/UI-only
                                  (3.12:1 on bone, fails for small labels) */
  --orange-on-dark: #6fda9e;  /* small/normal-weight green TEXT on dark
                                  backgrounds (navy/iron), 6.3-8.8:1 */
  --zinc: #4e5b55;         /* body copy on light backgrounds, 6.37:1 on bone */
  --zinc-soft: #aab7b0;    /* muted/meta text on dark, 5.21:1 on iron, 7.26:1 on navy, both verified */
  --line: #dcd7d0;         /* hairline borders on light */
  --line-dark: #33403c30;

  /* Contrast notes (verified, computed against WCAG relative luminance):
     bone/#f4f2ef on navy/#1e282a   = 13.50:1
     zinc/#4e5b55 on bone/#f4f2ef   = 6.37:1
     navy/#1e282a on orange/#31a662 = 4.86:1  -> CTA buttons use NAVY text
                                                 on green, never white
     bone/#f4f2ef on orange-dark    = 5.82:1
     orange as text color is LARGE-TEXT-ONLY (3.12:1 on bone): headings,
     never body copy or small labels */

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1200px;
  --radius: 6px;
  --radius-lg: 14px;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  color-scheme: light;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 112.5%; scroll-padding-top: 130px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--bone);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.08;
  margin: 0 0 var(--space-2);
  font-weight: 600;
}
h1 { font-size: clamp(2.4rem, 5vw + 1rem, 4.4rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3vw + 1rem, 2.6rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 var(--space-2); }
ul, ol { padding-left: 1.2em; }

/* ---- Skip link (a11y) ---- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--orange);
  color: var(--navy);
  padding: 0.75em 1.2em;
  font-weight: 700;
  z-index: 1000;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
}

/* ---- Focus states (visible everywhere, never suppressed) ---- */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}
button:focus-visible, a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* ---- Layout ---- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}
.section { padding: var(--space-6) 0; }
.section--tight { padding: var(--space-5) 0; }
.section--dark { background: var(--navy); color: var(--bone); }
.section--dark h2, .section--dark h1 { color: var(--white); }
.section--iron { background: var(--iron); color: var(--bone); }
.grid {
  display: grid;
  gap: var(--space-3);
}
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .grid--3, .grid--4, .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: minmax(0, 1fr); }
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.98rem;
  color: var(--orange-on-light); /* small text on light bg needs the darker tone, see tokens above */
  font-weight: 600;
  margin-bottom: var(--space-1);
}
.section--dark .eyebrow, .section--iron .eyebrow { color: var(--orange-on-dark); }
.lede {
  font-size: 1.15rem;
  color: var(--zinc);
  max-width: 62ch;
}
.section--dark .lede, .section--iron .lede { color: var(--bone); opacity: 0.85; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.95em 1.6em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--orange);
  color: var(--navy); /* 4.65:1, verified, do not swap to white */
}
.btn-primary:hover { background: var(--orange-dark); color: var(--white); }
.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-outline:hover { background: rgba(255,255,255,0.08); }
.btn-dark {
  background: var(--navy);
  color: var(--white);
}
.btn-dark:hover { background: var(--navy-raised); }
.btn-block { width: 100%; justify-content: center; }
.btn-lg { padding: 1.1em 2em; font-size: 1.05rem; }

/* ---- Utility bar (phone always visible) ----
   Fixed 44px tall so the sticky header can tuck it away on scroll
   (header top: -44px): only the main nav row stays pinned. */
.utility-bar {
  background: var(--navy);
  color: var(--bone);
  font-size: 0.98rem;
  height: 44px;
}
.utility-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-2);
  flex-wrap: nowrap;
}
.utility-bar__phone {
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  font-size: 1.05rem;
  color: var(--white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
}
.utility-bar__hours { color: var(--zinc-soft); white-space: nowrap; }
.utility-bar__links { display: flex; gap: var(--space-3); }
.utility-bar__links a {
  text-decoration: none;
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
}
.utility-bar__links a:hover { color: var(--orange-on-dark); }

/* ---- Header / Nav ---- */
.site-header {
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: -44px; /* = utility bar height, it scrolls away, nav row stays */
  z-index: 100;
}
.site-header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  gap: var(--space-3);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
  color: var(--navy);
}
/* Header height is CONSTANT (no jump on scroll). The logo is absolutely
   positioned so it can overhang the bar at the top of the page (130px) and
   shrink into the bar once scrolled (64px) without changing layout. */
.site-header > .container { position: relative; min-height: 88px; padding-top: var(--space-1); padding-bottom: var(--space-1); }
.brand { width: 130px; height: 64px; flex: none; z-index: 101; }
.brand img {
  position: absolute;
  left: var(--space-3);
  top: 8px;
  width: 130px;
  height: 130px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
  transition: width 0.2s ease, height 0.2s ease, filter 0.2s ease;
}
.site-header.is-scrolled .brand img { width: 72px; height: 72px; top: 8px; filter: none; }
@media (max-width: 900px) {
  .brand { width: 72px; }
  .brand img, .site-header.is-scrolled .brand img { width: 72px; height: 72px; top: 8px; filter: none; }
}
/* header + utility bar use the same 1200px container as page content, so the logo and nav edge line up with the hero text */
.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
}
.main-nav ul {
  display: flex;
  list-style: none;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: space-evenly;
}
.main-nav a {
  white-space: nowrap;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.main-nav a.btn { min-height: 0; color: var(--navy); }
.main-nav a.btn-outline { color: var(--navy); }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--orange-dark); }
.main-nav a.btn-primary:hover { color: var(--white); }
.header-cta { display: flex; gap: 0.6em; }
@media (min-width: 1101px) { .header-cta .btn-outline { display: none; } } /* Get Directions already in utility bar */
.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  width: 48px;
  height: 48px;
  padding: 0;
  cursor: pointer;
  place-items: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  position: relative;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { transition: transform 0.2s ease, top 0.2s ease, background-color 0.2s ease; }
/* open state: hamburger becomes an X */
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1100px) {
  .nav-toggle { display: grid; position: relative; z-index: 2; }
  .brand { z-index: 0; }
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 85vw);
    background: var(--bone);
    flex-direction: column;
    align-items: stretch;
    padding: 8rem var(--space-3) var(--space-3); /* links start below the toggle */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    box-shadow: -8px 0 24px rgba(0,0,0,0.15);
    overflow-y: auto;
  }
  .main-nav[data-open="true"] { transform: translateX(0); visibility: visible; transition: transform 0.25s ease; }
  .main-nav ul { flex-direction: column; gap: 0; margin-top: 0; flex: 0 0 auto; }
  .main-nav { box-shadow: -8px 0 32px rgba(30,40,42,0.35); }
  .main-nav ul a { width: 100%; font-size: 1.1rem; border-bottom: 1px solid var(--line); }
  .header-cta { flex-direction: column; margin-top: auto; padding-top: var(--space-3); }
  .header-cta .btn { justify-content: center; }
}
/* Utility bar on small screens: phone + one link, never wraps */
@media (max-width: 880px) { .utility-bar__hours { display: none; } }
@media (max-width: 560px) {
  .utility-bar__links a[href$="commercial.html"] { display: none; }
  .utility-bar .container { justify-content: space-between; }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(22,32,46,0.97) 20%, rgba(22,32,46,0.55) 70%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding: var(--space-6) 0 var(--space-5);
  max-width: 720px;
}
.hero__marker {
  font-family: var(--font-display);
  color: var(--orange-on-dark);
  font-weight: 700;
  font-size: 1.1rem;
}
.hero h1 { color: var(--white); margin-bottom: var(--space-2); }
.hero__materials {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--bone);
  margin-bottom: var(--space-1);
}
.hero__location {
  color: var(--zinc-soft);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1rem;
  margin-bottom: var(--space-3);
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
}
@media (max-width: 560px) {
  .hero__ctas .btn { width: 100%; justify-content: center; }
}

/* ---- Cards ---- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card__media { aspect-ratio: 4/3; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--space-3); }
.card__body h3 { margin-bottom: 0.4em; }
.card__body p { color: var(--zinc); font-size: 1rem; margin-bottom: 0.6em; }

.material-card {
  text-align: center;
}
.material-card .card__media { aspect-ratio: 1/1; }
.material-card h3 { font-size: 1.05rem; }

/* Material grid: 7 materials + 1 call-to-action tile = 8 tiles, so every row
   is full: 4+4 (>=1000px), 2x4 (480-999px), index 2-up / detail 1-up below. */
.material-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.material-grid > * { display: flex; flex-direction: column; }
.material-grid .card__media { aspect-ratio: 4 / 3; flex: none; }
.material-grid .card__body { flex: 1; }
@media (max-width: 999px) {
  .material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .material-grid { gap: var(--space-2); }
  .material-grid:not(:has(.material-card)) { grid-template-columns: minmax(0, 1fr); }
  .material-grid .card__media { aspect-ratio: 16 / 9; }
  .material-grid:has(.material-card) .card__media { aspect-ratio: 1 / 1; }
  .material-grid .card__body { padding: var(--space-2); }
}
.cta-tile {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-3);
}
.cta-tile h3 { color: var(--white); margin-bottom: 0.2em; }
.cta-tile p { color: var(--bone); margin-bottom: var(--space-1); }
.cta-tile a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--orange-on-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
}
.cta-tile a:hover { color: var(--white); }
@media (max-width: 479px) { .material-grid:has(.material-card) .cta-tile { padding: var(--space-2); } .material-grid:has(.material-card) .cta-tile a { font-size: 1.02rem; } }

.icon-card {
  text-align: center;
  padding: var(--space-3);
}
.icon-card__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-2);
  color: var(--orange);
}
.icon-card__icon svg { width: 100%; height: 100%; }
.icon-card h3 { font-size: 1.05rem; margin-bottom: 0.3em; }
.icon-card p { color: var(--zinc); font-size: 0.98rem; }

/* ---- Feature list (why choose us) ---- */
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li {
  display: flex;
  gap: 0.8em;
  padding: 0.7em 0;
  border-bottom: 1px solid var(--line-dark);
  align-items: flex-start;
}
.section--dark .feature-list li,
.section--iron .feature-list li { border-bottom-color: rgba(244,242,239,0.15); }
.feature-list li:last-child { border-bottom: none; }
.feature-list__check {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--orange);
  margin-top: 5px;
}

/* ---- Steps (how it works) ---- */
.steps { counter-reset: step; }
.step {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-2) 0;
}
.step__num {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--orange-on-light); /* 5.8:1 on light; bright green is 2.8:1 on bone */
  width: 2.2ch;
}
.section--dark .step__num, .section--iron .step__num { color: var(--orange-on-dark); }

/* ---- Location / contact block ---- */
.location-block {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 880px) { .location-block { grid-template-columns: 1fr; } }
.hours-table { width: 100%; border-collapse: collapse; margin: var(--space-2) 0; }
.hours-table td { padding: 0.4em 0; border-bottom: 1px solid var(--line-dark); }
.hours-table td:last-child { text-align: right; font-weight: 600; white-space: nowrap; padding-left: var(--space-2); }
.hours-table td:first-child { white-space: nowrap; }
@media (max-width: 400px) { .hours-table { font-size: 1rem; } }
.map-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.map-card img { width: 100%; display: block; }
.map-card__label {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  background: var(--navy);
  color: var(--white);
  padding: 0.6em 1em;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.98rem;
}

/* ---- Reviews ---- */
.review-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.review-card__stars { color: var(--orange-on-light); letter-spacing: 0.1em; margin-bottom: 0.5em; }
.review-card__quote { color: var(--navy); margin-bottom: var(--space-2); }
.review-card__name { font-weight: 700; font-size: 0.98rem; }
.review-card__meta { color: var(--zinc); font-size: 0.98rem; }

/* ---- Forms ---- */
.form-panel {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  border: 1px solid rgba(244,242,239,0.14);
}
.section--dark .form-panel { background: var(--iron); }
@media (min-width: 561px) { .form-panel { padding: var(--space-4) var(--space-3); } }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-2);
}
.form-grid > * { min-width: 0; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.form-field { display: flex; flex-direction: column; gap: 0.35em; margin-bottom: var(--space-2); }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  font-size: 0.98rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.85em 1em;
  border-radius: var(--radius);
  border: 1px solid rgba(244,242,239,0.62); /* >=3:1 vs panel (WCAG 1.4.11) */
  background: rgba(244,242,239,0.06);
  color: var(--white);
}
.form-field select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
  height: 48px;
  padding-right: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23f4f2ef' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
}
.form-field select option { color: var(--navy); background: var(--white); }
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(244,242,239,0.72); }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.form-field small { color: rgba(244,242,239,0.78); font-size: 0.98rem; }
.form-field[data-error="true"] input,
.form-field[data-error="true"] select,
.form-field[data-error="true"] textarea {
  border-color: #ff8a5c;
}
.form-consent + .form-error { display: block; margin-top: 0.3em; }
.form-error {
  color: #ffb08a;
  font-size: 0.98rem;
  font-weight: 600;
}
.form-consent { display: flex; gap: 0.7em; align-items: flex-start; font-size: 0.98rem; color: rgba(244,242,239,0.8); }
.form-consent { cursor: pointer; padding: 0.35em 0; min-height: 44px; }
.form-consent input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--orange); cursor: pointer; }
.form-status {
  margin-top: var(--space-2);
  padding: 1em 1.2em;
  border-radius: var(--radius);
  font-weight: 600;
  display: none;
}
.form-status[data-state="success"] { display: block; background: rgba(49,166,98,0.18); border: 1px solid var(--orange); }
.form-status[data-state="error"] { display: block; background: rgba(255,80,80,0.14); border: 1px solid #ff8a5c; }
/* honeypot: visually hidden but not display:none (bots skip display:none checks) */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--navy);
  color: var(--bone);
  padding: var(--space-5) 0 var(--space-3);
  border-top: 1px solid rgba(244,242,239,0.14);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h2.footer-heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--orange-on-dark);
  font-size: 0.98rem;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin: 0; }
.footer-grid ul a { display: flex; align-items: center; min-height: 44px; }
.footer-grid a { text-decoration: none; color: var(--bone); opacity: 0.85; }
.footer-grid a:hover { opacity: 1; color: var(--orange-on-dark); }
.footer-phone {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  display: block;
  margin-bottom: 0.3em;
  opacity: 1 !important;
}
.footer-bottom {
  border-top: 1px solid rgba(244,242,239,0.15);
  padding-top: var(--space-2);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 0.98rem;
  color: var(--zinc-soft);
}
.footer-bottom a { color: var(--zinc-soft); text-decoration: underline; display: inline-block; padding: 0.7em 0.2em; }
.footer-bottom { align-items: center; }
.footer-bottom a:hover { color: var(--orange-on-dark); }

/* ---- Page header (interior pages) ---- */
.page-header {
  background: var(--navy);
  color: var(--white);
  padding: var(--space-5) 0 var(--space-4);
}
.page-header .lede { color: var(--bone); opacity: 0.85; }
.breadcrumb {
  font-size: 0.98rem;
  color: var(--zinc-soft);
  margin-bottom: var(--space-2);
}
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; margin-bottom: var(--space-1); }
.breadcrumb a { color: var(--zinc-soft); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb a:hover { color: var(--orange-on-dark); }

/* ---- FAQ (accordion) ---- */
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: var(--space-2) 0;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--orange-on-light);
  font-weight: 400;
  margin-left: var(--space-2);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { color: var(--zinc); margin-top: 0.8em; }

/* ---- Callout / notice boxes (legal/compliance content) ---- */
.notice {
  border: 1px solid var(--orange-dark);
  background: var(--white);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  margin: var(--space-3) 0;
}
.notice h3 { font-size: 1rem; margin-bottom: 0.4em; }
.notice p:last-child { margin-bottom: 0; }

/* ---- Credentials strip ---- */
.credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
}
/* Muted logo look lives on the images only (grayscale), never as container
   opacity: opacity here would also wash out any sibling text's contrast
   below its stated token value (caught by axe on the about.html
   placeholder copy: --zinc measured as a lighter blended color under a
   parent opacity of 0.7). */
.credentials img { height: 42px; width: auto; filter: grayscale(1) opacity(0.75); }

/* ---- Misc ---- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Reveal-on-scroll (progressive enhancement only) ----
   [data-reveal] elements are fully visible by default. This rule only
   fires once script.js explicitly adds .pre-reveal via JS, so a visitor
   with JS disabled, a slow connection, or a crawler/screenshot tool never
   sees hidden content. See script.js's IntersectionObserver. */
[data-reveal].pre-reveal {
  opacity: 0;
  transform: translateY(18px);
}
[data-reveal] {
  transition: opacity 0.5s ease, transform 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal].pre-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Yard photo scroller ---- */
.yard-scroll {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  scrollbar-width: thin;
  scrollbar-color: var(--orange) transparent;
}
.yard-scroll img {
  flex: 0 0 86%;
  width: 86%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  scroll-snap-align: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-dark);
}
.yard-scroll:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.yard-scroll__hint { margin: 0; font-size: 0.98rem; color: var(--zinc); }
.section--dark .yard-scroll__hint, .section--iron .yard-scroll__hint { color: var(--zinc-soft); }
/* Desktop/tablet: both photos fit side by side, no scrolling, no hint */
@media (min-width: 881px) {
  .yard-scroll { overflow: visible; gap: var(--space-2); }
  .yard-scroll img { flex: 1 1 0; width: 0; min-width: 0; aspect-ratio: 1 / 1; }
  .yard-scroll__hint { display: none; }
}
@media (max-width: 880px) {
  .yard-scroll__hint { margin-top: calc(-1 * var(--space-2)); }
}

/* ---- Round 2 additions ---- */
@media (max-width: 560px) {
  .section { padding: calc(var(--space-4) + 0.5rem) 0; }
  .page-header { padding-top: var(--space-3); }
}
/* inline text links: taller hit area without changing line flow */
main p:not(.breadcrumb) a:not(.btn), main li a:not(.btn) { padding: 0.65em 0; }
.form-consent { padding: 0.6em 0; min-height: 48px; align-items: center; }
.form-consent input { width: 28px; height: 28px; }

/* service areas: one shared line, then a compact left-aligned city list */
.city-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.city-list li {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.3rem;
  font-weight: 600;
  padding: 0.55em 1.1em;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* photo cap: desktop portrait capped at 640px tall */
.photo-cap { width: 100%; max-height: 640px; object-fit: cover; object-position: center 30%; }
/* photo cap: tall portrait must not exceed the viewport when columns stack */
@media (max-width: 900px) {
  .photo-cap { width: 100%; aspect-ratio: 4 / 3; max-height: 520px; object-fit: cover; object-position: center 30%; }
}

/* mobile drawer backdrop + scroll lock */
.nav-backdrop { display: none; }
@media (max-width: 1100px) {
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(30, 40, 42, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }
  html.nav-open .nav-backdrop { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
  .main-nav { z-index: 2; }
  .nav-toggle { z-index: 3; }
  html.nav-open { overflow: hidden; } /* html only: also hiding body would turn it into the scroll container and unstick the header */
  html.nav-open body { overscroll-behavior: contain; }
}

a[href^="tel:"] { white-space: nowrap; }
.utility-bar { overflow-x: clip; }
.cta-tile h3 { line-height: 1.2; }

/* ---- Owner pass: photo heroes, hero CTA hierarchy, small fixes ---- */
.page-header--photo { position: relative; overflow: hidden; isolation: isolate; min-height: 380px; display: flex; align-items: center; padding: var(--space-5) 0; }
.page-header--photo > .container { position: relative; z-index: 1; width: 100%; }
.page-header__media { position: absolute; inset: 0; z-index: -1; }
.page-header__media img { width: 100%; height: 100%; object-fit: cover; }
.page-header__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* text sits in the left ~60% (overlay >= .78 across the text; h1 large text at the far right >= 3:1 even on white): even a pure white pixel behind it gives bone text >= 5:1 */
  background: linear-gradient(90deg, rgba(30,40,42,0.92) 0%, rgba(30,40,42,0.8) 55%, rgba(30,40,42,0.6) 100%);
}
.page-header--photo .breadcrumb, .page-header--photo .breadcrumb a { color: var(--bone); }
.page-header--photo .lede { color: var(--bone); opacity: 1; }
@media (max-width: 700px) {
  .page-header--photo { min-height: 0; padding: var(--space-3) 0 var(--space-4); }
  .page-header__media::after { background: rgba(30,40,42,0.88); }
}

/* hero: Call Now is the one primary button, the rest are text links */
.btn-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.4em;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 2px;
  white-space: nowrap;
}
.btn-link:hover { color: var(--orange-on-dark); }
@media (max-width: 560px) { .hero__ctas { gap: 0.2em 1em; } .hero__ctas .btn-lg { width: 100%; } }

/* footer legal links wrap cleanly (no separators to strand at a line end) */
.footer-bottom > span:last-child { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); }

/* what-we-buy tile carries the copy of the old notice */
.cta-tile p { font-size: 1rem; max-width: 24ch; }

/* service areas: uniform chip grid */
.city-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.city-list li { text-align: center; padding: 0.7em 0.5em; }
@media (min-width: 560px) { .city-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .city-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---- Round 2 QA ---- */
/* select: fixed 48px box, text vertically centred in Chromium and WebKit */
.form-field select { padding-top: 0; padding-bottom: 0; line-height: normal; }

/* desktop nav: every link >=44px wide */
@media (min-width: 1101px) { .main-nav ul a { min-width: 44px; justify-content: center; padding: 0 0.4em; } }

/* no-JS (html lacks .js): show the nav as a plain wrapped row, drawer pattern off */
@media (max-width: 1100px) {
  html:not(.js) .site-header > .container { flex-wrap: wrap; }
  html:not(.js) .nav-toggle, html:not(.js) .nav-backdrop { display: none; }
  html:not(.js) .main-nav {
    position: static; width: auto; flex: 1 1 100%; transform: none; visibility: visible;
    box-shadow: none; padding: 0 0 var(--space-1); flex-direction: row; flex-wrap: wrap;
    align-items: center; overflow: visible; transition: none;
  }
  html:not(.js) .main-nav ul { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 0 1rem; }
  html:not(.js) .main-nav ul a { width: auto; border-bottom: 0; font-size: 1rem; }
  html:not(.js) .header-cta { flex-direction: row; margin-top: 0; padding-top: 0; }
}

/* small phones: tighter hero so both CTAs sit above the fold */
@media (max-width: 560px) {
  .hero__inner { padding: var(--space-3) 0 var(--space-3); }
  .hero__marker { margin-bottom: 0.5rem; }
  .hero h1 { margin-bottom: 0.6rem; }
  .hero__location { margin-bottom: var(--space-2); }
}