/* Bay Builders & Remodeling - shared design system, v6 "Classic"
   Mirrors the real baybuilders.com: white ground, their bright blue (#1679CA,
   sampled from the live consult button) for actions, their navy (#101278,
   declared in their own stylesheet) for weight, light gray bands, friendly
   BIG sans type in sentence case. Photography and plain talk carry the page.
   Class API unchanged from prior versions; compose with these classes. */

:root {
  --bg: #FFFFFF;
  --bg2: #F4F6F8;            /* light band */
  --panel: #FFFFFF;
  --ink: #232A35;            /* dark slate, friendlier than black */
  --ink-soft: #4E5866;
  --ink-faint: #6E7987;
  --accent: #1679CA;         /* their consult-button blue: links + CTAs */
  --accent-ink: #0F5E9F;
  --champagne: #E3C79A;      /* retired accent kept as alias for stray refs */
  --navy: #101278;           /* their declared brand navy: label bars, emphasis */
  --blue: #1679CA;
  --blue-deep: #101278;
  --blue-light: #6C9CD8;
  --line: rgba(35, 42, 53, .16);
  --line-soft: rgba(35, 42, 53, .09);
  --dark-band: #14163E;      /* deep navy: footer, closing band */
  --shadow: 0 1px 2px rgba(20, 26, 40, .06), 0 14px 34px -12px rgba(20, 26, 40, .16);
  --shadow-lift: 0 2px 4px rgba(20, 26, 40, .08), 0 22px 48px -14px rgba(20, 26, 40, .24);

  /* The original is sans throughout; headings big, light-weight, sentence case */
  --display: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --sp-xl: clamp(96px, 13vw, 180px);
  --sp-l:  clamp(68px, 9.5vw, 132px);
  --sp-m:  clamp(48px, 6.5vw, 92px);
  --sp-s:  clamp(30px, 4.2vw, 52px);

  /* surfaces that stay dark regardless of theme */
  --surface-dark: #14163E;
  --on-dark: #F5F7FA;

  --r: 10px;
  --r-lg: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.125rem/1.7 var(--body);           /* BIG base text, per the brief */
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); }
.band { background: var(--bg2); }
section { padding: var(--sp-l) 0; }
section.sec-xl { padding: var(--sp-xl) 0; }
section.sec-m  { padding: var(--sp-m) 0; }
section.sec-s  { padding: var(--sp-s) 0; }

/* ---- type: big, light, sentence case ---- */
h1 {
  font: 300 clamp(2.9rem, 6.4vw, 5.4rem)/1.1 var(--display);
  letter-spacing: -.01em; margin: 0; text-wrap: balance;
}
h1 em, h2 em { font-style: italic; color: var(--accent); }
h2 {
  font: 300 clamp(2.1rem, 3.9vw, 3.2rem)/1.18 var(--display);
  letter-spacing: -.008em; margin: 0; text-wrap: balance;
}
h2 b, h1 b { font-weight: 600; }
h2.h2-lead { font-size: clamp(2.4rem, 4.8vw, 3.9rem); }
h3 { font: 600 1.45rem/1.3 var(--display); margin: 0 0 10px; }
.lede { color: var(--ink-soft); max-width: 62ch; font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.65; }
p { margin: 0; }

.eyebrow, .sheetno {
  display: inline-block; font: 600 .8rem/1 var(--body);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
}
.eyebrow--accent { color: var(--accent); }

/* retired chrome kept neutral */
.dim-rule { display: flex; justify-content: center; margin: var(--sp-s) 0;
  color: var(--ink-faint); font: 600 .8rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.dim-rule::before, .dim-rule::after { content: none; }
.blueprint { background-image: none; }
.blueprint-fade { position: relative; }
.blueprint-fade::after { content: none; }
.blueprint-fade > * { position: relative; z-index: 1; }

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s;
}
/* Padding trimmed from 10px to 4px so the larger logo below fits without making the header
   taller. Header still measures 89px, exactly as before. */
.site-header .wrap { display: flex; align-items: center; gap: 22px; min-height: 86px; padding-top: 4px; padding-bottom: 4px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none;
  font: 600 1.05rem var(--display); white-space: nowrap; }
.brand i { width: 20px; height: 24px; flex: none; background: var(--navy); border-radius: 3px;
  clip-path: polygon(50% 0, 100% 38%, 100% 100%, 62% 100%, 62% 62%, 38% 62%, 38% 100%, 0 100%, 0 38%); }
