/* ==========================================================================
   Enteco — shared stylesheet
   Redesign Phase 2 (2026-08-07): solid-middle token set replaces the
   cream+copper+Fraunces luxury signature. Direction B typography
   (Barlow Semi Condensed headings + IBM Plex Sans body), self-hosted.
   Old tokens kept where the value didn't change, to limit call-site churn —
   see REDESIGN_REFERENCE_BRIEF.md / phase1-audit-and-proposal.html for the
   contrast math behind every value below.
   ========================================================================== */

@font-face { font-family: 'Barlow Semi Condensed'; src: url('assets/fonts/barlow-semi-condensed-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url('assets/fonts/barlow-semi-condensed-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url('assets/fonts/barlow-semi-condensed-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('assets/fonts/ibm-plex-sans-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* Color tokens — solid-middle formula: white/near-white ground + near-black
     ink + one greyscale ramp + exactly one saturated warm accent. */
  --text-primary: #2b241d;
  --text-secondary: #5d554b;
  --text-muted: #6b6259;         /* was #8c8378, 3.37:1 — failed AA */
  --text-inverse: #f7f3ec;
  --text-inverse-muted: #c9bfb2;

  --brand-copper: #b0713b;       /* fills, borders, icons, large display type ONLY — 3.98:1, not for text */
  --brand-copper-text: #7a4a22;  /* links, overlines, any body-weight text — 7.42:1 */
  --brand-bronze: #8a5a2b;
  --brand-copper-tint: #efe2d2;

  --accent-gold: #c89b3c;        /* decorative/icon use only (star ratings) — fails AA as text */
  --accent-on-dark: #e0a86a;     /* accent text/links on dark ground — 8.2:1 on --bg-dark */
  --accent-flame: #e0662f;       /* decorative fills only, same rule as brand-copper */

  --bg-cream: #f7f3ec;           /* legacy value, no longer the page ground — kept for any surface deliberately warm */
  --bg-dark: #1f1a15;            /* was #26201a — deepened slightly, 17.26:1 vs white text */
  --bg-dark-deep: #141110;
  --bg-surface: #ffffff;
  --bg-ground: #ffffff;          /* new: primary page ground, was cream */
  --bg-ground-alt: #f6f5f3;      /* new: alternating section background, warm but not cream */

  --border-subtle: #e6e2db;
  --border-strong: #c9bfb2;

  --img-placeholder: #ddd5c8;

  /* Type tokens */
  --font-display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure { margin: 0; }
body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-ground);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

/* ---- Type scale (Figma text styles) ---- */
.display-xl { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 2.25vw + 31px, 64px); line-height: 1.12; letter-spacing: -0.01em; }
.display-m  { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 0.75vw + 25px, 36px); line-height: 1.2; }
.heading-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 0.56vw + 20px, 28px); line-height: 1.24; }
.heading-h3 { font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: 28px; }
.body-l     { font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 28px; }
.body-m     { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px; }
.body-s     { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 20px; }
.label      { font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 20px; }
.label-s    { font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 2px; }
.overline   { font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 8px; text-transform: uppercase; color: var(--brand-copper-text); }

/* ---- Layout ---- */
.container { max-width: 1440px; margin: 0 auto; padding: 0 120px; }
.section { padding: 96px 0; }
.section + .section { padding-top: 0; }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  background: var(--bg-ground-alt);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  padding: 0 120px;
  position: sticky;
  top: 0;
  z-index: 200;
}
.header__logo { flex-shrink: 0; }
.header__logo img { height: 48px; width: auto; }
.header__nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; flex-shrink: 1; min-width: 0; }
.header__actions { flex-shrink: 0; }
.header__nav a { color: var(--text-primary); white-space: nowrap; }
.header__nav a.is-active,
.header__nav a:hover { color: var(--brand-copper-text); }
.header__actions { display: flex; align-items: center; gap: 20px; }
.header__phone { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--text-primary); white-space: nowrap; }
.header__phone-icon { display: none; }
.header__cta {
  background: var(--brand-copper);
  color: var(--text-inverse);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 6px;
  box-shadow: 0 8px 20px -6px rgba(176,112,59,0.35);
  white-space: nowrap;
}
.header__burger { display: none; flex-direction: column; gap: 4px; background: none; border: none; padding: 0; }
.header__burger span { width: 20px; height: 2px; background: var(--text-primary); display: block; transition: transform 0.2s ease, opacity 0.2s ease; }
.header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Services dropdown (desktop) ---- */
.header__nav-item--dropdown { position: relative; }
.header__nav-trigger { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; font: inherit; color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.header__nav-trigger:hover,
.header__nav-trigger[aria-expanded="true"] { color: var(--brand-copper-text); }
.header__nav-trigger .caret { font-size: 10px; transition: transform 0.15s ease; }
.header__nav-trigger[aria-expanded="true"] .caret { transform: rotate(180deg); }
.header__dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 10px;
  box-shadow: 0 12px 32px -8px rgba(41,31,20,0.14);
  padding: 10px; min-width: 240px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.header__nav-item--dropdown.is-open .header__dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.header__dropdown a { display: block; padding: 10px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--text-primary); white-space: nowrap; }
.header__dropdown a:hover { background: var(--bg-ground-alt); color: var(--brand-copper-text); }
.header__cta-mobile-row { display: none; }

/* Between the real mobile frame (767px) and the width the desktop nav was
   actually designed for, the full inline nav + phone number + CTA don't fit
   next to the logo (logo was getting flex-shrunk to 0 width, and the nav
   items were overlapping the CTA button). Rather than trying to cram a
   shrunk version of the desktop nav in here, fall back to the same drawer
   nav the true-mobile breakpoint uses. */
@media (min-width: 768px) and (max-width: 1279px) {
  .header { padding: 0 32px; }
  .header__actions { gap: 10px; }
  .header__phone { display: none; }
  .header__phone-icon {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1.5px solid var(--border-strong); color: var(--text-primary); flex-shrink: 0;
  }
  .header__phone-icon svg { width: 16px; height: 16px; }
  .header__cta { padding: 9px 14px; font-size: 12px; line-height: 16px; letter-spacing: 0.24px; }
  .header__burger { display: flex; }

  .header__nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: 84px; left: 0; right: 0; bottom: 0;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    padding: 8px 20px 24px;
    overflow-y: auto;
    z-index: 199;
    font-size: 17px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }
  .header__nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .header__nav a,
  .header__nav-trigger { padding: 16px 4px; border-bottom: 1px solid var(--border-subtle); width: 100%; text-align: left; justify-content: space-between; }
  .header__nav-item--dropdown { position: static; }
  .header__dropdown {
    position: static; transform: none; box-shadow: none; border: none; border-radius: 0;
    padding: 0 0 0 16px; min-width: 0; background: var(--bg-ground-alt);
    max-height: 0; overflow: hidden; opacity: 1; visibility: visible;
    transition: max-height 0.2s ease;
  }
  .header__nav-item--dropdown.is-open .header__dropdown { max-height: 400px; transform: none; left: auto; }
  .header__dropdown a { border-bottom: 1px solid var(--border-subtle); border-radius: 0; padding: 14px 8px; }
  .header__nav .header__cta-mobile-row { display: flex; padding: 20px 4px 0; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--bg-dark);
  padding: 72px 120px 40px;
}
.footer__columns { display: flex; gap: 80px; align-items: flex-start; }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer__brand img { height: 60px; width: auto; }
.footer__brand address { font-style: normal; font-size: 14px; line-height: 20px; color: var(--text-inverse-muted); }
.footer__brand .phone,
.footer__brand .email { font-size: 14px; line-height: 20px; color: var(--text-inverse); }
.footer__brand .hours { font-size: 14px; line-height: 20px; color: var(--text-inverse-muted); }
.footer__col { display: flex; flex-direction: column; gap: 12px; white-space: nowrap; }
.footer__col h4 { font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.96px; text-transform: uppercase; color: var(--brand-copper-text); }
.footer__col span,
.footer__col a { font-weight: 400; font-size: 14px; line-height: 20px; color: var(--text-inverse-muted); }
.footer__col a:hover { color: var(--text-inverse); }
.footer__bottom {
  border-top: 1px solid var(--bg-dark-deep);
  margin-top: 48px;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.24px;
}
.footer__rating { color: var(--accent-on-dark); }
.footer__social { color: var(--text-inverse-muted); white-space: pre; }
.footer__copyright { color: var(--text-inverse-muted); }
.footer__copyright a { color: var(--text-inverse-muted); text-decoration: underline; }
.footer__copyright a:hover { color: var(--text-inverse); }

/* Condensed mobile-only footer content (real mobile frame 9:45 drops column
   headers entirely and merges everything into two flowing text lines) */
.footer__mobile-lines,
.footer__mobile-bottom { display: none; }
.footer__mobile-services { font-size: 14px; line-height: 20px; color: var(--text-inverse); }
.footer__mobile-company { font-size: 14px; line-height: 20px; color: var(--text-inverse-muted); }
.footer__mobile-bottom .footer__rating,
.footer__mobile-bottom .footer__copyright { font-weight: 600; font-size: 12px; letter-spacing: 0.24px; }

/* Between the real mobile frame (767px) and the width the 4-column desktop
   footer was designed for, the nowrap column labels ("Kitchen & Bathroom
   Renovation") force the row wider than the viewport. Let them wrap and
   tighten the outer spacing instead of switching to the mobile layout. */
@media (min-width: 768px) and (max-width: 1279px) {
  .footer { padding: 56px 32px 40px; }
  .footer__columns { gap: 32px; }
  .footer__col { white-space: normal; min-width: 0; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 28px; border-radius: 6px; font-weight: 600; font-size: 14px; line-height: 20px; border: none; white-space: nowrap; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.btn-primary { background: var(--brand-copper); color: var(--text-inverse); box-shadow: 0 8px 20px -6px rgba(176,112,59,0.35); }
.btn-primary:hover { background: var(--brand-bronze); box-shadow: 0 10px 26px -6px rgba(176,112,59,0.45); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--text-primary); border: 1.5px solid var(--border-strong); }
.btn-outline:hover { background: var(--bg-ground-alt); border-color: var(--text-primary); }
.btn-on-dark { background: var(--bg-ground-alt); color: var(--text-primary); }
.btn-on-dark:hover { background: var(--text-inverse); transform: translateY(-1px); }
.btn-text { color: var(--brand-copper-text); font-weight: 600; font-size: 14px; cursor: pointer; transition: opacity 0.15s ease; }
.btn-text:hover { opacity: 0.72; }

/* ==========================================================================
   Interaction states — hover / keyboard focus / transitions.
   Audit pass: the stylesheet previously had 4 total :hover rules and zero
   transitions across 2800 lines. Scoped to genuinely interactive elements
   only (real <a>/<button>) — static, non-clickable cards (.card-service,
   .projects-grid__cell) intentionally excluded so hover never implies
   an action that doesn't exist.
   ========================================================================== */
a { transition: color 0.15s ease; }
.header__cta { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.header__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -6px rgba(176,112,59,0.45); }
.header__burger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; cursor: pointer; }

a.projects-case,
a.blog-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
a.projects-case:hover,
a.blog-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -14px rgba(41,31,20,0.16), 0 4px 10px rgba(41,31,20,0.07); }

.projects-filter__chip,
.blog-chip { cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.projects-filter__chip:hover:not(.is-active),
.blog-chip:hover:not(.is-active) { border-color: var(--text-primary); }

.form-field input,
.form-field textarea,
.form-field select { transition: border-color 0.15s ease; }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { border-color: var(--brand-copper-text); outline: none; }

/* on-brand keyboard focus ring, since none existed before (relied on browser default only) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--brand-copper); outline-offset: 2px; border-radius: 4px; }

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

/* Skip-to-content link: hidden off-screen until keyboard-focused */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100;
  background: var(--brand-copper);
  color: var(--text-inverse);
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* ==========================================================================
   Section heading + trust bar
   ========================================================================== */
.section-heading { display: flex; flex-direction: column; gap: 12px; }
.section-heading__rule { width: 36px; height: 3px; border-radius: 2px; background: var(--accent-flame); }
.section-heading h2 { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 36px; color: var(--text-primary); }
/* .section-heading h2 (0,1,1) outranks a single utility class like
   .text-inverse (0,1,0), so that class alone can never lighten this
   heading — needs a selector at least as specific, scoped to the dark
   section it's actually used in. */
.fb-form-section .section-heading h2 { color: var(--text-inverse); }

.trust-bar { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14px; flex-wrap: wrap; }
.trust-bar .rating { color: var(--brand-copper-text); }
.trust-bar .sep { color: var(--text-muted); }
.trust-bar span:not(.rating):not(.sep) { color: var(--text-secondary); }
/* Dark-hero context (about.html video hero) — light text/accent instead of the light-bg defaults above */
.about-hero__inner .trust-bar .rating { color: var(--accent-on-dark); }
.about-hero__inner .trust-bar .sep,
.about-hero__inner .trust-bar span:not(.rating):not(.sep) { color: var(--text-inverse-muted); }

/* ==========================================================================
   Cards
   ========================================================================== */
.img-ph {
  background: var(--img-placeholder);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--text-muted); font-weight: 600; font-size: 12px; text-align: center;
  border-radius: 8px; overflow: hidden;
}
.img-ph .ph-label { letter-spacing: 0.96px; text-transform: uppercase; }
.img-ph .ph-asset { letter-spacing: 0.24px; }
.img-ph img { width: 100%; height: 100%; object-fit: cover; }

.card-service {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(41,31,20,0.06);
  display: flex; flex-direction: column;
}
.card-service .img-ph { height: 240px; border-radius: 0; }
.card-service__body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 10px; }
.card-service__body h3 { font-weight: 600; font-size: 20px; line-height: 28px; color: var(--text-primary); }
.card-service__body p.card-service__num { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 32px; color: var(--brand-copper-text); }
.card-service__body p { font-weight: 400; font-size: 16px; line-height: 24px; color: var(--text-secondary); }
.card-service__body .btn-text { display: inline-block; }

.before-after { display: flex; flex-direction: column; gap: 16px; }
.before-after__pair { display: flex; gap: 8px; }
.before-after__shot { position: relative; width: 384px; height: 300px; border-radius: 8px; overflow: hidden; }
.before-after__shot .img-ph { width: 100%; height: 100%; border-radius: 0; }
.before-after__chip { position: absolute; top: 16px; left: 16px; padding: 6px 12px; border-radius: 4px; font-weight: 600; font-size: 12px; letter-spacing: 0.24px; color: var(--text-inverse); }
.before-after__chip--before { background: var(--bg-dark); }
.before-after__chip--after { background: var(--brand-copper); }
.before-after__caption { font-size: 14px; line-height: 20px; color: var(--text-secondary); }

