/* ==========================================================================
   Build Gurus - home page
   Design: "Quiet Premium" (see Website/_design_handoff/.../README.md)
   Scoped under .bg-home so nothing here can leak into legacy pages.
   ========================================================================== */

.bg-home {
  /* --- colour ------------------------------------------------------------ */
  --cream:      #faf9f5;
  --parchment:  #f6f1e7;
  --white:      #ffffff;
  --navy:       #16293a;
  --navy-hover: #24425c;
  --navy-deep:  #0d1a26;
  --orange:     #f7941e;
  --orange-dp:  #d9820f;
  --orange-txt: #b96b06;   /* passes contrast on cream */
  --orange-lt:  #f7a83c;   /* for use on dark only */
  --green:      #1c332b;
  --paths:      #f4f1e8;
  --error:      #b3421f;

  --line:       rgba(22, 41, 58, .12);
  --line-solid: rgba(22, 41, 58, .16);
  --line-input: rgba(22, 41, 58, .25);
  --muted:      rgba(22, 41, 58, .68);
  --muted-soft: rgba(22, 41, 58, .60);

  /* --- type -------------------------------------------------------------- */
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- shape ------------------------------------------------------------- */
  --r-card:  18px;
  --r-photo: 14px;
  --r-input: 9px;
  --r-pill:  999px;
  --pad-y:   clamp(64px, 8vw, 104px);
  --pad-x:   clamp(20px, 5vw, 56px);
}

/* Reset-ish, scoped ------------------------------------------------------- */
.bg-page,
.bg-page *,
.bg-page *::before,
.bg-page *::after { box-sizing: border-box; }

.bg-page {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.bg-page img,
.bg-page picture { max-width: 100%; display: block; }
.bg-page a { color: inherit; text-decoration: none; }
.bg-page p { margin: 0; }
.bg-page ul,
.bg-page ol { margin: 0; padding: 0; list-style: none; }
.bg-page h1, .bg-page h2, .bg-page h3 { margin: 0; font-weight: 400; }
.bg-page input,
.bg-page select,
.bg-page textarea,
.bg-page button { font: inherit; color: inherit; }

/* Visible focus everywhere - the design never specified it, but keyboard
   users need it and every interactive element must show it. */
.bg-page :focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}
.bg-hero :focus-visible,
.bg-header :focus-visible { outline-color: #ffd18a; }

.bg-sr,
.bg-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.bg-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: var(--cream);
  padding: 14px 22px; border-radius: 0 0 var(--r-input) 0;
  font-size: 15px; font-weight: 600;
}
.bg-skip:focus { left: 0; }

.bg-wrap { max-width: 1330px; margin: 0 auto; padding: 0 var(--pad-x); }
.bg-wrap--narrow { max-width: 880px; }

/* Shared type ------------------------------------------------------------- */
.bg-h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.bg-h2--light { color: var(--white); }
.bg-kicker {
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--orange-txt);
}
.bg-kicker--light { color: var(--orange-lt); }
.bg-stars { color: var(--orange); }
.bg-page .bg-link {
  font-weight: 600; font-size: 14.5px;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* Buttons ----------------------------------------------------------------- */
.bg-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 30px;
  border: 0; border-radius: var(--r-pill);
  font-size: 15.5px; font-weight: 600;
  cursor: pointer; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
/* NOTE the .bg-page prefix on every colour rule below. `.bg-page a { color:
   inherit }` has specificity (0,1,1) and would otherwise beat a bare
   `.bg-btn--primary` (0,1,0), leaving white label text on the cream button -
   an unreadable ~1.05:1 contrast ratio. Do not remove the prefix. */
.bg-page .bg-btn--primary { background: var(--cream); color: var(--navy); }
.bg-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.bg-page .bg-btn--glass {
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--white);
  backdrop-filter: blur(12px);
}
.bg-btn--glass:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .15); }

/* Periodic shine sweep on the two primary CTAs only. */
.bg-btn--shine::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  z-index: -1;  /* behind the label - otherwise the sweep washes out the text */
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: bgShine 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bgShine { 0% { left: -70%; } 55%, 100% { left: 130%; } }