/* 68px -> 80px. logo-primary.png was also re-cropped on 2026-08-04: it carried 18/40/16/45px
   of white padding, so the artwork filled only 66% of the file's height and looked small no
   matter what height was set here. Cropped to an even 8px margin, the mark now fills 91%.
   Crop plus this bump makes the visible logo about 60% larger with no change in header height.
   Original asset kept at /Volumes/Dev/bb-handoff/logo-primary-ORIGINAL-450x250.png */
.brand img { height: 80px; width: auto; display: block; }
.brand .logo-on-light { display: block; mix-blend-mode: multiply; }
.brand .logo-on-dark { display: none; }
.site-nav { display: flex; gap: 2px; margin-left: auto; }
.site-nav a { text-decoration: none; color: var(--ink-soft); font-size: 1rem; font-weight: 500;
  padding: 10px 14px; border-radius: 999px; transition: color .2s, background-color .2s; }
.site-nav a:hover { color: var(--ink); background: var(--bg2); }
.site-nav a[aria-current="page"] { color: var(--ink); background: var(--bg2); }
.nav-walk { color: var(--accent) !important; font-weight: 600; }
.site-header.scrolled { border-bottom-color: var(--line-soft); box-shadow: 0 12px 34px -28px rgba(20, 26, 40, .4); }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line-soft);
  border-radius: 10px; background: #fff; cursor: pointer; padding: 0; align-items: center; justify-content: center; }
.nav-toggle span { position: relative; display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: background .2s ease; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: var(--ink); border-radius: 2px; transition: transform .25s ease, top .25s ease; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.site-header.nav-open .nav-toggle span { background: transparent; }
.site-header.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.site-header.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 980px) {
  /* Same trade on phones: 50px -> 60px with padding trimmed, so the header stays 72px.
     Mobile viewport space is scarce, so the bar must not grow. */
  .site-header .wrap { min-height: 72px; padding-top: 6px; padding-bottom: 6px; }
  .brand img { height: 60px; }
  .nav-toggle { display: flex; }
  .nav-cta { margin-left: 0; }
  .site-nav { display: none; }
  .site-header.nav-open .site-nav { display: flex; flex-direction: column; gap: 2px; position: absolute;
    top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line-soft);
    box-shadow: 0 20px 40px -24px rgba(20, 26, 40, .35); padding: 10px clamp(16px, 4vw, 32px) 16px; z-index: 70; }
  .site-header.nav-open .site-nav a { padding: 12px 10px; font-size: 1.02rem; border-radius: 8px; }
}
@media (max-width: 560px) { .brand span { display: none; } }
@media (max-width: 560px) { .consult-form .btn { white-space: normal; line-height: 1.25; padding-inline: 22px; text-align: center; } }

/* ---- buttons: their bright blue pill ---- */
.btn, .nav-cta {
  --btn-ink: #FFFFFF;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  text-decoration: none; font: 600 1rem/1 var(--body);
  padding: 17px 32px; border-radius: 999px; white-space: nowrap; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .25s, background-color .25s, color .25s, border-color .25s;
}
.btn:active, .nav-cta:active { transform: translateY(1px) scale(.99); }

.btn-solid, .nav-cta { background: var(--accent); color: var(--btn-ink);
  box-shadow: 0 1px 2px rgba(20,26,40,.12), 0 10px 26px -10px rgba(22, 121, 202, .55); }
.btn-solid:hover, .nav-cta:hover { background: var(--accent-ink);
  box-shadow: 0 2px 4px rgba(20,26,40,.14), 0 16px 34px -10px rgba(22, 121, 202, .6); }