.card-testimonial {
  background: var(--bg-ground-alt);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--brand-copper);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(41,31,20,0.06);
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 10px;
}
.card-testimonial__eyebrow { font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-copper-text); }
.card-testimonial__stars { color: var(--brand-copper-text); font-weight: 600; font-size: 14px; margin-top: 2px; }
.card-testimonial__quotemark { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 56px; line-height: 40px; color: var(--brand-copper); opacity: 0.55; }
.card-testimonial__quote { font-family: var(--font-display); font-style: italic; font-size: 17px; line-height: 26px; color: var(--text-primary); }
.card-testimonial__meta { display: flex; flex-direction: column; gap: 2px; font-weight: 600; font-size: 12px; letter-spacing: 0.24px; }
.card-testimonial__meta .source { color: var(--text-muted); }
.card-testimonial__meta .tag { color: var(--brand-copper-text); }

.stat-module { display: flex; flex-direction: column; gap: 6px; }
.stat-module__num { font-family: var(--font-display); font-weight: 600; font-size: 56px; line-height: 60px; color: var(--brand-copper-text); }
.stat-module__label { font-size: 14px; line-height: 20px; color: var(--text-secondary); width: 200px; }

/* Default: divider under the question (used by compact FAQPage-schema-only
   lists with no answer text, e.g. blog-basement-development-calgary.html).
   When a .faq-row is directly followed by an answer paragraph, the divider
   moves to sit under the answer instead (see .faq-row + .*__a below), so
   each Q+A reads as one grouped unit instead of a continuous wall of text. */
.faq-row { border-bottom: 1px solid var(--border-subtle); display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 20px 4px; }
.faq-row:has(+ .industry-faq__a),
.faq-row:has(+ .blog-article__faq-a) {
  border-bottom: none;
  padding: 26px 4px 8px;
}
.faq-row__q { font-weight: 600; font-size: 20px; line-height: 28px; color: var(--text-primary); max-width: 700px; }
.faq-row__toggle { color: var(--brand-copper-text); font-weight: 600; font-size: 20px; flex-shrink: 0; }

.cta-band { border-radius: 14px; padding: 56px 64px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band--homeowner { background: var(--brand-copper-tint); }
.cta-band--builder { background: var(--bg-dark); }
.cta-band--kitchen-bath {
  background:
    linear-gradient(90deg, rgba(31,26,21,0.90) 0%, rgba(31,26,21,0.62) 50%, rgba(31,26,21,0.22) 100%),
    url('assets/tuscany-kitchen-remodeling-after-01.jpg') center/cover no-repeat;
}
.cta-band--kitchen-bath .cta-band__copy h3 { color: var(--text-inverse); }
.cta-band--kitchen-bath .cta-band__copy p { color: var(--text-inverse-muted); }
.cta-band--painting {
  background:
    linear-gradient(90deg, rgba(31,26,21,0.90) 0%, rgba(31,26,21,0.62) 50%, rgba(31,26,21,0.22) 100%),
    url('assets/interior-painting-living-room-calgary.jpg') center/cover no-repeat;
}
.cta-band--painting .cta-band__copy h3 { color: var(--text-inverse); }
.cta-band--painting .cta-band__copy p { color: var(--text-inverse-muted); }
.cta-band--garage {
  background:
    linear-gradient(90deg, rgba(31,26,21,0.90) 0%, rgba(31,26,21,0.62) 50%, rgba(31,26,21,0.22) 100%),
    url('assets/exterior-house-garage-doors-calgary.jpg') center/cover no-repeat;
}
.cta-band--garage .cta-band__copy h3 { color: var(--text-inverse); }
.cta-band--garage .cta-band__copy p { color: var(--text-inverse-muted); }
.cta-band--basement {
  background:
    linear-gradient(90deg, rgba(31,26,21,0.90) 0%, rgba(31,26,21,0.62) 50%, rgba(31,26,21,0.22) 100%),
    url('assets/legacy-manor-basement-development-after-01.jpg') center/cover no-repeat;
}
.cta-band--basement .cta-band__copy h3 { color: var(--text-inverse); }
.cta-band--basement .cta-band__copy p { color: var(--text-inverse-muted); }
.cta-band--legal-suite {
  background:
    linear-gradient(90deg, rgba(31,26,21,0.90) 0%, rgba(31,26,21,0.62) 50%, rgba(31,26,21,0.22) 100%),
    url('assets/legacy-manor-after.jpg') center/cover no-repeat;
}
.cta-band--legal-suite .cta-band__copy h3 { color: var(--text-inverse); }
.cta-band--legal-suite .cta-band__copy p { color: var(--text-inverse-muted); }
.cta-band--epoxy {
  background:
    linear-gradient(90deg, rgba(31,26,21,0.90) 0%, rgba(31,26,21,0.62) 50%, rgba(31,26,21,0.22) 100%),
    url('assets/garage-floor-coating-calgary-02.jpg') center/cover no-repeat;
}
.cta-band--epoxy .cta-band__copy h3 { color: var(--text-inverse); }
.cta-band--epoxy .cta-band__copy p { color: var(--text-inverse-muted); }
.cta-band__copy { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.cta-band__copy h3 { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 44px; color: var(--text-primary); }
.cta-band--builder .cta-band__copy h3 { color: var(--text-inverse); }
.cta-band__copy p { font-size: 16px; line-height: 24px; color: var(--text-secondary); }
.cta-band--builder .cta-band__copy p { color: var(--text-inverse-muted); }
.cta-band__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* The h3/p copy gets an inverse color per dark variant above, but the
   secondary .btn-text link was missed — it kept the copper-on-light color
   from the base rule, unreadable against these dark/photo backgrounds. */
.cta-band--builder .btn-text,
.cta-band--kitchen-bath .btn-text,
.cta-band--painting .btn-text,
.cta-band--garage .btn-text,
.cta-band--basement .btn-text,
.cta-band--legal-suite .btn-text,
.cta-band--epoxy .btn-text { color: var(--accent-on-dark); }

.builder-ribbon {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(41,31,20,0.06);
  padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.builder-ribbon p { font-size: 16px; line-height: 24px; color: var(--text-primary); }
.builder-ribbon .btn-text { font-size: 14px; }

.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label { font-weight: 600; font-size: 12px; letter-spacing: 0.24px; color: var(--text-primary); }
.form-field input,
.form-field textarea,
.form-field select {
  font-family: var(--font-body);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  height: 48px;
  padding: 0 14px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  width: 100%;
}
.form-field textarea { height: auto; min-height: 120px; padding: 14px; resize: vertical; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-muted); }

/* ==========================================================================
   Mobile — real designed mobile frames (390px), breakpoint <=767px
   ========================================================================== */
@media (max-width: 767px) {
  .container { padding: 0 20px; }
  .section { padding: 56px 0; }

  .header { height: 64px; padding: 0 20px; }
  .header__logo img { height: 36px; }
  .header__actions { gap: 10px; }
  .header__phone { display: none; }
  .header__phone-icon {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1.5px solid var(--border-strong); color: var(--text-primary); flex-shrink: 0;
  }
  .header__phone-icon svg { width: 16px; height: 16px; }
  .header__cta { padding: 9px 14px; font-size: 12px; line-height: 16px; letter-spacing: 0.24px; }
  .header__burger { display: flex; }

  /* Mobile nav panel: slides down below the sticky header, not display:none so it can animate */
  .header__nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: 64px; left: 0; right: 0; bottom: 0;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    padding: 8px 20px 24px;
    overflow-y: auto;
    z-index: 199;
    font-size: 17px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }
  .header__nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .header__nav a,
  .header__nav-trigger { padding: 16px 4px; border-bottom: 1px solid var(--border-subtle); width: 100%; text-align: left; justify-content: space-between; }
  .header__nav-item--dropdown { position: static; }
  .header__dropdown {
    position: static; transform: none; box-shadow: none; border: none; border-radius: 0;
    padding: 0 0 0 16px; min-width: 0; background: var(--bg-ground-alt);
    max-height: 0; overflow: hidden; opacity: 1; visibility: visible;
    transition: max-height 0.2s ease;
  }
  .header__nav-item--dropdown.is-open .header__dropdown { max-height: 400px; transform: none; left: auto; }
  .header__dropdown a { border-bottom: 1px solid var(--border-subtle); border-radius: 0; padding: 14px 8px; }
  .header__nav .header__cta-mobile-row { display: flex; padding: 20px 4px 0; }

  .footer { display: flex; flex-direction: column; gap: 28px; padding: 48px 24px 32px; }
  .footer__columns { flex-direction: column; gap: 28px; }
  .footer__brand img { height: 50px; }
  .footer__brand { gap: 8px; }
  .footer__col { display: none; }
  .footer__bottom { display: none; }
  .footer__mobile-lines { display: flex; flex-direction: column; gap: 28px; }
  .footer__mobile-bottom { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: none; }

  .display-xl { font-size: 40px; line-height: 46px; letter-spacing: -0.5px; }
  .display-m { font-size: 28px; line-height: 34px; }
  .heading-h2 { font-size: 24px; line-height: 30px; }

  .before-after__pair { flex-direction: column; }
  .before-after__shot { width: 100%; }

  .cta-band { padding: 32px 24px; flex-direction: column; align-items: flex-start; }
  .cta-band__copy h3 { font-size: 28px; line-height: 34px; }

  .builder-ribbon { flex-direction: column; align-items: flex-start; padding: 20px 24px; }
}

/* ==========================================================================
   Page-specific rules — merged from css-parts/
   ========================================================================== */

/* ---- home.html ---- */
/* ==========================================================================
   Home page (index.html) — page-specific rules
   Built from Figma 7NLLbpuiOo0kNFfUMfF6bG
   Desktop node 11:2 "Desktop / 01 Home", Mobile node 37:2 "Mobile / 01 Home"
   ========================================================================== */

/* Generic centered-column pattern shared by most Home sections */
.home-audience .container,
.home-mosaic .container,
.home-recent .container,
.home-service-area .container,
.home-reviews .container,
.home-cta .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ---- Hero ---- */
.home-hero {
  position: relative;
  height: 680px;
  overflow: hidden;
  color: var(--text-inverse);
}
.home-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* px stops, not %: .home-hero__copy is a fixed top:96px/left:120px/
   max-width:620px block, so the dark zone must be pinned to that same pixel
   width — same fix as .fb-hero__scrim below, same root cause (a %-based
   fade tracks the hero's own rendered width, so the copy — esp. the
   accent-on-dark link — drifts into the faded, lighter part of the overlay
   as the hero narrows below its ~1440px design width). */
.home-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(28,23,18,0.88) 0px, rgba(28,23,18,0.85) 760px, rgba(28,23,18,0.25) 1100px);
}
.home-hero__copy {
  position: absolute;
  top: 96px;
  left: 120px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 620px;
}
.home-hero__copy--mobile { display: none; }
.home-hero__eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--accent-on-dark);
}
.home-hero__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 64px;
  line-height: 72px;
  letter-spacing: -1px;
  color: var(--text-inverse);
}
.home-hero__heading em {
  font-style: italic;
  color: var(--accent-on-dark);
}
.home-hero__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-inverse);
  max-width: 560px;
}
.home-hero__ctas { display: flex; align-items: center; gap: 22px; }
.home-hero__link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--accent-on-dark);
}
.home-hero__chips { display: flex; gap: 10px; flex-wrap: wrap; }
.home-hero__chip {
  background: rgba(247,242,237,0.12);
  border: 1px solid rgba(247,242,237,0.3);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.24px;
  color: var(--text-inverse);
  white-space: nowrap;
}
.home-hero__video-note {
  position: absolute;
  top: 630px;
  left: 760px;
  background: rgba(20,18,13,0.55);
  border-radius: 6px;
  padding: 7px 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.24px;
  color: var(--text-inverse-muted);
  white-space: nowrap;
}
.home-hero__video-note--mobile { display: none; }
.home-hero__mobile-proof {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.24px;
  color: var(--text-inverse-muted);
}

/* ---- AudienceSplit (editorial pairing, not matching boxes) ---- */
.home-audience { background: var(--bg-surface); overflow: hidden; }
.home-audience__cards { display: flex; gap: 40px; align-items: flex-start; }

.home-audience-card { position: relative; flex: 1 1 0; min-width: 0; }

/* -- Homeowner: airy inset panel floating in negative space -- */
.home-audience-card--homeowner { padding-top: 8px; }
.home-audience-card--homeowner .home-audience-card__panel {
  position: relative;
  z-index: 1;
  max-width: 380px;
  background: var(--brand-copper-tint);
  border-radius: 4px 20px 20px 20px;
  padding: 44px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.home-audience-card__rule { display: block; width: 30px; height: 2px; border-radius: 1px; background: var(--brand-copper); margin: 16px 0 22px; }
.home-audience-card__rule--dark { background: var(--accent-on-dark); }

.home-audience-card__eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: 0;
}
.home-audience-card--homeowner .home-audience-card__eyebrow { color: var(--brand-bronze); }
.home-audience-card--builder .home-audience-card__eyebrow { color: var(--accent-on-dark); }

.home-audience-card__heading { font-family: var(--font-display); font-weight: 600; margin: 0 0 16px; }
.home-audience-card--homeowner .home-audience-card__heading { font-size: 30px; line-height: 36px; max-width: 300px; color: var(--text-primary); }
.home-audience-card--builder .home-audience-card__heading { font-size: 40px; line-height: 46px; max-width: 440px; color: var(--text-inverse); }
.home-audience-card--builder .home-audience-card__heading em { font-style: italic; color: var(--accent-on-dark); }

.home-audience-card__body { font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 23px; margin: 0 0 28px; }
.home-audience-card--homeowner .home-audience-card__body { color: var(--text-secondary); max-width: 280px; }
.home-audience-card--builder .home-audience-card__body { color: var(--text-inverse-muted); max-width: 420px; }