/* ==========================================================================
   Site header - fixed, visible at all times
   Lives outside .bg-hero (which is overflow:hidden and would clip it).
   Transparent over the hero, solid navy once scrolled (.is-stuck via JS).
   ========================================================================== */
.bg-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.bg-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  max-width: 1600px; margin: 0 auto;
  padding: 18px var(--pad-x);
  transition: padding .25s ease;
}
.bg-header.is-stuck {
  background: rgba(250, 249, 245, .55);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 1px 0 rgba(22, 41, 58, .08), 0 8px 30px rgba(22, 41, 58, .07);
}
/* FULL frosted glass, light variant (client direction 2026-08-09), applied to
   EVERY stuck header: the home page once scrolled past the hero, and static
   pages (page-clean, legacy chrome) permanently - those render is-stuck
   server-side. The nav recolours navy because dark text is what makes a
   see-through header legible; over the hero the header is transparent with
   white text, and the flip happens with the .is-stuck toggle.
   Ordering matters: this block must come after the base .bg-nav rules it
   overrides, and (0,3,0) selectors outgun the later `.bg-page .bg-nav__list`
   pill rule. */
.bg-header.is-stuck .bg-header__logo img { filter: none; }
.bg-header.is-stuck .bg-nav__list {
  background: rgba(22, 41, 58, .05);
  border-color: rgba(22, 41, 58, .1);
}
.bg-header.is-stuck .bg-nav__list a { color: rgba(22, 41, 58, .78); }
.bg-header.is-stuck .bg-nav__list a:hover { color: var(--navy); }
.bg-header.is-stuck .bg-nav__list [aria-current="page"] { color: var(--navy); }
.bg-header.is-stuck .bg-nav__phone { color: var(--navy) !important; }
.bg-header.is-stuck .bg-nav__cta { background: var(--navy); color: var(--white) !important; }
.bg-header.is-stuck .bg-nav__toggle {
  background: rgba(22, 41, 58, .06);
  border-color: rgba(22, 41, 58, .14);
}
.bg-header.is-stuck .bg-nav__bars,
.bg-header.is-stuck .bg-nav__bars::before,
.bg-header.is-stuck .bg-nav__bars::after { background: var(--navy); }
.bg-header.is-stuck :focus-visible { outline-color: var(--orange); }
@media (max-width: 860px) {
  /* The mobile dropdown must stay opaque for legibility - light card to
     match the light glass, navy links inherited from the rules above. */
  .bg-header.is-stuck .bg-nav__list,
  .bg-page .bg-header.is-stuck .bg-nav__list {
    background: rgba(250, 249, 245, .98);
    border: 1px solid rgba(22, 41, 58, .12);
    box-shadow: 0 18px 44px rgba(22, 41, 58, .18);
  }
  .bg-header.is-stuck .bg-nav__cta { background: var(--navy); }
}
.bg-header.is-stuck .bg-header__inner { padding-top: 12px; padding-bottom: 12px; }

.bg-header__logo img {
  height: 58px; width: auto;
  transition: height .25s ease;
  /* The wordmark's "BUILD" is navy and the hero base is navy, so the light
     halo is load-bearing, not decoration - it keeps the logo legible before
     the photo paints and over dark areas of any slide. */
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .55))
          drop-shadow(0 0 18px rgba(255, 255, 255, .55))
          drop-shadow(0 0 40px rgba(255, 255, 255, .3));
}
.bg-header.is-stuck .bg-header__logo img { height: 46px; filter: none; }

/* The fixed header overlays content, so anchor targets need clearance. */
.bg-page [id] { scroll-margin-top: 96px; }

/* ==========================================================================
   1. Hero
   ========================================================================== */
.bg-hero {
  position: relative;
  min-height: clamp(620px, 92vh, 860px);
  display: flex; flex-direction: column;
  background: var(--navy-deep);
  color: var(--white);
  overflow: hidden;
}
/* isolation keeps the per-slide z-indexes INSIDE this container. Without it
   they compete with the scrim and an active slide paints over the darkening
   layer, which destroys the contrast the hero text depends on. */