.btn-ghost { color: var(--ink); border-color: var(--line); background: #fff; }
.btn-ghost:hover { border-color: var(--ink); }

.btn-ondark { background: transparent; color: #F5F7FA; border-color: rgba(245,247,250,.55); }
.btn-ondark:hover { background: #F5F7FA; color: var(--navy); border-color: #F5F7FA; }

.cta-band { text-align: center; }
.cta-band .btn { margin: 6px; }

/* ---- records / stats ---- */
.record { border: 0; padding: 0; text-align: center; }
.record dt { font: 600 .8rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.record dd { margin: 10px 0 0; font: 300 clamp(2.2rem, 3.4vw, 3rem)/1 var(--display); }
.record dd small { display: block; margin-top: 10px; font: 400 .95rem/1.55 var(--body); color: var(--ink-soft); }
.records { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3.4vw, 52px); }
@media (max-width: 900px) { .records { grid-template-columns: repeat(2, 1fr); } }

.panel { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: clamp(26px, 3.2vw, 38px); box-shadow: var(--shadow); }
.stat b { display: block; font: 300 2.1rem/1 var(--display); }
.stat span { font: 600 .78rem/1.4 var(--body); color: var(--ink-faint); letter-spacing: .14em; text-transform: uppercase; display: block; margin-top: 9px; }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(24px, 3.4vw, 52px); padding-top: 30px; border-top: 1px solid var(--line-soft); }
@media (max-width: 900px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.6vw, 56px); align-items: center; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 880px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
@media (min-width: 881px) and (max-width: 1040px) { .grid3 { grid-template-columns: repeat(2, 1fr); } }

/* ---- cards: photo + navy label bar, their service-card grammar ---- */
.card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r);
  overflow: hidden; text-decoration: none; display: flex; flex-direction: column; padding: 0;
  box-shadow: var(--shadow); transition: box-shadow .35s cubic-bezier(.16,1,.3,1); }
.card:hover { box-shadow: var(--shadow-lift); }
.card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; border-radius: 0;
  transition: transform .9s cubic-bezier(.16,1,.3,1); }
.card:hover img { transform: scale(1.04); }
.card .card-body { padding: 20px 22px 22px; }
.card h3 { color: var(--ink); }
.card p { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.card .card-more { margin-top: 14px; font: 600 .95rem/1 var(--body); color: var(--accent); }
/* the label bar used on the homepage services grid, like the original */
.svc-label { display: block; background: var(--navy); color: #fff; text-align: center;
  font: 600 .88rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase;
  padding: 13px 10px; }

/* ---- quotes ---- */
.quote { background: var(--bg2); border: 0; border-radius: var(--r-lg);
  padding: clamp(26px, 3.4vw, 40px); box-shadow: none; position: relative; }
.quote p { font: 400 1.18rem/1.65 var(--body); margin: 0 0 16px; color: var(--ink); }
.quote cite { font-style: normal; font: 600 .95rem/1.4 var(--body); color: var(--ink-faint); }
.quote cite b { color: var(--ink); font-weight: 600; }
.bigquote { text-align: center; max-width: 62ch; margin: 0 auto; }
.bigquote::before { content: "\201C"; display: block; font: 700 6rem/0.6 Georgia, serif;
  color: var(--line); margin-bottom: 18px; }
.bigquote p { font: 300 clamp(1.5rem, 2.6vw, 2.1rem)/1.45 var(--display); font-style: italic; color: var(--ink); }
.bigquote cite { display: block; margin-top: 22px; font-style: normal;
  font: 600 1rem/1.5 var(--body); color: var(--ink-faint); }
.bigquote cite b { color: var(--ink); }

.checklist { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 15px; }
.checklist li { padding-left: 32px; position: relative; color: var(--ink-soft); }
.checklist li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 10px; height: 6px;
  border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); }
.checklist li b { color: var(--ink); }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(22px, 3vw, 40px); }
.step { border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 34px);
  background: var(--panel); box-shadow: var(--shadow); }
.step b { display: block; font: 600 1.35rem/1.25 var(--display); margin-bottom: 10px; color: var(--navy); }
.step p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 14px; padding: 0;
  font: 600 .78rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.crumbs a { text-decoration: none; color: var(--ink-faint); }
.crumbs a:hover { color: var(--accent); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .45; }

.faq-item { border-bottom: 1px solid var(--line-soft); padding: 4px 0; }
.faq-item summary { cursor: pointer; font: 600 1.25rem var(--display);
  padding: 24px 0; list-style: none; position: relative; padding-right: 44px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: 6px; top: 32px; width: 12px; height: 12px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform .28s cubic-bezier(.16,1,.3,1); }
.faq-item[open] summary::after { transform: rotate(225deg); top: 36px; }
.faq-item p { margin: 0 0 24px; color: var(--ink-soft); max-width: 70ch; }