.home-audience-card__cta { align-self: flex-start; box-shadow: 0 12px 26px -10px rgba(176,112,59,0.4); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.home-audience-card__cta:hover { transform: translateY(-2px); }
.home-audience-card--homeowner .btn-primary { background: var(--brand-copper); color: var(--text-inverse); }

/* large faint display numeral, bleeding into the negative space */
.home-audience-card__ghost {
  position: absolute;
  top: -14px;
  right: 4px;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 160px;
  line-height: 1;
  color: var(--brand-copper);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}
.home-audience-card__ghost--dark { color: var(--accent-on-dark); opacity: 0.07; top: 20px; right: 28px; font-size: 108px; }

/* -- Builder: layered dark card, distinct main + inset testimonial zones -- */
.home-audience-card--builder {
  margin-top: 44px;
  border-radius: 20px;
  background: var(--bg-dark);
  box-shadow: 0 26px 52px -24px rgba(20,15,10,0.55);
  overflow: hidden;
}
.home-audience-card--builder::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-copper), var(--accent-on-dark) 85%);
}
.home-audience-card__main { position: relative; z-index: 1; padding: 48px 44px 4px; }
.home-audience-card__scope {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-bronze);
  margin: 0;
}
.home-audience-card__scope--on-dark { color: var(--accent-on-dark); }

.home-builder-quote-panel {
  position: relative;
  z-index: 1;
  margin: 28px 24px 0;
  padding: 34px 30px 28px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(224,168,106,0.2);
  border-radius: 16px;
  overflow: hidden;
}
.home-builder-quote-panel__mark {
  position: absolute;
  top: 2px;
  left: 18px;
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  color: var(--accent-on-dark);
  opacity: 0.3;
}
.home-builder-quote { margin: 0; padding: 0 0 0 30px; }
.home-builder-quote__text {
  font-family: var(--font-display), Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  color: var(--text-inverse);
  margin: 0 0 14px;
}
.home-builder-quote__attr {
  font-family: var(--font-body, "Archivo", sans-serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 16px;
  color: var(--accent-on-dark);
}
.home-audience-card--builder .home-audience-card__cta.btn-on-dark {
  background: var(--bg-ground-alt);
  color: var(--text-primary);
  margin: 30px 44px 44px;
  box-shadow: 0 14px 28px -12px rgba(0,0,0,0.5);
}

.home-audience-card__body--mobile,
.home-audience-card__link--mobile { display: none; }

/* ---- Mosaic / What We Do ---- (full grid + card rules appended at end of file) */
.home-mosaic { background: var(--bg-ground-alt); }

/* ---- Recent Work ---- */
.home-recent { background: var(--bg-surface); }
.home-recent__pair--mobile { display: none; }

/* ---- Service Area ---- */
.home-service-area { background: var(--bg-ground-alt); }
.home-service-area .img-ph { width: 1200px; height: 460px; }
.home-service-area__map-note--mobile { display: none; }
.stat-module__label--mobile { display: none; }

/* Stat band: one light, thin-bordered container instead of three numbers
   floating on the page background — reads as a single premium module that
   sits right on top of the map, not a separate dashboard-style row. */
.home-service-area__stats {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: 0 20px 40px -20px rgba(41,31,20,0.18);
  margin-bottom: -34px;
}
.home-service-area__stats .stat-module {
  flex: 1;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 34px 24px;
  position: relative;
}
.home-service-area__stats .stat-module + .stat-module::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--border-subtle);
}
.home-service-area__stats .stat-module__num {
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.5px;
}
.home-service-area__stats .stat-module__label { width: auto; max-width: 200px; margin: 0 auto; }
.home-service-area .map-embed--service-area { position: relative; z-index: 1; padding-top: 34px; }

/* ---- Reviews ---- */
.home-reviews { background: var(--bg-surface); }
.home-reviews__cards { display: flex; gap: 24px; }
.home-reviews .card-testimonial { width: 384px; }

.home-reviews__video {
  display: flex;
  gap: 48px;
  align-items: center;
  margin-bottom: 48px;
  padding: 40px;
  background: var(--bg-ground-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(41,31,20,0.06);
}
.home-reviews__video-player { position: relative; flex: 0 0 340px; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 32px -8px rgba(41,31,20,0.18); background: var(--bg-dark); }
.home-reviews__video-player video { width: 100%; height: auto; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.home-reviews__video-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(31,26,21,0.72); color: var(--text-inverse);
  font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px; pointer-events: none;
}
.home-reviews__video-badge::before { content: "▶"; font-size: 9px; }
.home-reviews__video-copy { display: flex; flex-direction: column; gap: 10px; }
.home-reviews__video-title { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.15; color: var(--text-primary); }
.home-reviews__video-desc { color: var(--text-secondary); font-size: 16px; line-height: 24px; margin-bottom: 6px; }
.home-reviews__video-ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
@media (max-width: 767px) {
  .home-reviews__video { flex-direction: column; align-items: stretch; padding: 24px; gap: 20px; }
  .home-reviews__video-player { flex-basis: auto; }
}

/* ---- Why Enteco ---- */
/* `.section + .section { padding-top: 0 }` (specificity 0,2,0) assumes the
   two sections share a background, so the removed top padding just avoids
   doubling a gap that already reads visually — fine between same-toned
   sections, but .home-why is white->dark and .home-cta right after it is
   dark->white: with 0 padding-top the copy sits flush against the color
   change on both sides, which is what actually read as "cramped" here.
   Restore it just for this pair (needs a 0,2,0+ selector to win). */
.section.home-why,
.section.home-cta { padding-top: 96px; }

.home-why {
  background: var(--bg-dark);
  position: relative;
  overflow: hidden;
}
.home-why__ghost {
  position: absolute;
  right: 40px;
  top: 214px;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 150px;
  line-height: 150px;
  color: var(--text-inverse);
  opacity: 0.05;
  white-space: nowrap;
  pointer-events: none;
}
.home-why .container { display: flex; gap: 80px; align-items: flex-start; position: relative; }
.home-why__copy { display: flex; flex-direction: column; gap: 16px; width: 420px; flex-shrink: 0; }
.home-why__eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--accent-on-dark);
}
.home-why__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 28px;
  line-height: 36px;
  color: var(--accent-on-dark);
}
.home-why__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-inverse-muted);
  width: 420px;
}
.home-why__list { display: flex; flex-direction: column; gap: 18px; }
.home-why__item { display: flex; align-items: center; gap: 12px; }
.home-why__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-gold);
  flex-shrink: 0;
}
.home-why__item p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-inverse);
  width: 520px;
}

/* ---- CTA band ---- */
.home-cta { background: var(--bg-ground-alt); }
.home-cta .cta-band { width: 100%; }
/* Now a real .btn.btn-primary — no custom text styling needed here. */

/* ---- Mobile-only merged Reviews + Why + CTA "Tail" section ---- */
.home-tail { display: none; }

/* ==========================================================================
   Mobile — real designed mobile frame (node 37:2), breakpoint <=767px
   ========================================================================== */
@media (max-width: 767px) {
  /* Hero: this 10-person group photo is a wide landscape shot. As a
     full-bleed cropped background at mobile's narrow-and-tall aspect ratio,
     "cover" could only ever show ~35% of the image width, no matter the
     object-position - someone always got cut off. Restructured to a photo
     banner + text-below pattern instead: the image renders at its own
     aspect ratio (nobody cropped), copy flows below in a dark band rather
     than overlaid on the image. */
  .home-hero {
    height: auto;
    background: var(--bg-dark);
  }
  .home-hero__img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1672 / 941;
    object-position: center;
  }
  .home-hero__overlay { display: none; }
  .home-hero__copy--desktop { display: none; }
  .home-hero__copy--mobile {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: static;
    width: auto;
    max-width: none;
    padding: 32px 24px 40px;
  }
  .home-hero__heading--mobile {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    color: var(--text-inverse);
  }
  .home-hero__heading--mobile em { font-style: italic; color: var(--accent-on-dark); }
  .home-hero__body--mobile {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-inverse);
  }
  .home-hero__ctas--mobile { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; }
  .home-hero__ctas--mobile .btn-primary { width: 100%; height: 52px; }
  .home-hero__video-note--desktop { display: none; }
  .home-hero__video-note--mobile {
    display: block;
    top: 12px;
    left: auto;
    right: 16px;
  }

  /* Home sections use a 48px mobile vertical rhythm per the real mobile frame (overrides shared .section 56px) */
  .home-audience,
  .home-mosaic,
  .home-recent,
  .home-service-area { padding: 48px 0; }

  /* All Home sections drop the rule bar + H2 on mobile — only the small
     overline label remains (per the real mobile frame, every section
     header is reduced to a single label line). */
  .home-audience .section-heading,
  .home-mosaic .section-heading,
  .home-recent .section-heading,
  .home-service-area .section-heading,
  .home-reviews .section-heading {
    align-items: flex-start;
  }
  .home-audience .section-heading__rule,
  .home-audience .section-heading h2,
  .home-mosaic .section-heading__rule,
  .home-mosaic .section-heading h2,
  .home-recent .section-heading__rule,
  .home-recent .section-heading h2,
  .home-service-area .section-heading__rule,
  .home-service-area .section-heading h2,
  .home-reviews .section-heading__rule,
  .home-reviews .section-heading h2 {
    display: none;
  }

  /* AudienceSplit */
  .home-audience .container { align-items: flex-start; gap: 16px; }
  .home-audience__cards { flex-direction: column; gap: 20px; }
  .home-audience-card { width: 100%; flex: none; margin-top: 0 !important; padding-top: 0; }
  .home-audience-card--homeowner .home-audience-card__panel { max-width: none; padding: 26px 24px; border-radius: 16px; gap: 10px; box-shadow: 0 12px 28px -8px rgba(41,31,20,0.09), 0 2px 6px rgba(41,31,20,0.05); }
  .home-audience-card--builder { border-radius: 16px; box-shadow: 0 12px 28px -8px rgba(20,15,10,0.35); }
  .home-audience-card__main { padding: 26px 24px 4px; }
  .home-audience-card__ghost { font-size: 88px; top: -6px; right: -4px; opacity: 0.10; }
  .home-audience-card__ghost--dark { font-size: 64px; top: 14px; right: 16px; }
  .home-audience-card__rule { margin: 10px 0 14px; }
  .home-audience-card__heading { font-size: 22px; line-height: 30px; max-width: none !important; }
  .home-audience-card__body--desktop { display: none; }
  .home-audience-card__body--mobile { display: block; font-size: 14px; line-height: 20px; max-width: 294px; margin: 0 0 20px; }
  .home-audience-card .btn { display: none; }
  .home-builder-quote-panel { margin: 20px 16px 0; padding: 24px 20px 20px; }
  .home-builder-quote-panel__mark { font-size: 52px; top: 0; left: 12px; }
  .home-builder-quote { padding-left: 22px; }
  .home-builder-quote__text { font-size: 17px; line-height: 25px; }
  .home-audience-card--builder .home-audience-card__cta.btn-on-dark { margin: 20px 16px 26px; }
  .home-audience-card__link--mobile {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
  }
  .home-audience-card--homeowner .home-audience-card__link--mobile { padding: 0 0 26px; }
  .home-audience-card--builder .home-audience-card__link--mobile { padding: 0 24px 26px; }
  .home-audience-card--homeowner .home-audience-card__link--mobile { color: var(--brand-bronze); }
  .home-audience-card--builder .home-audience-card__link--mobile { color: var(--accent-on-dark); }

  /* Mosaic — grid itself collapses to 1 column via the base rules appended at
     end of file; only container alignment needs the mobile override here. */
  .home-mosaic .container { align-items: flex-start; gap: 16px; }

  /* Recent Work */
  .home-recent .container { align-items: flex-start; gap: 14px; }
  .home-recent .before-after--desktop { display: none; }
  .home-recent__pair--mobile { display: flex; flex-direction: column; gap: 14px; width: 100%; }
  .home-recent__pair--mobile .before-after__shot { width: 100%; height: 240px; }
  .home-recent__pair--mobile .before-after__caption { font-size: 14px; }

  /* Service Area */
  .home-service-area .container { align-items: flex-start; gap: 14px; }
  .home-service-area__stats {
    flex-direction: column;
    margin-bottom: 20px;
    border-radius: 16px;
    box-shadow: 0 12px 28px -14px rgba(41,31,20,0.16);
  }
  .home-service-area__stats .stat-module {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 10px;
    padding: 18px 20px;
  }
  .home-service-area__stats .stat-module + .stat-module::before {
    left: 20px; right: 20px; top: 0; bottom: auto; width: auto; height: 1px;
  }
  .home-service-area__stats .stat-module__num { font-size: 30px; line-height: 34px; }
  .home-service-area__stats .stat-module__label { width: auto; max-width: none; margin: 0; }
  .stat-module__label--desktop { display: none; }
  .stat-module__label--mobile { display: block; }
  .home-service-area .img-ph { width: 100%; height: 220px; }
  .home-service-area .map-embed--service-area { padding-top: 0; }
  .home-service-area__map-note--desktop { display: none; }
  .home-service-area__map-note--mobile { display: block; }

  /* Desktop-only Reviews / Why / CTA sections replaced by merged Tail */
  .home-reviews,
  .home-why,
  .home-cta { display: none; }

  .home-tail {
    display: block;
    background: var(--bg-dark);
    padding: 48px 24px 56px;
  }
  .home-tail__eyebrow {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color: var(--accent-on-dark);
    margin-bottom: 16px;
  }
  .home-tail__stars {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--accent-on-dark);
    margin-bottom: 16px;
  }
  .home-tail__quote {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-inverse);
    margin-bottom: 16px;
  }
  .home-tail__meta {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.24px;
    color: var(--text-inverse-muted);
    margin-bottom: 16px;
  }
  .home-tail__heading {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: var(--text-inverse);
    margin-bottom: 16px;
  }
  .home-tail .btn-on-dark { width: 100%; height: 52px; margin-bottom: 16px; }
  /* Now a real .btn.btn-primary — match the full-width mobile button above it. */
  .home-tail__builder-link { width: 100%; height: 52px; }
}

/* Between 767px (where Reviews/Why switch to the merged mobile Tail) and
   1280px (where the fixed-width desktop columns were sized to fit), both
   sections still render at full width and overflow the viewport: the
   reviews row needs a flat 1200px for 3 cards, and the Why copy column
   doesn't shrink below its 420px. Scroll the cards and stack Why instead. */
