/* River's Edge Home Center - shared styles */

:root {
  --brick: #8e2434;
  --brick-deep: #6e1b28;
  --river: #2380a0;
  --river-dark: #1c6a85;
  --river-light: #45b8c4;
  --mist: #eef4f7;
  --mist-wall: #c3d5de;
  --sand: #f8f5ef;
  --charcoal: #54565a;
  --ink: #2e3033;
  --muted: #5a5f66;
  --white: #ffffff;
  --radius: 10px;
  --shadow: 0 2px 14px rgba(46, 48, 51, 0.10);
  --maxw: 1120px;
  /* Header + utility bar run wider than the body content so the logo sits
     further left and the nav further right - less dead space up top. */
  --maxw-header: 1320px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  line-height: 1.65;
  background: var(--white);
}

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

a { color: var(--river-dark); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- Top utility bar ---------- */
.utility-bar {
  background: var(--charcoal);
  color: #e2e5e8;
  font-size: 0.85rem;
}
.utility-bar .container {
  max-width: var(--maxw-header);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 7px;
  padding-bottom: 7px;
  flex-wrap: wrap;
}
.utility-bar a { color: #fff; text-decoration: none; }
.utility-bar a:hover { text-decoration: underline; }
.utility-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Header / nav ---------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid #e0e6ea;
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container {
  max-width: var(--maxw-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
  /* Tighter than the body gutter: the bigger logo needs the width, and pulling
     it closer to the edge is the point. */
  padding-left: 16px;
  padding-right: 16px;
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 95px; width: auto; }
@media (max-width: 680px) {
  .brand img { height: 56px; }
}

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span {
  display: block; width: 24px; height: 3px; margin: 5px 0;
  background: var(--charcoal); border-radius: 2px;
}

/* nowrap: the nav must stay on a single line - below the breakpoint the
   mobile rules take over and turn it into a hamburger instead of wrapping. */
.main-nav ul { list-style: none; display: flex; gap: 2px; flex-wrap: nowrap; }
.main-nav a {
  display: block;
  padding: 8px 9px;
  color: var(--charcoal);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 6px;
  white-space: nowrap;
}
.main-nav a:hover { background: var(--mist); }
.main-nav a.active { color: var(--river-dark); background: var(--mist); }

/* Dropdown submenu (e.g. Testimonials under About) */
.main-nav .has-submenu { position: relative; }
.main-nav .has-submenu > a::after {
  content: "\25be"; /* ▾ */
  font-size: 0.7em;
  margin-left: 5px;
  vertical-align: middle;
}
.main-nav .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  flex-direction: column;
  gap: 2px;
  background: var(--white);
  border: 1px solid #e0e6ea;
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 60;
}
.main-nav .has-submenu:hover > .submenu,
.main-nav .has-submenu:focus-within > .submenu { display: flex; }
.main-nav .submenu li { display: block; }
.main-nav .submenu a { display: block; }

/* Header call button. Sits to the right of the nav on desktop; on mobile it
   moves left of the hamburger so the phone number is always one tap away. */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--brick);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.header-cta:hover { background: var(--brick-deep); }
.header-cta svg { width: 17px; height: 17px; flex: none; fill: currentColor; }

/* ---------- Hero ----------
   Client direction (2026-07-28): no text over the storefront photo and no dark
   overlay - the building is the first thing you see, clean, and the headline
   and CTAs sit underneath it. */
.hero-photo { background: var(--mist); line-height: 0; }
.hero-photo img,
.hero-photo video {
  width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: cover;
  object-position: center 58%;
}

/* Video inside a .split section (showroom "Why Visit"). The poster sits on the
   container as a background so there is still something to look at if the video
   is suppressed; the wrapper carries the same radius/shadow as .split img. */
.split-video {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  line-height: 0;
  background-size: cover;
  background-position: center;
}
.split-video video { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .split-video video { display: none; }
  .split-video { aspect-ratio: 16 / 9; }
}

/* ---------- Home hero band ----------
   Client direction has moved twice here, so the history matters:
   2026-07-28 was "no writing over the photo, no dark shading" - the objection
   was to the dark scrim, not to text as such. The 2026-07-31 mockup puts the
   headline back over the photo but fades to WHITE on the left instead, which
   lightens the image rather than dimming it. That is the treatment below.
   Below 900px the overlay is abandoned entirely: the photo stacks above the
   copy, because a half-width text column over a photo is unreadable on a
   phone no matter how it is faded. */
.hero-band { position: relative; overflow: hidden; background: #fff; }
/* The photo is inset from the left rather than filling the band, and the white
   ::after fade dissolves the panel's left edge so there is no hard seam - the
   soft blend is the part of the client's mockup worth keeping.
   The inset exists because the storefront sign occupies 17-29% of the source
   photo, which lands under the text column (which ends at ~35%) when the photo
   runs full width. No amount of zoom or object-position fixes that: at these
   aspect ratios object-fit:cover crops vertically only, so there is no
   horizontal travel. Starting the panel at 30% puts the sign at roughly 42-50%
   of the band, just clear of the copy and just past where the fade runs out.
   Moving this value moves the sign - recheck both if you touch it.
   Panel aspect must stay above the photo's 1.5 or the building gets cropped
   off the sides; at 1440px the panel is 1008x520 (1.94), comfortably clear. */
.hero-band-img {
  position: absolute;
  top: 0;
  bottom: 0;
  /* width must be explicit: an absolutely positioned <img> with width:auto
     resolves to its intrinsic ratio and ignores `right`, which leaves a gap
     at the right edge instead of filling the panel. */
  left: 30%;
  width: 70%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}
/* White at the left, dissolving into the photo.
   The first stop must stay FULLY opaque past the panel's left edge at 30%.
   If the fade has already started thinning by then, the photo appears at
   partial opacity against pure white and that step reads as a hard vertical
   seam - most visibly where the saturated green lawn meets it.
   It must also be fully transparent before the sign at ~42%: washing out the
   business's own name is the one thing this treatment must not do. */
.hero-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg,
    #fff 0%,
    #fff 31%,
    rgba(255, 255, 255, 0.70) 35%,
    rgba(255, 255, 255, 0.25) 39%,
    rgba(255, 255, 255, 0) 43%);
}
.hero-band-inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw-header);
  margin: 0 auto;
  padding: 74px 20px 78px;
  min-height: 520px;
  display: flex;
  align-items: center;
}
.hero-band-copy { max-width: 430px; }
.hero-band h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.9rem;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
}
.hero-band h1 .accent {
  display: block;
  color: var(--brick);
  font-style: italic;
}
/* "With one call" - the qualifier under the headline, with a rule running off
   to the right the way the mockup drew it. */