.hero-photo { position: relative; }
.hero-photo img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow); display: block; }
.hero-photo figcaption { margin-top: 12px; font: 400 .95rem/1.5 var(--body); color: var(--ink-faint); }

/* Flagship photography. For this audience the finished house IS the pitch, so
   the lead shots break out of the 1200px text column and run near-full-width
   instead of floating small and centered inside it. */
.photo-wide { margin: clamp(38px, 5.5vw, 68px) 0 0; }
.photo-wide img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--shadow); display: block;
}
.photo-wide figcaption { margin-top: 14px; font: 400 .95rem/1.5 var(--body); color: var(--ink-faint); }
/* Wider gutter-to-gutter container. Deliberately NOT a transform-based bleed:
   .rv (scroll reveal) owns `transform` and resets it to none, which would
   cancel any translateX centering the moment the element revealed. */
.wrap-wide { max-width: 1560px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); }
@media (min-width: 1100px) {
  .photo-wide--bleed img { aspect-ratio: 21 / 9; }
}

/* Left-aligned lead block. The page opened with three stacked centered text
   blocks in a row, which reads generic; anchoring this one left gives the
   composition a spine without touching the copy. */
.lead-block { max-width: 78ch; }
.lead-block h1 { max-width: 21ch; }
.lead-block .lede { margin-top: 24px; }
.lead-emph {
  margin-top: 18px; font: 400 clamp(1.08rem, 1.35vw, 1.22rem)/1.6 var(--body);
  font-style: italic; color: var(--ink-soft);
}

/* Photo tour rhythm: a full-width lead, then 2-up pairs, alternating. The
   photography is the product for this audience, so it runs large rather than
   as a uniform contact sheet.
   The :not(.featured-projects) guard matters: projects.html carries BOTH
   classes on one element, and these nth-child rules outrank
   `.featured-projects a:first-child`, which forced the lead full-width inside
   a 3-column grid and left an empty third cell. Keep the two systems apart. */