.bg-hero__slides { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
/* Crossfade without a gap: the outgoing slide holds at full opacity on a lower
   layer while the incoming one fades in above it. Fading both at once briefly
   exposes the navy base and reads as a flicker. */
.bg-hero__slide {
  position: absolute; inset: 0;
  opacity: 0; z-index: 0;
  transition: opacity 1.2s ease;
}
.bg-hero__slide.is-prev { opacity: 1; z-index: 1; transition: none; }
.bg-hero__slide.is-active { opacity: 1; z-index: 2; }
.bg-hero__slide picture,
.bg-hero__img { width: 100%; height: 100%; object-fit: cover; }
.bg-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10, 18, 28, .62), rgba(10, 18, 28, .38) 45%, rgba(10, 18, 28, .78));
}
.bg-hero__inner {
  position: relative; z-index: 2;
  flex: 1; display: flex; flex-direction: column;
  /* Top padding clears the fixed header. */
  padding: 118px var(--pad-x) 56px;
}

/* Nav */
.bg-nav__toggle {
  display: none;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-pill);
  padding: 11px 14px; cursor: pointer;
  backdrop-filter: blur(12px);
}
.bg-nav__bars,
.bg-nav__bars::before,
.bg-nav__bars::after {
  display: block; width: 20px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.bg-nav__bars { position: relative; }
.bg-nav__bars::before,
.bg-nav__bars::after { content: ''; position: absolute; left: 0; }
.bg-nav__bars::before { top: -6px; }
.bg-nav__bars::after  { top: 6px; }
.bg-nav__toggle[aria-expanded="true"] .bg-nav__bars { background: transparent; }
.bg-nav__toggle[aria-expanded="true"] .bg-nav__bars::before { transform: translateY(6px) rotate(45deg); }
.bg-nav__toggle[aria-expanded="true"] .bg-nav__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* .bg-page prefix required: `.bg-page ul { padding: 0 }` is (0,1,1) and beats
   a bare .bg-nav__list (0,1,0), collapsing the pill's inset so "Home" sits
   flush against its left edge and the CTA touches the right. */
.bg-page .bg-nav__list {
  display: flex; align-items: center; gap: 30px;
  padding: 11px 14px 11px 34px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-pill);
  backdrop-filter: blur(12px);
  font-size: 15.5px; font-weight: 500;
}
.bg-nav__list a { color: rgba(255, 255, 255, .85); transition: color .16s ease; }
.bg-nav__list a:hover { color: var(--white); }
.bg-nav__list [aria-current="page"] { color: var(--white); font-weight: 600; }
.bg-nav__phone { font-size: 16px; font-weight: 700; color: var(--white) !important; }
.bg-nav__cta {
  background: var(--cream); color: var(--navy) !important;
  padding: 14px 26px; border-radius: var(--r-pill);
  font-size: 15.5px; font-weight: 700;
  transition: transform .18s ease;
}
.bg-nav__cta:hover { transform: translateY(-2px); }

/* Centre stack */
.bg-hero__stack {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 22px; max-width: 900px; margin: 0 auto; padding: 40px 0;
}
.bg-hero__stack > * { animation: bgFadeUp .7s both; }
.bg-hero__h1      { animation-delay: .05s; }
.bg-hero__lede    { animation-delay: .18s; }
.bg-hero__ctas    { animation-delay: .32s; }
.bg-hero__trust   { animation-delay: .46s; }
@keyframes bgFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.bg-hero__h1 {
  font-family: var(--serif);
  font-size: clamp(42px, 8vw, 78px);
  line-height: 1.06; letter-spacing: -.015em;
}
.bg-hero__h1 em { color: var(--orange-lt); font-style: italic; }
.bg-hero__lede {
  font-size: clamp(16px, 2vw, 18px); line-height: 1.65;
  color: rgba(255, 255, 255, .82); max-width: 58ch;
}
.bg-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.bg-hero__trust {
  font-size: 12px; font-weight: 600; letter-spacing: .22em;
  color: rgba(255, 255, 255, .6); text-transform: uppercase;
}