@media (min-width: 768px) and (max-width: 1279px) {
  .home-why .container { flex-direction: column; gap: 32px; }
  .home-why__copy,
  .home-why__body { width: auto; max-width: 560px; }

  .home-reviews__cards { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; -ms-overflow-style: none; scrollbar-width: none; }
  .home-reviews__cards::-webkit-scrollbar { display: none; }
  .home-reviews .card-testimonial { flex-shrink: 0; scroll-snap-align: start; }
}

/* ---- for-builders.html ---- */
/* ==========================================================================
   For Builders & Developers — page-specific styles
   Figma: 7NLLbpuiOo0kNFfUMfF6bG — Desktop node 23:540, Mobile node 41:149
   Reuses shared classes from style.css (.overline, .heading-h2/h3, .body-*,
   .btn, .section-heading, .img-ph, .form-field, .container, .section) —
   only genuinely new layout lives here.
   ========================================================================== */

/* ---- responsive content-swap helpers ----
   Desktop and mobile frames in Figma carry meaningfully different copy and
   structure (shorter hero headline, 4 merged "pain" cards instead of 3,
   the whole 4-step process + de-risk banner dropped on mobile, the Phone
   field dropped from the form, etc.) — not a CSS reflow of the same DOM.
   So each differing block is authored twice and toggled by breakpoint. */
.fb-mobile-only { display: none !important; }
/* .fb-desktop-only needs no base rule — desktop content renders via its own
   component classes (flex/block) by default; it's only hidden in the mobile
   media query below. */
.fb-mobile-heading { display: flex; flex-direction: column; gap: 14px; width: 100%; }

/* ---- small type patterns not already exposed as classes in style.css ---- */
.fb-microlabel { font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.24px; }
.overline--on-dark { color: var(--accent-on-dark); }
.text-inverse { color: var(--text-inverse); }
.text-inverse-muted { color: var(--text-inverse-muted); }
.text-secondary { color: var(--text-secondary); }
.section-heading--center { align-items: center; text-align: center; }
.text-muted { color: var(--text-muted); }

/* ---- section shell: centered heading + content, matches Figma "Section" frame ---- */
/* Every other page wraps section content in .container (1440px/120px,
   centered); this page never did, which is what let .fb-proof grow wider
   than the viewport. Giving .fb-section the same spec directly means every
   section on this page gets the same outer edge as everywhere else, without
   having to rewrap each section's markup individually. */
/* padding-left/right only, not the shorthand: .fb-section always sits
   alongside .section on the same element, and .section supplies the
   vertical rhythm (96px top/bottom) — a shorthand `padding` here would
   reset that to 0 and glue every section on this page to the next. */
.fb-section { display: flex; flex-direction: column; align-items: center; gap: 40px; max-width: 1440px; margin: 0 auto; padding-left: 120px; padding-right: 120px; box-sizing: border-box; }
.fb-section--cream { background: var(--bg-ground-alt); }
.fb-section--surface { background: var(--bg-surface); }
.fb-section--dark { background: var(--bg-dark); }

/* ==========================================================================
   Hero
   ========================================================================== */
.fb-hero { position: relative; height: 600px; overflow: hidden; }
.fb-hero__media { position: absolute; inset: 0; }
.fb-hero__media img,
.fb-hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* px stops, not %: .fb-hero__copy is a fixed left:120px/width:620px block,
   so the dark zone must be pinned to that same pixel width — a %-based
   fade (as this was) tracks the hero's own rendered width instead, and the
   copy (esp. the accent-on-dark CTA link) drifts into the faded, lighter
   part of the scrim as the hero narrows below its ~1440px design width. */
.fb-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(28,23,18,0.88) 0px, rgba(28,23,18,0.85) 760px, rgba(28,23,18,0.25) 1100px);
}
.fb-hero__copy {
  position: absolute; z-index: 2;
  left: 120px; top: 92px; width: 620px;
  display: flex; flex-direction: column; gap: 22px;
}
.fb-hero__title { font-family: var(--font-display); font-weight: 600; font-size: 50px; line-height: 58px; color: var(--text-inverse); }
.fb-hero__title em { font-style: italic; color: var(--accent-on-dark); }
.fb-hero__desc--desktop { width: 560px; color: var(--text-inverse); }
.fb-hero__ctas { display: flex; align-items: center; gap: 20px; }
.fb-hero .btn-on-dark { box-shadow: 0 10px 24px -6px rgba(0,0,0,0.35); }
.fb-hero__pipeline-link { color: var(--accent-on-dark); }
.fb-hero__trust--desktop { color: var(--text-inverse); }
.fb-hero__video-note {
  position: absolute; z-index: 2;
  right: 32px; bottom: 34px;
  background: rgba(20,18,13,0.55);
  border-radius: 6px; padding: 7px 12px;
  color: var(--text-inverse-muted);
}

/* ==========================================================================
   Pains (3-card, desktop)
   ========================================================================== */
.fb-pains { display: flex; gap: 24px; }
.fb-pain {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(41,31,20,0.06);
  padding: 28px;
  width: 384px;
  display: flex; flex-direction: column; gap: 10px;
}
.fb-pain p { width: 328px; }
.fb-pain__num { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 36px; color: var(--brand-copper-text); }

/* ==========================================================================
   Proof / case study (desktop)
   ========================================================================== */
.fb-case {
  background: var(--bg-ground-alt);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(41,31,20,0.06);
  padding: 40px;
  display: flex; gap: 40px; align-items: flex-start;
}
.fb-case__photo { width: 420px; height: 300px; flex-shrink: 0; }
.fb-case__copy { display: flex; flex-direction: column; gap: 12px; }
.fb-case__eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 8px; text-transform: uppercase; color: var(--brand-bronze); }
.fb-case__title { width: 620px; }
.fb-case__desc { width: 620px; }
.fb-case__note { width: 620px; }

/* ==========================================================================
   Process (4 steps + de-risk banner, desktop)
   ========================================================================== */
.fb-steps { display: flex; gap: 24px; }
.fb-step {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(41,31,20,0.06);
  padding: 24px;
  width: 282px;
  display: flex; flex-direction: column; gap: 10px;
}
.fb-step__num { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 36px; color: var(--brand-copper-text); }
.fb-step p { width: 234px; }

.fb-derisk {
  background: var(--bg-dark);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(41,31,20,0.06);
  padding: 40px 48px;
  display: flex; align-items: center; gap: 48px;
}
.fb-derisk__copy { display: flex; flex-direction: column; gap: 8px; }
.fb-derisk__title { width: 700px; }
.fb-derisk__note { width: 280px; flex-shrink: 0; }

/* Between 767px and 1280px: the 4-card step row needs a flat 1200px, and
   the de-risk banner's 700px title + 280px note don't fit next to each
   other either. Scroll the cards, stack the banner. */
@media (min-width: 768px) and (max-width: 1279px) {
  .fb-steps { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; -ms-overflow-style: none; scrollbar-width: none; }
  .fb-steps::-webkit-scrollbar { display: none; }
  .fb-step { flex-shrink: 0; scroll-snap-align: start; }

  .fb-derisk { flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; box-sizing: border-box; }
  .fb-derisk__title,
  .fb-derisk__note { width: auto; max-width: 100%; }
}

/* ==========================================================================
   Mobile: builder work + case (condensed)
   ========================================================================== */
.fb-mobile-cards { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.fb-mobile-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: 0 12px 28px -8px rgba(41,31,20,0.09), 0 2px 6px rgba(41,31,20,0.05);
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.fb-mobile-case {
  background: var(--brand-copper-tint);
  border-radius: 10px;
  box-shadow: 0 12px 28px -8px rgba(41,31,20,0.09), 0 2px 6px rgba(41,31,20,0.05);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.fb-mobile-case__eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 8px; text-transform: uppercase; color: var(--brand-bronze); }

/* ==========================================================================
   Contractor package form
   ========================================================================== */
/* Same fix as .home-why/.home-cta: this section follows a cream one, so
   `.section + .section { padding-top: 0 }` (0,2,0) strips its top padding
   assuming a same-toned neighbour — here the heading ends up flush against
   the cream->dark color change instead. Needs 0,2,0+ to win. */
.section.fb-form-section { padding-top: 96px; }

.fb-form-section .form-field label { color: var(--text-inverse); }
.fb-form { display: flex; flex-direction: column; gap: 16px; width: 736px; }
.fb-form-row { display: flex; gap: 16px; }
.fb-form-row .form-field { width: 360px; }
.fb-form-row--single .form-field { width: 360px; }
.fb-form-submit-note { color: var(--text-inverse-muted); }

.fb-form--mobile { width: 342px; gap: 14px; }
.fb-form--mobile .form-field { width: 100%; }

/* ==========================================================================
   Mobile breakpoint — real designed mobile frame, node 41:149
   ========================================================================== */
@media (max-width: 767px) {
  .fb-desktop-only { display: none !important; }
  .fb-mobile-only { display: block !important; }
  /* elements that are flex containers when shown need a higher-specificity
     override so the blanket "block" above doesn't collapse their layout */
  .fb-mobile-only.fb-mobile-heading,
  .fb-mobile-only.fb-hero__ctas--mobile,
  .fb-mobile-only.fb-section,
  .fb-mobile-only.fb-form { display: flex !important; }
  .fb-mobile-only.btn { display: inline-flex !important; }

  .fb-hero { height: 540px; }
  .fb-hero__media img,
  .fb-hero__media video { object-position: 70% 50%; }
  .fb-hero__scrim {
    background: linear-gradient(180deg, rgba(28,23,18,0.25) 0%, rgba(28,23,18,0.6) 45%, rgba(28,23,18,0.92) 100%);
  }
  .fb-hero__copy { left: 24px; top: 246px; width: 342px; gap: 12px; }
  .fb-hero__title { font-size: 28px; line-height: 35px; width: 342px; }
  .fb-hero__desc--mobile { width: 342px; color: var(--text-inverse); }
  .fb-hero__ctas--mobile .btn { width: 342px; height: 52px; }
  .fb-hero__trust--mobile { width: 342px; color: var(--text-inverse-muted); }
  .fb-hero__video-note--mobile { right: 16px; bottom: auto; top: 12px; padding: 6px 10px; }

  .fb-section { align-items: flex-start; gap: 14px; padding-left: 24px; padding-right: 24px; }

  .fb-mobile-card p,
  .fb-mobile-case p { width: 302px; }

  .fb-form-submit-note--mobile { width: 342px; }

  .fb-derisk { flex-direction: column; align-items: flex-start; }
}

/* ---- about.html ---- */
/* ==========================================================================
   About page (about.html) — page-specific rules
   Pulled from Figma node 25:695 (Desktop / 09 About) + 42:168 (Mobile / 09 About)
   Desktop and mobile are genuinely different designed screens (not a reflow),
   so most sections render two parallel variants (e.g. .about-hero /
   .about-hero-mobile) with only one shown at a time via the media query below.
   ========================================================================== */

/* ---- Hero ---- */
.about-hero {
  background: var(--bg-ground-alt);
}
.about-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 88px;
  padding-bottom: 64px;
  text-align: center;
}
.about-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  max-width: 840px;
}

/* mobile-only small rule bar used across several condensed sections */
.about-rule {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent-flame);
}

.about-hero-mobile {
  display: none;
  background: var(--bg-ground-alt);
  padding: 44px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.about-hero-mobile__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
  color: var(--text-primary);
  max-width: 342px;
}
.about-hero-mobile__trust {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.24px;
  color: var(--text-secondary);
  max-width: 342px;
}

/* ---- Overline variant for dark sections ---- */
.overline--gold { color: var(--accent-on-dark); }

/* ---- Story / Founder (desktop only) ---- */
.about-story {
  background: var(--bg-surface);
  padding-top: 148px;
}
.about-story__inner {
  display: flex;
  gap: 64px;
  align-items: center;
  width: 1104px;
  max-width: 100%;
  margin: 0 auto;
}
.about-story__img {
  width: 480px;
  height: 420px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(41,31,20,0.08);
  flex-shrink: 0;
}
.about-story__img img { width: 100%; height: 100%; object-fit: cover; }
.about-story__copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 560px;
  max-width: 100%;
}
.about-story__copy h2 { color: var(--text-primary); }
.about-story__copy p { color: var(--text-secondary); }

/* ---- Crew (desktop) ---- */
.about-crew {
  background: var(--bg-ground-alt);
}
.about-crew__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.about-crew__team {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
}
.about-crew__member {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 384px;
}
.about-crew__photo {
  width: 384px;
  height: 380px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(41,31,20,0.08);
}
.about-crew__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-crew__member h3 { color: var(--text-primary); }
.about-crew__member p { color: var(--text-secondary); }