.gallery { display: grid; gap: clamp(18px, 2.5vw, 28px); }
.gallery:not(.featured-projects) { grid-template-columns: repeat(2, 1fr); }
.gallery a { position: relative; display: block; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.gallery:not(.featured-projects) a:nth-child(3n + 1):not(:nth-last-child(2)) { grid-column: 1 / -1; }
.gallery img { aspect-ratio: 4/3; object-fit: cover; width: 100%; height: 100%; transition: transform .9s cubic-bezier(.16,1,.3,1); }
.gallery:not(.featured-projects) a:nth-child(3n + 1):not(:nth-last-child(2)) img { aspect-ratio: 16/10; }
.gallery a:hover img { transform: scale(1.045); }
.gallery span { position: absolute; inset: auto 0 0 0; padding: 34px 16px 14px;
  font: 600 .9rem/1.35 var(--body); color: #fff;
  background: linear-gradient(transparent, rgba(20, 22, 62, .85)); opacity: 0; transition: opacity .3s; }
.gallery a:hover span, .gallery a:focus-visible span { opacity: 1; }
@media (max-width: 640px) {
  .gallery:not(.featured-projects) { grid-template-columns: 1fr; gap: 16px; }
  .gallery:not(.featured-projects) a:nth-child(3n + 1):not(:nth-last-child(2)) { grid-column: auto; }
  .gallery:not(.featured-projects) img,
  .gallery:not(.featured-projects) a:nth-child(3n + 1):not(:nth-last-child(2)) img { aspect-ratio: 3/2; }
}
@media (max-width: 520px) { .gallery span { opacity: 1; } }


.featured-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.featured-projects a { display: flex; flex-direction: column; }
.featured-projects a:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.featured-projects img { width: 100%; height: 100%; aspect-ratio: 3/2; object-fit: cover; }
.featured-projects a:first-child img { aspect-ratio: auto; }
@media (max-width: 880px) {
  .featured-projects { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .featured-projects a:first-child { grid-column: 1 / -1; grid-row: auto; }
  .featured-projects a:first-child img { aspect-ratio: 16/9; }
}
@media (max-width: 560px) {
  .featured-projects { grid-template-columns: 1fr; gap: 16px; }
  .featured-projects a:first-child { grid-column: auto; grid-row: auto; }
  .featured-projects img, .featured-projects a:first-child img { aspect-ratio: 3/2; }
}

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(12, 14, 36, .95); display: none;
  align-items: center; justify-content: center; padding: clamp(12px, 4vw, 48px); }
.lb.open { display: flex; }
.lb figure { margin: 0; width: min(1100px, 92vw); }
/* one consistent stage: every photo shows at the same size and ratio */
.lb img { width: 100%; aspect-ratio: 3/2; max-height: 82vh; object-fit: cover;
  border-radius: var(--r); margin: 0 auto; }
.lb figcaption { text-align: center; color: #C3CBDD; font: 500 .92rem/1.5 var(--body); padding-top: 16px; }
.lb button { position: absolute; background: rgba(34, 40, 90, .88); color: #EBEFF7; border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; width: 46px; height: 46px; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.lb button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.lb-x { top: 18px; right: 18px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .lb-prev, .lb-next { display: none; } }

/* ---- before / after ---- */
.ba-slider { position: relative; border-radius: var(--r-lg); overflow: hidden; touch-action: none; user-select: none; box-shadow: var(--shadow-lift); }
.ba-slider img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.ba-over { position: absolute; inset: 0; }
.ba-over img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; cursor: ew-resize;
  box-shadow: 0 0 0 1px rgba(20, 26, 40, .3); }
.ba-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%; background: #fff;
  box-shadow: 0 8px 26px rgba(12, 16, 36, .35); display: grid; place-items: center; }
.ba-handle span::before { content: "\2194"; color: var(--navy); font-size: 1.2rem; line-height: 1; }
.ba-tag { position: absolute; top: 16px; font: 600 .8rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase;
  background: rgba(20, 22, 62, .82); color: #F5F7FA; padding: 9px 14px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ba-tag-l { left: 16px; } .ba-tag-r { right: 16px; }

/* ---- footer: navy ---- */
.site-footer {
  --ink: #EBEFF7; --ink-soft: #B7BFD4; --ink-faint: #8C95B0; --line: rgba(235,239,247,.14); --panel: #1D2050;
  background: var(--dark-band); color: var(--ink); padding: clamp(56px, 7vw, 88px) 0 0;
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 56px); padding-bottom: 48px; }
.site-footer h3 { font: 600 .8rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.site-footer li a { text-decoration: none; color: var(--ink-soft); font-size: 1rem; transition: color .2s; }
.site-footer li a:hover { color: #9CC3EA; }
.footer-bottom { border-top: 1px solid var(--line); padding: 24px 0; display: flex; flex-wrap: wrap; gap: 10px 30px;
  justify-content: space-between; color: var(--ink-faint); font: 500 .88rem/1.5 var(--body); }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---- page hero with a photographic ground (inner pages) ---- */
.hero-bg { position: relative; overflow: hidden; isolation: isolate; }
.hero-bg > .hero-bg-media { position: absolute; inset: 0; z-index: -2; }
.hero-bg > .hero-bg-media img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.hero-bg::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--bg) 40%, color-mix(in srgb, var(--bg) 76%, transparent) 70%, color-mix(in srgb, var(--bg) 50%, transparent) 100%),
              linear-gradient(0deg, var(--bg) 3%, transparent 46%); }

/* ---- the timeline stage (3D renderings promo) ---- */
.tl-stage { position: relative; width: 100%; overflow: hidden; border-radius: var(--r-lg);
  background: var(--surface-dark); cursor: ew-resize; touch-action: pan-y; isolation: isolate;
  box-shadow: var(--shadow-lift); aspect-ratio: 1584 / 672; }
.tl-stage .tl-layer { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
.tl-stage .tl-layer img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tl-seam { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; z-index: 6;
  box-shadow: 0 0 0 1px rgba(20, 26, 60, .3), 0 0 26px 3px rgba(255,255,255,.45);
  pointer-events: none; will-change: transform; }
.tl-seam::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px;
  margin: -17px 0 0 -17px; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(20, 26, 60, .35); }
.tl-seam i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  width: 10px; height: 10px; border-left: 2.5px solid var(--navy); border-bottom: 2.5px solid var(--navy); rotate: 45deg; }
.tl-seam.s2 i { rotate: 225deg; }
.tl-caps { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; pointer-events: none;
  padding: clamp(14px, 2vw, 24px); display: flex; gap: 8px; flex-wrap: wrap;
  background: linear-gradient(to top, rgba(14, 16, 44, .78), rgba(14, 16, 44, 0)); }