/* ==========================================================================
   2. Trusted-by marquee
   ========================================================================== */
.bg-marquee {
  background: var(--navy-deep); color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 58px 0 64px; overflow: hidden;
}
.bg-marquee__stage { perspective: 1200px; }
.bg-marquee__plane {
  transform: rotateX(9deg) rotateY(-14deg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent),
                      linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent),
                      linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.bg-marquee__track { display: flex; width: max-content; animation: bgMarquee 30s linear infinite; }
.bg-marquee:hover .bg-marquee__track { animation-play-state: paused; }
.bg-marquee__row { display: flex; align-items: center; gap: 34px; padding-right: 34px; }
.bg-marquee__mark {
  font-size: clamp(28px, 4vw, 54px);
  color: rgba(255, 255, 255, .9); white-space: nowrap;
}
.bg-marquee__mark--strong { font-weight: 800; }
.bg-marquee__mark--italic { font-weight: 800; font-style: italic; }
.bg-marquee__mark--wide   { font-weight: 400; letter-spacing: .28em; }
.bg-marquee__mark--serif  { font-family: var(--serif); font-size: clamp(30px, 4.2vw, 56px); }
.bg-marquee__sep { color: var(--orange); font-size: 20px; }
.bg-marquee__cap {
  margin-top: 34px; text-align: center;
  font-size: 11.5px; letter-spacing: .24em;
  color: rgba(255, 255, 255, .45); text-transform: uppercase;
}
@keyframes bgMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   3. Who's this quote for? - audience gate
   From the "What We Do v2" design (option 2c). Replaces the old service-card
   grid. Panels are visible by default so the section works with JS disabled;
   .is-enhanced (set by JS) is what turns it into a one-at-a-time switcher.
   ========================================================================== */
.bg-aud {
  position: relative;
  background: var(--cream);
  border-top: 1px solid var(--line);
  overflow: hidden;
}

/* Orange logo wipe -------------------------------------------------------- */
.bg-aud__wipe {
  position: absolute; inset: 0; z-index: 40;
  display: none; place-items: center;
  background: var(--orange);
}
.bg-aud__wipe img { height: 46px; width: auto; }
.bg-aud.is-wiping .bg-aud__wipe {
  display: grid;
  animation: bgWipe .92s cubic-bezier(.72, 0, .28, 1) both;
}
@keyframes bgWipe {
  0%        { transform: translateX(-101%); }
  42%, 58%  { transform: translateX(0); }
  100%      { transform: translateX(101%); }
}

/* Choice gate ------------------------------------------------------------- */
.bg-aud__gate {
  /* Same navy as the "Trusted by Perth builders..." marquee above it, so the
     two dark bands read as one block rather than green-then-navy. */
  background: var(--navy-deep); color: var(--paths);
  padding: clamp(56px, 8vw, 96px) var(--pad-x);
  text-align: center;
}
.bg-aud__brand {
  font-size: 13px; font-weight: 600;
  letter-spacing: .22em; color: var(--orange-lt);
}
.bg-page .bg-aud__gateh {
  margin: 16px 0 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 5vw, 54px); line-height: 1.1;
}
/* .bg-page prefix required: `.bg-page p { margin: 0 }` is (0,1,1) and would
   beat a bare .bg-aud__gatep (0,1,0), killing the auto-centring. Same trap as
   the button colours - see docs/01-architecture.md. */
.bg-page .bg-aud__gatep {
  margin: 14px auto 0; max-width: 52ch;
  font-size: 15px; color: rgba(244, 241, 232, .7);
}
.bg-aud__picks {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; margin-top: 32px;
}
.bg-page .bg-aud__pick {
  background: var(--paths); color: var(--navy);
  border: 0; border-radius: var(--r-pill);
  padding: 18px 34px;
  font-size: 16px; font-weight: 800;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.bg-page .bg-aud__pick--alt { background: var(--orange); }
.bg-page .bg-aud__pick:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .3); }