/* ---- Crew (mobile) ---- */
.about-crew-mobile {
  display: none;
  background: var(--bg-surface);
  padding: 44px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.about-crew-mobile__photo {
  width: 342px;
  max-width: 100%;
  height: 280px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 16px 36px -10px rgba(41,31,20,0.11), 0 3px 8px rgba(41,31,20,0.06);
}
.about-crew-mobile__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-crew-mobile p { color: var(--text-secondary); max-width: 342px; }

/* ---- Principles + Facts (desktop) ---- */
.about-principles {
  background: var(--bg-dark);
}
.about-principles__inner {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.about-principles__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.about-principles__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.about-principles__item h3 { color: var(--text-inverse); }
.about-principles__item p { color: var(--text-inverse-muted); width: 480px; max-width: 100%; }

.about-facts {
  background: var(--bg-dark-deep);
  border-radius: 12px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-facts__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 440px;
  max-width: 100%;
}
.about-facts__body p { display: flex; align-items: baseline; gap: 10px; color: var(--text-inverse); }
.about-facts__check { color: var(--accent-on-dark); flex-shrink: 0; }

/* Between 767px and 1280px: the crew row and principles/facts row were both
   sized to fit at 1200px+ (crew team's max-width:100% caps the row itself,
   but the two 384px members still don't fully flex-shrink to match; the
   principles row has no width cap at all). Scroll the crew row, stack
   principles above facts instead of trying to force both to shrink. */
@media (min-width: 768px) and (max-width: 1279px) {
  .about-crew__team { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; -ms-overflow-style: none; scrollbar-width: none; }
  .about-crew__team::-webkit-scrollbar { display: none; }
  .about-crew__member { flex-shrink: 0; scroll-snap-align: start; }

  .about-principles__inner { flex-direction: column; gap: 32px; width: 100%; }
}

/* ---- How we work / CTA (mobile condensed dark block) ---- */
.about-how-mobile {
  display: none;
  background: var(--bg-dark);
  padding: 44px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.about-how-mobile__lines {
  display: flex;
  flex-direction: column;
}
.about-how-mobile__lines p {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-inverse);
}
.about-how-mobile p.about-how-mobile__facts { color: var(--text-inverse-muted); max-width: 342px; }

/* ---- How we work heading + CTA band + builder ribbon (desktop) ---- */
.about-howwework {
  background: var(--bg-surface);
}
.about-howwework__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.about-howwework__lede {
  color: var(--text-secondary);
  width: 760px;
  max-width: 100%;
}
.about-howwework .cta-band,
.about-howwework .builder-ribbon {
  width: 1200px;
  max-width: 100%;
}

/* ---- CTA (mobile condensed) ---- */
.about-cta-mobile {
  display: none;
  background: var(--bg-ground-alt);
  padding: 44px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.about-cta-mobile .btn {
  width: 100%;
  justify-content: center;
}
.about-cta-mobile__link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.24px;
  color: var(--brand-bronze);
}

/* ==========================================================================
   Mobile — real designed mobile frame (390px), breakpoint <=767px
   ========================================================================== */
@media (max-width: 767px) {
  /* hide desktop-only sections */
  .about-hero,
  .about-story,
  .about-crew,
  .about-principles,
  .about-howwework {
    display: none;
  }

  /* show mobile-only sections */
  .about-hero-mobile,
  .about-crew-mobile,
  .about-how-mobile,
  .about-cta-mobile {
    display: flex;
  }
}

/* ---- projects.html ---- */
/* ==========================================================================
   Projects page — page-specific styles
   Built from Figma nodes 26:758 (Desktop / 10 Projects) and 42:211 (Mobile / 10 Projects)
   ========================================================================== */

/* ---- Mobile/Desktop view toggle (this page's mobile frame is a genuinely
   curated, shorter design — not a CSS reflow of the desktop markup) ---- */
.projects-mobile-view { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.projects-hero {
  background: var(--bg-ground-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 88px 0 48px;
  text-align: center;
}
.projects-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  max-width: 800px;
}

/* ---- Filter chips ---- */
.projects-filter { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.projects-filter__chip {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.24px;
  color: var(--text-primary);
}
.projects-filter__chip.is-active {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: var(--text-inverse);
}

/* ==========================================================================
   Section headings (rule + overline + h2), centered
   ========================================================================== */
.projects-section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.projects-section-heading__rule {
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent-flame);
}
.projects-section-heading h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
  color: var(--text-primary);
}
.projects-section-heading--on-dark h2 { color: var(--text-inverse); }
.projects-section-heading--on-dark .overline { color: var(--accent-on-dark); }

/* ==========================================================================
   Photo grid
   ========================================================================== */
.projects-grid-section { background: var(--bg-surface); padding: 96px 0; }

/* Editorial masonry — same idea as the home "What we do" mosaic (real size
   variety instead of one uniform tile, warm/premium finish) but built as a
   true masonry column flow: with 42 photos of genuinely different
   orientations, letting each keep its natural aspect ratio does the "mixed
   square / vertical / horizontal" job better than a hand-placed bento grid
   would at this scale. column-width lets the browser drop from 4 columns to
   1 on its own as the viewport narrows, so no extra tablet/mobile queries
   are needed for the grid itself. Cells stay static (no hover) on purpose —
   see the "Interaction states" note above: these aren't links. */
.projects-grid {
  column-width: 300px;
  column-count: 4;
  column-gap: 20px;
}
.projects-grid__cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 22px;
}
.projects-grid__img {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-ground-alt);
}
.projects-grid__img img { display: block; width: 100%; height: auto; }
.projects-grid__img--shadow-a { box-shadow: 0 6px 18px -10px rgba(41,31,20,0.14); }
.projects-grid__img--shadow-b { box-shadow: 0 16px 34px -16px rgba(41,31,20,0.2); }
.projects-grid__caption {
  font-size: 13px;
  line-height: 19px;
  color: var(--text-secondary);
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

@media (max-width: 640px) {
  .projects-grid { column-width: 100%; column-count: 1; column-gap: 0; }
  .projects-grid-section { padding: 56px 0; }
}

/* ==========================================================================
   Video strip
   ========================================================================== */
.projects-videos {
  background: var(--bg-dark);
  padding: 88px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.projects-videos__row { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.projects-video { display: flex; flex-direction: column; gap: 10px; width: 220px; }
.projects-video__thumb {
  position: relative;
  width: 220px;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-dark);
}
.projects-video__thumb img,
.projects-video__thumb video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.projects-video__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.projects-video__play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-ground-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: 18px;
}
.projects-video__title { font-weight: 600; font-size: 20px; line-height: 28px; color: var(--text-inverse); }
.projects-video__meta { font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.24px; color: var(--text-inverse-muted); }

/* ==========================================================================
   Featured case studies
   ========================================================================== */
.projects-cases-section { background: var(--bg-ground-alt); padding: 96px 0; display: flex; flex-direction: column; align-items: center; gap: 40px; }

/* The carousel wrapper + track had no CSS at all before (only the JS scroll
   logic existed) — the row ran full-bleed with no side margin, which is why
   text on the last visible card ran off the edge of the viewport. This
   mirrors the same arrow-carousel pattern already used for the home page's
   "Recent Work" strip, so it's a proven layout, not a new one. */
.projects-cases-carousel {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 76px;
  box-sizing: border-box;
}
.projects-cases {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.projects-cases::-webkit-scrollbar { display: none; }
.projects-cases .projects-case { scroll-snap-align: start; }

.projects-cases-arrow {
  position: absolute;
  top: 150px;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 8px 20px rgba(41,31,20,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-primary);
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.projects-cases-arrow:hover { background: var(--brand-copper-tint); }
.projects-cases-arrow:disabled { opacity: 0.35; cursor: default; }
.projects-cases-arrow:disabled:hover { background: var(--bg-surface); }
.projects-cases-arrow--prev { left: 8px; }
.projects-cases-arrow--next { right: 8px; }

/* Real card now (bg, border, radius) instead of a bare shadow floating
   around unpadded text — image bleeds to the card edge like .card-service,
   the three text lines get real side + bottom padding so nothing touches
   the card boundary or runs past it. */
.projects-case {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 384px;
  flex: 0 0 auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 28px -14px rgba(41,31,20,0.16), 0 2px 6px rgba(41,31,20,0.05);
}
.projects-case__img {
  width: 100%;
  height: 240px;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  margin-bottom: 0;
}
.projects-case__img img { width: 100%; height: 100%; object-fit: cover; }
.projects-case > p { padding: 0 22px; margin: 0; }
.projects-case > p:last-child { padding-bottom: 22px; }
.projects-case__title { font-weight: 600; font-size: 19px; line-height: 26px; color: var(--text-primary); }
.projects-case__desc { font-size: 14px; line-height: 22px; color: var(--text-secondary); }
.projects-case__link { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--brand-bronze); margin-top: 0; }
.projects-case__link a { color: inherit; }

@media (max-width: 767px) {
  .projects-cases-carousel { padding: 0 20px; }
}

.projects-builder-slot {
  background: var(--brand-copper-tint);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(41,31,20,0.06);
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 1200px;
  max-width: 100%;
  box-sizing: border-box;
}
.projects-builder-slot__label {
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--brand-bronze);
}
.projects-builder-slot__desc { font-size: 14px; line-height: 20px; color: var(--text-secondary); max-width: 900px; }

/* ==========================================================================
   Trust band
   ========================================================================== */
.projects-trust-band {
  background: var(--bg-ground-alt);
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 48px 0;
}
.projects-trust-band__copy { font-size: 16px; line-height: 24px; color: var(--text-primary); max-width: 560px; }
.projects-trust-band__rating { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--brand-copper-text); white-space: nowrap; }
.projects-trust-band__years { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--text-primary); white-space: nowrap; }

/* ==========================================================================
   Project map
   ========================================================================== */
.projects-map-section {
  background: var(--bg-dark);
  padding: 96px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.projects-map-section .img-ph { width: 1200px; max-width: 100%; height: 460px; box-sizing: border-box; }
.projects-map-section__caption { font-size: 16px; line-height: 24px; color: var(--text-inverse-muted); }

/* ==========================================================================
   CTA section wrapper
   ========================================================================== */
.projects-cta-section { background: var(--bg-ground-alt); padding: 96px 0; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.projects-cta-section .cta-band,
.projects-cta-section .builder-ribbon { width: 1200px; max-width: 100%; box-sizing: border-box; }

/* ==========================================================================
   Mobile — real designed mobile frame (node 42:211)
   ========================================================================== */
@media (max-width: 767px) {
  .projects-desktop-view { display: none; }
  .projects-mobile-view { display: block; }

  /* Hero */
  .projects-hero-m {
    background: var(--bg-ground-alt);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 44px 24px;
  }
  .projects-hero-m__rule { width: 28px; height: 3px; border-radius: 2px; background: var(--accent-flame); }
  .projects-hero-m__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
    color: var(--text-primary);
  }
  .projects-filter-m { display: flex; gap: 8px; flex-wrap: wrap; }
  .projects-filter-m__chip {
    display: inline-flex;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 7px 14px;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.24px;
    color: var(--text-primary);
  }
  .projects-filter-m__chip.is-active {
    background: var(--bg-dark);
    border-color: var(--bg-dark);
    color: var(--text-inverse);
  }

  /* Grid + video list (single column) */
  .projects-list-m {
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 44px 24px;
  }
  .projects-list-m__img {
    width: 100%;
    height: 240px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 16px 36px -10px rgba(41,31,20,0.11), 0 3px 8px rgba(41,31,20,0.06);
  }
  .projects-list-m__img img { width: 100%; height: 100%; object-fit: cover; }
  .projects-list-m__img--plain { box-shadow: none; height: 220px; }
  .projects-list-m__caption { font-size: 14px; line-height: 20px; color: var(--text-secondary); }

  .projects-builder-slot-m {
    background: var(--brand-copper-tint);
    border-radius: 10px;
    box-shadow: 0 12px 28px -8px rgba(41,31,20,0.09), 0 2px 6px rgba(41,31,20,0.05);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }
  .projects-builder-slot-m__label {
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color: var(--brand-bronze);
  }
  .projects-builder-slot-m__desc { font-size: 14px; line-height: 20px; color: var(--text-secondary); }

  .projects-video-m__thumb {
    position: relative;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-dark);
  }
  .projects-video-m__thumb img,
  .projects-video-m__thumb video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
  .projects-video-m__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .projects-video-m__play {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-ground-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 16px;
  }
  .projects-video-m__caption {
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.24px;
    color: var(--text-muted);
  }

  /* Map section */
  .projects-map-m {
    background: var(--bg-dark);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 44px 24px;
  }
  .projects-map-m__rule { width: 28px; height: 3px; border-radius: 2px; background: var(--accent-flame); }
  .projects-map-m .img-ph { width: 100%; height: 220px; }
  .projects-map-m__caption { font-size: 14px; line-height: 20px; color: var(--text-inverse-muted); }
  .projects-map-m__btn {
    background: var(--bg-ground-alt);
    color: var(--text-primary);
    width: 100%;
    height: 52px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
  }
}

/* ---- reviews.html ---- */
/* ==========================================================================
   Reviews page — page-specific rules
   Built from Figma node 27:821 (Desktop / 11 Reviews) + 43:160 (Mobile / 11 Reviews)
   Reuses .card-testimonial, .trust-bar, .section-heading, .cta-band, .btn from style.css
   ========================================================================== */

