/* ===================== */
/* BRAND COLORS / VARIABLES */
/* ===================== */
:root {
  --charcoal: #2D2D2E;
  --soft-gold: #BFA987;
  --deep-forest: #36493F;
  --slate-teal: #313F48;
  --warm-clay: #8A6155;
  --maple-red: #C22F38;
  --ivory: #F7F2EA;
  --white: #FFFFFF;
  --muted: #B8B2A8;
  --text: #191919;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.22);
}

.audience-pill-btn {
  min-width: 340px;
  min-height: 78px;
  border-radius: 8px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
  background: rgba(191,169,135,.92);
  color: var(--white);
  border: 1.5px solid var(--soft-gold);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 35px rgba(0,0,0,.22);
}

.audience-pill-btn:hover {
  background: transparent;
  color: var(--soft-gold);
  border-color: var(--soft-gold);
  transform: translateY(-3px);
}

.builders-btn {
  background: var(--soft-gold) !important;
  color: var(--charcoal) !important;
  border: 1.5px solid var(--soft-gold) !important;
}

.clients-btn {
  background: transparent !important;
  color: var(--soft-gold) !important;
  border: 1.5px solid var(--soft-gold) !important;
}

/* Legacy custom hamburger — kept for the PHP fallback nav only.
   The real responsive menu used in production is the WP core
   wp:navigation block, styled at the bottom of this file under
   "RESPONSIVE OVERHAUL". Hidden by default. */
.mobile-menu-btn {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  z-index: 70;
}
.mobile-menu-btn span {
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: .25s ease;
}
.mobile-menu-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===================== */
/* GLOBAL RESET */
/* ===================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: var(--ivory);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--soft-gold);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 42px;
  height: 1px;
  background: var(--soft-gold);
}

/* Centered eyebrow variation for editorial sections with balanced decorative lines */
.eyebrow--center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.eyebrow--center::before,
.eyebrow--center::after {
  content: '';
  display: inline-block;
  width: 42px;
  height: 1px;
  background: rgba(191,169,135,.64);
}

/* Centered editorial heading with balanced lines (subtle) */
.editorial-centered {
  text-align: center;
  max-width: 920px;
  margin: 0 auto 18px;
}
.editorial-centered .eyebrow {
  justify-content: center;
}
.editorial-centered .eyebrow::before,
.editorial-centered .eyebrow::after {
  content: '';
  display: inline-block;
  width: 46px;
  height: 1px;
  background: rgba(191,169,135,.36);
  margin: 0 12px;
  vertical-align: middle;
}

.about-overview-copy--centered { max-width: 780px; margin: 0 auto; text-align: center; }
.about-overview-copy { padding: 0; }

/* Remove boxed styling for editorial/company sections */
.about-overview-section .inner-content-card,
.about-overview-section .about-overview-copy.inner-content-card,
.about-overview-section .about-overview-copy .inner-content-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Founding team header centering */
.about-leadership-section .about-section-header { text-align: center; max-width: 860px; margin: 0 auto 22px; }
.about-leadership-section .about-section-header .eyebrow::before,
.about-leadership-section .about-section-header .eyebrow::after {
  content: '';
  display: inline-block;
  width: 42px;
  height: 1px;
  background: rgba(191,169,135,.64);
  margin: 0 10px;
}

/* Make the closing line centered and match editorial rhythm */
.about-closing-line { text-align: center; margin-top: 22px; }

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 0.98;
  letter-spacing: -1px;
}
/* "Our Process" section title on every service page (.sales-process-content
   wraps the title + steps). The base 0.98 line-height clipped ascenders
   and descenders together — open it up so multi-line titles breathe. */
.sales-process-content .section-title,
.sales-process-section .section-title {
  line-height: 1.12;
}
.audience-header .section-title,
.services .section-title,
.intro .section-title,
.why .section-title,
.gallery .section-title,
.testimonials .section-title {
  margin-bottom: 10px;
}

.section-copy {
  color: rgba(255,255,255,0.68);
  font-size: 17px;
  line-height: 1.8;
  max-width: 650px;
}

.btn,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .3px;
  transition: .25s ease;
  background: var(--soft-gold);
  color: var(--charcoal);
}
.btn:hover,
.btn-primary:hover {
  background: #d1ba93;
  transform: translateY(-2px);
}
.btn-outline {
  border: 1px solid rgba(255,255,255,.35);
  color: var(--white);
  background: transparent;
}
.btn-outline:hover {
  border-color: var(--soft-gold);
  color: var(--soft-gold);
  background: transparent;
  transform: translateY(-2px);
}

/* ===================== */
/* NAVIGATION */
/* ===================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 8px 0;
  transition: .3s ease;
}
.nav.scrolled {
  background: rgba(45,45,46,.86);
  box-shadow: 0 10px 35px rgba(0,0,0,.16);
  padding: 4px 0;
}
/* Non-home pages at top: very light scrim (matches home feel as much as
   possible while keeping nav text readable on light hero bgs). On scroll
   the .nav.scrolled rule above transitions it to the full solid tone. */
body:not(.home) .nav:not(.scrolled),
body.error404 .nav:not(.scrolled) {
  background: rgba(45,45,46,.22);
}

/* CRITICAL FIX: backdrop-filter lives on .nav::before NOT on .nav itself.
   `backdrop-filter` creates a containing block for fixed-positioned
   descendants — applying it directly to .nav was trapping the mobile
   menu overlay inside the 80px-tall nav bar (the menu would render
   "cut off" mid-page on every non-home page where the nav had a blur
   from the moment of page load). Putting the blur on a pseudo-element
   keeps the visual effect without breaking the responsive menu. */
.nav { position: fixed; }
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events: none;
}
body:not(.home) .nav:not(.scrolled)::before,
body.error404 .nav:not(.scrolled)::before {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Nav container ~70px wider than the standard 1180px page container, so the
   140px logo and the 7-item horizontal menu have a bit more breathing room.
   Hero/page content rails stay at their original 1180px width. */
.nav > .container.nav-inner,
header.site-header .nav .nav-inner.container {
  width: min(1300px, calc(100% - 40px)) !important;
}
.nav .logo,
.nav .wp-block-site-logo {
  padding: 10px 0 !important;
  box-sizing: content-box;
}
.nav .logo img,
.nav .logo .custom-logo,
.nav .wp-block-site-logo img {
  height: 140px !important;   /* desktop logo size — paired with 10px nav padding */
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
  display: block;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
}
.nav-links a {
  color: rgba(255,255,255,.86);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
}
.nav-links a:hover { color: var(--soft-gold); }
.nav-item-has-dropdown {
  position: relative;
}
.nav-services-link::after {
  content: '⌄';
  display: inline-block;
  margin-left: 7px;
  color: var(--soft-gold);
  font-size: 11px;
  transform: translateY(-1px);
}
.nav-submenu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  min-width: 286px;
  padding: 14px;
  margin: 0;
  list-style: none;
  border: 1px solid rgba(191,169,135,.22);
  border-radius: 18px;
  background: rgba(29,29,30,.96);
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.nav-submenu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}
.nav-item-has-dropdown:hover .nav-submenu,
.nav-item-has-dropdown:focus-within .nav-submenu,
.nav-item-has-dropdown.is-open .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-submenu a {
  display: block;
  padding: 11px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,.76);
  font-size: 12px;
  letter-spacing: .7px;
  text-transform: none;
}
.nav-submenu a:hover,
.nav-submenu a:focus-visible {
  background: rgba(191,169,135,.12);
  color: var(--soft-gold);
  outline: none;
}
/* Scoped to `a.nav-cta` (fallback markup only). See block-nav rule below. */
a.nav-cta {
  padding: 12px 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid var(--white, #ffffff);
  color: var(--white, #ffffff) !important;
}

/* ===================== */
/* HERO SECTION WITH WORKING BACKGROUND SLIDER */
/* ===================== */
.hero {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  padding: 120px 0 70px;
  background: var(--charcoal);
  color: var(--white);
  overflow: hidden;
}

.hero-bg-slider {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.1s ease, transform 4s ease;
}
.hero-bg-slide.active {
  opacity: 1;
  /* FAST zoom — slides rotate every 2.4s via JS, so each slide is only
     active briefly. A 4.5s zoom (scale 1.0 → 1.08) makes the motion
     clearly visible during the slide's active window. */
  animation: ce-hero-slide-zoom 4.5s ease-out forwards;
}
@keyframes ce-hero-slide-zoom {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-slide.active {
    animation: none !important;
    transform: scale(1) !important;
  }
}
.hero-bg-slider::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(45,45,46,.94) 0%, rgba(45,45,46,.78) 38%, rgba(45,45,46,.28) 100%);
  z-index: 2;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 20%, rgba(191,169,135,.28), transparent 34%);
  z-index: -1;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 48px;
}
.hero-content { position: relative; z-index: 3; }
.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(48px, 7vw, 88px);
  line-height: .92;
  letter-spacing: -2px;
  margin-bottom: 24px;
  max-width: 740px;
}
.hero h1 span { color: var(--soft-gold); }
.hero p {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.75;
  color: rgba(255,255,255,.74);
  max-width: 650px;
  margin-bottom: 36px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-card {
  position: relative;
  z-index: 3;
  align-self: end;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  padding: 18px;
  box-shadow: var(--shadow);
}
.hero-card img {
  height: 420px;
  width: 100%;
  object-fit: cover;
  border-radius: 18px;
}
.hero-card__link {
  display: block;
  border-radius: 18px;
  overflow: hidden;
}
.hero-card__link img {
  transition: transform .45s ease, filter .45s ease;
}
.hero-card__link:hover img,
.hero-card__link:focus-visible img {
  filter: saturate(1.06) contrast(1.04);
  transform: scale(1.025);
}
.hero-card-caption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 4px 4px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.5;
}
.hero-card-caption strong { color: var(--soft-gold); display: block; font-size: 22px; }

/* ===================== */
/* TRUST STRIP */
/* ===================== */
.proof-strip {
  background: var(--deep-forest);
  color: var(--white);
  padding: 28px 0;
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.proof-item {
  border-left: 1px solid rgba(191,169,135,.45);
  padding-left: 18px;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,.82);
}
.proof-item span { color: var(--soft-gold); display: block; margin-bottom: 4px; }

/* ===================== */
/* AUDIENCE SELECTOR */
/* ===================== */
.audience-section {
  padding: 78px 0;
  background: var(--ivory);
}
.audience-header {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .62fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  margin-bottom: 34px;
}
.audience-header .section-title { color: var(--charcoal); }
.audience-header-main {
  max-width: 760px;
}
.audience-info-box {
  border: 1px solid rgba(191,169,135,.72);
  border-left: 4px solid var(--soft-gold);
  border-radius: 20px;
  background: rgba(255,255,255,.48);
  box-shadow: 0 18px 48px rgba(45,45,46,.08);
  padding: 24px 26px;
}
.audience-info-box span {
  display: block;
  margin-bottom: 9px;
  color: var(--deep-forest);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.audience-info-box p {
  color: #635d55;
  font-size: 15px;
  line-height: 1.75;
}
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(45,45,46,.14);
  background: var(--white);
}
.audience-card {
  padding: clamp(28px, 4vw, 44px);
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: .35s ease;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
}
.audience-card:hover,
.audience-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
  outline: none;
}
.audience-card.builders-card {
  background: var(--deep-forest);
  color: var(--white);
}
.audience-card.clients-card {
  background: var(--white);
  color: var(--charcoal);
}
.audience-card.active.builders-card {
  background: linear-gradient(135deg, var(--deep-forest), var(--slate-teal));
  border-color: var(--soft-gold);
}
.audience-card.builders-card:hover,
.audience-card.builders-card:focus-visible,
.audience-card.builders-card.active:hover,
.audience-card.builders-card.active:focus-visible {
  background: linear-gradient(135deg, #1f1f1f, var(--charcoal));
  color: var(--white);
  border-color: var(--soft-gold);
}
.audience-card.clients-card:hover,
.audience-card.clients-card:focus-visible,
.audience-card.clients-card.active,
.audience-card.clients-card.active:hover,
.audience-card.clients-card.active:focus-visible {
  background: var(--charcoal);
  color: var(--white);
  border-color: var(--soft-gold);
}
.audience-card.builders-card:hover .audience-label,
.audience-card.builders-card:focus-visible .audience-label,
.audience-card.builders-card:hover h3,
.audience-card.builders-card:focus-visible h3,
.audience-card.clients-card:hover .audience-label,
.audience-card.clients-card:focus-visible .audience-label,
.audience-card.clients-card.active .audience-label {
  color: var(--soft-gold);
}
.audience-card.builders-card:hover p,
.audience-card.builders-card:focus-visible p,
.audience-card.builders-card:hover li,
.audience-card.builders-card:focus-visible li,
.audience-card.clients-card:hover p,
.audience-card.clients-card:focus-visible p,
.audience-card.clients-card:hover li,
.audience-card.clients-card:focus-visible li,
.audience-card.clients-card.active p,
.audience-card.clients-card.active li,
.audience-card.clients-card.active h3 {
  color: rgba(255,255,255,.78);
}
.audience-card:hover .audience-icon,
.audience-card:focus-visible .audience-icon {
  background: rgba(191,169,135,0.20);
  color: var(--soft-gold);
}
.audience-card:hover .audience-btn,
.audience-card:focus-visible .audience-btn,
.audience-card.clients-card.active .audience-btn {
  background: var(--soft-gold);
  color: var(--charcoal);
  border-color: var(--soft-gold);
}
.audience-icon {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  background: rgba(191,169,135,.18);
  color: var(--soft-gold);
}
.clients-card .audience-icon {
  background: #f5ebd8;
  color: var(--deep-forest);
}
.audience-icon svg { width: 30px; height: 30px; }
.audience-label {
  color: var(--soft-gold);
  font-size: clamp(21px, 2vw, 29px);
  line-height: 1.05;
  letter-spacing: -.3px;
  text-transform: uppercase;
  font-weight: 900;
  margin-bottom: 12px;
}
.clients-card .audience-label { color: var(--deep-forest); }
.audience-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.08;
  margin-bottom: 16px;
}
.audience-card p {
  color: rgba(255,255,255,.70);
  font-size: 15px;
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 22px;
}
.clients-card p { color: #657284; }
.audience-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin-bottom: 28px;
}
.audience-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 15px;
  color: rgba(255,255,255,.82);
}
.clients-card .audience-list li { color: #657284; }
.audience-list li::before {
  content: '✓';
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  color: var(--soft-gold);
  font-size: 14px;
  flex: 0 0 auto;
}
.clients-card .audience-list li::before { color: var(--deep-forest); }
.audience-card:hover .audience-list li::before,
.audience-card:focus-visible .audience-list li::before,
.audience-card.clients-card.active .audience-list li::before { color: var(--soft-gold); }
.audience-btn {
  width: fit-content;
  min-width: 250px;
  border-radius: 6px;
}
.clients-card .audience-btn {
  background: transparent;
  border: 2px solid var(--deep-forest);
  color: var(--deep-forest);
}
.audience-note {
  margin-top: 22px;
  color: #6a625a;
  font-size: 14px;
  line-height: 1.6;
}

/* ===================== */
/* INTRO */
/* ===================== */
.intro {
  background: var(--ivory);
  padding: 110px 0;
}
.intro-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.intro .section-title { color: var(--charcoal); }
.intro p {
  font-size: 18px;
  color: #5a554e;
  line-height: 1.85;
  margin-top: 24px;
}
.intro-image {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(45,45,46,.2);
  position: relative;
}
.intro-image img {
  height: 560px;
  width: 100%;
  object-fit: cover;
  transition: transform .55s ease, filter .55s ease;
}

/* Slider mode — multiple stacked photos cross-fading every 4s.
   Used in the Who We Are intro section on the homepage. */
.intro-image--slider {
  height: 560px;
}
.intro-image--slider .intro-image__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1), transform 8s ease-out;
  z-index: 1;
}
.intro-image--slider .intro-image__slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}
@media (max-width: 720px) {
  .intro-image--slider { height: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-image--slider .intro-image__slide { transition: opacity .3s ease, transform 0s; }
}
.intro-image::before {
  content: '';
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(191,169,135,0);
  border-radius: 20px;
  z-index: 2;
  transform: scale(.96);
  transition: border-color .35s ease, transform .35s ease;
  pointer-events: none;
}
.intro-image:hover::before {
  border-color: rgba(191,169,135,.86);
  transform: scale(1);
}
.intro-image:hover img,
.intro-image:focus-visible img {
  filter: saturate(1.05) contrast(1.03);
  transform: scale(1.018);
}
.intro-image::after {
  content: 'Canada Elite Build Group';
  position: absolute;
  left: 28px;
  bottom: 28px;
  background: rgba(45,45,46,.86);
  color: var(--soft-gold);
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .6px;
  font-size: 13px;
  text-transform: uppercase;
}

/* ===================== */
/* SERVICES */
/* ===================== */
.services {
  background: linear-gradient(135deg, var(--deep-forest), #26382f);
  color: var(--white);
  padding: 86px 0 94px;
  position: relative;
  overflow: hidden;
}
.services::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 12% 12%, rgba(191,169,135,.16), transparent 32%);
  pointer-events: none;
}
.services-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  margin-bottom: 42px;
}
.services .section-title {
  max-width: 670px;
  font-size: clamp(30px, 4vw, 50px);
}
.services .section-copy {
  max-width: 510px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,.58);
}
.services-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(191,169,135,.16);
  border-left: 0;
  border-right: 0;
}
.service-tile {
  min-height: 188px;
  padding: clamp(26px, 3.2vw, 38px) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  position: relative;
  text-decoration: none;
  transition: background .28s ease, transform .28s ease;
}
.service-tile:hover,
.service-tile:focus-visible {
  background: rgba(255,255,255,.035);
  transform: translateY(-2px);
  outline: none;
}
.service-tile:not(:nth-child(3n))::after {
  content: '';
  position: absolute;
  top: 26px;
  right: 0;
  bottom: 26px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(191,169,135,.32), transparent);
}
.service-tile:nth-child(-n+3)::before {
  content: '';
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(191,169,135,.32), transparent);
}
.service-icon-badge {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: var(--soft-gold);
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
  transition: transform .28s ease, box-shadow .28s ease;
}
.service-tile:hover .service-icon-badge,
.service-tile:focus-visible .service-icon-badge {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0,0,0,.24);
}
.service-icon-badge img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(24%) sepia(18%) saturate(616%) hue-rotate(91deg) brightness(93%) contrast(89%);
}
.service-tile h3 {
  max-width: 220px;
  color: var(--soft-gold);
  font-family: 'Inter', sans-serif;
  font-size: clamp(13px, 1.35vw, 17px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: color .28s ease;
}
.service-tile:hover h3,
.service-tile:focus-visible h3 {
  color: #d8c39d;
}
.service-tile__cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  transition: color .28s ease, transform .28s ease;
}
.service-tile__cue::after {
  content: '→';
  color: var(--soft-gold);
  font-size: 13px;
  line-height: 1;
}
.service-tile:hover .service-tile__cue,
.service-tile:focus-visible .service-tile__cue {
  color: var(--white);
  transform: translateY(1px);
}

/* ===================== */
/* TESTIMONIALS CAROUSEL */
/* ===================== */
.testimonials {
  background: var(--charcoal);
  color: var(--white);
  padding: 96px 0 104px;
  overflow: hidden;
}
.testimonials-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 42px;
}
.testimonial-tabs {
  display: flex;
  gap: 10px;
  background: rgba(255,255,255,.08);
  padding: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
}
.testimonial-tab {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: transparent;
  color: rgba(255,255,255,.68);
  font-weight: 900;
  cursor: pointer;
  transition: .25s ease;
}
.testimonial-tab.active {
  background: var(--soft-gold);
  color: var(--charcoal);
}
.testimonial-track-wrap {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.testimonial-panel {
  display: none;
}
.testimonial-panel.active {
  display: block;
}
.testimonial-track {
  display: flex;
  width: max-content;
  animation: testimonialLoop 42s linear infinite;
  will-change: transform;
}
.testimonial-track--static {
  width: auto;
  justify-content: center;
  animation: none;
}
.testimonial-track--static .testimonial-track__group {
  flex-wrap: wrap;
  justify-content: center;
  padding-right: 0;
}
.testimonial-track__group {
  display: flex;
  gap: 22px;
  padding-right: 22px;
}
.testimonial-track.paused { animation-play-state: paused; }
@keyframes testimonialLoop {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-33.3333%, 0, 0); }
}
.testimonial-card {
  width: min(430px, 85vw);
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  padding: 30px;
  flex: 0 0 auto;
}
.testimonial-card__image {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid rgba(191,169,135,.42);
}
.testimonial-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonial-rating {
  color: var(--soft-gold);
  letter-spacing: 2px;
  margin-bottom: 14px;
  font-size: 14px;
}
.testimonial-card .quote {
  font-family: 'Playfair Display', serif;
  font-size: 25px;
  line-height: 1.2;
  margin-bottom: 22px;
  color: var(--white);
  margin-left: 0;
  margin-right: 0;
}
.testimonial-card p {
  color: rgba(255,255,255,.66);
  line-height: 1.75;
  font-size: 15px;
  margin-bottom: 26px;
}
.testimonial-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 18px;
}
.testimonial-meta strong { display: block; color: var(--soft-gold); margin-bottom: 3px; }
.testimonial-meta span { color: rgba(255,255,255,.52); font-size: 13px; }
.testimonial-badge {
  color: var(--charcoal);
  background: var(--soft-gold);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 900;
  white-space: nowrap;
}

/* ===================== */
/* PROCESS */
/* ===================== */
.process {
  padding: 110px 0;
  background: var(--ivory);
}
.process-grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 60px;
  align-items: center;
}
.process-visual {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(45,45,46,.18);
}
.process-visual img { height: 620px; width: 100%; object-fit: cover; }
.process .section-title { color: var(--charcoal); margin-bottom: 24px; }
.process-copy {
  color: #5a554e;
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 34px;
}
.steps {
  display: grid;
  gap: 16px;
  counter-reset: step;
}
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px;
  background: var(--white);
  border-radius: 18px;
  border: 1px solid rgba(191,169,135,.28);
}
.step::before {
  content: '0' counter(step);
  height: 58px;
  border-radius: 16px;
  background: var(--charcoal);
  color: var(--soft-gold);
  display: grid;
  place-items: center;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
}
.step h4 { font-size: 18px; margin-bottom: 5px; }
.step p { color: #686058; line-height: 1.65; font-size: 14px; }

/* ===================== */
/* WHY CHOOSE US */
/* ===================== */
.why {
  background: linear-gradient(135deg, var(--deep-forest), var(--slate-teal));
  color: var(--white);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}
.why::before {
  content: '';
  position: absolute;
  right: -180px;
  top: -180px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(191,169,135,.22);
  border-radius: 50%;
}
.why::after {
  content: '';
  position: absolute;
  left: -160px;
  bottom: -190px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(191,169,135,.18), transparent 62%);
  animation: whyGlow 8s ease-in-out infinite alternate;
}
@keyframes whyGlow {
  from { opacity: .35; transform: translate3d(0, 0, 0) scale(.96); }
  to { opacity: .85; transform: translate3d(34px, -18px, 0) scale(1.05); }
}
.why-grid {
  position: relative;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 50px;
  align-items: start;
}
.why-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.why-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 28px;
  min-height: 190px;
}
.why-card strong {
  display: block;
  color: var(--soft-gold);
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  margin-bottom: 14px;
}
.why-card h4 { margin-bottom: 10px; font-size: 17px; }
.why-card p { color: rgba(255,255,255,.64); line-height: 1.65; font-size: 14px; }
.why-copy { margin-top: 24px; }

/* ===================== */
/* PROJECT GALLERY */
/* ===================== */
.gallery {
  padding: 104px 0 112px;
  background: var(--ivory);
}
.gallery-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 40px;
}
.gallery .section-title { color: var(--charcoal); }
.gallery-intro {
  max-width: 460px;
  color: #625b53;
  line-height: 1.75;
}

/* ============================================================================ */
/* PORTFOLIO HEADERS — "Selected Cabinetry Work" + "Subdivision Work" are       */
/* internally one Portfolio section split in two blocks. Each block uses a      */
/* stacked layout: eyebrow → big serif title → body paragraph (left-aligned,    */
/* full row width). Title size matches every other section title on the page    */
/* (Mission, Materials, Why Us): clamp(34px, 5vw, 62px).                       */
/* ============================================================================ */
.portfolio-header,
.portfolio-subheader {
  display: block;
  margin: 0 0 40px;
}
/* =========================================================================
   PROJECTS PAGE — full-bleed editorial portfolio. Cinematic hero, alternating
   layouts per service, lightbox-driven photo cards. Designed to feel premium
   and intentional — every section gets its own personality.
   ========================================================================= */
.projects-page { overflow-x: hidden; }

/* HERO ---------------------------------------------------------- */
.projects-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* FIXED height — never changes when the BG photo rotates. The photos use
     background-size: cover so they expand horizontally as needed but the
     hero box itself is locked vertically. */
  height: 78vh;
  min-height: 78vh;
  max-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  padding: 140px 24px 90px;
  box-sizing: border-box;
}
.projects-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transform: scale(1.04);
  animation: ce-hero-bg-kenburns 28s ease-in-out infinite alternate;
}
/* Rotating BG slider — uses the global .hero-bg-slider mechanism. */
.projects-hero__slider {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden;
}
.projects-hero__slider .hero-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.projects-hero .projects-hero__scrim { z-index: 1; }
.projects-hero .projects-hero__inner  { z-index: 2; position: relative; }
.projects-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.45) 40%,
    rgba(0,0,0,0.70) 100%);
}
.projects-hero__inner {
  position: relative; z-index: 2;
  max-width: 920px;
}
.projects-hero__inner .eyebrow--lines {
  color: var(--soft-gold, #BFA987) !important;
  margin-bottom: 18px;
  justify-content: center;
}
.projects-hero__inner .eyebrow--lines::before,
.projects-hero__inner .eyebrow--lines::after {
  background: var(--soft-gold, #BFA987);
}
.projects-hero__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(40px, 6.2vw, 80px);
  line-height: 0.98;
  letter-spacing: -1.5px;
  margin: 0 0 22px;
  color: #fff;
}
.projects-hero__title-accent { color: var(--soft-gold, #BFA987); }
.projects-hero__intro {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
  color: rgba(255,255,255,0.88);
  max-width: 720px;
  margin: 0 auto 28px;
}
.projects-hero__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}
.projects-hero__nav-pill {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.projects-hero__nav-pill:hover,
.projects-hero__nav-pill:focus-visible {
  background: var(--soft-gold, #BFA987);
  border-color: var(--soft-gold, #BFA987);
  color: var(--charcoal, #2D2D2E);
  transform: translateY(-2px);
  outline: none;
}

/* SERVICE SECTION ---------------------------------------------- */
.projects-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 90px 0 110px;
  position: relative;
}
.projects-section--light { background: var(--ivory, #F7F2EA); color: var(--charcoal, #2D2D2E); }
.projects-section--dark {
  background: linear-gradient(180deg, var(--charcoal, #2D2D2E) 0%, #1f1f20 100%);
  color: #fff;
}
.projects-section__header {
  max-width: 1180px;
  margin: 0 auto 50px;
  padding: 0 32px;
}
.projects-section__header-inner {
  max-width: 760px;
}
.projects-section--dark .projects-section__header-inner .eyebrow--lines { color: var(--soft-gold, #BFA987) !important; }
.projects-section--dark .projects-section__header-inner .eyebrow--lines::before,
.projects-section--dark .projects-section__header-inner .eyebrow--lines::after { background: var(--soft-gold, #BFA987); }
.projects-section--light .projects-section__header-inner .eyebrow--lines { color: var(--soft-gold, #BFA987) !important; }
.projects-section__header .eyebrow--lines { justify-content: flex-start; margin-bottom: 14px; }
.projects-section__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.02;
  letter-spacing: -1px;
  margin: 0 0 14px;
}
.projects-section--dark .projects-section__title { color: #fff; }
.projects-section__intro {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.7;
  margin: 0 0 22px;
  max-width: 640px;
}
.projects-section--dark .projects-section__intro { color: rgba(255,255,255,0.82); }
.projects-section__service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--soft-gold, #BFA987);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 3px;
  transition: gap 0.2s ease, color 0.2s ease;
}
.projects-section__service-link:hover { gap: 14px; color: var(--charcoal, #2D2D2E); }
.projects-section--dark .projects-section__service-link:hover { color: #fff; }
.projects-section__service-link svg { width: 16px; height: 16px; }

/* GRID PATTERNS ------------------------------------------------ */
.projects-grid {
  display: grid;
  gap: 14px;
  padding: 0 24px;
  max-width: 1640px;
  margin: 0 auto;
}

/* LAYOUT 1: bento-5 — one huge tile + 4 smaller in a balanced grid */
.projects-grid--bento-5 {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 320px 280px;
  grid-template-areas:
    "a a b c"
    "a a d e";
}
.projects-grid--bento-5 .projects-tile--1 { grid-area: a; }
.projects-grid--bento-5 .projects-tile--2 { grid-area: b; }
.projects-grid--bento-5 .projects-tile--3 { grid-area: c; }
.projects-grid--bento-5 .projects-tile--4 { grid-area: d; }
.projects-grid--bento-5 .projects-tile--5 { grid-area: e; }

/* LAYOUT 2: spread-4 — magazine spread, 1 tall + 1 wide + 2 small */
.projects-grid--spread-4 {
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  grid-template-rows: 360px 280px;
  grid-template-areas:
    "a b b"
    "a c d";
}
.projects-grid--spread-4 .projects-tile--1 { grid-area: a; }
.projects-grid--spread-4 .projects-tile--2 { grid-area: b; }
.projects-grid--spread-4 .projects-tile--3 { grid-area: c; }
.projects-grid--spread-4 .projects-tile--4 { grid-area: d; }

/* LAYOUT 3: mosaic-5 — asymmetric mosaic, varied weights */
.projects-grid--mosaic-5 {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 280px 280px;
  grid-template-areas:
    "a a b b c c"
    "d d d e e e";
}
.projects-grid--mosaic-5 .projects-tile--1 { grid-area: a; }
.projects-grid--mosaic-5 .projects-tile--2 { grid-area: b; }
.projects-grid--mosaic-5 .projects-tile--3 { grid-area: c; }
.projects-grid--mosaic-5 .projects-tile--4 { grid-area: d; }
.projects-grid--mosaic-5 .projects-tile--5 { grid-area: e; }

/* LAYOUT 4: wide-pair — two big cinematic wide tiles */
.projects-grid--wide-pair {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 420px;
}

/* LAYOUT 5: triple-portrait — 3 equal portrait cards */
.projects-grid--triple-portrait {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 480px;
}

/* TILES ------------------------------------------------------- */
.projects-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  background: #1a1a1a;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(.25,.85,.35,1), opacity 0.6s ease, box-shadow 0.35s ease;
}
.projects-section.is-revealed .projects-tile,
.projects-tile { /* fallback: always visible */ }
/* JS adds .is-revealed via IntersectionObserver; fallback animation
   triggers without it via @scroll if supported, otherwise tiles fade in
   on load. */
.projects-page .projects-tile { opacity: 1; transform: none; }

.projects-tile__media {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 0.7s cubic-bezier(.2,.85,.3,1), filter 0.5s ease;
  z-index: 1;
}
.projects-tile__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.65) 100%);
  z-index: 2;
  opacity: 0.85;
  transition: opacity 0.35s ease, background 0.35s ease;
}
.projects-tile__caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  transform: translateY(8px);
  opacity: 0.92;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.projects-tile__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.15;
  letter-spacing: -0.3px;
  color: #fff;
  max-width: 80%;
}
.projects-tile__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.32);
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.projects-tile__cta svg { width: 14px; height: 14px; }

/* Hover state — image zooms, overlay clarifies, CTA goes gold */
.projects-tile:hover .projects-tile__media { transform: scale(1.08); }
.projects-tile:hover .projects-tile__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.78) 100%);
  opacity: 1;
}
.projects-tile:hover .projects-tile__caption { transform: translateY(0); opacity: 1; }
.projects-tile:hover .projects-tile__cta {
  background: var(--soft-gold, #BFA987);
  border-color: var(--soft-gold, #BFA987);
  color: var(--charcoal, #2D2D2E);
  transform: scale(1.08);
}
.projects-tile:hover {
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
.projects-tile:focus-visible {
  outline: 3px solid var(--soft-gold, #BFA987);
  outline-offset: 4px;
}

/* RESPONSIVE -------------------------------------------------- */
@media (max-width: 1100px) {
  .projects-grid--bento-5 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 340px 240px 240px;
    grid-template-areas:
      "a a"
      "b c"
      "d e";
  }
  .projects-grid--spread-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 320px 220px;
    grid-template-areas:
      "a a"
      "b c";
  }
  .projects-grid--spread-4 .projects-tile--4 { display: none; }
  .projects-grid--mosaic-5 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 220px);
    grid-template-areas:
      "a b"
      "c d"
      "e e";
  }
  .projects-grid--wide-pair { grid-template-columns: 1fr; grid-template-rows: 320px 320px; }
  .projects-grid--triple-portrait { grid-template-columns: 1fr 1fr; grid-template-rows: 360px 360px; }
  .projects-grid--triple-portrait .projects-tile--3 { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .projects-hero { height: 60vh; min-height: 60vh; max-height: 60vh; padding: 110px 20px 70px; }
  .projects-section { padding: 60px 0 80px; }
  .projects-section__header { padding: 0 22px; margin-bottom: 32px; }
  .projects-grid { padding: 0 16px; gap: 10px; }
  .projects-grid--bento-5,
  .projects-grid--spread-4,
  .projects-grid--mosaic-5 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: none;
  }
  .projects-grid--bento-5 > *,
  .projects-grid--spread-4 > *,
  .projects-grid--mosaic-5 > * { grid-area: auto !important; height: 240px; }
  .projects-grid--spread-4 .projects-tile--4 { display: block; }
  .projects-grid--wide-pair { grid-template-rows: 220px 220px; }
  .projects-grid--triple-portrait { grid-template-columns: 1fr; grid-template-rows: 280px 280px 280px; }
  .projects-grid--triple-portrait .projects-tile--3 { grid-column: auto; }
  .projects-hero__nav-pill { font-size: 11px; padding: 6px 12px; }
}

/* Premium Door Systems hero — split copy into lead + body. */
.builders-hero-v2__copy--lead {
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 20px) !important;
  letter-spacing: -0.1px;
  margin-bottom: 12px !important;
}

/* =========================================================================
   QUOTE FORM — file upload UI + status alerts.
   ========================================================================= */
.quote-form__alert {
  grid-column: 1 / -1;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 8px;
}
.quote-form__alert--success {
  background: rgba(54, 73, 63, 0.12);
  border: 1px solid rgba(54, 73, 63, 0.35);
  color: #2a3a31;
}
.quote-form__alert--error {
  background: rgba(180, 60, 60, 0.10);
  border: 1px solid rgba(180, 60, 60, 0.35);
  color: #9c2c2c;
}

.quote-form__upload-label {
  display: block;
  margin: 8px 0 10px;
  font-weight: 700;
  font-size: 14px;
  color: var(--charcoal, #2D2D2E);
  letter-spacing: 0.2px;
}
.quote-upload {
  position: relative;
  border: 2px dashed rgba(191, 169, 135, 0.55);
  border-radius: 12px;
  background: rgba(247, 242, 234, 0.5);
  padding: 26px 18px;
  transition: background 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}
.quote-upload:hover,
.quote-upload.is-dragover {
  background: rgba(191, 169, 135, 0.15);
  border-color: var(--soft-gold, #BFA987);
}
.quote-upload__input,
[data-quote-upload-input] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.quote-upload__cta {
  text-align: center;
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.quote-upload__cta svg {
  width: 36px;
  height: 36px;
  color: var(--soft-gold, #BFA987);
  margin-bottom: 10px;
}
.quote-upload__primary {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--charcoal, #2D2D2E);
  margin-bottom: 4px;
}
.quote-upload__hint {
  display: block;
  font-size: 12.5px;
  color: #6a655d;
}
.quote-upload__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 3;
}
.quote-upload__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  font-size: 13px;
}
.quote-upload__item--bad {
  background: rgba(180, 60, 60, 0.08);
  border-color: rgba(180, 60, 60, 0.30);
  color: #9c2c2c;
  font-weight: 600;
}
.quote-upload__item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 75%;
}
.quote-upload__item-size {
  color: #6a655d;
  flex-shrink: 0;
}

/* =========================================================================
   METAL — "What We Do" section: 6 SQUARE sub-division cards.
   ========================================================================= */
.metal-subdivisions {
  background: var(--ivory, #F7F2EA);
  padding: 90px 0 110px;
}
.metal-subdivisions__inner { max-width: 1280px; }
.metal-subdivisions__header {
  text-align: center;
  margin-bottom: 50px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.metal-subdivisions__header .eyebrow--lines {
  justify-content: center;
  color: var(--soft-gold, #BFA987) !important;
  margin-bottom: 14px;
}
.metal-subdivisions__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.8px;
  margin: 0 0 14px;
  color: var(--charcoal, #2D2D2E);
}
.metal-subdivisions__intro {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.65;
  color: #5a554e;
  margin: 0;
}
.metal-subdivisions__grid {
  display: grid;
  /* 6-col horizontal row to match the One Team Complete Solutions
     dimensions on the home page (~200px-wide cards in a single line). */
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
/* Variant used by services with FEWER sub-divisions (e.g. Glass = 4). */
.metal-subdivisions__grid--4 {
  grid-template-columns: repeat(4, 1fr);
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1023px) {
  .metal-subdivisions__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .metal-subdivisions__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
.metal-subdivision-card {
  position: relative;
  display: block;
  /* SQUARE aspect — same height as width */
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(.2,.85,.3,1), box-shadow 0.3s ease, opacity 0.6s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.16);
  background: #1a1a1a;
  /* Entry animation: fade + rise on scroll into view */
  opacity: 0;
  transform: translateY(16px);
}
.metal-subdivisions.is-revealed .metal-subdivision-card,
.metal-subdivisions.visible .metal-subdivision-card {
  opacity: 1;
  transform: translateY(0);
}
.metal-subdivisions .metal-subdivision-card:nth-child(1) { transition-delay: 0.08s; }
.metal-subdivisions .metal-subdivision-card:nth-child(2) { transition-delay: 0.16s; }
.metal-subdivisions .metal-subdivision-card:nth-child(3) { transition-delay: 0.24s; }
.metal-subdivisions .metal-subdivision-card:nth-child(4) { transition-delay: 0.32s; }
.metal-subdivisions .metal-subdivision-card:nth-child(5) { transition-delay: 0.40s; }
.metal-subdivisions .metal-subdivision-card:nth-child(6) { transition-delay: 0.48s; }
/* When the cards are reused inside the portfolio section (no .metal-subdivisions
   wrapper), they should appear immediately — no staggered reveal needed. */
.portfolio-subdivisions-grid .metal-subdivision-card {
  opacity: 1 !important;
  transform: none !important;
}
.portfolio-subdivisions-grid {
  margin-top: 32px;
  /* margin-bottom removed — the divider below provides the gap to the carousel. */
}

/* Thin gold divider — fades in/out at the ends. Sits CENTERED in the
   original ~50px gap between the cards and the carousel: equal breathing
   room above and below so the line is clearly between both blocks. */
.portfolio-section__divider {
  width: 100%;
  height: 1px;
  margin: 25px auto;
  background: linear-gradient(90deg,
    rgba(191, 169, 135, 0) 0%,
    rgba(191, 169, 135, 0.55) 30%,
    rgba(191, 169, 135, 0.85) 50%,
    rgba(191, 169, 135, 0.55) 70%,
    rgba(191, 169, 135, 0) 100%);
}
.metal-subdivision-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}
.metal-subdivision-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.45) 55%,
    rgba(0,0,0,0.82) 100%);
  transition: background 0.3s ease;
}
.metal-subdivision-card__caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s ease;
}
.metal-subdivision-card__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--soft-gold, #BFA987);   /* gold stroke icon */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  transition: transform 0.35s ease;
}
.metal-subdivision-card__icon svg {
  width: 100%;
  height: 100%;
}
.metal-subdivision-card__label {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.15;
  letter-spacing: -0.2px;
  color: #fff;
  text-shadow: 0 3px 10px rgba(0,0,0,0.55);
}
.metal-subdivision-card:hover .metal-subdivision-card__icon {
  transform: scale(1.12) rotate(-4deg);
}
.metal-subdivision-card:hover .metal-subdivision-card__caption {
  transform: translateY(-2px);
}
.metal-subdivision-card:hover,
.metal-subdivision-card:focus-visible {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35), 0 0 0 2px var(--soft-gold, #BFA987);
  outline: none;
}
.metal-subdivision-card:hover .metal-subdivision-card__bg { transform: scale(1.08); }
.metal-subdivision-card:hover .metal-subdivision-card__scrim {
  background: linear-gradient(180deg,
    rgba(54, 73, 63, 0.20) 0%,
    rgba(0,0,0,0.60) 50%,
    rgba(0,0,0,0.88) 100%);
}
/* Responsive — keep the 6-card horizontal row as long as possible.
   ≥1024px: 6 cols (desktop + iPad landscape).
   768-1023px: 3 cols (iPad portrait).
   481-767px: 3 cols (small tablet / large phone landscape).
   ≤480px: 2 cols (phones). */
@media (max-width: 1023px) {
  .metal-subdivisions__grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .metal-subdivision-card__label { font-size: clamp(14px, 1.8vw, 18px); }
}
@media (max-width: 480px) {
  .metal-subdivisions__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .metal-subdivision-card__caption { left: 10px; right: 10px; bottom: 10px; gap: 6px; }
  .metal-subdivision-card__label { font-size: 13px; }
  .metal-subdivision-card__icon { width: 22px; height: 22px; }
}
@media (max-width: 1023px) and (min-width: 481px) {
  .metal-subdivision-card__icon { width: 26px; height: 26px; }
}

/* =========================================================================
   CATEGORY GALLERY POPUP — grid of all photos + lightbox view.
   ========================================================================= */
.category-gallery {
  position: fixed;
  inset: 0;
  z-index: 10200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.category-gallery[hidden] { display: none; }
.category-gallery__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: services-popup-fade 0.28s ease forwards;
}
.category-gallery__panel {
  position: relative;
  width: min(96vw, 1320px);
  /* Fixed height (not max-height) so the panel keeps full size when the
     grid is hidden in lightbox mode — otherwise it collapsed to header-only
     and the absolute-positioned lightbox shrank with it. */
  height: 92vh;
  background: var(--charcoal, #2D2D2E);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  z-index: 1;
  animation: services-popup-rise 0.34s cubic-bezier(.2,.9,.3,1) forwards;
}
.category-gallery__header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 28px;
  border-bottom: 1px solid rgba(191, 169, 135, 0.18);
}
.category-gallery__title-wrap { flex: 1; text-align: center; }
.category-gallery__title-wrap .eyebrow--lines {
  color: var(--soft-gold, #BFA987) !important;
  margin-bottom: 4px;
  justify-content: center;
}
.category-gallery__title-wrap .eyebrow--lines::before,
.category-gallery__title-wrap .eyebrow--lines::after {
  background: var(--soft-gold, #BFA987);
  width: 28px;
}
.category-gallery__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(20px, 2.4vw, 30px);
  color: #fff;
  margin: 0;
  line-height: 1.15;
}
.category-gallery__count {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.category-gallery__close {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.category-gallery__close:hover,
.category-gallery__close:focus-visible {
  background: var(--soft-gold, #BFA987);
  border-color: var(--soft-gold, #BFA987);
  color: var(--charcoal, #2D2D2E);
  transform: scale(1.05);
  outline: none;
}
.category-gallery__close svg { width: 18px; height: 18px; }

.category-gallery__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
/* Force-hide the grid when lightbox is active (avoids issues where [hidden]
   attribute is overridden by flex layout). */
.category-gallery__body[hidden],
.category-gallery__lightbox[hidden] {
  display: none !important;
}
.category-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.category-gallery__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 0;
  padding: 0;
  background: #1a1a1a;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.category-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.category-gallery__thumb:hover,
.category-gallery__thumb:focus-visible {
  transform: scale(1.02);
  box-shadow: 0 0 0 2px var(--soft-gold, #BFA987);
  outline: none;
}
.category-gallery__thumb:hover img { transform: scale(1.06); }

/* Lightbox view (single enlarged photo) */
.category-gallery__lightbox {
  position: absolute;
  inset: 0;
  background: var(--charcoal, #2D2D2E);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  padding: 50px 60px;
}
.category-gallery__lightbox[hidden] { display: none; }
.category-gallery__lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-out;
  border-radius: 6px;
}
.category-gallery__lightbox-back {
  position: absolute;
  top: 18px;
  left: 22px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.category-gallery__lightbox-back svg { width: 16px; height: 16px; }
.category-gallery__lightbox-back:hover {
  background: var(--soft-gold, #BFA987);
  color: var(--charcoal, #2D2D2E);
  border-color: var(--soft-gold, #BFA987);
}
.category-gallery__lightbox-prev,
.category-gallery__lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.category-gallery__lightbox-prev { left: 18px; }
.category-gallery__lightbox-next { right: 18px; }
.category-gallery__lightbox-prev:hover,
.category-gallery__lightbox-next:hover {
  background: var(--soft-gold, #BFA987);
  color: var(--charcoal, #2D2D2E);
  border-color: var(--soft-gold, #BFA987);
  transform: translateY(-50%) scale(1.06);
}
.category-gallery__lightbox-prev svg,
.category-gallery__lightbox-next svg { width: 22px; height: 22px; }

@media (max-width: 720px) {
  .category-gallery { padding: 12px; }
  .category-gallery__panel { max-height: 96vh; border-radius: 12px; }
  .category-gallery__header { padding: 14px 16px; }
  .category-gallery__body { padding: 14px; }
  .category-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .category-gallery__lightbox { padding: 30px 18px; }
  .category-gallery__lightbox-prev { left: 8px; width: 42px; height: 42px; }
  .category-gallery__lightbox-next { right: 8px; width: 42px; height: 42px; }
  .category-gallery__lightbox-back { top: 10px; left: 12px; padding: 6px 12px; }
}

/* =========================================================================
   SERVICES POPUP — multi-step modal: Step 1 services, Step 2 sub-divisions.
   Triggered by "View Completed Projects" cards on Home/Builders/Homeowners.
   ========================================================================= */
.services-popup {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.services-popup[hidden] { display: none; }
.services-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: services-popup-fade 0.28s ease forwards;
}
@keyframes services-popup-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.services-popup__panel {
  position: relative;
  width: min(94vw, 1180px);
  max-height: 88vh;
  background: var(--charcoal, #2D2D2E);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  z-index: 1;
  animation: services-popup-rise 0.34s cubic-bezier(.2,.9,.3,1) forwards;
}
@keyframes services-popup-rise {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.services-popup__header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 28px;
  border-bottom: 1px solid rgba(191, 169, 135, 0.18);
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 100%);
}
.services-popup__title-wrap {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.services-popup__title-wrap .eyebrow--lines {
  color: var(--soft-gold, #BFA987) !important;
  margin-bottom: 6px;
  justify-content: center;
}
.services-popup__title-wrap .eyebrow--lines::before,
.services-popup__title-wrap .eyebrow--lines::after {
  background: var(--soft-gold, #BFA987);
  width: 32px;
}
.services-popup__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(20px, 2.4vw, 30px);
  color: #fff;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.4px;
}
.services-popup__back,
.services-popup__close {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.services-popup__back {
  width: auto;
  padding: 0 16px;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.services-popup__back span { line-height: 1; }
.services-popup__back svg,
.services-popup__close svg { width: 18px; height: 18px; }
.services-popup__back:hover,
.services-popup__close:hover,
.services-popup__back:focus-visible,
.services-popup__close:focus-visible {
  background: var(--soft-gold, #BFA987);
  border-color: var(--soft-gold, #BFA987);
  color: var(--charcoal, #2D2D2E);
  transform: scale(1.05);
  outline: none;
}
.services-popup__back[hidden] { display: none; }

.services-popup__body {
  flex: 1;
  overflow-y: auto;
  padding: 28px;
}
.services-popup__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.services-popup__card {
  position: relative;
  display: block;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: #1a1a1a;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(.2,.85,.3,1), box-shadow 0.25s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.services-popup__card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}
.services-popup__card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.40) 55%,
    rgba(0,0,0,0.78) 100%);
}
.services-popup__card-label {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.15;
  letter-spacing: -0.2px;
  color: #fff;
  z-index: 2;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.services-popup__card:hover,
.services-popup__card:focus-visible {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 2px var(--soft-gold, #BFA987);
  outline: none;
}
.services-popup__card:hover .services-popup__card-bg {
  transform: scale(1.08);
}
@media (max-width: 720px) {
  .services-popup { padding: 14px; }
  .services-popup__panel { max-height: 92vh; border-radius: 14px; }
  .services-popup__header { padding: 16px 18px; gap: 10px; }
  .services-popup__body { padding: 18px; }
  .services-popup__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .services-popup__card { height: 150px; }
}

/* =========================================================================
   HEADER — Call Now pill button (tap-to-call) sitting next to the nav.
   On desktop: shows phone icon + full number.
   On mobile: collapses to just the icon (still tappable, opens dialer).
   ========================================================================= */
.nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 22px;
  flex-wrap: nowrap;
}
.nav-call-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--soft-gold, #BFA987);
  color: var(--charcoal, #2D2D2E) !important;
  border-radius: 999px;
  text-decoration: none !important;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  border: 1.5px solid var(--soft-gold, #BFA987);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 16px rgba(191, 169, 135, 0.25);
}
.nav-call-cta:hover,
.nav-call-cta:focus-visible {
  background: #d1ba93;
  border-color: #d1ba93;
  color: var(--charcoal, #2D2D2E) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(191, 169, 135, 0.40);
  outline: none;
}
.nav-call-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  animation: nav-call-pulse 2.2s ease-in-out infinite;
}
.nav-call-cta__icon svg { width: 18px; height: 18px; }
.nav-call-cta__label { display: none; }   /* "Call Now" label hidden by default — we show the number directly */
.nav-call-cta__number { display: inline; }
/* Subtle attention pulse on the phone icon */
@keyframes nav-call-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.12) rotate(-8deg); }
}

/* Mobile / tablet — collapse to icon-only to save space. Number is in the
   aria-label so screen readers + dialer still work. */
@media (max-width: 960px) {
  .nav-call-cta { padding: 10px 14px; }
  .nav-call-cta__number { display: none; }
  .nav-call-cta__label { display: none; }
}
/* On very small screens (phones in portrait), keep just the icon visible
   next to the hamburger menu. */
@media (max-width: 600px) {
  .nav-call-cta { padding: 9px 11px; gap: 0; }
  .nav-right { gap: 10px; }
}

/* =========================================================================
   FOOTER — Social media icons row. Only shows the icons whose URLs the
   client has filled in via Customizer → Site Identity → Social Media.
   ========================================================================= */
.footer-social {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  padding: 18px 24px 8px;
  flex-wrap: wrap;
}
.footer-social:empty { display: none; }
.footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.footer-social__link svg { width: 18px; height: 18px; }
.footer-social__link:hover,
.footer-social__link:focus-visible {
  background: var(--soft-gold, #BFA987);
  border-color: var(--soft-gold, #BFA987);
  color: var(--charcoal, #2D2D2E);
  transform: translateY(-2px);
  outline: none;
}

/* Blog back button — pill-style "← Back" pinned top-left of blog hero.
   Same visual language as nav pills (rounded, gold hover, ghost default). */
.blog-single-hero__back,
.blog-archive-back {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: rgba(45, 45, 46, 0.55);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.18);
  margin-bottom: 18px;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  align-self: flex-start;
  width: max-content;
}
.blog-single-hero__back:hover,
.blog-single-hero__back:focus-visible,
.blog-archive-back:hover,
.blog-archive-back:focus-visible {
  background: var(--soft-gold, #BFA987);
  color: var(--charcoal, #2D2D2E) !important;
  border-color: var(--soft-gold, #BFA987);
  transform: translateX(-3px);
  outline: none;
}
.blog-single-hero__back svg,
.blog-archive-back svg { width: 14px; height: 14px; }

/* Portfolio captions: HIDE fake date + location ("Toronto, ON · 2024" etc.)
   site-wide per client request. Eyebrow + project name stay visible.
   Covers all carousels (Home gallery, Cabinetry, Glass, Metal, Door,
   Subfloor, Strategic Sales) AND the zoom lightbox view. */
.caption-meta,
.portfolio-zoom__meta,
.portfolio-card__meta {
  display: none !important;
}

/* Cabinetry "What We Do" cards are now clickable <a> — kill underline +
   inherit color, keep cursor pointer and the existing hover treatment. */
.compact-card--linked {
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
  display: block;
}
.compact-card--linked:focus-visible {
  outline: 2px solid var(--soft-gold, #BFA987);
  outline-offset: 4px;
}

/* Cabinetry card lightbox modal — opens with the assigned portfolio photo. */
.cabinetry-card-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cabinetry-card-modal[hidden] { display: none; }
.cabinetry-card-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cabinetry-card-modal__panel {
  position: relative;
  width: min(92vw, 1100px);
  max-height: 90vh;
  z-index: 1;
  background: var(--charcoal, #2D2D2E);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
}
.cabinetry-card-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background 0.2s ease, transform 0.2s ease;
}
.cabinetry-card-modal__close:hover {
  background: var(--soft-gold, #BFA987);
  color: var(--charcoal, #2D2D2E);
  transform: scale(1.08);
}
.cabinetry-card-modal__close svg { width: 22px; height: 22px; }
.cabinetry-card-modal__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #000;
}
.cabinetry-card-modal__img {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  background: #000;
}
.cabinetry-card-modal__caption {
  padding: 18px 24px 22px;
  background: var(--charcoal, #2D2D2E);
  color: var(--ivory, #F7F2EA);
  text-align: center;
}
.cabinetry-card-modal__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(20px, 2.2vw, 28px);
  margin: 0 0 6px;
  color: var(--ivory, #F7F2EA);
}
.cabinetry-card-modal__meta {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--soft-gold, #BFA987);
}
@media (max-width: 768px) {
  .cabinetry-card-modal__panel { width: 96vw; }
  .cabinetry-card-modal__img { max-height: 55vh; }
}

/* Home gallery (SELECTED WORK) — centered title + eyebrow + intro paragraph. */
section#gallery .portfolio-header {
  text-align: center !important;
  max-width: 860px;
  margin-left: auto !important;
  margin-right: auto !important;
}
section#gallery .portfolio-header .eyebrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  margin: 0 auto 8px !important;
}
section#gallery .portfolio-header .eyebrow::before,
section#gallery .portfolio-header .eyebrow::after {
  content: '';
  display: inline-block;
  width: 38px;
  height: 1.5px;
  background: var(--soft-gold, #BFA987);
}
section#gallery .portfolio-header > p {
  margin: 0 auto !important;
  max-width: 720px;
}
.portfolio-subheader { margin-top: 40px; }
.portfolio-header .section-title,
.portfolio-subheader .section-title {
  color: var(--charcoal);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 0.98;
  letter-spacing: -1px;
  margin: 6px 0 16px;
  max-width: none;
}
.portfolio-header > p,
.portfolio-subheader > p {
  color: #625b53;
  line-height: 1.7;
  font-size: 16px;
  margin: 0;
  max-width: none;
}
.gallery-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  grid-auto-rows: 250px;
  gap: 18px;
}
.gallery-item {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 45px rgba(45,45,46,.13);
}
.gallery-item.large { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: .55s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  right: 18px;
  background: rgba(45,45,46,.84);
  color: var(--white);
  padding: 14px 16px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 800;
}
.gallery-caption span {
  color: var(--soft-gold);
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.gallery-action {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

/* ===================== */
/* TRUSTED BUILDERS */
/* ===================== */
.trusted-builders {
  padding: 82px 0;
  background: var(--charcoal);
  overflow: hidden;
}
.trusted-builders__header {
  margin-bottom: 32px;
  text-align: center;
}
.trusted-builders__header .eyebrow {
  justify-content: center;
}
.trusted-builders__header .eyebrow::after {
  content: '';
  width: 42px;
  height: 1px;
  background: var(--soft-gold);
}
.trusted-builders__header h2 {
  max-width: 900px;
  margin: 0 auto;
  color: var(--white);
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.05;
}
.trusted-heading__primary,
.trusted-heading__secondary {
  display: block;
}
.trusted-heading__primary {
  color: var(--white);
}
.trusted-heading__secondary {
  margin-top: 8px;
  color: var(--soft-gold);
  font-family: 'Inter', sans-serif;
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.5px;
}
.trusted-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.trusted-track {
  display: flex;
  width: max-content;
  animation: trustedLoop 38s linear infinite;
  will-change: transform;
  /* Browser hints to use the GPU compositor and prevent subpixel rounding glitches
     at the loop boundary (the visual cause of the periodic "jump"). */
  backface-visibility: hidden;
  perspective: 1000px;
  transform: translate3d(0, 0, 0);
}
.trusted-track.paused { animation-play-state: paused; }
.trusted-track--static {
  width: auto;
  justify-content: center;
  animation: none;
}
.trusted-track--static .trusted-track__group {
  flex-wrap: wrap;
  justify-content: center;
  padding-right: 0;
}
.trusted-track__group {
  display: flex;
  gap: 16px;
  padding-right: 16px;
  /* Round the group width to whole pixels so 3 cloned groups stack with NO
     subpixel drift between them (the source of the periodic jump). */
  flex: 0 0 auto;
}
/* Pixel-precise loop translation — JS sets --carousel-shift to one group's
   exact width (integer pixels). This avoids the rounding error that comes
   from translating by percentage of a non-integer total width. */
@keyframes trustedLoop {
  from { transform: translate3d(calc(-1 * var(--carousel-shift, 33.3333%)), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
.trusted-logo-card {
  width: 230px;
  min-height: 92px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px solid rgba(191,169,135,.36);
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  color: var(--white);
  font-weight: 900;
  letter-spacing: .4px;
  text-align: center;
  box-shadow: 0 12px 34px rgba(45,45,46,.08);
}
.trusted-logo-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100% !important;   /* span the full card inner width — wrapper centers the img regardless of img size */
  text-align: center;
}
.trusted-logo-card__logo img {
  /* Logo auto-fills the available card area while preserving aspect ratio.
     - max-width: calc(100% - 24px) gives a symmetric ~12px visual padding inside the wrapper
     - max-height caps vertical so logo_text mode keeps room for the name below
     - object-fit:contain + auto width/height = whichever dimension hits its cap first wins,
       the other scales proportionally → never distorts, never overflows. */
  width: auto;
  height: auto;
  max-width: calc(100% - 16px);   /* 8px symmetric visual padding inside the wrapper */
  max-height: 56px;
  object-fit: contain;
  display: block;
  margin: 0 auto;                 /* extra centering safety */
}
.trusted-logo-card__name {
  display: block;
}
.trusted-logo-card__subtitle {
  display: block;
  max-width: 185px;
  color: rgba(255,255,255,.58);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
}
.trusted-logo-card--logo {
  padding: 18px;
}
.trusted-logo-card--logo .trusted-logo-card__logo img {
  /* Logo-only mode: no name below → logo can use the full inner card height.
     max-width still calc(100% - 24px) inherited — ~12px visual padding each side. */
  max-height: 72px;
}

/* ===================== */
/* CTA */
/* ===================== */
.cta {
  padding: 110px 0;
  background: var(--charcoal);
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(191,169,135,.22), transparent 42%);
  pointer-events: none;
}
.cta-inner { position: relative; max-width: 820px; margin: 0 auto; }
.cta h2 {
  font-family: 'Playfair Display', serif;
  /* Reduced max font so the full sentence "Ready to start your next project?"
     fits on a single line at desktop widths. */
  font-size: clamp(26px, 3.6vw, 50px);
  line-height: 1.05;
  margin-bottom: 20px;
  color: #ffffff !important;
  white-space: nowrap;
}
.cta h2 span { color: var(--soft-gold) !important; }
.cta-inner { max-width: 1100px !important; }
@media (max-width: 720px) {
  .cta h2 { white-space: normal; }
}
/* Override the global gold-button rule for the dark CTA section so the
   button text reads WHITE (not charcoal) on the dark band — better contrast
   against the dark backdrop. */
section.cta .btn-primary,
section.cta .cta-inner .btn-primary,
section.cta .btn-primary:hover,
section.cta .cta-inner .btn-primary:hover {
  color: #ffffff !important;
}
.cta p {
  color: rgba(255,255,255,.7);
  font-size: 18px;
  line-height: 1.75;
  margin-bottom: 34px;
}

/* ===================== */
/* FOOTER */
/* ===================== */
footer {
  background: #1d1d1e;
  color: rgba(255,255,255,.56);
  padding: 48px 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
}
footer img { height: 62px; width: auto; margin-bottom: 18px; }
footer .wp-block-site-logo img,
footer .custom-logo,
footer .footer-brand img { height: 100px !important; width: auto !important; max-width: none !important; margin-bottom: 18px; object-fit: contain; }
footer h4 {
  color: var(--white);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 15px;
}
footer p, footer a { font-size: 14px; line-height: 1.8; }
footer a:hover { color: var(--soft-gold); }
.footer-links {
  list-style: none;
  display: grid;
  gap: 10px;
}
.footer-links a {
  transition: .25s ease;
}
.footer-links a:hover {
  color: var(--soft-gold);
  padding-left: 4px;
}
.footer-bottom {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  opacity: .6;
}

/* ===================== */
/* INNER PAGES / 404 */
/* ===================== */
.inner-page,
.error-page {
  background: var(--ivory);
}

.inner-hero,
.error-hero {
  position: relative;
  overflow: hidden;
  /* reduced vertical padding for a more compact About hero */
  padding: 86px 0 40px;
  background: linear-gradient(135deg, var(--charcoal), var(--deep-forest));
  color: var(--white);
}

/* Builders hero specific: more compact and stronger background treatment */
.builders-hero {
  padding: 72px 0 36px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--white);
}
.builders-hero .inner-hero__content { position: relative; z-index: 3; max-width: 860px; }
.builders-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,11,0.18), rgba(11,11,11,0.42));
  z-index: 2;
  pointer-events: none;
}
.builders-hero .eyebrow { z-index: 4; }
.builders-hero h1, .builders-hero p { z-index: 4; }

/* Homeowners/clients hero: sister treatment with slightly softer overlay balance */
.clients-hero::after {
  background: linear-gradient(180deg, rgba(11,11,11,0.24), rgba(11,11,11,0.46));
}

/* Subfloor service hero framing */
.subfloor-hero {
  background-position: center 48% !important;
}

.subfloor-hero::after {
  background: linear-gradient(180deg, rgba(11,11,11,0.22), rgba(11,11,11,0.48));
}

/* Lift homeowners hero framing to reveal more neighborhood/street area */
.clients-hero {
  background-position: center 70% !important;
}

/* Gutenberg-authored content polish for audience landing pages */
.page-template-page-for-builders-developers .site-main > .wp-block-group,
.page-template-page-for-homeowners-clients .site-main > .wp-block-group {
  position: relative;
}

.page-template-page-for-builders-developers .site-main .wp-block-group,
.page-template-page-for-homeowners-clients .site-main .wp-block-group,
.page-template-page-for-builders-developers .site-main .wp-block-columns,
.page-template-page-for-homeowners-clients .site-main .wp-block-columns {
  margin-top: 0;
  margin-bottom: 0;
}

.page-template-page-for-builders-developers .site-main .wp-block-heading,
.page-template-page-for-homeowners-clients .site-main .wp-block-heading {
  color: var(--charcoal);
  font-family: 'Playfair Display', serif;
  line-height: 1.08;
  letter-spacing: -0.4px;
}

.page-template-page-for-builders-developers .site-main .wp-block-paragraph,
.page-template-page-for-homeowners-clients .site-main .wp-block-paragraph,
.page-template-page-for-builders-developers .site-main li,
.page-template-page-for-homeowners-clients .site-main li {
  color: #5a554e;
  line-height: 1.75;
}

.page-template-page-for-builders-developers .site-main .wp-block-buttons,
.page-template-page-for-homeowners-clients .site-main .wp-block-buttons {
  gap: 12px;
}

.page-template-page-for-builders-developers .site-main .wp-block-button__link,
.page-template-page-for-homeowners-clients .site-main .wp-block-button__link {
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.page-template-page-for-builders-developers .site-main .is-style-outline .wp-block-button__link,
.page-template-page-for-homeowners-clients .site-main .is-style-outline .wp-block-button__link {
  border: 1px solid rgba(45,45,46,.3);
  color: var(--charcoal);
  background: transparent;
}

.audience-hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.audience-editor-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px dashed rgba(191,169,135,.52);
  border-radius: 10px;
  background: rgba(191,169,135,.08);
  color: #61584c;
  font-size: 13px;
  line-height: 1.5;
}

.audience-entry-centered {
  text-align: center;
}

.audience-grid-spaced {
  margin-top: 28px;
  justify-items: center;
  margin-left: auto;
  margin-right: auto;
}

.audience-grid-centered-items {
  justify-items: center;
}

.audience-list-wrap {
  margin-top: 22px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 760px) {
  .clients-hero {
    background-position: center 70% !important;
  }

  .page-template-page-for-builders-developers .site-main .wp-block-buttons,
  .page-template-page-for-homeowners-clients .site-main .wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .page-template-page-for-builders-developers .site-main .wp-block-button,
  .page-template-page-for-homeowners-clients .site-main .wp-block-button {
    width: 100%;
  }

  .audience-hero-actions {
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .builders-hero { padding: 56px 0 28px; }
  .builders-hero h1 { font-size: clamp(28px, 6vw, 40px); }
  .builders-hero p { font-size: 15px; }
  .subfloor-hero { background-position: center 42% !important; }
}

.inner-hero::before,
.error-hero::before {
  content: '';
  position: absolute;
  right: -140px;
  top: -180px;
  width: 480px;
  height: 480px;
  border: 1px solid rgba(191,169,135,.22);
  border-radius: 50%;
}

.inner-hero__content,
.error-hero__content {
  position: relative;
  max-width: 850px;
}

.inner-hero h1,
.error-hero h1 {
  font-family: 'Playfair Display', serif;
  color: var(--white);
  font-size: clamp(46px, 7vw, 82px);
  line-height: .98;
  letter-spacing: -1.8px;
  margin-bottom: 22px;
}

.inner-hero p,
.error-hero p {
  max-width: 680px;
  color: rgba(255,255,255,.72);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.75;
  margin-bottom: 32px;
}

.inner-content-section {
  padding: 78px 0 96px;
}

.inner-content-card {
  border: 1px solid rgba(191,169,135,.42);
  border-radius: 26px;
  background: rgba(255,255,255,.62);
  box-shadow: 0 24px 70px rgba(45,45,46,.12);
  padding: clamp(30px, 5vw, 58px);
}

.inner-content-card h2 {
  max-width: 760px;
  color: var(--charcoal);
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.05;
  margin-bottom: 18px;
}

.inner-content-card p {
  max-width: 820px;
  color: #5a554e;
  font-size: 17px;
  line-height: 1.85;
}
.quote-layout,
.about-page-grid,
.service-page-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 26px;
  align-items: start;
}
.quote-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  border: 1px solid rgba(191,169,135,.42);
  border-radius: 26px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 24px 70px rgba(45,45,46,.12);
  padding: clamp(26px, 4vw, 46px);
}
.quote-form label {
  display: grid;
  gap: 8px;
  color: var(--charcoal);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  border: 1px solid rgba(45,45,46,.16);
  border-radius: 12px;
  background: var(--white);
  color: var(--charcoal);
  font: inherit;
  padding: 13px 14px;
}
.quote-form__full,
.quote-form button {
  grid-column: 1 / -1;
}
.about-page-image {
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(45,45,46,.16);
}
.about-page-image img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}
.about-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(191,169,135,.18), transparent 30%),
    linear-gradient(135deg, var(--charcoal), var(--slate-teal));
}
/* About hero — taller so rotating team photos show faces clearly past the nav,
   with text pushed to the bottom in a 2-column layout (title left, body right). */
.about-hero {
  min-height: 820px !important;
  padding: 240px 0 64px !important;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
}
.about-hero .about-hero__content {
  max-width: 1180px !important;
  width: 100%;
}
.about-hero__bottom {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: end;
}
.about-hero__title .eyebrow {
  margin-bottom: 14px;
}
.about-hero__title h1 {
  margin: 0 !important;
}
.about-hero__body p {
  margin: 0 !important;
  max-width: none;
  font-size: clamp(16px, 1.5vw, 18px) !important;
  line-height: 1.7 !important;
}
/* Override the dark subfloor-hero overlay — top portion stays light so the
   rotating team photos remain visible past the nav bar; only the bottom area
   (where text sits) gets darker for legibility. */
.about-hero::after {
  background: linear-gradient(180deg,
    rgba(11,11,11,0.05) 0%,
    rgba(11,11,11,0.10) 35%,
    rgba(11,11,11,0.55) 80%,
    rgba(11,11,11,0.70) 100%) !important;
}
@media (max-width: 768px) {
  .about-hero {
    min-height: 520px !important;
    padding: 130px 0 48px !important;
  }
  .about-hero__bottom {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
.about-leadership-section,
.about-team-section,
.about-trust-section,
.about-cta-section {
  background: var(--ivory);
}
/* Company Overview band — vertical gradient: deep-forest green (top) →
   charcoal/black (bottom). Matches the dark band of the next section. */
.about-overview-section {
  padding: 86px 0 54px;
  background: linear-gradient(180deg,
    var(--deep-forest, #36493F) 0%,
    var(--deep-forest, #36493F) 20%,
    #1a1a1a 100%) !important;
  color: var(--ivory, #F7F2EA);
}
.about-overview-section .eyebrow,
.about-overview-section .eyebrow--center {
  color: var(--soft-gold, #BFA987) !important;
}
.about-overview-section .about-editable-content,
.about-overview-section .about-editable-content p,
.about-overview-section .about-overview-copy h2,
.about-overview-section .about-closing-line {
  color: var(--ivory, #F7F2EA) !important;
}
.about-overview-grid,
.about-team-grid {
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  gap: 34px;
  align-items: stretch;
}
.about-overview-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-editable-content p + p {
  margin-top: 18px;
}
.about-closing-line {
  margin-top: 28px;
  color: var(--charcoal) !important;
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3vw, 36px) !important;
  line-height: 1.08 !important;
}
.about-image-stack {
  position: relative;
  min-height: 100%;
}
.about-page-image--large,
.about-page-image--wide {
  height: 100%;
  margin: 0;
  /* Gold border opacity reduced 60% (was .28 → now .11). */
  border: 1px solid rgba(191,169,135,.11);
  background: var(--charcoal);
}
/* Allow horizontal/landscape images to fit without overly cropping */
.about-page-image--large img {
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: contain;
  object-position: center center;
}
.about-page-image--wide img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  object-position: center center;
}

/* Specific tuning for the large company overview photo to span wide and be centered */
.about-overview-photo {
  margin: 40px 0;
}
.about-overview-photo img {
  width: 100%;
  height: auto;
  max-height: 780px;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 18px;
  box-shadow: 0 26px 70px rgba(45,45,46,.12);
}

/* Execution team photo tuning (centered, wider) */
.about-team-photo { margin: 0; }
.about-team-photo img {
  width: 100%;
  height: auto;
  max-height: 680px;
  object-fit: contain;
  object-position: center center;
  border-radius: 18px;
  display: block;
}
.about-proof-card {
  position: absolute;
  right: 22px;
  bottom: 22px;
  max-width: 270px;
  padding: 18px 20px;
  border: 1px solid rgba(191,169,135,.42);
  border-radius: 18px;
  background: rgba(29,29,30,.9);
  color: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 42px rgba(0,0,0,.2);
}
.about-proof-card strong {
  display: block;
  color: var(--soft-gold);
  font-size: 28px;
  line-height: 1;
  margin-bottom: 8px;
}
.about-proof-card span {
  font-size: 13px;
  line-height: 1.5;
}
.about-leadership-section,
.about-team-section,
.about-trust-section {
  padding: 54px 0;
}
.about-section-header {
  max-width: 820px;
  margin-bottom: 28px;
}
.about-section-header--center {
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}
.about-section-header--center .eyebrow {
  justify-content: center;
}
.about-section-header h2,
.about-cta-card h2 {
  color: var(--charcoal);
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 4.8vw, 60px);
  line-height: 1.02;
  letter-spacing: -1px;
  margin-bottom: 16px;
}
.about-section-header p {
  color: #5a554e;
  font-size: 17px;
  line-height: 1.8;
}

/* Make the about-section header body fully centered within the editorial container */
.about-strength-section .about-section-header .section-copy {
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 720px;
}

/* Ensure homeowner support header body stays cleanly centered */
.clients-support-section .about-section-header .section-copy {
  text-align: center;
  max-width: 700px;
}
.founder-grid,
.about-strength-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* =========================================================================
   FOUNDING COMPANIES — Home page editorial strip
   Lives between "Why Choose Us" and "Selected Work" on the homepage.
   Ivory background, gold rule at the bottom, eyebrow + 2-line title,
   5 companies in a clean editorial row with index, name, sector descriptor,
   and a gold dash. */
.founding-companies-home {
  position: relative;
  background: var(--ivory, #F7F2EA);
  padding: 110px 0 100px;
  overflow: hidden;
}
.founding-companies-home__inner {
  position: relative;
}
.founding-companies-home__header {
  max-width: 760px;
  margin: 0 auto 60px;
  text-align: center;
}
.founding-companies-home__header .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--soft-gold, #BFA987);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.founding-companies-home__header .eyebrow::before,
.founding-companies-home__header .eyebrow::after {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--soft-gold, #BFA987);
  opacity: .8;
}
.founding-companies-home__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.06;
  letter-spacing: -.6px;
  color: var(--charcoal, #2D2D2E);
  margin: 0 0 20px;
}
.founding-companies-home__title .founding-companies-home__title-line {
  display: block;
}
.founding-companies-home__title .founding-companies-home__title-line:last-child {
  color: var(--soft-gold, #BFA987);
  font-style: italic;
}
.founding-companies-home__lede {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
  color: #5a554e;
  margin: 0;
}
.founding-companies-home__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Auto-fit so the list re-centers regardless of card count. */
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(191, 169, 135, 0.35);
  border-bottom: 1px solid rgba(191, 169, 135, 0.35);
  max-width: 1180px;
  margin: 0 auto;
}
/* Remove right border on the LAST visible item so the divider grid stays
   visually balanced when the list ends. */
.founding-companies-home__list .founding-companies-home__item:last-child {
  border-right: none;
}
.founding-companies-home__item {
  margin: 0;
  padding: 0;
  border-right: 1px solid rgba(191, 169, 135, 0.22);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}
.founding-companies-home__item:last-child {
  border-right: none;
}
.founding-companies-home.is-in-view .founding-companies-home__item,
.reveal-up.visible .founding-companies-home__item,
.founding-companies-home.reveal-up.visible .founding-companies-home__item {
  opacity: 1;
  transform: translateY(0);
}
.founding-companies-home__card {
  display: flex;
  flex-direction: column;
  align-items: center;        /* horizontally center every child */
  justify-content: center;    /* vertically center the stack */
  text-align: center;         /* center text inside name / sector */
  padding: 30px 26px 32px;
  min-height: 180px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background 0.4s ease;
}
a.founding-companies-home__card:hover,
a.founding-companies-home__card:focus-visible {
  background: rgba(191, 169, 135, 0.06);
}
a.founding-companies-home__card:hover .founding-companies-home__name,
a.founding-companies-home__card:focus-visible .founding-companies-home__name {
  color: var(--soft-gold, #BFA987);
}
.founding-companies-home__index {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--soft-gold, #BFA987);
  letter-spacing: 1px;
  margin-bottom: 18px;
}
.founding-companies-home__name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.25;
  color: var(--charcoal, #2D2D2E);
  margin: 0 0 12px;
  font-weight: 600;
  letter-spacing: -.1px;
  transition: color 0.3s ease;
}
.founding-companies-home__sector {
  font-size: 13px;
  line-height: 1.55;
  color: #6a655c;
  margin: 0 0 18px;
  letter-spacing: .15px;
}
.founding-companies-home__dash {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--soft-gold, #BFA987);
  /* No margin-top:auto — content is vertically centered now, so the dash
     sits naturally below the sector text as part of the centered stack. */
  margin: 4px auto 0;
}
/* Gold separator rule sealing the bottom of the section — visually divides
   founding companies from "Selected Work" below. */
.founding-companies-home__rule {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(1100px, 88%);
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(191, 169, 135, 0) 6%,
    rgba(191, 169, 135, 0.55) 50%,
    rgba(191, 169, 135, 0) 94%,
    transparent);
}
@media (max-width: 1100px) {
  .founding-companies-home__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .founding-companies-home__item {
    border-bottom: 1px solid rgba(191, 169, 135, 0.22);
  }
  .founding-companies-home__item:nth-child(2n) {
    border-right: none;
  }
}
@media (max-width: 640px) {
  .founding-companies-home {
    padding: 70px 0 64px;
  }
  .founding-companies-home__list {
    grid-template-columns: 1fr;
  }
  .founding-companies-home__item {
    border-right: none;
    border-bottom: 1px solid rgba(191, 169, 135, 0.22);
  }
  .founding-companies-home__item:last-child {
    border-bottom: none;
  }
  .founding-companies-home__card {
    min-height: 0;
    padding: 28px 22px;
  }
}

.founding-companies-grid {
  display: grid;
  /* 4 founding companies after Real Estate was removed — centered. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1023px) {
  .founding-companies-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .founding-companies-grid {
    grid-template-columns: 1fr;
  }
}

.founding-company-card {
  min-height: 214px;
  padding: 22px 18px;
  border: 1px solid rgba(191,169,135,.26);
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 30px rgba(45,45,46,.05);
  display: grid;
  align-content: start;
  gap: 10px;
  text-align: center;
}

.founding-company-card__logo-wrap {
  width: 100%;
  min-height: 58px;
  display: grid;
  place-items: center;
}

.founding-company-card__logo {
  max-width: 148px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.founding-company-card__logo-placeholder {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(191,169,135,.44);
  background: rgba(191,169,135,.1);
  color: var(--charcoal);
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
}

.founding-company-card h3 {
  color: var(--charcoal);
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.08;
  margin: 0;
}

.founding-company-card p {
  color: #5a554e;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.founding-companies-note {
  max-width: 900px;
  margin: 18px auto 0;
  color: #6a6358;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

@media (max-width: 1080px) {
  .founding-companies-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .founding-companies-grid {
    grid-template-columns: 1fr;
  }

  .founding-company-card {
    min-height: 0;
  }
}
.about-team-grid {
  grid-template-columns: 1.12fr .88fr;
  align-items: center;
}
.about-team-copy {
  margin-left: -46px;
  position: relative;
  z-index: 2;
  background: rgba(247,242,234,.92);
  backdrop-filter: blur(14px);
}
.about-strength-grid {
  grid-template-columns: repeat(3, 1fr);
}
.about-strength-grid article {
  padding: 28px;
}
/* Builders page: clean cards for support/reasons */
.about-strength-grid article {
  background: rgba(255,255,255,.94);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(45,45,46,.06);
}
@media (max-width: 960px) {
  .about-strength-grid { grid-template-columns: 1fr !important; }
  .about-strength-grid article { padding: 14px; }
  .inner-hero__content { max-width: 100% !important; }
}

/* Integrated support list: left aligned blocks on desktop, stacked on mobile */
.integrated-support-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
}
.integrated-support-list li {
  text-align: left;
  color: #5a554e;
  font-size: 15px;
  line-height: 1.7;
}
@media (max-width: 760px) {
  .integrated-support-list { grid-template-columns: 1fr; }
}

/* Ensure integrated-support-list remains left aligned even when inside editorial-centered containers */
.editorial-centered .integrated-support-list,
.editorial-centered .integrated-support-list li {
  text-align: left;
}

/* Ensure centered editorial headers align visually with centered boxes underneath */
.editorial-centered .about-section-header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.editorial-centered .about-strength-grid {
  /* Make the grid shrink-to-fit and be centered as a whole inside the editorial container.
     Using inline-grid lets the parent center it without forcing the grid columns to stretch full width. */
  display: inline-grid;
  justify-content: center;
  align-items: start;
  grid-template-columns: repeat(3, minmax(260px, 340px));
  gap: 18px;
  max-width: 1120px;
  margin-left: 0; /* centered via parent's text alignment */
  margin-right: 0;
}

/* Ensure article content stays left-aligned inside the centered grid */
.editorial-centered .about-strength-grid article { text-align: left; }
.about-strength-grid strong {
  color: var(--soft-gold);
  display: block;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 18px;
}
.about-strength-grid h3 {
  color: var(--charcoal);
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  line-height: 1.08;
  margin-bottom: 12px;
}
.about-strength-grid p {
  color: #5a554e;
  line-height: 1.75;
}

/* Ensure the specific "What We Support" section container centers its grid
   without impacting other editorial-centered sections. Keep header above the
   grid while centering the grid as a block. */
.about-strength-section .container.editorial-centered {
  /* keep normal document flow so the header stays above the grid */
  text-align: center;
}
.about-strength-section .container.editorial-centered .about-section-header {
  margin-bottom: 18px;
}
.about-strength-section .container.editorial-centered .about-strength-grid {
  margin: 0 auto; /* center the grid block */
  text-align: left; /* keep article content left-aligned inside the grid */
}
.about-cta-section {
  padding: 56px 0 96px;
}

.subfloor-gallery-section {
  padding: 18px 0 86px;
  background: var(--ivory);
}

.subfloor-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.subfloor-gallery-card {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(191,169,135,.28);
  box-shadow: 0 16px 42px rgba(45,45,46,.1);
  background: rgba(255,255,255,.76);
}

.subfloor-gallery-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease;
}

.subfloor-gallery-card:hover img {
  transform: scale(1.02);
}

/* Strategic Sales process profile block (Miguel) */
.sales-process-grid {
  align-items: start;
}

.sales-process-profile {
  display: grid;
  gap: 16px;
}

.sales-process-profile__photo {
  margin: 0;
  max-width: 340px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(191,169,135,.32);
  box-shadow: 0 20px 52px rgba(45,45,46,.14);
  background: rgba(255,255,255,.62);
}

.sales-process-profile__photo img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center top;
}

.sales-process-profile__card {
  border: 1px solid rgba(191,169,135,.28);
  border-radius: 20px;
  background: rgba(247,242,234,.88);
  backdrop-filter: blur(12px);
  padding: 20px;
}

.sales-process-profile__card .eyebrow {
  margin-bottom: 12px;
}

.sales-process-profile__card h3 {
  color: var(--charcoal);
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.08;
  margin-bottom: 10px;
}
/* Force 2-line layout on the profile name so on PC/desktop the credentials
   ("LLB, MBA") drop cleanly onto their own line instead of orphaning "MBA". */
.sales-process-profile__card h3 .sales-process-profile__name-line {
  display: block;
}
.sales-process-profile__card h3 .sales-process-profile__name-line--credentials {
  font-size: 0.7em;
  letter-spacing: 0.5px;
  color: var(--soft-gold, #BFA987);
  margin-top: 4px;
}

.sales-process-profile__card p {
  color: #5a554e;
  font-size: 15px;
  line-height: 1.75;
}

.sales-process-profile__card p + p {
  margin-top: 10px;
}

.about-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-radius: 30px;
  padding: clamp(30px, 5vw, 54px);
  background:
    radial-gradient(circle at 12% 18%, rgba(191,169,135,.22), transparent 32%),
    linear-gradient(135deg, var(--charcoal), var(--deep-forest));
  box-shadow: var(--shadow);
}
.about-cta-card h2 {
  max-width: 720px;
  color: var(--white);
  margin-bottom: 0;
}
.about-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.about-cta-actions .btn,
.about-cta-actions .btn-primary {
  min-width: 210px;
}
.projects-index {
  padding: 82px 0;
  background: var(--ivory);
}
.project-category {
  padding: 42px 0;
  border-bottom: 1px solid rgba(191,169,135,.28);
}
.project-category:nth-child(odd) {
  background: transparent;
}
.project-category:nth-child(even) {
  position: relative;
  z-index: 0;
}
.project-category:nth-child(even)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(29,29,30,.08), rgba(29,29,30,.04));
  z-index: -1;
}
.project-category__header {
  display: grid;
  grid-template-columns: .85fr 1fr;
  gap: 28px;
  margin-bottom: 24px;
}
.project-category__header h2 {
  color: var(--charcoal);
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
}
.project-category__header p {
  color: #5a554e;
  line-height: 1.75;
}
.project-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.project-card-grid--mosaic {
  grid-template-areas:
    'a b'
    'c c'
    'd d';
}
.project-card-grid--mosaic.project-card-grid--alt {
  grid-template-areas:
    'a a'
    'b c'
    'd d';
}
.project-card-grid--mosaic.project-card-grid--three {
  grid-template-areas:
    'a b'
    'c c';
}
.project-card {
  min-height: 260px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,.7);
  box-shadow: 0 16px 42px rgba(45,45,46,.1);
}
.project-card--a { grid-area: a; min-height: 150px; }
.project-card--b { grid-area: b; min-height: 150px; }
.project-card--c { grid-area: c; min-height: 228px; }
.project-card--d { grid-area: d; min-height: 178px; }

/* Sales & support in projects: lead profile intentionally compact */
.project-category:last-child .project-card--a {
  min-height: 250px;
  aspect-ratio: 1 / 1;
}
.project-category:last-child .project-card--a .project-card__button,
.project-category:last-child .project-card--a img {
  width: 100%;
  height: 100%;
}
.project-card__button {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease, filter .45s ease;
}
.project-card__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 20px;
  border: 2.1px solid rgba(191,169,135,0);
  background:
    linear-gradient(145deg, rgba(191,169,135,0), rgba(191,169,135,0.30));
  opacity: 0;
  transition: opacity .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.project-card__button:hover img,
.project-card__button:focus-visible img {
  transform: scale(1.04);
  filter: saturate(1.05) contrast(1.04);
}
.project-card__button:hover .project-card__veil,
.project-card__button:focus-visible .project-card__veil {
  opacity: 1;
  border-color: rgba(191,169,135,.96);
  box-shadow: inset 0 0 0 1px rgba(191,169,135,.82), 0 0 0 3.15px rgba(191,169,135,.34);
}

.project-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 30px;
}
.project-lightbox[hidden] {
  display: none;
}
.project-lightbox__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  background: rgba(14,18,16,.76);
  backdrop-filter: blur(5px);
  cursor: pointer;
}
.project-lightbox__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  width: min(1080px, 94vw);
  max-height: 90vh;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(191,169,135,.42);
  box-shadow: 0 22px 70px rgba(0,0,0,.38);
}
.project-lightbox__figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===================== */
/* HERO ENTRANCE ANIMATION */
/* ===================== */
.hero-content > *,
.hero-card {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(-38px);
  transition: opacity .85s ease, transform .85s cubic-bezier(.16, 1, .3, 1), filter .85s ease;
  will-change: opacity, transform, filter;
}
.hero-card {
  transform: translateX(95px);
  transition-delay: .55s;
}
.hero.hero-visible .hero-content > *,
.hero.hero-visible .hero-card {
  opacity: 1;
  filter: blur(0);
  transform: translate(0, 0);
}
.hero.hero-visible .hero-content > :nth-child(1) { transition-delay: .05s; }
.hero.hero-visible .hero-content > :nth-child(2) { transition-delay: .18s; }
.hero.hero-visible .hero-content > :nth-child(3) { transition-delay: .31s; }
.hero.hero-visible .hero-content > :nth-child(4) { transition-delay: .44s; }

.hero.hero-exit .hero-content > *,
.hero.hero-exit .hero-card {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(38px);
  transition-delay: 0s;
}
.hero.hero-exit .hero-card {
  transform: translateX(-70px);
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .reveal-up.visible,
  .reveal-up.exit-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* Builder Trust + testimonial carousels intentionally keep animating
     even under prefers-reduced-motion — they are slow ambient loops,
     not flashy motion, and many phones default this flag to ON which
     silently killed them. Only the .why::after twinkle stays disabled. */
  .why::after { animation: none; }
}

/* ===================== */
/* RESPONSIVE */
/* ===================== */
@media (max-width: 960px) {
  .audience-header {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
  }

  .audience-info-box {
    max-width: 680px;
  }

  .hero-grid,
  .intro-grid,
  .process-grid,
  .why-grid,
  .quote-layout,
  .about-page-grid,
  .service-page-grid,
  .about-overview-grid,
  .about-team-grid,
  .project-category__header {
    grid-template-columns: 1fr;
  }
  .founder-grid,
  .about-strength-grid {
    grid-template-columns: 1fr 1fr;
  }
  .about-team-copy {
    margin-left: 0;
  }
  .about-cta-card {
    display: grid;
  }
  .about-cta-actions {
    justify-content: flex-start;
  }
  .services { padding: 78px 0 84px; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-tile { min-height: 178px; }
  .service-tile:not(:nth-child(3n))::after { display: none; }
  .service-tile:nth-child(odd)::after {
    content: '';
    position: absolute;
    top: 24px;
    right: 0;
    bottom: 24px;
    width: 1px;
    display: block;
    background: linear-gradient(180deg, transparent, rgba(191,169,135,.38), transparent);
  }
  .service-tile:nth-child(-n+4)::before {
    content: '';
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(191,169,135,.38), transparent);
  }
  .hero-card img { height: 330px; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .audience-grid { grid-template-columns: 1fr; }
  .sales-process-profile__photo img { height: 200px; }
  .audience-card { min-height: auto; }
  .testimonials-header { display: grid; }
  .testimonial-tabs { width: fit-content; }
  .services-header, .gallery-header { display: block; }
  .nav-item-has-dropdown { width: 100%; }
  .nav-services-link {
    width: 100%;
  }
  .nav-services-link::after {
    content: '⌄';
    float: right;
    transform: none;
  }
  .nav-item-has-dropdown.is-open .nav-services-link::after {
    transform: rotate(180deg);
  }
  .nav-submenu {
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: 6px;
    padding: 6px 0 0;
    border: 0;
    border-top: 1px solid rgba(191,169,135,.24);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    opacity: 0;
    visibility: hidden;
    transform: none;
    display: none;
    padding-inline-start: 0;
  }
  .nav-item-has-dropdown.is-open .nav-submenu,
  .nav-item-has-dropdown:focus-within .nav-submenu {
    display: block;
    opacity: 1;
    visibility: visible;
  }
  .nav-submenu::before { content: none; }
  .nav-submenu a {
    display: block;
    width: 100%;
    padding: 10px 2px;
    color: rgba(255,255,255,.68);
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
    border-bottom: 1px solid rgba(191,169,135,.14);
    border-radius: 0;
  }
  .nav-submenu li:last-child a {
    border-bottom: 0;
  }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 280px; }
  .project-card-grid { grid-template-columns: 1fr 1fr; }
  .project-card-grid--mosaic,
  .project-card-grid--mosaic.project-card-grid--alt {
    grid-template-areas:
      'a b'
      'c c'
      'd d';
  }
  .project-card--a,
  .project-card--b { min-height: 140px; }
  .project-card--c { min-height: 220px; }
  .project-card--d { min-height: 170px; }
  .project-category:last-child .project-card--a,
  .project-category:last-child .project-card--a .project-card__button,
  .project-category:last-child .project-card--a img {
    width: 100%;
    height: 100%;
  }
  .subfloor-gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-item.large, .gallery-item.wide { grid-row: auto; grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .container { width: min(100% - 28px, 1180px); }
  .nav .logo img,
  .nav .logo .custom-logo,
  .nav .wp-block-site-logo img { height: 64px !important; }
  .nav .logo,
  .nav .wp-block-site-logo { padding: 10px 0 !important; }
  footer .wp-block-site-logo img,
  footer .custom-logo,
  footer .footer-brand img { height: 78px !important; }
  .hero { padding-top: 110px; }
  .hero-actions { flex-direction: column; }
  .btn, .btn-primary { width: 100%; }
  .proof-grid, .why-cards, .footer-grid, .audience-grid, .founder-grid, .about-strength-grid { grid-template-columns: 1fr; }
  .subfloor-gallery-grid { grid-template-columns: 1fr; }
  .sales-process-profile__photo img { height: 180px; }
  .audience-section { padding: 62px 0; }
  .audience-card { padding: 30px 24px; }
  .audience-info-box { padding: 20px; }
  .audience-btn { width: 100%; min-width: 0; }
  .intro-image img, .process-visual img { height: 380px; }
  .about-page-image--large img,
  .about-page-image--wide img {
    min-height: 390px;
  }
  .about-proof-card {
    position: static;
    max-width: none;
    margin-top: 14px;
  }
  .services { padding: 66px 0; }
  .services-grid { grid-template-columns: 1fr; }
  .service-tile { min-height: auto; padding: 30px 18px; }
  .service-tile::after { display: none !important; }
  .service-tile:nth-child(-n+5)::before {
    content: '';
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(191,169,135,.36), transparent);
  }
  .service-icon-badge { width: 62px; height: 62px; margin-bottom: 16px; }
  .service-icon-badge img { width: 30px; height: 30px; }
  .inner-hero,
  .error-hero { padding: 110px 0 60px; }
  .inner-content-section { padding: 56px 0 72px; }
  .quote-form,
  .project-card-grid { grid-template-columns: 1fr; }
  .project-card-grid--mosaic,
  .project-card-grid--mosaic.project-card-grid--alt {
    grid-template-areas:
      'a'
      'b'
      'c'
      'd';
  }
  .project-card--a,
  .project-card--b,
  .project-card--c,
  .project-card--d { min-height: 200px; }
  .project-category:last-child .project-card--a,
  .project-category:last-child .project-card--a .project-card__button,
  .project-category:last-child .project-card--a img {
    width: 100%;
    height: 100%;
  }
  .project-lightbox { padding: 14px; }
  .subfloor-gallery-card img { height: 220px; }
  .trusted-logo-card { width: 190px; }
}

/* ===================================================== */
/* APPROVED DESIGN — PREMIUM REFINEMENTS (Phase 1 port)    */
/* ===================================================== */

/* Service feature card — premium gold border that grows on hover */
.service-feature {
  position: relative;
}
.service-feature::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--soft-gold);
  transition: width .45s ease;
  z-index: 4;
  pointer-events: none;
}
.service-feature::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1.5px;
  height: 0;
  background: var(--soft-gold);
  transition: height .35s ease .45s;
  z-index: 4;
  pointer-events: none;
}
.service-feature .service-border-top,
.service-feature .service-border-left {
  position: absolute;
  background: var(--soft-gold);
  z-index: 4;
  pointer-events: none;
}
.service-feature .service-border-top {
  right: 0;
  top: 0;
  width: 0;
  height: 1.5px;
  transition: width .45s ease .80s;
}
.service-feature .service-border-left {
  left: 0;
  top: 0;
  width: 1.5px;
  height: 0;
  transition: height .35s ease 1.25s;
}
.service-feature:hover::before { width: 100%; }
.service-feature:hover::after { height: 100%; }
.service-feature:hover .service-border-top { width: 100%; }
.service-feature:hover .service-border-left { height: 100%; }

/* Stretched-link overlay — makes the entire service card on the home
   "SERVICES UP CLOSE" stack navigate to that service's portfolio.
   Sits on top of the photo and text via z-index but stays transparent.
   Important: z-index is BELOW the gold border decorations (z-index:4) is
   fine because those have pointer-events:none, so they don't compete for
   clicks; the link still receives the entire card's pointer events. */
.service-feature__link {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: block;
  text-decoration: none;
  color: transparent;            /* hide any aria text in some readers */
  background: transparent;
  cursor: inherit;               /* maple-leaf pointer applies via global rule */
}
.service-feature__link:focus-visible {
  outline: 2px solid var(--soft-gold, #BFA987);
  outline-offset: -4px;
  border-radius: 12px;
}
/* On hover, give a subtle hint that the card is clickable — title shifts
   gold (no zoom, matches the new Selected Work pattern). */
.service-feature:hover .service-content h3,
.service-feature:focus-within .service-content h3 {
  color: var(--soft-gold, #BFA987);
  transition: color 0.3s ease;
}

/* Hero entrance animation initial state (blur + translateY) */
.hero .hero-content > *,
.hero .hero-card {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(-38px);
  transition: opacity .85s ease, transform .85s cubic-bezier(.16, 1, .3, 1), filter .85s ease;
  will-change: opacity, transform, filter;
}
.hero .hero-card {
  transform: translateX(95px);
  transition-delay: .55s;
}

/* WHAT WE DO compact (after banner) — 2 rows, horizontal icon + text
   GREEN BAND (deep forest) with GOLD accents and WHITE text — replaces
   the standalone proof strip which was removed per client feedback. */
.what-we-do-compact {
  background: var(--deep-forest);
  color: var(--white);
  padding: 64px 0 64px;
}
.what-we-do-compact .compact-header {
  margin-bottom: 36px;
}
.what-we-do-compact .compact-header .eyebrow {
  color: var(--soft-gold);
}
.what-we-do-compact .compact-header h2,
.what-we-do-compact .compact-header .wp-block-heading {
  color: var(--white);
  font-family: 'Playfair Display', serif;
}
.what-we-do-compact .compact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.what-we-do-compact .compact-card {
  display: flex;
  flex-direction: column;        /* stack: icon on top, text below */
  align-items: center;           /* center both icon and text horizontally */
  text-align: center;            /* center all card text */
  gap: 14px;
  padding: 22px 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(191,169,135,.28);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  transition: .25s ease;
  color: var(--white);
}
.what-we-do-compact .compact-card:hover {
  transform: translateY(-3px);
  border-color: var(--soft-gold);
  background: rgba(255,255,255,.085);
  box-shadow: 0 22px 42px rgba(0,0,0,.30);
}
.what-we-do-compact .compact-icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(191,169,135,.18);
  color: var(--soft-gold);
  flex: 0 0 54px;
  border: 1px solid rgba(191,169,135,.32);
}
.what-we-do-compact .compact-icon svg {
  width: 26px;
  height: 26px;
}
.what-we-do-compact .compact-text h3 {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--white);
  margin: 0 0 4px;
  line-height: 1.2;
}
.what-we-do-compact .compact-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.74);
}

@media (max-width: 960px) {
  .what-we-do-compact .compact-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .what-we-do-compact .compact-grid {
    grid-template-columns: 1fr;
  }
}

/* Audience cards — confirm approved sizing (560px+ min-height) */
.audience-card {
  min-height: 570px;
}
@media (max-width: 960px) {
  .audience-card { min-height: auto; }
}

/* Gallery mosaic — large + wide variants from approved design */
.gallery-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  grid-auto-rows: 250px;
  gap: 18px;
}
.gallery-item {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 45px rgba(45,45,46,.13);
}
.gallery-item.large { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .55s ease;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  right: 18px;
  background: rgba(45,45,46,.84);
  color: var(--white);
  padding: 14px 16px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 800;
}
.gallery-caption span {
  color: var(--soft-gold);
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
@media (max-width: 960px) {
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 280px; }
  .gallery-item.large, .gallery-item.wide { grid-row: auto; grid-column: auto; }
}

/* CTA "Ready to start your next project?" — premium dark with gold radial */
.cta-ready {
  padding: 110px 0;
  background: var(--charcoal);
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-ready::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(191,169,135,.22), transparent 42%);
  pointer-events: none;
}
.cta-ready .cta-inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
}
.cta-ready h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(42px, 6vw, 76px);
  line-height: .98;
  margin-bottom: 20px;
  color: var(--white);
}
.cta-ready h2 .accent {
  color: var(--soft-gold);
}
.cta-ready p {
  color: rgba(255,255,255,.7);
  font-size: 18px;
  line-height: 1.75;
  margin-bottom: 34px;
}

/* Why section — gradient with decorative circle */
.why-section {
  background: linear-gradient(135deg, var(--deep-forest), var(--slate-teal));
  color: var(--white);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}
.why-section::before {
  content: '';
  position: absolute;
  right: -180px;
  top: -180px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(191,169,135,.22);
  border-radius: 50%;
  pointer-events: none;
}
.why-section .why-grid {
  position: relative;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 50px;
  align-items: start;
}
.why-section .why-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.why-section .why-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 28px;
  min-height: 190px;
}
.why-section .why-card strong {
  display: block;
  color: var(--soft-gold);
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  margin-bottom: 14px;
}
.why-section .why-card h4 {
  margin-bottom: 10px;
  font-size: 17px;
  color: var(--white);
}
.why-section .why-card p {
  color: rgba(255,255,255,.64);
  line-height: 1.65;
  font-size: 14px;
}
@media (max-width: 960px) {
  .why-section .why-grid,
  .why-section .why-cards {
    grid-template-columns: 1fr;
  }
}

/* Process section — numbered steps */
.process-section {
  padding: 110px 0;
  background: var(--ivory);
}
.process-section .process-grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 60px;
  align-items: center;
}
.process-section .process-visual {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(45,45,46,.18);
}
.process-section .process-visual img {
  height: 620px;
  width: 100%;
  object-fit: cover;
}
.process-section .steps {
  display: grid;
  gap: 16px;
  counter-reset: step;
}
.process-section .step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px;
  background: var(--white);
  border-radius: 18px;
  border: 1px solid rgba(191,169,135,.28);
}
.process-section .step::before {
  content: '0' counter(step);
  height: 58px;
  border-radius: 16px;
  background: var(--charcoal);
  color: var(--soft-gold);
  display: grid;
  place-items: center;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
}
.process-section .step h4 {
  font-size: 18px;
  margin-bottom: 5px;
  color: var(--charcoal);
}
.process-section .step p {
  color: #686058;
  line-height: 1.65;
  font-size: 14px;
}
@media (max-width: 960px) {
  .process-section .process-grid { grid-template-columns: 1fr; }
  .process-section .process-visual img { height: 380px; }
}

/* Intro / Who We Are — pill caption on image */
.intro-section {
  background: var(--ivory);
  padding: 110px 0;
}
.intro-section .intro-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.intro-section .intro-image {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(45,45,46,.2);
  position: relative;
}
.intro-section .intro-image img {
  height: 560px;
  width: 100%;
  object-fit: cover;
}
.intro-section .intro-image .intro-pill {
  position: absolute;
  left: 28px;
  bottom: 28px;
  background: rgba(45,45,46,.86);
  color: var(--soft-gold);
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .6px;
  font-size: 13px;
  text-transform: uppercase;
}
@media (max-width: 960px) {
  .intro-section .intro-grid { grid-template-columns: 1fr; }
  .intro-section .intro-image img { height: 380px; }
}

/* Proof strip — 4 stats with gold vertical separators */
.proof-strip {
  background: var(--deep-forest);
  color: var(--white);
  padding: 28px 0;
}
.proof-strip .proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.proof-strip .proof-item {
  border-left: 1px solid rgba(191,169,135,.45);
  padding-left: 18px;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,.82);
}
.proof-strip .proof-item span {
  color: var(--soft-gold);
  display: block;
  margin-bottom: 4px;
}
@media (max-width: 960px) {
  .proof-strip .proof-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .proof-strip .proof-grid { grid-template-columns: 1fr; }
}

/* Header nav — Home link styling consistency */
.nav-links li.menu-item-home a,
.nav-links li a[href$="/"][rel="home"] {
  color: var(--soft-gold);
}

/* FSE Block-editor compatibility — map approved classes to wp blocks */
.wp-block-group.has-charcoal-background-color { color: var(--white); }
.wp-block-group.has-deep-forest-background-color { color: var(--white); }
.wp-block-group.has-slate-teal-background-color { color: var(--white); }

/* Blog (single + archive) — minimal premium typography */
.blog-post-card {
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(191,169,135,.22);
  box-shadow: 0 14px 38px rgba(45,45,46,.07);
  transition: .25s ease;
}
.blog-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(45,45,46,.12);
}
.blog-post-card .post-thumbnail img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}
.blog-post-card .post-body {
  padding: 24px 26px 28px;
}
.blog-post-card .post-meta {
  font-size: 12px;
  color: var(--soft-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 800;
  margin-bottom: 10px;
}
.blog-post-card h2 a,
.blog-post-card h3 a {
  color: var(--charcoal);
}
.blog-single .entry-content {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 56px 0 80px;
  font-size: 18px;
  line-height: 1.85;
  color: var(--text);
}
.blog-single .entry-content h2,
.blog-single .entry-content h3 {
  margin-top: 2em;
}
.blog-single .entry-content p {
  margin-bottom: 1.4em;
}
.blog-single .entry-content img,
.blog-single .entry-content figure {
  border-radius: 18px;
  overflow: hidden;
  margin: 2em 0;
}

/* Blog archive header */
.blog-archive-header {
  padding: 140px 0 60px;
  background: var(--charcoal);
  color: var(--white);
  text-align: center;
}
.blog-archive-header h1 {
  color: var(--white);
  margin-bottom: 12px;
}
.blog-archive-header p {
  color: rgba(255,255,255,.7);
  max-width: 640px;
  margin: 0 auto;
  font-size: 17px;
}


/* ===================================================== */
/* APPROVED DESIGN OVERRIDES (post-client-feedback pass)  */
/* ===================================================== */

/* SERVICES STACK — replace old green/grid layout with the approved
   zig-zag charcoal layout from the proposal. */
section.services {
  background: var(--charcoal) !important;
  color: var(--white);
  padding: 110px 0 !important;
  position: relative;
  overflow: hidden;
}
section.services::before {
  display: none;
}
section.services .container {
  position: relative;
  z-index: 1;
}
.service-stack {
  display: grid;
  gap: 26px;
}
.service-feature {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 0;
  overflow: hidden;
  border-radius: 0;
  background: #222224;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 28px 80px rgba(0,0,0,.22);
}
.service-feature:nth-child(even) {
  grid-template-columns: .92fr 1.08fr;
}
.service-feature:nth-child(even) .service-media {
  order: 2;
}
.service-feature .service-media {
  min-height: 360px;
  position: relative;
  overflow: hidden;
}
.service-feature .service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: .6s ease;
  border-radius: 0;
}
.service-feature:hover .service-media img {
  transform: scale(1.045);
}
.service-feature .service-content {
  padding: clamp(28px, 4vw, 54px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
}
.service-feature .service-number {
  color: var(--soft-gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.service-feature .service-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.02;
  margin: 0 0 16px;
  color: var(--white);
}
.service-feature .service-content p {
  color: rgba(255,255,255,.66);
  line-height: 1.75;
  font-size: 15px;
  margin: 0 0 18px;
}
.service-feature .service-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.service-feature .service-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 700;
}
.service-feature .service-list li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--soft-gold);
  flex: 0 0 auto;
}

@media (max-width: 960px) {
  .service-feature,
  .service-feature:nth-child(even) {
    grid-template-columns: 1fr;
  }
  .service-feature:nth-child(even) .service-media {
    order: initial;
  }
  .service-feature .service-media {
    min-height: 280px;
  }
}

/* Faster reveal-up trigger so sections are visible while scrolling */
.reveal-up {
  transition-duration: .55s !important;
}

/* PROCESS STEPS — shrink step cards so 4 fit alongside the image */
.process-section .process-grid {
  align-items: stretch;
}
.process-section .process-visual img {
  height: 100%;
  max-height: 580px;
  min-height: 440px;
}
.process-section .steps {
  gap: 12px;
}
.process-section .step {
  grid-template-columns: 46px 1fr;
  gap: 14px;
  padding: 14px 16px;
}
.process-section .step::before {
  height: 46px;
  font-size: 18px;
  border-radius: 12px;
}
.process-section .step h4 {
  font-size: 16px;
  margin-bottom: 3px;
}
.process-section .step p {
  font-size: 13px;
  line-height: 1.55;
}

/* CHOOSE YOUR PATH — make sure audience cards are at proper size */
.audience-section {
  padding: 110px 0;
}
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(45,45,46,.14);
  background: var(--white);
}
@media (max-width: 960px) {
  .audience-grid {
    grid-template-columns: 1fr;
  }
}

/* Page overflow safety — never let any block punch past viewport width */
html, body {
  overflow-x: hidden;
}
.site-main, .site-main > * {
  max-width: 100vw;
}

/* ===================================================== */
/* CLIENT FEEDBACK ROUND 2 — Detailed polish              */
/* ===================================================== */

/* === HEADER NAV — all white, "Contact" as gold-fill rounded button === */
.nav .wp-block-navigation a,
.nav .wp-block-navigation .wp-block-navigation-item__content {
  color: #ffffff !important;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.nav .wp-block-navigation a:hover {
  color: var(--soft-gold) !important;
}
.nav .wp-block-navigation .nav-cta > a,
.nav .wp-block-navigation .nav-cta .wp-block-navigation-item__content {
  /* Ghost gold button — transparent fill, solid gold border, gold text.
     Semi-square corners. Stays this way on every page EXCEPT /contact/
     where the .current-menu-item rule below inverts it to solid gold. */
  background: transparent !important;
  border: 1.5px solid var(--soft-gold) !important;
  color: var(--soft-gold) !important;
  padding: 10px 22px !important;
  border-radius: 8px !important;
  transition: .25s ease;
}
.nav .wp-block-navigation .nav-cta > a:hover,
.nav .wp-block-navigation .nav-cta .wp-block-navigation-item__content:hover {
  background: rgba(191, 169, 135, 0.18) !important;
  border-color: var(--soft-gold) !important;
  color: var(--soft-gold) !important;
  transform: translateY(-2px);
}
/* Make sure the inner <span class="...item__label"> inherits the color of
   its parent anchor (otherwise WP's default label color rule can override). */
.nav .wp-block-navigation .nav-cta .wp-block-navigation-item__label {
  color: inherit !important;
}

/* ACTIVE STATE — when the user is ON the Contact page (/request-free-quote/),
   the CTA button inverts: 100% solid gold fill + charcoal text. This gives
   a clear "you are here" affordance distinct from the default ghost style.
   `.current-menu-item` is added by markActiveMenuItems() in main.js (or by
   WP automatically when the menu item URL matches the current page). */
.nav .wp-block-navigation .nav-cta.current-menu-item > a,
.nav .wp-block-navigation .nav-cta.current-menu-item .wp-block-navigation-item__content {
  background: var(--soft-gold) !important;
  border-color: var(--soft-gold) !important;
  color: var(--charcoal) !important;
}
.nav .wp-block-navigation .nav-cta.current-menu-item .wp-block-navigation-item__label {
  color: var(--charcoal) !important;
}
/* Hover while active: stay solid gold with charcoal text (no inversion
   back to ghost on hover). */
.nav .wp-block-navigation .nav-cta.current-menu-item > a:hover,
.nav .wp-block-navigation .nav-cta.current-menu-item .wp-block-navigation-item__content:hover {
  background: #d1ba93 !important;
  color: var(--charcoal) !important;
}

/* === HERO — restored colorization + vertical wide buttons + full-width bg === */
header.hero {
  min-height: 100vh;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}
header.hero .hero-bg-slider {
  position: absolute !important;
  inset: 0 !important;
  z-index: -2;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
header.hero .hero-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.1s ease, transform 4s ease;
}
header.hero .hero-bg-slide.active {
  opacity: 1;
  animation: ce-hero-slide-zoom 4.5s ease-out forwards;
}
header.hero .hero-bg-slider::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(45,45,46,.94) 0%, rgba(45,45,46,.78) 38%, rgba(45,45,46,.28) 100%);
  z-index: 2;
}
header.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 20%, rgba(191,169,135,.28), transparent 34%);
  z-index: -1;
  pointer-events: none;
}
header.hero .container.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 3;
}
header.hero .hero-content > .eyebrow,
header.hero .hero-content > p.eyebrow {
  color: var(--soft-gold) !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.4);
}
header.hero h1 {
  color: #ffffff !important;
  font-family: 'Playfair Display', serif;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}
header.hero h1 span {
  color: var(--soft-gold) !important;
  display: inline;
}
header.hero p:not(.eyebrow) {
  color: rgba(255,255,255,.88) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* Vertical stacked, wide buttons */
header.hero .hero-actions,
header.hero .wp-block-buttons.hero-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  align-items: flex-start !important;
  max-width: 360px;
}
header.hero .hero-actions .wp-block-button {
  width: 100%;
}
header.hero .hero-actions .wp-block-button .wp-block-button__link {
  width: 100%;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .8px;
  text-transform: uppercase;
}
/* Primary (first) button: gold fill, black text */
header.hero .hero-actions .wp-block-button:nth-child(1) .wp-block-button__link {
  background: var(--soft-gold);
  color: var(--charcoal);
  border: 1px solid var(--soft-gold);
}
header.hero .hero-actions .wp-block-button:nth-child(1) .wp-block-button__link:hover {
  background: #d1ba93;
  transform: translateY(-2px);
}
/* Secondary (second) button: transparent, gold border + gold text */
header.hero .hero-actions .wp-block-button:nth-child(2) .wp-block-button__link {
  background: transparent;
  color: var(--soft-gold);
  border: 1.5px solid var(--soft-gold);
}
header.hero .hero-actions .wp-block-button:nth-child(2) .wp-block-button__link:hover {
  background: rgba(191,169,135,.12);
  transform: translateY(-2px);
}

/* === SECTION GAPS — collapse to zero (sections touch) === */
.site-main > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.site-main .wp-block-group + .wp-block-group {
  margin-top: 0;
}

/* === WHAT WE DO COMPACT — gold eyebrow, tighter spacing, horizontal dividers === */
.what-we-do-compact {
  padding: 56px 0 56px;
}
.what-we-do-compact .compact-header {
  margin-bottom: 22px;
}
.what-we-do-compact .compact-header .eyebrow {
  color: var(--soft-gold) !important;
  margin-bottom: 8px;
}
.what-we-do-compact .compact-header h2,
.what-we-do-compact .compact-header .wp-block-heading {
  margin-top: 0 !important;
  margin-bottom: 0;
  font-size: clamp(24px, 3vw, 36px);
  color: #ffffff;
}
.what-we-do-compact .compact-grid {
  gap: 0 !important;
  grid-template-columns: repeat(3, 1fr);
}
.what-we-do-compact .compact-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 22px 22px !important;
  position: relative;
  transition: background .25s ease;
}
/* Vertical divider between items in the same row (right side).
   Default rule = 3-column grid: skip every 3rd (last in row). */
.what-we-do-compact .compact-card:not(:nth-child(3n))::after {
  content: '';
  position: absolute;
  top: 18px;
  bottom: 18px;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(191,169,135,.42), transparent);
}
/* Horizontal divider under the first row (between row 1 and row 2). 3-col grid. */
.what-we-do-compact .compact-card:nth-child(-n+3)::before {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(191,169,135,.42), transparent);
}

/* 4-column variant — fix dividers so card 4 doesn't lose its left-side
   divider and the single row doesn't get a stray horizontal line at the bottom. */
.what-we-do-compact .compact-grid--4col .compact-card::after {
  content: '';
  position: absolute;
  top: 18px;
  bottom: 18px;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(191,169,135,.42), transparent);
}
/* Skip the right-side divider only on the LAST card of each row of 4 */
.what-we-do-compact .compact-grid--4col .compact-card:nth-child(4n)::after,
.what-we-do-compact .compact-grid--4col .compact-card:last-child::after {
  content: none;
}
/* Remove the horizontal bottom divider — only one row of 4, no second row below */
.what-we-do-compact .compact-grid--4col .compact-card::before {
  content: none;
}
/* Hover: subtle gold background */
.what-we-do-compact .compact-card:hover {
  background: rgba(191,169,135,.08) !important;
  transform: none !important;
}
.what-we-do-compact .compact-card:hover .compact-icon {
  background: rgba(191,169,135,.32);
  border-color: var(--soft-gold);
}

/* === CHOOSE YOUR PATH — taller cards, Playfair, gold eyebrow, left-aligned horizontal === */
.audience-section {
  padding: 110px 0;
  background: var(--ivory);
}
.audience-section .container {
  max-width: 1180px;
}
.audience-section .audience-header {
  max-width: 100%;
  margin-bottom: 32px;
  text-align: left;
}
.audience-section .audience-header .eyebrow {
  color: var(--soft-gold) !important;
  margin-bottom: 14px;
}
.audience-section .audience-header h2,
.audience-section .audience-header .section-title,
.audience-section .audience-header .wp-block-heading {
  font-family: 'Playfair Display', serif !important;
  color: var(--charcoal) !important;
  font-size: clamp(34px, 5vw, 62px) !important;
  line-height: 0.98 !important;
  letter-spacing: -1px !important;
  text-align: left;
  margin: 0 0 14px;
}
.audience-section .audience-header p {
  color: #635d55;
  font-size: 17px;
  line-height: 1.8;
  margin: 0;
  text-align: left;
}
/* Cards taller per proposal */
.audience-card {
  min-height: 620px;
}
.audience-card h3 {
  font-family: 'Playfair Display', serif !important;
  color: inherit;
}
/* Active builders card: text remains readable on dark green */
.audience-card.builders-card,
.audience-card.builders-card.active {
  color: #ffffff;
}
.audience-card.builders-card p {
  color: rgba(255,255,255,.78) !important;
}
.audience-card.builders-card .audience-list li {
  color: rgba(255,255,255,.88) !important;
}
.audience-card.builders-card h3 {
  color: #ffffff !important;
}

/* === SERVICES STACK — bring back rounded corners === */
.service-feature {
  border-radius: 28px !important;
}
.service-feature .service-media {
  border-radius: 0;
}
.service-feature .service-media img {
  border-radius: 0;
}

/* === SERVICES STACK — uniform image height across all 6 cards ===
   Service 06 has longer body copy, so grid stretch was making its row
   taller than the rest. We lock every service-media to a fixed height
   so all 6 photos look the same size visually, no card grotesquely tall. */
.services .service-stack .service-feature {
  align-items: stretch;
}
.services .service-stack .service-feature .service-media {
  height: 380px !important;
  min-height: 0 !important;
  max-height: 380px !important;
  align-self: stretch;
}
.services .service-stack .service-feature .service-media img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}
@media (max-width: 1024px) {
  .services .service-stack .service-feature .service-media {
    height: clamp(220px, 42vw, 320px) !important;
    max-height: clamp(220px, 42vw, 320px) !important;
  }
}

/* === PROCESS — image fully visible, machine centered === */
.process-section .process-visual img {
  object-position: center 65%;
  object-fit: cover;
  min-height: 480px;
}

/* === FOOTER — white text, thicker headers, darker bg, no gaps === */
footer.wp-block-group,
.site-main + footer,
footer[class*="site-footer"] {
  background: #1a1a1b !important;
}
footer h4,
footer .wp-block-heading {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 2.4px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}
footer p,
footer .wp-block-paragraph,
footer .wp-block-navigation a,
footer a {
  color: rgba(255,255,255,.78) !important;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
}
footer .wp-block-navigation a:hover,
footer a:hover {
  color: var(--soft-gold) !important;
}
footer strong {
  color: #ffffff !important;
  font-weight: 700;
}
/* No gaps between footer columns */
footer .footer-grid {
  gap: 32px !important;
}
.site-main {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.site-main + footer {
  margin-top: 0 !important;
}

@media (max-width: 960px) {
  .what-we-do-compact .compact-grid {
    grid-template-columns: 1fr 1fr;
  }
  .what-we-do-compact .compact-card:not(:nth-child(3n))::after {
    display: none;
  }
  .what-we-do-compact .compact-card:not(:nth-child(2n))::after {
    content: '';
    position: absolute;
    top: 18px;
    bottom: 18px;
    right: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(191,169,135,.42), transparent);
  }
  .what-we-do-compact .compact-card::before {
    display: none;
  }
}
@media (max-width: 560px) {
  .what-we-do-compact .compact-grid {
    grid-template-columns: 1fr;
  }
  .what-we-do-compact .compact-card::after {
    display: none !important;
  }
  .what-we-do-compact .compact-card:not(:last-child)::before {
    content: '';
    display: block;
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(191,169,135,.42), transparent);
  }
}

/* ===================================================== */
/* CLIENT FEEDBACK ROUND 3 — Final polish                  */
/* ===================================================== */

/* HERO BG SLIDER FULL WIDTH — break out of global padding so the
   slider covers the entire viewport width (left to right, no gaps). */
header.hero.has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
header.hero {
  position: relative;
}
header.hero .container.hero-grid {
  width: min(1180px, calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
header.hero .hero-bg-slider {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw);
  z-index: -2;
}

/* HERO CARD — vertically centered with text on the left */
header.hero .container.hero-grid {
  align-items: center !important;
}
header.hero .hero-card {
  align-self: center !important;
}

/* HERO SECONDARY BUTTON — force transparent + gold border + gold text */
header.hero .hero-actions .wp-block-button.hero-cta-homeowners .wp-block-button__link,
header.hero .hero-actions .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--soft-gold) !important;
  border: 1.5px solid var(--soft-gold) !important;
}
header.hero .hero-actions .wp-block-button.hero-cta-homeowners .wp-block-button__link:hover,
header.hero .hero-actions .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(191,169,135,.14) !important;
  color: var(--soft-gold) !important;
  border-color: var(--soft-gold) !important;
}

/* REDUCE SECTION VERTICAL PADDING to compress visual gaps */
section.what-we-do-compact,
.what-we-do-compact {
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}
.audience-section {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}
.intro-section {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}
section.services {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.process-section {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.why-section {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.gallery {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.cta-ready {
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}

/* WHAT WE DO COMPACT — even tighter inside */
.what-we-do-compact .compact-header {
  margin-bottom: 16px !important;
}
.what-we-do-compact .compact-header .eyebrow {
  margin-bottom: 6px !important;
}
.what-we-do-compact .compact-card {
  padding: 18px 22px !important;
}

/* CHOOSE YOUR PATH — restored description above cards, taller cards, Playfair on H3 */
.audience-section .audience-header {
  margin-bottom: 36px !important;
}
.audience-section .audience-description {
  max-width: 720px;
}
.audience-card {
  min-height: 620px !important;
}
.audience-card h3,
.audience-card .audience-card__title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  color: inherit;
}
/* Make Builders card title definitely white on the dark green */
.audience-card.builders-card h3 {
  color: #ffffff !important;
}
.audience-card.clients-card h3 {
  color: var(--charcoal) !important;
}
.audience-card.clients-card.active h3 {
  color: #ffffff !important;
}

/* PROCESS — image fully visible: landscape aspect + center crop */
.process-section .process-visual {
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 16/11;
  max-height: 540px;
  height: auto;
  min-height: 0;
}
.process-section .process-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  min-height: 0 !important;
  max-height: none;
  display: block;
}

/* CTA — title in 2 lines: white "Ready to start your" on top, gold "next project?" below */
.cta-ready .cta-inner h2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.cta-ready .cta-inner .cta-line {
  display: block;
}
.cta-ready .cta-inner .cta-line--white {
  color: #ffffff;
}
.cta-ready .cta-inner .cta-line--gold {
  color: var(--soft-gold);
}

/* FOOTER — tighter top + bottom padding */
footer.wp-block-group,
.site-main + footer,
footer[class*="site-footer"] {
  padding-top: 36px !important;
  padding-bottom: 20px !important;
}
footer .footer-bottom {
  margin-top: 22px !important;
  padding-top: 16px !important;
}
/* Round 6 override removed — was blocking the approved hero entrance
   animation. The animation comes from the cascade at line 2745:
   .hero-content > * starts at opacity 0, blur 10, translateY(-38px)
   .hero-card starts at translateX(95px) (slides in from the right)
   .hero.hero-visible (added by JS) transitions all to final position. */

/* HERO BUTTONS — final specificity bump for outline button */
html body header.hero .hero-actions .wp-block-button.hero-cta-homeowners > .wp-block-button__link,
html body header.hero .hero-actions .wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--soft-gold) !important;
  border: 1.5px solid var(--soft-gold) !important;
}
html body header.hero .hero-actions .wp-block-button.hero-cta-homeowners > .wp-block-button__link:hover,
html body header.hero .hero-actions .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: rgba(191,169,135,.14) !important;
  color: var(--soft-gold) !important;
  border-color: var(--soft-gold) !important;
}

/* ===================================================== */
/* CLIENT FEEDBACK ROUND 4 — Layout + slug-collision fix  */
/* ===================================================== */

/* Choose Your Path — undo legacy 2-column grid layout on audience-header */
.audience-section .audience-header {
  display: block !important;
  grid-template-columns: none !important;
  text-align: left !important;
  margin-bottom: 36px !important;
}
.audience-section .audience-header .eyebrow,
.audience-section .audience-header h2,
.audience-section .audience-header .section-title,
.audience-section .audience-header p.audience-description {
  text-align: left !important;
  width: 100%;
}
.audience-section .audience-header .eyebrow {
  display: inline-flex !important;
  margin-bottom: 14px !important;
}
.audience-section .audience-header h2,
.audience-section .audience-header .wp-block-heading {
  max-width: none !important;
  margin: 0 0 16px !important;
}
.audience-section .audience-header .audience-description {
  max-width: 720px;
  margin: 0 !important;
}

/* Process visual — keep within grid column (remove aspect-ratio that
   forced width > column when combined with max-height) */
.process-section .process-visual {
  aspect-ratio: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 440px !important;
  max-height: 540px !important;
}
.process-section .process-visual img {
  width: 100% !important;
  height: 100% !important;
  min-height: 440px !important;
  max-height: 540px !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* ===================================================== */
/* CLIENT FEEDBACK ROUND 5                                */
/* ===================================================== */

/* FOOTER — revert overly-bold headers; keep tight spacing only */
footer h4,
footer .wp-block-heading,
.site-main + footer h4,
footer[class*="site-footer"] h4 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;       /* tighter — was 14px, was too much air below the title */
  color: #ffffff !important;
}

/* FOOTER — compact contact paragraphs (Phone / Email / Address / Service Area).
   Default <p> margins were stacking too much vertical space between blocks.
   Also tighten the Navigation / Services list-item gap. */
footer .footer-col p,
footer .footer-contact p,
footer p.wp-block-paragraph {
  margin: 0 0 10px !important;         /* tight vertical rhythm between contact blocks */
}
footer .footer-col p:last-child,
footer .footer-contact p:last-child {
  margin-bottom: 0 !important;
}
footer .footer-brand p {
  margin: 0 !important;                /* brand paragraph snug under logo */
}
footer .footer-links {
  gap: 6px !important;                 /* tighter Navigation / Services list spacing — was 10px */
}
footer .footer-links li {
  margin: 0 !important;
}

/* GOLD DIVIDER between Builder Trust and CTA Ready */
.trusted-builders + section.cta-ready,
.trusted-builders + .wp-block-group.cta-ready {
  position: relative;
}
.trusted-builders + section.cta-ready::before,
.trusted-builders + .wp-block-group.cta-ready::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 40px));
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--soft-gold) 12%, var(--soft-gold) 88%, transparent);
  box-shadow: 0 0 14px rgba(191,169,135,0.55);
  z-index: 5;
}

/* PROCESS — final fix: anchor image to its grid column properly */
.process-section .container.process-grid {
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
  gap: 60px !important;
  align-items: center !important;
}
.process-section .process-visual {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 440px !important;
  max-height: 540px !important;
  aspect-ratio: auto !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  position: relative;
}
.process-section .process-visual img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* CHOOSE YOUR PATH — both audience labels in Playfair serif (keep colors) */
.audience-card .audience-label {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

/* HOMEOWNERS card — give it warm-clay bg so white text matches Builders */
.audience-card.clients-card {
  background: var(--warm-clay) !important;
  color: #ffffff !important;
}
.audience-card.clients-card .audience-icon {
  background: rgba(255,255,255,.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.32);
}
.audience-card.clients-card .audience-label {
  color: #ffffff !important;
}
.audience-card.clients-card h3 {
  color: #ffffff !important;
}
.audience-card.clients-card p {
  color: rgba(255,255,255,.82) !important;
}
.audience-card.clients-card .audience-list li {
  color: rgba(255,255,255,.88) !important;
}
.audience-card.clients-card .audience-list li::before {
  color: #ffffff !important;
  border-color: #ffffff !important;
}
.audience-card.clients-card .audience-btn {
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid #ffffff !important;
}
.audience-card.clients-card .audience-btn:hover {
  background: var(--soft-gold) !important;
  color: var(--charcoal) !important;
  border-color: var(--soft-gold) !important;
}

/* When Builders card is active keep its gold border */
.audience-card.active.builders-card {
  border-color: var(--soft-gold) !important;
}
.audience-card.active.clients-card {
  background: var(--warm-clay) !important;
  border-color: var(--soft-gold) !important;
}

/* ===================================================== */
/* CLIENT FEEDBACK ROUND 6                                */
/* ===================================================== */

/* Round 6 .reveal-up opacity:1 !important rule removed — it was
   blocking the approved fade-up animation. The clean block at the
   end of this file is now the single source of truth for reveal-up. */

/* HERO BG SLIDER — full width on every viewport */
header.hero {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}
header.hero .hero-bg-slider {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: 0 !important;
}
header.hero.has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* HERO BUTTONS — both equal width within their max-width column */
header.hero .hero-actions {
  width: 100% !important;
  max-width: 360px !important;
}
header.hero .hero-actions .wp-block-button {
  width: 100% !important;
  display: block !important;
}
header.hero .hero-actions .wp-block-button .wp-block-button__link {
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* HOMEOWNERS CARD — revert to white bg + dark text; on hover -> dark with white */
.audience-card.clients-card {
  background: var(--white) !important;
  color: var(--charcoal) !important;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.audience-card.clients-card .audience-icon {
  background: #f5ebd8 !important;
  color: var(--warm-clay) !important;
  border: 1px solid rgba(138,97,85,.32);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.audience-card.clients-card .audience-label {
  color: var(--warm-clay) !important;
}
.audience-card.clients-card h3 {
  color: var(--charcoal) !important;
}
.audience-card.clients-card p,
.audience-card.clients-card .audience-list li {
  color: #5a554e !important;
}
.audience-card.clients-card .audience-list li::before {
  color: var(--deep-forest) !important;
  border-color: var(--deep-forest) !important;
}
.audience-card.clients-card .audience-btn {
  background: transparent !important;
  color: var(--deep-forest) !important;
  border: 1.5px solid var(--deep-forest) !important;
}

/* Hover: turn the homeowners card dark with white text */
.audience-card.clients-card:hover {
  background: var(--charcoal) !important;
  color: var(--white) !important;
  border-color: var(--soft-gold) !important;
}
.audience-card.clients-card:hover .audience-icon {
  background: rgba(191,169,135,.18) !important;
  color: var(--soft-gold) !important;
  border-color: var(--soft-gold) !important;
}
.audience-card.clients-card:hover .audience-label {
  color: var(--soft-gold) !important;
}
.audience-card.clients-card:hover h3,
.audience-card.clients-card:hover p {
  color: var(--white) !important;
}
.audience-card.clients-card:hover .audience-list li {
  color: rgba(255,255,255,.88) !important;
}
.audience-card.clients-card:hover .audience-list li::before {
  color: var(--soft-gold) !important;
  border-color: var(--soft-gold) !important;
}
.audience-card.clients-card:hover .audience-btn {
  background: var(--soft-gold) !important;
  color: var(--charcoal) !important;
  border-color: var(--soft-gold) !important;
}

/* PROCESS image — match content (4 step cards) height */
.process-section .container.process-grid {
  align-items: stretch !important;
}
.process-section .process-visual {
  min-height: 100% !important;
  max-height: none !important;
  height: 100% !important;
  aspect-ratio: auto !important;
}
.process-section .process-visual img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* BUILDER TRUST — reduce top padding 50px */
section.trusted-builders {
  padding-top: 50px !important;
}

/* HERO BG SLIDER — escape is-layout-constrained max-width via 100vw width */
.wp-block-group.hero > .hero-bg-slider,
header.hero > .hero-bg-slider,
.wp-block-group.hero .wp-block-html > .hero-bg-slider,
header.hero .wp-block-html > .hero-bg-slider {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100% !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  z-index: -2 !important;
}

/* Also make sure the wp:html wrapper doesn't constrain */
header.hero .wp-block-html {
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
}

/* HERO BUTTONS — final width parity using explicit 360px to bypass
   WP layout container quirks. */
header.hero .hero-actions,
header.hero .wp-block-buttons.hero-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 360px !important;
  max-width: 360px !important;
  gap: 14px !important;
}
header.hero .hero-actions .wp-block-button,
header.hero .wp-block-buttons.hero-actions .wp-block-button {
  width: 360px !important;
  max-width: 360px !important;
  flex: 0 0 auto !important;
}
header.hero .hero-actions .wp-block-button .wp-block-button__link {
  width: 360px !important;
  max-width: 360px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* ===================================================== */
/* CLIENT FEEDBACK ROUND 8                                */
/* ===================================================== */

/* HERO text shadow more subtle */
header.hero h1,
header.hero h1 span,
header.hero .hero-content > .eyebrow,
header.hero .hero-content > p.eyebrow,
header.hero p:not(.eyebrow) {
  text-shadow: 0 1px 2px rgba(0,0,0,0.22) !important;
}

/* AUDIENCE CARDS — match approved design height (taller) */
.audience-card {
  min-height: 720px !important;
}
@media (max-width: 960px) {
  .audience-card { min-height: auto !important; }
}

/* AUDIENCE-NOTE — hide entirely (user requested removal) */
.audience-note,
p.audience-note,
[data-audience-note] {
  display: none !important;
}

/* PROCESS image — match container by aspect ratio so the full image
   is visible without cropping (user request). */
.process-section .container.process-grid {
  align-items: center !important;
}
.process-section .process-visual {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  position: relative;
}
.process-section .process-visual img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 35% !important;
  display: block !important;
}

/* ===================================================== */
/* CLIENT FEEDBACK ROUND 9                                */
/* ===================================================== */

/* WHO WE ARE — equal top/bottom padding so content is vertically centered */
section.intro-section,
.intro-section {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

/* PROCESS image — container aspect matches image natural (984:1172 ≈ 21:25) so image fills with no cropping */
.process-section .process-visual {
  aspect-ratio: 984 / 1172 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
.process-section .process-visual img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* AUDIENCE CARDS — scale typography up to match approved proposal */
.audience-card {
  padding: clamp(40px, 5vw, 70px) !important;
}
.audience-card .audience-icon {
  width: 86px !important;
  height: 86px !important;
  border-radius: 18px !important;
  margin-bottom: 36px !important;
}
.audience-card .audience-icon svg {
  width: 36px !important;
  height: 36px !important;
}
.audience-card .audience-label {
  font-size: 12px !important;
  letter-spacing: 4px !important;
  margin-bottom: 22px !important;
  font-weight: 900 !important;
}
.audience-card h3 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(36px, 4.2vw, 58px) !important;
  line-height: 1.02 !important;
  margin-bottom: 22px !important;
  letter-spacing: -0.5px !important;
}
.audience-card p {
  font-size: 17px !important;
  line-height: 1.8 !important;
  margin-bottom: 36px !important;
  max-width: 560px;
}
.audience-card .audience-list {
  display: grid !important;
  gap: 18px !important;
  margin-bottom: 44px !important;
}
.audience-card .audience-list li {
  font-size: 16px !important;
  font-weight: 800 !important;
  gap: 14px !important;
}
.audience-card .audience-list li::before {
  width: 26px !important;
  height: 26px !important;
  font-size: 14px !important;
}
.audience-card .audience-btn {
  min-height: 56px !important;
  padding: 16px 30px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  min-width: 250px !important;
  border-radius: 6px !important;
}
/* Hero exempt (it has its own .hero-visible system, no reveal-up) */
header.hero {
  opacity: 1 !important;
  transform: none !important;
}

/* ===================================================== */
/* CLIENT FEEDBACK ROUND 10                               */
/* ===================================================== */

/* HERO BUTTONS — identical 360×60 with 1.5px border both */
header.hero .hero-actions .wp-block-button .wp-block-button__link {
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  padding: 0 24px !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
header.hero .hero-actions .wp-block-button:nth-child(1) .wp-block-button__link {
  background: var(--soft-gold) !important;
  border-color: var(--soft-gold) !important;
  color: var(--charcoal) !important;
}
header.hero .hero-actions .wp-block-button:nth-child(2) .wp-block-button__link,
html body header.hero .hero-actions .wp-block-button.hero-cta-homeowners > .wp-block-button__link {
  background: transparent !important;
  border-color: var(--soft-gold) !important;
  color: var(--soft-gold) !important;
}

/* ROUND 11 — Hero slide rules removed; original cascade already
   handles opacity/transform correctly without !important interference */

/* ===================================================== */
/* CLIENT FEEDBACK ROUND 12 — match approved animations   */
/* Replicates the exact reveal-up behaviour from           */
/* recursos/documents/homepage-approved.html               */
/* ===================================================== */

/* Reset any previous reveal-up overrides */
.reveal-up,
.reveal-up.visible,
.reveal-up.exit-up,
.site-main section.reveal-up,
.site-main section.reveal-up:not(.visible),
.site-main section.reveal-up.visible,
.site-main header.reveal-up {
  /* Clear inherited !important forces from earlier rounds */
}
.reveal-delay-1 { transition-delay: .08s !important; }
.reveal-delay-2 { transition-delay: .16s !important; }
.reveal-delay-3 { transition-delay: .24s !important; }
.reveal-delay-4 { transition-delay: .32s !important; }

/* Hero is NOT a reveal-up section — keep it visible at all times */
header.hero,
header.hero.reveal-up,
header.hero.reveal-up.visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .reveal-up.visible,
  .reveal-up.exit-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===================================================== */
/* CLIENT FEEDBACK ROUND 13                               */
/* ===================================================== */

/* HERO eyebrow — closer to H1 like the approved design */
header.hero .hero-content > .eyebrow,
header.hero .hero-content > p.eyebrow,
header.hero p.eyebrow {
  margin-bottom: 12px !important;
}
header.hero h1 {
  margin-top: 0 !important;
}

/* HERO BUTTONS — kill the layout container margins/gaps so both buttons
   render at the exact same box dimensions */
header.hero .hero-actions .wp-block-button,
header.hero .wp-block-buttons.hero-actions .wp-block-button {
  margin: 0 !important;
  padding: 0 !important;
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  box-sizing: border-box !important;
  flex: 0 0 60px !important;
}
header.hero .hero-actions .wp-block-button .wp-block-button__link {
  margin: 0 !important;
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  padding: 0 24px !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ===================================================== */
/* CLEAN REVEAL-UP — single source of truth (round 20)   */
/* Matches recursos/documents/homepage-approved.html      */
/* ===================================================== */
.reveal-up {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity .85s ease, transform .85s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
.reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-up.exit-up {
  opacity: 0;
  transform: translateY(-34px);
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .reveal-up.visible,
  .reveal-up.exit-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===================================================== */
/* LANDING-PAGE TEMPLATE — let sections span full width   */
/* The wp:post-content block wraps content with           */
/* .wp-block-post-content.has-global-padding which        */
/* constrains children to 1180px. Strip that on pages     */
/* using the landing-page template so each section's bg   */
/* extends edge-to-edge like the homepage.                */
/* ===================================================== */
.site-main.landing-page,
.site-main.landing-page .wp-block-post-content,
.site-main.landing-page > .wp-block-post-content.has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}
.site-main.landing-page .wp-block-post-content > * {
  max-width: none !important;
}
.site-main.landing-page.has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===================================================== */
/* HEADER NAV — Services dropdown submenu styling         */
/* ===================================================== */
.nav .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
  background-color: rgba(29, 29, 30, 0.95) !important;
  border: 1px solid rgba(191, 169, 135, 0.32) !important;
  border-radius: 14px;
  padding: 10px 0;
  min-width: 280px !important;
  margin-top: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  padding: 10px 22px !important;
  text-transform: none !important;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.nav .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.nav .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
  color: var(--soft-gold) !important;
  background: rgba(191, 169, 135, 0.10);
}
.nav .wp-block-navigation .wp-block-navigation__submenu-icon {
  margin-left: 8px;
  color: var(--soft-gold);
}
/* Pointer arrow above dropdown — aligned to the RIGHT (towards the
   "Services" trigger). The nav is items-justified-right so WP positions
   the submenu with right:0 / left:auto, meaning its left edge is far
   from the trigger. The arrow must therefore sit on the right side. */
.nav .wp-block-navigation .wp-block-navigation-submenu:hover .wp-block-navigation__submenu-container::before,
.nav .wp-block-navigation .wp-block-navigation-submenu:focus-within .wp-block-navigation__submenu-container::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 52px;
  left: auto;
  width: 12px;
  height: 12px;
  background: rgba(29, 29, 30, 0.95);
  border-left: 1px solid rgba(191, 169, 135, 0.32);
  border-top: 1px solid rgba(191, 169, 135, 0.32);
  transform: rotate(45deg);
}
/* Bridge hover gap so cursor can travel from trigger to dropdown */
.nav .wp-block-navigation .wp-block-navigation-submenu::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
  pointer-events: auto;
}

/* ===================================================== */
/* CABINETRY VIDEOS — render like the images they replace */
/* ===================================================== */
.intro-image .intro-video {
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.service-feature .service-media .service-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
@media (max-width: 960px) {
  .intro-image .intro-video {
    height: 380px;
  }
}

/* Cabinetry intro playlist — dual <video> crossfade. Hidden video
   preloads the next clip, then crossfades opacity. Container has a
   FIXED height (720px) so changing src never causes a reflow. */
.intro-image--playlist {
  position: relative;
  overflow: hidden;
  height: 720px;
  max-height: 720px;
  border-radius: inherit;
  background: #1a1a1a;
}
.intro-image--playlist .intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}
.intro-image--playlist .intro-video.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* Expand-to-modal button — top right corner, subtle. */
.intro-image--playlist .intro-video-expand {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: rgba(45, 45, 46, 0.72);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 6;
  transition: background 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.intro-image--playlist .intro-video-expand:hover,
.intro-image--playlist .intro-video-expand:focus-visible {
  background: var(--soft-gold, #BFA987);
  color: var(--charcoal, #2D2D2E);
  transform: scale(1.06);
  outline: none;
}
.intro-image--playlist .intro-video-expand svg { width: 18px; height: 18px; }

/* Zoom modal — fullscreen overlay, click outside to close. */
.intro-zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro-zoom-modal[hidden] { display: none; }
.intro-zoom-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.intro-zoom-modal__panel {
  position: relative;
  width: min(92vw, 1280px);
  max-height: 88vh;
  z-index: 1;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  background: #000;
}
.intro-zoom-modal__video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88vh;
  object-fit: contain;
  background: #000;
}
.intro-zoom-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background 0.2s ease, transform 0.2s ease;
}
.intro-zoom-modal__close:hover {
  background: var(--soft-gold, #BFA987);
  color: var(--charcoal, #2D2D2E);
  transform: scale(1.08);
}
.intro-zoom-modal__close svg { width: 22px; height: 22px; }
/* Prev/next nav buttons — soft circles pinned inside the video container,
   matching the portfolio carousel arrows visually. */
.intro-image--playlist .intro-video-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 0;
  background: rgba(45, 45, 46, 0.72);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.intro-image--playlist .intro-video-nav:hover,
.intro-image--playlist .intro-video-nav:focus-visible {
  background: var(--soft-gold, #BFA987);
  color: var(--charcoal, #2D2D2E);
  transform: translateY(-50%) scale(1.06);
  outline: none;
}
.intro-image--playlist .intro-video-nav svg {
  width: 22px;
  height: 22px;
}
.intro-image--playlist .intro-video-nav--prev { left: 14px; }
.intro-image--playlist .intro-video-nav--next { right: 14px; }
@media (max-width: 960px) {
  .intro-image--playlist .intro-video-nav { width: 40px; height: 40px; }
  .intro-image--playlist .intro-video-nav svg { width: 18px; height: 18px; }
}
/* Hide any intro-pill / ::after CSS-content pill inside the playlist
   variant — Cabinetry intro is label-free per client request. Does NOT
   affect Home (slider variant) or About Us — those keep their pill.
   IMPORTANT: keeps ::before (gold-line hover effect) intact. */
.intro-image--playlist .intro-pill {
  display: none !important;
}
.intro-image--playlist::after {
  content: none !important;
  display: none !important;
}

/* =========================================================================
   ABOUT US HERO — single bg_Logo.webp, animated (slow ken-burns).
   Replaces the previous 5-photo rotating slider.
   ========================================================================= */
.about-hero--logo-bg .hero-bg-slide,
.about-hero--logo-bg .hero-bg-slide.active {
  animation: ce-hero-bg-kenburns 26s ease-in-out infinite alternate !important;
  background-size: cover !important;
  background-position: center center !important;
}
/* Dark scrim REMOVED per client request — bg_Logo.webp shows fully clean.
   Also neutralizes the inherited dark layers from .inner-hero / .about-hero
   / .subfloor-hero that were stacking on top of the logo background. */
.about-hero--logo-bg::before,
.about-hero--logo-bg::after,
section.about-hero--logo-bg::before,
section.about-hero--logo-bg::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}
.about-hero--logo-bg .container { position: relative; z-index: 2; }

/* About hero — COMPACT variant: ~450px tall, centered title + eyebrow with
   side decorative lines, no body text, no dark overlay on the photo.
   Keeps top padding so the fixed header doesn't cover the content. */
section.about-hero--compact {
  position: relative !important;
  min-height: 600px !important;
  height: 600px !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
}
/* Title anchored to the bottom edge via absolute positioning — no flex
   centering interferes with vertical placement. */
.about-hero--compact .about-hero__content--centered,
section.about-hero--compact .container {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 30px !important;
  top: auto !important;
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 2;
}
.about-hero--compact .about-hero__title--centered {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}
.about-hero__title--centered h1 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0.85 !important;
  display: block !important;
}
/* Shift the background image down ~80px so the logo sits lower in frame. */
section.about-hero--compact .hero-bg-slide,
section.about-hero--compact .hero-bg-slide.active {
  background-position: center calc(50% + 80px) !important;
}
/* Kill the dark horizontal gradient that .hero-bg-slider::after adds
   globally — About Us hero shows the bg_Logo.webp clean, no dark overlay. */
section.about-hero--compact .hero-bg-slider::after,
section.about-hero--compact .hero-bg-slider::before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}
section.about-hero--compact .hero-bg-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}
section.about-hero--compact .hero-bg-slide {
  filter: none !important;
}
.about-hero__content--centered {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
}
.about-hero__title--centered {
  text-align: center !important;
  max-width: 720px;
  margin: 0 auto;
}
.about-hero__title--centered h1 {
  text-align: center !important;
  margin: 8px 0 0 !important;
}
/* Eyebrow with side decorative gold lines — "— ABOUT US —" */
.eyebrow--lines {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  font-weight: 800;
  color: var(--soft-gold, #BFA987) !important;
}
.eyebrow--lines::before,
.eyebrow--lines::after {
  content: '';
  display: inline-block;
  width: 42px;
  height: 1.5px;
  background: var(--soft-gold, #BFA987);
}
.eyebrow--lines span { display: inline-block; }
@media (max-width: 960px) {
  .intro-image--playlist { height: 480px; max-height: 480px; }
  section.about-hero--compact { min-height: 480px !important; height: auto !important; padding: 110px 0 50px !important; }
  .eyebrow--lines::before,
  .eyebrow--lines::after { width: 28px; }
  .intro-zoom-modal__panel { width: 96vw; }
}

/* =============================================================== */
/* OUR MISSION (#our-mission) — cap every card media to 450px max  */
/* Click any image/video to open a zoomable lightbox view.         */
/* =============================================================== */
#our-mission .service-feature {
  align-items: stretch;
}
#our-mission .service-feature .service-media {
  min-height: 0 !important;
  max-height: 450px;
  height: 450px;
  align-self: center;
  cursor: zoom-in;
}
#our-mission .service-feature .service-media img,
#our-mission .service-feature .service-media .service-video {
  height: 100% !important;
  max-height: 450px;
  object-fit: cover;
}
@media (max-width: 960px) {
  #our-mission .service-feature .service-media {
    height: auto;
    max-height: 360px;
  }
  #our-mission .service-feature .service-media img,
  #our-mission .service-feature .service-media .service-video {
    max-height: 360px;
  }
}

/* Lightbox overlay (click-to-zoom for mission media) */
.ce-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  padding: 4vh 4vw;
  cursor: zoom-out;
}
.ce-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.ce-lightbox__media {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  background: #000;
}
.ce-lightbox__close {
  position: absolute;
  top: 22px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.ce-lightbox__close:hover {
  background: rgba(255,255,255,.22);
}

/* =============================================================== */
/* GALLERY MIRROR — same mosaic, flipped (large on the right side) */
/* =============================================================== */
.gallery-grid.gallery-grid--mirror {
  grid-template-columns: .8fr .8fr 1.2fr;
}
@media (max-width: 960px) {
  .gallery-grid.gallery-grid--mirror {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================ */
/* CABINETRY CAROUSEL — full-bleed JS-driven filmstrip.                        */
/* Position is updated each frame via requestAnimationFrame (see main.js).     */
/* No CSS keyframes → ZERO sub-pixel rounding glitches at the loop seam.       */
/* Used for both Custom Homes (data-direction="rtl") and Subdivision Work     */
/* (data-direction="ltr"). Track contains slides rendered 3× so JS can wrap   */
/* between identical copies for a guaranteed-seamless loop.                    */
/* ============================================================================ */
.cabinetry-carousel {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

/* Carousel nav arrows — subtle gold circles on the sides of each carousel */
.cabinetry-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(191,169,135,.45);
  color: var(--charcoal);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 6;
  opacity: .55;
  transition: opacity .25s ease, background .25s ease, transform .25s ease, border-color .25s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(45,45,46,.10);
}
.cabinetry-carousel__nav svg { width: 20px; height: 20px; }
.cabinetry-carousel__nav--prev { left: clamp(12px, 2vw, 28px); }
.cabinetry-carousel__nav--next { right: clamp(12px, 2vw, 28px); }
.cabinetry-carousel:hover .cabinetry-carousel__nav { opacity: 1; }
.cabinetry-carousel__nav:hover {
  background: var(--soft-gold);
  color: #fff;
  border-color: var(--soft-gold);
  transform: translateY(-50%) scale(1.08);
  opacity: 1;
}
.cabinetry-carousel__nav:focus-visible {
  outline: 3px solid rgba(191,169,135,.6);
  outline-offset: 3px;
  opacity: 1;
}
@media (max-width: 600px) {
  .cabinetry-carousel__nav { width: 38px; height: 38px; opacity: .8; }
  .cabinetry-carousel__nav svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cabinetry-carousel__nav { transition: none; }
}
.cabinetry-carousel::before,
.cabinetry-carousel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(60px, 8vw, 140px);
  pointer-events: none;
  z-index: 3;
}
.cabinetry-carousel::before {
  left: 0;
  background: linear-gradient(90deg, var(--ivory, #F8F5F0) 0%, rgba(248,245,240,0) 100%);
}
.cabinetry-carousel::after {
  right: 0;
  background: linear-gradient(270deg, var(--ivory, #F8F5F0) 0%, rgba(248,245,240,0) 100%);
}

.cabinetry-carousel__track {
  display: flex;
  width: max-content;
  will-change: transform;
  /* Initial transform set by JS on init; this is a fallback only. */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.cabinetry-carousel .carousel-slide {
  flex: 0 0 auto;
  position: relative;
  width: clamp(280px, 26vw, 440px);
  height: 460px;
  margin: 0 18px 0 0;
  overflow: hidden;
  background: #1a1a1b;
  cursor: pointer;
  border-radius: 24px 28px 26px 28px / 28px 26px 28px 24px;
}
.cabinetry-carousel .carousel-slide::after {
  content: '';
  position: absolute;
  right: -11px;
  top: 14%;
  bottom: 14%;
  width: 4px;
  background: var(--soft-gold);
  border-radius: 2px;
  z-index: 4;
  box-shadow: 0 0 12px rgba(201, 169, 97, .35);
}
.cabinetry-carousel .carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.cabinetry-carousel .carousel-slide:hover img,
.cabinetry-carousel .carousel-slide:focus-within img {
  transform: scale(1.05);
}
/* Home "Selected Work" carousel (.collage-carousel) — NO zoom on hover.
   Each slide is wrapped in a real <a> that navigates to the matching
   service portfolio, so the photo stays static and the link gives a
   subtle hint instead of the zoom effect. */
.collage-carousel .carousel-slide:hover img,
.collage-carousel .carousel-slide:focus-within img {
  transform: none;
}
.collage-carousel .collage-slide__link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  position: relative;
}
.collage-carousel .collage-slide__link:focus-visible {
  outline: 2px solid var(--soft-gold, #BFA987);
  outline-offset: 4px;
  border-radius: 14px;
}
/* Subtle hint on hover — slight overlay lift and caption color shift, no
   image transform (so users know it's clickable without the gimmicky zoom). */
.collage-carousel .collage-slide__link:hover .caption-name,
.collage-carousel .collage-slide__link:focus-visible .caption-name {
  color: var(--soft-gold, #BFA987);
  transition: color 0.3s ease;
}
.cabinetry-carousel .carousel-slide .gallery-caption {
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 28px;
}

@media (max-width: 600px) {
  .cabinetry-carousel .carousel-slide {
    width: 78vw;
    height: 380px;
    margin-right: 14px;
    border-radius: 20px 24px 22px 24px / 24px 22px 24px 20px;
  }
  .cabinetry-carousel .carousel-slide::after {
    right: -9px;
    top: 12%;
    bottom: 12%;
  }
}

/* ========================================================================== */
/* GALLERY CAPTIONS — hidden by default, reveal on hover (slide-up from bottom) */
/* Subtle black 40% banner with project name + location + date.                 */
/* Mobile tap support via .is-active class added by JS.                         */
/* ========================================================================== */
.gallery-item {
  cursor: pointer;
  outline: none;
}
.gallery-item .gallery-caption {
  /* override the previous always-visible caption styling */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  background: rgba(0, 0, 0, .40);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--white);
  padding: 16px 20px 18px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  transform: translateY(110%);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
  pointer-events: none;
}
.gallery-item:hover .gallery-caption,
.gallery-item:focus-within .gallery-caption,
.gallery-item.is-active .gallery-caption {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.gallery-item .caption-eyebrow {
  display: block;
  color: var(--soft-gold);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.gallery-item .caption-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 4px;
  letter-spacing: -.2px;
}
.gallery-item .caption-meta {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
  letter-spacing: .2px;
}
@media (max-width: 960px) {
  .gallery-item .gallery-caption {
    padding: 12px 14px 14px;
  }
  .gallery-item .caption-name { font-size: 16px; }
}

/* ============================================================================ */
/* MATERIALS — Brochure-style cards. Each card shows up to 3 sample images       */
/* stacked & rotated like a fanned-out brochure with rounded "oval" corners.     */
/* Click a card to open a modal that lists every sample in that material.        */
/* ============================================================================ */
.materials-section .materials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: start;
}
@media (max-width: 1180px) {
  .materials-section .materials-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 440px) {
  .materials-section .materials-grid { grid-template-columns: 1fr; }
}

.material-card {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.material-card:hover {
  transform: translateY(-4px);
}

/* The "brochure" — square-ish stage where 3 layers stack with rotation. */
.material-card__brochure {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  isolation: isolate;
  /* invisible padding so rotated layers don't get clipped by the grid */
  padding: 12px;
}
.material-card__layer {
  position: absolute;
  top: 12px; left: 12px; right: 12px; bottom: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: cover;
  /* Oval / rounded corners — explicit asymmetry so it feels organic, not a chip */
  border-radius: 28px 32px 30px 34px / 34px 30px 32px 28px;
  box-shadow: 0 18px 40px rgba(45,45,46,.18), 0 4px 12px rgba(45,45,46,.10);
  background: #efe9df;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  will-change: transform;
  border: 1px solid rgba(255,255,255,.6);
}
/* Back layer — most rotation, peeking left */
.material-card__layer--0 {
  transform: rotate(-7deg) translate(-10px, 8px);
  z-index: 1;
  filter: brightness(.95);
}
/* Middle layer — small rotation, peeking right */
.material-card__layer--1 {
  transform: rotate(5deg) translate(10px, 4px);
  z-index: 2;
  filter: brightness(.98);
}
/* Front layer — straight, dominant */
.material-card__layer--2 {
  transform: rotate(0deg) translate(0, 0);
  z-index: 3;
}
/* Hover fans them out */
.material-card:hover .material-card__layer--0,
.material-card:focus-within .material-card__layer--0 {
  transform: rotate(-11deg) translate(-18px, 10px);
}
.material-card:hover .material-card__layer--1,
.material-card:focus-within .material-card__layer--1 {
  transform: rotate(9deg) translate(18px, 6px);
}
.material-card:hover .material-card__layer--2,
.material-card:focus-within .material-card__layer--2 {
  transform: rotate(0deg) translate(0, -2px);
  box-shadow: 0 24px 50px rgba(45,45,46,.22), 0 6px 14px rgba(45,45,46,.12);
}

/* Placeholder state when no images uploaded yet */
.material-card__placeholder {
  position: absolute;
  top: 12px; left: 12px; right: 12px; bottom: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  border-radius: 28px 32px 30px 34px / 34px 30px 32px 28px;
  background: linear-gradient(135deg, #f5efe4 0%, #ede4d3 100%);
  border: 1px dashed rgba(191,169,135,.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #a08e6a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Meta block below the brochure */
.material-card__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 6px;
}
.material-card__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--charcoal);
  line-height: 1.15;
  letter-spacing: -.3px;
  margin: 0;
}
.material-card__short {
  font-size: 13px;
  color: #6e6557;
  line-height: 1.55;
  margin: 0;
}
.material-card__cta {
  appearance: none;
  border: 0;
  background: transparent;
  margin-top: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(45,45,46,.22);
  border-radius: 999px;
  color: var(--charcoal);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.material-card__cta:hover,
.material-card__cta:focus-visible {
  background: var(--charcoal);
  color: #fff;
  border-color: var(--charcoal);
}
.material-card__count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 7px;
  margin-left: 2px;
  background: var(--soft-gold);
  color: var(--charcoal);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}
.material-card__cta:hover .material-card__count-pill,
.material-card__cta:focus-visible .material-card__count-pill {
  background: #fff;
  color: var(--charcoal);
}
.material-card__arrow {
  display: inline-block;
  transition: transform .25s ease;
}
.material-card:hover .material-card__cta .material-card__arrow,
.material-card__cta:hover .material-card__arrow,
.material-card__cta:focus-visible .material-card__arrow {
  transform: translateX(4px);
}

/* ============================================================================ */
/* MATERIALS MODAL — Full-screen sample browser opened from a brochure card.    */
/* ============================================================================ */
.materials-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(15, 15, 17, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 3vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.materials-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.materials-modal__panel {
  background: var(--ivory, #F8F5F0);
  border-radius: 22px;
  width: 100%;
  max-width: 1180px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
  transform: translateY(20px) scale(.98);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.materials-modal.is-open .materials-modal__panel {
  transform: translateY(0) scale(1);
}
.materials-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid rgba(191,169,135,.25);
  flex: 0 0 auto;
}
.materials-modal__eyebrow {
  display: block;
  color: var(--soft-gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.materials-modal__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(24px, 3vw, 34px);
  color: var(--charcoal);
  margin: 0;
  letter-spacing: -.4px;
}
.materials-modal__close {
  appearance: none;
  border: 1px solid rgba(45,45,46,.18);
  background: transparent;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  color: var(--charcoal);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.materials-modal__close:hover {
  background: rgba(45,45,46,.06);
  transform: rotate(90deg);
}
.materials-modal__grid {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 28px 32px 36px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  align-content: start;
}
@media (max-width: 600px) {
  .materials-modal__header { padding: 18px 20px; }
  .materials-modal__grid { padding: 20px; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
.materials-modal__grid figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: zoom-in;
}
.materials-modal__grid img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 18px 22px 20px 22px / 22px 20px 22px 18px;
  background: #efe9df;
  box-shadow: 0 12px 26px rgba(45,45,46,.14);
  transition: transform .3s ease, box-shadow .3s ease;
}
.materials-modal__grid figure:hover img {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(45,45,46,.20);
}
.materials-modal__grid figcaption {
  font-size: 14px;
  color: var(--charcoal);
  font-weight: 700;
  letter-spacing: .1px;
  text-align: center;
  word-break: break-word;
  margin-top: 4px;
  font-family: 'Playfair Display', Georgia, serif;
}
.materials-modal__grid .material-item__tag {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: var(--soft-gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 4px;
}
.materials-modal__grid .material-item__placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 18px 22px 20px 22px / 22px 20px 22px 18px;
  background: linear-gradient(135deg, #f5efe4 0%, #ede4d3 100%);
  border: 1px dashed rgba(191,169,135,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a08e6a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.materials-modal__empty {
  padding: 60px 32px;
  text-align: center;
  color: #6e6557;
}
.materials-modal__empty p {
  font-size: 16px;
  margin: 0;
}
body.materials-modal-open {
  overflow: hidden;
}

/* ============================================================================ */
/* MATERIALS DETAIL MODAL — single-item rich view. Opened from a sample inside  */
/* the category modal. Shows large image + category + description +             */
/* recommended for + benefits + "Request This Finish" CTA.                      */
/* ============================================================================ */
.materials-detail {
  position: fixed;
  inset: 0;
  z-index: 10000; /* on top of category modal */
  background: rgba(15, 15, 17, .85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 3vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.materials-detail.is-open {
  opacity: 1;
  pointer-events: auto;
}
.materials-detail__panel {
  background: #fff;
  border-radius: 22px;
  width: 100%;
  max-width: 1080px;
  max-height: 92vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  box-shadow: 0 50px 100px rgba(0, 0, 0, .55);
  transform: translateY(24px) scale(.97);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  position: relative;
}
.materials-detail.is-open .materials-detail__panel {
  transform: translateY(0) scale(1);
}
.materials-detail__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  appearance: none;
  border: 1px solid rgba(45,45,46,.22);
  background: rgba(255,255,255,.9);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  color: var(--charcoal);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.materials-detail__close:hover {
  background: rgba(45,45,46,.06);
  transform: rotate(90deg);
}
.materials-detail__media {
  background: var(--ivory, #F8F5F0);
  overflow: hidden;
  position: relative;
  min-height: 360px;
}
.materials-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.materials-detail__body {
  padding: 38px 40px 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.materials-detail__category {
  color: var(--soft-gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.materials-detail__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(24px, 2.6vw, 34px);
  color: var(--charcoal);
  margin: 0;
  letter-spacing: -.4px;
  line-height: 1.05;
}
.materials-detail__desc {
  font-size: 14.5px;
  color: #5a554e;
  line-height: 1.7;
  margin: 0;
}
.materials-detail__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 4px;
}
.materials-detail__col h4 {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--charcoal);
  margin: 0 0 10px;
}
.materials-detail__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.materials-detail__col li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  color: #5a554e;
  line-height: 1.5;
}
.materials-detail__col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--soft-gold);
}
.materials-detail__about {
  margin-top: 4px;
  padding: 16px 18px;
  background: rgba(191, 169, 135, .08);
  border: 1px solid rgba(191, 169, 135, .22);
  border-radius: 14px;
}
.materials-detail__about-title {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--soft-gold);
  margin: 0 0 10px;
}
.materials-detail__about-grid {
  margin: 0;
  display: grid;
  gap: 8px;
}
.materials-detail__about-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: baseline;
}
.materials-detail__about-row dt {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8a7d63;
  margin: 0;
}
.materials-detail__about-row dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--charcoal);
  font-weight: 600;
  line-height: 1.45;
}
@media (max-width: 600px) {
  .materials-detail__about-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
.materials-detail__cta {
  margin-top: 14px;
  align-self: flex-start;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  background: var(--soft-gold);
  color: var(--charcoal);
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border-radius: 999px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.materials-detail__cta:hover,
.materials-detail__cta:focus-visible {
  transform: translateY(-2px);
  background: #d6b777;
  box-shadow: 0 12px 28px rgba(201, 169, 97, .35);
  color: var(--charcoal);
}
.materials-detail__media-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5efe4 0%, #ede4d3 100%);
  color: #a08e6a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
@media (max-width: 820px) {
  .materials-detail__panel {
    grid-template-columns: 1fr;
    max-height: 94vh;
  }
  .materials-detail__media {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
  .materials-detail__body {
    padding: 26px 22px;
  }
  .materials-detail__columns {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Materials header — flex with intro paragraph wrapping below on small screens */
.materials-section .materials-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}
.materials-section .materials-header__lead {
  flex: 1 1 480px;
  min-width: 0;
}
.materials-section .materials-header__intro {
  max-width: 480px;
  color: #625b53;
  line-height: 1.75;
  margin: 0;
  flex: 1 1 340px;
}

/* ============================================================================ */
/* SUBFLOOR HERO — rotating background slider override.                        */
/* Use the same .hero-bg-slider mechanism as the homepage/cabinetry hero, but  */
/* preserve the subfloor page's original visual aspect: a vertical dark→light  */
/* gradient overlay (instead of the default horizontal one used on .hero).     */
/* ============================================================================ */
.subfloor-hero {
  position: relative;
  isolation: isolate;
  background: var(--charcoal) !important; /* fallback while slider loads */
}
.subfloor-hero .hero-bg-slider {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.subfloor-hero .hero-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.1s ease, transform 4s ease;
}
.subfloor-hero .hero-bg-slide.active {
  opacity: 1;
  animation: ce-hero-slide-zoom 4.5s ease-out forwards;
}
.subfloor-hero .hero-bg-slider::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,20,22,0.45) 0%, rgba(20,20,22,0.28) 100%);
  z-index: 2;
}
.subfloor-hero .inner-hero__content {
  position: relative;
  z-index: 3;
}

/* ============================================================================ */
/* CABINETRY-CAROUSEL --XL — larger slide dimensions for the subfloor portfolio. */
/* Used when the page wants images to take more visual space (taller slides).  */
/* ============================================================================ */
.cabinetry-carousel--xl .carousel-slide {
  width: clamp(340px, 32vw, 560px);
  height: 580px;
}
@media (max-width: 600px) {
  .cabinetry-carousel--xl .carousel-slide {
    width: 84vw;
    height: 440px;
  }
}

/* ============================================================================ */
/* CABINETRY HERO CARD — HIDDEN BY CLIENT REQUEST                              */
/* Hides the kitchen photo card next to the headline on the Custom Cabinetry  */
/* page only. Markup + image remain in place — delete this block to restore.  */
/* (Home page hero card stays visible — this is page-id-scoped.)              */
/* ============================================================================ */
body.page-id-32 header.hero .hero-card {
  display: none !important;
}
body.page-id-32 header.hero .hero-grid {
  grid-template-columns: 1fr;
}

/* ============================================================================ */
/* BLOG — archive list + single post premium editorial layout.                 */
/* ============================================================================ */

/* Blog hero — override the inherited about-hero/subfloor-hero giant
   min-height. The blog page just needs a compact band: eyebrow + title
   + intro + filter pills. No big background photo, no 500px+ height. */
section.inner-hero.blog-hero,
section.inner-hero.about-hero.blog-hero,
section.inner-hero.subfloor-hero.blog-hero {
  min-height: auto !important;
  padding: 170px 0 50px !important;
  background: linear-gradient(180deg, var(--charcoal, #2D2D2E) 0%, #1f1f20 100%) !important;
}
.blog-hero::before,
.blog-hero::after {
  display: none !important;       /* kill scrim overlays from parent classes */
}
.blog-hero .inner-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.blog-hero .eyebrow {
  color: var(--soft-gold, #BFA987);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.blog-hero h1 {
  font-size: clamp(30px, 4vw, 50px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.6px !important;
  margin: 0 0 14px !important;
  color: #ffffff !important;
}
.blog-hero p {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 720px;
}
@media (max-width: 768px) {
  section.inner-hero.blog-hero,
  section.inner-hero.about-hero.blog-hero,
  section.inner-hero.subfloor-hero.blog-hero {
    padding: 140px 0 40px !important;
  }
}

/* Hero filter pills (categories) on the blog index */
.blog-hero .blog-filter-pills {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.blog-hero .blog-filter-pills .pill {
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.blog-hero .blog-filter-pills .pill--ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--soft-gold);
  color: var(--soft-gold);
}

/* Blog list section */
.blog-list-section {
  padding: 90px 0 110px;
  background: var(--ivory, #F8F5F0);
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
@media (max-width: 760px) {
  .blog-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* Individual post card */
.blog-card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(45, 45, 46, .07);
  transition: transform .3s ease, box-shadow .3s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(45, 45, 46, .14);
}
.blog-card__link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.blog-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, #f5efe4 0%, #ede4d3 100%);
}
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.blog-card:hover .blog-card__media img {
  transform: scale(1.05);
}
.blog-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a08e6a;
}
.blog-card__body {
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.blog-card__eyebrow {
  color: var(--soft-gold);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.blog-card__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  line-height: 1.15;
  color: var(--charcoal);
  letter-spacing: -.3px;
  margin: 0;
  font-weight: 600;
}
.blog-card__excerpt {
  color: #5a554e;
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}
.blog-card__meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(191, 169, 135, .25);
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8e8676;
  font-size: 12px;
  font-weight: 600;
}
.blog-card__dot {
  opacity: .6;
}

/* Featured card — spans full row on desktop, horizontal layout, larger title */
.blog-card--featured {
  grid-column: 1 / -1;
}
.blog-card--featured .blog-card__link {
  flex-direction: row;
}
.blog-card--featured .blog-card__media {
  flex: 0 0 55%;
  aspect-ratio: auto;
  min-height: 380px;
}
.blog-card--featured .blog-card__body {
  flex: 1;
  padding: 40px;
  justify-content: center;
}
.blog-card--featured .blog-card__title {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.05;
}
.blog-card--featured .blog-card__excerpt {
  font-size: 16px;
  line-height: 1.7;
}
@media (max-width: 900px) {
  .blog-card--featured .blog-card__link { flex-direction: column; }
  .blog-card--featured .blog-card__media { flex: none; aspect-ratio: 16/10; min-height: 0; }
  .blog-card--featured .blog-card__body { padding: 26px 24px 24px; }
  .blog-card--featured .blog-card__title { font-size: 24px; }
}

/* Pagination */
.blog-pagination {
  margin-top: 64px;
  display: flex;
  justify-content: center;
}
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  margin: 0 4px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--charcoal);
  background: #fff;
  border: 1px solid rgba(191, 169, 135, .35);
  text-decoration: none;
  transition: all .2s ease;
}
.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers:hover {
  background: var(--charcoal);
  color: #fff;
  border-color: var(--charcoal);
}

/* Empty state */
.blog-empty {
  text-align: center;
  padding: 80px 0;
}
.blog-empty h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 32px;
  color: var(--charcoal);
  margin-bottom: 14px;
}
.blog-empty p {
  color: #5a554e;
}

/* ============================================================================ */
/* BLOG SINGLE POST                                                            */
/* ============================================================================ */

/* Reading progress bar pinned to top */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0, 0, 0, .06);
  z-index: 100;
  pointer-events: none;
}
.reading-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--soft-gold);
  transition: width .1s linear;
  box-shadow: 0 0 8px rgba(201, 169, 97, .55);
}

/* Post hero (full-bleed featured image + overlay) */
.blog-single-hero {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  padding: 160px 0 70px;
  background-size: cover;
  background-position: center;
  background-color: var(--charcoal);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.blog-single-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, .25) 0%,
    rgba(0, 0, 0, .55) 60%,
    rgba(0, 0, 0, .82) 100%
  );
}
.blog-single-hero__content {
  position: relative;
  z-index: 1;
}
.blog-single-hero__eyebrow {
  display: inline-block;
  color: var(--soft-gold);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 18px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.blog-single-hero__eyebrow:hover { border-color: var(--soft-gold); }
.blog-single-hero__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(34px, 5.5vw, 68px);
  line-height: 1;
  letter-spacing: -1.5px;
  margin: 0 0 20px;
  max-width: 980px;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}
.blog-single-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
}
.blog-single-hero__meta a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, .3);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.blog-single-hero__meta a:hover {
  color: var(--soft-gold);
  border-color: var(--soft-gold);
}
.blog-single-hero__dot { opacity: .55; }

/* Article body — constrained max-width for editorial readability */
.blog-single-article {
  padding: 80px 0 60px;
  background: #fff;
}
.blog-single-article__inner {
  max-width: 760px;
}
.blog-single-content {
  font-family: 'Inter', sans-serif;
  font-size: 17.5px;
  line-height: 1.78;
  color: #3d3a34;
}
.blog-single-content > * + * { margin-top: 1.4em; }
.blog-single-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  color: var(--charcoal);
  letter-spacing: -.4px;
  margin-top: 2em;
  margin-bottom: .6em;
}
.blog-single-content h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  color: var(--charcoal);
  margin-top: 1.6em;
  margin-bottom: .5em;
}
.blog-single-content p { margin: 0; }
.blog-single-content a {
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-color: var(--soft-gold);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.blog-single-content a:hover { color: var(--soft-gold); }
.blog-single-content ul,
.blog-single-content ol {
  padding-left: 22px;
}
.blog-single-content li + li { margin-top: .5em; }
.blog-single-content blockquote {
  margin: 1.8em 0;
  padding: 22px 28px;
  border-left: 4px solid var(--soft-gold);
  background: rgba(191, 169, 135, .08);
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  color: var(--charcoal);
  border-radius: 0 12px 12px 0;
}
.blog-single-content blockquote p { margin: 0; }
.blog-single-content figure,
.blog-single-content .wp-block-image {
  margin: 1.8em 0;
}
.blog-single-content img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(45, 45, 46, .12);
}
.blog-single-content figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: #8e8676;
  text-align: center;
  font-style: italic;
}
.blog-single-content code {
  background: rgba(191, 169, 135, .15);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .92em;
}
.blog-single-content pre {
  background: var(--charcoal);
  color: #f5efe4;
  padding: 20px 24px;
  border-radius: 14px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}
.blog-single-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* Tags row */
.blog-single-tags {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(191, 169, 135, .3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.blog-single-tags__label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--soft-gold);
  margin-right: 6px;
}
.blog-tag-pill {
  display: inline-block;
  padding: 6px 14px;
  background: var(--ivory, #F8F5F0);
  border: 1px solid rgba(191, 169, 135, .35);
  border-radius: 999px;
  color: var(--charcoal);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.blog-tag-pill:hover {
  background: var(--soft-gold);
  border-color: var(--soft-gold);
}

/* Author card */
.blog-author-card {
  margin-top: 50px;
  padding: 26px 28px;
  background: var(--ivory, #F8F5F0);
  border: 1px solid rgba(191, 169, 135, .28);
  border-radius: 18px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.blog-author-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--soft-gold);
  flex: 0 0 auto;
}
.blog-author-card__body {
  flex: 1;
}
.blog-author-card__eyebrow {
  display: block;
  color: var(--soft-gold);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.blog-author-card__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  color: var(--charcoal);
  margin: 0 0 6px;
}
.blog-author-card__name a { color: inherit; text-decoration: none; }
.blog-author-card__name a:hover { color: var(--soft-gold); }
.blog-author-card__bio {
  color: #5a554e;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Inline mid-post CTA */
.blog-inline-cta {
  background: var(--charcoal);
  color: #fff;
  padding: 36px 0;
}
.blog-inline-cta__inner {
  max-width: 880px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.blog-inline-cta .eyebrow {
  color: var(--soft-gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: inline-block;
}
.blog-inline-cta h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(20px, 2.4vw, 28px);
  margin: 0;
  color: #fff;
  letter-spacing: -.3px;
}
.blog-inline-cta .btn-primary {
  white-space: nowrap;
}

/* Related posts grid */
.blog-related {
  padding: 80px 0;
  background: var(--ivory, #F8F5F0);
}
.blog-related .portfolio-header {
  text-align: left;
  margin-bottom: 36px;
}
.blog-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 900px) {
  .blog-related__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .blog-related__grid { grid-template-columns: 1fr; }
}

/* Comments wrapper */
.blog-comments-section {
  padding: 60px 0;
  background: #fff;
}
.blog-comments-inner {
  max-width: 760px;
}

/* ============================================================================ */
/* GENERIC PILLS — small label tags used in hero & elsewhere.                  */
/* ============================================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
}
.pill--gold {
  background: var(--soft-gold);
  color: var(--charcoal);
}
.pill--ghost {
  background: transparent;
  color: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .35);
}

/* ============================================================================ */
/* MIGUEL PROFILE — credential chips, quote, contact list, expandable bio.     */
/* (All scoped to .sales-process-section so it inherits the dark-bg styling.) */
/* ============================================================================ */
.sales-process-section .profile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 16px;
}
.sales-process-section .chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .15);
  line-height: 1;
}
.sales-process-section .chip--gold {
  background: var(--soft-gold);
  color: var(--charcoal);
  border-color: transparent;
}
.sales-process-section .profile-quote {
  margin: 14px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--soft-gold);
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .92);
  background: rgba(191, 169, 135, .06);
  border-radius: 0 10px 10px 0;
}
.sales-process-section .profile-story {
  margin: 14px 0 8px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding-top: 14px;
}
.sales-process-section .profile-story summary {
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--soft-gold);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sales-process-section .profile-story summary::-webkit-details-marker { display: none; }
.sales-process-section .profile-story summary::after {
  content: '+';
  font-size: 14px;
  margin-left: auto;
  transition: transform .25s ease;
}
.sales-process-section .profile-story[open] summary::after { transform: rotate(45deg); }
.sales-process-section .profile-story p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
}
.sales-process-section .profile-contact {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding-top: 14px;
  display: grid;
  gap: 8px;
}
.sales-process-section .profile-contact li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
}
.sales-process-section .profile-contact li span {
  color: var(--soft-gold);
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-size: 10px;
}
.sales-process-section .profile-contact a {
  color: rgba(255, 255, 255, .92);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, .25);
  transition: color .2s ease, border-color .2s ease;
}
.sales-process-section .profile-contact a:hover {
  color: var(--soft-gold);
  border-color: var(--soft-gold);
}

/* ============================================================================ */
/* BUYER PROGRAMS — visually aligned with .why-section (homepage Why Us).      */
/* Deep-forest → slate-teal gradient, full-bleed, 2-col layout (lead + cards),  */
/* glass cards with gold numbers. Same DNA, different content.                 */
/* ============================================================================ */
.buyer-programs-section {
  position: relative;
  background: linear-gradient(135deg, var(--deep-forest, #1E3A2F), var(--slate-teal, #3D5A5C));
  color: var(--white, #fff);
  padding: 110px 0;
  overflow: hidden;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.buyer-programs-section::before {
  content: '';
  position: absolute;
  right: -180px;
  top: -180px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(191, 169, 135, .22), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.buyer-programs-section .buyer-programs-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 50px;
  align-items: start;
}
.buyer-programs-lead .eyebrow {
  color: var(--soft-gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 12px;
}
.buyer-programs-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.buyer-program-card {
  position: relative;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  padding: 28px;
  min-height: 200px;
  backdrop-filter: blur(8px);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.buyer-program-card:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(191, 169, 135, .45);
  transform: translateY(-3px);
}
.buyer-program-card strong {
  display: block;
  color: var(--soft-gold);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 32px;
  margin-bottom: 14px;
  line-height: 1;
}
.buyer-program-card h4 {
  margin: 0 0 10px;
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--white, #fff);
  letter-spacing: .2px;
}
.buyer-program-card p {
  color: rgba(255, 255, 255, .68);
  line-height: 1.65;
  font-size: 14px;
  margin: 0;
}
/* Featured card — gold accent border + badge */
.buyer-program-card--featured {
  background: rgba(191, 169, 135, .14);
  border-color: rgba(191, 169, 135, .55);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .25);
}
.buyer-program-card--featured .card-badge {
  position: absolute;
  top: -10px;
  right: 18px;
  background: var(--soft-gold);
  color: var(--charcoal);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
}
@media (max-width: 960px) {
  .buyer-programs-section .buyer-programs-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
@media (max-width: 560px) {
  .buyer-programs-cards {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================ */
/* SERVICE AREAS — pill grid of GTA cities served by the brokerage team.       */
/* ============================================================================ */
.service-areas-section {
  padding: 80px 0;
  background: #fff;
}
.service-areas-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}
.service-areas-header .eyebrow {
  color: var(--soft-gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 12px;
}
.service-areas-header .section-title {
  color: var(--charcoal);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 0;
}
.service-areas-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.service-areas-grid li {
  padding: 12px 22px;
  background: var(--ivory, #F8F5F0);
  border: 1px solid rgba(191, 169, 135, .35);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--charcoal);
  letter-spacing: .2px;
  cursor: default;
  /* Passive label — no hover interaction (client request) */
  pointer-events: none;
}

/* ============================================================================ */
/* FINAL CTA — full-bleed background image + green→transparent gradient.       */
/* Image at the base, gradient on top fading from solid deep-forest down to    */
/* 25% so the photo emerges visibly at the bottom edge.                        */
/* ============================================================================ */
.sales-final-cta {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(80px, 11vw, 140px) 0;
  overflow: hidden;
  isolation: isolate;
}
.sales-final-cta__image {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -2;
}
.sales-final-cta__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--deep-forest, #1E3A2F) 0%,
    rgba(30, 58, 47, .85) 35%,
    rgba(30, 58, 47, .55) 70%,
    rgba(30, 58, 47, .25) 100%
  );
  z-index: -1;
}
/* Centered, vertically-stacked CTA — applies to every page that uses
   .sales-final-cta (services except cabinet, about-us, blog archive, single post).
   Cabinet uses .cta-ready (different class) and stays untouched. */
.sales-final-cta__inner {
  display: flex;
  flex-direction: column;            /* stack vertically: text → buttons */
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 28px;
  flex-wrap: wrap;
}
.sales-final-cta__text {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 760px;                  /* balanced 1–2 line wrap on h2 */
  text-align: center;
}
/* Eyebrow with gold accent lines on BOTH sides — matches editorial-centered style.
   Restores the line that was lost when the previous rule used `inline-block`
   (which broke the ::before pseudo's width). */
.sales-final-cta .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--soft-gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 auto 14px;
}
.sales-final-cta .eyebrow::before,
.sales-final-cta .eyebrow::after {
  content: '';
  display: inline-block;
  width: 42px;
  height: 1px;
  background: var(--soft-gold);
}
.sales-final-cta h2 {
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 0 auto;
  max-width: 680px;
  text-align: center;
  text-wrap: balance;                /* browsers that support it balance line widths */
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.sales-final-cta__sub {
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .4px;
  margin: 14px auto 0;
  max-width: 640px;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
.sales-final-cta__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 760px) {
  .sales-final-cta__actions { width: 100%; justify-content: center; }
}

/* ============================================================================ */
/* STRATEGIC SALES — Our Process section, full-bleed charcoal background.       */
/* The section spans the full viewport width and inverts text colors so the    */
/* Miguel profile card + the 4 process steps read cleanly on dark.             */
/* ============================================================================ */
.sales-process-section {
  position: relative;
  background: var(--charcoal, #2D2D2E);
  color: #fff;
  padding: 100px 0;
  /* Full-bleed even if a parent ever introduces max-width */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.sales-process-section .container {
  position: relative;
  z-index: 1;
}
.sales-process-section .eyebrow {
  color: var(--soft-gold) !important;
}
.sales-process-section .section-title,
.sales-process-section h2 {
  color: #fff !important;
}
.sales-process-section .process-copy,
.sales-process-section p {
  color: rgba(255, 255, 255, .78);
}

/* Step blocks — translucent dark surface with gold numbers/headings */
.sales-process-section .steps .step {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 14px;
  padding: 18px 20px;
  backdrop-filter: blur(8px);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.sales-process-section .steps .step:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(201, 169, 97, .35);
  transform: translateY(-2px);
}
.sales-process-section .steps .step h4 {
  color: #fff;
}
.sales-process-section .steps .step p {
  color: rgba(255, 255, 255, .68);
}

/* Miguel profile card — invert to a translucent dark glass card so it sits
   well on the charcoal background without looking pasted on. */
.sales-process-section .sales-process-profile__photo {
  border-color: rgba(191, 169, 135, .40);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.sales-process-section .sales-process-profile__card {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(191, 169, 135, .35);
  backdrop-filter: blur(14px);
}
.sales-process-section .sales-process-profile__card h3 {
  color: #fff;
}
.sales-process-section .sales-process-profile__card p {
  color: rgba(255, 255, 255, .82);
}

/* ============================================================================ */
/* OUR PROCESS STEPS — cascade-in animation (right → left).                    */
/* When the .process section scrolls into view (gets .visible from the IO),    */
/* each numbered step slides in from the right with a staggered delay,         */
/* creating a sequential 1→2→3→4 reveal.                                      */
/* ============================================================================ */
.process.reveal-up .steps .step {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity .55s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.process.reveal-up.visible .steps .step {
  opacity: 1;
  transform: translateX(0);
}
/* Staggered cascade — each step waits a bit longer than the previous. */
.process.reveal-up.visible .steps .step:nth-child(1) { transition-delay: 0.10s; }
.process.reveal-up.visible .steps .step:nth-child(2) { transition-delay: 0.24s; }
.process.reveal-up.visible .steps .step:nth-child(3) { transition-delay: 0.38s; }
.process.reveal-up.visible .steps .step:nth-child(4) { transition-delay: 0.52s; }
.process.reveal-up.visible .steps .step:nth-child(5) { transition-delay: 0.66s; }
.process.reveal-up.visible .steps .step:nth-child(6) { transition-delay: 0.80s; }

/* Respect users who prefer reduced motion — show steps immediately. */
@media (prefers-reduced-motion: reduce) {
  .process.reveal-up .steps .step,
  .process.reveal-up.visible .steps .step {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================================ */
/* HOMEPAGE HERO TEAM CARD — wider photo + top-aligned with the title.         */
/* Overrides default .hero-card sizing so the image fills more horizontal      */
/* space and starts at the top of the grid (next to the headline) instead of  */
/* aligning to the bottom CTAs.                                                */
/* ============================================================================ */
body.home .hero-grid {
  grid-template-columns: 1fr 1.15fr !important; /* give the photo more horizontal */
  align-items: start !important;                /* top-align with the title */
  gap: 56px !important;
}
body.home .hero-card {
  align-self: center !important;
  justify-self: center !important;              /* center inside the grid column */
  width: fit-content !important;                /* hug the photo width */
  height: fit-content !important;               /* hug the photo height */
  margin-top: 0;
  padding: 14px !important;                     /* equal gap on ALL sides — top, bottom, left, right */
}
body.home .hero-card img {
  height: 540px !important;                     /* fixed photo height */
  width: auto !important;                       /* width follows natural aspect ratio */
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center 30% !important;
}
@media (max-width: 1024px) {
  body.home .hero-grid {
    grid-template-columns: 1fr !important;
  }
  body.home .hero-card img {
    /* Keep natural aspect ratio on mobile/tablet — scales proportionally via max-width:100% */
    height: auto !important;
  }
}

/* ============================================================================ */
/* ABOUT US — FOUNDING CREDIBILITY (dark premium band).                        */
/* Full-bleed charcoal background, gold dividers, glass cards with gold        */
/* hover halo. Replaces the ivory background for a premium "divisions" reveal. */
/* ============================================================================ */
.about-leadership-section {
  background: var(--charcoal, #2D2D2E) !important;
  color: #fff;
  padding: 110px 0 !important;
  position: relative;
  overflow: hidden;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.about-leadership-section::before {
  content: '';
  position: absolute;
  right: -160px;
  top: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(191, 169, 135, .18), transparent 70%);
  pointer-events: none;
}
.about-leadership-section > .container {
  position: relative;
  z-index: 1;
}
.about-leadership-section .about-section-header .eyebrow {
  color: var(--soft-gold) !important;
}
.about-leadership-section .about-section-header .eyebrow::before,
.about-leadership-section .about-section-header .eyebrow::after {
  background: rgba(201, 169, 97, .55) !important;
}
.about-leadership-section .about-section-header h2 {
  color: #fff !important;
}
.about-leadership-section .about-section-header p {
  color: rgba(255, 255, 255, .72);
}
.about-leadership-section .founding-companies-note {
  color: rgba(255, 255, 255, .55);
  border-top-color: rgba(255, 255, 255, .12);
}

/* ============================================================================ */
/* ABOUT US — EXECUTION TEAM collage (2 photos | center text | 2 photos).      */
/* Photos: gold border + rounded corners + glow halo. Text overlaps inward.   */
/* ============================================================================ */
.about-team-section .about-team-collage {
  display: grid;
  /* Photos wider, text column narrower (more vertical) */
  grid-template-columns: 1.3fr 0.75fr 1.3fr;
  gap: 28px;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
}

/* ----- Execution Team — V2 layout: text LEFT (larger) + 3-photo collage RIGHT
        (1 wide hero photo on top, 2 squares below). ----- */
.about-team-section .about-team-collage--v2 {
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: center;
  max-width: 1280px;
}
.about-team-section .about-team-collage--v2 .about-team-collage__copy {
  /* Reset the prior centered/overlapping card — V2 is a clean left text block. */
  position: static;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: left;
  max-width: 480px;
}
.about-team-section .about-team-collage--v2 .about-team-collage__copy .eyebrow {
  justify-content: flex-start;
}
.about-team-section .about-team-collage--v2 .about-team-collage__copy .eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: rgba(191,169,135,.6);
}
.about-team-section .about-team-collage--v2 .about-team-collage__copy .eyebrow::after {
  content: none;            /* single dash on the left only — keeps eyebrow left-anchored */
}
.about-team-section .about-team-collage--v2 .about-team-collage__copy h2 {
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.02;
  margin: 18px 0 22px;
  letter-spacing: -1px;
}
.about-team-section .about-team-collage--v2 .about-team-collage__copy p {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75;
  max-width: 460px;
}
/* The 3-photo collage on the right */
.about-team-section .about-team-collage__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.05fr 1fr;
  grid-template-areas:
    "wide wide"
    "left right";
  gap: 22px;
}
.about-team-section .about-team-collage__photos .about-team-photo {
  margin: 0;
  border-radius: 18px;
  border: 2px solid var(--soft-gold);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(191,169,135,.30),
    0 18px 50px rgba(0,0,0,.18),
    0 0 40px rgba(191,169,135,.22);
  transition: transform .35s ease, box-shadow .35s ease;
}
.about-team-section .about-team-collage__photos .about-team-photo:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(191,169,135,.42),
    0 24px 60px rgba(0,0,0,.26),
    0 0 56px rgba(191,169,135,.32);
}
.about-team-section .about-team-collage__photos .about-team-photo--wide {
  grid-area: wide;
}
.about-team-section .about-team-collage__photos .about-team-photo:nth-child(2) {
  grid-area: left;
}
.about-team-section .about-team-collage__photos .about-team-photo:nth-child(3) {
  grid-area: right;
}
.about-team-section .about-team-collage__photos .about-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-team-section .about-team-collage__photos .about-team-photo--wide img {
  height: 280px;
}
.about-team-section .about-team-collage__photos .about-team-photo:not(.about-team-photo--wide) img {
  height: 260px;
}
@media (max-width: 900px) {
  .about-team-section .about-team-collage--v2 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-team-section .about-team-collage--v2 .about-team-collage__copy {
    max-width: none;
    text-align: center;
  }
  .about-team-section .about-team-collage--v2 .about-team-collage__copy .eyebrow {
    justify-content: center;
  }
  .about-team-section .about-team-collage--v2 .about-team-collage__copy .eyebrow::after {
    content: '';
    display: inline-block;
    width: 32px;
    height: 1px;
    background: rgba(191,169,135,.6);
  }
}
@media (max-width: 600px) {
  .about-team-section .about-team-collage__photos .about-team-photo--wide img,
  .about-team-section .about-team-collage__photos .about-team-photo:not(.about-team-photo--wide) img {
    height: 180px;
  }
}
.about-team-section .about-team-collage__col {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.about-team-section .about-team-collage__col .about-team-photo {
  margin: 0;
  border-radius: 18px;
  border: 2px solid var(--soft-gold);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(191,169,135,.30),
    0 18px 50px rgba(0,0,0,.18),
    0 0 40px rgba(191,169,135,.22);
  transition: transform .35s ease, box-shadow .35s ease;
}
.about-team-section .about-team-collage__col .about-team-photo:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(191,169,135,.42),
    0 24px 60px rgba(0,0,0,.26),
    0 0 56px rgba(191,169,135,.32);
}
.about-team-section .about-team-collage__col .about-team-photo img {
  width: 100%;
  height: 340px;                 /* taller photos so the collage feels bigger */
  object-fit: cover;
  display: block;
}
.about-team-section .about-team-collage__copy {
  position: relative;
  z-index: 5;
  margin: 0 -32px;                /* slight overlap onto photo columns */
  padding: 38px 28px;
  background: var(--ivory, #F7F2EA);
  border: 1px solid rgba(191,169,135,.36);
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 28px 70px rgba(45,45,46,.10);
}
.about-team-section .about-team-collage__copy .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--soft-gold);
}
.about-team-section .about-team-collage__copy .eyebrow::before,
.about-team-section .about-team-collage__copy .eyebrow::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: rgba(191,169,135,.6);
}
.about-team-section .about-team-collage__copy h2 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--charcoal);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.1;
  margin: 16px 0 16px;
  letter-spacing: -.3px;
}
.about-team-section .about-team-collage__copy .about-team-collage__title-line {
  display: block;            /* force the title into 2 lines: "The field team" / "behind the standard." */
}
.about-team-section .about-team-collage__copy p {
  color: #5a554e;
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 900px) {
  .about-team-section .about-team-collage {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .about-team-section .about-team-collage__copy {
    grid-column: 1 / -1;
    margin: 0 0 16px;
    order: -1;
  }
  .about-team-section .about-team-collage__col {
    gap: 28px;
  }
  .about-team-section .about-team-collage__col .about-team-photo img {
    height: 240px;
  }
}
@media (max-width: 600px) {
  .about-team-section .about-team-collage {
    grid-template-columns: 1fr;
  }
  .about-team-section .about-team-collage__col {
    flex-direction: row;
    gap: 14px;
  }
  .about-team-section .about-team-collage__col .about-team-photo img {
    height: 180px;
  }
}

/* ============================================================================ */
/* ABOUT US — COMPANY OVERVIEW dark premium band.                              */
/* Same charcoal + gold radial accent treatment as Founding Credibility,       */
/* so the section reads as a coordinated premium pair on the page.             */
/* ============================================================================ */
.about-overview-section {
  /* Vertical gradient: brand deep-forest green (top) → brand charcoal
     (bottom) so it transitions seamlessly into the "Our Founding Companies"
     band. Both colors are the official brand palette. */
  background: linear-gradient(180deg,
    var(--deep-forest, #36493F) 0%,
    var(--deep-forest, #36493F) 18%,
    var(--charcoal, #2D2D2E) 100%) !important;
  color: #fff;
  position: relative;
  overflow: hidden;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 110px 0 90px !important;
}
.about-overview-section::before {
  content: '';
  position: absolute;
  left: -160px;
  bottom: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle at 70% 70%, rgba(191, 169, 135, .18), transparent 70%);
  pointer-events: none;
}
.about-overview-section > .container {
  position: relative;
  z-index: 1;
}
.about-overview-section .eyebrow {
  color: var(--soft-gold) !important;
}
.about-overview-section .eyebrow::before,
.about-overview-section .eyebrow::after {
  background: rgba(201, 169, 97, .55) !important;
}
.about-overview-section p,
.about-overview-section .entry-content p {
  color: rgba(255, 255, 255, .82);
}
.about-overview-section .about-closing-line {
  color: #fff !important;
  /* Match the size of the next section's title ("Our Founding Companies"). */
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(34px, 4.8vw, 60px) !important;
  line-height: 1.18 !important;
  letter-spacing: -1px;
  /* Allow natural wrapping with balanced line breaks — at 60px the full line
     is ~900px wide and would overflow narrower containers if forced nowrap. */
  white-space: normal;
  text-wrap: balance;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Why Clients Trust Us eyebrow — add the gold dash that was missing */
.about-page .buyer-programs-section .buyer-programs-lead .eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  color: var(--soft-gold) !important;
}
.about-page .buyer-programs-section .buyer-programs-lead .eyebrow::before {
  content: '';
  display: inline-block;
  width: 42px;
  height: 1px;
  background: var(--soft-gold);
  flex-shrink: 0;
}
/* Widen the first Company Overview body so it spans closer to the photo width */
.about-overview-section .about-overview-copy.about-overview-copy--centered:first-of-type,
.about-overview-section > .container:first-child .about-overview-copy--centered {
  max-width: 1100px;
}
/* Vertical breathing room between each .container block inside Company Overview
   (first body → photo → second body + closing line) */
.about-overview-section > .container + .container {
  margin-top: 56px;
}
@media (max-width: 760px) {
  .about-overview-section > .container + .container {
    margin-top: 36px;
  }
}
/* Photo wrapped in a semi-transparent glass card (mirrors the Home hero-card)
   with a thick gold gradient border that hides any visible image edge. */
.about-overview-section .about-overview-photo {
  margin: 0 auto;
  padding: 3px;                               /* tight gap — container almost touches photo */
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Gold gradient border — reduced another 70% (was 0.5px → now 0.15px,
     effectively a hairline). */
  border: 0.15px solid transparent;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)),
    linear-gradient(135deg, #d8c189 0%, #BFA987 35%, #8c7647 60%, #BFA987 80%, #e4cc97 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: 10px;
  /* Subtle scroll-triggered entrance: fade + lift as the photo enters viewport */
  animation: about-overview-photo-enter linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
  /* Lifted shadow — gold glow halo also softened to match the thinner border. */
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.35),
    0 0 60px rgba(191, 169, 135, 0.09);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}
.about-overview-section .about-overview-photo:hover {
  /* Hover lift + subtle scale — matches the card hover treatment */
  transform: translateY(-6px) scale(1.005);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.55),
    0 0 90px rgba(191, 169, 135, 0.36);
}
/* Diagonal gold "shine" sweep across the photo on hover */
.about-overview-section .about-overview-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.18) 48%,
    rgba(255, 230, 180, 0.42) 50%,
    rgba(255, 255, 255, 0.18) 52%,
    transparent 62%,
    transparent 100%
  );
  background-size: 240% 240%;
  background-position: -120% -120%;
  background-repeat: no-repeat;
  background-clip: padding-box;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 2;
  mix-blend-mode: screen;
}
.about-overview-section .about-overview-photo {
  position: relative;
}
.about-overview-section .about-overview-photo:hover::after {
  animation: about-overview-photo-shine 1.1s cubic-bezier(.32, .9, .35, 1) both;
}
@keyframes about-overview-photo-shine {
  0% {
    opacity: 0;
    background-position: -120% -120%;
  }
  18% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: 120% 120%;
  }
}
/* Scroll-triggered entrance — fade + subtle upward lift as the photo enters
   the viewport. Uses view-timeline (modern browsers); on browsers without
   support, the @supports check leaves the photo visible at rest. */
@keyframes about-overview-photo-enter {
  from {
    opacity: 0;
    transform: translateY(38px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@supports not (animation-timeline: view()) {
  .about-overview-section .about-overview-photo {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-overview-section .about-overview-photo,
  .about-overview-section .about-overview-photo::after {
    transition: none !important;
    animation: none !important;
  }
  .about-overview-section .about-overview-photo:hover {
    transform: none;
  }
}
.about-overview-section .about-overview-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;                        /* inner radius slightly less than outer */
}

/* Glass card treatment on dark background */
.about-leadership-section .founding-company-card {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35) !important;
  transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.about-leadership-section a.founding-company-card:hover,
.about-leadership-section a.founding-company-card:focus-visible {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(191, 169, 135, .55) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55) !important;
  transform: translateY(-4px);
}
.about-leadership-section .founding-company-card__logo-wrap {
  background: rgba(191, 169, 135, .12);
  border: 1px solid rgba(191, 169, 135, .25);
}
.about-leadership-section .founding-company-card__logo-placeholder {
  color: var(--soft-gold);
}
.about-leadership-section .founding-company-card h3 {
  color: #fff !important;
}
.about-leadership-section .founding-company-card p {
  color: rgba(255, 255, 255, .68) !important;
}

/* ============================================================================ */
/* HOMEPAGE WHAT WE DO — cards are now anchor links to service pages.          */
/* ============================================================================ */
a.compact-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
a.compact-card:hover,
a.compact-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(191, 169, 135, .55);
}
a.compact-card:focus-visible {
  outline: 2px solid var(--soft-gold);
  outline-offset: 4px;
}
.compact-card__cta {
  display: inline-block;
  margin-top: 10px;
  color: var(--soft-gold);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  opacity: .7;
  transition: opacity .25s ease, transform .25s ease;
}
a.compact-card:hover .compact-card__cta,
a.compact-card:focus-visible .compact-card__cta {
  opacity: 1;
  transform: translateX(4px);
}

/* ============================================================================ */
/* FOUNDING DIVISIONS — service-page links + cascade-in animation.             */
/* ============================================================================ */
.founding-companies-grid.reveal-up .founding-company-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease,
              transform .7s cubic-bezier(.2, .7, .2, 1),
              box-shadow .25s ease,
              border-color .25s ease;
}
.founding-companies-grid.reveal-up.visible .founding-company-card {
  opacity: 1;
  transform: translateY(0);
}

a.founding-company-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
a.founding-company-card:hover,
a.founding-company-card:focus-visible {
  border-color: rgba(191, 169, 135, .55) !important;
  box-shadow: 0 24px 56px rgba(45, 45, 46, .14) !important;
  transform: translateY(-4px);
}
a.founding-company-card:focus-visible {
  outline: 2px solid var(--soft-gold);
  outline-offset: 4px;
}
.founding-company-card__cta {
  margin-top: auto;
  padding-top: 14px;
  color: var(--soft-gold);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  align-self: flex-start;
  transition: transform .25s ease;
}
a.founding-company-card:hover .founding-company-card__cta,
a.founding-company-card:focus-visible .founding-company-card__cta {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .founding-companies-grid.reveal-up .founding-company-card,
  .founding-companies-grid.reveal-up.visible .founding-company-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================================
   PROCESS — IVORY COMPACT TIMELINE (homepage "Our Process" section)
   Light cream background with numbered glowing nodes (the number lives
   INSIDE the dot) and a gold connector that fills as the user scrolls.
   ========================================================================= */
.process-section--ivory {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(80% 60% at 85% 10%, rgba(191,169,135,0.10) 0%, transparent 60%),
    radial-gradient(60% 50% at 10% 90%, rgba(191,169,135,0.06) 0%, transparent 65%),
    var(--ivory);
  color: var(--text);
  padding: 96px 0 100px;
  overflow: hidden;
}
.process-section--ivory::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(45,45,46,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,45,46,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  pointer-events: none;
  z-index: -1;
  opacity: .65;
}
.process-section--ivory .container.process-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 70px;
  align-items: center;
}
.process-section--ivory .eyebrow {
  color: var(--soft-gold);
  letter-spacing: 3.2px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 14px;
}
.process-section--ivory .section-title {
  color: var(--charcoal) !important;
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 4.4vw, 50px) !important;
  line-height: 1.02 !important;
  letter-spacing: -1px !important;
  margin-bottom: 16px !important;
}
.process-section--ivory .process-copy {
  color: #5d564d;
  font-size: 16px;
  line-height: 1.6;
  max-width: 560px;
  margin-bottom: 32px;
}

/* --- Visual (photo + halo + grid + scan line) --- */
.process-section--ivory .process-visual {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 24px 60px rgba(45,45,46,.20),
    0 0 0 1px rgba(191,169,135,.18) inset;
}
.process-section--ivory .process-visual img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  filter: contrast(1.04) saturate(1.02);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.process-section--ivory.reveal-up.visible .process-visual img {
  transform: scale(1.03);
}

/* Slider mode: multiple stacked photos that cross-fade every few seconds.
   IMPORTANT: every slide must inherit the parent's border-radius AND have
   overflow:hidden — without explicit inherit, the scale(1.04) transform
   creates a brief moment where corners render square before the parent
   clip catches up. Setting border-radius on each slide directly fixes it. */
/* Slider container — uses <div> slides with background-image (NOT <img>) so
   border-radius is applied by CSS at first paint — no square-corner flash.

   Robust clip-path + contain:paint combo: the parent .reveal-up section animates
   transform/opacity on scroll-in, which on some browsers creates a brief moment
   where descendants paint OUTSIDE the parent's overflow:hidden clip. Using:
     - clip-path: inset(0 round 22px)  → GPU-level mask, applied at compositing
     - contain: paint                  → forces all descendant paint inside the box
     - isolation: isolate              → own stacking context independent of parents
   …guarantees the rounded shape is applied from frame 1, no flash. */
.process-section--ivory .process-visual--slider {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  clip-path: inset(0 round 22px);
  contain: paint;
  isolation: isolate;
  transform: translateZ(0);            /* promote to own GPU layer up-front */
  /* Reserve height since slides are absolute-positioned divs (no intrinsic height) */
  min-height: 620px;
  height: 620px;
}
.process-section--ivory .process-visual--slider .process-visual__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 22px;                 /* explicit */
  clip-path: inset(0 round 22px);      /* defensive — clip each slide too */
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity;                /* pre-promote to compositing layer */
  z-index: 1;
}
.process-section--ivory .process-visual--slider .process-visual__slide.is-active {
  opacity: 1;
  z-index: 2;
}
@media (max-width: 1024px) {
  .process-section--ivory .process-visual--slider {
    border-radius: 18px;
    clip-path: inset(0 round 18px);
    min-height: 380px;
    height: 380px;
  }
  .process-section--ivory .process-visual--slider .process-visual__slide {
    border-radius: 18px;
    clip-path: inset(0 round 18px);
  }
}
.process-section--ivory .process-visual__halo {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(191,169,135,.30) 0%, transparent 55%);
  mix-blend-mode: screen;
  z-index: 1;
}
.process-section--ivory .process-visual__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(191,169,135,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191,169,135,.22) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  opacity: .28;
  z-index: 2;
}
.process-section--ivory .process-visual__grid::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(191,169,135,.95) 50%, transparent 100%);
  box-shadow: 0 0 12px rgba(191,169,135,.7);
  animation: processScan 4.5s linear infinite;
}
@keyframes processScan {
  0%   { top: -4%;  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 104%; opacity: 0; }
}

/* --- Timeline list (compact) --- */
.process-section--ivory .process-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 72px;
  display: grid;
  gap: 12px;
}
.process-section--ivory .process-timeline__step {
  position: relative;
  display: block;
}
.process-section--ivory .process-timeline__body {
  position: relative;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid rgba(191,169,135,.22);
  border-radius: 14px;
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.process-section--ivory .process-timeline__step.is-active .process-timeline__body {
  border-color: rgba(191,169,135,.55);
  background: #fff;
  box-shadow: 0 14px 32px rgba(45,45,46,.10), 0 0 0 1px rgba(191,169,135,.22) inset;
  transform: translateX(4px);
}
.process-section--ivory .process-timeline__body h4 {
  color: var(--charcoal);
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  line-height: 1.18;
  margin: 0 0 4px;
  letter-spacing: -.3px;
}
.process-section--ivory .process-timeline__body p {
  color: #686058;
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}

/* --- Numbered node on the left (number lives INSIDE the dot) --- */
.process-section--ivory .process-timeline__node {
  position: absolute;
  left: -56px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(191,169,135,.55);
  box-shadow: 0 4px 12px rgba(45,45,46,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s ease, box-shadow .4s ease, background .4s ease;
}
.process-section--ivory .process-timeline__node-num {
  position: relative;
  z-index: 2;
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: .5px;
  transition: color .4s ease;
}
.process-section--ivory .process-timeline__node::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--soft-gold);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .4s ease, transform .4s ease;
}
.process-section--ivory .process-timeline__node::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(191,169,135,.55);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .5s ease, transform .5s ease;
}
.process-section--ivory .process-timeline__step.is-active .process-timeline__node {
  background: var(--soft-gold);
  border-color: var(--soft-gold);
  box-shadow: 0 0 0 4px rgba(191,169,135,.18), 0 0 22px rgba(191,169,135,.55);
  transform: translateY(-50%) scale(1.04);
}
.process-section--ivory .process-timeline__step.is-active .process-timeline__node-num {
  color: #fff;
}
/* Continuous radar pulse — visible on ALL nodes, all the time. The
   is-active state above bumps the colors to gold + makes the inner
   pulse stronger; this rule guarantees the rings always animate so
   the timeline reads as "alive" before the user even scrolls. */
.process-section--ivory .process-timeline__node::after {
  opacity: 1;
  transform: scale(1);
  animation: nodeRippleIvory 2.6s ease-out infinite;
}
.process-section--ivory .process-timeline__step:nth-child(2) .process-timeline__node::after { animation-delay: .65s; }
.process-section--ivory .process-timeline__step:nth-child(3) .process-timeline__node::after { animation-delay: 1.3s; }
.process-section--ivory .process-timeline__step:nth-child(4) .process-timeline__node::after { animation-delay: 1.95s; }

.process-section--ivory .process-timeline__step.is-active .process-timeline__node::before {
  opacity: 1;
  transform: scale(1);
  animation: nodePulseIvory 2.4s ease-in-out infinite;
}
.process-section--ivory .process-timeline__step.is-active .process-timeline__node::after {
  animation: nodeRippleIvoryActive 2.2s ease-out infinite;
}
@keyframes nodePulseIvory {
  0%, 100% { opacity: .35; transform: scale(1.02); }
  50%      { opacity: .15; transform: scale(.85); }
}
@keyframes nodeRippleIvory {
  0%   { opacity: .35; transform: scale(.7); }
  100% { opacity: 0;   transform: scale(2.0); }
}
@keyframes nodeRippleIvoryActive {
  0%   { opacity: .75; transform: scale(.6); }
  100% { opacity: 0;   transform: scale(2.4); }
}

/* --- Vertical connector (animated fill) --- */
.process-section--ivory .process-timeline__connector {
  position: absolute;
  /* Node center: padding-left(72) + node.left(-56) + node.width/2(19) = 35px.
     Connector width 2px → left 34px so its center matches 35px. */
  left: 34px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(180deg, rgba(191,169,135,.22) 0%, rgba(191,169,135,.10) 50%, rgba(191,169,135,.22) 100%);
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.process-section--ivory .process-timeline__connector-fill {
  display: block;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--soft-gold) 0%, #D9C29A 50%, var(--soft-gold) 100%);
  box-shadow: 0 0 12px rgba(191,169,135,.55);
  transition: height .25s linear;
}

/* Responsive */
@media (max-width: 1024px) {
  .process-section--ivory .container.process-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .process-section--ivory .process-visual img { height: 420px; }
}
@media (max-width: 640px) {
  .process-section--ivory { padding: 72px 0 80px; }
  .process-section--ivory .process-timeline { padding-left: 56px; }
  .process-section--ivory .process-timeline__node { left: -48px; width: 34px; height: 34px; }
  .process-section--ivory .process-timeline__node-num { font-size: 12px; }
  .process-section--ivory .process-timeline__connector { left: 24px; }
  .process-section--ivory .process-visual img { height: 320px; }
  .process-section--ivory .process-timeline__body h4 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .process-section--ivory .process-visual__grid::after { animation: none; opacity: 0; }
  .process-section--ivory .process-timeline__step.is-active .process-timeline__node::before,
  .process-section--ivory .process-timeline__step.is-active .process-timeline__node::after { animation: none; }
  .process-section--ivory .process-timeline__connector-fill { transition: none; }
  .process-section--ivory .process-visual img { transition: none; }
}

/* =========================================================================
   HERO — HOMEPAGE — clean editorial layout, 2-line title (white + gold)
   Wider container so the H1 has enough horizontal room to break cleanly
   into "We handle the trades." (white) on line 1 and
   "You build the vision." (gold) on line 2.
   ========================================================================= */
body.home .hero .container.hero-grid {
  width: min(1480px, calc(100% - 24px)) !important;
  max-width: 1480px !important;
}
body.home .hero-grid {
  /* Balanced 1fr/1fr — text column wide enough that each H1 line
     ("We handle the trades." / "You build the vision.") fits on
     ONE row, and the photo column matches the photo's natural width. */
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: 56px !important;
}
body.home .hero-content {
  position: relative;
  z-index: 3;
}
body.home .hero-card {
  position: relative;
  z-index: 3;
  align-self: center !important;
  justify-self: center !important;       /* center inside the grid column */
  width: fit-content !important;         /* hug photo width — equal side gap */
  height: fit-content !important;        /* hug photo height — equal top/bottom gap */
  max-width: 100% !important;
  margin: 0 !important;
  padding: 14px !important;              /* 14px equal gap on ALL sides */
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  /* Fixed-px rounded corners — matches the proportional look of the process slider (22px).
     Card radius is +6px so the visual gap between card edge and image stays uniform. */
  border-radius: 28px !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.22);
}
/* Figure wrapper inside the card: ships with inline 18px radius from the WP
   block editor; override and clip the image to a matching rounded shape. */
body.home .hero-card .hero-card__image {
  border-radius: 22px !important;
  overflow: hidden !important;
  margin: 0 !important;
  display: block;
  line-height: 0;                        /* eliminate inline-baseline whitespace under img */
}
body.home .hero-card img {
  /* Photo preserves its NATURAL aspect ratio — fixed width, height auto-computes.
     No object-fit:cover (no cropping people). On smaller viewports it just scales
     proportionally smaller via max-width:100% — same shape, never cuts the team. */
  width: 760px !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: initial !important;
  border-radius: 22px !important;
  display: block;
  margin: 0;
}

/* Eyebrow snug to the H1 */
body.home .hero-content > .eyebrow,
body.home .hero-content > p.eyebrow {
  margin-bottom: 14px !important;
}

/* Responsive */
@media (max-width: 1024px) {
  body.home .hero .container.hero-grid {
    width: min(1180px, calc(100% - 24px)) !important;
  }
  body.home .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  body.home .hero-card img { height: auto !important; }
}
@media (max-width: 720px) {
  body.home .hero-card img { height: auto !important; }
}
@media (max-width: 480px) {
  body.home .hero-card img { height: auto !important; }
}

/* =========================================================================
   RESPONSIVE OVERHAUL — site-wide mobile + tablet polish
   =========================================================================
   Goal: make every page work cleanly on phones (≤600), small tablets
   (≤960), and large tablets (≤1024). Includes:
   - Proper WP block-navigation hamburger styling (replaces the broken
     custom .mobile-menu-btn flow).
   - Hero CTAs that were hard-coded to width:360px now go full-width on
     small screens.
   - Container padding & typography tuning for tiny viewports.
   ========================================================================= */

/* ---- 1) WP core navigation: hamburger + slide-in overlay ---- */
/* The wp:navigation block ships with a built-in responsive container.
   By default it only shows the hamburger below 600px. We push that
   threshold up to 960px so tablets get the menu too, and we restyle
   the open/close buttons + overlay panel to match the brand. */

/* a) Hide the inline horizontal menu at ≤960 and force the hamburger to show. */
@media (max-width: 960px) {
  .nav .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) {
    display: none !important;
  }
  .nav .wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
}

/* b) Style the hamburger open button (gold circle on dark nav). */
.nav .wp-block-navigation__responsive-container-open {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(191,169,135,.55);
  background: rgba(255,255,255,.06);
  color: #fff;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
  z-index: 70;
}
.nav .wp-block-navigation__responsive-container-open:hover,
.nav .wp-block-navigation__responsive-container-open:focus-visible {
  background: rgba(191,169,135,.18);
  border-color: var(--soft-gold);
  transform: translateY(-1px);
}
.nav .wp-block-navigation__responsive-container-open svg {
  fill: #fff;
  width: 22px;
  height: 22px;
}

/* c) Style the open overlay (full-screen charcoal panel). */
.nav .wp-block-navigation__responsive-container.is-menu-open {
  /* CRITICAL: must be fixed to the viewport so it always covers the
     full screen regardless of scroll position. WP core already does this
     but we re-assert with !important to win over any inherited rule. */
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;        /* dynamic viewport height — iOS safari */
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;       /* scroll inside if menu is long */
  -webkit-overflow-scrolling: touch;
  background: rgba(20,20,22,.97) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #fff !important;
  padding: 110px clamp(24px, 7vw, 56px) clamp(36px, 8vw, 64px) !important;
  z-index: 100000;
}
/* When the menu is open, freeze the page scroll so the overlay sits still
   over whatever section the user happened to be reading. */
body.has-modal-open,
html.has-modal-open {
  overflow: hidden !important;
  height: 100% !important;
}

/* d) Style nav items inside the overlay — large, readable, gold hover. */
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: clamp(14px, 3vw, 22px) !important;
  align-items: flex-start;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: #fff !important;
  font-family: 'Inter', sans-serif;
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 6px 0 !important;
  transition: color .2s ease, transform .2s ease;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
  color: var(--soft-gold) !important;
  transform: translateX(6px);
}
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
  color: var(--soft-gold) !important;
}

/* e) Mobile overlay nav-cta — same ghost gold treatment as desktop. */
.nav .wp-block-navigation__responsive-container.is-menu-open .nav-cta .wp-block-navigation-item__content {
  display: inline-flex;
  margin-top: 14px;
  padding: 12px 28px !important;
  background: transparent !important;
  color: var(--soft-gold) !important;
  border-radius: 8px !important;
  font-size: clamp(14px, 3.5vw, 16px);
  border: 1.5px solid var(--soft-gold) !important;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .nav-cta .wp-block-navigation-item__content:hover {
  background: rgba(191, 169, 135, 0.18) !important;
  border-color: var(--soft-gold) !important;
  color: var(--soft-gold) !important;
  transform: none;
}
/* Mobile menu — when on the Contact page, invert the CTA to solid gold
   fill + charcoal text (matches desktop active-state behavior). */
.nav .wp-block-navigation__responsive-container.is-menu-open .nav-cta.current-menu-item .wp-block-navigation-item__content {
  background: var(--soft-gold) !important;
  border-color: var(--soft-gold) !important;
  color: var(--charcoal) !important;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .nav-cta.current-menu-item .wp-block-navigation-item__label {
  color: var(--charcoal) !important;
}

/* f) Submenus inside the overlay: indented, smaller. */
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  padding-left: 18px !important;
  border-left: 1px solid rgba(191,169,135,.25);
  margin-top: 6px;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* g) The close (X) button — tappable, top-right, visible. */
.nav .wp-block-navigation__responsive-container-close {
  width: 46px;
  height: 46px;
  margin: clamp(20px, 4vw, 28px) clamp(20px, 4vw, 28px) 0 0;
  border-radius: 999px;
  border: 1px solid rgba(191,169,135,.55);
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.nav .wp-block-navigation__responsive-container-close svg {
  fill: #fff;
  width: 22px;
  height: 22px;
}
.nav .wp-block-navigation__responsive-container-close:hover {
  background: rgba(191,169,135,.18);
  border-color: var(--soft-gold);
}

/* ---- 2) Hero CTAs: full-width on phones (override the inline 360px) ---- */
@media (max-width: 720px) {
  .hero-actions {
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero .wp-block-buttons.hero-actions { width: 100%; }
  .hero-actions .wp-block-button,
  .hero-actions .hero-cta-builders,
  .hero-actions .hero-cta-homeowners {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .hero-actions .wp-block-button__link {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 56px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 15px;
  }
}

/* ---- 3) Hero typography & spacing tuning ---- */
@media (max-width: 720px) {
  .hero {
    padding-top: 90px !important;
    padding-bottom: 56px !important;
  }
  .hero h1 {
    font-size: clamp(32px, 9vw, 56px) !important;
    line-height: .98 !important;
    letter-spacing: -1px !important;
    text-align: left;
  }
  .hero p {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
  .hero-card { padding: 10px !important; }
  body.home .hero-card img { height: auto !important; }
}
@media (max-width: 480px) {
  body.home .hero-card img { height: auto !important; }
}

/* ---- 4) Container padding on small screens ---- */
@media (max-width: 600px) {
  .container {
    width: min(1180px, calc(100% - 24px));
  }
}

/* ---- 5) Service stack zig-zag → single column on tablet ---- */
@media (max-width: 960px) {
  .service-stack .service-feature {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .service-stack .service-media img { height: 280px !important; }
  .service-stack .service-content { padding: 28px 24px !important; }
}

/* ---- 6) Founding companies grid on phones ---- */
@media (max-width: 720px) {
  .founding-companies-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

/* ---- 7) Process futuristic timeline — already responsive,
       just shrink the hero photo on phones too ---- */
@media (max-width: 720px) {
  .process-section--futuristic .process-copy { font-size: 15px; }
  .process-section--futuristic .process-timeline__body h4 { font-size: 20px; }
}

/* ---- 8) Gallery collage carousels — full-bleed, no horizontal overflow ---- */
@media (max-width: 720px) {
  .gallery.selected-collage { padding: 70px 0 !important; }
  .gallery.selected-collage .portfolio-header { margin-bottom: 28px !important; }
  .collage-row-gap { height: 60px !important; }
}

/* ---- 9) Choose Your Path on phones ---- */
@media (max-width: 720px) {
  .audience-pill-btn {
    min-width: 0;
    width: 100%;
    font-size: 16px;
    min-height: 60px;
  }
}

/* ---- 10) Body-level safety: prevent horizontal overflow anywhere ---- */
html, body { max-width: 100%; overflow-x: hidden; }

/* ---- 11) Footer nav, footer columns — stack on phones ---- */
@media (max-width: 720px) {
  footer .container { gap: 24px !important; }
  footer .wp-block-columns { flex-direction: column !important; gap: 28px !important; }
}

/* =========================================================================
   "What this division does" — Metal page variant
   • Text NOT in a card — just centered h2 + paragraph on the section bg
   • Image goes EDGE-TO-EDGE (full viewport width), flush with the bottom
     of the section so it sits seamlessly against "How We Work" below.
   ========================================================================= */
.inner-content-section--with-image {
  background: var(--ivory);
  padding: 80px 0 0 !important;     /* no bottom padding — image is flush */
  overflow: hidden;
}
.inner-content-section--with-image .metal-division-intro {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 56px;
}
.inner-content-section--with-image .metal-division-intro h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -.8px;
  color: var(--charcoal);
  margin: 0 0 18px;
}
.inner-content-section--with-image .metal-division-intro .entry-content p {
  color: #4a4640;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.7;
  max-width: 820px;
  margin: 0 auto;
}
/* Vertical spacing between adjacent paragraphs in any "What this division does"
   section (covers metal's .metal-division-intro AND glass/doors/subfloor's
   .inner-content-card.editorial-centered structure). */
.inner-content-section .entry-content p + p,
.inner-content-section--with-image .metal-division-intro .entry-content p + p {
  margin-top: 22px;
}

/* =========================================================================
   METAL FEATURE — Simple fade-in reveal
   The image starts at opacity 0 and fades to fully visible when it enters
   the viewport (.is-revealed class added by JS via IntersectionObserver).
   ========================================================================= */
.metal-division-feature {
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  display: block;
  line-height: 0;
  overflow: hidden;
}
.metal-division-feature img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}
.metal-division-feature.is-revealed img {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 720px) {
  .metal-division-feature img { max-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .metal-division-feature img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 720px) {
  .inner-content-section--with-image { padding: 60px 0 0 !important; }
  .inner-content-section--with-image .metal-division-intro { margin-bottom: 36px; }
  .metal-division-feature img { max-height: 320px; }
}

/* =========================================================================
   SERVICE PAGES — Section header centering (WHAT WE DO + PORTFOLIO)
   Both sections get a centered eyebrow with GOLD lines on both sides,
   centered title, and centered body copy. Scoped to .service-page so
   this never bleeds into home, cabinet, or other custom templates.
   ========================================================================= */

/* ---- WHAT WE DO — center header (eyebrow + title), reduce top padding ---- */
/* Base section is padding 56/56 but the header adds vertical mass, making
   the TOP feel taller than the bottom. Shrink the top padding so the
   visual balance matches what the user perceives as equal. */
.what-we-do-compact {
  padding: 28px 0 56px;
}
/* Center the section header (eyebrow + title) on ALL pages that use .what-we-do-compact:
   service pages, audience pages, and cabinet. */
.what-we-do-compact .compact-header {
  text-align: center !important;
  max-width: none;
  margin: 0 auto 28px !important;
}
.what-we-do-compact .compact-header .eyebrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--soft-gold) !important;
}
/* Decorative gold lines on both sides of the eyebrow ("WHAT WE DO") */
.what-we-do-compact .compact-header .eyebrow::before,
.what-we-do-compact .compact-header .eyebrow::after {
  content: '';
  display: inline-block;
  width: 42px;
  height: 1px;
  background: rgba(191,169,135,.64);
  flex-shrink: 0;
}
/* Title: 1 line on desktop, wraps naturally only on narrower viewports. */
.what-we-do-compact .compact-header h2,
.what-we-do-compact .compact-header .wp-block-heading {
  text-align: center;
  margin: 0 auto;
  max-width: none;
  font-size: clamp(22px, 2.8vw, 36px) !important;
  line-height: 1.15 !important;
  white-space: nowrap;
}
/* Allow the title to wrap naturally below 960px when nowrap would overflow. */
@media (max-width: 960px) {
  .what-we-do-compact .compact-header h2,
  .what-we-do-compact .compact-header .wp-block-heading {
    white-space: normal;
    font-size: clamp(20px, 4.2vw, 30px) !important;
  }
}

/* ---- PORTFOLIO — center header + tighter top/bottom padding (-25%) ---- */
/* PHP inline sets `padding: 90px 0 110px` on the section. We reduce that
   by ~25% so the section sits closer to its neighbors. */
.service-page .portfolio-section {
  padding: 68px 0 82px !important;
}
.service-page .portfolio-section .portfolio-header {
  text-align: center !important;
  max-width: 820px;
  margin: 0 auto 36px !important;
}
.service-page .portfolio-section .portfolio-header .eyebrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--soft-gold);
}
.service-page .portfolio-section .portfolio-header .eyebrow::before,
.service-page .portfolio-section .portfolio-header .eyebrow::after {
  content: '';
  display: inline-block;
  width: 42px;
  height: 1px;
  background: rgba(191,169,135,.64);
  flex-shrink: 0;
}
.service-page .portfolio-section .portfolio-header h2,
.service-page .portfolio-section .portfolio-header .section-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 740px;
}
.service-page .portfolio-section .portfolio-header p {
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- SERVICE AREAS — center eyebrow with gold lines + title 1 line ---- */
.service-page .service-areas-section .service-areas-header,
.audience-page .service-areas-section .service-areas-header,
.about-page .service-areas-section .service-areas-header {
  text-align: center !important;
  /* Header widened to ~1100px so the title visually matches the pills row
     below (≈1081px). Long titles wrap balanced; short titles stay on one line. */
  max-width: 1100px;
  margin: 0 auto 36px !important;
}
.service-page .service-areas-section .service-areas-header .eyebrow,
.audience-page .service-areas-section .service-areas-header .eyebrow,
.about-page .service-areas-section .service-areas-header .eyebrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--soft-gold) !important;
}
.service-page .service-areas-section .service-areas-header .eyebrow::before,
.service-page .service-areas-section .service-areas-header .eyebrow::after,
.audience-page .service-areas-section .service-areas-header .eyebrow::before,
.audience-page .service-areas-section .service-areas-header .eyebrow::after,
.about-page .service-areas-section .service-areas-header .eyebrow::before,
.about-page .service-areas-section .service-areas-header .eyebrow::after {
  content: '';
  display: inline-block;
  width: 42px;
  height: 1px;
  background: rgba(191,169,135,.64);
  flex-shrink: 0;
}
.service-page .service-areas-section .service-areas-header h2,
.service-page .service-areas-section .service-areas-header .section-title,
.audience-page .service-areas-section .service-areas-header h2,
.audience-page .service-areas-section .service-areas-header .section-title,
.about-page .service-areas-section .service-areas-header h2,
.about-page .service-areas-section .service-areas-header .section-title {
  text-align: center;
  margin: 0 auto;
  max-width: 1100px;
  white-space: normal;              /* allow long titles to wrap */
  text-wrap: balance;
  font-size: clamp(24px, 3vw, 38px) !important;
  line-height: 1.15 !important;
}
@media (max-width: 960px) {
  .service-page .service-areas-section .service-areas-header h2,
  .service-page .service-areas-section .service-areas-header .section-title {
    white-space: normal;
    font-size: clamp(20px, 4.4vw, 30px) !important;
  }
}

/* ---- GLASS portfolio title — widen so it wraps to 2 lines, not 3 ---- */
.service-page.service-page .portfolio-section .portfolio-header h2,
.service-page .portfolio-section .portfolio-header .section-title {
  max-width: 880px;   /* was 740px; the glass title overflowed to 3 lines */
}

/* ---- CABINETRY portfolio — same centered header treatment as service pages.
   Cabinet uses a block pattern (not a service-page template) so we target
   .cabinetry-portfolio-header directly. ---- */
.cabinetry-portfolio-header {
  text-align: center !important;
  max-width: 880px;
  margin: 0 auto 36px !important;
}
.cabinetry-portfolio-header .eyebrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--soft-gold);
}
.cabinetry-portfolio-header .eyebrow::before,
.cabinetry-portfolio-header .eyebrow::after {
  content: '';
  display: inline-block;
  width: 42px;
  height: 1px;
  background: rgba(191,169,135,.64);
  flex-shrink: 0;
}
.cabinetry-portfolio-header h2,
.cabinetry-portfolio-header .section-title {
  text-align: center;
  margin: 0 auto;
  max-width: 740px;
}
.cabinetry-portfolio-header p {
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 600px) {
  .cabinetry-portfolio-header .eyebrow::before,
  .cabinetry-portfolio-header .eyebrow::after { width: 24px; }
  .cabinetry-portfolio-header { margin-bottom: 28px !important; }
}

/* ---- Mobile tuning — shrink the eyebrow line widths on small screens ---- */
@media (max-width: 600px) {
  .what-we-do-compact .compact-header .eyebrow::before,
  .what-we-do-compact .compact-header .eyebrow::after,
  .service-page .portfolio-section .portfolio-header .eyebrow::before,
  .service-page .portfolio-section .portfolio-header .eyebrow::after,
  .service-page .service-areas-section .service-areas-header .eyebrow::before,
  .service-page .service-areas-section .service-areas-header .eyebrow::after {
    width: 24px;
  }
  .service-page .portfolio-section .portfolio-header { margin-bottom: 30px !important; }
  .what-we-do-compact .compact-header { margin-bottom: 24px !important; }
  .service-page .service-areas-section .service-areas-header { margin-bottom: 28px !important; }
}

/* =========================================================================
   PORTFOLIO — Filter pills + Modal grid + Image zoom
   Lives on Metal/Glass/Doors/Subfloor service pages. Pills are green-pill
   shaped (matching how-we-work numbered nodes but rounded). Modal is an
   ivory editorial sheet. Zoom is a dark-overlay lightbox.
   ========================================================================= */

/* ---- Filter buttons row (above the carousel) ---- */
.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 48px;
  max-width: 1100px;
  padding: 0 20px;
}
.portfolio-filter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  background: #fff;
  border: 2px solid var(--deep-forest);
  border-radius: 999px;          /* pill — circular edges, never square */
  color: var(--charcoal);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(45,45,46,.06);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s ease, color .35s ease, box-shadow .35s ease, border-color .35s ease;
  z-index: 1;
  white-space: nowrap;
}
/* Continuous radar pulse around each pill — staggered between buttons */
.portfolio-filter-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 1.5px solid rgba(54,73,63,.45);
  opacity: 1;
  animation: portfolioFilterPulse 2.8s ease-out infinite;
  pointer-events: none;
}
.portfolio-filters .portfolio-filter-btn:nth-child(1)::after { animation-delay: 0s;    }
.portfolio-filters .portfolio-filter-btn:nth-child(2)::after { animation-delay: .42s;  }
.portfolio-filters .portfolio-filter-btn:nth-child(3)::after { animation-delay: .84s;  }
.portfolio-filters .portfolio-filter-btn:nth-child(4)::after { animation-delay: 1.26s; }
.portfolio-filters .portfolio-filter-btn:nth-child(5)::after { animation-delay: 1.68s; }
.portfolio-filters .portfolio-filter-btn:nth-child(6)::after { animation-delay: 2.10s; }
.portfolio-filters .portfolio-filter-btn:nth-child(7)::after { animation-delay: 2.52s; }

@keyframes portfolioFilterPulse {
  0%   { opacity: .55; transform: scale(.92); }
  60%  { opacity: .15; transform: scale(1.15); }
  100% { opacity: 0;   transform: scale(1.25); }
}

.portfolio-filter-btn:hover,
.portfolio-filter-btn.is-active {
  background: var(--deep-forest);
  color: #fff;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 24px rgba(54,73,63,.35);
}
.portfolio-filter-btn:focus-visible {
  outline: 3px solid rgba(54,73,63,.45);
  outline-offset: 3px;
}

/* ---- Modal — full-screen ivory sheet ---- */
.portfolio-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(20px, 4vw, 60px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.portfolio-modal[hidden] { display: none; }

.portfolio-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 16, 19, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: -1;
  opacity: 0;
  transition: opacity .35s ease;
  cursor: pointer;
}
.portfolio-modal.is-open .portfolio-modal__backdrop { opacity: 1; }

.portfolio-modal__container {
  position: relative;
  width: min(1200px, 100%);
  background: var(--ivory);
  border-radius: 28px;
  padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px);
  box-shadow: 0 32px 80px rgba(0,0,0,.35);
  transform: scale(.95);
  opacity: 0;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
  margin: auto 0;
}
.portfolio-modal.is-open .portfolio-modal__container {
  transform: scale(1);
  opacity: 1;
}

.portfolio-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(45,45,46,.06);
  border: 1px solid rgba(45,45,46,.10);
  color: var(--charcoal);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .25s ease, transform .35s ease, color .25s ease;
  z-index: 2;
}
.portfolio-modal__close:hover {
  background: var(--charcoal);
  color: #fff;
  transform: rotate(90deg);
}
.portfolio-modal__close svg { width: 22px; height: 22px; }

.portfolio-modal__header {
  text-align: center;
  margin-bottom: 36px;
  padding: 0 60px;
}
.portfolio-modal__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3.4vw, 38px);
  color: var(--charcoal);
  margin: 0 0 6px;
  letter-spacing: -.4px;
  line-height: 1.1;
}
.portfolio-modal__count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--soft-gold);
  margin: 0;
}

.portfolio-modal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .portfolio-modal__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .portfolio-modal__grid { grid-template-columns: 1fr; gap: 18px; }
  .portfolio-modal__container { padding: 56px 20px 28px; border-radius: 22px; }
  .portfolio-modal__header { padding: 0; margin-bottom: 28px; }
}

/* ---- Portfolio card inside modal ---- */
.portfolio-card {
  position: relative;
  cursor: zoom-in;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(45,45,46,.08);
  transition: transform .35s ease, box-shadow .35s ease;
  margin: 0;
}
.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(45,45,46,.18);
}
.portfolio-card:focus-visible {
  outline: 3px solid var(--soft-gold);
  outline-offset: 3px;
}
.portfolio-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #efe8db;
}
.portfolio-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.portfolio-card:hover .portfolio-card__img-wrap img { transform: scale(1.05); }
.portfolio-card__caption {
  padding: 16px 18px 18px;
  text-align: left;
}
.portfolio-card__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--soft-gold);
  margin-bottom: 4px;
}
.portfolio-card__name {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: var(--charcoal);
  line-height: 1.2;
  margin-bottom: 4px;
  letter-spacing: -.2px;
}
.portfolio-card__meta {
  display: block;
  font-size: 12px;
  color: #6b6358;
  line-height: 1.4;
}

/* ---- Zoom layer — full-viewport lightbox ---- */
.portfolio-zoom {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 16, 19, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: clamp(24px, 4vw, 60px);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity .35s ease;
}
.portfolio-zoom[hidden]   { display: none; }
.portfolio-zoom.is-open   { opacity: 1; }

.portfolio-zoom__close {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .25s ease, transform .35s ease;
  z-index: 2;
}
.portfolio-zoom__close:hover {
  background: rgba(255,255,255,.18);
  transform: rotate(90deg);
}
.portfolio-zoom__close svg { width: 24px; height: 24px; }

.portfolio-zoom__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: 100%;
  max-height: 100%;
  transform: scale(.94);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.portfolio-zoom.is-open .portfolio-zoom__figure { transform: scale(1); }

.portfolio-zoom__figure img {
  max-width: min(1200px, 92vw);
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.portfolio-zoom__caption {
  text-align: center;
  color: #fff;
}
.portfolio-zoom__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--soft-gold);
  margin-bottom: 6px;
}
.portfolio-zoom__name {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 2.6vw, 30px);
  margin-bottom: 6px;
  letter-spacing: -.3px;
}
.portfolio-zoom__meta {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,.70);
  letter-spacing: .3px;
}

/* ---- Body scroll lock while modal is open ---- */
html.portfolio-modal-open,
html.portfolio-modal-open body {
  overflow: hidden;
}

/* ---- Mobile tuning ---- */
@media (max-width: 600px) {
  .portfolio-filters { gap: 10px; margin-bottom: 36px; }
  .portfolio-filter-btn {
    padding: 10px 18px;
    font-size: 12px;
    letter-spacing: 1px;
  }
  .portfolio-zoom__close { top: 16px; right: 16px; width: 40px; height: 40px; }
  .portfolio-zoom__figure img { max-height: 68vh; }
}

/* ===== Service + Audience + About pages — SERVICE AREAS in ONE row =====
   Scoped to `.service-page`, `.audience-page` AND `.about-page`:
   Metal, Glass, Doors, Subfloor, Sales + For Builders, For Homeowners + About.

   Strategy:
   - DESKTOP (≥1024px): all 12 GTA pills fit comfortably on one centered row
     (tight padding + small font + small gap = total ~1080px fits in ~1120px
     container). No scroll, no fade — clean single visible row.
   - MOBILE/TABLET (<1024px): pills can't fit even tight, fall back to
     horizontal touch scroll with the right-edge fade hint. */
.service-page .service-areas-section .service-areas-grid,
.audience-page .service-areas-section .service-areas-grid,
.about-page .service-areas-section .service-areas-grid {
  flex-wrap: nowrap !important;
  justify-content: center;
  gap: 5px;
  padding-left: 4px;
  padding-right: 4px;
  overflow-x: visible;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.service-page .service-areas-section .service-areas-grid li,
.audience-page .service-areas-section .service-areas-grid li,
.about-page .service-areas-section .service-areas-grid li {
  padding: 7px 14px;
  font-size: 11.5px;
  letter-spacing: .15px;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Tablet/mobile fallback — touch scroll with right-edge fade */
@media (max-width: 1023px) {
  .service-page .service-areas-section .service-areas-grid,
  .audience-page .service-areas-section .service-areas-grid,
  .about-page .service-areas-section .service-areas-grid {
    justify-content: center;          /* stay centered even when overflow scrolls */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: clamp(6px, .8vw, 10px);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
  }
  .service-page .service-areas-section .service-areas-grid::-webkit-scrollbar,
  .audience-page .service-areas-section .service-areas-grid::-webkit-scrollbar,
  .about-page .service-areas-section .service-areas-grid::-webkit-scrollbar {
    display: none;
  }
  .service-page .service-areas-section .service-areas-grid li,
  .audience-page .service-areas-section .service-areas-grid li,
  .about-page .service-areas-section .service-areas-grid li {
    padding: 9px 16px;
    font-size: 12px;
  }
}

/* ===== Premium Door Systems portfolio — 7 filter pills in ONE row =====
   Same pattern as glass-portfolio but tuned tighter because there are 7 pills
   (All Work / Entry Doors / Windows / Garage Doors / Patio & Walkout /
   Commercial / Process). Padding + font-size scale aggressively with clamp()
   so all 7 fit on a single line ≥768px; below that, horizontal touch-scroll
   keeps them on one row instead of wrapping. */
.door-portfolio .portfolio-filters {
  flex-wrap: nowrap !important;
  justify-content: center;
  max-width: 100%;
  gap: clamp(4px, .7vw, 12px);
}
.door-portfolio .portfolio-filter-btn {
  padding: 10px clamp(8px, 1.2vw, 20px);
  font-size: clamp(9px, .85vw, 12px);
  letter-spacing: clamp(.5px, .1vw, 1.3px);
  white-space: nowrap;
  flex: 0 1 auto;
}
@media (max-width: 900px) {
  .door-portfolio .portfolio-filters {
    overflow-x: auto;
    justify-content: flex-start;
    padding-left: 16px;
    padding-right: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .door-portfolio .portfolio-filters::-webkit-scrollbar { display: none; }
  .door-portfolio .portfolio-filter-btn {
    padding: 9px 14px;
    font-size: 11px;
    letter-spacing: .8px;
  }
}

/* ===== Glass Railings portfolio — 5 filter pills in ONE row =====
   Forces no-wrap and scales padding/font down on smaller screens so all 5
   pills (All Work / Interior / Exterior / Balconies & Canopies / Custom) fit
   on a single horizontal line at every breakpoint. */
.glass-portfolio .portfolio-filters {
  flex-wrap: nowrap !important;
  justify-content: center;
  max-width: 100%;
  gap: clamp(6px, 1vw, 14px);
}
.glass-portfolio .portfolio-filter-btn {
  padding: 11px clamp(10px, 1.6vw, 24px);
  font-size: clamp(10px, 1.05vw, 13px);
  letter-spacing: clamp(.6px, .12vw, 1.5px);
  white-space: nowrap;                   /* never break a label onto two lines */
  flex: 0 1 auto;
}
@media (max-width: 600px) {
  /* Below 600px the labels can't all fit even tiny — allow horizontal scroll
     so they stay on a single row instead of wrapping. */
  .glass-portfolio .portfolio-filters {
    overflow-x: auto;
    justify-content: flex-start;
    padding-left: 16px;
    padding-right: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;               /* hide scrollbar — Firefox */
  }
  .glass-portfolio .portfolio-filters::-webkit-scrollbar { display: none; }
  .glass-portfolio .portfolio-filter-btn {
    padding: 9px 14px;
    font-size: 11px;
    letter-spacing: .8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-filter-btn::after { animation: none; opacity: 0; }
  .portfolio-modal,
  .portfolio-modal__backdrop,
  .portfolio-modal__container,
  .portfolio-zoom,
  .portfolio-zoom__figure { transition: opacity .15s ease; }
}

/* =========================================================================
   AUDIENCE PAGES (For Builders + For Homeowners) — full visual uplift
   Mirrors the corrections applied to service pages: cabinet-style hero,
   numbered green SQUARE nodes on the "What We Support" grid, centered
   eyebrows with gold lines, and matching editorial padding.
   ========================================================================= */

/* ---- HERO — text-only, 2-line white+gold H1 (matches service-page hero) ---- */
.audience-page .hero {
  min-height: auto !important;
  /* Was 130px — nav is ~166px on desktop, so headline was sitting under
     the menu. Bumped to 180px for clean breathing room. */
  padding: 180px 0 80px !important;
}
.audience-page .hero-grid {
  display: block !important;
  max-width: 880px;
  margin: 0 auto !important;
}
.audience-page .hero-content { position: relative; z-index: 3; }

.audience-page .hero h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(36px, 5.6vw, 72px) !important;
  line-height: 1.04 !important;
  letter-spacing: -1.4px !important;
  margin-bottom: 22px !important;
  color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
  max-width: 880px;
}
.audience-page .hero h1 .accent { color: var(--soft-gold) !important; }

.audience-page .hero .eyebrow {
  color: var(--soft-gold) !important;
  letter-spacing: 3px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  margin-bottom: 14px !important;
}
.audience-page .hero .hero-content > p {
  color: rgba(255,255,255,.88) !important;
  font-size: clamp(16px, 1.7vw, 19px) !important;
  line-height: 1.65 !important;
  max-width: 700px;
  margin-bottom: 22px;
  text-shadow: 0 1px 10px rgba(0,0,0,.3);
}
.audience-page .hero .hero-pills {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.audience-page .hero .hero-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
}
@media (max-width: 1024px) {
  /* Was 110px — too tight for the ~140px nav (tablet still has the larger
     logo). 160px keeps the headline comfortably below the menu. */
  .audience-page .hero { padding: 160px 0 60px !important; }
}
@media (max-width: 720px) {
  /* Was 90px — at 720px the logo is already shrinking, but 90px still
     overlapped the menu. The mobile fix block further below (≤900 → 150px,
     ≤560 → 130px) ultimately wins via cascade, but we set a sensible
     floor here too. */
  .audience-page .hero { padding: 130px 0 50px !important; }
  .audience-page .hero h1 { font-size: clamp(28px, 8vw, 44px) !important; }
}

/* Soften the BG slider overlay so the rotating photos (esp. BG_Canada_Elite_Build_Group.webp)
   are visible behind the centered text — base .hero-bg-slider::after uses a strong 90deg
   left→right gradient that was designed for the old side-by-side hero layout. */
.audience-page .hero .hero-bg-slider::after {
  background: linear-gradient(180deg,
    rgba(20,20,22,.62) 0%,
    rgba(20,20,22,.42) 45%,
    rgba(20,20,22,.62) 100%) !important;
}

/* ---- ABOUT-STRENGTH-SECTION (What We Support, 6 cards) ----
   Same treatment as the service-page .about-trust-section but with 6
   numbered green SQUARE nodes (vs 3) and adjusted radar pulse stagger. */
.audience-page .about-strength-section {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(54,73,63,.14) 0%, transparent 60%),
    radial-gradient(50% 40% at 10% 100%, rgba(45,45,46,.05) 0%, transparent 65%),
    var(--ivory);
  color: var(--charcoal);
  padding: 80px 0 80px;
  overflow: hidden;
}
/* Widen the container for the strength section only — full-width responsive
   so the 6 cards have more horizontal room (side-to-side feel). */
.audience-page .about-strength-section .container {
  width: min(1380px, calc(100% - 40px));
  max-width: 1380px;
}
.audience-page .about-strength-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(45,45,46,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,45,46,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  pointer-events: none;
  z-index: -1;
  opacity: .8;
}
.audience-page .about-strength-section .about-section-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 48px;
}
.audience-page .about-strength-section .about-section-header .eyebrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--soft-gold);
  margin-bottom: 14px;
}
.audience-page .about-strength-section .about-section-header .eyebrow::before,
.audience-page .about-strength-section .about-section-header .eyebrow::after {
  content: '';
  display: inline-block;
  width: 42px;
  height: 1px;
  background: rgba(191,169,135,.64);
  flex-shrink: 0;
}
.audience-page .about-strength-section .about-section-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3.4vw, 40px) !important;
  line-height: 1.1;
  letter-spacing: -.4px;
  color: var(--charcoal);
  margin: 0 0 12px;
  white-space: nowrap;       /* force 1 line on desktop */
}
@media (max-width: 960px) {
  .audience-page .about-strength-section .about-section-header h2 {
    white-space: normal;
    font-size: clamp(22px, 4.4vw, 32px) !important;
  }
}
.audience-page .about-strength-section .about-section-header .section-copy {
  color: #4a4640 !important;
  font-size: 16px;
  line-height: 1.65;
  max-width: 680px;
  margin: 0 auto;
}

/* Grid — 3 cols desktop, 2 cols tablet, 1 col mobile */
.audience-page .about-strength-section .about-strength-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  margin: 32px 0 0 !important;
  justify-items: stretch !important;
}
.audience-page .about-strength-section .about-strength-grid > article {
  position: relative;
  background: #fff;
  border: 1px solid rgba(54,73,63,.22);
  border-radius: 18px;
  padding: 36px 24px 26px;
  text-align: left;
  box-shadow: 0 4px 14px rgba(45,45,46,.05);
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
  max-width: none !important;
  /* Flex column so the h3 + p stack consistently, allowing all 6 cards
     to align their text blocks at the same vertical position. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Reserve a consistent height for the h3 across all 6 cards so the <p>
   that follows starts at the same y-position in every card (visual line-up). */
.audience-page .about-strength-section .about-strength-grid > article > h3 {
  min-height: 2.6em;     /* covers both 1-line and 2-line h3s */
  display: flex;
  align-items: flex-end;
}
.audience-page .about-strength-section .about-strength-grid > article:hover {
  transform: translateY(-6px);
  border-color: var(--deep-forest);
  box-shadow:
    0 18px 38px rgba(54,73,63,.18),
    0 0 0 1px rgba(54,73,63,.30) inset,
    0 0 28px rgba(191,169,135,.18);
}

/* Numbered SQUARE node — floating above the card edge */
.audience-page .about-strength-section .about-strength-grid > article > strong {
  position: absolute;
  top: -22px;
  left: 22px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fff;
  border: 2px solid var(--deep-forest);
  box-shadow: 0 6px 16px rgba(45,45,46,.10), 0 0 0 1px rgba(255,255,255,.6) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: 0;
  padding: 0;
  z-index: 3;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), background .4s ease, color .4s ease, box-shadow .4s ease;
}
/* Continuous SQUARE radar pulse, staggered across the 6 cards */
.audience-page .about-strength-section .about-strength-grid > article > strong::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 14px;
  border: 1.5px solid rgba(54,73,63,.55);
  opacity: 1;
  animation: serviceTrustRipple 2.6s ease-out infinite;
  pointer-events: none;
}
.audience-page .about-strength-section .about-strength-grid > article:nth-child(1) > strong::before { animation-delay: 0s;    }
.audience-page .about-strength-section .about-strength-grid > article:nth-child(2) > strong::before { animation-delay: .42s;  }
.audience-page .about-strength-section .about-strength-grid > article:nth-child(3) > strong::before { animation-delay: .84s;  }
.audience-page .about-strength-section .about-strength-grid > article:nth-child(4) > strong::before { animation-delay: 1.26s; }
.audience-page .about-strength-section .about-strength-grid > article:nth-child(5) > strong::before { animation-delay: 1.68s; }
.audience-page .about-strength-section .about-strength-grid > article:nth-child(6) > strong::before { animation-delay: 2.10s; }

/* Hover — node fills brand green, number turns white */
.audience-page .about-strength-section .about-strength-grid > article:hover > strong {
  background: var(--deep-forest);
  border-color: var(--deep-forest);
  color: #fff;
  box-shadow: 0 10px 24px rgba(54,73,63,.45), 0 0 0 4px rgba(54,73,63,.18);
  transform: scale(1.06) rotate(-3deg);
}

.audience-page .about-strength-section .about-strength-grid > article > h3 {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--charcoal);
  letter-spacing: .2px;
  line-height: 1.25;
  margin: 0 0 8px;
}
.audience-page .about-strength-section .about-strength-grid > article > p {
  color: #686058;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* Responsive grid */
@media (max-width: 1024px) {
  .audience-page .about-strength-section .about-strength-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
  }
}
@media (max-width: 720px) {
  .audience-page .about-strength-section { padding: 70px 0 80px; }
  .audience-page .about-strength-section .about-strength-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .audience-page .about-strength-section .about-strength-grid > article {
    padding: 30px 20px 22px;
  }
  .audience-page .about-strength-section .about-strength-grid > article > strong {
    width: 38px; height: 38px; font-size: 13px; top: -19px;
  }
}

/* ---- INNER-CONTENT-SECTION (intro + "why it matters") — editorial style, no boxed card ---- */
.audience-page .inner-content-section {
  position: relative;
  isolation: isolate;
  background: var(--ivory);
  padding: 64px 0 64px;
  overflow: hidden;
}
.audience-page .inner-content-section .inner-content-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.audience-page .inner-content-section h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(28px, 4vw, 46px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.5px !important;
  color: var(--charcoal) !important;
  margin: 0 auto 18px !important;     /* margin auto centers the block */
  max-width: 880px !important;        /* override base .inner-content-card h2 max-width 760px */
  text-align: center !important;
}
.audience-page .inner-content-section p,
.audience-page .inner-content-section .entry-content p {
  color: #4a4640 !important;
  font-size: clamp(15px, 1.6vw, 17px) !important;
  line-height: 1.7 !important;
  max-width: 760px !important;
  margin: 0 auto 14px !important;
  text-align: center !important;
}
.audience-page .inner-content-section .entry-content,
.audience-page .inner-content-section .audience-entry-centered {
  text-align: center;
  margin: 0 auto;
  max-width: 760px;
}
.audience-page .inner-content-section .audience-list-wrap {
  margin-top: 24px;
}
.audience-page .inner-content-section .integrated-support-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  max-width: 720px;
  margin: 24px auto 0;
}
.audience-page .inner-content-section .integrated-support-list li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(54,73,63,.15);
  color: #4a4640;
  font-size: 15px;
  line-height: 1.6;
}
.audience-page .inner-content-section .integrated-support-list li:last-child { border-bottom: none; }
.audience-page .inner-content-section .integrated-support-list li strong {
  color: var(--charcoal);
  font-weight: 700;
  display: inline;
}

/* ---- SERVICE-AREAS-SECTION — extend the service-page treatment ---- */
.audience-page .service-areas-section .service-areas-header {
  text-align: center !important;
  max-width: 1100px;                /* widened to match pills row below */
  margin: 0 auto 36px !important;
}
.audience-page .service-areas-section .service-areas-header .eyebrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--soft-gold) !important;
}
.audience-page .service-areas-section .service-areas-header .eyebrow::before,
.audience-page .service-areas-section .service-areas-header .eyebrow::after {
  content: '';
  display: inline-block;
  width: 42px;
  height: 1px;
  background: rgba(191,169,135,.64);
  flex-shrink: 0;
}
.audience-page .service-areas-section .service-areas-header h2,
.audience-page .service-areas-section .service-areas-header .section-title {
  text-align: center;
  margin: 0 auto;
  max-width: 1100px;
  white-space: normal;              /* allow long titles to wrap balanced */
  text-wrap: balance;
  font-size: clamp(24px, 3vw, 38px) !important;
  line-height: 1.15 !important;
}
@media (max-width: 960px) {
  .audience-page .service-areas-section .service-areas-header h2,
  .audience-page .service-areas-section .service-areas-header .section-title {
    white-space: normal;
    font-size: clamp(20px, 4.4vw, 30px) !important;
  }
}
@media (max-width: 600px) {
  .audience-page .about-strength-section .about-section-header .eyebrow::before,
  .audience-page .about-strength-section .about-section-header .eyebrow::after,
  .audience-page .service-areas-section .service-areas-header .eyebrow::before,
  .audience-page .service-areas-section .service-areas-header .eyebrow::after {
    width: 24px;
  }
}

/* ---- GET STARTED / final CTA — center the whole block, eyebrow gold + lines ---- */
.audience-page .sales-final-cta__inner {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  justify-content: center !important;
  gap: 28px !important;
}
.audience-page .sales-final-cta__text {
  flex: 0 1 auto !important;
  width: 100%;
  text-align: center !important;
}
.audience-page .sales-final-cta .eyebrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--soft-gold) !important;
}
.audience-page .sales-final-cta .eyebrow::before,
.audience-page .sales-final-cta .eyebrow::after {
  content: '';
  display: inline-block;
  width: 42px;
  height: 1px;
  background: rgba(191,169,135,.64);
  flex-shrink: 0;
}
.audience-page .sales-final-cta h2 {
  margin: 0 auto !important;
  max-width: 760px !important;
  text-align: center !important;
}
.audience-page .sales-final-cta__sub {
  margin: 14px auto 0 !important;
  text-align: center !important;
  max-width: 640px;
}
.audience-page .sales-final-cta__actions {
  justify-content: center !important;
}
@media (max-width: 600px) {
  .audience-page .sales-final-cta .eyebrow::before,
  .audience-page .sales-final-cta .eyebrow::after { width: 24px; }
}

/* =========================================================================
   SERVICE PAGES — HERO (text-only, no photo card)
   Applies to Metal/Glass/Doors/Subfloor. The hero has a rotating BG slider,
   eyebrow, 2-line white+gold H1, lead paragraph, pills, and CTA buttons.
   NO photo card on the right — the BG image is the visual.
   Sales + Home keep their own. Cabinetry is untouched (block pattern).
   ========================================================================= */
.service-page .hero {
  min-height: auto !important;
  /* Was 130px — nav is ~166px on desktop, so headline was sitting under
     the menu. Bumped to 180px for clean breathing room. Does not affect
     Cabinetry (uses .landing-page, not .service-page) nor Real Estate
     (uses .inner-hero, not .hero). */
  padding: 180px 0 80px !important;
}
.service-page .hero-grid {
  display: block !important;       /* single column, text-only */
  max-width: 880px;
  margin: 0 auto !important;
}
.service-page .hero-content { position: relative; z-index: 3; }

.service-page .hero h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(36px, 5.6vw, 72px) !important;
  line-height: 1.04 !important;
  letter-spacing: -1.4px !important;
  margin-bottom: 22px !important;
  /* FORCE white — was rendering as charcoal via inherited rule. */
  color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
  max-width: 880px;
}
.service-page .hero h1 .accent {
  color: var(--soft-gold) !important;
}
.service-page .hero .eyebrow {
  color: var(--soft-gold) !important;
  letter-spacing: 3px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  margin-bottom: 14px !important;
}
.service-page .hero .hero-content > p {
  color: rgba(255,255,255,.88) !important;
  font-size: clamp(16px, 1.7vw, 19px) !important;
  line-height: 1.65 !important;
  max-width: 700px;
  margin-bottom: 22px;
  text-shadow: 0 1px 10px rgba(0,0,0,.3);
}
.service-page .hero .hero-pills {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.service-page .hero .hero-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
}

/* Mobile */
@media (max-width: 1024px) {
  /* Was 110px — tablet logo still 140px → nav ~140px. 160px clears it. */
  .service-page .hero { padding: 160px 0 60px !important; }
}
@media (max-width: 720px) {
  /* Was 90px. The mobile fix block further below caps at 150 (≤900) and
     130 (≤560), but we set this sane floor for the 720-900 band. */
  .service-page .hero { padding: 130px 0 50px !important; }
  .service-page .hero h1 { font-size: clamp(28px, 8vw, 44px) !important; }
}

/* =========================================================================
   SERVICE PAGES — HOW WE WORK uplift
   Applies to Metal, Glass, Doors, Subfloor (NOT cabinetry — that page uses
   a different template and isn't scoped under .service-page).
   Converts the legacy 01/02/03 strong-text cards into numbered SQUARE node
   cards matching the Sales page's How We Work, but using GOLD as the accent
   color (since these are construction services — the Sales page uses green
   because it's the real-estate identity).
   ========================================================================= */
.service-page .about-trust-section {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(54,73,63,.14) 0%, transparent 60%),
    radial-gradient(50% 40% at 10% 100%, rgba(54,73,63,.05) 0%, transparent 65%),
    var(--ivory);
  color: var(--charcoal);
  padding: 80px 0 80px;
  overflow: hidden;
}
.service-page .about-trust-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(45,45,46,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,45,46,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  pointer-events: none;
  z-index: -1;
  opacity: .8;
}
/* Header — center eyebrow with lines on both sides */
.service-page .about-trust-section .about-section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.service-page .about-trust-section .about-section-header .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--soft-gold);          /* GOLD — matches the rest of the site */
  margin-bottom: 16px;
}
.service-page .about-trust-section .about-section-header .eyebrow::before,
.service-page .about-trust-section .about-section-header .eyebrow::after {
  content: '';
  display: inline-block;
  width: 42px;
  height: 1px;
  background: rgba(191,169,135,.64);  /* GOLD lines */
}
.service-page .about-trust-section .about-section-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 46px) !important;
  line-height: 1.08;
  letter-spacing: -.5px;
  color: var(--charcoal) !important;
  margin: 0 0 16px;
}
.service-page .about-trust-section .about-section-header .section-copy {
  color: #4a4640 !important;
  font-size: 16px;
  line-height: 1.65;
  max-width: 660px;
  margin: 0 auto;
}

/* Grid + cards */
.service-page .about-trust-section .about-strength-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  margin: 30px 0 0 !important;
  justify-items: stretch !important;
}
.service-page .about-trust-section .about-strength-grid > article {
  position: relative;
  background: #fff;
  border: 1px solid rgba(54,73,63,.22);    /* gold-tinted border */
  border-radius: 18px;
  padding: 36px 24px 26px;                     /* top space for floating node */
  text-align: left;
  box-shadow: 0 4px 14px rgba(45,45,46,.05);
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
  max-width: none !important;
}
.service-page .about-trust-section .about-strength-grid > article:hover {
  transform: translateY(-6px);
  border-color: var(--deep-forest);
  box-shadow:
    0 18px 38px rgba(45,45,46,.14),
    0 0 0 1px rgba(54,73,63,.30) inset,
    0 0 28px rgba(191,169,135,.18);
}

/* The legacy <strong>01</strong> becomes the numbered SQUARE node
   floating above the card edge, exactly like .sales-step__num. */
.service-page .about-trust-section .about-strength-grid > article > strong {
  position: absolute;
  top: -22px;
  left: 22px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fff;
  border: 2px solid var(--deep-forest);
  box-shadow: 0 6px 16px rgba(45,45,46,.10), 0 0 0 1px rgba(255,255,255,.6) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: 0;
  padding: 0;
  z-index: 3;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), background .4s ease, color .4s ease, box-shadow .4s ease;
}
/* Continuous SQUARE radar pulse around the node */
.service-page .about-trust-section .about-strength-grid > article > strong::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 14px;
  border: 1.5px solid rgba(54,73,63,.55);
  opacity: 1;
  animation: serviceTrustRipple 2.6s ease-out infinite;
  pointer-events: none;
}
.service-page .about-trust-section .about-strength-grid > article:nth-child(1) > strong::before { animation-delay: 0s;   }
.service-page .about-trust-section .about-strength-grid > article:nth-child(2) > strong::before { animation-delay: .85s; }
.service-page .about-trust-section .about-strength-grid > article:nth-child(3) > strong::before { animation-delay: 1.7s; }

@keyframes serviceTrustRipple {
  0%   { opacity: .55; transform: scale(.85); }
  60%  { opacity: .15; transform: scale(1.4);  }
  100% { opacity: 0;   transform: scale(1.7);  }
}

/* Hover: node fills with brand GREEN, number turns white */
.service-page .about-trust-section .about-strength-grid > article:hover > strong {
  background: var(--deep-forest);
  border-color: var(--deep-forest);
  color: #fff;
  box-shadow: 0 10px 24px rgba(54,73,63,.45), 0 0 0 4px rgba(54,73,63,.18);
  transform: scale(1.06) rotate(-3deg);
}

/* h3 + p inside the card */
.service-page .about-trust-section .about-strength-grid > article > h3 {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--charcoal);
  letter-spacing: .2px;
  line-height: 1.25;
  margin: 0 0 8px;
}
.service-page .about-trust-section .about-strength-grid > article > p {
  color: #686058;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* Responsive */
@media (max-width: 960px) {
  .service-page .about-trust-section .about-strength-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}
@media (max-width: 720px) {
  .service-page .about-trust-section { padding: 70px 0 80px; }
  .service-page .about-trust-section .about-strength-grid > article {
    padding: 30px 20px 22px;
  }
  .service-page .about-trust-section .about-strength-grid > article > strong {
    width: 38px; height: 38px; font-size: 13px; top: -19px;
  }
}

/* ---- 12) Services Up Close — header (h2 + paragraph) stack on tablet ---- */
/* The .services-header pattern has inline style="display:flex" — we win
   by escalating specificity and using !important. */
@media (max-width: 960px) {
  .services .services-header,
  .services-header[style*="flex"] {
    display: block !important;
    margin-bottom: 36px !important;
  }
  .services .services-header > div,
  .services .services-header > p {
    max-width: 100% !important;
  }
  .services .services-header > p,
  .services .services-header .section-copy {
    margin-top: 16px !important;
  }
}

/* ---- 13) Service zig-zag — raise stack breakpoint to 1024px (iPad) ---- */
@media (max-width: 1024px) {
  .service-stack .service-feature,
  .service-stack .service-feature:nth-child(even) {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .service-stack .service-feature:nth-child(even) .service-media { order: 0 !important; }
  .service-stack .service-media { min-height: 0 !important; }
  .service-stack .service-media img { height: clamp(220px, 42vw, 320px) !important; width: 100% !important; }
  .service-stack .service-content { padding: clamp(22px, 4.5vw, 36px) !important; }
}

/* ---- 14) What We Do (compact) — service-page version: 2-col on tablet, 1-col on phone ---- */
@media (max-width: 1024px) {
  .what-we-do-compact .compact-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}
@media (max-width: 600px) {
  .what-we-do-compact .compact-grid {
    grid-template-columns: 1fr !important;
  }
  .what-we-do-compact .compact-card {
    padding: 18px !important;
    align-items: flex-start;
  }
  .what-we-do-compact .compact-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
  }
}

/* ---- 15) Process IVORY — horizontal layout & left-aligned text on mobile ---- */
/* On tablet (≤1024) the grid already stacks. The source photo is PORTRAIT
   1512×2016 (3:4) — forcing landscape aspect-ratio + cover was slicing it.
   We use object-fit: contain on a height-bounded box so the whole image
   shows centered, with the card's ivory fill behind any letterbox. */
@media (max-width: 1024px) {
  .process-section--ivory .container.process-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .process-section--ivory .process-visual {
    border-radius: 18px;
    background: var(--ivory);          /* letterbox fill matches section bg */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .process-section--ivory .process-visual img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 70vh !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto;
    display: block;
  }
  .process-section--ivory .process-content {
    text-align: left;
  }
}
@media (max-width: 640px) {
  .process-section--ivory { padding: 64px 0 72px !important; }
  .process-section--ivory .process-visual img {
    max-height: 56vh !important;
  }
  .process-section--ivory .section-title {
    font-size: clamp(26px, 7vw, 36px) !important;
  }
  .process-section--ivory .process-copy {
    margin-bottom: 24px;
  }
  .process-section--ivory .process-timeline { padding-left: 52px !important; gap: 10px; }
  .process-section--ivory .process-timeline__node { left: -46px !important; width: 32px !important; height: 32px !important; }
  .process-section--ivory .process-timeline__node-num { font-size: 11px !important; }
  .process-section--ivory .process-timeline__connector { left: 23px !important; }
  .process-section--ivory .process-timeline__body { padding: 12px 16px !important; }
  .process-section--ivory .process-timeline__body h4 { font-size: 17px !important; }
  .process-section--ivory .process-timeline__body p { font-size: 13px !important; }
}

/* ---- 16) Hero phone — line-height shrinks so two H1 lines don't gap too much ---- */
@media (max-width: 720px) {
  .hero h1 {
    line-height: 1.05 !important;
  }
}

/* ---- 17) Carousel touch fix — kill the sticky :hover pause on mobile ---- */
/* On touch screens, :hover can stay stuck after a tap, freezing the
   carousel. We disable hover-pause on any device that can't truly hover. */
@media (hover: none) {
  .cabinetry-carousel:hover .cabinetry-carousel__track {
    /* nothing — let it keep scrolling */
  }
}

/* ---- 18) Mobile menu items — defeat inline font-size on the <nav> ---- */
/* WP renders inline style="font-size:13px" on the <nav>; that cascades to
   the items inside the overlay and we need to beat it. */
.nav .wp-block-navigation__responsive-container.is-menu-open ul li a,
.nav .wp-block-navigation__responsive-container.is-menu-open ul li button,
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: clamp(20px, 5.2vw, 28px) !important;
  letter-spacing: .5px !important;
  line-height: 1.25 !important;
  padding: 6px 0 !important;
  text-align: left;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding: clamp(32px, 8vw, 64px) clamp(24px, 6vw, 48px) !important;
  align-items: flex-start !important;
}
.nav .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container {
  width: 100%;
  align-items: flex-start !important;
}
.nav .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container li {
  width: 100%;
  display: block;
}

/* ---- 19) Mobile overlay open animation — SMOOTH fade + slide ----
   The container itself ONLY fades (a transform on a position:fixed parent
   would shift the menu off-screen when scrolled mid-page). The items
   inside slide individually for that premium cascade feel.
   This animation runs unconditionally — gentle fade, no motion sickness. */
@keyframes ce-overlay-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes ce-overlay-item-slide {
  0%   { opacity: 0; transform: translateX(22px); }
  100% { opacity: 1; transform: translateX(0); }
}
.nav .wp-block-navigation__responsive-container.is-menu-open {
  animation: ce-overlay-fade-in .35s cubic-bezier(.2, .8, .2, 1) both !important;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  opacity: 0;
  animation: ce-overlay-item-slide .42s cubic-bezier(.2, .8, .2, 1) forwards;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: .10s; }
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: .16s; }
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: .22s; }
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: .28s; }
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: .34s; }
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: .40s; }
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: .46s; }

/* ---- 20) Mobile overlay submenu — CLICK to open (not auto-open) ---- */
/* WP core in the overlay forces every submenu visible. We override that:
   hide submenus by default, show only when their toggle is aria-expanded=true.
   That makes the chevron caret behave as a tap-to-reveal control. */
.nav .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
  display: none !important;
  height: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
  display: block !important;
  height: auto !important;
  opacity: 1 !important;
  overflow: visible !important;
  visibility: visible !important;
  padding-left: 22px !important;
  padding-top: 12px !important;
  margin-top: 8px !important;
  border-left: 1px solid rgba(191,169,135,.30) !important;
  animation: ce-submenu-expand .3s ease-out;
}
@keyframes ce-submenu-expand {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Submenu toggle chevron — match the gold theme + indicate state */
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon {
  margin-left: auto;
  color: var(--soft-gold);
  transition: transform .3s ease;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon {
  transform: rotate(180deg);
}

/* Submenu items — wrap long labels like "Premium Door Systems & Windows" */
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: clamp(16px, 4.2vw, 19px) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  width: 100%;
  display: block;
  padding: 8px 0 !important;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
  margin-bottom: 2px;
}

/* ---- 21) Process MOBILE: reorder title → photo → steps; show whole photo ---- */
@media (max-width: 1024px) {
  /* Flatten the inner .process-content so its children become flex items
     of the parent .process-grid (which we switch to flex column). That lets
     us reorder eyebrow + title BEFORE the photo, and copy + timeline AFTER. */
  .process-section--ivory .container.process-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
  }
  .process-section--ivory .process-content {
    display: contents;
  }
  .process-section--ivory .process-content > .eyebrow      { order: 1; margin-bottom: 0; }
  .process-section--ivory .process-content > .section-title { order: 2; margin-bottom: 8px !important; }
  .process-section--ivory .process-visual                   { order: 3; margin: 12px 0 4px; }
  .process-section--ivory .process-content > .process-copy { order: 4; margin-bottom: 12px; }
  .process-section--ivory .process-content > .process-timeline { order: 5; }

  /* Show the WHOLE photo — drop the height clamp, let it size naturally to
     its native aspect ratio inside a constrained max-height. */
  .process-section--ivory .process-visual {
    border-radius: 18px;
    overflow: hidden;
  }
  .process-section--ivory .process-visual img {
    height: auto !important;
    max-height: 60vh;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    aspect-ratio: 16 / 10;
  }
}

/* ---- 22) Process radar — make the IDLE pulse more visible on all devices ---- */
/* Subtle ring was easy to miss. Boost opacity + scale travel so the radar
   reads as obvious motion even on a small phone screen. */
@keyframes nodeRippleIvory {
  0%   { opacity: .65; transform: scale(.6); }
  60%  { opacity: .15; transform: scale(1.8); }
  100% { opacity: 0;   transform: scale(2.4); }
}
.process-section--ivory .process-timeline__node::after {
  border-width: 2px !important;
  border-color: rgba(191,169,135,.85) !important;
}

/* ---- 23) Selected Work mobile — guarantee the carousel always renders motion ---- */
/* The carousel's full-bleed `width: 100vw; margin-left: calc(50% - 50vw)` can
   misbehave when its ancestor has a transform (the section's `.reveal-up`
   uses `translateY(44px)` until in-view). Force the carousel to clear any
   inherited transform context. */
.gallery.selected-collage .cabinetry-carousel {
  transform: none !important;
  will-change: auto;
}
/* Track always has GPU layer (helps Mobile Safari keep rAF alive). */
.cabinetry-carousel__track {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* =========================================================================
   COMMENTS — Premium English form, white inputs, brand consistent
   Applies to every single-post page (.ce-comments-area).
   ========================================================================= */
.ce-comments-area {
  background: var(--ivory);
  padding: clamp(48px, 7vw, 88px) 0;
  border-top: 1px solid rgba(45,45,46,.08);
}
.ce-comments-inner {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
}

.ce-comments-area .ce-comments-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3.4vw, 36px);
  color: var(--charcoal);
  margin: 0 0 28px;
  letter-spacing: -.4px;
}

/* Existing comments list */
.ce-comments-area .ce-comment-list {
  list-style: none;
  margin: 0 0 56px;
  padding: 0;
}
.ce-comments-area .ce-comment-list > li {
  background: #fff;
  border: 1px solid rgba(45,45,46,.08);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(45,45,46,.04);
}
.ce-comments-area .ce-comment-list .comment-author {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.ce-comments-area .ce-comment-list .comment-author img.avatar {
  border-radius: 999px;
  margin-right: 10px;
  vertical-align: middle;
}
.ce-comments-area .ce-comment-list .comment-metadata {
  font-size: 12px;
  color: rgba(45,45,46,.55);
  margin-bottom: 12px;
  letter-spacing: .3px;
}
.ce-comments-area .ce-comment-list .comment-metadata a { color: inherit; }
.ce-comments-area .ce-comment-list .comment-content p {
  color: var(--charcoal);
  line-height: 1.65;
  font-size: 15px;
}
.ce-comments-area .ce-comment-list .reply { margin-top: 12px; }
.ce-comments-area .ce-comment-list .reply a {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--soft-gold);
  border: 1px solid var(--soft-gold);
  padding: 7px 14px;
  border-radius: 999px;
  transition: .25s ease;
}
.ce-comments-area .ce-comment-list .reply a:hover {
  background: var(--soft-gold);
  color: var(--charcoal);
}
.ce-comments-area .ce-comment-list .children {
  list-style: none;
  margin: 14px 0 0;
  padding: 0 0 0 28px;
  border-left: 2px solid rgba(191,169,135,.35);
}
.ce-comments-area .ce-comment-list .children > li {
  background: #FBF8F2;
}

/* Comment form — the "Leave a Reply" card */
.ce-comments-area #respond {
  background: #fff;
  border: 1px solid rgba(45,45,46,.10);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 8px 24px rgba(45,45,46,.06);
}
.ce-comments-area .comment-reply-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -.3px;
  margin: 0 0 18px;
}
.ce-comments-area .comment-reply-title small {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  margin-left: 12px;
}
.ce-comments-area .comment-reply-title small a {
  color: var(--soft-gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Form intro notes */
.ce-comments-area .comment-notes,
.ce-comments-area .required-field-message {
  font-size: 13px;
  color: rgba(45,45,46,.62);
  line-height: 1.6;
  margin: 0 0 22px;
}
.ce-comments-area .required { color: #C22F38; font-weight: 700; }

/* Field rows — 2-column grid for name + email on desktop, stack on mobile */
.ce-comments-area .ce-comment-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.ce-comments-area .ce-comment-form > .comment-notes,
.ce-comments-area .ce-comment-form > .comment-form-comment,
.ce-comments-area .ce-comment-form > .comment-form-url,
.ce-comments-area .ce-comment-form > .comment-form-cookies-consent,
.ce-comments-area .ce-comment-form > .form-submit,
.ce-comments-area .ce-comment-form > .logged-in-as {
  grid-column: 1 / -1;
}

/* Labels */
.ce-comments-area .ce-comment-form label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 8px;
}

/* Inputs & textarea — WHITE boxes with brand-aware focus state */
.ce-comments-area .ce-comment-form input[type="text"],
.ce-comments-area .ce-comment-form input[type="email"],
.ce-comments-area .ce-comment-form input[type="url"],
.ce-comments-area .ce-comment-form textarea {
  width: 100%;
  padding: 14px 16px;
  background: #fff !important;
  color: var(--charcoal) !important;
  border: 1.5px solid rgba(45,45,46,.18);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.ce-comments-area .ce-comment-form input::placeholder,
.ce-comments-area .ce-comment-form textarea::placeholder {
  color: rgba(45,45,46,.40);
}
.ce-comments-area .ce-comment-form input:focus,
.ce-comments-area .ce-comment-form textarea:focus {
  outline: none;
  border-color: var(--soft-gold);
  box-shadow: 0 0 0 4px rgba(191,169,135,.18);
}
.ce-comments-area .ce-comment-form textarea {
  min-height: 140px;
  resize: vertical;
}

/* Cookies consent checkbox row */
.ce-comments-area .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: rgba(45,45,46,.65);
}
.ce-comments-area .comment-form-cookies-consent label {
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2px;
  text-transform: none;
  color: rgba(45,45,46,.65);
  line-height: 1.5;
  flex: 1;
}
.ce-comments-area .comment-form-cookies-consent input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--soft-gold);
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

/* Submit button — premium gold pill */
.ce-comments-area .form-submit {
  margin-top: 6px;
}
.ce-comments-area .ce-comment-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: var(--soft-gold);
  color: var(--charcoal);
  border: 1.5px solid var(--soft-gold);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: .25s ease;
}
.ce-comments-area .ce-comment-submit:hover,
.ce-comments-area .ce-comment-submit:focus-visible {
  background: transparent;
  color: var(--soft-gold);
  transform: translateY(-2px);
  outline: none;
}

/* "Logged in as ..." row (when WP shows it) */
.ce-comments-area .logged-in-as {
  font-size: 13px;
  color: rgba(45,45,46,.62);
}
.ce-comments-area .logged-in-as a { color: var(--soft-gold); }

/* Mobile stacking */
@media (max-width: 600px) {
  .ce-comments-area .ce-comment-form {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ce-comments-area #respond { padding: 24px 20px; }
}

/* =========================================================================
   STRATEGIC SALES PAGE — three custom sections
   1) Sales Intro (compact, light): "Why builders work with us..."
   2) How We Work (dark, 5-step grid): coordinated team
   3) Why It Matters (premium editorial dark): risk + reduce + checks
   ========================================================================= */

/* ---- 1) SALES INTRO EDITORIAL — same vibe as Why It Matters, no card frame --- */
.sales-intro-editorial {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(50% 40% at 12% 0%, rgba(191,169,135,.14) 0%, transparent 60%),
    radial-gradient(40% 30% at 88% 100%, rgba(45,45,46,.05) 0%, transparent 70%),
    var(--ivory);
  color: var(--charcoal);
  padding: 80px 0 80px;
  overflow: hidden;
}
.sales-intro-editorial::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(45,45,46,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,45,46,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 25%, transparent 80%);
  pointer-events: none;
  z-index: -1;
  opacity: .75;
}
.sales-intro-editorial__inner {
  max-width: 880px !important;
}
.sales-intro-editorial__header {
  text-align: center;
  margin-bottom: 28px;
}
.sales-intro-editorial__header .eyebrow {
  color: var(--soft-gold);
  margin-bottom: 14px;
}
.sales-intro-editorial__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.5px;
  color: var(--charcoal);
  margin: 0;
}
.sales-intro-editorial__title .sales-intro-editorial__title-line {
  display: block;
}
.sales-intro-editorial__copy {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.sales-intro-editorial__copy p {
  color: #4a4640;
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.68;
  margin: 0 0 14px;
}
.sales-intro-editorial__lede {
  color: var(--charcoal) !important;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  margin-top: 18px !important;
  padding-top: 18px;
  border-top: 1px solid rgba(191,169,135,.35);
}
@media (max-width: 720px) {
  .sales-intro-editorial { padding: 60px 0; }
}

/* ---- 2) HOW WE WORK — IVORY editorial (matches Why It Matters mood) ---- */
.sales-how-we-work {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(191,169,135,.16) 0%, transparent 60%),
    radial-gradient(50% 40% at 10% 100%, rgba(54,73,63,.06) 0%, transparent 65%),
    var(--ivory);
  color: var(--charcoal);
  padding: 80px 0 80px;
  overflow: hidden;
}
.sales-how-we-work::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(45,45,46,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,45,46,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  pointer-events: none;
  z-index: -1;
  opacity: .8;
}

.sales-how-we-work__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.sales-how-we-work__header .eyebrow {
  color: var(--soft-gold);
  justify-content: center;
  margin-bottom: 16px;
}
.sales-how-we-work__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.6px;
  color: var(--charcoal);
  margin: 0 0 16px;
}
.sales-how-we-work__copy {
  color: #4a4640;
  font-size: 16px;
  line-height: 1.65;
  max-width: 660px;
  margin: 0 auto;
}

.sales-how-we-work__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin: 30px 0 56px;     /* top space for the floating numbered nodes */
}
.sales-step {
  background: #fff;
  /* Subtle brand-green tint on the border, like the Our Process timeline.
     Hover bumps it to a more saturated forest green. */
  border: 1px solid rgba(54,73,63,.22);
  border-radius: 18px;
  padding: 36px 22px 26px;     /* extra top space for the numbered node */
  position: relative;
  overflow: visible;             /* let the radar pulse ring extend outside */
  isolation: isolate;
  box-shadow: 0 4px 14px rgba(45,45,46,.05);
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease, background .35s ease;
}

/* Sequential left→right entrance — each card reveals from the LEFT,
   staggered 120ms apart so they animate 1,2,3,4,5 in cascade. */
.sales-step.reveal-up {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity .65s cubic-bezier(.2,.8,.2,1), transform .65s cubic-bezier(.2,.8,.2,1);
}
.sales-step.reveal-up.visible {
  opacity: 1;
  transform: translateX(0);
}
.sales-how-we-work__grid .sales-step.reveal-up:nth-child(1) { transition-delay: 0s;   }
.sales-how-we-work__grid .sales-step.reveal-up:nth-child(2) { transition-delay: .12s; }
.sales-how-we-work__grid .sales-step.reveal-up:nth-child(3) { transition-delay: .24s; }
.sales-how-we-work__grid .sales-step.reveal-up:nth-child(4) { transition-delay: .36s; }
.sales-how-we-work__grid .sales-step.reveal-up:nth-child(5) { transition-delay: .48s; }

/* Gold shine sweep on hover — diagonal gold gradient swipes across the card */
.sales-step::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(191, 169, 135, 0.20) 46%,
    rgba(231, 211, 174, 0.45) 50%,
    rgba(191, 169, 135, 0.20) 54%,
    transparent 62%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: 120% 0;
  transition: background-position .85s cubic-bezier(.2, .7, .2, 1);
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0;
}
.sales-step:hover::after {
  background-position: -20% 0;
  opacity: 1;
}
/* Hover — green border tightens + gold shine sweeps + soft lift. */
.sales-step:hover {
  transform: translateY(-6px);
  border-color: var(--deep-forest);
  background: #fff;
  box-shadow:
    0 18px 38px rgba(54,73,63,.18),
    0 0 0 1px rgba(54,73,63,.18) inset,
    0 0 28px rgba(191,169,135,.18);
}
.sales-step > * { position: relative; z-index: 2; }   /* keep text above shine */
/* Numbered SQUARE node — same scheme as the Our Process timeline nodes
   but square corners and a green-accented border that matches the card. */
.sales-step__num {
  position: absolute;
  top: -22px;                       /* peek above the card edge, framing it */
  left: 22px;
  width: 44px;
  height: 44px;
  border-radius: 10px;              /* square with gentle rounding */
  background: #fff;
  border: 2px solid var(--deep-forest);
  box-shadow: 0 6px 16px rgba(45,45,46,.10), 0 0 0 1px rgba(255,255,255,.6) inset;
  /* Use flex centering for true visual centering (works around grid
     quirks with inline text + letter-spacing). */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: 0;                /* removed — was creating trailing space pushing text off-center */
  padding: 0;
  z-index: 3;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), background .4s ease, color .4s ease, box-shadow .4s ease;
}
/* Inner gold-on-green hint that fills on hover */
.sales-step__num::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 6px;
  background: linear-gradient(135deg, #5C7C66 0%, var(--deep-forest) 100%);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .4s ease, transform .4s ease;
  z-index: -1;
}
/* Continuous radar pulse — square ring expanding outward */
.sales-step__num::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 14px;
  border: 1.5px solid rgba(54,73,63,.55);
  opacity: 1;
  animation: salesStepRipple 2.6s ease-out infinite;
  pointer-events: none;
}
.sales-how-we-work__grid .sales-step:nth-child(1) .sales-step__num::after { animation-delay: 0s;   }
.sales-how-we-work__grid .sales-step:nth-child(2) .sales-step__num::after { animation-delay: .55s; }
.sales-how-we-work__grid .sales-step:nth-child(3) .sales-step__num::after { animation-delay: 1.1s; }
.sales-how-we-work__grid .sales-step:nth-child(4) .sales-step__num::after { animation-delay: 1.65s; }
.sales-how-we-work__grid .sales-step:nth-child(5) .sales-step__num::after { animation-delay: 2.2s; }

@keyframes salesStepRipple {
  0%   { opacity: .55; transform: scale(.85); }
  60%  { opacity: .15; transform: scale(1.4); }
  100% { opacity: 0;   transform: scale(1.7); }
}

/* Hover state — node fills with green, number flips to white */
.sales-step:hover .sales-step__num {
  background: var(--deep-forest);
  color: #fff;
  box-shadow: 0 10px 24px rgba(54,73,63,.40), 0 0 0 4px rgba(54,73,63,.18);
  transform: scale(1.06) rotate(-3deg);
}
.sales-step:hover .sales-step__num::before {
  opacity: 1;
  transform: scale(1);
}
.sales-step h3 {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--charcoal);
  letter-spacing: .2px;
  margin: 0 0 8px;
  line-height: 1.25;
}
.sales-step p {
  color: #686058;
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}

.sales-how-we-work__tagline .sales-how-we-work__tagline-line {
  display: block;
}
.sales-how-we-work__tagline {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 28px);
  color: var(--charcoal);
  line-height: 1.35;
  letter-spacing: -.2px;
  max-width: 820px;
  margin: 0 auto;
  padding-top: 36px;
  border-top: 1px solid rgba(191,169,135,.45);
}

/* Responsive: 3-col tablet, 1-col phone */
@media (max-width: 1024px) {
  .sales-how-we-work__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .sales-step:nth-child(4),
  .sales-step:nth-child(5) {
    grid-column: span 1;
  }
}
@media (max-width: 720px) {
  .sales-how-we-work { padding: 70px 0 80px; }
  .sales-how-we-work__grid {
    grid-template-columns: 1fr;
    gap: 32px;             /* extra room between cards for the peeking node */
    margin: 24px 0 40px;
  }
  .sales-step { padding: 30px 20px 22px; }
  .sales-step__num { width: 38px; height: 38px; font-size: 13px; top: -19px; }
  .sales-how-we-work__tagline {
    padding-top: 28px;
    font-size: clamp(18px, 5vw, 22px);
  }
}

/* ---- 3) WHY IT MATTERS — premium editorial section on brand IVORY cream
   with Charcoal Black (var(--charcoal) = #2D2D2E) for body text and
   accents. Gold soft-gold for highlights. ---- */
.sales-why-matters {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(60% 40% at 80% 100%, rgba(45,45,46,.05) 0%, transparent 65%),
    radial-gradient(50% 40% at 12% 0%, rgba(191,169,135,.18) 0%, transparent 60%),
    var(--ivory);
  color: var(--charcoal);
  padding: 80px 0 80px;
  overflow: hidden;
}
.sales-why-matters::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(45,45,46,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,45,46,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 80%);
  pointer-events: none;
  z-index: -1;
  opacity: .8;
}

.sales-why-matters__inner {
  max-width: 920px !important;
}
.sales-why-matters__header {
  text-align: center;
  margin-bottom: 36px;
}
.sales-why-matters__header .eyebrow {
  color: var(--soft-gold);
  justify-content: center;
  margin-bottom: 14px;
}
.sales-why-matters__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.06;
  letter-spacing: -.6px;
  color: var(--charcoal);
  margin: 0;
}
.sales-why-matters__title .sales-why-matters__title-line {
  display: block;
}

.sales-why-matters__lede {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px;
}
.sales-why-matters__lede p {
  color: #4a4640;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.68;
  margin: 0 0 16px;
}
.sales-why-matters__risk {
  color: var(--charcoal) !important;
  font-weight: 500;
  /* Brand green callout — was red, switched per request */
  border-left: 3px solid var(--deep-forest);
  padding: 10px 14px 10px 18px;
  text-align: left;
  margin: 24px auto 0 !important;
  max-width: 700px;
  font-style: italic;
  background: rgba(54,73,63,.08);
  border-radius: 0 8px 8px 0;
}

.sales-why-matters__pivot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 36px 0 32px;
}
.sales-why-matters__pivot-rule {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--soft-gold), transparent);
}
.sales-why-matters__pivot p {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(17px, 2vw, 22px);
  color: var(--charcoal);
  margin: 0;
  letter-spacing: .3px;
  white-space: nowrap;
}

.sales-why-matters__solution {
  text-align: center;
  color: #4a4640;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
  max-width: 780px;
  margin: 0 auto 44px;
}

/* Check list — 2 columns on desktop, stack on mobile.
   On hover: gentle lift + gold shine sweep + charcoal border glow. */
.sales-why-matters__list {
  list-style: none;
  margin: 0 0 56px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
}
.sales-why-matters__list li {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: center;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid rgba(54,73,63,.22);     /* brand green subtle, same as How We Work */
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(45,45,46,.05);
  transition: border-color .35s ease, background .35s ease, transform .35s ease, box-shadow .35s ease;
}
/* Gold shine sweep removed per request — keep just the lift + border glow on hover. */
.sales-why-matters__list li:hover {
  border-color: var(--deep-forest);
  background: #fff;
  transform: translateY(-4px);
  box-shadow:
    0 18px 38px rgba(54,73,63,.18),
    0 0 0 1px rgba(54,73,63,.18) inset,
    0 0 28px rgba(191,169,135,.18);
}
.sales-why-matters__list li:hover .sales-why-matters__check {
  transform: rotate(-6deg) scale(1.08);
}
.sales-why-matters__list li > * { position: relative; z-index: 2; }

/* Why It Matters — numbered SQUARE nodes (same scheme as How We Work
   square nodes — green border, Playfair number, square radar pulse). */
/* Numbered node — IDENTICAL spec to .sales-step__num so both sections
   render the digits at the exact same size and 100% centered inside the
   mini square. The number is direct text content of the span (no inner
   wrapper), so flex centering applies straight to the glyph. */
.sales-why-matters__node {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fff;
  border: 2px solid var(--deep-forest);
  box-shadow: 0 6px 16px rgba(45,45,46,.10), 0 0 0 1px rgba(255,255,255,.6) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: 0;
  padding: 0;
  flex: 0 0 44px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), background .4s ease, color .4s ease, box-shadow .4s ease, border-color .4s ease;
}
/* Inner green gradient sheen that fills on hover */
.sales-why-matters__node::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 6px;                            /* matches the square inner */
  background: linear-gradient(135deg, #5C7C66 0%, var(--deep-forest) 100%);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .4s ease, transform .4s ease;
  z-index: 0;
}
/* Continuous SQUARE radar pulse ring around the node */
.sales-why-matters__node::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 14px;                           /* slightly larger than the node */
  border: 1.5px solid rgba(54,73,63,.55);        /* green ring */
  opacity: 1;
  animation: salesNodeRippleSquare 2.6s ease-out infinite;
  pointer-events: none;
}
.sales-why-matters__list li:nth-child(1) .sales-why-matters__node::after { animation-delay: 0s;   }
.sales-why-matters__list li:nth-child(2) .sales-why-matters__node::after { animation-delay: .65s; }
.sales-why-matters__list li:nth-child(3) .sales-why-matters__node::after { animation-delay: 1.3s; }
.sales-why-matters__list li:nth-child(4) .sales-why-matters__node::after { animation-delay: 1.95s; }

@keyframes salesNodeRippleSquare {
  0%   { opacity: .55; transform: scale(.85); }
  60%  { opacity: .15; transform: scale(1.4);  }
  100% { opacity: 0;   transform: scale(1.7);  }
}

/* Hover — node fills with brand green, number flips to white */
.sales-why-matters__list li:hover .sales-why-matters__node {
  background: var(--deep-forest);
  border-color: var(--deep-forest);
  box-shadow: 0 10px 24px rgba(54,73,63,.40), 0 0 0 4px rgba(54,73,63,.18);
  transform: scale(1.06) rotate(-3deg);
}
.sales-why-matters__list li:hover .sales-why-matters__node {
  color: #fff;
}
.sales-why-matters__list li:hover .sales-why-matters__node::before {
  opacity: 1;
  transform: scale(1);
}
.sales-why-matters__list li strong {
  display: block;
  color: var(--charcoal);
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .1px;
  margin-bottom: 4px;
  line-height: 1.3;
}
.sales-why-matters__list li span {
  display: block;
  color: #686058;
  font-size: 13.5px;
  line-height: 1.55;
}

.sales-why-matters__closing {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(22px, 3vw, 32px);
  text-align: center;
  color: var(--charcoal);
  line-height: 1.28;
  letter-spacing: -.3px;
  max-width: 860px;
  margin: 0 auto 36px;
  padding: 32px 28px;
  border-top: 1px solid rgba(45,45,46,.18);
  border-bottom: 1px solid rgba(45,45,46,.18);
  position: relative;
}
.sales-why-matters__closing::before {
  content: '"';
  position: absolute;
  left: 50%;
  top: -16px;
  transform: translateX(-50%);
  background: var(--ivory);
  color: var(--soft-gold);
  font-size: 36px;
  font-family: 'Playfair Display', serif;
  padding: 0 14px;
  line-height: 1;
}

.sales-why-matters__disclaimer {
  text-align: center;
  font-size: 13px;
  color: #79716a;
  line-height: 1.65;
  max-width: 720px;
  margin: 0 auto;
  letter-spacing: .15px;
}
.sales-why-matters__disclaimer strong {
  color: var(--charcoal);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 820px) {
  .sales-why-matters { padding: 84px 0 90px; }
  .sales-why-matters__list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .sales-why-matters__pivot { gap: 12px; margin: 28px 0 24px; }
  .sales-why-matters__pivot-rule { max-width: 40px; }
  .sales-why-matters__pivot p { font-size: 16px; white-space: normal; }
  .sales-why-matters__risk { font-size: 15px; padding-left: 14px; }
  .sales-why-matters__closing { padding: 26px 20px; font-size: clamp(18px, 5vw, 24px); }
}
@media (max-width: 480px) {
  .sales-why-matters__list li { padding: 18px; grid-template-columns: 38px 1fr; gap: 14px; }
  .sales-why-matters__node { width: 38px; height: 38px; flex: 0 0 38px; }
  .sales-why-matters__node { font-size: 13px; }
}

/* =========================================================================
   "What subfloor sanding & screw is" section — Worker photo (Flooring_1.webp)
   floats large on the RIGHT, text left-aligned on the LEFT, no card chrome.
   Photo slides DOWN from above on scroll-trigger, then stays at rest. */
.inner-content-section--with-worker {
  padding-bottom: 24px !important;
}
.inner-content-section--with-worker .inner-content-intro {
  display: block;
  position: relative;
  overflow: visible;
  max-width: 1100px;
  margin: 0 auto;
  padding-right: 340px;
  min-height: 220px;
}
.inner-content-section--with-worker .inner-content-card--plain {
  /* Strip out the white card chrome — plain text block on the section bg */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-align: left !important;
  max-width: 720px;
}
.inner-content-section--with-worker .inner-content-card--plain h2 {
  text-align: left;
  margin: 0 0 18px;
}
/* Title split — "What subfloor" / "sanding & screw is." (2nd line gold) */
.inner-content-section--with-worker .inner-content-card--plain h2 .inner-content-title-line {
  display: block;
}
.inner-content-section--with-worker .inner-content-card--plain h2 .inner-content-title-line:last-child {
  color: var(--soft-gold);
}
.inner-content-section--with-worker .inner-content-card--plain .entry-content {
  text-align: left !important;
}
.inner-content-section--with-worker .inner-content-card--plain .entry-content p {
  text-align: left;
}
.inner-content-section--with-worker .reasons-worker {
  /* Absolute anchor — floats over the section without contributing to its
     height. Vertically centered on the text row, then offset 150px down. */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(calc(-50% + 150px));
  width: 280px;
  margin: 0;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}
.inner-content-section--with-worker .reasons-worker__inner {
  display: block;
  width: 170%;
  margin-left: -35%;
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
}
.inner-content-section--with-worker.is-in-view .reasons-worker__inner {
  opacity: 1;
  transform: translateY(0);
}
.inner-content-section--with-worker .reasons-worker img {
  display: block;
  width: 100%;
  height: auto;
}
.inner-content-section--with-worker .reasons-worker__motion {
  display: block;
}
.inner-content-section--with-worker .reasons-worker__motion img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 900px) {
  .inner-content-section--with-worker .inner-content-intro {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }
  .inner-content-section--with-worker .inner-content-card--plain {
    max-width: none;
    text-align: center !important;
  }
  .inner-content-section--with-worker .inner-content-card--plain h2,
  .inner-content-section--with-worker .inner-content-card--plain .entry-content,
  .inner-content-section--with-worker .inner-content-card--plain .entry-content p {
    text-align: center !important;
  }
  .inner-content-section--with-worker .reasons-worker {
    width: 200px;
    margin: 0 auto;
  }
}
@supports not (animation-timeline: view()) {
  .inner-content-section--with-worker .reasons-worker {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .inner-content-section--with-worker .reasons-worker {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* =========================================================================
   REASONS SECTION — Subfloor variant with sanding machine photo on the left.
   The machine slides in from off-screen left as the user scrolls into view,
   then continues a subtle vibration loop suggesting the motor is running. */
.reasons-section--with-machine {
  /* Tighter top padding so this section feels like a continuation of the
     "What subfloor sanding & screw is" block above it. */
  padding-top: 24px !important;
}
.reasons-section--with-machine .reasons-section__intro {
  display: grid;
  grid-template-columns: 280px 1fr;
  align-items: center;
  gap: 56px;
  max-width: 1100px;
  margin: 0 auto 44px;
  position: relative;
  overflow: visible;
}
.reasons-section--with-machine .reasons-section__intro .reasons-header {
  margin: 0;
  text-align: left;
}
.reasons-section--with-machine .reasons-machine {
  margin: 0;
  width: 280px;
  position: relative;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
}
.reasons-section--with-machine.is-in-view .reasons-machine {
  opacity: 1;
  transform: translateX(0);
}
.reasons-section--with-machine .reasons-machine__inner {
  display: block;
  width: 200%;
  margin-left: -50%;
}
.reasons-section--with-machine .reasons-machine img {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes reasons-machine-enter {
  from {
    opacity: 0;
    transform: translateX(-130%) rotate(-2deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}
@keyframes reasons-machine-rock {
  /* Slow forward-back motion — like a worker easing the machine over the
     subfloor. Subtle vertical bob + tiny rotation for natural feel. */
  0%   { transform: translateX(-6px) translateY(0) rotate(-0.6deg); }
  50%  { transform: translateX(0)    translateY(-1.5px) rotate(0deg); }
  100% { transform: translateX(6px)  translateY(0) rotate(0.6deg); }
}
/* Fallback for browsers without view-timeline — show photo statically (no
   slide-in animation), continuous rock still plays on the inner wrapper. */
@supports not (animation-timeline: view()) {
  .reasons-section--with-machine .reasons-machine {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 900px) {
  .reasons-section--with-machine .reasons-section__intro {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }
  .reasons-section--with-machine .reasons-machine {
    max-width: 200px;
    margin: 0 auto;
  }
  .reasons-section--with-machine .reasons-section__intro .reasons-header {
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reasons-section--with-machine .reasons-machine {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* =========================================================================
   REASONS SECTION — "Why proper X matters" with 4 dash-marked cards.
   Reuses the editorial header + clean cards style; gold dash instead of
   sequential numbers so the items read as parallel qualities, not steps. */
.reasons-section {
  padding: 80px 0 90px;
  background: var(--ivory, #F8F5F0);
}
.reasons-section .reasons-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 44px;
}
.reasons-section .reasons-header h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.04;
  letter-spacing: -.5px;
  margin: 0 0 22px;
  color: var(--charcoal);
}
.reasons-section .reasons-header h2 .reasons-title-line {
  display: block;
}
.reasons-section .reasons-header h2 .reasons-title-line:last-child {
  color: var(--soft-gold);
}
.reasons-section .reasons-intro {
  color: #5a554e;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.75;
  margin: 0;
}
.reasons-section .reasons-intro + .reasons-intro {
  margin-top: 18px;
}
.reasons-section .reasons-intro--accent {
  font-weight: 600;
  color: var(--charcoal);
}
.reasons-section .reasons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
}
.reasons-section .reason-card {
  background: #ffffff;
  border: 1px solid rgba(191,169,135,.28);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: left;
  box-shadow: 0 10px 30px rgba(45,45,46,.06);
}
.reasons-section .reason-card__dash {
  display: block;
  width: 32px;
  height: 2px;
  background: var(--soft-gold);
  margin-bottom: 20px;
}
.reasons-section .reason-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  line-height: 1.18;
  margin: 0 0 10px;
  color: var(--charcoal);
  letter-spacing: -.2px;
}
.reasons-section .reason-card p {
  color: #5a554e;
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 960px) {
  .reasons-section .reasons-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .reasons-section .reasons-grid { grid-template-columns: 1fr; }
  .reasons-section { padding: 60px 0 70px; }
}

/* =========================================================================
   GOLD COLOR OVERRIDE — Windows & Doors page only (Better View Solutions).
   Per client request, the soft-gold accent (#BFA987) is replaced with a
   brighter, more saturated gold (#BFA987) on this page only. Scoped to
   .gold-scope-windows-doors so it does not affect any other service page.
   The override redefines the --soft-gold custom property (which catches
   the majority of uses via var(--soft-gold)) and then patches the common
   hardcoded color literals and rgba() variants that exist in the codebase. */
.gold-scope-windows-doors {
  --soft-gold: #BFA987;
}
/* WordPress color palette class — used by hero eyebrow, headline accent,
   pills, and other inline-styled spans. */
.gold-scope-windows-doors .has-soft-gold-color,
.gold-scope-windows-doors .has-soft-gold-color.has-text-color {
  color: #BFA987 !important;
}
.gold-scope-windows-doors .has-soft-gold-background-color {
  background-color: #BFA987 !important;
}
/* Inline-styled colors that hardcode #BFA987 (hero CTA bg/border, header
   chrome, partner pills, decorative rules). */
.gold-scope-windows-doors [style*="#BFA987"],
.gold-scope-windows-doors [style*="#bfa987"] {
  /* Inline style wins by specificity; we instead retint via accent vars
     where possible. The selectors above carry the new gold via the var
     override; this block is documentation-only. */
}
/* Common rgba() variants of the brand gold used for borders, gradients,
   shadows, and tinted backgrounds. */
.gold-scope-windows-doors [class*="hero"] [style*="rgba(191"],
.gold-scope-windows-doors [style*="rgba(191,169,135"],
.gold-scope-windows-doors [style*="rgba(191, 169, 135"] {
  /* Inline rgba() can't be overridden without !important on the same
     declaration. Component-level rules below catch the rest. */
}
/* CTA buttons that hardcode #BFA987 via WP block inline styles in the hero
   pattern. Re-tint to new gold while preserving the dark text color. */
.gold-scope-windows-doors .hero .wp-block-button.btn-primary .wp-block-button__link,
.gold-scope-windows-doors .hero .hero-cta-builders .wp-block-button__link {
  background: #BFA987 !important;
  border-color: #BFA987 !important;
}
.gold-scope-windows-doors .hero .wp-block-button.is-style-outline .wp-block-button__link,
.gold-scope-windows-doors .hero .hero-cta-homeowners .wp-block-button__link {
  border-color: #BFA987 !important;
  color: #BFA987 !important;
}
/* Decorative gold rules / borders / dashes used in cards and sections. */
.gold-scope-windows-doors .reason-card__dash,
.gold-scope-windows-doors .founding-companies-home__dash,
.gold-scope-windows-doors .reason-card::before {
  background: #BFA987 !important;
}
/* Eyebrow line accents that use rgba/var gold. */
.gold-scope-windows-doors .eyebrow::before,
.gold-scope-windows-doors .eyebrow::after,
.gold-scope-windows-doors .editorial-rule,
.gold-scope-windows-doors .sales-how-we-work__tagline {
  border-color: #BFA987 !important;
  background-color: #BFA987 !important;
}
/* Tinted section dividers that use rgba(191,169,135,...). Override with
   matching alphas of the new gold (237,179,0) for visual consistency. */
.gold-scope-windows-doors .founding-companies-home__list {
  border-top-color: rgba(237, 179, 0, 0.35) !important;
  border-bottom-color: rgba(237, 179, 0, 0.35) !important;
}
.gold-scope-windows-doors .founding-companies-home__item {
  border-right-color: rgba(237, 179, 0, 0.22) !important;
  border-bottom-color: rgba(237, 179, 0, 0.22) !important;
}
.gold-scope-windows-doors .founding-companies-home__rule {
  background: linear-gradient(to right,
    transparent,
    rgba(237, 179, 0, 0) 6%,
    rgba(237, 179, 0, 0.55) 50%,
    rgba(237, 179, 0, 0) 94%,
    transparent) !important;
}
/* Ghost pill (transparent background) — yellow border + text reads fine. */
.gold-scope-windows-doors .pill--ghost {
  border-color: #BFA987 !important;
  color: #BFA987 !important;
}
/* Gold pill (yellow background) — keep CHARCOAL text so "ENERGY STAR
   CERTIFIED" stays readable against the bright #BFA987 fill. */
.gold-scope-windows-doors .pill--gold {
  background: #BFA987 !important;
  color: var(--charcoal, #2D2D2E) !important;
}
/* Links that adopt brand gold on hover/focus. */
.gold-scope-windows-doors a:hover,
.gold-scope-windows-doors a:focus-visible {
  color: #BFA987;
}

/* =========================================================================
   CONTACT (Request a Free Quote) HERO — desktop clearance fix.
   The plain inner-hero only ships with 86px top padding (intended for
   inner-hero variants that have a 100vh background image absorbing the
   nav overlap). On the contact page the hero is short and sits directly
   under the fixed nav (~166px tall on desktop), so the eyebrow/h1 were
   getting eaten by the menu. Bump top padding so the headline always
   sits with breathing room below the nav. */
.quote-page .inner-hero {
  padding-top: 180px;
  padding-bottom: 60px;
}

/* =========================================================================
   ACTIVE MENU INDICATOR — gold underline beneath the active page name in
   both the header nav and the footer nav. Behavior:
     • Header: when on a service sub-page (e.g. /custom-cabinetry-…/),
       WP automatically adds .current-menu-ancestor to the parent <li>
       ("Services"), so the gold line appears under "Services" too — telling
       the user the section they're in without naming the specific service.
       Then when the dropdown opens on hover, the active service inside
       gets its own gold underline so it's identifiable.
     • Footer: every menu item is visible, so the active page gets a clean
       gold underline directly under its text.
   The underline is sized to match the text width via inline-block, with
   10px of padding above (per client request). */
/* Exclusion: the Contact pill (.nav-cta) is already visually distinct as a
   filled gold button — adding the gold underline + gold text on its gold
   background would invisible-out the label. The :not() selectors below
   skip it entirely for the underline/color rules. */
.wp-block-navigation .wp-block-navigation-item.current-menu-item:not(.nav-cta) > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current-menu-ancestor:not(.nav-cta) > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current-menu-item:not(.nav-cta) > a.wp-block-navigation-item__content {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;     /* space between text and the gold line */
}
.wp-block-navigation .wp-block-navigation-item.current-menu-item:not(.nav-cta) > .wp-block-navigation-item__content::after,
.wp-block-navigation .wp-block-navigation-item.current-menu-ancestor:not(.nav-cta) > .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--soft-gold, #BFA987);
  border-radius: 1px;
  /* Matches the width of the text above it because the parent is
     display:inline-block and left/right anchor the line edge-to-edge. */
}
/* HEADER-SPECIFIC: keep the line tight under the menu text and avoid
   the dropdown chevron stealing the underline width on the Services
   parent. The chevron sits in a sibling button; we only underline the
   <a class="...item__content"> directly. */
header.site-header .nav .wp-block-navigation-submenu.current-menu-ancestor:not(.nav-cta) > .wp-block-navigation-item__content::after,
header.site-header .nav .wp-block-navigation-item.current-menu-item:not(.nav-cta) > .wp-block-navigation-item__content::after {
  bottom: 2px;              /* nudges line up a hair so it doesn't
                               collide with the row below in tight rows */
}
/* HEADER DROPDOWN: when the user hovers Services and the submenu opens,
   show the active service (the page they're currently on) with its own
   gold underline so they know exactly where they are. */
header.site-header .nav .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
header.site-header .nav .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--soft-gold, #BFA987);
  border-radius: 1px;
}
/* Optional polish: the active item label also picks up the gold color, so
   even when the gold line is briefly clipped during nav scroll/transitions
   the active state still reads. Excludes .nav-cta — that pill keeps its
   charcoal text on gold background (already distinct as the CTA button). */
.wp-block-navigation .wp-block-navigation-item.current-menu-item:not(.nav-cta) > .wp-block-navigation-item__content .wp-block-navigation-item__label,
.wp-block-navigation .wp-block-navigation-item.current-menu-ancestor:not(.nav-cta) > .wp-block-navigation-item__content .wp-block-navigation-item__label {
  color: var(--soft-gold, #BFA987);
}

/* Footer menus — the footer uses wp_nav_menu() with custom fallback HTML
   (.footer-links class) which is a different structure from the header's
   wp-block-navigation. The active <li> gets `.current-menu-item` from the
   JS markActiveMenuItems() pass on page load. Highlight its <a> in gold. */
.footer-links li.current-menu-item > a,
.footer-links li.current-menu-ancestor > a {
  color: var(--soft-gold, #BFA987) !important;
  font-weight: 700;
  position: relative;
}
.footer-links li.current-menu-item > a::after,
.footer-links li.current-menu-ancestor > a::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: var(--soft-gold, #BFA987);
  border-radius: 1px;
  margin-top: 6px;
}

/* =========================================================================
   MOBILE HERO CLEARANCE — fixed nav was eating the hero headline on
   small/medium screens. Analysis:
     - Fixed nav with the 140px logo is ~166px tall (desktop & tablet).
     - The logo only shrinks at <=560px (then nav is ~96px tall).
     - .inner-hero originally has only 86px top padding — well under the
       nav height on any mobile size — so the menu was sitting on top of
       the <h1>. Same for .builders-hero (72px) and .about-hero (130px on
       tablet, still 36px short of nav clearance).
   This block:
     1. Shrinks the logo earlier (at <=900px) so the nav itself becomes
        slimmer on tablets.
     2. Raises hero top-padding floors on mobile breakpoints so headlines
        always clear the nav with breathing room. Uses !important to beat
        the inline padding-top styles baked into the home/cabinetry hero
        patterns. */
@media (max-width: 900px) {
  /* Smaller logo on tablets/large phones — keeps the fixed nav under
     ~110px tall instead of ~166px. */
  .nav .logo img,
  .nav .logo .custom-logo,
  .nav .wp-block-site-logo img { height: 90px !important; }

  /* Hero clearance — generous so the headline never sits behind the nav.
     90px logo + 20px nav vertical padding = ~110px nav, so 150px top
     padding gives 40px of clean breathing room. */
  .hero,
  .inner-hero,
  .builders-hero,
  .subfloor-hero,
  .projects-hero,
  .service-sales-hero,
  .service-door-hero,
  .error-hero,
  .blog-hero,
  header.inner-hero,
  header.hero,
  section.hero,
  .home header.hero,
  .wp-block-group.hero,
  /* Higher-specificity selectors needed to override existing
     `.service-page .hero` and `.audience-page .hero` rules that
     ship their own padding with !important. */
  .service-page .hero,
  .service-page .inner-hero,
  .audience-page .hero,
  .audience-page .inner-hero,
  main.service-page .hero,
  main.audience-page .hero {
    padding-top: 150px !important;
  }
  /* About hero already has its own ≤768 rule — bump it for parity. */
  .about-hero {
    padding-top: 150px !important;
  }
}
@media (max-width: 560px) {
  /* Re-assert the 64px logo from the original mobile rule — our 90px rule
     above (scoped to <=900) would otherwise win the cascade here because
     it appears later in source order with the same !important specificity. */
  .nav .logo img,
  .nav .logo .custom-logo,
  .nav .wp-block-site-logo img { height: 64px !important; }

  /* Logo 64px + nav padding = ~96px nav. 130px top padding leaves ~34px
     breathing room below the nav, which reads as clean clearance on phones. */
  .hero,
  .inner-hero,
  .builders-hero,
  .subfloor-hero,
  .projects-hero,
  .service-sales-hero,
  .service-door-hero,
  .error-hero,
  .blog-hero,
  header.inner-hero,
  header.hero,
  section.hero,
  .home header.hero,
  .wp-block-group.hero,
  .service-page .hero,
  .service-page .inner-hero,
  .audience-page .hero,
  .audience-page .inner-hero,
  main.service-page .hero,
  main.audience-page .hero {
    padding-top: 130px !important;
  }
  .about-hero {
    padding-top: 130px !important;
  }
}

/* =========================================================================
   CUSTOM CURSOR — Canadian maple leaf (red), Option A: native CSS cursor.
   Two variants:
     1. maple-leaf-default.svg — replaces the standard arrow site-wide
     2. maple-leaf-pointer.svg — slightly larger, used on clickable elements
   Hotspot 12 12 = the leaf is centered on the real mouse point.
   Inputs/textareas keep the system text caret so users can still type
   accurately. Touch / coarse-pointer devices fall through to defaults. */
@media (hover: hover) and (pointer: fine) {
  body,
  html {
    cursor: url("../images/cursors/maple-leaf-default.svg") 12 12, auto;
  }
  a,
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  label[for],
  summary,
  .wp-block-button__link,
  .btn,
  .btn-primary,
  [data-carousel-prev],
  [data-carousel-next],
  .cabinetry-carousel__nav {
    cursor: url("../images/cursors/maple-leaf-pointer.svg") 14 14, pointer;
  }
  /* Keep the standard I-beam caret on form fields so typing precision is not
     compromised by the maple-leaf icon. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  input[type="url"],
  textarea,
  [contenteditable="true"] {
    cursor: text;
  }
}

/* =========================================================================
   HOME HERO V2 — "Building Spaces. Building Trust."
   Replaces the old 100vh slider hero. Compact height (~78vh), single
   static background, content top-aligned, 2 CTA cards overlapping the
   bottom of the bg, then a 4-pillar trust strip with skyline silhouette.
   ========================================================================= */
header.hero.home-hero-v2 {
  min-height: auto !important;
  display: block;
  align-items: stretch !important;
  position: relative;
  isolation: isolate;
  /* Extra top padding so the eyebrow "Commercial Strength..." sits cleanly
     below the fixed nav (140px logo + paddings = ~166px nav). */
  padding: 190px 0 0 !important;
  background: var(--charcoal, #2D2D2E);
  overflow: visible; /* allow cards to overlap the trust strip below */
}
/* Static background image — only fills the upper "photo" area (top through
   bottom of cards). Trust strip lives outside this bounded zone. */
.home-hero-v2__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;        /* extends to bottom of header (cards overlap below) */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.home-hero-v2__scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.30) 35%,
    rgba(0,0,0,0.55) 100%);
  z-index: 1;
}
.home-hero-v2__inner {
  position: relative;
  z-index: 2;
  text-align: center !important;
  padding-bottom: 0;
  /* Hero container widened to 1500px (overrides .container's 1180px max)
     so even at largest font (clamp upper bound) both title lines fit. */
  width: min(1500px, 100% - 40px) !important;
  max-width: 1500px !important;
}
/* Force centering on every text element inside the hero — overrides any
   inherited left-aligned rule from .container or block-editor defaults. */
.home-hero-v2__inner .home-hero-v2__eyebrow,
.home-hero-v2__inner .home-hero-v2__title,
.home-hero-v2__inner .home-hero-v2__title-line,
.home-hero-v2__inner .home-hero-v2__subtitle {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.home-hero-v2__inner .home-hero-v2__eyebrow {
  justify-content: center !important;   /* flex container centering */
}

/* Eyebrow with the brand maple-leaf accent — sits CLOSE to the headline.
   Brighter gold color, lighter weight, and a short gold rule trailing after
   "Residential Care" for the editorial accent. */
.home-hero-v2__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 14px;
  margin: 0 0 -15px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--soft-gold, #BFA987) !important;
  text-align: center;
  white-space: nowrap;
}
/* Force gold on every text span inside the eyebrow (was rendering white
   because the base .hero { color: var(--white) } rule had higher
   precedence on inherited spans). */
.home-hero-v2__eyebrow > span {
  white-space: nowrap;
  color: var(--soft-gold, #BFA987) !important;
}
.home-hero-v2__eyebrow-rule {
  display: inline-block;
  width: 85px;                 /* gold rule (5px shorter than before) */
  height: 1.5px;
  background: var(--soft-gold, #BFA987);
  vertical-align: middle;
  border-radius: 1px;
  flex-shrink: 0;
}
.home-hero-v2__leaf {
  width: 16px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

/* 2-line headline — smaller per reference, white + gold split */
/* Title — HIGH specificity + !important to beat legacy .hero h1 rule.
   Negative margin-top pulls the title up to close the visual gap with
   the eyebrow (the eyebrow's own -15px margin-bottom couldn't fully
   collapse the line-box leading of a 72px Playfair font). */
header.hero.home-hero-v2 h1.home-hero-v2__title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(32px, 4.4vw, 72px) !important;
  line-height: 1.0 !important;            /* tighter — kills leading */
  letter-spacing: -.6px !important;
  font-weight: 800 !important;
  margin: -25px auto 11px !important;     /* pull up under eyebrow */
  padding-top: 0 !important;
  color: #ffffff !important;
  /* Stronger drop shadow + softer halo so the title reads clearly on
     bright or busy hero backgrounds. */
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.85),
    0 4px 24px rgba(0, 0, 0, 0.55);
  text-align: center !important;
  max-width: 1500px !important;
}
/* Two-line title: line 1 white, line 2 gold.
   IMPORTANT: an older rule (header.hero h1 span { color: gold !important;
   display: inline; }) at line ~3911 was forcing ALL hero spans to gold and
   inline-flowing them — that's why line 1 wasn't white AND the lines were
   not vertically centered as blocks. Below uses !important on both display
   and color to win against that legacy rule. */
header.hero.home-hero-v2 .home-hero-v2__title span.home-hero-v2__title-line {
  display: block !important;
  text-align: center !important;
  color: #ffffff !important;
  /* No white-space: nowrap — let the text wrap naturally if the viewport
     is narrow. No width: 100% — the parent .title (max-width: 880px) is
     the centering box, and the span fills that naturally. */
}
header.hero.home-hero-v2 .home-hero-v2__title span.home-hero-v2__title-line.home-hero-v2__title-line--gold {
  color: var(--soft-gold, #BFA987) !important;
}

.home-hero-v2__subtitle {
  max-width: 640px;
  margin: 0 auto 40px;
  font-size: clamp(15px, 1.45vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
  text-align: center;
}

/* 2 CTA cards container. The trust strip uses a negative margin-top below
   to slide UP under these cards, producing the overlap from the reference. */
.home-hero-v2__cards {
  display: grid;
  /* Single CTA card now (Submit Your Project removed) — center via auto-fit. */
  grid-template-columns: minmax(0, 460px);
  justify-content: center;
  gap: 22px;
  max-width: 920px;
  margin: 0 auto;
  text-align: left;
  position: relative;
  z-index: 3;                    /* stays above the trust strip */
}

/* Base CTA card */
.hero-cta-card {
  position: relative;
  border-radius: 18px;
  padding: 26px 28px 28px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 22px 50px rgba(0,0,0,0.35);
  isolation: isolate;
  text-decoration: none;        /* the projects card is now an <a> */
  color: inherit;
}
/* Rotating background layers for the projects card. Stack: bg (0) →
   scrim ::before (1) → content (2). Card's background-color was hiding
   them before — switched to transparent so the photos show through. */
.hero-cta-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease;
  z-index: 0;
}
.hero-cta-card__bg.is-active {
  opacity: 1;
}
.hero-cta-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  flex: 1;
}
/* Hover — both Projects AND Submit cards lift, scale, and gain a stronger
   shadow as a unified container. The Projects card also zooms its active
   photo internally; the Submit card scales its whole container with the
   inline gold-gradient + Sketchs.webp bg. */
.hero-cta-card {
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(.2, .7, .2, 1),
              box-shadow 0.45s cubic-bezier(.2, .7, .2, 1);
}
.hero-cta-card:hover {
  /* Same "highlight-card" pattern as ONE TEAM cards — scale + gold border
     + soft gold glow. Slight lift kept on hero cards for extra emphasis. */
  transform: translateY(-4px) scale(1.04);
  border-color: var(--soft-gold, #BFA987);
  box-shadow:
    0 0 16px rgba(191, 169, 135, 0.45),
    0 30px 60px rgba(0, 0, 0, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.30);
  z-index: 5;
}
.hero-cta-card--projects:hover {
  border-color: rgba(255, 255, 255, 0.85);
}
/* Zoom the active photo subtly when hovering the projects card. */
.hero-cta-card--projects:hover .hero-cta-card__bg.is-active {
  transform: scale(1.04);
}
.hero-cta-card__bg {
  transition: opacity 1.2s ease, transform 0.6s cubic-bezier(.2,.7,.2,1);
}
/* Hover on the gold pill button inside (when card is hovered). */
.hero-cta-card:hover .hero-cta-card__btn--gold {
  background: #d1ba93;
}
.hero-cta-card:hover .hero-cta-card__btn--dark {
  background: #1a1a1b;
}
.hero-cta-card__btn {
  transition: background 0.3s ease, transform 0.25s ease, color 0.3s ease;
}
/* Left card — rotating project photos via .hero-cta-card__bg layers. */
.hero-cta-card--projects {
  border: 2px solid rgba(255, 255, 255, 0.5);   /* white at 50% opacity */
  color: #ffffff;
  background-color: transparent;
}
.hero-cta-card--projects::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0.45) 45%,
    rgba(0,0,0,0.78) 100%);
  z-index: 1;                     /* over photos, under content */
}
/* Right card — gold with blueprint background image (inline in PHP) */
.hero-cta-card--submit {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--charcoal, #2D2D2E);
}

.hero-cta-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.hero-cta-card__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--soft-gold, #BFA987);
  flex-shrink: 0;
}
.hero-cta-card__icon--dark {
  color: var(--charcoal, #2D2D2E);
}
.hero-cta-card__icon svg {
  width: 100%;
  height: 100%;
}
.hero-cta-card__thumbs {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.hero-cta-card__thumb {
  width: 56px;
  height: 56px;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  border: 1px solid rgba(191, 169, 135, 0.45);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.hero-cta-card__title {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  color: #ffffff;
  letter-spacing: -.4px;
}
.hero-cta-card__title--dark {
  color: var(--charcoal, #2D2D2E);
  text-shadow: none;
}
.hero-cta-card__copy {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.hero-cta-card__copy--dark {
  color: rgba(45, 45, 46, 0.95);
  /* Subtle black shadow only — helps "Send us your drawings..." pop over
     the visible blueprint photo on the right. */
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Card buttons */
.hero-cta-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease, color 0.3s ease;
  align-self: flex-start;
}
.hero-cta-card__btn svg {
  width: 18px;
  height: 18px;
}
.hero-cta-card__btn--gold {
  background: var(--soft-gold, #BFA987);
  color: var(--charcoal, #2D2D2E);
}
.hero-cta-card__btn--gold:hover {
  background: #d1ba93;
}
.hero-cta-card__btn--dark {
  background: var(--charcoal, #2D2D2E);
  color: #ffffff;
}
.hero-cta-card__btn--dark:hover {
  background: #1f1f20;
}

/* 4-pillar TRUST STRIP — compact 100px section. The cards above retain
   their natural position (no overlap into this strip since the strip is
   too small to receive it). Pillar text has 25px of clearance from the
   bottom of the buttons above via padding-top + the strip's own padding. */
.home-hero-v2__trust {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(45, 45, 46, 0.92) 0%,
    rgba(45, 45, 46, 1) 100%);
  /* Cards overlap into the strip by 50px (negative margin-top pulls the
     strip up under the cards). Inside the strip, content has 30px of
     clearance below the cards' bottom and 25px from the strip's bottom. */
  margin-top: -50px;
  height: 180px;
  padding: 80px 0 25px;          /* top = 50 overlap + 30 inner clearance */
  border-top: 1px solid rgba(191, 169, 135, 0.18);
  overflow: hidden;              /* crops the oversize photo below */
  box-sizing: border-box;
}
/* Toronto skyline photo lives on the RIGHT half of the trust strip and
   fades into the charcoal background through a horizontal gradient mask.
   Replicates the reference where the city image is visible on the right
   and seamlessly blends to the brand black on the left. */
.home-hero-v2__trust-skyline {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 65%;                    /* covers the right portion only */
  /* Photo natural height is 165px — scale it to fill the section's height
     (currently 180px) proportionally. `auto 100%` keeps the photo's
     aspect ratio intact, anchored to the right edge. */
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  /* Soft fade on the LEFT edge of the photo into the charcoal — uses a
     CSS mask so the photo itself dissolves rather than being darkened. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,0.4) 25%,
    rgba(0,0,0,1) 60%,
    rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,0.4) 25%,
    rgba(0,0,0,1) 60%,
    rgba(0,0,0,1) 100%);
}
/* An extra dark gradient overlay sits ON TOP of the photo to push the
   tone toward brand charcoal — gives the city a muted, branded feel. */
.home-hero-v2__trust::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 65%;
  background: linear-gradient(to right,
    rgba(45, 45, 46, 1) 0%,
    rgba(45, 45, 46, 0.85) 18%,
    rgba(45, 45, 46, 0.55) 45%,
    rgba(45, 45, 46, 0.35) 100%);
  pointer-events: none;
  z-index: 0;
}
.home-hero-v2__trust-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  align-items: flex-start;
}
.trust-pillar {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.92);
  padding-left: 18px;
  position: relative;
}
/* Subtle white divider between each of the 4 trust pillars (3 lines total
   — one on the left edge of pillars 2, 3, and 4; pillar 1 has no line). */
.trust-pillar + .trust-pillar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);  /* ~half as visible as before */
}
.trust-pillar__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--soft-gold, #BFA987);
  margin-top: 2px;
}
.trust-pillar__icon svg {
  width: 100%;
  height: 100%;
}
.trust-pillar__body h4 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0 0 4px;
  color: #ffffff;
  line-height: 1.25;
}
.trust-pillar__body p {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

/* Make sure the v2 hero doesn't get hidden by the base reveal-up state. */
header.hero.home-hero-v2 .home-hero-v2__inner,
header.hero.home-hero-v2 .home-hero-v2__trust {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Responsive: tablet — keep grid but tighten */
@media (max-width: 1024px) {
  header.hero.home-hero-v2 {
    padding-top: 120px !important;
  }
  .home-hero-v2__trust-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
/* Phone: stack cards + 2-col trust */
@media (max-width: 700px) {
  header.hero.home-hero-v2 {
    padding-top: 110px !important;
  }
  .home-hero-v2__title {
    font-size: clamp(36px, 9vw, 56px);
  }
  .home-hero-v2__cards {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
  .hero-cta-card {
    min-height: 0;
  }
  .home-hero-v2__trust {
    padding: 32px 0;
  }
  .home-hero-v2__trust-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* =========================================================================
   ONE TEAM. COMPLETE SOLUTIONS. — compact image-tile cards
   Each card IS the photo (background) with an icon overlay + title + tagline
   sitting at the bottom via a black gradient scrim. Smaller per the
   reference. 6 cards fit on one row on desktop, responsive below.
   ========================================================================= */
section.one-team-section {
  background: var(--ivory, #F7F2EA);
  padding: 5px 0 0;              /* 5px gap from hero above */
}
.one-team-section__inner {
  padding-bottom: 0;
}
.one-team-section__header {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 5px;            /* 5px gap to services below */
}
/* Title — Inter sans-serif, charcoal/black, 10px breathing room top + bottom. */
.one-team-section__title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: .5px;
  color: var(--charcoal, #2D2D2E) !important;
  margin: 0;
  padding: 10px 0;             /* 10px top + 10px bottom around the text */
  font-weight: 700;
  text-transform: uppercase;
}
.one-team-section__dash {
  display: inline-block;
  margin: 0 .35em;
}

/* 6 cards on one row at desktop. */
.one-team-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.one-team-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 8px 18px rgba(45, 45, 46, 0.10);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  isolation: isolate;
}
/* Photo layer — own <span> so it stays separate from the scrim/caption. */
.one-team-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
/* Hover — lift 5px + grow ~5px proportional + thin subtle white outline.
   The white "border" uses box-shadow `0 0 0 1px` so it doesn't affect
   layout (no shift when border appears). Returns to normal cleanly when
   the mouse leaves. */
.one-team-card {
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(.2, .7, .2, 1),
              box-shadow 0.45s cubic-bezier(.2, .7, .2, 1);
}
.one-team-card:hover {
  /* 5px lift + scale calculated so the visible bounding box grows ~5px
     on each side (matches user spec: "crezca en proporcion 5px"). */
  transform: translateY(-5px) scale(1.025);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),   /* thin white outline */
    0 26px 50px rgba(45, 45, 46, 0.28),
    0 8px 18px rgba(45, 45, 46, 0.15);
  z-index: 2;
}
/* Top-fading scrim — dark at the top so the icon+text read, image
   stays visible toward the bottom. Uses brand charcoal. */
.one-team-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(45, 45, 46, 0.85) 0%,
    rgba(45, 45, 46, 0.55) 35%,
    rgba(45, 45, 46, 0.15) 65%,
    rgba(45, 45, 46, 0) 100%);
  z-index: 1;
}
/* Caption sits at the TOP of the card with icon LEFT + text RIGHT */
.one-team-card__caption {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.one-team-card__icon {
  /* Sits inside .__caption as a flex sibling of .__text (horizontal). */
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--soft-gold, #BFA987);
  background: transparent;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}
.one-team-card__icon svg {
  width: 100%;
  height: 100%;
}
.one-team-card__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.one-team-card__title {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.1px;
  margin: 0;
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}
.one-team-card__tagline {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--soft-gold, #BFA987);
  margin: 0;
  font-weight: 600;
  letter-spacing: .3px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

/* Bottom band — compact 50px brand line on charcoal */
.one-team-band {
  background: var(--charcoal, #2D2D2E);
  height: 40px;                  /* 10px shorter per request */
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(191, 169, 135, 0.18);
}
.one-team-band > .container {
  width: 100%;
}
.one-team-band__text {
  margin: 0;
  text-align: center;
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}
.one-team-band__sep {
  margin: 0 10px;
  color: rgba(191, 169, 135, 0.6);
}
.one-team-band__highlight {
  color: var(--soft-gold, #BFA987);
}

/* Responsive */
@media (max-width: 1100px) {
  .one-team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  section.one-team-section { padding-top: 44px; }
  .one-team-section__inner { padding-bottom: 30px; }
  .one-team-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .one-team-band { height: 60px; }
  .one-team-band__text { letter-spacing: 1.5px; }
  .one-team-band__sep { margin: 0 6px; }
}
@media (max-width: 400px) {
  .one-team-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   HELP POPUP — non-invasive slide-in card from bottom-right corner.
   Triggered 3s after page load (via main.js). Dismissible via X button,
   then suppressed for the rest of the session via localStorage. Industry-
   standard chat-style pattern (Intercom/Drift/HubSpot/Crisp-like).
   ========================================================================= */
.ce-help-popup {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 22px 22px 20px;
  background: linear-gradient(180deg, #2D2D2E 0%, #1f1f20 100%);
  border: 1.5px solid var(--soft-gold, #BFA987);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0, 0, 0, 0.30);
  color: #ffffff;
  z-index: 1000;
  /* Hidden by default: offset off-screen + faded, JS adds .is-visible */
  opacity: 0;
  transform: translateY(20px) translateX(8px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.ce-help-popup.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0);
  pointer-events: auto;
}
.ce-help-popup__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
  padding: 0;
}
.ce-help-popup__close svg {
  width: 16px;
  height: 16px;
}
.ce-help-popup__close:hover {
  color: var(--soft-gold, #BFA987);
  background: rgba(255, 255, 255, 0.06);
}
.ce-help-popup__icon {
  width: 38px;
  height: 38px;
  background: rgba(191, 169, 135, 0.15);
  border: 1px solid var(--soft-gold, #BFA987);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--soft-gold, #BFA987);
  margin-bottom: 12px;
}
.ce-help-popup__icon svg {
  width: 18px;
  height: 18px;
}
.ce-help-popup__title {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #ffffff;
  letter-spacing: -.2px;
}
.ce-help-popup__copy {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 14px;
}
.ce-help-popup__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--soft-gold, #BFA987);
  color: var(--charcoal, #2D2D2E);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ce-help-popup__cta:hover {
  background: #d1ba93;
  transform: translateY(-1px);
}
.ce-help-popup__cta svg {
  width: 14px;
  height: 14px;
}
/* Mobile: slightly smaller + tighter margins so it doesn't crowd thumbs. */
@media (max-width: 480px) {
  .ce-help-popup {
    right: 14px;
    bottom: 14px;
    width: 290px;
    padding: 18px 18px 16px;
  }
  .ce-help-popup__title { font-size: 17px; }
  .ce-help-popup__copy { font-size: 13px; }
}

/* =========================================================================
   HOME HERO V2 — Entrance animations (CSS-only, no JS).
   Triggered on page load. BG photo does a subtle ken-burns + fade.
   Eyebrow, title, cards, and trust pillars stagger in for a polished feel.
   Respects prefers-reduced-motion. */
@keyframes ce-hero-bg-in {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1.0); }
}
/* Continuous slow ken-burns — runs after the initial entry animation
   completes, giving the BG photo subtle ongoing motion (no longer feels
   flat / static). 28s, alternates so direction reverses each cycle. */
@keyframes ce-hero-bg-kenburns {
  0%   { transform: scale(1.0) translate(0, 0); }
  100% { transform: scale(1.06) translate(-1.2%, -0.8%); }
}
/* Trust strip subtle pulse — keeps the band feeling alive when the user
   sits on the hero without scrolling. */
@keyframes ce-hero-trust-pulse {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50%      { opacity: 0.95; transform: translateY(-1px); }
}
/* Nav drop-in — slides the fixed header down from above on page load. */
@keyframes ce-nav-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Nav fade-in — very gradual smooth fade. Initial opacity 0 (hidden from
   first paint). JS toggles .ce-loaded after window.load + a short pause so
   the browser has fully settled before the transition kicks in. Long
   duration (1.4s) ensures the fade is perceptually smooth, not abrupt. */
body .nav {
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
body.ce-loaded .nav {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  body .nav { opacity: 1 !important; transition: none !important; }
}
@keyframes ce-hero-rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ce-hero-card-in {
  from { opacity: 0; transform: translateY(34px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes ce-hero-trust-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* BG photo — slow ken-burns scale + fade */
/* Initial hidden state — applied always (so when hero leaves viewport and
   the .is-revealed class is removed by JS, elements reset and re-animate
   the next time the user scrolls back). */
header.hero.home-hero-v2 .home-hero-v2__bg,
header.hero.home-hero-v2 .home-hero-v2__eyebrow,
header.hero.home-hero-v2 .home-hero-v2__title,
header.hero.home-hero-v2 .hero-cta-card--projects,
header.hero.home-hero-v2 .hero-cta-card--submit,
header.hero.home-hero-v2 .home-hero-v2__trust-inner .trust-pillar {
  opacity: 0;
}
header.hero.home-hero-v2 .home-hero-v2__bg {
  transform: scale(1.06);
  transform-origin: center center;
}
header.hero.home-hero-v2 .home-hero-v2__eyebrow,
header.hero.home-hero-v2 .home-hero-v2__title {
  transform: translateY(22px);
}
header.hero.home-hero-v2 .hero-cta-card--projects,
header.hero.home-hero-v2 .hero-cta-card--submit {
  transform: translateY(34px) scale(0.985);
}
header.hero.home-hero-v2 .home-hero-v2__trust-inner .trust-pillar {
  transform: translateY(14px);
}

/* Reveal: when .is-revealed is on the hero (added by JS on enter), the
   animations play. Removing the class resets them so re-entry re-fires. */
header.hero.home-hero-v2.is-revealed .home-hero-v2__bg {
  /* Entry: fade + scale from 1.06 → 1.0 over 1.6s.
     Continuous: slow ken-burns loop (28s, alternates) starts after entry. */
  animation:
    ce-hero-bg-in 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) both,
    ce-hero-bg-kenburns 28s ease-in-out 1.6s infinite alternate;
}
header.hero.home-hero-v2.is-revealed .home-hero-v2__eyebrow {
  animation: ce-hero-rise-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 0.25s;
}
header.hero.home-hero-v2.is-revealed .home-hero-v2__title {
  animation: ce-hero-rise-in 1.0s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 0.45s;
}
header.hero.home-hero-v2.is-revealed .hero-cta-card--projects {
  animation: ce-hero-card-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 0.7s;
}
header.hero.home-hero-v2.is-revealed .hero-cta-card--submit {
  animation: ce-hero-card-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 0.85s;
}
header.hero.home-hero-v2.is-revealed .home-hero-v2__trust-inner .trust-pillar {
  animation: ce-hero-trust-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
header.hero.home-hero-v2.is-revealed .home-hero-v2__trust-inner .trust-pillar:nth-child(1) { animation-delay: 1.05s; }
header.hero.home-hero-v2.is-revealed .home-hero-v2__trust-inner .trust-pillar:nth-child(2) { animation-delay: 1.15s; }
header.hero.home-hero-v2.is-revealed .home-hero-v2__trust-inner .trust-pillar:nth-child(3) { animation-delay: 1.25s; }
header.hero.home-hero-v2.is-revealed .home-hero-v2__trust-inner .trust-pillar:nth-child(4) { animation-delay: 1.35s; }

@media (prefers-reduced-motion: reduce) {
  header.hero.home-hero-v2 .home-hero-v2__bg,
  header.hero.home-hero-v2 .home-hero-v2__eyebrow,
  header.hero.home-hero-v2 .home-hero-v2__title,
  header.hero.home-hero-v2 .hero-cta-card--projects,
  header.hero.home-hero-v2 .hero-cta-card--submit,
  header.hero.home-hero-v2 .home-hero-v2__trust-inner .trust-pillar {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================================
   ONE TEAM — entrance + exit animations triggered by JS via .is-revealed.
   Section is always visible (override of .reveal-up that was hiding it),
   but the inner elements (title + 6 cards) animate in when the section
   enters the viewport and reset when it leaves so re-entry replays. */
section.one-team-section.reveal-up,
section.one-team-section.reveal-up:not(.visible) {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

@keyframes ce-oneteam-title-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ce-oneteam-card-in {
  from { opacity: 0; transform: translateY(28px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ONE TEAM entry — pure transitions (no @keyframes) so the hover :hover
   state can override transform values. Keyframe-driven animations with
   fill-mode persist their final transform at a CSS priority HIGHER than
   :hover, which blocks the hover effect. Applied site-wide. */
section.one-team-section .one-team-section__title,
section.one-team-section .one-team-card {
  opacity: 0;
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.45s cubic-bezier(.2, .7, .2, 1);
}
section.one-team-section .one-team-section__title {
  transform: translateY(18px);
}
section.one-team-section .one-team-card {
  transform: translateY(28px) scale(0.96);
}
section.one-team-section.is-revealed .one-team-section__title {
  opacity: 1;
  transform: translateY(0);
}
section.one-team-section.is-revealed .one-team-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
section.one-team-section.is-revealed .one-team-card:nth-child(1) { transition-delay: 0.20s; }
section.one-team-section.is-revealed .one-team-card:nth-child(2) { transition-delay: 0.30s; }
section.one-team-section.is-revealed .one-team-card:nth-child(3) { transition-delay: 0.40s; }
section.one-team-section.is-revealed .one-team-card:nth-child(4) { transition-delay: 0.50s; }
section.one-team-section.is-revealed .one-team-card:nth-child(5) { transition-delay: 0.60s; }
section.one-team-section.is-revealed .one-team-card:nth-child(6) { transition-delay: 0.70s; }

/* Hover — adopts the user's "highlight-card" pattern: transparent
   border becomes visible gold, card scales 1.05, soft gold glow halo.
   Uses brand gold (--soft-gold) instead of the spec's #C69C6D so it
   stays on-brand. */
section.one-team-section .one-team-card {
  border: 2px solid transparent;
}
section.one-team-section .one-team-card:hover {
  opacity: 1;
  transform: scale(1.05) !important;
  border-color: var(--soft-gold, #BFA987);
  box-shadow:
    0 0 14px rgba(191, 169, 135, 0.45),
    0 16px 36px rgba(45, 45, 46, 0.18);
  transition-delay: 0s !important;
  z-index: 2;
}

/* =========================================================================
   FOR BUILDERS — Hero v2 (mirrors home hero pattern: text left, photo
   card right with rotating bgs). Title locked at 62px per spec. */
header.hero.builders-hero-v2 {
  min-height: auto !important;
  display: block;
  align-items: stretch !important;
  position: relative;
  isolation: isolate;
  padding: 190px 0 80px !important;
  background: var(--charcoal, #2D2D2E);
  overflow: hidden;
}
.builders-hero-v2__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  /* Always visible (no opacity:0 fallback so BG shows even before JS
     adds .is-revealed). Continuous ken-burns provides the motion. */
  opacity: 1;
  transform-origin: center center;
  animation: ce-hero-bg-kenburns 28s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .builders-hero-v2__bg {
    animation: none !important;
  }
}

/* Entry animations for builders-hero-v2 (used on Builders, Homeowners,
   and all service pages with the v2 hero structure). Hidden initial
   state + transitions that trigger when JS adds .is-revealed. Re-fires
   when scrolling away and back. */
.builders-hero-v2__text,
.builders-hero-v2__card {
  opacity: 0;
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.builders-hero-v2__text {
  transform: translateY(22px);
}
.builders-hero-v2__card {
  transform: translateY(34px) scale(0.985);
}
.builders-hero-v2.is-revealed .builders-hero-v2__text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.30s;
}
.builders-hero-v2.is-revealed .builders-hero-v2__card {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.55s;
}
/* Hover override for the card stays — :hover wins over .is-revealed
   because both are regular CSS transitions at equal specificity. */
.builders-hero-v2__card:hover {
  transition-delay: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  .builders-hero-v2__text,
  .builders-hero-v2__card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
.builders-hero-v2__scrim {
  position: absolute;
  inset: 0;
  /* Very light scrim — just enough for legibility on the bright BG. */
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.08) 40%,
    rgba(0, 0, 0, 0.28) 100%);
  z-index: 1;
}
/* Service heros — 25% dark overlay (slightly darker top, ~25% mid, deeper
   bottom) so the BG photo still pops while the title stays legible.
   Applied to Glass, Metal, Subfloor, Premium Doors. */
.service-glass-hero .builders-hero-v2__scrim,
.service-metal-hero .builders-hero-v2__scrim,
.subfloor-hero .builders-hero-v2__scrim,
.service-subfloor-hero .builders-hero-v2__scrim,
.service-door-hero .builders-hero-v2__scrim {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.30) 0%,
    rgba(0, 0, 0, 0.25) 45%,
    rgba(0, 0, 0, 0.45) 100%) !important;
}
/* Disable the legacy ::after dark overlay that was layering on top of
   the v2 hero — `.builders-hero::after` adds another dark gradient that
   stacks with our scrim and made the hero look near-black. */
header.hero.builders-hero-v2::after,
header.hero.builders-hero-v2::before {
  display: none !important;
  content: none !important;
}
.builders-hero-v2__inner {
  position: relative;
  z-index: 10;                    /* force above ALL hero overlays */
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.builders-hero-v2__text,
.builders-hero-v2__text *:not(.btn-primary):not(.btn):not(.pill) {
  color: #ffffff !important;
}
/* Buttons keep their own dark charcoal text against the gold background. */
.builders-hero-v2__text .btn-primary,
.builders-hero-v2__text .btn-primary * {
  color: var(--charcoal, #2D2D2E) !important;
}
/* Re-apply gold only to the .accent span (gets overridden by * above). */
.builders-hero-v2__title .accent {
  color: var(--soft-gold, #BFA987) !important;
}
/* Eyebrow gold (overrides the * white). */
.builders-hero-v2__text .eyebrow {
  color: var(--soft-gold, #BFA987) !important;
}
.builders-hero-v2__text .eyebrow {
  color: var(--soft-gold, #BFA987);
  letter-spacing: 3px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 14px;
}
/* Title locked to 62px per spec — high-specificity rule beats the
   legacy `.audience-page .hero h1 { font-size: 72px !important }`. */
.audience-page header.hero.builders-hero-v2 h1.builders-hero-v2__title,
header.hero.builders-hero-v2 h1.builders-hero-v2__title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(34px, 4.6vw, 62px) !important;
  line-height: 1.05 !important;
  letter-spacing: -1px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 28px !important;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.85),
    0 4px 24px rgba(0, 0, 0, 0.55);
}
.builders-hero-v2__title .accent {
  color: var(--soft-gold, #BFA987) !important;
  display: block !important;
}
.builders-hero-v2__card {
  /* Reuses .hero-cta-card--projects pattern: photo bg + white border +
     scrim. Sized to match the text column visually. */
  min-height: 360px;
  margin: 0;
}

/* Responsive — stack on tablet/mobile */
@media (max-width: 900px) {
  .builders-hero-v2__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  header.hero.builders-hero-v2 {
    padding: 160px 0 60px !important;
  }
  .builders-hero-v2__card {
    min-height: 320px;
  }
}

/* Override the legacy .audience-page .hero rule (padding: 130px / 110px /
   90px) that was making this hero's padding fight our values. */
.audience-page header.hero.builders-hero-v2 {
  padding: 190px 0 80px !important;
}
@media (max-width: 1024px) {
  .audience-page header.hero.builders-hero-v2 {
    padding: 160px 0 60px !important;
  }
}

/* "Integrated support — why it matters for builders." title split on 2
   lines per spec. Line 1 = main heading, line 2 = subline in soft gold. */
.integrated-support-title {
  text-align: center;
}
.integrated-support-title__line {
  display: block;
}
.integrated-support-title__line--sub {
  /* Same size as line 1 — only color differs (gold for editorial accent). */
  color: var(--soft-gold, #BFA987);
  margin-top: 8px;
}

/* Hero CTA button on Builders — dark text on gold pill (unchanged). */
header.hero.builders-hero-v2 .hero-actions .btn-primary {
  color: var(--charcoal, #2D2D2E) !important;
}
/* Hero CTA button on HOMEOWNERS — gold ghost style (border + transparent
   fill + gold text), matching the Pre-Qualify button's shape exactly.
   Selector uses `.clients-hero` (no `header` prefix) because the hero
   on this page is a <section>, not a <header>. */
/* SITE-WIDE: hero CTA button style — solid gold fill, black text,
   semi-square corners (8px). Applied to every hero variant across the
   site (home, builders, homeowners, service pages, about us, projects,
   blog, contact). */
header.hero .hero-actions .btn-primary,
section.hero .hero-actions .btn-primary,
.inner-hero .hero-actions .btn-primary,
.builders-hero-v2 .hero-actions .btn-primary,
.clients-hero .hero-actions .btn-primary,
.service-metal-hero .hero-actions .btn-primary,
.service-glass-hero .hero-actions .btn-primary,
.service-door-hero .hero-actions .btn-primary,
.subfloor-hero .hero-actions .btn-primary,
.builders-hero .hero-actions .btn-primary,
.projects-hero .hero-actions .btn-primary,
.about-hero .hero-actions .btn-primary,
.blog-hero .hero-actions .btn-primary,
.service-sales-hero .hero-actions .btn-primary,
section.hero.clients-hero .hero-actions .btn-primary,
.sales-final-cta__actions .btn-primary,
.sales-final-cta__actions .btn,
.audience-page .sales-final-cta__actions .btn-primary,
section.cta .btn-primary,
section.cta .cta-inner .btn-primary,
.cta-ready .btn-primary,
.cta-ready .cta-inner .btn-primary,
.cta-inner .btn-primary {
  /* Solid 100% gold fill + black text. */
  background: var(--soft-gold, #BFA987) !important;
  border: 1.5px solid var(--soft-gold, #BFA987) !important;
  color: var(--charcoal, #2D2D2E) !important;
  border-radius: 8px !important;
  min-height: 52px !important;
  padding: 0 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: .3px !important;
  transition: background 0.25s ease, transform 0.25s ease,
              box-shadow 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}
header.hero .hero-actions .btn-primary:hover,
section.hero .hero-actions .btn-primary:hover,
.inner-hero .hero-actions .btn-primary:hover,
.builders-hero-v2 .hero-actions .btn-primary:hover,
.clients-hero .hero-actions .btn-primary:hover,
.service-metal-hero .hero-actions .btn-primary:hover,
.service-glass-hero .hero-actions .btn-primary:hover,
.service-door-hero .hero-actions .btn-primary:hover,
.subfloor-hero .hero-actions .btn-primary:hover,
.builders-hero .hero-actions .btn-primary:hover,
.projects-hero .hero-actions .btn-primary:hover,
.about-hero .hero-actions .btn-primary:hover,
.blog-hero .hero-actions .btn-primary:hover,
.service-sales-hero .hero-actions .btn-primary:hover,
section.hero.clients-hero .hero-actions .btn-primary:hover,
.sales-final-cta__actions .btn-primary:hover,
.sales-final-cta__actions .btn:hover,
.audience-page .sales-final-cta__actions .btn-primary:hover,
section.cta .btn-primary:hover,
section.cta .cta-inner .btn-primary:hover,
.cta-ready .btn-primary:hover,
.cta-ready .cta-inner .btn-primary:hover,
.cta-inner .btn-primary:hover {
  background: #d1ba93 !important;
  border-color: #d1ba93 !important;
  color: var(--charcoal, #2D2D2E) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 0 16px rgba(191, 169, 135, 0.5) !important;
}

/* =========================================================================
   PRE-QUALIFY LOAN — secondary hero CTA button + modal popup form.
   Lives on the Homeowners hero, sits to the right of "Request a Free
   Quote". Opens a centered modal with a quick form; submit posts via
   mailto: to the brand business email.
   ========================================================================= */
.btn-prequalify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .3px;
  text-transform: none;
  cursor: pointer;
  /* Solid 100% deep-forest green fill + black text. */
  border: 1.5px solid var(--deep-forest, #36493F);
  background: var(--deep-forest, #36493F);
  color: var(--charcoal, #2D2D2E) !important;
  transition: background 0.25s ease, transform 0.25s ease,
              box-shadow 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-prequalify:hover,
.btn-prequalify:focus-visible {
  background: #2a3a31;
  border-color: #2a3a31;
  color: var(--charcoal, #2D2D2E) !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 16px rgba(54, 73, 63, 0.5);
  outline: none;
}

/* Modal overlay + panel */
.ce-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.ce-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.35s ease, visibility 0s linear 0s;
}
.ce-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.ce-modal__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  background: #ffffff;
  border: 2px solid var(--soft-gold, #BFA987);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  overflow-y: auto;
  transform: scale(0.92);
  transition: transform 0.4s cubic-bezier(.2, .7, .2, 1);
}
.ce-modal.is-open .ce-modal__panel {
  transform: scale(1);
}
.ce-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: var(--charcoal, #2D2D2E);
  cursor: pointer;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s ease, color 0.2s ease;
}
.ce-modal__close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--soft-gold, #BFA987);
}
.ce-modal__body {
  padding: 40px 36px 36px;
  background: linear-gradient(180deg, #ffffff 0%, var(--ivory, #F7F2EA) 100%);
  border-radius: 12px;
}
.ce-modal__body .eyebrow {
  color: var(--soft-gold, #BFA987);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ce-modal__body h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.18;
  letter-spacing: -.3px;
  color: var(--charcoal, #2D2D2E);
  margin: 0 0 12px;
}
.ce-modal__lede {
  font-size: 14px;
  line-height: 1.6;
  color: #5a554e;
  margin: 0 0 22px;
}

/* Form fields */
.ce-prequalify-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ce-prequalify-form > label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--charcoal, #2D2D2E);
  letter-spacing: .3px;
}
.ce-prequalify-form > label > span em {
  color: #c0392b;
  font-style: normal;
  margin-left: 2px;
}
.ce-prequalify-form .ce-optional {
  color: #8a857c;
  font-weight: 500;
  font-style: italic;
}
.ce-prequalify-form input,
.ce-prequalify-form select,
.ce-prequalify-form textarea {
  padding: 11px 14px;
  border: 1px solid rgba(45, 45, 46, 0.18);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal, #2D2D2E);
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ce-prequalify-form input:focus,
.ce-prequalify-form select:focus,
.ce-prequalify-form textarea:focus {
  outline: none;
  border-color: var(--soft-gold, #BFA987);
  box-shadow: 0 0 0 3px rgba(191, 169, 135, 0.25);
}
.ce-prequalify-form__full {
  grid-column: 1 / -1;
}
.ce-prequalify-form__note {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-size: 12px;
  color: #6a655c;
  font-style: italic;
  letter-spacing: .2px;
}
.ce-prequalify-form__submit {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 30px;
  margin-top: 6px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  background: var(--charcoal, #2D2D2E);
  color: var(--soft-gold, #BFA987);
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.ce-prequalify-form__submit:hover {
  background: var(--soft-gold, #BFA987);
  color: var(--charcoal, #2D2D2E);
  transform: translateY(-1px);
}

.ce-prequalify-form__success {
  text-align: center;
  padding: 30px 10px;
}
.ce-prequalify-form__success h3 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: var(--charcoal, #2D2D2E);
  margin: 0 0 10px;
}
.ce-prequalify-form__success p {
  color: #5a554e;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 600px) {
  .ce-modal__body { padding: 32px 22px 26px; }
  .ce-prequalify-form { grid-template-columns: 1fr; }
}

/* ONE TEAM variant with 4 columns (used on service pages — 4 sub-services). */
.one-team-grid.one-team-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1000px) {
  .one-team-grid.one-team-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .one-team-grid.one-team-grid--4 {
    grid-template-columns: 1fr;
  }
}

/* ONE TEAM variant with 5 columns (instead of 6 — Real Estate removed). */
.one-team-grid.one-team-grid--5 {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1100px) {
  .one-team-grid.one-team-grid--5 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .one-team-grid.one-team-grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 400px) {
  .one-team-grid.one-team-grid--5 {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  section.one-team-section .one-team-section__title,
  section.one-team-section .one-team-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}