/* Tabs -------------------------------------------------------------------- */
.bg-aud__tabs {
  display: flex; gap: 26px;
  padding: 0 var(--pad-x);
  border-bottom: 1px solid var(--line);
}
.bg-aud__tabs[hidden] { display: none; }
.bg-page .bg-aud__tab {
  background: none; border: 0;
  border-bottom: 2.5px solid transparent;
  padding: 16px 4px;
  font-size: 14.5px; font-weight: 700;
  color: var(--muted-soft);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.bg-page .bg-aud__tab[aria-selected="true"] {
  color: var(--navy);
  border-bottom-color: var(--orange);
}

/* Panels ------------------------------------------------------------------ */
.bg-aud.is-enhanced .bg-aud__panel { display: none; }
.bg-aud.is-enhanced .bg-aud__panel.is-active { display: block; animation: bgAudIn .55s ease both; }
@keyframes bgAudIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.bg-aud__banner {
  display: grid; grid-template-columns: 1fr 360px; gap: 36px; align-items: center;
  background: var(--navy-deep); color: var(--cream);
  padding: 44px var(--pad-x);
}
.bg-aud__kicker {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; color: var(--orange-lt);
}
.bg-page .bg-aud__head {
  margin-top: 10px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4vw, 42px); line-height: 1.08;
}
.bg-aud__head em { color: var(--orange-lt); font-style: italic; }
.bg-page .bg-aud__body {
  margin-top: 12px; max-width: 52ch;
  font-size: 14.5px; line-height: 1.6;
  color: rgba(250, 249, 245, .75);
}
.bg-page .bg-aud__cta {
  display: inline-block; margin-top: 18px;
  background: var(--orange); color: var(--navy);
  border-radius: var(--r-pill);
  padding: 14px 28px;
  font-size: 14.5px; font-weight: 700;
  transition: transform .25s ease, box-shadow .25s ease;
}
.bg-page .bg-aud__cta--alt { background: var(--cream); }
.bg-page .bg-aud__cta:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, .35); }
.bg-aud__shot picture,
.bg-aud__img { width: 100%; height: 230px; object-fit: cover; border-radius: 12px; }

/* Chips ------------------------------------------------------------------- */
/* .bg-page prefix required: `.bg-page ul { padding: 0 }` is (0,1,1) and beats a
   bare .bg-aud__chips (0,1,0), collapsing the row's side padding so the chips
   sit flush left while every neighbouring row is inset. */
.bg-page .bg-aud__chips {
  display: flex; flex-wrap: wrap; gap: 9px;
  padding: 20px var(--pad-x);
  border-bottom: 1px solid var(--line);
}
.bg-aud__chip {
  background: var(--white);
  border: 1px solid var(--line-solid);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-size: 13px; font-weight: 600;
}

/* Per-audience form ------------------------------------------------------- */
.bg-aud__form { padding: 28px var(--pad-x) 34px; }
.bg-aud__form .bg-formblock { max-width: 720px; }

/* Proof + standards ------------------------------------------------------- */
.bg-aud__proof {
  padding: 16px var(--pad-x);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px; font-weight: 600;
  color: rgba(22, 41, 58, .75);
}
.bg-aud__stars { color: var(--orange-dp); }
.bg-aud__std {
  padding: 14px var(--pad-x) 18px;
  border-top: 1px solid rgba(22, 41, 58, .1);
  font-size: 12.5px; color: rgba(22, 41, 58, .5);
}

/* Without JS both panels stack, so label them for context. */
.bg-aud:not(.is-enhanced) .bg-aud__panel + .bg-aud__panel { border-top: 1px solid var(--line); }

/* ==========================================================================
   4. Portfolio
   ========================================================================== */