/* ---- Hero ---- */
.reviews-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 88px 24px 72px;
  text-align: center;
}
.reviews-hero__stars {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.24px;
  color: var(--brand-copper-text);
}
.reviews-hero__score {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 96px;
  line-height: 100px;
  color: var(--text-primary);
}
.reviews-hero__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
  color: var(--text-primary);
}
.reviews-hero__heading em {
  font-style: italic;
  color: var(--brand-copper-text);
}
.reviews-hero__sub {
  color: var(--text-secondary);
  width: 620px;
  max-width: 100%;
}
.reviews-hero__ctas {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* ---- "What clients say, by service" — desktop grouped cards ---- */
.reviews-groups-section {
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 96px 0;
}
.reviews-groups-heading {
  align-items: center;
  text-align: center;
}
.reviews-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.reviews-group__cards {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.reviews-group__cards .card-testimonial { width: 384px; }
.reviews-group__cards .card-testimonial__quote { width: 320px; }
.reviews-groups__gbp-tags {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.24px;
  color: var(--text-muted);
}

/* ---- Mobile-only flat review list (real mobile frame, not a reflow) ---- */
.reviews-mobile-list {
  display: none;
  background: var(--bg-surface);
  flex-direction: column;
  gap: 14px;
  padding: 44px 24px;
}
.reviews-mobile-card {
  background: var(--bg-ground-alt);
  border-radius: 10px;
  box-shadow: 0 12px 28px -8px rgba(41,31,20,0.09), 0 2px 6px rgba(41,31,20,0.05);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reviews-mobile-card__stars {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.24px;
  color: var(--brand-copper-text);
}
.reviews-mobile-card__quote {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}
.reviews-mobile-card__meta {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.24px;
  color: var(--text-muted);
}

/* ---- "Worked with us?" dark band — desktop ---- */
.reviews-worked {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
}
.reviews-worked__frame {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  padding: 96px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.reviews-worked__bignum {
  position: absolute;
  left: 1040px;
  top: 30px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 260px;
  line-height: 260px;
  color: var(--text-inverse);
  opacity: 0.05;
  pointer-events: none;
  white-space: nowrap;
}
.reviews-worked__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.reviews-worked__overline { color: var(--accent-on-dark); }
.reviews-worked__heading { color: var(--text-inverse); max-width: 700px; }
.reviews-worked__body { color: var(--text-inverse-muted); }

/* ---- "Worked with us?" dark band — mobile (different, shorter copy) ---- */
.reviews-worked-mobile {
  display: none;
  background: var(--bg-dark);
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 44px 24px;
  text-align: center;
}
.reviews-worked-mobile__rule {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent-flame);
}
.reviews-worked-mobile__overline { color: var(--accent-on-dark); }
.reviews-worked-mobile__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 30px;
  color: var(--text-inverse);
  width: 100%;
  max-width: 342px;
}
.reviews-worked-mobile__cta { width: 100%; max-width: 342px; }

/* ---- "Planning a project?" CTA band — desktop only, not on mobile frame ---- */
.reviews-planning-section { padding: 96px 0; }

/* Between 767px and 1280px: the grouped cards need a flat 2x384px row that
   only fits from 1280px up, and the giant decorative "5.0" numeral is
   positioned at a fixed left:1040px that only clears the frame at that same
   width — overflow:hidden on its ancestor clips the render but still leaves
   the page itself wider than the viewport. Scroll the cards, drop the numeral. */
@media (min-width: 768px) and (max-width: 1279px) {
  .reviews-group { width: 100%; }
  .reviews-group__cards { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; -ms-overflow-style: none; scrollbar-width: none; }
  .reviews-group__cards::-webkit-scrollbar { display: none; }
  .reviews-group__cards .card-testimonial { flex-shrink: 0; scroll-snap-align: start; }

  .reviews-worked__bignum { display: none; }
}

/* ==========================================================================
   Mobile — real designed mobile frame (390px), matched against node 43:160
   ========================================================================== */
@media (max-width: 767px) {
  .reviews-hero { padding: 44px 24px; gap: 14px; }
  .reviews-hero__stars {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
  }
  .reviews-hero__score { font-size: 72px; line-height: 76px; }
  .reviews-hero__heading { font-size: 24px; line-height: 32px; width: 342px; max-width: 100%; }
  .reviews-hero__sub { display: none; }
  .reviews-hero__ctas { width: 100%; }
  .reviews-hero__cta-primary { display: none; }
  .reviews-hero__cta-outline { width: 100%; }

  .reviews-groups-section { display: none; }
  .reviews-mobile-list { display: flex; }

  .reviews-worked { display: none; }
  .reviews-worked-mobile { display: flex; }

  .reviews-planning-section { display: none; }
}

/* ---- contact.html ---- */
/* ==========================================================================
   Contact page — page-specific rules
   Pulled from Figma 7NLLbpuiOo0kNFfUMfF6bG
   Desktop node 32:907 ("Desktop / 12 Contact"), Mobile node 43:205 ("Mobile / 12 Contact")
   ========================================================================== */

/* ---- Hero (desktop) ----
   Text style "Display/L": Fraunces SemiBold 48/56 -0.5, not in shared style.css
   (shared file only has Display/XL 64/72 and Display/M 36/44). */
.contact-hero {
  background: var(--bg-ground-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 80px 0 48px;
}
.contact-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}
.contact-hero__lede {
  max-width: 640px;
  color: var(--text-secondary);
}

/* ---- Split intake (two forms side by side) ---- */
.contact-split {
  display: flex;
  gap: 24px;
  align-items: stretch;
  padding: 24px 0 96px;
}
.contact-form {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 14px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(41,31,20,0.06);
}
.contact-form--light {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}
.contact-form--dark {
  background: var(--bg-dark);
}
/* Builder card eyebrow is accent/gold, not brand/copper */
.contact-form__eyebrow--gold { color: var(--accent-on-dark); }
/* Builder card title + field labels are text/inverse (white on dark) */
.contact-form--dark .contact-form__title { color: var(--text-inverse); }
.contact-form--dark .form-field label { color: var(--text-inverse); }
/* "+ Add photos" note — Label style, brand/copper, not uppercase (not .overline) */
.contact-form__photos {
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.24px;
  color: var(--brand-copper-text);
}

/* ---- NAP (name/address/phone) band ---- */
.contact-nap {
  background: var(--bg-surface);
  padding: 80px 0;
}
.contact-nap__row {
  display: flex;
  align-items: center;
  gap: 48px;
}
.contact-nap__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-nap__line {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
}
.contact-nap__hours {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}
.contact-nap__note {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  max-width: 380px;
}
.contact-map {
  border-radius: 14px;
  overflow: hidden;
  width: 620px;
  height: 340px;
  flex-shrink: 0;
}

/* Between 767px (.contact-desktop hides entirely for the real mobile frame)
   and 1280px (fixed 620px map the row was sized for), the map's flex-shrink:0
   pushes the row wider than the viewport. Stack it instead of shrinking it. */
@media (min-width: 768px) and (max-width: 1279px) {
  .contact-nap__row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .contact-map { width: 100%; height: 300px; }
}

/* ---- Mobile-only content ----
   The real mobile frame (43:205) is not a reflow of the desktop layout: it drops
   the hero lede paragraph and the Phone field, adds a decorative Homeowner/Builder
   toggle, shows only the Homeowner form, and replaces the Builder form with a
   summary note. Desktop and mobile markup are therefore built as two separate
   blocks in the HTML and toggled with display, rather than one DOM reflowed via
   media queries, since the content itself (not just layout) differs. */
.contact-mobile { display: none; }

.contact-mobile__section {
  padding: 44px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-mobile__section--cream { background: var(--bg-ground-alt); }
.contact-mobile__section--white { background: var(--bg-surface); }

.contact-mobile__rule {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent-flame);
}
.contact-mobile__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 38px;
  color: var(--text-primary);
  max-width: 342px;
}
.contact-mobile__toggle {
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
}
.contact-mobile__tab {
  flex: 1 1 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.24px;
}
.contact-mobile__tab--active { background: var(--brand-copper); color: var(--text-inverse); }
.contact-mobile__tab--inactive { background: var(--bg-surface); color: var(--text-primary); }

.contact-mobile__photos {
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.24px;
  color: var(--brand-bronze);
  max-width: 342px;
}
.contact-mobile .btn-primary { width: 100%; max-width: 342px; height: 52px; }
.contact-mobile__note {
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.24px;
  color: var(--text-muted);
  max-width: 342px;
}
.contact-mobile__map { width: 100%; max-width: 342px; height: 200px; border-radius: 10px; overflow: hidden; }

/* ==========================================================================
   Mobile breakpoint
   ========================================================================== */
@media (max-width: 767px) {
  .contact-desktop { display: none; }
  .contact-mobile { display: block; }
}

/* ---- blog.html ---- */
/* ==========================================================================
   Blog Index — page-specific rules
   Rebuilt 1:1 from Figma file 7NLLbpuiOo0kNFfUMfF6bG
   Desktop node 33:992 · Mobile node 43:263
   ========================================================================== */

/* ---- Hero ---- */
.blog-hero {
  background: var(--bg-ground-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 80px 120px 40px;
  text-align: center;
}
.blog-hero__rule { display: none; }
.blog-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.24px;
  color: var(--text-primary);
  max-width: 840px;
}

/* ---- Filter chips ---- */
.blog-filter { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.blog-chip {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.24px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
}
.blog-chip.is-active {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: var(--text-inverse);
}

/* ---- Featured post (desktop) ---- */
.blog-featured {
  background: var(--bg-ground-alt);
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 40px 120px 56px;
}
.blog-featured__img.img-ph { width: 620px; height: 380px; flex-shrink: 0; border-radius: 10px; }
.blog-featured__img--chart {
  width: 620px;
  height: 380px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--bg-ground-alt);
  display: flex;
  align-items: center;
  padding: 24px;
}
.cost-chart--featured { width: 100%; box-shadow: 0 2px 8px rgba(41,31,20,0.06); }
.blog-featured__copy { display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
.blog-featured__eyebrow { color: var(--brand-copper-text); }
.blog-featured__title { max-width: 460px; }
.blog-featured__excerpt { max-width: 460px; }
.blog-featured__link { color: var(--brand-bronze); font-weight: 600; font-size: 14px; line-height: 20px; }
.blog-featured a.blog-featured__link-wrap { text-decoration: none; }

/* ---- Post grid (desktop) ---- */
.blog-grid {
  background: var(--bg-surface);
  padding: 72px 120px 96px;
}
.blog-grid__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.blog-card {
  display: block;
  background: var(--bg-ground-alt);
  border-radius: 10px;
  overflow: hidden;
}
.blog-card__img.img-ph { width: 100%; height: 200px; border-radius: 0; }
.blog-card__stat-value { font-family: var(--font-display); font-weight: 600; font-size: 34px; color: var(--brand-copper-text); }
.blog-card__stat-label { font-size: 12px; line-height: 17px; color: var(--text-secondary); text-align: center; padding: 0 20px; text-transform: none; letter-spacing: 0; }
.blog-card__img--sheen { padding: 0; gap: 0; }
.blog-card__img--sheen .sheen-strip { width: 100%; height: 100%; border-radius: 0; gap: 2px; }
.blog-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 24px 24px; }
.blog-card__cat { color: var(--brand-copper-text); }
.blog-card__title { color: var(--text-primary); }
.blog-card__link { color: var(--brand-bronze); font-weight: 600; font-size: 14px; line-height: 20px; }

/* ---- CTA band wrapper ---- */
.blog-cta { background: var(--bg-ground-alt); }

/* ---- Mobile-only flat list (hidden on desktop) ---- */
.blog-mobile-list { display: none; }

/* ==========================================================================
   Mobile — real designed mobile frame (390px), breakpoint <=767px
   ========================================================================== */
@media (max-width: 767px) {
  .blog-hero {
    align-items: flex-start;
    text-align: left;
    gap: 14px;
    padding: 44px 24px;
  }
  .blog-hero__rule {
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: var(--accent-flame);
  }
  .blog-hero__title {
    font-size: 26px;
    line-height: 34px;
    letter-spacing: normal;
    max-width: 342px;
  }
  .blog-filter { justify-content: flex-start; gap: 8px; }
  .blog-chip { padding: 7px 14px; }
  .blog-chip--desktop-only { display: none; }

  /* Desktop featured block + grid are replaced by the real mobile flat list */
  .blog-featured { display: none; }
  .blog-grid { display: none; }

  .blog-mobile-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    background: var(--bg-surface);
    padding: 44px 24px;
  }
  .blog-mobile-card {
    display: block;
    width: 100%;
    background: var(--bg-ground-alt);
    border-radius: 10px;
    box-shadow: 0 12px 28px -8px rgba(41,31,20,0.09), 0 2px 6px rgba(41,31,20,0.05);
    overflow: hidden;
  }
  .blog-mobile-card__img.img-ph { width: 100%; height: 150px; border-radius: 8px; }
  .blog-mobile-card__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 18px 16px; }
  .blog-mobile-card__cat { color: var(--brand-copper-text); }
  .blog-mobile-card__title { color: var(--text-primary); }

  .blog-cta .cta-band { width: 100%; }
}

/* Between 767px (real mobile flat list) and 1280px (fixed 620px image the
   featured block was sized for), the image's flex-shrink:0 pushes the row
   wider than the viewport. Stack it instead of shrinking the photo. */
@media (min-width: 768px) and (max-width: 1279px) {
  .blog-featured { padding: 40px 32px 56px; flex-direction: column; align-items: flex-start; }
  .blog-featured__img.img-ph,
  .blog-featured__img--chart { width: 100%; height: 280px; }
  .blog-featured__copy,
  .blog-featured__title,
  .blog-featured__excerpt { max-width: none; }
}

/* ---- blog-article.html ---- */
/* ==========================================================================
   Blog Article Template — page-specific styles
   Figma: node 34:1048 (Desktop) / 44:217 (Mobile), file 7NLLbpuiOo0kNFfUMfF6bG
   Everything reused from style.css (.heading-h2/.heading-h3/.body-m/.body-s/
   .label/.faq-row/.img-ph/.btn) is not redefined here — only the new
   long-form article typography/layout that has no shared class.
   ========================================================================== */

/* ---- Head ---- */
.blog-article__head {
  background: var(--bg-ground-alt);
  padding: 72px 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.blog-article__breadcrumb {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.24px;
  color: var(--text-muted);
}
.blog-article__breadcrumb a { color: var(--text-muted); }
.blog-article__breadcrumb a:hover { color: var(--brand-copper-text); }

.blog-article__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  width: 840px;
  max-width: 100%;
}

.blog-article__author { display: flex; align-items: center; gap: 14px; }
.blog-article__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--img-placeholder);
  flex-shrink: 0;
}
.blog-article__author-sub {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.24px;
  color: var(--text-secondary);
}
.blog-article__author-meta--full { display: flex; flex-direction: column; gap: 2px; }
.blog-article__author-meta--compact { display: none; width: 280px; max-width: 100%; }

/* ---- Direct answer ---- */
.blog-article__answer-section {
  background: var(--bg-surface);
  padding: 48px 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.blog-article__answer-box {
  background: var(--brand-copper-tint);
  border-radius: 10px;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 800px;
  max-width: 100%;
}
.blog-article__eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--brand-copper-text);
}
.blog-article__eyebrow--bronze { color: var(--brand-bronze); }
.blog-article__answer-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  width: 736px;
  max-width: 100%;
}

/* ---- Body ---- */
.blog-article__body-section {
  background: var(--bg-surface);
  padding: 24px 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.blog-article__col {
  width: 800px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.blog-article__lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}
.blog-article__h2--short { display: none; }
.blog-article__lead--short { display: none; }

/* ---- Cost table ---- */
.blog-article__table-wrap {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 20px rgba(41,31,20,0.09), 0 2px 3px rgba(41,31,20,0.05);
}
.blog-article__table { width: 100%; border-collapse: collapse; }
.blog-article__table col.scope { width: 60%; }
.blog-article__table col.range { width: 40%; }
.blog-article__table th {
  background: var(--bg-dark);
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  height: 52px;
  padding: 0 20px;
  vertical-align: middle;
}
.blog-article__table td {
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  height: 52px;
  padding: 0 20px;
  vertical-align: middle;
  border-top: 1px solid var(--border-subtle);
}
.blog-article__table tr:first-child td { border-top: none; }

/* ---- Cost-breakdown chart (single-series range bars, brand-copper) ---- */
.cost-chart {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cost-chart__title { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text-primary); }
.cost-chart__rows { display: flex; flex-direction: column; gap: 18px; }
.cost-chart__row {
  display: grid;
  grid-template-columns: 190px 1fr 132px;
  align-items: center;
  gap: 16px;
}
.cost-chart__label { font-size: 14px; line-height: 18px; color: var(--text-secondary); }
.cost-chart__track { position: relative; height: 14px; background: var(--bg-ground-alt); border-radius: 7px; }
.cost-chart__bar { position: absolute; top: 0; height: 14px; background: var(--brand-copper); border-radius: 7px; }
.cost-chart__value { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--brand-copper-text); text-align: right; white-space: nowrap; }
.cost-chart__axis {
  display: grid;
  grid-template-columns: 190px 1fr 132px;
  gap: 16px;
}
.cost-chart__axis-track {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
}
.cost-chart__note { font-size: 12px; line-height: 18px; color: var(--text-muted); }
@media (max-width: 767px) {
  .cost-chart { padding: 20px; gap: 16px; }
  .cost-chart__row { grid-template-columns: 1fr; gap: 6px; }
  .cost-chart__value { text-align: left; }
  .cost-chart__axis { grid-template-columns: 1fr; }
}