.tl-cap { font: 600 .8rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(14, 16, 44, .5); border: 1px solid rgba(255,255,255,.3);
  padding: 9px 14px; border-radius: 999px; opacity: .4; transition: opacity .25s, border-color .25s, background-color .25s; }
.tl-cap.on { opacity: 1; border-color: transparent; background: var(--accent); }
.tl-scrub { margin-top: 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tl-track { position: relative; flex: 1; min-width: 200px; height: 36px; display: flex; align-items: center; cursor: ew-resize; }
.tl-track::before { content: ""; position: absolute; left: 0; right: 0; height: 4px; border-radius: 999px; background: var(--bg2); }
.tl-track .fill { position: absolute; left: 0; height: 4px; border-radius: 999px; background: var(--accent); width: 0; }
.tl-track .knob { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  border: 3px solid var(--bg); box-shadow: 0 2px 8px rgba(20, 26, 60, .35); margin-left: -9px; left: 0; }
.tl-hint { font: 500 .92rem/1.4 var(--body); color: var(--ink-faint); white-space: nowrap; }

/* ---- reveal: progressive enhancement only ---- */
.rv { opacity: 1; transform: none; }
.js .rv { opacity: 0; transform: translateY(16px); }
.js .rv.is-in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.rv-stagger { }
.js .rv-stagger > * { opacity: 0; transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.js .rv-stagger.is-in > * { opacity: 1; transform: none; }
.js .rv-stagger.is-in > *:nth-child(2) { transition-delay: .09s; }
.js .rv-stagger.is-in > *:nth-child(3) { transition-delay: .18s; }
.js .rv-stagger.is-in > *:nth-child(4) { transition-delay: .27s; }
.js .rv-stagger.is-in > *:nth-child(5) { transition-delay: .36s; }
.js .rv-stagger.is-in > *:nth-child(6) { transition-delay: .45s; }
.js .rv-stagger.is-in > *:nth-child(n+7) { transition-delay: .54s; }
.js .records.rv, .js .records.rv.is-in { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; }
  .js .rv-stagger > * { opacity: 1; transform: none; transition: none; }
  .card img, .gallery img { transition: none; }
}

/* legacy classes still referenced by inner pages, neutralised */
.glow-field { position: relative; }
.glow-field > * { position: relative; z-index: 1; }
.full-bleed { padding: 0; position: relative; }
.full-bleed img { width: 100%; height: clamp(340px, 56vh, 620px); object-fit: cover; }
.full-bleed figcaption { padding: 14px clamp(20px, 5vw, 60px) 0; max-width: 1200px; margin: 0 auto;
  font: 400 .95rem/1.5 var(--body); color: var(--ink-faint); }
.pull-quote { max-width: 38ch; }
.pull-quote p { font: 300 clamp(1.7rem, 2.9vw, 2.4rem)/1.3 var(--display); margin: 0 0 20px; }
.pull-quote cite { font-style: normal; font: 600 .95rem/1.4 var(--body); color: var(--ink-faint); }
.pull-quote cite b { color: var(--ink); }
.grid-editorial { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-editorial .card:first-child { grid-column: span 2; grid-row: span 2; }
.grid-editorial .card:first-child img { aspect-ratio: 16/11; height: 100%; }
.grid-editorial .card:first-child h3 { font-size: 1.7rem; }
@media (max-width: 880px) { .grid-editorial { grid-template-columns: 1fr; } .grid-editorial .card:first-child { grid-column: auto; grid-row: auto; } }
.marquee { overflow: hidden; padding: 18px 0; }
.marquee-track { display: flex; gap: 64px; width: max-content; animation: mq 56s linear infinite; }
.marquee-track span { font: 600 .85rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---- anchor landing ---- */
:target, h2[id], h3[id], section[id], [id^="sec-"] { scroll-margin-top: 106px; }

/* ---- print ---- */
@media print {
  :root { --bg: #fff; --ink: #000; --ink-soft: #222; --ink-faint: #444; }
  * { background: transparent !important; color: #000 !important; box-shadow: none !important; }
  .site-header, .site-footer nav, .marquee, video, .ba-slider, .hero-media,
  .cta-row .btn-ghost, .sticky-preview, .tl-scrub { display: none !important; }
  .rv, .js .rv { opacity: 1 !important; transform: none !important; }
  details { display: block !important; }
  details > summary { display: none; }
  details > *:not(summary) { display: revert !important; }
  a[href^="http"]::after, a[href^="tel:"]::after { content: " (" attr(href) ")"; font: 400 .72em var(--mono); }
  a[href^="#"]::after { content: ""; }
  section { padding: 12pt 0 !important; break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  img { max-width: 100% !important; break-inside: avoid; }
  .records { break-inside: avoid; }
}

/* ---- review stars + service-area map (2026-07-29) ---- */
.stars5 { color: #F5A623; letter-spacing: .14em; font-size: .95rem; margin: 12px 0 6px; }
.map-embed { border: 0; width: 100%; height: clamp(300px, 40vw, 420px); border-radius: var(--r-lg);
  box-shadow: var(--shadow); display: block; margin-top: clamp(22px, 3vw, 34px); }

/* ---- header social icons + GHL chat offset + coverage map (2026-07-29b) ---- */
.topbar { background: var(--dark-band); }
.topbar .wrap { display: flex; justify-content: flex-end; align-items: center; gap: 4px; min-height: 40px; }
.hdr-soc { display: flex; gap: 4px; align-items: center; }
.hdr-soc a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  color: rgba(245, 247, 250, .75); transition: color .2s, background .2s; }
.hdr-soc a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.hdr-soc svg { width: 16px; height: 16px; fill: currentColor; }
.brand { flex-shrink: 0; }

.covmap { width: 100%; height: clamp(320px, 42vw, 440px); border-radius: var(--r-lg);
  box-shadow: var(--shadow); margin-top: clamp(22px, 3vw, 34px); z-index: 1; position: relative; }

/* mobile: give the GHL chat bubble (fixed 20px/20px, 58px wide) its own lane beside the call bar */
@media (max-width: 760px) {
  a.call-bar { right: 94px; border-top-right-radius: 14px; }
}

/* ---- call bar must not sit on top of the hero CTA (2026-08-04) ----
   The bar is position:fixed at the bottom, so on shorter phones it lands directly over the
   hero's "Book a complimentary consultation" button. Measured on production at 375x812:
   on /services/bathroom-remodeling (the #1 ad landing page) and /services/home-remodeling,
   document.elementFromPoint() at the button's own centre returned .call-bar — so tapping the
   primary CTA dialled the phone instead of opening the form. At 375x667 (iPhone SE) nearly
   every service page was affected, because the bar rises with the viewport while the content
   above the button does not. Ad traffic is ~80% mobile, which makes these the pages that
   matter most.
   The bar now stays tucked away until the visitor scrolls past the hero, then slides in — so
   the CTA is tappable at the top and the phone number is still one thumb away everywhere else.
   Selector is a.call-bar, not .call-bar: each page defines .call-bar in its own inline <style>
   AFTER this file loads, so equal specificity would lose. */
@media (max-width: 760px) {
  a.call-bar {
    transform: translateY(115%);
    transition: transform .22s ease;
  }
  body.bb-past-hero a.call-bar { transform: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  a.call-bar { transition: none; }
}

.svc-label svg { width: 16px; height: 16px; fill: currentColor; margin-right: 9px; vertical-align: -2.5px; }

/* ---- QA-round-2 global fixes (2026-07-29) ---- */
.hero-photo figcaption { left: 0; right: 0; text-align: center; }
section p a:not([class]), section li a:not([class]) { color: var(--accent); }
.steps { counter-reset: bbstep; }
.step { position: relative; padding-left: 54px; counter-increment: bbstep; }
.step::before { content: counter(bbstep); position: absolute; left: 0; top: 0; width: 38px; height: 38px;
  border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center;
  font: 600 1.05rem/1 var(--display); }
.rev-av { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: #fff; font: 600 1rem/1 var(--display); letter-spacing: .02em; margin-bottom: 12px; }
@media (max-width: 760px) {
  p > .btn { margin: 0 10px 12px 0; }
  p > .btn + .btn { margin-left: 0 !important; }
  .nav-cta { display: none; }
  .nav-toggle { margin-left: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid > div:first-child p { max-width: none; font-size: .84rem; }
}
.nav-phone { display: none; }
.site-header.nav-open .nav-phone { display: block; font-weight: 700; color: var(--accent) !important; }