.bg-folio {
  background: var(--cream);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: var(--pad-y) 0;
}
.bg-folio__head { text-align: center; margin-bottom: 46px; }
.bg-folio__sub  { margin-top: 10px; font-size: 14.5px; color: var(--muted-soft); }
.bg-folio__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.bg-folio__item {
  position: relative; margin: 0;
  width: var(--w); height: var(--h);
  border-radius: var(--r-photo); overflow: hidden;
  transition: transform .3s ease, filter .3s ease, opacity .3s ease;
}
.bg-folio__item picture,
.bg-folio__img { width: 100%; height: 100%; object-fit: cover; }
/* Dim siblings ONLY while a photo is genuinely hovered.
   Two earlier attempts were wrong:
     `[data-dim] .item:not(:hover)`        -> everything blurred at rest
     `[data-dim]:hover .item:not(:hover)`  -> blurred whenever the cursor was
                                              anywhere over the grid, including
                                              the gaps between photos, so simply
                                              scrolling past with the pointer in
                                              that column faded the whole set.
   `:has()` targets the real condition: some .bg-folio__item is hovered. If a
   browser lacks :has() the rule is skipped and photos simply never dim, which
   is the safe way to fail. */
.bg-folio__grid[data-dim]:has(.bg-folio__item:hover) .bg-folio__item:not(:hover) {
  filter: blur(5px);
  opacity: .45;
}
.bg-folio__item:hover { transform: scale(1.05); z-index: 2; }
.bg-folio__chip {
  position: absolute; left: 12px; bottom: 12px;
  padding: 6px 13px; border-radius: var(--r-pill);
  background: rgba(250, 249, 245, .94); color: var(--navy);
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
}
.bg-folio__note {
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  width: 290px; padding: 26px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-photo);
  font-size: 14px; line-height: 1.65; color: var(--muted);
}

/* ==========================================================================
   5. Get in touch
   ========================================================================== */
.bg-contact { position: relative; background: var(--green); padding: var(--pad-y) var(--pad-x); overflow: hidden; }
.bg-contact__paths { position: absolute; inset: 0; opacity: .9; }
.bg-contact__paths svg { width: 100%; height: 100%; }
.bg-contact__inner { position: relative; z-index: 1; max-width: 790px; margin: 0 auto; }
.bg-contact__head { text-align: center; margin-bottom: 38px; }
.bg-contact__head .bg-h2 { margin: 12px 0 14px; }
.bg-contact__sub { font-size: 15.5px; color: rgba(250, 249, 245, .75); }