/* ---- Info checklist (numbered items — requirements, red flags, benefits) ---- */
.info-checklist { display: flex; flex-direction: column; gap: 18px; padding: 28px 32px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; }
.info-checklist__item { display: flex; gap: 16px; align-items: flex-start; }
.info-checklist__num { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 26px; color: var(--brand-copper-text); flex-shrink: 0; width: 30px; }
.info-checklist__body { display: flex; flex-direction: column; gap: 3px; }
.info-checklist__body h4 { font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 20px; color: var(--text-primary); }
.info-checklist__body p { font-size: 14px; line-height: 20px; color: var(--text-secondary); }

.blog-article__caption {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.24px;
  color: var(--text-muted);
}

/* ---- Sheen strip (paint finish comparison swatches) ---- */
.sheen-strip { display: flex; gap: 3px; border-radius: 10px; overflow: hidden; height: 110px; }
.sheen-strip__swatch { flex: 1; display: flex; align-items: flex-end; padding: 14px; background: var(--brand-copper-tint); }
.sheen-strip__swatch span { font-size: 12px; font-weight: 600; color: var(--text-primary); background: rgba(247,243,236,0.85); padding: 4px 10px; border-radius: 4px; }
.sheen-strip__swatch--eggshell { background: linear-gradient(135deg, var(--brand-copper-tint) 55%, rgba(255,255,255,0.3) 100%); }
.sheen-strip__swatch--satin { background: linear-gradient(135deg, var(--brand-copper-tint) 35%, rgba(255,255,255,0.45) 100%); }
.sheen-strip__swatch--semigloss { background: linear-gradient(135deg, var(--brand-copper-tint) 15%, rgba(255,255,255,0.65) 100%); }
@media (max-width: 767px) { .sheen-strip { flex-direction: column; height: auto; } .sheen-strip__swatch { height: 64px; } }

/* ---- Inline CTA ---- */
.blog-article__inline-cta {
  background: var(--bg-ground-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(41,31,20,0.06);
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.blog-article__inline-cta p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  width: 520px;
  max-width: 100%;
  flex: 1;
}
.blog-article__cta-btn {
  background: var(--brand-copper);
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  padding: 12px 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.blog-article__extra { display: flex; flex-direction: column; gap: 28px; }
.blog-article__extra-item { display: flex; flex-direction: column; gap: 8px; }
.blog-article__faq-a { color: var(--text-secondary); font-size: 16px; line-height: 26px; padding: 0 4px 28px; max-width: 700px; border-bottom: 1px solid var(--border-subtle); }

/* ---- Tail: FAQ + Related (desktop) ---- */
.blog-article__tail {
  background: var(--bg-ground-alt);
  padding: 64px 0 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.blog-article__faq { display: flex; flex-direction: column; width: 100%; max-width: 1100px; }

.blog-article__related { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.blog-article__related-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(41,31,20,0.06);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 386px;
  max-width: 100%;
}
.blog-article__related-card h3 { width: 338px; max-width: 100%; }
.blog-article__related-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--brand-bronze);
}

/* ---- Tail (mobile, compact) ---- */
.blog-article__tail--compact { display: none; }
.blog-article__faq-compact p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

/* ---- Desktop/mobile swap utilities (scoped to this page) ---- */
.blog-article__mobile-only { display: none; }

/* ==========================================================================
   Mobile — real designed mobile frame (390px), node 44:217
   ========================================================================== */
@media (max-width: 767px) {
  .blog-article__head { padding: 44px 24px; align-items: flex-start; gap: 14px; }
  .blog-article__title { font-size: 26px; line-height: 34px; letter-spacing: 0; width: 100%; }

  .blog-article__author { gap: 10px; }
  .blog-article__avatar { width: 36px; height: 36px; }
  .blog-article__author-meta--full { display: none; }
  .blog-article__author-meta--compact { display: block; }

  .blog-article__answer-section { padding: 44px 24px 0; align-items: flex-start; }
  .blog-article__answer-box { padding: 16px 18px; gap: 6px; width: 100%; box-shadow: 0 12px 28px -8px rgba(41,31,20,0.09), 0 2px 6px rgba(41,31,20,0.05); }
  .blog-article__answer-text { font-size: 14px; line-height: 20px; width: 100%; }

  .blog-article__body-section { padding: 0 24px 44px; align-items: flex-start; }
  .blog-article__col { gap: 14px; }
  .blog-article__lead { font-size: 14px; line-height: 20px; }

  .blog-article__h2--full { display: none; }
  .blog-article__h2--short {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: var(--text-primary);
  }
  .blog-article__lead--full { display: none; }
  .blog-article__lead--short { display: block; }

  .blog-article__table-wrap { display: none; }
  .blog-article__table-placeholder { display: flex; }
  .blog-article__caption { display: none; }

  .blog-article__inline-cta { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 18px; }
  .blog-article__inline-cta p { width: 100%; }
  .blog-article__cta-btn { width: 100%; height: 52px; padding: 0; }

  .blog-article__extra { display: none; }

  .blog-article__tail { display: none; }
  .blog-article__tail--compact {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    margin-top: 14px;
  }
}

/* ---- thank-you.html ---- */
/* ==========================================================================
   Thank You page (Homeowner + Builder) — page-specific rules
   Built from Figma node 36:1256 (desktop) / 44:313 (mobile)
   ========================================================================== */

.ty-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  text-align: center;
}
.ty-section--homeowner { background: var(--bg-ground-alt); padding: 100px 24px 80px; }
.ty-section--builder { background: var(--bg-dark); padding: 80px 24px 100px; }

/* Builder variant is hidden by default; the inline toggle script reveals it
   when ?type=builder is present in the URL. */
#thank-you-builder { display: none; }

.ty-check {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.24px;
}
.ty-check--homeowner { color: var(--brand-copper-text); }
.ty-check--builder { color: var(--accent-on-dark); }

.ty-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  max-width: 640px;
}
.ty-heading--homeowner { color: var(--text-primary); }
.ty-heading--homeowner em { font-style: italic; font-weight: 600; color: var(--brand-copper-text); }
.ty-heading--builder { color: var(--text-inverse); }
.ty-heading--builder em { font-style: italic; font-weight: 600; color: var(--accent-on-dark); }

/* Desktop steps (3 cards) */
.ty-steps { display: flex; gap: 24px; }
.ty-step {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(41,31,20,0.06);
  padding: 24px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.ty-step__num { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 32px; color: var(--brand-copper-text); }
.ty-step__title { font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: 28px; color: var(--text-primary); }
.ty-step__text { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--text-secondary); max-width: 292px; }

/* Between 767px (.ty-steps-mobile takes over) and 1280px (flat 1068px for
   3 cards), .ty-steps still renders at full width and overflows. Scroll it. */
@media (min-width: 768px) and (max-width: 1279px) {
  .ty-steps { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; -ms-overflow-style: none; scrollbar-width: none; }
  .ty-steps::-webkit-scrollbar { display: none; }
  .ty-step { flex-shrink: 0; scroll-snap-align: start; }
}

.ty-wait { font-size: 14px; line-height: 20px; color: var(--text-secondary); }

.ty-builder-copy { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--text-inverse-muted); max-width: 620px; }

/* Mobile-only content (condensed copy that genuinely differs from desktop) —
   hidden until the <=767px breakpoint */
.ty-steps-mobile,
.ty-wait-mobile,
.ty-builder-copy-mobile {
  display: none;
}
.ty-steps-mobile p,
.ty-wait-mobile,
.ty-builder-copy-mobile {
  margin: 0;
}

@media (max-width: 767px) {
  .ty-section { padding: 44px 24px; gap: 14px; }

  .ty-check {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: normal;
  }
  .ty-heading { font-size: 24px; line-height: 32px; max-width: 342px; }

  /* Swap desktop structure for the real mobile content */
  .ty-steps, .ty-wait, .ty-builder-copy, .ty-builder-btn { display: none; }

  .ty-steps-mobile {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 100%;
    max-width: 342px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-secondary);
  }
  .ty-wait-mobile {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--brand-bronze);
    max-width: 342px;
  }
  .ty-builder-copy-mobile {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-inverse-muted);
    max-width: 342px;
  }
}

/* ---- 404.html ---- */
/* ==========================================================================
   404 — page-specific styles
   Built from Figma node 36:1191 (Desktop / 16 404) + 44:290 (Mobile / 16 404)
   ========================================================================== */

.notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 140px 0;
  text-align: center;
}

.notfound__code {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 120px;
  line-height: 124px;
  color: var(--brand-copper-text);
}

.notfound__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  color: var(--text-primary);
}

.notfound__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
  width: 560px;
  max-width: 100%;
}

.notfound__links {
  display: flex;
  gap: 24px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}
.notfound__links a {
  color: var(--brand-copper-text);
}
.notfound__links span {
  color: var(--text-muted);
  cursor: default;
}

.notfound__links-mobile {
  display: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--brand-copper-text);
  width: 342px;
  max-width: 100%;
}
.notfound__links-mobile a {
  color: var(--brand-copper-text);
}
.notfound__links-mobile span {
  color: var(--text-muted);
}

@media (max-width: 767px) {
  .notfound {
    padding: 90px 24px;
    gap: 14px;
  }

  .notfound__code {
    font-size: 88px;
    line-height: 92px;
  }

  .notfound__heading {
    font-size: 22px;
    line-height: 30px;
    width: 342px;
    max-width: 100%;
  }

  .notfound__desc {
    display: none;
  }

  .notfound__links {
    display: none;
  }

  .notfound__links-mobile {
    display: block;
  }

  .notfound__cta {
    width: 342px;
    max-width: 100%;
    height: 52px;
  }
}


/* ==========================================================================
   REVISION BATCH — 2026-07-17 (nav Home/Blog, reviews badge, contact split,
   real map embeds, about video hero, home photo hero)
   ========================================================================== */
[hidden] { display: none !important; }

/* Floating reviews badge (every page) */
.reviews-badge {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-dark); color: var(--text-inverse);
  border: 1px solid var(--brand-copper); border-radius: 999px;
  padding: 12px 20px;
  font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 20px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(28,23,18,0.35);
}
.reviews-badge:hover { background: var(--bg-dark-deep); }
.reviews-badge__star { color: var(--accent-on-dark); }
@media (max-width: 767px) {
  .reviews-badge { right: 16px; bottom: 16px; padding: 10px 16px; font-size: 12px; }
}

/* Home hero: photo (was video) — portrait shot, keep the crew in frame */
img.home-hero__img { object-position: center 62%; }
@media (min-width: 1560px) {
  /* Fixed 680px height + cover means the wider the window, the more of the
     image gets cropped off the top at a 62% bias - past ~1560px that starts
     cutting into people's heads. Ease the bias back so heads stay in frame
     on wide monitors too. Verified at 1560/1920/2560px; unaffected below. */
  img.home-hero__img { object-position: center 26%; }
}

/* Real map embeds */
.map-embed { width: 100%; height: 460px; border-radius: 8px; overflow: hidden; box-shadow: 0 12px 32px rgba(28,23,18,0.14); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-embed--on-dark { box-shadow: 0 12px 32px rgba(0,0,0,0.45); max-width: 1104px; margin: 0 auto; }
@media (max-width: 767px) { .map-embed { height: 320px; } }

/* About hero: crew video background */
.about-hero--video { position: relative; overflow: hidden; }
.about-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-hero__veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(28,23,18,0.80), rgba(28,23,18,0.58)); }
.about-hero--video .about-hero__inner { position: relative; z-index: 1; }
.about-hero--video .about-hero__title { color: var(--text-inverse); }
.about-hero--video .trust-bar { color: var(--text-inverse-muted); }

/* Contact: choice screen + typed forms */
.contact-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1104px; margin: 0 auto 64px; padding: 0 24px; }
.contact-choice__card {
  display: flex; flex-direction: column; gap: 10px;
  border-radius: 8px; padding: 40px 36px; text-decoration: none;
  box-shadow: 0 12px 32px rgba(28,23,18,0.12);
}
.contact-choice__card--homeowner { background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.contact-choice__card--builder { background: var(--bg-dark); }
.contact-choice__eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 2px; text-transform: uppercase; color: var(--brand-copper-text); }
.contact-choice__card--builder .contact-choice__eyebrow { color: var(--accent-on-dark); }
.contact-choice__title { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 36px; color: var(--text-primary); }
.contact-choice__card--builder .contact-choice__title { color: var(--text-inverse); }
.contact-choice__body { font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--text-secondary); }
.contact-choice__card--builder .contact-choice__body { color: var(--text-inverse-muted); }
.contact-choice__cta { margin-top: 8px; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--brand-bronze); }
@media (max-width: 767px) { .contact-choice { grid-template-columns: 1fr; margin-bottom: 40px; } }

/* When one form is chosen, centre it */
body.type-homeowner .contact-split, body.type-builder .contact-split { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }

/* blog article photo placeholders (revision batch) */
.blog-article__photo-ph { min-height: 220px; margin: 24px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 16px; }
.blog-article__body-section .before-after { margin: 24px 0; }