.hero-band .kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 30px;
}
.hero-band .kicker::after {
  content: "";
  height: 1px;
  width: 74px;
  background: var(--brick);
  opacity: 0.5;
}
.hero-band .btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-band .btn { border-radius: 4px; }
/* Outline button on a light background - the shared .btn-outline is white-on-
   transparent for dark bands and would vanish here. */
.hero-band .btn-outline {
  border: 2px solid var(--brick);
  color: var(--brick);
  background: rgba(255, 255, 255, 0.75);
}
.hero-band .btn-outline:hover { background: #fff; }

@media (max-width: 900px) {
  .hero-band { overflow: visible; }
  .hero-band::after { content: none; }
  /* Stacked: the panel inset is undone and the photo goes full width again. */
  .hero-band-img {
    position: static;
    left: auto;
    right: auto;
    width: 100%;
    height: 300px;
    object-position: center 58%;
  }
  .hero-band-inner {
    min-height: 0;
    padding: 34px 20px 42px;
    display: block;
  }
  .hero-band-copy { max-width: none; }
  .hero-band h1 { font-size: 2.1rem; }
}
@media (max-width: 560px) {
  .hero-band h1 { font-size: 1.75rem; }
  .hero-band-img { height: 220px; }
}

/* ---------- Pillar band (Design / Build / Remodel / Support) ----------
   Sits directly under the hero and states the GC positioning in four words
   before any body copy asks to be read. */
.pillar-band { background: var(--brick); color: #fff; }
.pillar-band .container {
  max-width: var(--maxw-header);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 26px;
  padding-bottom: 26px;
}
.pillar {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 4px 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.pillar:first-child { border-left: 0; padding-left: 0; }
.pillar svg {
  width: 34px;
  height: 34px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
}
.pillar h3 {
  color: #fff;
  margin: 0 0 2px;
  font-size: 1rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.pillar p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.86);
}
@media (max-width: 900px) {
  .pillar-band .container { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .pillar:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 520px) {
  .pillar-band .container { grid-template-columns: 1fr; }
  .pillar { border-left: 0; padding-left: 0; }
}

/* ---------- Category cards ---------- */
.cat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.cat-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid #e4eaee;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cat-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.cat-card img { width: 100%; height: 190px; object-fit: cover; }
.cat-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cat-card h3 {
  margin: 0 0 5px;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.cat-card p { margin: 0 0 14px; font-size: 0.92rem; color: var(--muted); }
.cat-card .arrow {
  margin-top: auto;
  align-self: flex-end;
  color: var(--brick);
  font-size: 1.2rem;
  line-height: 1;
}
@media (max-width: 900px) { .cat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cat-cards { grid-template-columns: 1fr; } }

/* ---------- Name / address / phone bar ----------
   Doubles as the local-SEO NAP block, so the text here must stay identical to
   the footer, the schema, and the Google Business Profile. */
.nap-bar { background: var(--sand); border-top: 1px solid #e8e2d7; border-bottom: 1px solid #e8e2d7; }
.nap-bar .container {
  max-width: var(--maxw-header);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 34px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.nap-lead {
  color: var(--brick);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.nap-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--charcoal);
  line-height: 1.4;
}
.nap-item a { color: var(--charcoal); text-decoration: none; font-weight: 700; }
.nap-item a:hover { text-decoration: underline; }
.nap-item svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--brick);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 900px) {
  .nap-bar .container { justify-content: flex-start; }
}

.page-hero {
  background: linear-gradient(160deg, var(--charcoal) 0%, #3c4a54 55%, var(--river-dark) 100%);
  color: #fff;
  text-align: center;
  padding: 56px 20px;
}
.page-hero h1 { font-size: 2rem; }
.page-hero p { max-width: 720px; margin: 10px auto 0; color: #e4edf2; }

/* Light variant: used where a photo or video band sits directly above the
   heading, so the dark gradient would fight it. */
.page-hero--light { background: var(--mist); color: var(--ink); }
.page-hero--light h1 { color: var(--charcoal); }
.page-hero--light p { color: var(--muted); }

/* Photo variant: real image behind the heading, dark overlay for legibility */
.page-hero--photo {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 72px 20px;
}
.page-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(30,40,48,.74) 0%, rgba(40,58,70,.60) 55%, rgba(20,45,60,.80) 100%);
}
.page-hero--photo > * { position: relative; z-index: 1; }

/* ---------- Instagram feed preview ----------
   The Elfsight Instagram widget renders however many rows are configured on the
   widget itself, not in the embed markup. On the homepage we clip it to a couple
   of rows and fade out to a button; the /recent-work/ page shows it in full.
   If the homepage feed ever looks cut mid-row, set the row count on the Elfsight
   widget rather than nudging these max-heights. */
.feed-preview {
  position: relative;
  max-height: 620px;
  overflow: hidden;
}
.feed-preview::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--white));
  pointer-events: none;
}
@media (max-width: 680px) {
  .feed-preview { max-height: 520px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
  transition: background 0.15s ease;
  border: 0;
  cursor: pointer;
}
.btn-primary { background: var(--brick); color: #fff; }
.btn-primary:hover { background: var(--brick-deep); }
.btn-outline { border: 2px solid #fff; color: #fff; background: transparent; }
.btn-outline:hover { background: rgba(255, 255, 255, 0.15); }
.btn-river { background: var(--river-dark); color: #fff; }
.btn-river:hover { background: #15556b; }

/* ---------- Sections ---------- */
section { padding: 56px 0; }
.section-mist { background: var(--mist); }
.section-sand { background: var(--sand); }
.section-charcoal { background: var(--charcoal); color: #e8ebee; }
.section-charcoal h2 { color: #fff; }
.section-river { background: var(--river-dark); color: #e4f1f5; }
.section-river h2 { color: #fff; }

h2 { color: var(--charcoal); font-size: 1.7rem; margin-bottom: 16px; line-height: 1.3; }
h3 { color: var(--charcoal); font-size: 1.2rem; margin: 22px 0 8px; }
section p { margin-bottom: 14px; }
section ul, section ol { margin: 0 0 14px 22px; }
section li { margin-bottom: 6px; }

.center { text-align: center; }
.muted { color: var(--muted); }

.eyebrow {
  color: var(--brick);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 8px;
}

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

/* ---------- Award / association logo strip ---------- */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 32px;
}
.logo-strip img {
  height: 60px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
}
.card h3 { margin-top: 0; }
.card h3 a { color: var(--charcoal); text-decoration: none; }
.card h3 a:hover { color: var(--river-dark); }

/* Process steps */
.process-steps { counter-reset: step; }
.process-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 28px;
}
.process-step .step-num {
  counter-increment: step;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--river);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-step .step-num::before { content: counter(step); }
.process-step h3 { margin-top: 6px; }

/* Staff cards */
.staff-card { text-align: center; overflow: hidden; padding: 0; }
.staff-card img { width: 100%; height: 320px; object-fit: cover; object-position: center 20%; }
.staff-card .staff-body { padding: 20px 22px 26px; }
.staff-card h3 { margin-top: 0; margin-bottom: 4px; }
.staff-role {
  color: var(--river-dark);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 10px;
}
.staff-card p { margin-bottom: 0; font-size: 0.92rem; }

/* Testimonials */
.stars { color: #e8a521; font-size: 1.1rem; letter-spacing: 2px; }
/* Quoted customer reviews. Plain on-page copy only - never wrap these in
   Review/aggregateRating schema, see the reviews note in CLAUDE.md. */
.testimonial {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 32px;
  background: var(--white);
  border-left: 4px solid var(--brick);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.testimonial blockquote { margin: 0; font-size: 1.05rem; line-height: 1.7; }
.testimonial blockquote p:last-child { margin-bottom: 0; }
.testimonial cite { display: block; margin-top: 10px; font-style: normal; font-weight: 700; color: var(--charcoal); }
.testimonial .review-photo { width: 100%; height: 190px; object-fit: cover; border-radius: var(--radius); margin-top: 12px; }

/* Photos of handwritten letters / review screenshots */

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery-grid a { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gallery-grid img { width: 100%; height: 240px; object-fit: cover; transition: transform 0.2s ease; }
.gallery-grid a:hover img { transform: scale(1.03); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(46, 48, 51, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: min(92vw, 1400px);
  max-height: 84vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.lightbox-caption {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: #dbe4e9;
  font-size: 0.9rem;
  text-align: center;
  max-width: 90vw;
}
.lightbox button {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.lightbox button:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-close { top: 18px; right: 18px; }
.lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }
@media (max-width: 680px) {
  .lightbox button { width: 42px; height: 42px; font-size: 1.25rem; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

/* Two-column with image */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.split img { border-radius: var(--radius); box-shadow: var(--shadow); }

/* Hours table */
.hours-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.hours-table th, .hours-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid #dbe4e9; }
.hours-table th { color: var(--charcoal); }

/* Image placeholder (pre-launch) */
.img-placeholder {
  background: repeating-linear-gradient(45deg, var(--mist), var(--mist) 12px, #e2ebf0 12px, #e2ebf0 24px);
  border: 2px dashed var(--mist-wall);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px;
  min-height: 280px;
}

/* ---------- Before / after pairs ---------- */
.ba-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 28px; }
.ba-pair { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.ba-images { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.ba-figure { margin: 0; position: relative; }
.ba-figure img { width: 100%; height: 230px; object-fit: cover; display: block; }
.ba-figure .img-placeholder { min-height: 230px; height: 100%; border-radius: 0; border-width: 0 3px 0 0; }
.ba-figure figcaption {
  position: absolute; top: 10px; left: 10px;
  background: rgba(30, 40, 48, 0.82); color: #fff;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  padding: 4px 10px; border-radius: 999px;
}
.ba-caption { margin: 0; padding: 14px 16px; color: var(--muted); font-size: 0.95rem; }
@media (max-width: 900px) { .ba-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .ba-images { grid-template-columns: 1fr; }
  .ba-figure .img-placeholder { border-width: 0 0 3px 0; }
}

/* Notice */
.notice {
  background: #fff8e6;
  border: 1px solid #eadfb8;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 18px 0;
  font-size: 0.95rem;
}

/* CTA band */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 8px; }
.cta-band p { max-width: 640px; margin: 0 auto 22px; }

/* ---------- Forms ---------- */
.contact-form { max-width: 640px; }
.contact-form label { display: block; font-weight: 600; color: var(--charcoal); margin: 14px 0 4px; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--mist-wall);
  border-radius: 8px;
  font: inherit;
  color: var(--ink);
  background: var(--white);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline: 2px solid var(--river); border-color: var(--river); }
.contact-form textarea { min-height: 130px; resize: vertical; }
.contact-form button[type="submit"] { margin-top: 20px; }
.form-status { margin-top: 12px; font-weight: 600; min-height: 1.4em; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: #d4d8db; font-size: 0.92rem; }
.site-footer .container { padding-top: 48px; padding-bottom: 24px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 32px; }
.site-footer h3 { color: #fff; font-size: 1rem; margin: 0 0 12px; }
.site-footer a { color: #eef1f3; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 7px; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #c9ced2;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .hero-photo img { max-height: 300px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .utility-bar .container { justify-content: center; }
  .process-step { grid-template-columns: 48px 1fr; gap: 14px; }
  .process-step .step-num { width: 48px; height: 48px; font-size: 1.2rem; }
}

/* ---------- Collapsed nav ----------
   Kicks in well above the phone breakpoint. The client's requirement is that
   the nav never wraps to two rows, so below the width where it fits on one
   line we go to the hamburger rather than wrapping.
   The 2026-07-31 restructure took the menu from ten items to six (Kitchens,
   Bathrooms, Flooring and Process moved under a Services dropdown). Measured
   in-browser: brand 167 + nav 607 + Call Us Today button 196 + gaps/padding 64
   = 1034px. That is only marginally better than the ten-item nav's 1052px,
   because the new CTA button spends most of what the dropdowns saved - but the
   nav font/padding are back to 1rem/9px instead of the 0.95rem/5px the old
   menu needed to fit. 1049px collapsed that six-item menu with a little headroom.

   2026-08-05: Reviews (was Testimonials, and was a child of About) was promoted
   to a seventh top-level item at the client's request. Re-measured: brand 167 +
   nav 679 + button 196 + gaps/padding 64 = 1106px, so the breakpoint moves
   1049 -> 1119. The cost is that 1050-1119px viewports now get the hamburger
   where they used to get the full nav; the client's rule that the nav must never
   wrap to two rows leaves no alternative short of shortening a label.
   NOTE: re-measure if a label gets longer or an eighth item is added. */
@media (max-width: 1119px) {
  .nav-toggle { display: block; order: 3; }
  /* margin-left:auto keeps the button paired with the hamburger on the right
     instead of stranding it in the middle of the header. */
  .header-cta { order: 2; margin-left: auto; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid #e0e6ea;
    box-shadow: var(--shadow);
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; padding: 10px 16px 16px; }
  .main-nav a { padding: 12px 10px; }
  /* Collapsed, the submenu renders inline, indented under its parent */
  .main-nav .submenu {
    display: flex;
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 18px;
    min-width: 0;
  }
  .main-nav .has-submenu > a::after { content: ""; }
}
/* Narrow phones: the button keeps the tap target and the icon, drops the word. */
@media (max-width: 560px) {
  .header-cta { padding: 11px 14px; }
  .header-cta span { display: none; }
}