.bg-card {
  background: var(--white); border-radius: var(--r-card);
  padding: clamp(24px, 4vw, 42px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
/* Form styling lives in form.css (.bg-formblock) - shared with
   /contact-us/ and /get-free-quote/. */
.bg-contact__talk {
  margin-top: 26px; text-align: center;
  font-size: 14.5px; color: rgba(250, 249, 245, .75);
}
.bg-contact__talk a { border-bottom: 1px solid rgba(250, 249, 245, .4); }
.bg-contact__talk strong { color: var(--cream); font-weight: 600; }

/* ==========================================================================
   6. Reviews
   ========================================================================== */
.bg-reviews { background: var(--cream); padding: var(--pad-y) 0; overflow: hidden; }
.bg-reviews__head { text-align: center; margin-bottom: 44px; }
.bg-reviews__head .bg-h2 { margin: 12px 0 10px; font-size: clamp(30px, 4.4vw, 42px); }
.bg-reviews__sub { font-size: 15px; color: var(--muted-soft); }
.bg-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  max-width: 1180px; margin: 0 auto;
}
.bg-reviews__grid .bg-review { width: auto; }

.bg-revmarq {
  margin-bottom: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 120px, #000 calc(100% - 120px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 120px, #000 calc(100% - 120px), transparent);
}
.bg-revmarq__track { display: flex; width: max-content; }
.bg-revmarq--fwd .bg-revmarq__track { animation: bgMarquee 44s linear infinite; }
.bg-revmarq--rev .bg-revmarq__track { animation: bgMarqueeRev 44s linear infinite; }
.bg-revmarq:hover .bg-revmarq__track { animation-play-state: paused; }
.bg-revmarq__set { display: flex; gap: 20px; padding-right: 20px; }
@keyframes bgMarqueeRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.bg-review {
  width: 380px; margin: 0; padding: 22px 24px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 8px;
}
.bg-review__top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bg-review__av {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--cream);
  font-size: 15px; font-weight: 700;
}
.bg-review:nth-child(2) .bg-review__av { background: var(--orange-txt); }
.bg-review:nth-child(3) .bg-review__av { background: #3e5c50; }
.bg-review__name { font-size: 14.5px; font-weight: 600; }
.bg-review__meta { font-size: 12px; color: var(--muted-soft); }
.bg-review__stars { color: var(--orange); font-size: 13px; margin-bottom: 8px; }
.bg-review__text { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(22, 41, 58, .8); }
.bg-reviews__link { margin-top: 26px; text-align: center; }

/* ==========================================================================
   7. FAQ
   ========================================================================== */
.bg-faq { background: var(--parchment); padding: var(--pad-y) 0; }
.bg-faq__head { text-align: center; margin-bottom: 40px; }
.bg-faq__head .bg-h2 { margin: 12px 0 10px; }
.bg-faq__sub { font-size: 14.5px; color: var(--muted-soft); }
.bg-faq__sub a { font-weight: 600; border-bottom: 1px solid currentColor; }
.bg-faq__list { position: relative; }
.bg-faq__pill {
  position: absolute; left: 0; right: 0;
  background: rgba(22, 41, 58, .07); border-radius: 20px;
  opacity: 0; pointer-events: none;
  transition: top .18s ease, height .18s ease, opacity .18s ease;
}
.bg-faq__item { position: relative; z-index: 1; border-radius: 20px; }
.bg-faq__item[open] { background: rgba(22, 41, 58, .05); }
.bg-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 19px 22px; cursor: pointer;
  font-size: 15.5px; font-weight: 600;
  list-style: none;
}
.bg-faq__q::-webkit-details-marker { display: none; }
.bg-faq__chev {
  color: var(--orange-txt); font-size: 21px;
  transition: transform .18s ease;
}
.bg-faq__item[open] .bg-faq__chev { transform: rotate(90deg); }
.bg-faq__a { padding: 0 22px 20px; font-size: 14.5px; line-height: 1.65; color: rgba(22, 41, 58, .72); }

/* ==========================================================================
   7b. Clean content pages (page-clean.php) - simple prose in the new design.
   Element selectors are prefixed .bg-page .bg-prose so they outrank the
   .bg-page reset (the specificity trap - see CLAUDE.md §5).
   ========================================================================== */
.bg-clean { padding: 150px var(--pad-x) var(--pad-y); }
.bg-prose { max-width: 760px; margin: 0 auto; }
.bg-prose__kicker {
  /* same voice as .bg-kicker, restated for standalone use in prose */
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--orange-txt);
  margin-bottom: 14px;
}
/* Prose headings are ALL Archivo (client decision 2026-08-09): the display
   serif suits the hero at 54px+, but repeated through a dense document it
   reads dated. One family page-wide, hierarchy from size and weight only.
   The home page's serif headings are untouched. */
.bg-prose__title {
  font-family: var(--sans); font-size: clamp(32px, 4vw, 42px);
  font-weight: 700; letter-spacing: -.02em;
  line-height: 1.1; margin-bottom: 42px;
}
.bg-page .bg-prose h2 {
  font-family: var(--sans); font-size: 25px;
  font-weight: 650; letter-spacing: -.01em;
  margin: 52px 0 14px; line-height: 1.2;
}
.bg-page .bg-prose h3 {
  font-family: var(--sans); font-size: 18px;
  font-weight: 600; letter-spacing: 0;
  margin: 32px 0 10px; line-height: 1.3;
}
.bg-page .bg-prose p { margin: 0 0 16px; color: rgba(22, 41, 58, .84); }
.bg-page .bg-prose > p:first-of-type {
  /* lede: the paragraph straight after the title, sized like the hero lede */
  font-size: 18px; line-height: 1.65; color: var(--muted);
  margin-bottom: 8px;
}
.bg-page .bg-prose ul,
.bg-page .bg-prose ol { margin: 0 0 16px; padding-left: 24px; color: rgba(22, 41, 58, .84); }
.bg-page .bg-prose ul { list-style: disc; }
.bg-page .bg-prose ol { list-style: decimal; }
.bg-page .bg-prose li { margin-bottom: 6px; }
.bg-page .bg-prose a {
  color: var(--orange-txt); border-bottom: 1px solid currentColor;
  transition: color .16s ease;
}
.bg-page .bg-prose a:hover { color: var(--navy); }
@media (max-width: 860px) {
  .bg-clean { padding-top: 118px; }
}