/* ============================ BUILDER STRIP MARQUEE ============================ */
.home-builder-strip { padding: 28px 0; border-bottom: 1px solid var(--border-color, #e8e1d6); }
.home-builder-strip__row { display: flex; align-items: center; gap: 40px; }
.home-builder-strip__label { flex: none; font-weight: 600; font-size: 12px; letter-spacing: 0.96px; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.builder-marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
}
.builder-marquee__track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: builder-marquee-scroll 32s linear infinite;
}
.builder-marquee:hover .builder-marquee__track { animation-play-state: paused; }
.builder-marquee__logo {
  height: 34px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.builder-marquee__logo:hover { filter: none; opacity: 1; }
@keyframes builder-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 767px) {
  .home-builder-strip__row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .builder-marquee { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .builder-marquee__track { animation: none; }
  .builder-marquee { overflow-x: auto; }
}

/* ============================ HERO QUOTE CARD (floating, bottom-right of hero) ============================ */
.home-hero-quote {
  position: absolute;
  right: 64px;
  bottom: 104px;
  z-index: 2;
  width: 320px;
  background: rgba(31,26,21,0.55);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  border: 1px solid rgba(247,242,237,0.18);
  border-radius: 20px;
  padding: 28px 26px 26px;
  box-shadow: 0 24px 50px -20px rgba(10,8,6,0.6);
}
.home-hero-quote__eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin: 0 0 8px;
}
.home-hero-quote__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  color: var(--text-inverse);
  margin: 0 0 18px;
}
.home-hero-quote__heading em { font-style: italic; color: var(--accent-on-dark); }
.home-hero-quote__form { display: flex; flex-direction: column; gap: 10px; }
.home-hero-quote__row { display: flex; gap: 10px; }
.home-hero-quote__field { flex: 1; min-width: 0; }
.home-hero-quote__field input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: rgba(247,242,237,0.97);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
}
.home-hero-quote__field input::placeholder { color: var(--text-muted); }
.home-hero-quote__field input:focus { outline: 2px solid var(--accent-on-dark); outline-offset: 2px; }
.home-hero-quote__submit { width: 100%; height: 48px; margin-top: 2px; font-size: 14px; box-shadow: 0 14px 30px -10px rgba(176,112,59,0.5); }

/* Below ~1180px the copy column and the floating card start crowding each other; hide the
   card there and rely on the existing "Get your free quote" button in the hero copy instead. */
@media (max-width: 1180px) {
  .home-hero-quote { display: none; }
}

/* ============================ MOSAIC / WHAT WE DO ============================
   Bento-style grid: 4 columns x 4 rows on desktop, explicit spans per card
   (large 2x2, wide 2x1, tall 1x2, small 1x1) that pack edge-to-edge with plain
   grid-auto-flow — no JS masonry library, so it stays crawlable and fast.
   A shorter "More services" strip of compact cards sits below for the
   secondary directions. Tablet flattens to 2 columns, mobile to 1. */

.home-mosaic__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 20px;
  width: 100%;
}

.mosaic-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  isolation: isolate;
  text-decoration: none;
}
.mosaic-card--large { grid-column: span 2; grid-row: span 2; }
.mosaic-card--wide { grid-column: span 2; grid-row: span 1; }
.mosaic-card--tall { grid-column: span 1; grid-row: span 2; }
.mosaic-card--small { grid-column: span 1; grid-row: span 1; }

.mosaic-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.mosaic-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,23,18,0) 35%, rgba(28,23,18,0.86) 100%);
  transition: background 0.35s ease;
}
.mosaic-card--dark .mosaic-card__veil {
  background: linear-gradient(180deg, rgba(20,16,12,0.35) 0%, rgba(20,16,12,0.92) 100%);
}
.mosaic-card--small .mosaic-card__veil,
.mosaic-card--compact .mosaic-card__veil {
  background: linear-gradient(180deg, rgba(28,23,18,0.05) 40%, rgba(28,23,18,0.88) 100%);
}

.mosaic-card__content {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  color: var(--text-inverse);
}
.mosaic-card--large .mosaic-card__content,
.mosaic-card--wide .mosaic-card__content,
.mosaic-card--tall .mosaic-card__content { padding: 30px; }

.mosaic-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-inverse);
  margin: 0 0 6px;
}
.mosaic-card--large .mosaic-card__title,
.mosaic-card--wide .mosaic-card__title,
.mosaic-card--tall .mosaic-card__title { font-size: 26px; line-height: 1.15; }
.mosaic-card--small .mosaic-card__title,
.mosaic-card--compact .mosaic-card__title { font-size: 17px; line-height: 1.2; }

.mosaic-card__desc {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-inverse-muted);
  max-width: 42ch;
}
.mosaic-card--large .mosaic-card__desc,
.mosaic-card--wide .mosaic-card__desc,
.mosaic-card--tall .mosaic-card__desc { font-size: 14.5px; line-height: 21px; margin-bottom: 16px; }
.mosaic-card--small .mosaic-card__desc,
.mosaic-card--compact .mosaic-card__desc {
  font-size: 12.5px; line-height: 18px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.mosaic-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--accent-on-dark);
  transform: translateY(4px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.mosaic-card__cta svg { transition: transform 0.25s ease; }

/* Hover / focus interaction */
.mosaic-card:hover .mosaic-card__img,
.mosaic-card:focus-visible .mosaic-card__img { transform: scale(1.06); }
.mosaic-card:hover .mosaic-card__veil,
.mosaic-card:focus-visible .mosaic-card__veil { background: linear-gradient(180deg, rgba(28,23,18,0.1) 20%, rgba(28,23,18,0.92) 100%); }
.mosaic-card:hover .mosaic-card__cta,
.mosaic-card:focus-visible .mosaic-card__cta { opacity: 1; transform: translateY(0); }
.mosaic-card:hover .mosaic-card__cta svg,
.mosaic-card:focus-visible .mosaic-card__cta svg { transform: translateX(3px); }
.mosaic-card:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 3px; }

/* A thin bronze top-accent on the two anchor tiles, so the grid reads as
   curated rather than a uniform photo wall. */
.mosaic-card--large::before {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 3px;
  background: var(--brand-copper);
  z-index: 1;
  border-radius: 0 0 3px 3px;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mosaic-card--large:hover::before,
.mosaic-card--large:focus-visible::before { opacity: 1; transform: translateY(0); }

/* ---- More services (secondary strip) ---- */
.home-mosaic__more { width: 100%; margin-top: 20px; }
.home-mosaic__more-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.home-mosaic__more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.mosaic-card--compact { border-radius: 12px; }
.mosaic-card--compact .mosaic-card__content { padding: 16px; }
.home-mosaic__more-grid .mosaic-card--compact { aspect-ratio: 4 / 3; }

.home-mosaic__note {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 22px;
  color: var(--text-secondary);
  margin: 20px 0 0;
}
.home-mosaic__note a { color: var(--brand-copper-text); font-weight: 600; }

/* ---- Tablet: flatten to a clean 2-column grid ---- */
@media (max-width: 1024px) and (min-width: 641px) {
  .home-mosaic__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 230px; }
  .mosaic-card--large,
  .mosaic-card--wide { grid-column: span 2; grid-row: span 1; }
  .mosaic-card--tall,
  .mosaic-card--small { grid-column: span 1; grid-row: span 1; }
  .home-mosaic__more-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Mobile: single column, no chaos, character kept via the veil + accent ---- */
@media (max-width: 640px) {
  .home-mosaic__grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 14px; }
  .mosaic-card { grid-column: span 1 !important; grid-row: span 1 !important; aspect-ratio: 4 / 3; }
  .mosaic-card--large { aspect-ratio: 1 / 1; }
  .mosaic-card--large .mosaic-card__content,
  .mosaic-card--wide .mosaic-card__content,
  .mosaic-card--tall .mosaic-card__content { padding: 22px; }
  .mosaic-card--large .mosaic-card__title,
  .mosaic-card--wide .mosaic-card__title,
  .mosaic-card--tall .mosaic-card__title { font-size: 22px; }
  .mosaic-card__cta { opacity: 1; transform: none; }
  .home-mosaic__more-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* for-builders.html hero: separate desktop / mobile videos of the Alliston
   crew clip (desktop uses a trimmed segment where faces are visible walking
   in; mobile keeps the full outside-to-inside clip, whose length works
   better against the taller mobile portrait framing). Scoped classes only
   used on this page, so this doesn't touch .fb-hero on the other pages that
   reuse the hero pattern. */
.fb-hero__video--mobile { display: none; }
@media (max-width: 767px) {
  .fb-hero__video--desktop { display: none; }
  .fb-hero__video--mobile { display: block; }
}

/* ==== 2026-09-20 final revision ==== */
/* Footer social links (were plain text) */
.footer__social a { color: inherit; text-decoration: none; }
.footer__social a:hover, .footer__social a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
/* Why Enteco: projects link on the dark band */
.home-why__item a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Hero quote form: the budget select matches the inputs */
.home-hero-quote__field select { width: 100%; height: 46px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--border-subtle); background: #fff; color: var(--text-primary); font: inherit; font-size: 15px; }
.home-hero-quote__field select:focus { outline: 2px solid var(--accent-on-dark); outline-offset: 2px; }
/* FAQ accordions (nav.js): collapsed rows keep their divider */
.faq-row--interactive { cursor: pointer; }
.faq-row--interactive:hover .faq-row__q { color: var(--brand-copper-text); }
.faq-row--interactive:focus-visible { outline: 2px solid var(--brand-copper-text); outline-offset: 2px; }
.faq-row--interactive:not(.is-open) { border-bottom: 1px solid var(--border-subtle); padding: 20px 4px; }
/* Project map (Leaflet), replaces the dead My Maps embed */
.project-map { width: 100%; height: 100%; }
.map-embed .leaflet-container { font: inherit; background: #e9e6e1; }
.project-map .leaflet-popup-content { font-size: 14px; line-height: 20px; margin: 10px 14px; }
/* Job-site videos are landscape: show them whole, 2 x 2 */
.projects-videos__row { display: grid; grid-template-columns: repeat(2, minmax(0, 480px)); justify-content: center; gap: 28px 32px; }
.projects-video { width: auto; }
.projects-video__thumb { width: 100%; aspect-ratio: 16 / 9; }
@media (max-width: 767px) { .projects-videos__row { grid-template-columns: minmax(0, 1fr); } }
.projects-video-m__thumb { max-width: 100%; aspect-ratio: 16 / 9; }
/* Fullscreen video always shows the whole frame */
video:fullscreen { object-fit: contain !important; background: #000; }
video:-webkit-full-screen { object-fit: contain !important; background: #000; }

/* ==== 2026-09-21 mobile pass ==== */
/* Home reviews: three-up grid on desktop, arrow carousel below 1024px */
.reviews-carousel { position: relative; }
.reviews-carousel__arrow { display: none; }
@media (min-width: 1024px) {
  .reviews-carousel .home-reviews__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; overflow: visible; width: 100%; }
  .reviews-carousel .home-reviews__cards .card-testimonial { width: auto; }
}
@media (max-width: 1023px) {
  .reviews-carousel .home-reviews__cards { display: flex; width: 100%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0 0 4px; scrollbar-width: none; -ms-overflow-style: none; }
  .reviews-carousel .home-reviews__cards::-webkit-scrollbar { display: none; }
  .reviews-carousel .home-reviews__cards .card-testimonial { flex: 0 0 calc(50% - 8px); width: auto; scroll-snap-align: start; box-sizing: border-box; }
  .reviews-carousel__arrow { display: flex; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background: var(--bg-surface); border: 1px solid var(--border-subtle); box-shadow: 0 8px 20px rgba(41,31,20,0.14); color: var(--text-primary); font-size: 16px; cursor: pointer; }
  .reviews-carousel__arrow:disabled { opacity: 0.35; cursor: default; }
  .reviews-carousel__arrow--prev { left: -14px; }
  .reviews-carousel__arrow--next { right: -14px; }
}
@media (max-width: 767px) {
  .reviews-carousel .home-reviews__cards .card-testimonial { flex-basis: 100%; }
  .reviews-carousel__arrow--prev { left: 4px; }
  .reviews-carousel__arrow--next { right: 4px; }
}

/* Projects: phones get the full portfolio (all projects, six working filters) instead of the cut-down copy */
@media (max-width: 767px) {
  .projects-desktop-view { display: block; }
  .projects-mobile-view { display: none; }
  .projects-hero { padding: 40px 20px 28px; gap: 16px; }
  .projects-hero__title { font-size: 32px; line-height: 38px; }
  .projects-hero .trust-bar { flex-wrap: wrap; justify-content: center; row-gap: 4px; text-align: center; }
  .projects-filter { gap: 8px; padding: 0 12px; }
  .projects-filter__chip { padding: 12px 16px; font-size: 13px; }
  .projects-grid-section { padding: 32px 0 48px; }
  .projects-videos { padding-left: 20px; padding-right: 20px; }
  .projects-cases-section { padding: 56px 0; gap: 24px; }
  .projects-cases-carousel { padding: 0 20px; }
  .projects-cases .projects-case { width: 84vw; max-width: 340px; }
  .projects-cases-arrow { display: none; }
  .projects-map-section, .projects-cta-section { padding-left: 20px; padding-right: 20px; }
}

/* Service-page galleries (Recent work): one before/after pair per screen on phones, arrows stay visible */
@media (max-width: 767px) {
  .industry-gallery-carousel .industry-gallery { gap: 16px; padding: 0 0 4px; }
  .industry-gallery-carousel .industry-gallery .before-after { flex: 0 0 100%; max-width: none; }
  .industry-gallery-carousel .industry-gallery-arrow { display: flex; width: 40px; height: 40px; top: 50%; }
  .industry-gallery-carousel .industry-gallery-arrow--prev { left: 6px; }
  .industry-gallery-carousel .industry-gallery-arrow--next { right: 6px; }
}

/* For Builders: builder logos run like the home page strip, no white cells */
.builder-marquee--card { flex: none; width: 100%; }
.builder-marquee--card .builder-marquee__logo { mix-blend-mode: multiply; }

/* Sticky quote button on phones */
.mobile-cta-bar { display: none; }
@media (max-width: 767px) {
  .mobile-cta-bar { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bg-dark); box-shadow: 0 -8px 24px rgba(28,23,18,0.25); }
  .mobile-cta-bar__reviews { color: var(--text-inverse); font-weight: 600; font-size: 14px; line-height: 20px; white-space: nowrap; text-decoration: none; padding: 12px 4px; }
  .mobile-cta-bar__reviews span { color: var(--accent-on-dark); }
  .mobile-cta-bar__btn { flex: 1; min-height: 48px; padding: 14px 16px; font-size: 16px; }
  body.has-mobile-cta { padding-bottom: 76px; }
  body.has-mobile-cta .reviews-badge { display: none; }
}

/* 2026-09-21 fixes after visual check */
.reviews-carousel { width: 100%; }
.fb-proof__builders { min-width: 0; }
.fb-proof__builders .builder-marquee--card { max-width: 100%; overflow: hidden; }
@media (max-width: 767px) {
  .projects-hero .trust-bar { flex-direction: column; gap: 2px; }
  .projects-hero .trust-bar .sep { display: none; }
  .industry-gallery-carousel .industry-gallery-arrow { top: 150px; }
}