/* ==========================================================================
   8. Footer
   ========================================================================== */
.bg-footer { background: var(--cream); border-top: 1px solid var(--line); padding: 64px 0 30px; }
.bg-footer__cols {
  /* 3 tracks since the PROMISE column was cut (2026-08-07 redundancy review) */
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px;
  font-size: 14px; color: var(--muted);
}
.bg-footer__brand img { height: 40px; width: auto; margin-bottom: 16px; }
.bg-footer__brand p + p { margin-top: 6px; }
.bg-footer__h {
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--muted-soft); margin-bottom: 14px; text-transform: uppercase;
}
.bg-footer__col li + li { margin-top: 9px; }
.bg-footer__col a:hover { color: var(--navy); }
.bg-footer__bar {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted-soft);
}
.bg-footer__bar a { border-bottom: 1px solid currentColor; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .bg-footer__cols { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 860px) {
  .bg-header__inner { padding: 14px var(--pad-x); }
  .bg-header__logo img { height: 46px; }
  .bg-header.is-stuck .bg-header__logo img { height: 40px; }
  .bg-nav__toggle { display: block; }
  .bg-nav { position: relative; }
  .bg-page .bg-nav__list {
    position: absolute; right: 0; top: calc(100% + 12px);
    flex-direction: column; align-items: stretch; gap: 4px;
    min-width: 240px; padding: 14px;
    border-radius: 18px;
    background: rgba(13, 26, 38, .96);
    display: none;
  }
  .bg-nav__list.is-open { display: flex; }
  .bg-nav__list li { padding: 6px 4px; }
  .bg-nav__cta { display: block; text-align: center; margin-top: 6px; }

  .bg-aud__banner { grid-template-columns: 1fr; gap: 24px; }
  .bg-aud__shot picture,
  .bg-aud__img { height: 210px; }

  .bg-folio__item { width: min(92vw, var(--w)); height: auto; aspect-ratio: var(--w) / var(--h); }
  .bg-folio__note { width: min(92vw, 320px); }
  .bg-folio__grid[data-dim]:has(.bg-folio__item:hover) .bg-folio__item:not(:hover) { filter: none; opacity: 1; }

  .bg-review { width: min(84vw, 340px); }
}

@media (max-width: 620px) {
  .bg-aud__tabs { gap: 16px; overflow-x: auto; }
  .bg-page .bg-aud__pick { width: 100%; }
  .bg-footer__cols { grid-template-columns: 1fr; gap: 30px; }
  }

/* ==========================================================================
   Reduced motion - the design brief asks for this explicitly.
   Everything decorative stops; nothing becomes unusable.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bg-page *,
  .bg-page *::before,
  .bg-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .bg-hero__slide { opacity: 0; }
  .bg-hero__slide:first-child { opacity: 1; }
  .bg-aud.is-wiping .bg-aud__wipe { display: none; }
  .bg-aud__panel.is-active { animation: none !important; }
  .bg-folio__grid[data-dim]:has(.bg-folio__item:hover) .bg-folio__item:not(:hover) { filter: none; opacity: 1; }
}

/* Print: the phone number and address are what anyone would actually want. */
@media print {
  .bg-hero__slides, .bg-hero__scrim, .bg-marquee, .bg-revmarq,
  .bg-contact__paths, .bg-aud__wipe, .bg-nav { display: none !important; }
  .bg-page { background: #fff; color: #000; }
}