/* ============================================================
   Shared content-template surfaces.
   Internal-only .le shell rules live in content-internal.css so
   home does not download them; keep that file loaded before this
   one on internal/template routes to preserve the original cascade.
   ============================================================ */

/* Page background SSOT — value lives in theme.css :root[data-theme] as --cb-page-bg.
   Apply to both html AND body so overscroll rubber-band and short pages never
   bleed the browser default or CMS #F4F7FC through. */
html, body { background-color: var(--cb-page-bg, #02060F); }

/* ---- HOME hero animation scene: absolute background layer (Phase A) ----
   Mirror the internal-page rule above. Without this the iframe
   (height=335) sits in normal flow and pushes the centered headline
   down. Absolute + inset:0 + height:100% turns it into a background
   scene layer behind .parallax-hero__content (which is already
   position:relative; z-index:12 in blocks.css). */
:is(.home-page, .le-template-category, .le-template-article) .parallax-hero__animation-container {
  position: absolute;
  inset: 0;
  height: 100% !important;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
/* ────────────────────────────────────────────────────────────
   HOME HERO PARITY (High-Fidelity Finalized)
   ──────────────────────────────────────────────────────────── */
:root {
  --hero-text-driver: clamp(3.8rem, 9.5vh, 7rem); /* Balanced for maximum impact without overflow */
}

@media (max-width: 1024px) {
  :root { --hero-text-driver: clamp(2.8rem, 7.5vh, 4.5rem); }
}

@media (max-width: 767px) {
  /* Was clamp(2rem, 6.5vh, 3.2rem) → 51px, which wrapped the home headline to 7 lines
     (332px) and overflowed the [nav → strip] band by ~55-70px (top of "YOUR" clipped
     under the nav once band-centred). 2.5rem max / 5.4vh keeps it impactful at ~40px
     while the full copy block fits the band. Home-only: category/article override the
     headline font at the cb-role-internal rule below. */
  :root { --hero-text-driver: clamp(1.9rem, 5.4vh, 2.5rem); }
        :root { --nav-h: 68px !important; }
}
/* Interior Navigation Absolute Stacking */
body.cb-role-internal .le-nav,
.le .le-nav {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  z-index: 50 !important;
  background: transparent !important;
}

/* AC5: the interior top menu is now the GLOBAL nav (.cb-nav), rendered inside the
   le-shell so interior matches home (incl. its working hamburger drawer). The
   legacy interior .le-nav is restored for secondary section links, collapsing
   into a mobile-first drawer to match the global site UX. */
body.cb-role-internal .le-nav, .le .le-nav {
  display: flex !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  z-index: 50 !important;
  background: transparent !important;
  padding: 20px clamp(20px, 6vw, 40px) !important;
  transition: background 0.3s ease;
}

/* Secondary interior nav: sits below global header, simplified. */
body.cb-role-internal .le-nav--secondary, .le .le-nav--secondary {
  position: sticky !important;
  top: var(--nav-h, 104px) !important;
  z-index: 90 !important;
  background: var(--le-bg, rgba(2, 6, 15, 0.97)) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  height: auto !important;
  justify-content: flex-start !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  /* Full-bleed: break out of the 1280px .le max-width at wide viewports. */
  width: 100vw !important;
  max-width: none !important;
  margin-left: min(0px, calc((1280px - 100vw) / 2)) !important;
  padding: 6px max(clamp(20px, 6vw, 40px), calc((100vw - 1280px) / 2 + 40px)) !important;
  /* Tapered transparent edges — mirrors .category-strip pattern */
  mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 85%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 85%, transparent 100%) !important;
}
/* Desktop: links centered, wrap to a second line if needed — no horizontal scroll.
   gap:0 so spacing comes entirely from the ◆ separator margins. */
body.cb-role-internal .le-nav--secondary .le-nav-links,
.le .le-nav--secondary .le-nav-links {
  flex: 1 1 0 !important;
  justify-content: safe center !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  list-style: none !important;
}
body.cb-role-internal .le-nav--secondary .le-nav-links a,
.le .le-nav--secondary .le-nav-links a {
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  letter-spacing: 0.12em !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  color: rgba(220, 238, 255, 0.72) !important;
  transition: color 0.18s ease !important;
}
body.cb-role-internal .le-nav--secondary .le-nav-links a:hover,
.le .le-nav--secondary .le-nav-links a:hover {
  color: rgba(220, 238, 255, 1) !important;
}
/* Remove browser list bullets — use intentional 30A diamond separator */
body.cb-role-internal .le-nav--secondary .le-nav-links li,
.le .le-nav--secondary .le-nav-links li {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* 30A coastal diamond: between items in horizontal flow */
body.cb-role-internal .le-nav--secondary .le-nav-links li + li::before,
.le .le-nav--secondary .le-nav-links li + li::before {
  content: '\25C6';
  font-size: 4px;
  line-height: 1;
  color: rgba(140, 200, 240, 0.45);
  margin: 0 10px;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}

/* Light theme: the bar flips to a light tint, so the cyan-white label/link
   colors (tuned for the dark bar) go near-invisible. Restore legible navy ink.
   The :root[data-theme="light"] prefix out-specifies the dark base colors, so
   this wins regardless of source order and applies at every width. */
:root[data-theme="light"] body .le-nav--secondary .le-nav-label {
  color: #0c2340 !important;
  opacity: 1 !important;
}
:root[data-theme="light"] body .le-nav--secondary .le-nav-links a {
  color: rgba(12, 35, 64, 0.82) !important;
}
:root[data-theme="light"] body .le-nav--secondary .le-nav-links a:hover {
  color: #0c2340 !important;
}
:root[data-theme="light"] body .le-nav--secondary .le-nav-links li + li::before {
  color: rgba(12, 60, 110, 0.5) !important;
}

/* TAG-20260623-SECNAV-POLISH ── in-page anchor nav polish */
/* 1. 11→12px for legibility. Targets same selectors, placed later → wins. */
body.cb-role-internal .le-nav--secondary .le-nav-links a,
.le .le-nav--secondary .le-nav-links a {
  font-size: 12px !important;
}
/* 2. Slightly stronger bottom hairline (0.07 → 0.13). */
body.cb-role-internal .le-nav--secondary,
.le .le-nav--secondary {
  border-bottom-color: rgba(255, 255, 255, 0.13) !important;
}
/* 3. Active-section indicator: brand-soft color + text underline.
   text-decoration follows the text baseline, not the element box bottom —
   avoids the box-shadow bleed into the second nav row when links wrap. */
body.cb-role-internal .le-nav--secondary .le-nav-links a.is-current,
.le .le-nav--secondary .le-nav-links a.is-current {
  color: var(--le-brand-soft, rgb(190, 230, 255)) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--le-brand-soft, rgb(190, 230, 255)) !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 2px !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
:root[data-theme="light"] body .le-nav--secondary .le-nav-links a.is-current {
  color: rgb(12, 35, 64) !important;
  text-decoration: underline !important;
  text-decoration-color: rgb(42, 138, 200) !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 2px !important;
  box-shadow: none !important;
}

/* TAG-20260623-SECNAV-HOME-MATCH -- align internal anchor rail with home in-page nav */
body.cb-role-internal .le-nav--secondary,
.le .le-nav--secondary {
  min-height: 60px !important;
  align-items: center !important;
  background: rgba(2, 6, 15, 0.92) !important;
  border-top: 1px solid rgba(190, 220, 250, 0.16) !important;
  border-bottom: 1px solid rgba(190, 220, 250, 0.18) !important;
  box-shadow:
    0 14px 34px rgba(0, 5, 18, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

body.cb-role-internal .le-nav--secondary .le-nav-label,
.le .le-nav--secondary .le-nav-label {
  flex: 0 0 auto !important;
  padding-right: 22px !important;
  margin-right: 0 !important;
  border-right: 1px solid rgba(190, 220, 250, 0.16) !important;
  color: rgb(126, 226, 255) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.28em !important;
  text-shadow: 0 1px 2px rgba(0, 8, 24, 0.88), 0 10px 28px rgba(0, 10, 28, 0.58) !important;
}

body.cb-role-internal .le-nav--secondary .le-nav-links,
.le .le-nav--secondary .le-nav-links {
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 0 14px !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

body.cb-role-internal .le-nav--secondary .le-nav-links::-webkit-scrollbar,
.le .le-nav--secondary .le-nav-links::-webkit-scrollbar {
  display: none !important;
}

body.cb-role-internal .le-nav--secondary .le-nav-links li,
.le .le-nav--secondary .le-nav-links li {
  flex: 0 0 auto !important;
}

body.cb-role-internal .le-nav--secondary .le-nav-links li + li::before,
.le .le-nav--secondary .le-nav-links li + li::before {
  content: '' !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  color: transparent !important;
}

body.cb-role-internal .le-nav--secondary .le-nav-links a,
.le .le-nav--secondary .le-nav-links a {
  position: relative !important;
  min-height: 44px !important;
  padding: 14px 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  color: rgba(200, 220, 245, 0.62) !important;
  text-shadow: 0 1px 2px rgba(0, 8, 24, 0.76) !important;
}

body.cb-role-internal .le-nav--secondary .le-nav-links a:hover,
.le .le-nav--secondary .le-nav-links a:hover,
body.cb-role-internal .le-nav--secondary .le-nav-links a.is-current,
.le .le-nav--secondary .le-nav-links a.is-current {
  color: rgb(126, 226, 255) !important;
  text-decoration: none !important;
}

body.cb-role-internal .le-nav--secondary .le-nav-links a.is-current::after,
.le .le-nav--secondary .le-nav-links a.is-current::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(126, 226, 255, 0.98), transparent) !important;
  box-shadow: 0 0 16px rgba(126, 226, 255, 0.64) !important;
}

:root[data-theme="light"] body .le-nav--secondary {
  background: rgba(252, 247, 238, 0.88) !important;
  border-top-color: rgba(20, 50, 100, 0.12) !important;
  border-bottom-color: rgba(20, 50, 100, 0.16) !important;
  box-shadow:
    0 14px 34px rgba(54, 42, 24, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

:root[data-theme="light"] body .le-nav--secondary .le-nav-label {
  color: rgb(18, 69, 117) !important;
  border-right-color: rgba(20, 50, 100, 0.14) !important;
  text-shadow: 0 1px 0 rgba(255, 252, 244, 0.9), 0 8px 18px rgba(54, 42, 24, 0.10) !important;
}

:root[data-theme="light"] body .le-nav--secondary .le-nav-links li + li::before {
  background: rgba(20, 50, 100, 0.18) !important;
}

:root[data-theme="light"] body .le-nav--secondary .le-nav-links a {
  color: rgba(42, 58, 80, 0.76) !important;
  text-shadow: 0 1px 0 rgba(255, 252, 244, 0.78) !important;
}

:root[data-theme="light"] body .le-nav--secondary .le-nav-links a:hover,
:root[data-theme="light"] body .le-nav--secondary .le-nav-links a.is-current {
  color: rgb(178, 91, 48) !important;
  text-decoration: none !important;
}

:root[data-theme="light"] body .le-nav--secondary .le-nav-links a.is-current::after {
  background: linear-gradient(90deg, transparent, rgba(178, 91, 48, 0.88), transparent) !important;
  box-shadow: 0 0 13px rgba(178, 91, 48, 0.26) !important;
}

@media (max-width: 1099px) {
  body.cb-role-internal .le-nav--secondary, .le .le-nav--secondary {
    top: var(--nav-h, 68px) !important;
  }
}

/* Interior Navigation Drawer (.le-nav__panel) */
.le-nav__panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: var(--le-bg, #02060f);
  z-index: 1000;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s 0.32s;
  display: flex;
  flex-direction: column;
  padding: 24px;
  box-shadow: -16px 0 48px rgba(0, 6, 20, 0.55);
  backdrop-filter: var(--glass-blur-lg) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: var(--glass-blur-lg) saturate(var(--glass-saturate));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.le-nav.is-open .le-nav__panel {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s;
}

.le-nav__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 8, 24, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0s 0.32s;
}

.le-nav.is-open .le-nav__backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.32s ease, visibility 0s;
}

.le-nav__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--le-hairline, rgba(190, 230, 255, 0.1));
}

.le-nav__drawer-close {
  background: transparent;
  border: none;
  color: var(--le-text, #fff);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  border: 1px solid var(--le-hairline, rgba(190, 230, 255, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.le-nav__drawer-close:hover {
  background: rgba(255,255,255,0.05);
}

.le-nav-links--mobile {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.le-nav-links--mobile li {
  border-bottom: 1px solid var(--le-hairline, rgba(190, 230, 255, 0.1));
}

.le-nav-links--mobile a {
  display: block;
  padding: 12px 0;
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--le-text, #fff);
  text-decoration: none;
  transition: color 0.2s ease;
}

.le-nav-links--mobile a.active {
  color: var(--le-accent, #c9a05d);
}

.le-nav-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--le-accent, #00d4ff);
  opacity: 0.8;
  padding: 0 16px 0 0;
  margin-right: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
}

@media (min-width: 1100px) {
  .le-nav__burger, .le-nav__panel { display: none !important; }
  .le-nav--secondary .le-nav-links {
    margin-left: 0 !important;
  }
}

@media (max-width: 1099px) {
  body.cb-role-internal .le-nav-links:not(.le-nav-links--mobile, .le-nav--secondary *) {
    display: none !important;
  }
}

/* Interior Logo Restoration (84px match) */
.le .le-logo, .le .le-logo img {
  height: 84px !important;
}
.le .le-logo.cb-logo-bg {
  --cb-logo-h: 84px;
  --cb-logo-w: 125.67px;
  height: var(--cb-logo-h) !important;
  width: var(--cb-logo-w) !important;
}
@media (max-width: 767px) {
  .le .le-logo, .le .le-logo img { height: 48px !important; }
  .le .le-logo.cb-logo-bg {
    --cb-logo-h: 48px;
    --cb-logo-w: 71.81px;
  }
}

:is(.home-page, .le-template-category, .le-template-article) .parallax-hero.le-cover {
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: var(--nav-h, 68px) 1fr !important; /* Row 1: Nav Space, Row 2: Splash Space */
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  width: 100% !important;
  min-height: auto !important; /* Override legacy min-height */
}

/* Ensure background layers fill the entire 100vh grid and don't occupy tracks */
:is(.home-page, .le-template-category, .le-template-article) .hero-bg,
:is(.home-page, .le-template-category, .le-template-article) .parallax-hero__animation-container {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
}

/* Hero video + SVG scene both cover the splash area (between the top nav and
   the first sticky strip), full-bleed and responsive. Absolute positioning
   (not grid-row:2) frees the wrap from the 1800px content column so it spans
   the full hero width. The bottom stops at --atf-menu-h (the dynamic strip
   stack height set by interaction-engine.js) so the footage never bleeds
   under the docked strips — matching the prototype's
   height: calc(100vh - 2*strip-h - gap). z-index:1 sits it just above the
   .hero-bg scene fallback (z-index:0); see "Layering Restoration" below. */
:is(.home-page, .le-template-category, .le-template-article) .parallax-hero__bg-video-wrap {
  position: absolute !important;
  top: 0 !important; /* bleed under the translucent menu; matches .hero-bg scene */
  left: 0 !important;
  right: 0 !important;
  bottom: var(--atf-menu-h, 0px) !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
  z-index: 1 !important;
}
/* Scene fallback fills the same splash band so it shows through whenever the
   video is absent/not-yet-ready (the <video> stays opacity:0 until canplay). */
:is(.home-page, .le-template-category, .le-template-article) .hero-bg {
  bottom: var(--atf-menu-h, 0px) !important;
}
/* The tint shipped position:static (height:0) so it never overlaid the scene —
   that's why the light-theme cream wash couldn't lighten the hero. Make it a
   real full-bleed overlay clipped inside .hero-bg, painted above the SVG. */
:is(.home-page, .le-template-category, .le-template-article) .hero-tint {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.parallax-hero__bg-video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: cover !important;
}

/* Force hero content into the second row (splash space) and center it */
:is(.home-page, .le-template-category, .le-template-article) .parallax-hero__content {
  grid-row: 2 !important;
  grid-column: 1 !important;
  position: relative !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 40px !important;
  height: 100% !important;
}

/* Sticky stacking adjustments for 100vh fold */
.home-page .block-wrapper--parallax-hero-block {
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
}


/* Interior Category Hero - 2 Column Editorial Layout.
   Side-by-side (text | diagram) kicks in AS SOON AS the width allows it — at
   901px, not only at desktop 1101px (matched by the <=900 stacking block). The
   gutter shrinks at narrower widths so the two columns aren't cramped. */
@media (min-width: 901px) {
  :is(.le-template-category, .le-template-article) .parallax-hero.le-cover {
    grid-template-columns: 1.05fr 0.95fr !important;   /* prototype ratio (was 1.2/1) */
    /* justify-items:center pushed the text toward col-1's centre (a left gap) while
       the diagram sat at col-2's right → the whole grid read ~90px right-shifted
       ("crooked, left padding"). stretch makes each column FILL its track (text
       left-aligned, diagram in col-2) so the foreground spans the grid symmetrically. */
    justify-items: stretch !important;
    /* Center the FOREGROUND within --le-abf-max (1280) like the prototype; the cover
       itself stays full-bleed so the scene/crosshatch bg bleeds edge-to-edge. */
    padding: 0 var(--le-abf-pad-x) !important;
    gap: clamp(32px, 4vw, 56px) !important;             /* prototype gap (56px max) */
  }

  /* Splash row-2 centring is CATEGORY-only (its cover is a 100vh splash). The
     ARTICLE cover is now a compact top-aligned header, so its text + diagram stay
     in row 1 (side-by-side) — do NOT force them to row 2. */
  .le-template-category .parallax-hero__content,
  .le-template-category .le-cover .le-cover-text,
  .le-template-category .le-diagram {
    grid-row: 2 !important; /* Center strictly in the splash area below the nav (category) */
  }
  /* The ARTICLE cover's text column is .le-cover-text (the CATEGORY cover uses
     .parallax-hero__content). Without the line above, the article text stayed in
     row 1 while the diagram was forced to row 2 → they STACKED (text top, diagram
     stranded below, right column empty). Pinning .le-cover-text to row 2 too puts
     text (col 1) + diagram (col 2) side-by-side, matching the category cover and
     the baseline prototype's 2-column editorial hero. Scoped to article only. */
  .le-template-article .le-cover .le-cover-text {
    align-self: start !important;   /* compact header: top-aligned, not splash-centred */
    text-align: left !important;
  }

  :is(.le-template-category, .le-template-article) .parallax-hero__content {
    margin-top: 0 !important;
    height: auto !important;
    text-align: left !important;
    align-items: flex-start !important;
    padding: 0 !important;
  }

  :is(.le-template-category, .le-template-article) .le-cover-h1 {
    margin-left: 0 !important;
    text-align: left !important;
  }

  :is(.le-template-category, .le-template-article) .parallax-hero__lede {
    margin-left: 0 !important;
    text-align: left !important;
  }

  :is(.le-template-category, .le-template-article) .le-diagram {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 !important;
    animation: none !important;
  }
}

@keyframes le-diagram-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* Scroll Indicator - Bottom Fold UX */
.le-cover-scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 20;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.le-cover:hover .le-cover-scroll-indicator {
  opacity: 1;
}

.le-cover-scroll-indicator .label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brand-accent, #90d5ff);
}

.le-cover-scroll-indicator .line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--brand-accent, #90d5ff) 0%, transparent 100%);
  position: relative;
  overflow: hidden;
}

.le-cover-scroll-indicator .line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  animation: le-scroll-line 2s cubic-bezier(0.76, 0, 0.3, 1) infinite;
}

@keyframes le-scroll-line {
  0% { transform: translateY(-100%); }
  50%, 100% { transform: translateY(100%); }
}

:root[data-theme="light"] .le-cover-scroll-indicator .label {
  color: var(--brand-primary, #003366);
}

:root[data-theme="light"] .le-cover-scroll-indicator .line {
  background: linear-gradient(180deg, var(--brand-primary, #003366) 0%, transparent 100%);
}

/* Home page content also stays in the splash row */
.home-page .parallax-hero__content {
  grid-row: 2 !important;
  grid-column: 1 / -1 !important; /* Full width on home */
}

/* Hero Content - Wider & Comfortable Fit */
:is(.home-page, .le-template-category, .le-template-article) .parallax-hero__content {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  max-width: 1800px !important;
  margin: 0 auto !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 40px !important;

  /* Strictly bound in Row 2 splash area */
  height: auto !important;
  min-height: 0 !important;
}

/* Home Page: centre the hero copy in the band between the nav (top) and the docked
   strip (bottom) — NOT the viewport bottom. The bottom boundary of that band is the
   strip overlap = --atf-menu-h (currently measured at ~180px desktop). The old
   14vh fallback undershot the strip stack before JS wrote --atf-menu-h, then
   the hero recentered and produced desktop CLS. Keep the no-JS desktop fallback
   at the measured two-strip stack height; mobile has its own override below. */
.home-page .parallax-hero__content {
  padding-bottom: min(max(var(--atf-menu-h, 180px), 180px), 24vh) !important;
}

/* Layering Restoration — explicit hero stack (the hero is an isolated stacking
   context via isolation:isolate, so these z-indexes are self-contained):
     0  .hero-bg ............ SVG atmospheric scene (video fallback)
     1  .bg-video-wrap ...... footage, covers the scene when present
     3  .le-parallax-layer
     4  .animation-container . HVAC motifs (fan/thermostat/coil) — over both
    10  .parallax-hero__content (text, set elsewhere)
   The motifs sit above the video/scene so they read over the service artwork
   rather than being painted under the footage. */
:is(.home-page, .le-template-category, .le-template-article) .parallax-hero__bg-video-wrap { z-index: 1 !important; }
:is(.home-page, .le-template-category, .le-template-article) .parallax-hero__bg-video-scrim { z-index: 1 !important; }
/* Motifs over the video/scene is a HOME need. On internal category/article
   pages the animation-container holds the hvac-scene fallback, which must stay
   BELOW the editorial .le-diagram (z-index:3) — so keep those at z-index:0. */
.home-page .parallax-hero__animation-container { z-index: 4 !important; }
:is(.le-template-category, .le-template-article) .parallax-hero__animation-container { z-index: 0 !important; }
:is(.home-page, .le-template-category, .le-template-article) .le-parallax-layer { z-index: 3 !important; }

/* ── Hero backdrop layering (HOME) — AC1 ──────────────────────────────────
   Hero stack back→front: scene|video (z0/1) → motifs (z4) →
   text (z10).
   The SVG atmospheric scene (and the video, when a video_url is set) is the
   always-present backdrop; the video and scene share the identical cover box
   (top:var(--nav-h) → bottom:var(--atf-menu-h)) so swapping them causes no shift. */
/* Parallax image edge feather: dissolve each sitewide page-background wave image's rectangular
   edges fully to transparency over a GENEROUS, viewport-scaled distance (22% per axis,
   ~315px at desktop / scales down responsively) on all four sides. The two intersecting
   linear gradients make each corner the product of both fades, so the four corners
   dissolve as smoothly as the sides — no hard seam or corner line. The center 56% stays
   fully opaque so the waves remain present. (Was a hard 32px band that read as a sharp
   edge.) */
.coastal-page-bg__layer img,
.coastal-page-bg:not(.coastal-page-bg--internal) .coastal-page-bg__svg {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-composite: intersect;
}
/* Hero Combo Pill */
.hero-combo-pill {
  display: flex;
  width: auto;
  min-width: 360px;
  background: rgba(10, 30, 60, 0.45);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  will-change: transform;
  border: 1px solid rgba(140, 220, 255, 0.25);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  margin-top: 2rem;
}

.hero-combo-pill__half {
  flex: 1;
  padding: 14px 22px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  white-space: nowrap;
  gap: 10px;
}

.hero-combo-pill__icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.hero-combo-pill__half--schedule {
  background: linear-gradient(135deg, rgba(140, 220, 255, 0.25), rgba(140, 220, 255, 0.1));
  border-right: 1px solid rgba(140, 220, 255, 0.2);
}

.hero-combo-pill__half:hover {
  background: rgba(140, 220, 255, 0.35);
  color: #fff !important;
  transform: translateY(0);
}

@media (max-width: 767px) {
  :is(.home-page, .le-template-category, .le-template-article) .parallax-hero__content {
    margin-top: var(--nav-h, 68px) !important;
    height: calc(100vh - var(--nav-h, 68px) - var(--atf-menu-h, 174px)) !important;
    padding: 0 20px !important;
    justify-content: center !important; /* Centered on mobile too */
    padding-bottom: 0 !important;
  }
  /* HOME only: pin the copy box to the top of grid row 2 (which starts at the nav
     bottom). Its height is the band height (100vh − nav − strip), so the box is
     [nav → nav+band] and the flex-centred copy reads centred between the nav and the
     docked strip — NOT parked ~117px low, where the grid's align-items:center had it
     centring the box in the full row-2 [nav → viewport-bottom]. Category/article keep
     their existing centring. */
  .home-page .parallax-hero__content {
    align-self: start !important;
    margin-top: 0 !important;
  }
  .hero-combo-pill {
    width: 90vw;
    min-width: 0;
  }
  .hero-combo-pill__half {
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: 0.08em;
  }
}

/* :is(.home-page, .le-template-category, .le-template-article) .le-crumbs { display: none !important; } */

:is(.home-page, .le-template-category, .le-template-article) .parallax-hero__eyebrow {
  font-size: clamp(12px, 1.8vh, 16px) !important;
  margin-bottom: 1.2vh !important;
  letter-spacing: 0.20em !important;
  opacity: 0.9;
}

:is(.home-page, .le-template-category, .le-template-article) .le-cover-h1 {
  font-size: var(--hero-text-driver) !important;
  line-height: 0.92 !important; /* Slightly tighter line-height for increased size */
  margin: 0 auto 1.8vh !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 20px rgba(0,0,0,0.5) !important;
  width: 100% !important;
  max-width: none !important;
}

/* CATEGORY + ARTICLE cover headline → PROTOTYPE PARITY. The shared rule above renders
   it giant vh-scaled bold UPPERCASE, which wraps to 6-7 lines and pushes the index
   below the fold (breaks the ATF). The article-services / category-areas prototype
   uses a refined Cormorant serif, title-case, weight 400, ~80px (width-capped, NOT
   vh-scaled so tall viewports don't blow it up). Scoped to interior role pages ONLY —
   the HOME hero keeps its own bold treatment (do not clobber shared styles). Shadow =
   the home content/post-area treatment (--le-home-outline-soft), not the heavy glow. */
body.cb-role-internal :is(.le-template-category, .le-template-article) .le-cover-h1 {
  font-family: 'Cormorant Garamond', var(--font-display-serif, serif) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  font-size: clamp(40px, 5vw, 72px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 1.4vh !important;
  text-shadow: var(--le-home-outline-soft) !important;
  -webkit-text-stroke: 0 !important;       /* kill the home-hero stroke on interior headline */
  paint-order: normal !important;
}
/* ABF Hero Paragraph Lede: Softened outline with enhanced deep shadow contrast */
:is(.home-page, .le-template-category, .le-template-article, .le) :is(.parallax-hero__lede, .le-cover .lede, .hero-block p) {
  paint-order: stroke fill !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  opacity: 1 !important;
}

:root[data-theme="dark"] :is(.home-page, .le-template-category, .le-template-article, .le) :is(.parallax-hero__lede, .le-cover .lede, .hero-block p),
.le[data-theme="dark"] :is(.parallax-hero__lede, .le-cover .lede, .hero-block p) {
  color: #ffffff !important;
  -webkit-text-stroke: 3.5px rgba(4, 12, 26, 0.92) !important;
  text-shadow:
    0 0 6px rgba(4, 12, 26, 0.95),
    0 2px 12px rgba(4, 12, 26, 0.85),
    0 4px 20px rgba(0, 4, 14, 0.75),
    0 8px 30px rgba(0, 0, 0, 0.65) !important;
}

:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article, .le) :is(.parallax-hero__lede, .le-cover .lede, .hero-block p),
.le[data-theme="light"] :is(.parallax-hero__lede, .le-cover .lede, .hero-block p) {
  color: #0e2038 !important;
  -webkit-text-stroke: 3.5px rgba(255, 255, 255, 0.92) !important;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.98),
    0 2px 10px rgba(255, 255, 255, 0.85),
    0 4px 16px rgba(10, 30, 60, 0.38),
    0 8px 24px rgba(10, 30, 60, 0.20) !important;
}

/* Preserve stylized EM for both themes.
   :root prefix raises specificity to (0,2,2) to beat the blocks.css wildcard
   :root[data-theme] .home-page * and .le-template-* * rules (both at (0,2,1))
   that inject a cream text-shadow and wash out background-clip:text gradients. */
:root :is(.home-page, .le-template-category, .le-template-article) .le-cover-h1 em {
  font-family: var(--font-display-serif, serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: none !important;
  /* Brand LOGO gradient (TAG-20260624-HERO-EM-LOGO) — Coastal Breeze logo palette:
     teal #1B7E8E, gold #C9A24A, navy #0E2C4F. DARK = teal→gold on night hero. */
  background: linear-gradient(105deg, #2C97A8 0%, #86CEC9 40%, #D6AE55 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  filter:
    drop-shadow(0 0 0.6px rgb(0, 0, 0))
    drop-shadow(0 1px 0 rgb(0, 0, 0))
    drop-shadow(1px 0 0 rgb(0, 0, 0))
    drop-shadow(0 -1px 0 rgb(0, 0, 0))
    drop-shadow(-1px 0 0 rgb(0, 0, 0)) !important;
  line-height: 1.12 !important;
  padding-bottom: 0.05em !important;
  overflow: visible !important;
  display: inline-block !important;
}

:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .le-cover-h1 em {
  /* Full navy → teal → gold logo sweep on cream paper. Specificity (0,3,1) beats
     blocks.css light wildcard (0,2,1). */
  background: linear-gradient(105deg, #0E2C4F 0%, #1B7E8E 45%, #A8801F 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  filter:
    drop-shadow(0 0 0.6px rgb(255, 255, 255))
    drop-shadow(0 1px 0 rgb(255, 255, 255))
    drop-shadow(1px 0 0 rgb(255, 255, 255))
    drop-shadow(0 -1px 0 rgb(255, 255, 255))
    drop-shadow(-1px 0 0 rgb(255, 255, 255)) !important;
}

:is(.home-page, .le-template-category, .le-template-article) .parallax-hero__lede {
  font-size: clamp(16px, 2.4vh, 22px) !important;
  max-width: 52ch !important;
  margin: 0 auto !important;
  line-height: 1.4 !important;
  opacity: 0.9;
}

:is(.home-page, .le-template-category, .le-template-article) .hero-actions {
  margin-top: clamp(10px, 2.5vh, 25px) !important;
}

:is(.home-page, .le-template-category, .le-template-article) .trust-strip {
  margin-top: clamp(10px, 3.5vh, 35px) !important;
}

/* Light Theme Finish */
/* Hero container/tint stay transparent in BOTH themes; the scene SVG provides
   the backdrop (see "Hero backdrop layering (HOME)" above). */
:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .hero-bg { background: transparent !important; }
:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .hero-tint {
  background: transparent !important;
}
/* The scene SVG is a hard-coded DARK night scene. In light theme it is PRESENT
   (per AC1) but faded to a faint texture so the cream waves dominate and the dark
   hero text stays legible — it reads as a subtle coastal backdrop, not a dark slab. */
:root[data-theme="light"] .home-page .parallax-hero .hero-svg { opacity: 0.07 !important; }
/* The blueprint shoreline scene supersedes that: it is theme-aware rather than
   hard-coded dark (day sky stops plus the prototype's own .scene.light-mode
   palette), so crushing it to 7% only greys it out. Legibility is handled by
   the scene's own quartz-white sand under the copy instead. */
:root[data-theme="light"] .home-page .parallax-hero .hero-blueprint-scene .hero-svg { opacity: 1 !important; }
/* The video scrim is a DARK gradient (rgba(2,6,15,0.72)) for darkening footage
   in dark theme. With z-index:1 over the light hero-bg it turned the whole
   splash band muddy grey in light theme. The cream .hero-tint already supplies
   any wash light theme needs, so reduce the scrim to a faint cream so the hero
   reads clean and light (works with or without a video behind it). */
:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .parallax-hero__bg-video-scrim {
  background: linear-gradient(135deg, rgba(247, 249, 252, 0.30) 0%, rgba(247, 249, 252, 0.12) 60%, rgba(247, 249, 252, 0.30) 100%) !important;
}
:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .le-cover-h1 {
  /* Navy on cream is already high-contrast — the old 24px+40px WHITE glow read as
     a washed-out halo ("whitewashed / horrible coloring"). Replace with a clean,
     subtle dark depth drop (mirrors the dark theme's soft-drop intent). */
  text-shadow: 0 2px 12px rgba(10, 30, 60, 0.16) !important;
  color: #002d5a !important; /* Slightly deeper for contrast */
}
:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .parallax-hero__lede {
  color: #1a2a3a !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 4px rgba(10, 30, 60, 0.12) !important;
}
/* The hero eyebrow renders as .le-figure-tag (see parallax-hero-block.htm),
   not .parallax-hero__eyebrow — so the light override never landed and the
   eyebrow kept its dark-theme slate color + dark shadow. Target both. */
:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .parallax-hero__eyebrow,
:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .le-figure-tag {
  color: #005a9e !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 2px 10px rgba(255,255,255,0.7) !important;
}

/* Light Theme Action Buttons Refinement */
:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .hero-actions .btn-secondary {
  background: #003366 !important;
  color: #FFF !important;
  border-color: #003366 !important;
  box-shadow: 0 4px 14px rgba(0, 51, 102, 0.2) !important;
}

:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .hero-actions .btn-ghost {
  border-color: rgba(0, 51, 102, 0.4) !important;
  color: #003366 !important;
  background: rgba(255, 255, 255, 0.3) !important;
}

:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .trust-strip {
  filter: grayscale(1) invert(1) brightness(0.2);
  opacity: 0.6;
}

/* ── Luxe-up congruence: home credentials line (#home-post-area [data-block-type="headline-block"]) ────────────────
   The trust tokens read better as a continuous credential MASTHEAD:
   tighter rhythm, no filled icons, keep the letter-spaced caps +
   hairline separators (mirrors the interior "VOLUME I" / "PREPARED BY" eyebrow
   language). content-templates loads after blocks.css → wins at equal specificity. */
#home-post-area [data-block-type="headline-block"] .headline-block__trust-token {
  padding: 6px 18px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.2em !important;
}
#home-post-area [data-block-type="headline-block"] .headline-block__trust-token::after {
  display: none !important;   /* drop the filled FA glyphs → pure-text masthead */
}
[data-theme="light"] #home-post-area [data-block-type="headline-block"] .headline-block__trust-token {
  text-shadow: 0 1px 2px rgba(247, 244, 237, 0.55) !important; /* soften the cream halo */
}

/* Home service/area rows: drop the repeated generic "SERVICE" kicker (it echoes on
   every row, unlike the interior's meaningful per-entry tag). The roman numeral +
   Cormorant title carry the row; this reads as a clean magazine index. Home-only. */
.home-page .le-mag-rail .le-mag-tag {
  display: none !important;
}

/* Calm the lower-page gradient SEAMS (luxe-up pass) WITHOUT touching the hero: lay a
   faint parchment/navy veil over the post-hero content wrappers so the coastal waves
   read as a soft continuous wash behind one cohesive editorial column, instead of
   garish cyan↔coral rainbow bands between sections. The hero + docked strips sit
   BEFORE these wrappers in the DOM, so they keep their full coastal atmosphere. The
   veil paints behind the section content but over the fixed coastal-page-bg. */
.home-page #home-content-area,
.home-page #home-post-area {
  background: rgba(244, 239, 226, 0.28); /* light: parchment */
}
:root[data-theme="dark"] .home-page #home-content-area,
:root[data-theme="dark"] .home-page #home-post-area {
  background: rgba(2, 6, 15, 0.34); /* dark: Gulf-navy */
}

/* Navigation Strips Stacking (ABF Pull Logic) */
.category-strip, .home-post-strip {
  height: auto !important;
  min-height: var(--category-strip-h, 60px) !important;
  display: flex !important;
  flex-wrap: wrap !important; /* Restore multi-row on desktop */
}

.category-strip__items, .home-post-strip__items {
  max-height: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-wrap: nowrap !important; /* Default to nowrap for marquee */
}

@media (min-width: 1100px) {
  .category-strip__items, .home-post-strip__items {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }
  .category-strip__items::-webkit-scrollbar, .home-post-strip__items::-webkit-scrollbar {
    display: none !important;
  }
}

/* Compact strip range must match the JS overflow threshold in
   interaction-engine.js (winW < 1100). Previously this was 767px, leaving a
   768–1099px dead zone where the strip kept flex-wrap:wrap and stacked into a
   tall duplicated-looking menu. */
@media (max-width: 1099px) {
  .category-strip, .home-post-strip {
    flex-wrap: wrap !important; /* Stack on mobile */
  }
  .category-strip__items, .home-post-strip__items {
    flex-wrap: nowrap !important; /* Marquee needs nowrap */
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .category-strip__items::-webkit-scrollbar, .home-post-strip__items::-webkit-scrollbar {
    display: none !important;
  }
}

/* Strip positioning restored to the pre-overhaul pivot (5afdb6d6): wrapper is
   relative + pulls the strips into the hero; each strip sticks individually below
   the global nav. The post-overhaul fixed;top:100vh + sticky-wrapper config that
   fought the cumulative JS engine was reverted along with interaction-engine.js. */
.home-page .home-services-strip-wrapper {
  z-index: 36 !important;
  width: 100% !important;
  margin-top: var(--atf-menu-pull-buffer, -182px) !important;
}

.home-page .home-content-area {
  position: relative !important;
  z-index: 40 !important;
  margin-top: 0 !important; /* Reset, pull is handled by strip wrapper */
}

.home-page .home-content-area > :first-child {
  margin-top: 0 !important;
}

/* Shell Overrides for Sticky & Fluidity */
.le.le-shell {
  width: 100% !important;
  max-width: 100% !important;
  overflow: clip !important;
  isolation: auto !important; /* Allow sticky to escape if needed */
}

/* Constrain interior blocks to editorial width (matches prototype .le width) */
.le .block-wrapper:not(.block-wrapper--width-full) {
  max-width: 1280px;
  margin-inline: auto;
}

/* Menus 1 & 2 are STATIONARY — they scroll away with the page. Only menu 3
   reveals + sticks on scroll (see pages/home.htm section 7). menu1's services
   wrapper was sticky-pinned; make it relative so it scrolls away like menu2.
   Scoped to .home-page so non-home category-strip blocks keep blocks.css behavior. */
.home-page .home-services-strip-wrapper,
.home-page .block-wrapper--category-strip-block {
  position: relative !important;
  top: auto !important;
  z-index: 45 !important;
}
.category-strip--areas { position: relative !important; z-index: 44 !important; }
/* menu3 (#home-post-strip) intentionally has NO position override here — it uses
   its blocks.css base (position:fixed; top:var(--nav-h); translateY(-100%);
   opacity:0) and is revealed via .is-visible by the scroll script in home.htm. */

/* Ensure child strips don't fight the wrapper */
.category-strip, .le-place-strip {
  position: relative !important;
  top: 0 !important;
}

/* 3rd menu (on-this-page scrollspy) reveal is now driven by the scroll script
   in pages/home.htm (section 7): it toggles .is-visible once the areas strip
   (menu 2) scrolls above the viewport. The prior force-visible band-aid
   (opacity:1; transform:none) was removed so the blocks.css hidden default +
   .is-visible slide-in transition can actually run. */

/* #home-post-strip (menu 3, the on-this-page scrollspy bar) lost its base
   position:fixed + .is-visible reveal-transition rule when the home route was
   moved onto blocks-core.css — that trimmed stylesheet kept only the
   .home-post-strip color/theme overrides, not the layout rule (blocks.css
   L7498-7521). Without `position:fixed`, home.htm's scroll script still
   correctly toggles `.is-visible` (confirmed live), but the strip just sits
   in normal document flow and scrolls away instead of pinning below the nav. */
.home-post-strip {
  position: fixed !important;
  top: var(--nav-h, 136px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 34 !important;
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s ease !important;
}
.home-post-strip.is-visible {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ULTRA-SPECIFIC UNIFIED STRIP OVERRIDES (Win over blocks.css L2823) */
.has-coastal-page-bg .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section.category-strip:not(.hero-block):not(.video-hero-block):not(.parallax-hero),
.has-coastal-page-bg .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section.le-place-strip:not(.hero-block):not(.video-hero-block):not(.parallax-hero),
.category-strip, .le-place-strip, .le .le-place-strip, .home-post-strip {
  display: flex !important;
  align-items: center !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: rgba(2, 6, 15, 0.92) !important;
  backdrop-filter: var(--glass-blur-md) !important;
  -webkit-backdrop-filter: var(--glass-blur-md) !important;
  will-change: transform;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  min-height: 60px !important;
  height: auto !important;
}

:root[data-theme="light"] .category-strip,
:root[data-theme="light"] #home-post-strip,
body:root[data-theme="light"] .has-coastal-page-bg .builder-blocks > .block-wrapper > section.category-strip,
body:root[data-theme="light"] .has-coastal-page-bg .builder-blocks > .block-wrapper > section.le-place-strip {
  background: rgba(255, 255, 255, 0.92) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* ── Strip containers + edge feathering ─────────────────────────────────────
   User: "menus need have containers" + "feather all the edges ... container-level
   filters". Cap the docked-strip CONTENT at the 1280 site column (was 24px edge-to-
   edge) so the menus read as contained, and feather the in-flow strips' filtered bar
   top/bottom so the blur dissolves into the hero/content rather than butting a hard
   seam. (#home-post-strip is the fixed reveal-tabs bar — left unmasked; its overlap is
   handled separately.) */
@media (min-width: 1100px) {
  /* ABF in-page menus (Service/Area strips): keep the DELIBERATE
     original layout — label inline-left, items wrapping at the base ~24px padding. The
     earlier 1280 containment AND the later label-stacking/centring were both wrong
     (the menus are a specific, intentional design). Only the edge feather is kept here
     so the filtered bar blends into the hero/content. */
  .category-strip {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  }
}
/* ABF light strips: warm cream to match the page (was stark white rgba(255,255,255,.92)). */
:root[data-theme="light"] .category-strip {
  background: rgba(252, 247, 238, 0.92) !important;
}
/* The reveal-tabs strip (#home-post-strip, position:fixed) crossfades IN over the
   services strip; at 0.92 alpha the two text layers superimpose mid-transition and read
   as garbled / a "duplicate PLANS". Make it fully OPAQUE so only one strip is ever
   legible (it's the scrollspy bar — translucency buys nothing there). Both themes. */
.home-page #home-post-strip { background: rgb(2, 6, 15) !important; }
:root[data-theme="light"] .home-page #home-post-strip { background: rgb(252, 247, 238) !important; }
/* Mobile: the strips are a docked marquee over scrolling content — keep them fully
   OPAQUE (a translucent/feathered bar lets the section title beneath bleed through). */
@media (max-width: 1099px) {
  .category-strip, #home-post-strip {
    background: rgba(2, 6, 15, 1) !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }

  :root[data-theme="light"] .category-strip,
  :root[data-theme="light"] #home-post-strip {
    background: rgba(252, 247, 238, 1) !important;
  }
}

/* Interior place/category strips: drop the hard full-width border-top seam the unified
   home treatment painted; the .le artboard already contains them, so let them blend
   like the prototype's feathered strip. Warm the light place strip to match the page. */
body.cb-role-internal :is(.le-place-strip, .category-strip) {
  border-top-color: transparent !important;
}
:root[data-theme="light"] body.cb-role-internal .le-place-strip {
  background: rgba(252, 247, 238, 0.82) !important;
}

/* Item Link Unification */
.category-strip .category-strip__link,
.category-strip .category-strip__items a,
.home-post-strip .home-post-strip__items a {
  color: rgb(230, 242, 255) !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] .category-strip .category-strip__link,
:root[data-theme="light"] .category-strip .category-strip__items a,
:root[data-theme="light"] .home-post-strip .home-post-strip__items a {
  color: #003366 !important;
}

/* ANIMATED WAVE MOTIFS - visible calm drift (UX Polish Track) */
.coastal-page-bg__layer img,
.coastal-page-bg:not(.coastal-page-bg--internal) .coastal-page-bg__svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 240px;
    height: 108px;
    display: block;
    transform: translate(-50%, -50%) scale(12);
    transform-origin: center;
}

.coastal-page-bg__layer img {
    will-change: transform;
    transform-origin: center;
}
.coastal-page-bg__layer--blue img,
.coastal-page-bg:not(.coastal-page-bg--internal) .coastal-page-bg__layer--blue img {
    animation: coastal-wave-flow-blue 72s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate !important;
}
.coastal-page-bg__layer--red img,
.coastal-page-bg:not(.coastal-page-bg--internal) .coastal-page-bg__layer--red img {
    animation: coastal-wave-flow-red 84s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate !important;
}

@keyframes coastal-wave-flow-blue {
    0% { transform: translate3d(0, -0.2%, 0) scale(1.014); }
    100% { transform: translate3d(-3.2%, 0.2%, 0) scale(1.02); }
}

@keyframes coastal-wave-flow-red {
    0% { transform: translate3d(0, 0.18%, 0) scale(1.012); }
    100% { transform: translate3d(2.8%, -0.18%, 0) scale(1.018); }
}

/* Interior Category Bands - Subtle oscillation to match editorial look */
.coastal-page-bg--internal .coastal-page-bg__layer--blue img {
    animation: coastal-wave-flow-blue-int 180s ease-in-out infinite alternate !important;
}
.coastal-page-bg--internal .coastal-page-bg__layer--red img {
    animation: coastal-wave-flow-red-int 200s ease-in-out infinite alternate !important;
}

@media (max-width: 768px) {
    .coastal-page-bg__band--2,
    .coastal-page-bg__band--3 {
        display: none !important;
    }
}

@keyframes coastal-wave-flow-blue-int {
    0% { transform: translateX(0.5%) scale(1.01); }
    100% { transform: translateX(-0.5%) scale(1.01); }
}

@keyframes coastal-wave-flow-red-int {
    0% { transform: translateX(-0.5%) scale(1.01); }
    100% { transform: translateX(0.5%) scale(1.01); }
}

/* Headline Polish - Gradient Italic Emphasis */
:is(.parallax-hero__headline, .le-head h1, .le-cover h1) em {
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  /* Brand LOGO gradient — Coastal Breeze teal → gold (TAG-20260624-HERO-EM-LOGO).
     Logo palette: teal #1B7E8E, gold #C9A24A, navy #0E2C4F. On the dark hero the
     navy would vanish, so dark uses the two luminous accents (teal→gold), lifted
     just enough to read; the soft mid-stop keeps the blend from muddying to olive. */
  background: linear-gradient(105deg, #2C97A8 0%, #86CEC9 40%, #D6AE55 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "swsh" 1;
}

:root[data-theme="light"] :is(.parallax-hero__headline, .le-head h1, .le-cover h1) em {
  /* On cream the deeper logo colors all read, so use the full navy → teal → gold
     logo sweep (TAG-20260624-HERO-EM-LOGO). */
  background: linear-gradient(105deg, #0E2C4F 0%, #1B7E8E 45%, #A8801F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* RESPONSIVE COMPACT STRIP MENUS
   Range matches the JS overflow threshold (winW < 1100) so tablet/landscape get
   the same stable single-line swipe row as phones — no wrapping duplication. */
@media (max-width: 1099px) {
  body .category-strip, body #home-post-strip {
    display: block !important; /* Switch to block to prevent flex-width blowout */
    text-align: center !important;
    padding: 8px 0 !important;
    min-height: auto !important;
    /* Clip the marquee track (.category-strip__items is width:max-content, ~3500px)
       to the viewport so it scrolls in place instead of overflowing the document
       and creating horizontal page scroll on phones/tablets. */
    overflow: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body .category-strip__items, body #home-post-strip .home-post-strip__items {
    max-height: 60px !important;
    overflow-y: hidden !important;
    /* width: max-content is set below for active marquee; this container
       will naturally overflow the block parent without shifting the label. */
  }

  body .category-strip__label, body .home-post-strip__label, body .le-nav--secondary .le-nav-label {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 6px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    color: rgb(230, 242, 255) !important;
    border-right: none !important;
    margin-bottom: 6px !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    text-shadow: 0 1px 4px rgba(0, 10, 30, 0.95) !important;
    flex-shrink: 0 !important; /* Prevent label from being crushed */
    position: relative !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
  }

  :root[data-theme="light"] body .category-strip__label,
  :root[data-theme="light"] body .home-post-strip__label { color: #02060F !important; text-shadow: none !important; }

  /* Move the hero bottom line to sit exactly above the navigation strips,
     adding 1px overlap to prevent subpixel hairline gaps. */
  .home-page .parallax-hero::after {
    bottom: calc(var(--atf-menu-h, 0px) - 1px) !important;
    z-index: 40 !important; /* Above waves, below strips */
    transition: bottom 0.3s ease-out;
    pointer-events: none;
  }

  .category-strip__items, .home-post-strip__items {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important; /* Allow internal overflow for scrollLeft */
    margin: 0 !important;
    padding: 6px 0 !important;
    justify-content: flex-start !important; /* Marquee must start at left for smooth loop */
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    cursor: grab;
  }
  .category-strip__items:active, .home-post-strip__items:active {
    cursor: grabbing;
  }
  /* Set by the mouse drag-to-scroll handler in interaction-engine.js — blocks
     text selection from fighting the drag while it's in progress. */
  .category-strip__items.is-dragging, .home-post-strip__items.is-dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
  }
  .category-strip__items::-webkit-scrollbar, 
  .home-post-strip__items::-webkit-scrollbar,
  .le-nav-links::-webkit-scrollbar {
    display: none !important;
  }

  /* Fallback: Static centered row if not active marquee */
  body .category-strip__items:not([data-marquee-active="true"]),
  body #home-post-strip .home-post-strip__items:not([data-marquee-active="true"]) {
    display: flex !important;
    flex-wrap: nowrap; /* No !important: allow JS to toggle for measurement */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    justify-content: center !important;
    gap: 8px 16px !important;
    scrollbar-width: none;
  }
  body .category-strip__items:not([data-marquee-active="true"])::-webkit-scrollbar {
    display: none !important;
  }
  .le-nav--secondary .le-nav-actions {
    display: none !important; /* Hide burger/actions if it's a marquee */
  }

  /* ── In-page section nav: single-row swipeable scroll strip ───────────────
     Below the desktop breakpoint the "On this page" links used to wrap into a
     multi-row block ~235-320px tall (sprawling/sloppy on phones). Collapse to
     one swipeable row — the same idiom the home category/post strips already
     use. Specificity matches the desktop wrap rule (0,3,1) and this block sits
     AFTER it in source, so it wins without !important specificity hacks. The
     bar's tapered edge mask fades the strip ends as a "more this way" cue; the
     scrollbar itself is hidden (rule above). */
  body.cb-role-internal .le-nav--secondary .le-nav-links,
  .le .le-nav--secondary .le-nav-links {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 2px 0 !important;
  }
  /* Items keep their intrinsic width and never shrink, so the row stays scrollable. */
  body.cb-role-internal .le-nav--secondary .le-nav-links li,
  .le .le-nav--secondary .le-nav-links li {
    flex: 0 0 auto !important;
  }
  /* Restore the ◆ separators — they read as a tidy "A ◆ B ◆ C" strip in-line. */
  body.cb-role-internal .le-nav--secondary .le-nav-links li + li::before,
  .le .le-nav--secondary .le-nav-links li + li::before {
    display: inline-flex !important;
    margin: 0 9px !important;
  }
  /* First item clears the left edge-fade so its label starts fully legible. */
  body.cb-role-internal .le-nav--secondary .le-nav-links li:first-child,
  .le .le-nav--secondary .le-nav-links li:first-child {
    padding-left: 4px !important;
  }

  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .category-strip__item, .home-post-strip__items li {
    flex: 0 0 auto !important;
    padding: 0 15px !important;
  }
}

/* Reduced motion: compact strips are already manual swipe rows, but this also
   disables any legacy animation hooks and lets items wrap into a static centered
   row for users who request less movement. */
@media (prefers-reduced-motion: reduce) {
  /* .home-page-scoped selectors included so they beat the (0,2,0)
     ".home-page .category-strip__items { flex-wrap: nowrap }" marquee rule. */
  .category-strip__items, .home-post-strip__items,
  .home-page .category-strip__items, .home-page .home-post-strip__items {
    animation: none !important;
    flex-wrap: wrap !important;
    width: auto !important;
    overflow: visible !important;
    justify-content: center !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   HOME — LANDSCAPE PHONE / SHORT VIEWPORT (height ≤ 560 + landscape)
   Two width-only rules combined badly at short heights: the hero was rigidly
   100dvh AND the category strips were pulled UP into it by --atf-menu-pull-buffer
   (a height measured from the TALL stacked-column strips), so on a ~375px-tall
   landscape phone the strips rode up over and crushed the hero. Let the hero fit
   the band below the live nav and stop pulling the strips over it, while retaining
   the same stacked label + swipe-track pattern used by the mobile navigation.
   A short, wide phone has more horizontal room but remains a mobile interaction
   context; it must not flip into the desktop index treatment. */
@media (max-height: 560px) and (orientation: landscape) and (max-width: 1099px) {
  /* 1) Hero sizing begins south of nav bottom border and grows naturally for content;
        the category strip flows immediately beneath it. */
  .home-page .block-wrapper--parallax-hero-block { height: auto !important; min-height: 0 !important; }
  .home-page .parallax-hero.le-cover {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto !important;
    padding-top: var(--nav-h, 76px) !important;
    padding-bottom: 8px !important;
  }
  .home-page .parallax-hero__content {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .home-page .home-services-strip-wrapper { margin-top: 0 !important; }

  /* 2) Keep the established mobile stack and marquee/manual-swipe behavior,
        but tighten the non-interactive label rhythm for the reduced height. */
  .home-page .category-strip,
  .home-page .home-post-strip {
    display: block !important;
    text-align: center !important;
    padding: 2px 0 !important;
    min-height: 0 !important;
  }
  .home-page .category-strip__label,
  .home-page .home-post-strip__label {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 2px !important;
    padding: 2px 20px !important;
    line-height: 1.1 !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .home-page .category-strip__items,
  .home-page .home-post-strip__items {
    width: 100% !important;
    padding: 2px 0 4px !important;
  }
}

@media (min-width: 1100px) {
  .category-strip__items,
  .home-post-strip__items {
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    animation: none !important;
    padding: 0 !important;
  }
  .category-strip__items::-webkit-scrollbar,
  .home-post-strip__items::-webkit-scrollbar { display: none !important; }
}

/* Unified Dot Logic */
.category-strip__label::before, .home-post-strip__label::before,
/* Hero Motifs Field */
.le-cover-motif-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.le-cover-motif {
  position: absolute;
  width: min(300px, 40vw);
  height: min(300px, 40vw);
  opacity: 0.12;
  color: var(--brand-cyan, rgb(140, 220, 255));
  transition: opacity 1s ease;
}

/* Balanced distribution (was 2-right / 1-left → read as a lopsided/"crooked" hero,
   worst in light where these are 0.22 opacity + multiply). Now an even diagonal:
   top-left → mid-right → bottom-left, so neither side carries the visual weight. */
.le-cover-motif--1 { top: 13%; left: 6%; transform: rotate(-12deg); }
.le-cover-motif--2 { top: 42%; right: 7%; transform: rotate(15deg); }
.le-cover-motif--3 { bottom: 13%; left: 10%; width: 220px; height: 220px; transform: rotate(-5deg); }

[data-theme="light"] .le-cover-motif {
  opacity: 0.22;
  color: var(--brand-blue, rgb(0, 51, 102));
  mix-blend-mode: multiply;
}

[data-theme="light"] .hero-combo-pill {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 51, 102, 0.15);
  box-shadow: 0 12px 40px rgba(0, 51, 102, 0.12);
}

[data-theme="light"] .hero-combo-pill__half {
  color: var(--brand-blue, rgb(0, 51, 102)) !important;
}

[data-theme="light"] .hero-combo-pill__half--schedule {
  background: linear-gradient(135deg, rgba(0, 51, 102, 0.08), rgba(0, 51, 102, 0.03));
  border-right: 1px solid rgba(0, 51, 102, 0.1);
}

[data-theme="light"] .hero-combo-pill__half:hover {
  background: rgba(0, 51, 102, 0.08);
}

/* Magazine Grid Extensions */
.le-mag-grid-large {
  padding: 0 4vw !important;
}

/* Prototype-default density (internal.css 2043-2046): the live page had shipped the
   'spacious' tweak preset, inflating every value and adding ~2500px of height vs the
   prototype. Revert to the prototype's tight magazine-TOC rhythm (~3 entries/fold). */
.le-mag-grid-large .le-mag-card {
  grid-template-columns: 96px 1fr 200px !important;
  gap: 40px !important;
  padding: 44px clamp(16px, 1.5vw, 24px) 40px !important;
}


/* ── Consistent legibility shadow/outline on text OVER imagery ──────────────
   Eyebrows, breadcrumbs, figure tags and the trust strip sit over the hero
   scene / parallax waves, so they get the canonical soft drop (dark) and the
   white-halo lift (light) — the same treatment the hero headline + nav use —
   so they stay legible in BOTH themes. (Body copy on solid surfaces is
   intentionally left unshadowed.) content-templates.css loads last so these win. */
:is(.home-page, .le-template-category, .le-template-article) .trust-strip,
:is(.home-page, .le-template-category, .le-template-article) .parallax-hero__eyebrow,
:is(.home-page, .le-template-category, .le-template-article) .le-figure-tag,
:is(.home-page, .le-template-category, .le-template-article) .le-crumbs,
:is(.home-page, .le-template-category, .le-template-article) .le-crumbs a {
  text-shadow: 0 1px 3px rgba(0, 10, 30, 0.85);
}
:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .trust-strip,
:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .parallax-hero__eyebrow,
:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .le-figure-tag,
:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .le-crumbs,
:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .le-crumbs a {
  /* subtle dark depth (not a white drop) — consistent with the de-washed headline,
     keeps navy-on-cream legible without the whitewash halo */
  text-shadow: 0 1px 3px rgba(10, 30, 60, 0.14);
}
/* Light variant of the cyan-outline token (was dark-only; prototype Banner.html:1788). */
:root[data-theme="light"] {
  --brand-cyan-outline:
    0 1px 0 rgba(255, 255, 255, 0.95),
    0 -1px 0 rgba(255, 255, 255, 0.95),
    1px 0 0 rgba(255, 255, 255, 0.95),
    -1px 0 0 rgba(255, 255, 255, 0.95),
    0 2px 8px rgba(180, 165, 130, 0.45);
}

/* ── Interior (category/article) UNDER-FOLD density ─────────────────────────
   Post-hero sections had a cavernous 112px+112px padding (the "Large Gaps" rule
   below) PLUS a 40px inter-section margin — ~312px of dead space between section
   content, so the page read as disconnected floating bands. Tighten the MARGIN
   here and the PADDING at its source (below) so sections blend into one cohesive
   editorial column. Excludes the hero (+ video hero) — those keep their exact
   100vh geometry and must NOT get extra margin. Interior-only, both themes. */
body.cb-role-internal .builder-blocks > .block-wrapper:not(.block-wrapper--parallax-hero-block):not(.block-wrapper--video-hero-block) {
  margin-top: clamp(8px, 2vh, 20px) !important;
}

/* ── Category/interior background parallax ────────────────────────────────── */
/* Foul Fix: Raise contrast for footer utility links (Sitemap, Privacy) in Light theme.
   The previous --le-ink-faint was illegible on cream. */
:root[data-theme="light"] .site-footer__bottom-inner,
:root[data-theme="light"] .site-footer__creds li,
:root[data-theme="light"] .site-footer__bottom-links a {
  color: #1a2b3c !important;
  text-shadow: none !important;
}

/* Foul Fix: Marquee clipping. Expand the track height and fix the overflow mask
   to prevent descender clipping (e.g., 'g', 'j', 'p', 'q', 'y') in the nav marquee. */
.category-strip__items {
    padding: 10px 0 !important;
    overflow: visible !important;
}
.category-strip {
    overflow: hidden !important;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent) !important;
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent) !important;
}
.detailed-block {
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent) !important;
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent) !important;
}
/* …but NOT the interior spec strip. The bare `.detailed-block` edge-fade above was
   authored for the home carousel-style block; it leaked onto the interior
   "data-plate" spec strip (which carries both .detailed-block + .le-spec-block) and
   clipped its rounded panel surface — faded corners + banding bleeding off the
   edges = the wrecked look. The strip is a static 5-item plate, not a marquee, so
   exempt it. Its intended seam-blend already comes from the .le-spec background
   hairlines (prototype internal.css:851), not a mask. (TAG-20260621-SPEC-MASK) */
.detailed-block.le-spec-block {
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* Interior Page Alignment - editorial section rhythm. Tightened from the original
   cavernous clamp(4rem,8vw,7rem)=112px to ~40-68px so under-fold sections blend
   into one cohesive column instead of floating far apart (SLFG designer pass). */
body.cb-role-internal .builder-blocks > .block-wrapper:not(.block-wrapper--parallax-hero-block):not(.block-wrapper--video-hero-block) {
  padding-top: clamp(1.4rem, 2.8vw, 2.4rem) !important;
  padding-bottom: clamp(1.4rem, 2.8vw, 2.4rem) !important;
}
body.cb-role-internal .builder-blocks > .block-wrapper:first-child {
  padding-top: 0 !important;
}

/* Interior Editorial Grid Alignment */
@media (min-width: 1100px) {
  :is(.le-template-category, .le-template-article) .parallax-hero.le-cover .parallax-hero__content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
}

/* Full-viewport category folds keep the background at 100dvh, but the prototype's
   editorial foreground sits higher inside the fold. Lift only the category hero
   foreground; article headers and home keep their own rhythm. */
@media (min-width: 901px) {
  body.cb-role-internal .le-template-category .parallax-hero.le-cover .parallax-hero__content {
    transform: translateY(clamp(-72px, -7.5vh, -56px)) !important;
  }

  body.cb-role-internal .le-template-category .parallax-hero.le-cover .le-diagram {
    transform: translateY(clamp(-124px, -12vh, -88px)) !important;
  }
}
.le-mag-grid-large .le-mag-num {
  font-size: var(--fluid-h2, 40px) !important;
}

.le-mag-grid-large .le-mag-body h3 {
  font-size: var(--fluid-h3, 36px) !important;
  margin-bottom: 14px !important;
}

.le-mag-grid-large .le-mag-body > p {
  font-size: var(--fluid-lede, 20px) !important;
  max-width: 66ch !important;
}

.le-mag-mark {
  --motif-rotate: 0deg;
  --motif-scale: 1;
  --motif-hover-rotate: 6deg;
  --motif-hover-scale: 1.06;
  width: clamp(100px, 12vw, 150px);
  height: clamp(100px, 12vw, 150px);
  color: var(--brand-cyan-soft, rgb(140, 220, 255));
  opacity: 0.15;
  align-self: center;
  justify-self: end;
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%) rotate(var(--motif-rotate)) scale(var(--motif-scale));
  z-index: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, color 0.3s ease;
  pointer-events: none;
}

.le-mag-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

[data-theme="light"] .le-mag-mark {
  color: var(--brand-blue, rgb(0, 51, 102));
  opacity: 0.08;
}

.le-mag-mark--slot-1 {
  --motif-rotate: -7deg;
  --motif-scale: 0.92;
  --motif-hover-rotate: -1deg;
}
.le-mag-mark--slot-2 {
  --motif-rotate: 9deg;
  --motif-scale: 1.04;
  --motif-hover-rotate: 15deg;
}
.le-mag-mark--slot-3 {
  --motif-rotate: -13deg;
  --motif-scale: 0.86;
  --motif-hover-rotate: -7deg;
}
.le-mag-mark--slot-4 {
  --motif-rotate: 5deg;
  --motif-scale: 1.08;
  --motif-hover-rotate: 11deg;
}
.le-mag-mark--slot-5 {
  --motif-rotate: -2deg;
  --motif-scale: 0.98;
  --motif-hover-rotate: 4deg;
}
.le-mag-mark--slot-6 {
  --motif-rotate: 14deg;
  --motif-scale: 0.90;
  --motif-hover-rotate: 19deg;
}
.le-mag-mark--slot-7 {
  --motif-rotate: -18deg;
  --motif-scale: 1.02;
  --motif-hover-rotate: -12deg;
}

.le-mag-grid-large .le-mag-mark {
  width: 200px;
  height: 200px;
  position: relative;
  right: auto;
  top: auto;
  transform: rotate(var(--motif-rotate)) scale(var(--motif-scale));
  opacity: 0.72;
}

.le-mag-card:hover .le-mag-mark {
  transform: translateY(-50%) rotate(var(--motif-hover-rotate)) scale(var(--motif-hover-scale));
  opacity: 0.24;
}

.le-mag-grid-large .le-mag-card:hover .le-mag-mark {
  transform: rotate(var(--motif-hover-rotate)) scale(var(--motif-hover-scale));
  opacity: 0.9;
}

/* ──────────────────────────────────────────────────────────────────────────
   MOTIF SYSTEM — base + section/heading/deco families.
   Gemini emitted .le-section-motif / .le-heading-motif / .le-deco-motif /
   .le-heading-cluster / .le-seocopy-grill markup in every block partial
   (stats, faq, testimonials, paragraph, section-list, article) but never wrote
   the matching CSS, so the motif <svg> (class .le-motif, viewBox only, no
   intrinsic size) collapsed and the motifs were invisible sitewide. These rules
   complete that work, following the established .le-mag-mark / .le-cover-motif
   language (absolute, low-opacity, currentColor, theme-aware). All decorative
   layers are pointer-events:none + z-index:0 so they can never affect layout.
   ────────────────────────────────────────────────────────────────────────── */

/* Critical base: the macro's <svg class="le-motif"> has only a viewBox, so it
   needs explicit sizing to fill whatever container holds it. */
.le-motif { width: 100%; height: 100%; display: block; }

/* Interior/role pages are long-form EDITORIAL surfaces — every section must be
   visible immediately (prototype parity), never gated behind the home motif
   fade-on-scroll (.block-wrapper--motif-behavior-fade sets opacity:0 until an
   IntersectionObserver adds .is-in-view, which leaves whole sections blank on
   fast scroll / static capture). Scoped to interior so the HOME page keeps its
   fade-in reveal. Mirrors the existing .reveal-init force in prototype/internal.css. */
body.cb-role-internal .block-wrapper--motif-behavior-fade,
.le-template-category .block-wrapper--motif-behavior-fade,
.le-template-article .block-wrapper--motif-behavior-fade {
  opacity: 1 !important;
  transform: none !important;
}

/* Scoreboard / "Why Us" Grid Responsiveness */
.le-why-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
  justify-content: center !important;
}

.le-why-card {
  flex: 1 1 280px !important;
  max-width: 400px !important;
  border-left: 0 !important; /* removal of prototype vertical dividers on mobile/wrap */
}

@media (min-width: 768px) {
  .le-why-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
  }
  .le-why-card {
    border-left: 1px solid var(--le-hairline-mid) !important;
  }
  .le-why-card:first-child { border-left: 0 !important; }
}

/* Section-level decorative motif — large, faint, anchored to a corner, behind content */
.le-section-motif {
  position: absolute;
  width: clamp(200px, 30vw, 340px);
  height: clamp(200px, 30vw, 340px);
  color: var(--brand-cyan, rgb(140, 220, 255));
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.le-section-motif--outside { top: 8%; right: 4%; }
.le-section-motif--article-divider { top: auto; bottom: 0; left: 50%; transform: translateX(-50%); right: auto; }
[data-theme="light"] .le-section-motif { 
  color: var(--brand-primary, rgb(0, 51, 102)); 
  opacity: 0.18; 
  mix-blend-mode: multiply;
}

/* Heading cluster — lay the small motif beside its heading */
.le-heading-cluster {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.le-heading-motif {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.5em;
  height: 1.5em;
  color: var(--brand-cyan, rgb(140, 220, 255));
  opacity: 0.5;
}
[data-theme="light"] .le-heading-motif { color: var(--brand-primary, rgb(0, 51, 102)); opacity: 0.55; }

/* Deco motifs — dividers + article ornaments */
.le-deco-motif {
  position: absolute;
  width: 120px;
  height: 120px;
  color: var(--brand-cyan, rgb(140, 220, 255));
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}
.le-deco-motif--divider {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0.4rem auto 0;
  opacity: 0.4;
}
.le-deco-motif--article-a { top: 6%; left: 3%; }
.le-deco-motif--article-b { top: 44%; right: 4%; }
.le-deco-motif--article-c { bottom: 8%; left: 8%; }
[data-theme="light"] .le-deco-motif { 
  color: var(--brand-primary, rgb(0, 51, 102)); 
  opacity: 0.18; 
  mix-blend-mode: multiply;
}
[data-theme="light"] .le-deco-motif--divider { opacity: 0.45; }

/* SEO-copy grill — a faint technical line texture behind the closing copy block */
.le-seocopy-grill {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  background-image: repeating-linear-gradient(
    0deg, transparent 0, transparent 38px,
    rgba(140, 220, 255, 0.05) 38px, rgba(140, 220, 255, 0.05) 39px);
}
[data-theme="light"] .le-seocopy-grill {
  mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(
    0deg, transparent 0, transparent 38px,
    rgba(0, 51, 102, 0.08) 38px, rgba(0, 51, 102, 0.08) 39px);
}

@media (max-width: 1099px) {
  .le-mag-grid-large .le-mag-card {
    grid-template-columns: 80px 1fr !important;
    gap: 32px !important;
  }
}

@media (max-width: 600px) {
  .le-mag-grid-large .le-mag-card {
    grid-template-columns: 1fr !important;
  }
  .le-mag-grid-large .le-mag-rail {
    flex-direction: row !important;
    align-items: center !important;
  }
}

/* Luxury 30A SVG Bullets */
.category-strip--services .category-strip__item::before {
  content: "" !important;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.7;
}

.category-strip--areas .category-strip__item::before {
  content: "" !important;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.7;
}

/* Split Link Scheme */
.le-mag-card { position: relative; }

.le-mag-card-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.le-mag-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  z-index: 10;
}

.le-mag-split-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 999px;                         /* pill — matches the nav + article-cover schedule pill */
  background: var(--le-grad-warm) !important;    /* CORAL = the schedule identity (was off-palette blue) */
  color: rgb(38, 16, 6) !important;              /* dark ink on the light-coral DARK theme; light → white below */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 22px -10px rgba(160, 76, 50, 0.45);
  pointer-events: auto;
}

.le-mag-split-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(160, 76, 50, 0.55);
  filter: brightness(1.05);
}

.le-mag-card:hover .le-mag-arrow {
  color: var(--le-coral-deep, rgb(160, 76, 50));
}

@media (max-width: 600px) {
  .le-mag-actions {
    flex-direction: row-reverse;
    justify-content: flex-end;
    flex-wrap: wrap;          /* schedule pill + "read essay" link can't share one row on
                                small phones — wrap instead of overlapping. (TAG-20260622-RESP) */
    gap: 12px 16px;
  }
  .le-mag-split-cta {
    padding: 6px 14px;
    font-size: 10px;
  }
}
/* At the smallest widths the two actions can't fit side-by-side at all (217px card,
   ~240px combined) — stack them so the two tap targets never overlap. The arrow is
   position:absolute (internal.css), so it must drop back into flow to stack; the
   compound selector outranks `.le-mag-arrow` regardless of load order. */
@media (max-width: 400px) {
  .le-mag-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .le-mag-actions .le-mag-arrow {
    position: static;
    bottom: auto;
    right: auto;
  }
}

.category-strip__item::before, .home-post-strip__items li::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1em !important;
  animation: oscillate-divider 3s ease-in-out infinite !important;
  pointer-events: none !important;
  position: absolute !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: transparent !important;
}

.category-strip__label::before, .home-post-strip__label::before {
  left: 0 !important; margin-right: 10px !important; position: relative !important; transform: none !important; top: auto !important;
}

.category-strip__item::before, .home-post-strip__items li::before {
  left: calc(var(--menu-gap, 22px) / -2) !important;
}

/* Perf: animate ONLY color + opacity. The previous keyframes also pulsed
   filter: blur() and text-shadow on 30+ separator dots every frame — animating
   blur forces per-frame re-rasterization of each dot (a measurable continuous
   CPU/GPU sink at this many infinite instances), and the 0.5px blur pulse was
   imperceptible. The color/opacity twinkle reads identical. Lighter + snappier. */
@keyframes oscillate-divider {
  0%, 100% { color: var(--dot-low); opacity: 0.55; }
  50%      { color: var(--dot-high); opacity: 1; }
}
/* Honor reduced-motion: stop the 30+ infinite dot animations entirely, holding a
   sensible static state. Zero perpetual work for users/systems that opt out. */
@media (prefers-reduced-motion: reduce) {
  .category-strip__item::before,
  .home-post-strip__items li::before {
    animation: none !important;
    color: var(--dot-high) !important;
    opacity: 0.85 !important;
  }
}

.category-strip--services, .home-post-strip { --dot-low: rgb(230, 242, 255); --dot-high: #90d5ff; }
.category-strip--areas { --dot-low: rgb(255, 230, 210); --dot-high: #ff9070; }

:root[data-theme="light"] .category-strip--services,
:root[data-theme="light"] .home-post-strip { --dot-low: #003366; --dot-high: #0077be; }
:root[data-theme="light"] .category-strip--areas { --dot-low: #8b4513; --dot-high: #c36a3c; }

.category-strip__items a,
.home-post-strip .home-post-strip__items a {
  color: rgb(230, 242, 255) !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] .category-strip__items a,
:root[data-theme="light"] .home-post-strip .home-post-strip__items a {
  color: #003366 !important;
}

:root { --menu-gap: 22px; }
@media (max-width: 1099px) { :root { --menu-gap: 14px; } }

.category-strip__label, .home-post-strip__label {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 140px !important; /* Reduced for better fit */
  display: flex !important;
  align-items: center !important;
  padding: 8px 22px !important;
  line-height: 1.1 !important;
  font-size: 13px !important;
  color: rgb(230, 242, 255) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  position: relative;
}

/* Force same row on desktop (Label next to items), but allow items to wrap.
   SCOPED to desktop (>=1100px) on 2026-06-09: without the media query this row rule
   leaked onto mobile. When today's "Design Unification" genericized the mobile column
   rule (.home-page .category-strip -> .category-strip, dropping its specificity from
   (0,2,0) to (0,1,0)), this (0,1,0) row rule — being later in source — started winning
   on mobile, flipping the HOME strip from its pre-today column/marquee layout to a row
   where the eyebrow overlapped the scrolling track. Desktop keeps row; mobile (<1100)
   now correctly stays column+marquee, GLOBALLY (home + interior). */
@media (min-width: 1100px) {
  .category-strip, .home-post-strip {
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Label and items-container stay on same row */
  }
}

@media (min-width: 1100px) {
  .category-strip__items, .home-post-strip__items {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    align-items: center !important;
    gap: 0 var(--menu-gap, 22px) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .category-strip__items::-webkit-scrollbar,
  .home-post-strip__items::-webkit-scrollbar { display: none !important; }
}

.category-strip__item, .home-post-strip__items li {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.category-strip__link, .home-post-strip__items a {
  display: block !important;
  padding: 15px 0 !important;
  min-height: 44px !important;
  line-height: 1.1 !important;
  font-size: 13px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* ============================================================
   CONTACT FORM — REDESIGN (legibility + on-brand polish)
   ------------------------------------------------------------
   One polished quote form across every context + both themes.
   The editorial serif stays in the heading; the form itself is
   crisp glass inputs, on-brand service pill-toggles, and one
   confident gradient CTA. Overrides blocks.css (read-only) and
   the role-template .le-form rules from prototype/internal.css.
   Lives here, NOT in read-only blocks.css.
   ============================================================ */

/* 1 — Role-template layout fix: .le-form was a 2-col grid while its .le-row
   children are ALSO 2-col grids → a double-nested scramble with a dead void.
   Flow it vertically so rows stack cleanly like the standard form. */
.contact-cta__form.le-form {
    display: flex !important;
    flex-direction: column;
    gap: 1.25rem;
    max-width: none;
}

/* 2 — Inputs: legible glass in BOTH themes (was near-invisible navy-on-navy).
   background-color (not shorthand) preserves the select's dropdown-arrow image. */
.contact-cta__input,
.contact-cta__select,
.contact-cta__textarea,
.le-form .le-field input,
.le-form .le-field textarea,
.le-form .le-field select {
    background-color: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(160, 205, 255, 0.30) !important;
    border-radius: 10px !important;
    color: rgb(228, 241, 255) !important;
    font-family: 'Manrope', 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    font-style: normal !important;
    padding: 0.8rem 1rem !important;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important;
}
.contact-cta__input::placeholder,
.contact-cta__textarea::placeholder,
.le-form .le-field input::placeholder,
.le-form .le-field textarea::placeholder {
    color: rgba(182, 212, 246, 0.52) !important;
    font-style: normal !important;   /* kill the role serif-italic placeholder */
}
.contact-cta__input:focus,
.contact-cta__select:focus,
.contact-cta__textarea:focus,
.le-form .le-field input:focus,
.le-form .le-field textarea:focus,
.le-form .le-field select:focus {
    outline: none !important;
    border-color: rgba(140, 210, 255, 0.85) !important;
    background-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 0 0 3px rgba(120, 200, 255, 0.22) !important;
}
/* Light theme inputs (standard uses [data-theme] on root; role uses .le shell) */
[data-theme="light"] .contact-cta__input,
[data-theme="light"] .contact-cta__select,
[data-theme="light"] .contact-cta__textarea,
.le[data-theme="light"] .le-form .le-field input,
.le[data-theme="light"] .le-form .le-field textarea,
.le[data-theme="light"] .le-form .le-field select {
    background-color: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(20, 60, 110, 0.22) !important;
    color: #14304f !important;
}
[data-theme="light"] .contact-cta__input::placeholder,
[data-theme="light"] .contact-cta__textarea::placeholder,
.le[data-theme="light"] .le-form .le-field input::placeholder,
.le[data-theme="light"] .le-form .le-field textarea::placeholder {
    color: rgba(20, 60, 110, 0.42) !important;
}
[data-theme="light"] .contact-cta__input:focus,
[data-theme="light"] .contact-cta__select:focus,
[data-theme="light"] .contact-cta__textarea:focus,
.le[data-theme="light"] .le-form .le-field input:focus,
.le[data-theme="light"] .le-form .le-field textarea:focus,
.le[data-theme="light"] .le-form .le-field select:focus {
    border-color: rgba(40, 110, 190, 0.75) !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(60, 140, 220, 0.18) !important;
}

/* Unified Field Label Styling (100% Matching Home & Internal Forms) */
.contact-cta__label,
.le-field label,
.contact-form-block label {
    font-family: var(--font-body-coastal, 'Manrope', 'Inter', system-ui, -apple-system, sans-serif) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    color: rgba(220, 238, 255, 0.92) !important;
    margin-bottom: 0.4rem !important;
    display: inline-block !important;
}
[data-theme="light"] .contact-cta__label,
.le[data-theme="light"] .contact-cta__label,
[data-theme="light"] .le-field label {
    color: rgba(14, 38, 70, 0.92) !important;
}

/* 4 — Property location & Service selection full-width span */
.contact-cta__field--properties,
.contact-cta__field--services,
.contact-cta__field--message {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}
.contact-cta__address-wrap {
    position: relative !important;
    width: 100% !important;
}
.contact-cta__input--address {
    width: 100% !important;
    min-height: 46px !important;
    padding-right: 3rem !important;
    box-sizing: border-box !important;
}
.contact-cta__gps-btn {
    position: absolute !important;
    right: 0.75rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
}
.contact-cta__suggestions {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1050 !important;
    background: rgba(8, 20, 42, 0.96) !important;
    border: 1px solid rgba(190, 220, 250, 0.35) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(0, 10, 30, 0.75) !important;
    max-height: 240px !important;
    overflow-y: auto !important;
}
[data-theme="light"] .contact-cta__suggestions,
.le[data-theme="light"] .contact-cta__suggestions {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(20, 60, 110, 0.25) !important;
    box-shadow: 0 12px 32px rgba(20, 48, 79, 0.25) !important;
}
/* Maintenance Subselect Panel */
.contact-cta__maintenance-subselect {
    margin-top: 0.85rem !important;
    padding: 1rem 1.15rem !important;
    background: rgba(14, 38, 74, 0.55) !important;
    border: 1px solid rgba(140, 200, 255, 0.25) !important;
    border-left: 4px solid var(--brand-amber, #d3a951) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(8px) !important;
}
[data-theme="light"] .contact-cta__maintenance-subselect,
.le[data-theme="light"] .contact-cta__maintenance-subselect {
    background: rgba(245, 240, 228, 0.88) !important;
    border: 1px solid rgba(211, 169, 81, 0.4) !important;
    border-left: 4px solid #b88d32 !important;
}

.contact-cta__maintenance-subselect-title {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.65rem !important;
    display: block !important;
    color: var(--brand-amber, #edd57d) !important;
}

.contact-cta__radio-group,
.contact-cta__checkbox-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
    align-items: center !important;
    margin-top: 0.4rem !important;
}

/* Unified Pill Toggles for both Checkboxes and Radios */
:root :is(.contact-cta__checkbox-label, .contact-cta__radio-label) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    padding: 0.5rem 0.95rem !important;
    border: 1px solid rgba(160, 205, 255, 0.32) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(208, 230, 255, 0.92) !important;
    font-family: var(--font-body-coastal, 'Manrope', 'Inter', system-ui, -apple-system, sans-serif) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.18s ease-in-out !important;
    margin: 0 !important;
}

:root :is(.contact-cta__checkbox-label:hover, .contact-cta__radio-label:hover) {
    border-color: rgba(140, 210, 255, 0.75) !important;
    background: rgba(140, 200, 255, 0.14) !important;
    transform: translateY(-1px) !important;
}

:root :is(.contact-cta__checkbox-label input, .contact-cta__radio-label input) {
    accent-color: var(--brand-cyan, #8cdcff) !important;
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    cursor: pointer !important;
}

:root :is(.contact-cta__checkbox-label:has(input:checked), .contact-cta__radio-label:has(input:checked)) {
    background: linear-gradient(135deg, #356cc8, #224e98) !important;
    border-color: rgba(140, 200, 255, 0.85) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(34, 78, 152, 0.45) !important;
    font-weight: 600 !important;
}

/* The "Email + Service" row: the service pill group spans full width, leaving a
   dead half beside the email field. When a row carries the services group, stack
   its fields full-width so email and the pills each get a clean full row. */
.contact-cta__row:has(.contact-cta__field--services) > .contact-cta__field {
    grid-column: 1 / -1;
}
/* Light-theme pills */
[data-theme="light"] .contact-cta__checkbox-label,
.le[data-theme="light"] .contact-cta__checkbox-label {
    border-color: rgba(20, 60, 110, 0.22);
    background: rgba(255, 255, 255, 0.62);
    color: #2a3a50 !important;
}
[data-theme="light"] .contact-cta__checkbox-label input[type="checkbox"],
.le[data-theme="light"] .contact-cta__checkbox-label input[type="checkbox"] {
    border-color: rgba(20, 60, 110, 0.42);
}
[data-theme="light"] .contact-cta__checkbox-label:has(input:checked),
.le[data-theme="light"] .contact-cta__checkbox-label:has(input:checked) {
    /* must re-assert the gradient: the light base-pill background is more specific
       than the generic :has() rule, so without this the checked pill stayed light
       and the white label vanished. */
    background: linear-gradient(135deg, #356cc8, #224e98) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* 5 — Primary CTA: more confident in both contexts/themes. */
.contact-cta__submit {
    font-size: 0.82rem !important;
    padding: 0.95rem 2.1rem !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 20px rgba(60, 140, 220, 0.32) !important;
}
.contact-cta__submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(80, 160, 240, 0.45) !important;
    filter: brightness(1.05);
}

/* 6 — Microcopy + hints: lift the near-invisible contrast. */
.contact-cta__disclaimer { color: rgba(184, 214, 246, 0.45) !important; }
.contact-cta__privacy-note { color: rgba(190, 218, 250, 0.6) !important; }
.contact-cta__field-hint { color: rgba(176, 208, 244, 0.55) !important; font-style: normal !important; }
[data-theme="light"] .contact-cta__disclaimer { color: rgba(20, 60, 110, 0.5) !important; }
[data-theme="light"] .contact-cta__privacy-note { color: rgba(20, 60, 110, 0.62) !important; }
[data-theme="light"] .contact-cta__field-hint,
.le[data-theme="light"] .contact-cta__field-hint {
  color: var(--le-ink-mute, #52627c) !important;
}

/* ============================================================
   SERVICE "SCHEDULE" DEEP-LINK BUTTONS (category + article)
   ------------------------------------------------------------
   Buttons that deep-link to the contact form and pre-select the
   service via data-contact-prefill. Category cards lead with a
   primary "Schedule service" CTA + a demoted "Read more"; the
   article cover reuses the .le-pill.primary header pill.
   Lives here, NOT in read-only blocks.css.
   ============================================================ */
/* Category listing (role-template service cards): "Schedule service" as a
   prominent primary action beside the quieter "Read essay" arrow. */
.le-mag-split-cta--primary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    background: var(--le-grad-warm) !important;   /* coral (was blue #3c78dc → off-palette) */
    color: rgb(38, 16, 6) !important;             /* dark ink (dark theme); light → white below */
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1px solid rgba(160, 76, 50, 0.35);
    box-shadow: 0 8px 22px -10px rgba(160, 76, 50, 0.45);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.le-mag-split-cta--primary:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -10px rgba(160, 76, 50, 0.55);
}
/* Light theme: deep coral needs white ink (dark theme uses light coral + dark ink). */
:root[data-theme="light"] .le-mag-split-cta,
:root[data-theme="light"] .le-mag-split-cta--primary {
    color: #fff !important;
}
/* HOME: the coral --le-grad-warm token is .le-scoped (interior only), so on .home-page
   the base rule's `background: var(--le-grad-warm)` resolved to nothing. Provide the
   coral explicitly here, theme-aware (light coral on dark, deep coral on cream). */
.home-page .le-mag-split-cta {
    background: linear-gradient(110deg, rgb(255, 200, 175) 0%, rgb(255, 160, 130) 100%) !important;
}
:root[data-theme="light"] .home-page .le-mag-split-cta {
    background: linear-gradient(110deg, rgb(194, 104, 73) 0%, rgb(160, 76, 50) 100%) !important;
}
/* Interior service role cards retain a dedicated Schedule footer. "Read essay"
   now occupies the motif cell above, so this row only has to protect the real
   button from the whole-card overlay. (TAG-20260717-ROLE-CARD-INSETS) */
.le-mag-grid-large .is-split-link .le-mag-actions {
    grid-column: 1 / -1 !important;
    margin-top: 8px !important;
}

.le.le-template-category .section-list .le-mag-mark {
  grid-column: 3;
  grid-row: 1;
}

.le.le-template-category .section-list .le-mag-arrow--motif {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 4;
  margin: 0 12px 18px 0;
  padding: 0;
  pointer-events: none;
  text-shadow: 0 0 12px rgba(2, 6, 15, 0.96);
}

:root[data-theme="light"] .le.le-template-category .section-list .le-mag-arrow--motif {
  text-shadow: 0 0 12px rgba(244, 239, 226, 0.98);
}

@media (min-width: 601px) {
  .le-mag-grid-large .is-split-link .le-mag-actions {
    justify-content: flex-end !important;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .le.le-template-category .section-list .le-mag-card {
    grid-template-columns: 80px minmax(0, 1fr) clamp(132px, 19vw, 176px) !important;
    gap: clamp(20px, 3vw, 30px) !important;
  }

  .le.le-template-category .section-list .le-mag-body {
    grid-column: 2;
    grid-row: 1;
  }

  .le.le-template-category .section-list .le-mag-mark,
  .le.le-template-category .section-list .le-mag-arrow--motif {
    grid-column: 3;
    grid-row: 1;
  }

  .le.le-template-category .section-list .le-mag-mark {
    display: block !important;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .le.le-template-category .section-list .le-mag-arrow--motif {
    margin-bottom: 32px;
  }
}

@media (max-width: 767px) {
  .le.le-template-category .section-list .le-mag-card {
    padding: clamp(24px, 7vw, 32px) clamp(12px, 4vw, 18px) !important;
  }

  .le.le-template-category .section-list .le-mag-body {
    padding-right: 0;
  }

  .le.le-template-category .section-list .le-mag-arrow--motif {
    grid-column: 1;
    grid-row: auto;
    align-self: start;
    justify-self: start;
    margin: 4px 0 0;
    text-shadow: none;
  }
}

/* Internal case-study strips share one responsive inset between their heading,
   rule, rows, and card contents. The outer inset keeps the strip aligned on both
   full-width articles and contained category pages; the card inset prevents tags
   and the CTA from touching the separator edges. */
:is(.le-template-category, .le-template-article) .cs-strip {
  padding: clamp(28px, 3vw, 44px) clamp(18px, 4vw, 64px) 0;
}

:is(.le-template-category, .le-template-article) .cs-strip__list {
  padding-inline: 0 !important;
}

:is(.le-template-category, .le-template-article) .cs-strip__card.le-mag-card {
  padding: clamp(30px, 3vw, 44px) clamp(16px, 2vw, 26px) clamp(36px, 3.5vw, 52px) !important;
}

:is(.le-template-category, .le-template-article) .cs-strip__cta.le-mag-arrow {
  position: static;
  align-self: flex-end;
  margin-top: 16px;
  padding-right: 4px;
}

@media (max-width: 767px) {
  :is(.le-template-category, .le-template-article) .cs-strip {
    padding-inline: clamp(14px, 4vw, 18px);
  }

  :is(.le-template-category, .le-template-article) .cs-strip__card.le-mag-card {
    padding: clamp(22px, 6vw, 28px) clamp(13px, 4vw, 17px) clamp(30px, 8vw, 38px) !important;
  }
}

/* Article cover — schedule pill spacing (pill look inherited from .le-pill.primary) */
.le-cover-cta { margin: 1.1rem 0 0.25rem; }
.le-cover-schedule { text-decoration: none; }

/* ============================================================
   CONTACT FORM — sticky-header scroll offset
   ------------------------------------------------------------
   The service "Schedule" deep-link buttons and the #contact/#schedule
   anchor links scroll the form section to the viewport top, where the
   fixed .cb-nav (112px desktop / 68px mobile) would cover the section
   heading. scroll-margin-top offsets the landing for native anchor
   jumps AND the JS scrollIntoView. Targets every contact-form anchor:
   home section (#contact), role section (#schedule), role hidden span (#contact).
   ============================================================ */
#contact,
#schedule {
    scroll-margin-top: 128px;
}
@media (max-width: 768px) {
    #contact,
    #schedule {
        scroll-margin-top: 88px;
    }
}

/* ============================================================
   CONTACT FORM — "COASTAL CONCIERGE" LUXURY ELEVATION
   ------------------------------------------------------------
   Editorial luxury on top of the legibility pass: a navy glass
   intake CARD with one disciplined accent — champagne/brass
   against the cool coastal navy. Selection + CTA go champagne
   with deep-navy ink (reads on both cream and night); focus
   glows champagne; the Schedule button hands off warmly via the
   concierge line. Restraint over intensity.
   ============================================================ */
.contact-cta { --cb-champ: #ddbd83; --cb-champ-deep: #c19a54; --cb-ink: #15273f; }
.contact-cta {
    border-top: none !important;
    mask-image:
        linear-gradient(to right, transparent 0, black 12%, black 88%, transparent 100%),
        linear-gradient(to bottom, transparent 0, black 5rem, black calc(100% - 5rem), transparent 100%) !important;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0, black 12%, black 88%, transparent 100%),
        linear-gradient(to bottom, transparent 0, black 5rem, black calc(100% - 5rem), transparent 100%) !important;
    mask-composite: intersect !important;
    -webkit-mask-composite: source-in !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-repeat: no-repeat !important;
}

/* Stacking fix: the form is footer.htm's first child — a <body>-level sibling of
   .home-page. blocks.css gives it z-index:1 to clear the fixed page bg (z:0), but
   that EQUALS .home-page's z-index:1, and being later in the DOM the form then paints
   OVER .home-page — including the in-page sticky section nav (.home-post-strip, whose
   z:34 is trapped inside .home-page's z:1 context), so the form sat on top of it.
   Drop to z-index:0: still above the page bg (z:0, earlier in the DOM → form wins by
   paint order) but below .home-page, so the sticky strip stays on top. Verified via
   hit-test: at z:1 the form was topmost over the strip; at z:0 the strip is. */
.contact-cta { z-index: 0; }

/* Refined intake card: material + depth + a fine champagne top rule */
.contact-cta__form {
    position: relative;
    padding: 2.5rem 2.25rem 2.15rem;
    border-radius: 16px;
    /* Token-independent fallbacks for visibility on non-le pages (like 404) */
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
        var(--le-bg, rgba(14, 30, 55, 0.66));
    border: 1px solid var(--le-hairline, rgba(221, 189, 131, 0.22));
    box-shadow: 0 34px 80px -46px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06);
    opacity: 1 !important; /* Ensure visibility */
}
.contact-cta__form::before {
    content: '';
    position: absolute; top: 0; left: 2.25rem; right: 2.25rem; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(221,189,131,0.85), transparent);
}
[data-theme="light"] .contact-cta__form,
.le[data-theme="light"] .contact-cta__form {
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,250,242,0.85));
    border-color: rgba(193, 154, 84, 0.4);
    box-shadow: 0 34px 64px -48px rgba(20,48,79,0.32), inset 0 1px 0 rgba(255,255,255,0.65);
    opacity: 1 !important;
}

/* Interior SEND button & Card Shell: 100% Matching Home & Standalone Intake */
:is(.le-template-category, .le-template-article, .le) .le-submit,
:is(.le-template-category, .le-template-article, .le) .contact-cta__submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 0.85rem 2.25rem !important;
    background: linear-gradient(135deg, #356cc8, #1e4588) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    font-family: var(--font-body-coastal, 'Manrope', 'Inter', system-ui, -apple-system, sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: none !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(30, 69, 136, 0.45) !important;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s !important;
}

:is(.le-template-category, .le-template-article, .le) .contact-cta,
:is(.le-template-category, .le-template-article, .le) .le-contact-form {
    border-radius: 16px !important;
}

/* Inputs: champagne focus glow (supersedes the cyan ring) */
.contact-cta__input:focus, .contact-cta__select:focus, .contact-cta__textarea:focus,
.le-form .le-field input:focus, .le-form .le-field textarea:focus, .le-form .le-field select:focus {
    border-color: rgba(221, 189, 131, 0.78) !important;
    box-shadow: 0 0 0 3px rgba(221, 189, 131, 0.18) !important;
}
[data-theme="light"] .contact-cta__input:focus, [data-theme="light"] .contact-cta__select:focus,
[data-theme="light"] .contact-cta__textarea:focus,
.le[data-theme="light"] .le-form .le-field input:focus,
.le[data-theme="light"] .le-form .le-field textarea:focus,
.le[data-theme="light"] .le-form .le-field select:focus {
    border-color: rgba(193, 154, 84, 0.85) !important;
    box-shadow: 0 0 0 3px rgba(193, 154, 84, 0.2) !important;
}

/* Service pills — champagne selection (deep-navy ink reads on both themes) */
.contact-cta__checkbox-label:has(input:checked),
[data-theme="light"] .contact-cta__checkbox-label:has(input:checked),
.le[data-theme="light"] .contact-cta__checkbox-label:has(input:checked) {
    background: linear-gradient(135deg, #e3c587, #c49b52) !important;
    border-color: transparent !important;
    color: #15273f !important;
    box-shadow: 0 4px 16px rgba(193, 154, 84, 0.4) !important;
}
.contact-cta__checkbox-label:has(input:checked) input[type="checkbox"] {
    background: #15273f !important; border-color: #15273f !important;
}
.contact-cta__checkbox-label:has(input:checked) input[type="checkbox"]::after { border-color: #e3c587 !important; }
.contact-cta__checkbox-label.is-justset { animation: ccfPillSet .65s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ccfPillSet {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(221,189,131,0.55); }
    35%  { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(221,189,131,0); }
    100% { transform: scale(1); }
}

/* ════════════════════════════════════════════════════════════════════════
   Per-property SERVICE CHIPS — UX proof (frontend-design pass).
   The chips already fill champagne on select, so the extra in-pill checkbox
   box was a SECOND, competing "selected" signal (empty grey square when off,
   navy square-in-gold when on) — it read as clutter. Hide the native box (kept
   focusable + submitted for a11y), let the chip fill BE the state, and reveal
   one ✓ on select (also a non-colour cue for colour-blind users). Placed after
   the base .contact-cta__checkbox rules above so it wins the cascade. */
.contact-cta__checkbox-label input[type="checkbox"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}
.contact-cta__property-services .contact-cta__checkbox-group {
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.contact-cta__checkbox-label {
    gap: 0;                       /* the hidden box no longer reserves a gap */
    padding: 0.46rem 0.84rem;
}
/* The single selection cue: a ✓ that slides in from the left on select. */
.contact-cta__checkbox-label::before {
    content: "\2713";
    flex: 0 0 auto;
    width: 0;
    margin-right: 0;
    opacity: 0;
    overflow: hidden;
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1;
    transform: translateX(-3px);
    transition: width .18s ease, margin .18s ease, opacity .18s ease, transform .18s ease;
}
.contact-cta__checkbox-label:has(input:checked)::before {
    width: 0.8em;
    margin-right: 0.36em;
    opacity: 1;
    transform: translateX(0);
}
/* Focus ring now rides the chip, since the native box is visually hidden. */
.contact-cta__checkbox-label:has(input:focus-visible) {
    outline: 2px solid rgba(227, 197, 135, 0.95);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .contact-cta__checkbox-label::before { transition: none; }
}

/* Primary CTA — a champagne button: luxury, not a techy gradient */
.contact-cta__submit {
    background: linear-gradient(135deg, #e3c587, #c49b52) !important;
    color: #15273f !important;
    letter-spacing: 0.16em !important;
    box-shadow: 0 10px 26px -6px rgba(193, 154, 84, 0.5) !important;
}
.contact-cta__submit:hover { box-shadow: 0 14px 34px -6px rgba(193, 154, 84, 0.62) !important; filter: brightness(1.04); }

/* Contact CTA legibility + layout. (TAG-20260622-CONTACT)
   1) Drop the heavy 2px text-stroke (muddy outline) across the CTA text; keep the
      white form panel shadow-free.
   2) Apply the site's COMMON legibility shadow (the --le-home-outline-soft / -body
      values) to the text-over-background elements — header, trust, form-head — so
      they read cleanly over the coastal bg in BOTH light and dark.
   3) Left-align the form-head (call pill + "or" divider) so it follows the same
      left rhythm as the header/trust/form (was a centered island). */

/* 1) no stroke; form panel (on white) stays shadow-free */
.contact-cta__header *,
.contact-cta__trust,
.contact-cta__trust *,
.contact-cta__form-head,
.contact-cta__form-head * {
  -webkit-text-stroke: 0 !important;
}
.contact-cta__form,
.contact-cta__form * {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* 2) common legibility shadow — DARK (default). Darkened toward the section-heading
   weight + a tight near-edge for an outline-like definition (no white halo). */
.contact-cta .contact-cta__heading {
  text-shadow: 0 0 1px rgba(0, 10, 30, 0.85), 0 2px 10px rgba(0, 10, 30, 0.62), 0 12px 34px rgba(0, 10, 30, 0.40) !important;
}
/* Non-heading text (eyebrow / sub / trust / form-head): BOLD outline matching the
   site's interior universal treatment + a tighter near-edge so the small, dimmer
   copy reads as crisply as headings/other elements. :root prefix => specificity
   (0,4,0) to win over the universal `:root[data-theme] .le-template-* *` (0,3,0)
   on interior, and applies on home too. (TAG-20260622-CONTACT) */
:root[data-theme="dark"] .contact-cta .contact-cta__eyebrow,
:root[data-theme="dark"] .contact-cta .contact-cta__sub,
:root[data-theme="dark"] .contact-cta__trust .contact-cta__badge,
:root[data-theme="dark"] .contact-cta__form-head .contact-cta__form-head-or,
:root[data-theme="dark"] .contact-cta__form-head .contact-cta__call-pill {
  text-shadow:
    rgb(0 8 24 / 100%) 0 0 2px,
    rgb(247 244 237 / 38%) 0 1px 0,
    rgb(247 244 237 / 68%) 0 0 1px,
    rgb(0 8 24 / 100%) 0 0 5px,
    rgb(0 8 24 / 100%) 0 0 9px,
    rgb(0 8 24 / 100%) 0 0 19px !important;
}
/* 2) LIGHT — dark near-edge + white glow (mirrors the interior light treatment) */
[data-theme="light"] .contact-cta .contact-cta__heading {
  text-shadow: 0 0 1px rgba(10, 30, 60, 0.32), 0 2px 12px rgba(10, 30, 60, 0.30) !important;
}
:root[data-theme="light"] .contact-cta .contact-cta__eyebrow,
:root[data-theme="light"] .contact-cta .contact-cta__sub,
:root[data-theme="light"] .contact-cta__trust .contact-cta__badge,
:root[data-theme="light"] .contact-cta__form-head .contact-cta__form-head-or,
:root[data-theme="light"] .contact-cta__form-head .contact-cta__call-pill {
  text-shadow:
    rgb(255 255 255 / 100%) 0 0 2px,
    rgb(0 8 24 / 38%) 0 1px 0,
    rgb(0 10 30 / 68%) 0 0 1px,
    rgb(255 255 255 / 100%) 0 0 5px,
    rgb(255 255 255 / 100%) 0 0 9px,
    rgb(255 255 255 / 100%) 0 0 19px !important;
}
/* (form-head left-align handled at the canonical rule further down) */

/* Message field spans the full form width (was sharing the 2-col property row,
   so it only filled the left half). */
.contact-cta__field--message { grid-column: 1 / -1; }

/* Send button: wider + centered, with the fine print stacked beneath it
   (overrides blocks.css's left-aligned flex row). */
.contact-cta__actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.9rem !important;
    text-align: center;
}
.contact-cta__submit {
    min-width: min(300px, 100%) !important;
    justify-content: center !important;
}

/* Concierge handoff line */
.contact-cta__concierge {
    margin: 0 0 1.5rem;
    padding: 0.75rem 1rem 0.75rem 1.15rem;
    border-left: 2px solid var(--cb-champ, #ddbd83);
    background: rgba(221, 189, 131, 0.09);
    border-radius: 0 10px 10px 0;
    color: rgba(228, 238, 255, 0.92);
    font-size: 0.94rem; line-height: 1.5; letter-spacing: 0.005em;
}
.contact-cta__concierge strong { color: #ecd09a; font-weight: 600; }
.contact-cta__concierge[hidden] { display: none; }
.contact-cta__concierge.is-in { animation: ccfConciergeIn .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ccfConciergeIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
[data-theme="light"] .contact-cta__concierge { color: #2c3c54; background: rgba(193, 154, 84, 0.1); }
[data-theme="light"] .contact-cta__concierge strong { color: #97712b; }

/* Required asterisk → champagne warmth */
.contact-cta__req { color: var(--cb-champ, #ddbd83) !important; opacity: 0.9 !important; }

/* Luxury card — trim padding on phones so inputs keep their breathing room */
@media (max-width: 600px) {
    .contact-cta__form { padding: 1.5rem 1.25rem 1.4rem; border-radius: 14px; }
    .contact-cta__form::before { left: 1.25rem; right: 1.25rem; }
    .contact-cta__concierge { font-size: 0.9rem; }
}

/* ============================================================
   CONTACT FORM — luxury finishing: success state + card reveal
   ============================================================ */
/* Refined champagne confirmation (replaces the plain cyan "Message sent!") */
.contact-cta__success {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.5rem 1.6rem !important;
    border-radius: 14px;
    border: 1px solid rgba(221, 189, 131, 0.3);
    background: linear-gradient(180deg, rgba(221,189,131,0.09), rgba(221,189,131,0.025));
    animation: ccfSuccessIn .6s cubic-bezier(.2,.7,.2,1) both;
}
.contact-cta__success[hidden] { display: none !important; }
.contact-cta__success-mark {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e3c587, #c49b52);
    color: #15273f;
    box-shadow: 0 8px 20px -6px rgba(193, 154, 84, 0.55);
}
.contact-cta__success-text { font-size: 0.98rem; line-height: 1.5; color: rgba(224, 238, 255, 0.82); }
.contact-cta__success-text strong {
    display: block; font-size: 1.12rem; color: #fff; font-weight: 600;
    margin-bottom: 0.12rem; letter-spacing: 0.004em;
}
@keyframes ccfSuccessIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
[data-theme="light"] .contact-cta__success-text { color: #3a4a60; }
[data-theme="light"] .contact-cta__success-text strong { color: #15273f; }

/* Refined card entrance — JS-gated (.contact-cta--reveal-ready added by JS) so a
   script failure can never hide the form; default (no class) = fully visible. */
.contact-cta__form { transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.contact-cta--reveal-ready:not(.is-revealed) .contact-cta__form {
    opacity: 0;
    transform: translateY(24px);
}
@media (prefers-reduced-motion: reduce) {
    .contact-cta--reveal-ready:not(.is-revealed) .contact-cta__form { opacity: 1 !important; transform: none !important; }
    .contact-cta__form, .contact-cta__concierge, .contact-cta__success,
    .contact-cta__checkbox-label.is-justset { transition: none !important; animation: none !important; }
}

/* ============================================================
   CONTACT FORM — media uploads + captcha + accessible errors (U4)
   Drop-zone, thumbnail previews, Turnstile slot, and error regions,
   all in the champagne intake language. Dark default; light overrides.
   ============================================================ */
/* Visually-hidden helper (SR-only help text, kept in the a11y tree). */
.contact-cta__sr-only {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Drop-zone — a champagne-dashed intake panel; the native input fills it. */
.contact-cta__field--media { position: relative; }
.contact-cta__dropzone {
    position: relative;
    border: 1.5px dashed rgba(221, 189, 131, 0.42);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(221,189,131,0.05), rgba(221,189,131,0.015));
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.contact-cta__dropzone:hover { border-color: rgba(221, 189, 131, 0.7); background: rgba(221,189,131,0.07); }
.contact-cta__dropzone.is-dragover {
    border-color: var(--cb-champ, #ddbd83);
    background: rgba(221,189,131,0.12);
    box-shadow: 0 0 0 3px rgba(221, 189, 131, 0.16);
}
.contact-cta__dropzone.has-error { border-color: rgba(214, 110, 90, 0.85); background: rgba(214,110,90,0.06); }
/* The real input overlays the prompt — transparent, the whole zone is clickable. */
.contact-cta__file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.contact-cta__file:focus-visible + .contact-cta__dropzone-inner {
    outline: 2px solid var(--cb-champ, #ddbd83); outline-offset: 3px; border-radius: 10px;
}
.contact-cta__dropzone-inner {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 0.4rem; padding: 1.5rem 1.25rem; pointer-events: none;
}
.contact-cta__dropzone-icon { color: var(--cb-champ, #ddbd83); opacity: 0.9; }
.contact-cta__dropzone-prompt { font-size: 0.95rem; color: rgba(224, 238, 255, 0.86); letter-spacing: 0.005em; }
.contact-cta__dropzone-prompt strong { color: #ecd09a; font-weight: 600; }
.contact-cta__dropzone-meta { font-size: 0.76rem; color: rgba(176, 208, 244, 0.5); letter-spacing: 0.02em; }
[data-theme="light"] .contact-cta__dropzone { background: linear-gradient(180deg, rgba(193,154,84,0.06), rgba(193,154,84,0.02)); border-color: rgba(193,154,84,0.4); }
[data-theme="light"] .contact-cta__dropzone:hover { border-color: rgba(193,154,84,0.75); }
[data-theme="light"] .contact-cta__dropzone-prompt { color: #2c3c54; }
[data-theme="light"] .contact-cta__dropzone-prompt strong { color: #97712b; }
[data-theme="light"] .contact-cta__dropzone-meta { color: rgba(20,60,110,0.5); }

/* Previews — thumbnail chips with a remove control. */
.contact-cta__previews {
    list-style: none; margin: 0.7rem 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.55rem;
}
.contact-cta__previews:empty { display: none; }
.contact-cta__preview {
    display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.5rem;
    border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(221, 189, 131, 0.16);
}
.contact-cta__preview-thumb {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 7px; overflow: hidden;
    display: grid; place-items: center; background: rgba(21,39,63,0.5);
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; color: var(--cb-champ, #ddbd83);
}
.contact-cta__preview-thumb img { width: 100%; height: 100%; object-fit: cover; }
.contact-cta__preview-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.contact-cta__preview-name { font-size: 0.8rem; color: rgba(224,238,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-cta__preview-size { font-size: 0.7rem; color: rgba(176,208,244,0.5); }
.contact-cta__preview-remove {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer;
    line-height: 1; font-size: 1.1rem; background: rgba(255,255,255,0.06); color: rgba(224,238,255,0.7);
    transition: background .15s ease, color .15s ease;
}
.contact-cta__preview-remove:hover { background: rgba(214,110,90,0.85); color: #fff; }
[data-theme="light"] .contact-cta__preview { background: rgba(255,255,255,0.6); border-color: rgba(193,154,84,0.28); }
[data-theme="light"] .contact-cta__preview-name { color: #28384e; }
[data-theme="light"] .contact-cta__preview-size { color: rgba(20,60,110,0.5); }
[data-theme="light"] .contact-cta__preview-thumb { background: rgba(20,48,79,0.08); color: #97712b; }
[data-theme="light"] .contact-cta__preview-remove { background: rgba(20,48,79,0.08); color: #3a4a60; }

/* Error regions — warm coral, restrained. */
.contact-cta__field-error, .contact-cta__form-error {
    color: #e88e78; font-size: 0.84rem; line-height: 1.45; letter-spacing: 0.005em;
}
.contact-cta__field-error:empty { display: none; }
.contact-cta__field-error { margin-top: 0.4rem; }
.contact-cta__form-error { margin: 0 0 1.25rem; padding: 0.7rem 1rem; border-radius: 10px; border-left: 2px solid #d66e5a; background: rgba(214, 110, 90, 0.1); }
.contact-cta__form-error[hidden] { display: none; }
[data-theme="light"] .contact-cta__field-error, [data-theme="light"] .contact-cta__form-error { color: #b4492f; }

/* Turnstile slot — centered within the actions, with breathing room. */
.contact-cta__captcha { margin: 0 0 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.contact-cta__captcha .cf-turnstile { min-height: 65px; }

@media (prefers-reduced-motion: reduce) { .contact-cta__dropzone { transition: none !important; } }


/* ── Interior listing numerals ("In this volume" magazine) — same champagne index
   as home, for cross-page consistency. Layout/prototype geometry untouched; only the
   numeral's grey (a bare span !important block rule) is repainted. Interior-scoped. ── */
.le-mag-grid-large .le-mag-num { color: #e3c587 !important; -webkit-text-fill-color: #e3c587 !important; }
:root[data-theme="light"] .le-mag-grid-large .le-mag-num { color: #915f1e !important; -webkit-text-fill-color: #915f1e !important; }

/* ============================================================
   CONTACT FORM — progressive property blocks (U3)
   One property block by default; "+ Add another property" clones a
   block (its own address autocomplete + GPS, an optional property-type
   pill group, a remove ✕). Mirrors the champagne intake language: the
   media drop-zone card material + the service-pill toggles. Dark is the
   default; light overrides + a reduced-motion block follow.
   Address-wrap / suggestions / gps-btn styling is reused verbatim from
   blocks.css via the shared class names (do not restyle them here).
   ============================================================ */
.contact-cta__field--properties { grid-column: 1 / -1; }

/* The block stack + each block: a subtle card with a champagne hairline. */
.contact-cta__properties {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.45rem;
}
.contact-cta__property {
    position: relative;
    padding: 1rem 1.05rem 1.05rem;
    border-radius: 12px;
    border: 1px solid rgba(221, 189, 131, 0.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.01));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
/* A fine champagne spine on the left edge, echoing the concierge line + service plate. */
.contact-cta__property::before {
    content: '';
    position: absolute; left: 0; top: 12px; bottom: 12px;
    width: 2px; border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg, transparent, rgba(221,189,131,0.55), transparent);
    opacity: 0.5;
    pointer-events: none;
}
.contact-cta__property:focus-within {
    border-color: rgba(221, 189, 131, 0.42);
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.014));
}

/* Block header: a quiet "Property N" caption. */
.contact-cta__property-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.6rem;
}
.contact-cta__property-title {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: rgba(221, 189, 131, 0.78);
}

/* Optional property-type pill group — mirrors the service checkbox pills,
   but radio-style (single choice) + smaller. None selected by default. */
.contact-cta__property-types { margin-top: 0.8rem; }
.contact-cta__property-types-legend {
    display: block; margin-bottom: 0.4rem;
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(192, 222, 252, 0.62);
}
.contact-cta__property-types-opt {
    font-weight: 500; letter-spacing: 0.02em; text-transform: none;
    color: rgba(176, 208, 244, 0.5);
}
.contact-cta__type-group {
    display: flex; flex-wrap: wrap; gap: 0.45rem;
}
.contact-cta__type-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(160, 205, 255, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(208, 230, 255, 0.92);
    font-size: 12.5px; font-weight: 500; line-height: 1.15;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.contact-cta__type-pill:hover {
    border-color: rgba(140, 210, 255, 0.7);
    transform: translateY(-1px);
}
/* The native radio sits invisible; the pill is the control. */
.contact-cta__type-pill input[type="radio"] {
    appearance: none; -webkit-appearance: none;
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.contact-cta__type-pill:has(input:checked) {
    background: linear-gradient(135deg, #e3c587, #c49b52);
    border-color: transparent;
    color: #15273f;
    box-shadow: 0 4px 16px rgba(193, 154, 84, 0.4);
}
/* Keyboard focus ring on the pill (radio is visually hidden). */
.contact-cta__type-pill:focus-within {
    outline: 2px solid var(--cb-champ, #ddbd83);
    outline-offset: 2px;
}
.contact-cta__type-pill.is-justset { animation: ccfPillSet .65s cubic-bezier(.2,.7,.2,1) both; }

/* Remove ✕ — a quiet circular control, pinned top-right of an added block. */
.contact-cta__property-remove {
    position: absolute; top: 0.6rem; right: 0.6rem;
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid rgba(221, 189, 131, 0.22);
    background: rgba(255,255,255,0.05);
    color: rgba(224, 238, 255, 0.62);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.contact-cta__property-remove:hover {
    background: rgba(214, 110, 90, 0.85);
    border-color: transparent;
    color: #fff;
    transform: scale(1.05);
}
.contact-cta__property-remove:focus-visible {
    outline: 2px solid var(--cb-champ, #ddbd83); outline-offset: 2px;
}
.contact-cta__property-remove[hidden] { display: none; }

/* "+ Add another property" — a champagne ghost button, restrained. */
.contact-cta__add-property {
    display: inline-flex; align-items: center; gap: 0.45rem;
    margin-top: 0.8rem;
    padding: 0.55rem 1.05rem;
    border-radius: 999px;
    border: 1.5px dashed rgba(221, 189, 131, 0.5);
    background: transparent;
    color: var(--cb-champ, #ddbd83);
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.contact-cta__add-property:hover {
    border-color: rgba(221, 189, 131, 0.85);
    background: rgba(221, 189, 131, 0.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(193, 154, 84, 0.5);
}
.contact-cta__add-property:focus-visible {
    outline: 2px solid var(--cb-champ, #ddbd83); outline-offset: 3px;
}
.contact-cta__add-property:disabled {
    opacity: 0.4; cursor: default; transform: none; box-shadow: none;
    border-color: rgba(221, 189, 131, 0.3); background: transparent;
}
.contact-cta__add-property svg { flex: 0 0 auto; }

/* Smooth reveal for a newly-added block (disabled under reduced-motion below). */
.contact-cta__property--entering {
    animation: ccfPropertyIn .42s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes ccfPropertyIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

/* ── Light theme ── */
[data-theme="light"] .contact-cta__property,
.le[data-theme="light"] .contact-cta__property {
    border-color: rgba(193, 154, 84, 0.3);
    background: linear-gradient(180deg, rgba(255,255,255,0.66), rgba(255,250,242,0.42));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
[data-theme="light"] .contact-cta__property:focus-within,
.le[data-theme="light"] .contact-cta__property:focus-within {
    border-color: rgba(193, 154, 84, 0.55);
}
[data-theme="light"] .contact-cta__property-title,
.le[data-theme="light"] .contact-cta__property-title { color: #804f16; }
[data-theme="light"] .contact-cta__property-types-legend { color: rgba(20, 70, 130, 0.72); }
[data-theme="light"] .contact-cta__property-types-opt { color: rgba(20, 60, 110, 0.5); }
[data-theme="light"] .contact-cta__type-pill,
.le[data-theme="light"] .contact-cta__type-pill {
    border-color: rgba(20, 60, 110, 0.22);
    background: rgba(255, 255, 255, 0.62);
    color: #2a3a50;
}
[data-theme="light"] .contact-cta__type-pill:has(input:checked),
.le[data-theme="light"] .contact-cta__type-pill:has(input:checked) {
    background: linear-gradient(135deg, #e3c587, #c49b52);
    border-color: transparent;
    color: #15273f;
}
[data-theme="light"] .contact-cta__property-remove {
    border-color: rgba(193, 154, 84, 0.3);
    background: rgba(20, 48, 79, 0.06);
    color: #3a4a60;
}
[data-theme="light"] .contact-cta__property-remove:hover { color: #fff; }
[data-theme="light"] .contact-cta__add-property {
    border-color: rgba(193, 154, 84, 0.6);
    color: #804f16;
}
[data-theme="light"] .contact-cta__add-property:hover {
    border-color: rgba(193, 154, 84, 0.9);
    background: rgba(193, 154, 84, 0.1);
}

/* ── Reduced motion: no add/remove reveal, no pill pulse, no hover lifts. ── */
@media (prefers-reduced-motion: reduce) {
    .contact-cta__property--entering { animation: none !important; }
    .contact-cta__type-pill.is-justset { animation: none !important; }
    .contact-cta__property,
    .contact-cta__type-pill,
    .contact-cta__add-property,
    .contact-cta__property-remove { transition: none !important; }
    .contact-cta__type-pill:hover,
    .contact-cta__add-property:hover,
    .contact-cta__property-remove:hover { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   END-TO-END LUXURY PASS — 2026-06-03
   Two user asks: (1) home section lists still need improvement; (2) responsive
   category (/areas) looks bad. Plus the cross-cutting responsive blockers the
   full-page audit surfaced (interior footer + stat strip never reflow; the
   sticky service directory overlaps content on mobile; dark theme is the
   neglected twin on list CTAs and form fields). All interior-scoped so the
   home ABF and prototype geometry are untouched; loads last → wins cascade.
   ════════════════════════════════════════════════════════════════════════ */

/* ── A1 · Interior footer reflow (fixes /areas + services + seaside + acrepair) ──
   .le-footer-grid is `1.5fr repeat(3,1fr)` with 96px side padding and ZERO media
   queries (prototype/internal.css) → at tablet the rightmost column clips off the
   edge, and at mobile the three nav columns crush into a sliver of orphaned <ul>
   bullet-dots with the link text pushed off-screen. Reflow + drop the default
   bullets so it reads as an editorial footer, not a broken CMS default. */
.le-footer ul:not(.le-footer-contact) {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  .le-footer { padding: 56px 40px 34px !important; }
  .le-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 30px 40px !important; }
  .le-footer-brand { grid-column: 1 / -1 !important; }
}
@media (max-width: 560px) {
  .le-footer { padding: 48px 22px 30px !important; }
  .le-footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .le-footer a { font-size: 14.5px !important; }      /* comfortable tap target */
  .le-footer ul li { margin-bottom: 11px !important; }
}

/* ── Interior category strips: always stationary (not sticky) ──
   Strips on interior pages (cb-role-internal) should behave like home ABF strips —
   stationary, marquee on mobile, single-row on desktop. The CMS sticky_mode setting
   is ignored on the front-end; blocks.css :has(.category-strip--sticky) is overridden
   here unconditionally so they never dock to the top on scroll. */
body.cb-role-internal .block-wrapper--category-strip-block:has(.category-strip--sticky) {
  position: relative !important;
  top: auto !important;
}

/* ── A2 · On mobile also drop any residual static positioning (belt-and-suspenders) ── */
@media (max-width: 767px) {
  body.cb-role-internal .block-wrapper--category-strip-block:has(.category-strip--sticky) {
    position: static !important;
    top: auto !important;
  }
}

/* ── A3 · Interior stat strip (.le-spec) — real wrap on mobile ──
   .le-spec-item is `flex:1 1 0; min-width:0`, so the @media flex-wrap at 1100px
   never engages. Provide a robust wrapping strategy that collapses to full-width
   on narrow phones to prevent text clipping. */
@media (max-width: 760px) {
  body.cb-role-internal .le-spec { 
    flex-wrap: wrap !important; 
    gap: 18px 22px !important; 
    padding: 20px var(--fluid-pad-x) !important; 
    justify-content: center !important;
  }
  body.cb-role-internal .le-spec-item { 
    flex: 1 1 42% !important; 
    min-width: 140px !important; 
    text-align: center !important;
  }
  body.cb-role-internal .le-spec-sep { display: none !important; }
}

/* ── A3b · Interior stat strip — TABLET BAND wrap (TAG-20260621-SPEC-TABLET) ──
   Breakpoint gap: .le-spec-item is `flex:1 1 0`, and wrap only engaged at ≤760
   (2-up) and ≤375 (1-up). Between 761–1099px all 5 items stayed in ONE row,
   crushed to ~86px each so long values wrapped to 2–3 lines = the wrecked tablet
   look. Fill the gap: reflow to a
   comfortable 3-up here (rows of 3+2). min-width 200px guarantees values stay on
   one/two clean lines. Scoped min-width:761 so it can't fight the ≤760 rule. */
@media (min-width: 761px) and (max-width: 1099px) {
  body.cb-role-internal .le-spec {
    flex-wrap: wrap !important;
    gap: 22px 30px !important;
    justify-content: center !important;
  }
  body.cb-role-internal .le-spec-item {
    flex: 0 1 30% !important;     /* no grow → 3-up (rows of 3+2), not ballooned 2+2+1 */
    min-width: 180px !important;
    text-align: center !important;
  }
  body.cb-role-internal .le-spec-sep { display: none !important; }
}

@media (max-width: 375px) {
  body.cb-role-internal .le-spec-item {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  /* Decorative diagrams can bleed out on small phones; ensure they are hidden */
  .le-diagram, .le-cover-stamps { display: none !important; }
}

@media (max-width: 320px) {
  .le-nav-actions { gap: 2px !important; }
  .le-combo { gap: 0 !important; }
  .le .le-logo img { height: 32px !important; }
  .le .le-logo.cb-logo-bg {
    --cb-logo-h: 32px;
    --cb-logo-w: 47.85px;
  }
  .le-nav-actions .le-combo-half { padding: 4px !important; }
  .le-nav-actions .le-pill.primary { padding: 4px 8px !important; }
}

/* ── B1 · Home section lists — un-neglect the dark twin ──
   Light rows carry a brass numeral + a solid coral "Schedule" pill; in dark the
   numeral fell back to flat grey and the pill to a faint hollow outline that barely
   reads as a control. Restore parity: warm brass numeral + a filled coral pill with
   ink text so the primary action is unmistakable on the night canvas. */
:root[data-theme="dark"] .home-page .le-mag-num,
:root[data-theme="dark"] :is(.le-template-category, .le-template-article) .le-mag-num {
  color: rgb(206, 170, 110) !important;          /* warm brass, matches light's intent */
}
:root[data-theme="dark"] .home-page .le-mag-split-cta {
  background: var(--le-coral, rgb(255, 180, 160)) !important;
  border-color: transparent !important;
  color: rgb(12, 22, 36) !important;             /* deep ink on coral = high contrast */
}
:root[data-theme="dark"] .home-page .le-mag-split-cta:hover,
:root[data-theme="dark"] .home-page .le-mag-split-cta:focus-visible {
  background: var(--le-coral-deep, rgb(220, 130, 110)) !important;
  color: rgb(255, 250, 244) !important;
}

/* ── C1 · Dark interior appointment form — crisper fields ──
   On dark interior pages (.le) the form inputs were nearly invisible: fill
   rgba(255,255,255,.055) and a thin blue 30% border on a near-black panel. Lift the
   fill + border so each field reads as a deliberate, premium surface (home form is
   .home-page, not cb-role-internal, so it is unaffected). */
:root[data-theme="dark"] body.cb-role-internal .contact-cta :is(input:not([type="hidden"]), textarea, select) {
  background-color: rgba(255, 255, 255, 0.085) !important;
  border-color: rgba(208, 222, 242, 0.42) !important;
  min-height: clamp(2.75rem, 5vw, 3.25rem) !important;
}
:root[data-theme="dark"] body.cb-role-internal .contact-cta :is(input, textarea)::placeholder {
  color: rgba(220, 232, 248, 0.5) !important;
}

/* ── C2 · Light interior footer utility links — fix near-invisible contrast ──
   The credential/utility row (NATE CERTIFIED · FACTORY AUTHORIZED · SITEMAP ·
   PRIVACY) used --le-ink-faint, which on cream is barely legible. Raise to a
   readable navy ink in light only (dark already reads fine). */
:root[data-theme="light"] .le-footer-bottom,
:root[data-theme="light"] .le-footer-bottom a,
:root[data-theme="light"] .le-footer-bottom .creds a {
  color: rgb(58, 74, 96) !important;
}


/* ── D1 · Ease the warm-right (red) breeze layer in DARK ──
   The recurring "crooked hero" + "rust wash on the right below the fold" both trace to
   the warm (red) wave reading heavier on the right than the cool (blue) wave on the
   left — a perceptual right-pull. Gently lower the red layer's weight in DARK only so
   warm/cool sit closer to balance. The canonical geometry (translateX ±55%, width 120%
   / left -10%) is UNTOUCHED — only warm intensity eases. Reversible (delete to restore
   full-strength prototype waves). */
:root[data-theme="dark"] .coastal-page-bg:not(.coastal-page-bg--internal) .coastal-page-bg__layer--red {
  opacity: 0.78;
}


/* ── D3 · Feather the home hero service/area marquee edges on mobile ──
   The strips marquee with overflow:hidden, so on small screens the row was cut
   mid-word at the right viewport edge (hard clip). Fade both edges so links dissolve
   in/out like an intentional ribbon instead of a hard cut. Marquee animation intact. */
@media (max-width: 1099px) {
  .category-strip__items,
  .home-post-strip__items {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
}

/* ── E2 · Light mode: more transparency on the hero background footage (video) ──
   The scene SVG + airflow are eased above; ease the <video> footage too so the light
   hero stays airy when a video is present (no effect when absent). */
:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .parallax-hero__bg-video {
  opacity: 0.4 !important;
}

/* Hero height restoration: force 100vh / 100dvh for the 'perfect fold' */
.home-page .parallax-hero.le-cover,
.le-template-category .parallax-hero.le-cover {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 600px !important;
}

.home-page .parallax-hero__stage,
.le-template-category .parallax-hero__stage {
    height: 100vh !important;
    height: 100dvh !important;
}

/* Ensure hero graphics bleed under the pulled-up strips to prevent 'bottom line' clipping */
.home-page .parallax-hero .hero-bg,
.home-page .parallax-hero .parallax-hero__bg-video-wrap {
  bottom: 0 !important;
}

/* --- Home Hero Polish --- */

/* 2. Dark Theme Text Legibility */
:root[data-theme="dark"] .home-page .parallax-hero__title {
    text-shadow: 0 4px 12px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.4) !important;
}
:root[data-theme="dark"] .home-page .parallax-hero__lede {
    text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important;
    opacity: 1 !important;
}

:root[data-theme="dark"] .home-page .parallax-hero__bg-video-scrim {
    background: linear-gradient(135deg, rgba(2, 6, 15, 0.35) 0%, rgba(2, 6, 15, 0.15) 60%, rgba(2, 6, 15, 0.35) 100%) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   INTERIOR CATEGORY-STRIP → HOME PARITY  (user 2026-06-09:
   "match category strip block to appear like home; services and areas need
   look like home")

   The earlier "PREMIUM INTERIOR DIRECTORY STRIP" treatment (this file, the
   :is(.le-template-category,.le-template-article) .category-strip block ~L432-519)
   repainted the role-page strips as a faint hairline-ruled directory with a BLUE
   eyebrow + hairline tail + smaller ink links — visibly UNLIKE the home marquee
   ribbon. Per request, revert the role-page strips to the HOME look: solid glass
   band, light eyebrow (no tail, home scale), light blue-white links, SVG bolt/pin
   bullets, marquee on mobile. Re-asserted here at end-of-file so source order wins
   over that interior block at equal (0,2,0) specificity — and we stay clear of the
   fragile mid-file region (a stray top-level close-brace near L519 makes line-deletes
   there risky; whole-file brace diff is -1 by design). Light-theme eyebrow/link INK is
   intentionally kept (white text would vanish on the cream light surface).
   ════════════════════════════════════════════════════════════════════════════ */

/* 1 ─ Container: solid glass band like home (undo the faint hairline-rule surface). */
:is(.le-template-category, .le-template-article) .category-strip {
  padding-block: 0 !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  -webkit-backdrop-filter: var(--glass-blur-md) !important;
          backdrop-filter: var(--glass-blur-md) !important;
  background: rgba(2, 6, 15, 0.92) !important;
}
:root[data-theme="light"] body.cb-role-internal .le-template-article .category-strip {
  background: rgba(252, 247, 238, 0.92) !important;
  border-top-color: rgba(0, 0, 0, 0.10) !important;
}
:root[data-theme="light"] body.cb-role-internal .le-template-category .category-strip {
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
@media (max-width: 1099px) {
  :is(.le-template-category, .le-template-article) .category-strip {
    background: rgba(2, 6, 15, 1) !important;
  }
  :root[data-theme="light"] body.cb-role-internal .le-template-article .category-strip {
    background: rgba(252, 247, 238, 1) !important;
  }
  :root[data-theme="light"] body.cb-role-internal .le-template-category .category-strip {
    background: transparent !important;
  }
}

/* 2 ─ Eyebrow label: home scale (13px / .18em), light tint in dark (was brand-blue),
       no hairline tail. Light keeps navy ink for cream readability. */
:is(.le-template-category, .le-template-article) .category-strip__label {
  display: flex !important;
  gap: 0 !important;
  padding: 8px 22px !important;
  min-width: 140px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  color: rgb(230, 242, 255) !important;
}
:root[data-theme="light"] :is(.le-template-category, .le-template-article) .category-strip__label {
  color: var(--le-ink, #14243c) !important;
}
:is(.le-template-category, .le-template-article) .category-strip__label::after {
  content: none !important;
  display: none !important;
}

/* 3 ─ Links: home size/tracking + light blue-white (dark) / navy (light). */
:is(.le-template-category, .le-template-article) .category-strip__link {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  white-space: nowrap !important;
  color: rgb(230, 242, 255) !important;
}
:root[data-theme="light"] :is(.le-template-category, .le-template-article) .category-strip__link {
  color: #003366 !important;
}

/* 4 ─ Bullets: home dot tint + opacity (undo the faint ink override) and keep them
       visible on mobile (the directory had hidden the wrapped-row separators). */
:is(.le-template-category, .le-template-article) .category-strip__item::before {
  color: var(--dot-high, rgb(144, 213, 255)) !important;
  opacity: 0.7 !important;
  display: inline-block !important;
}

/* 5 ─ Mobile strip: restore the EXACT pre-today marquee row for ALL strips. Today's
       genericization regressed the home mobile strip two ways vs before-today:
         (a) overflow went visible (base L1794 / reduced-motion L2118) → marquee not clipped;
         (b) the items track gained `padding:10px 0` + `row-gap:4px` (pre-today: 0) →
             the strip rendered ~20px taller than before-today.
       Pin both back to pre-today: clipped (`hidden`) + zero item padding/row-gap, so the
       home strip height + clip match before-today, applied GLOBALLY (home + interior). */
@media (max-width: 1099px) {
  .category-strip__items, .home-post-strip__items,
  :is(.le-template-category, .le-template-article) .category-strip__items {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding: 0 !important;
    row-gap: 0 !important;
  }
  .category-strip__items::-webkit-scrollbar, .home-post-strip__items::-webkit-scrollbar {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.le-template-category, .le-template-article) .category-strip__items {
    flex-wrap: wrap !important;
    width: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   TOUCH-TARGET FLOOR — track uiux-production-proof_20260610, Phase 2.
   production-readiness.spec.js flagged these interactive controls below the 44px
   AAA/HIG tap target on touch viewports. min-height/min-width + inline-flex centering
   enlarges the HIT AREA without changing the visual padding/icon. Scoped ≤768px
   (touch range the audit gates); all are content-sized, so inline-flex is layout-safe.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .contact-cta__call-pill,
  .contact-cta__add-property,
  .le-mag-split-cta,
  .home-post-strip__home-link,
  .all-reviews,
  .le-cover-schedule {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .contact-cta__gps-btn,
  .contact-cta__gps-btn.le-locate,
  .le-locate {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Brand logo links (primary cb-nav + interior le-nav) — 2px/short on mobile. */
  .cb-nav__brand,
  .le-brand {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  /* Footer contact links (phone/email) — keep block width, vertical-center to 44px.
     Two distinct footers: home `footer.htm` (.site-footer__contact-item) and the
     interior `le-footer.htm` (.le-footer-contact). */
  .site-footer__contact-item a,
  .le-footer-contact a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    width: fit-content !important;
  }
  /* Secondary section jump-nav (interior le-nav links + home scrollspy tabs) are real
     navigation, not prose — floor to 44px; min-width covers short labels like "FAQ". */
  .le-nav-links a,
  .home-post-strip__items a {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   EDGE FEATHERING — track uiux-production-proof_20260610, Phase 3.
   "background images and CSS containers feather transparency on the edges." The strip
   containers (~L1924 mask) and interior motif layers (.le-section-motif/.le-deco-motif,
   already masked) dissolve their edges; extend the SAME treatment to the background-
   image / atmosphere layers that still had hard rectangular bounds — the interior HVAC
   scene, the home hero-wave + airflow signature, and the motif fields — so no decorative
   layer butts a hard seam against the page. Static masks (no animation) → no compositing
   cost (the bg-filter-performance budget is untouched). Verified by edge-feather.spec.js.
   ════════════════════════════════════════════════════════════════════════════ */

/* Full-cover background scenes / motif fields → dissolve all four edges. */
.le-hvac-scene,
.le-cover-motif-field {
  -webkit-mask-image: radial-gradient(ellipse 90% 86% at 50% 46%, #000 58%, rgba(0,0,0,0.35) 84%, transparent 100%) !important;
          mask-image: radial-gradient(ellipse 90% 86% at 50% 46%, #000 58%, rgba(0,0,0,0.35) 84%, transparent 100%) !important;
  -webkit-mask-repeat: no-repeat !important;
          mask-repeat: no-repeat !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   A11Y CONTRAST — track uiux-production-proof_20260610, Phase 4.
   Light-theme WCAG 4.5:1 fixes (axe). blocks.css is read-only, so the eyebrow is
   overridden here. The light contact-cta eyebrow was coral #c36a3c on cream = 3.35:1.
   ════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] .contact-cta__eyebrow {
  color: #8f3e1f !important;   /* darker coral ≈ 5.4:1 on the cream surface */
}

/* Category strips: compact marquee through tablet, full index on desktop.
   This restores the historical ABF split while keeping desktop service/area
   entries visible in two rows instead of a horizontally scrolling marquee. */
@media (min-width: 1100px) {
  body .category-strip {
    --category-strip-cols: 4;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    text-align: left !important;
    min-height: 88px !important;
    height: auto !important;
    padding: 0 clamp(16px, 2vw, 32px) !important;
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    max-width: 100% !important;
    width: 100% !important;
    background:
      linear-gradient(180deg, rgba(5, 12, 24, 0.96), rgba(2, 6, 15, 0.93)) !important;
    background-color: rgba(2, 6, 15, 0.92) !important;
    box-shadow:
      inset 0 1px 0 rgba(180, 220, 255, 0.1),
      inset 0 -1px 0 rgba(80, 140, 180, 0.16) !important;
  }

  body .category-strip__label {
    min-width: 0 !important;
    width: clamp(136px, 11vw, 164px) !important;
    max-width: none !important;
    margin-bottom: 0 !important;
    padding: 0 clamp(12px, 1.35vw, 18px) 0 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    align-self: stretch !important;
    border-right: 1px solid rgba(180, 220, 255, 0.16) !important;
  }

  body .category-strip__items,
  body .category-strip__items:not([data-marquee-active="true"]),
  :is(.le-template-category, .le-template-article) .category-strip__items {
    display: grid !important;
    grid-template-columns: repeat(var(--category-strip-cols), minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(30px, auto) !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px clamp(10px, 1.1vw, 18px) !important;
    justify-content: center !important;
    align-content: center !important;
    align-items: center !important;
    gap: 8px clamp(10px, 1.15vw, 18px) !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
  }

  body .category-strip__item {
    flex: initial !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body .category-strip__item::before {
    content: none !important;
    display: none !important;
    position: absolute !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
  }

  body .category-strip__item:not(:first-child)::before {
    content: "•" !important;
    display: block !important;
    left: calc(clamp(10px, 1.15vw, 18px) / -2) !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: rgba(190, 226, 255, 0.68) !important;
    font-size: 9px !important;
    line-height: 1 !important;
    opacity: 0.9 !important;
    pointer-events: none !important;
  }

  body .category-strip--services:not(:has(.category-strip__items > .category-strip__item:nth-child(6):last-child)) .category-strip__item:nth-child(4n + 1)::before,
  body .category-strip--services:has(.category-strip__items > .category-strip__item:nth-child(6):last-child) .category-strip__item:nth-child(3n + 1)::before,
  body .category-strip--areas:not(:has(.category-strip__items > .category-strip__item:nth-child(9):last-child)) .category-strip__item:nth-child(8n + 1)::before,
  body .category-strip--areas:has(.category-strip__items > .category-strip__item:nth-child(9):last-child) .category-strip__item:nth-child(5n + 1)::before {
    content: none !important;
    display: none !important;
  }

  body .category-strip--services:has(.category-strip__items > .category-strip__item:nth-child(6):last-child) {
    --category-strip-cols: 3;
  }

  body .category-strip--areas .category-strip__item {
    flex-basis: initial !important;
    max-width: none !important;
  }

  body .category-strip--areas {
    --category-strip-cols: 8;
  }

  body .category-strip--areas .category-strip__items:has(> .category-strip__item:nth-child(9):last-child) > .category-strip__item {
    flex-basis: initial !important;
    max-width: none !important;
  }

  body .category-strip--areas:has(.category-strip__items > .category-strip__item:nth-child(9):last-child) {
    --category-strip-cols: 5;
  }

  body .category-strip__link,
  body .category-strip__items a,
  :is(.le-template-category, .le-template-article) .category-strip__link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    text-wrap: nowrap !important;
    text-align: center !important;
    line-height: 1.15 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 2px !important;
  }

  body .category-strip__items::-webkit-scrollbar {
    display: none !important;
  }

}

/* ============================================================
   GOLD SCHEDULE IDENTITY  (TAG-20260620-GOLD-CTA)
   ------------------------------------------------------------
   Champagne/gold metallic treatment for the "Schedule" CTA across home +
   interior, both themes. Replaces the off-palette coral that clashed with the
   cool navy/champagne system. Placed LAST so it wins the cascade over the
   prior coral rules (e.g. line ~4143) without surgically editing each.

   FUTURE THEMING (white-label): re-skin by editing ONLY the --le-gold-* tokens
   below. Nothing else in this block hard-codes a colour. blocks.css stays
   read-only; all of this lives here per project convention.
   ============================================================ */
:root,
:root[data-theme="dark"],
.le {
  --le-grad-gold: linear-gradient(135deg, #f4e3b4 0%, #e4c680 42%, #c9a456 100%);
  --le-gold-ink: #2a2008;                                   /* dark ink — 6.8:1 on the gradient's darkest stop */
  /* Defined darker rim (visible on the bright champagne — a same-tone hairline was
     invisible). The most important button on the site needs a real edge. */
  --le-gold-edge: rgba(146, 104, 38, 0.60);
  /* "Minted coin" depth: bright top bevel + dark bottom rim (inset) + a two-layer
     drop shadow (tight contact + wide ambient lift). Drives every gold CTA form. */
  --le-gold-glow:
    inset 0 1px 0 rgba(255, 252, 240, 0.60),
    inset 0 -1px 0 rgba(110, 76, 22, 0.32),
    0 6px 14px -6px rgba(176, 134, 56, 0.52),
    0 16px 34px -12px rgba(140, 100, 40, 0.42);
  --le-gold-glow-hi:
    inset 0 1px 0 rgba(255, 252, 240, 0.72),
    inset 0 -1px 0 rgba(110, 76, 22, 0.30),
    0 10px 22px -8px rgba(176, 134, 56, 0.62),
    0 26px 50px -14px rgba(140, 100, 40, 0.52);
}
:root[data-theme="light"],
.le[data-theme="light"] {
  /* LIGHT GOLD SCHEME (TAG-20260620-GOLD-LIGHT): light keeps its OWN scheme — a
     richer brass-champagne that pops against the cream page (bright champagne
     washes out on parchment). The single source of truth for EVERY gold CTA in
     light (nav, listing, cover pill, submit), so light mode is consistent
     throughout. Dark ink for contrast; defined warm edge + depth. */
  --le-grad-gold: linear-gradient(135deg, #edcd7d 0%, #d3a951 48%, #ba8f37 100%);
  --le-gold-ink: #2a1d05;                                   /* ~6:1 on the gradient (AA) */
  --le-gold-edge: rgba(140, 100, 34, 0.62);                /* defined brass rim on cream */
  --le-gold-glow:
    inset 0 1px 0 rgba(255, 250, 232, 0.62),
    inset 0 -1px 0 rgba(120, 86, 28, 0.30),
    0 6px 14px -6px rgba(150, 112, 42, 0.42),
    0 16px 32px -12px rgba(150, 112, 42, 0.34);
  --le-gold-glow-hi:
    inset 0 1px 0 rgba(255, 250, 232, 0.70),
    inset 0 -1px 0 rgba(120, 86, 28, 0.28),
    0 10px 22px -8px rgba(150, 112, 42, 0.52),
    0 26px 48px -14px rgba(150, 112, 42, 0.42);
}

/* The schedule CTA — gold fill, single-line label, refined depth.
   Selectors mirror the prior winners' specificity and come later → they win. */
:root .le-mag-split-cta,
:root .le-mag-split-cta--primary,
:root[data-theme="dark"] .home-page .le-mag-split-cta,
:root[data-theme="light"] .home-page .le-mag-split-cta {
  background: var(--le-grad-gold) !important;
  color: var(--le-gold-ink) !important;
  border: 1px solid var(--le-gold-edge) !important;
  box-shadow: var(--le-gold-glow) !important;
  font-size: 12.5px !important;
  letter-spacing: 0.13em !important;
  white-space: nowrap !important;                           /* kill the 2-line "SCHEDULE / SERVICE" wrap */
  padding: 0.62rem 1.3rem !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
:root .le-mag-split-cta:hover,
:root .le-mag-split-cta:focus-visible,
:root .le-mag-split-cta--primary:hover,
:root .le-mag-split-cta--primary:focus-visible,
:root[data-theme="dark"] .home-page .le-mag-split-cta:hover,
:root[data-theme="dark"] .home-page .le-mag-split-cta:focus-visible,
:root[data-theme="light"] .home-page .le-mag-split-cta:hover,
:root[data-theme="light"] .home-page .le-mag-split-cta:focus-visible {
  background: var(--le-grad-gold) !important;
  color: var(--le-gold-ink) !important;
  border-color: var(--le-gold-edge) !important;
  box-shadow: var(--le-gold-glow-hi) !important;
  filter: brightness(1.06) !important;
  transform: translateY(-2px) !important;
}

/* Article-cover + interior schedule pill (.le-pill.primary / .le-cover-schedule)
   shares the gold schedule identity. Overrides prototype/internal.css:445 (warm
   coral) without editing that file. */
.le .le-pill.primary,
.le .le-cover-schedule,
.le-cover-schedule {
  background: var(--le-grad-gold) !important;
  color: var(--le-gold-ink) !important;
  border-color: var(--le-gold-edge) !important;
  box-shadow: var(--le-gold-glow) !important;
}
.le .le-pill.primary:hover,
.le .le-pill.primary:focus-visible,
.le .le-cover-schedule:hover,
.le .le-cover-schedule:focus-visible {
  box-shadow: var(--le-gold-glow-hi) !important;
  filter: brightness(1.06) !important;
}


/* ============================================================
   HOME TEXT HALO → CATEGORY + ARTICLE  (TAG-20260620-HALO-PARITY)
   Apply the home page's unified 5-layer text-shadow halo (blocks.css:9086)
   to interior category + article text, so type reads with the same feathered
   legibility over the atmospheric background. Cream edge + navy glow on dark;
   inverted on light. The deliberately-refined cover H1 / lede keep their own
   (higher-specificity) prototype-parity treatment; this lifts the body, card,
   spec, and divider text that was previously flat.
   Buttons / gold CTAs / icons opt out (own surfaces — a halo muddies them).
   ============================================================ */
:root[data-theme="dark"] .le-template-category *,
:root[data-theme="dark"] .le-template-article *,
.le-template-category[data-theme="dark"] *,
.le-template-article[data-theme="dark"] * {
  text-shadow:
    rgb(247 244 237 / 36%) 0 1px 0,
    rgb(247 244 237 / 68%) 0 0 1px,
    rgb(0 8 24 / 100%) 0 0 5px,
    rgb(0 8 24 / 100%) 0 0 9px,
    rgb(0 8 24 / 100%) 0 0 19px !important;
}
:root[data-theme="light"] .le-template-category *,
:root[data-theme="light"] .le-template-article *,
.le-template-category[data-theme="light"] *,
.le-template-article[data-theme="light"] * {
  text-shadow:
    rgb(0 8 24 / 36%) 0 1px 0,
    rgb(0 10 30 / 68%) 0 0 1px,
    rgb(255 255 255 / 100%) 0 0 5px,
    rgb(255 255 255 / 100%) 0 0 9px,
    rgb(255 255 255 / 100%) 0 0 19px !important;
}
/* Opt-outs: text on a coloured surface (buttons, gold schedule CTAs, badges)
   and non-text glyphs (icons, SVGs) drop the halo. :root prefix + !important so
   these outrank the universal halo above (equal classes, later source order). */
:root .le-template-category .btn, :root .le-template-category .btn *,
:root .le-template-article .btn, :root .le-template-article .btn *,
:root .le-template-category button, :root .le-template-category button *,
:root .le-template-article button, :root .le-template-article button *,
:root .le-template-category .le-mag-split-cta, :root .le-template-category .le-mag-split-cta *,
:root .le-template-article .le-mag-split-cta, :root .le-template-article .le-mag-split-cta *,
:root .le-template-category .le-pill.primary, :root .le-template-category .le-pill.primary *,
:root .le-template-article .le-pill.primary, :root .le-template-article .le-pill.primary *,
:root .le-template-category .le-cover-schedule, :root .le-template-category .le-cover-schedule *,
:root .le-template-article .le-cover-schedule, :root .le-template-article .le-cover-schedule *,
:root .le-template-category i[class*="fa-"], :root .le-template-article i[class*="fa-"],
:root .le-template-category svg, :root .le-template-category svg *,
:root .le-template-article svg, :root .le-template-article svg *,
:root :is(.le-template-category, .le-template-article, .le, body) :is(.contact-cta, .contact-cta *, .contact-cta__form, .contact-cta__form *, .le-form, .le-form *, .le-contact-form, .le-contact-form *) {
  -webkit-text-stroke: 0 transparent !important;
  text-shadow: none !important;
  filter: none !important;
}

/* ============================================================
   CONTACT FORM — centerpiece polish  (TAG-20260620-CONTACT-FORM)
   The conversion form is the site's center feature: balanced layout (no lone
   half-width fields leaving dead space), crafted panel material, theme-matched
   (dark + light), and responsive (rows already collapse to 1col ≤600).
   ============================================================ */
/* 1 — Kill dead space: a field that is alone in its 2-col row spans full width
   (Phone, Photos/Video). Name+Email rows have two fields and stay side-by-side. */
.contact-cta__row > .contact-cta__field:only-child {
  grid-column: 1 / -1 !important;
}

/* 2 — Panel material: a crafted glass plate instead of a flat rectangle.
   DARK: deep navy gradient + inner highlight + soft depth. */
.contact-cta__form {
  border-radius: 18px !important;
  background: linear-gradient(165deg, rgba(14, 28, 56, 0.55) 0%, rgba(6, 14, 30, 0.40) 100%) !important;
  border: 1px solid rgba(190, 220, 250, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 34px 80px -44px rgba(0, 8, 24, 0.85) !important;
  padding: clamp(1.4rem, 3.2vw, 2.5rem) !important;
}
/* LIGHT: warm parchment gradient + bright top edge + warm depth. */
:root[data-theme="light"] .contact-cta__form,
.le[data-theme="light"] .contact-cta__form {
  background: linear-gradient(165deg, rgba(255, 253, 247, 0.94) 0%, rgba(247, 242, 231, 0.84) 100%) !important;
  border: 1px solid rgba(120, 90, 40, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 34px 70px -46px rgba(120, 96, 40, 0.30) !important;
}

/* 3 — Message field: 80px was cramped for "describe the issue". Give it room. */
.contact-cta__textarea { min-height: 132px !important; }

/* ============================================================
   PRIMARY SUBMIT CTA — champagne-metal polish  (TAG-20260620-SUBMIT-CTA)
   The form's "Request a Free Quote" button is the most important action on the
/* Unified Contact Form Submit CTA: 100% Identical Blue Pill Gradient Everywhere */
:root :is(.contact-cta__submit, .le-submit, .contact-form-block button[type="submit"], .btn-contact) {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 0.85rem 2.25rem !important;
  background: linear-gradient(135deg, #356cc8, #1e4588) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-family: var(--font-body-coastal, 'Manrope', 'Inter', system-ui, -apple-system, sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(30, 69, 136, 0.45) !important;
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease, filter .22s ease !important;
}

:root[data-theme="light"] :is(.contact-cta__submit, .le-submit, .contact-form-block button[type="submit"], .btn-contact),
.le[data-theme="light"] :is(.contact-cta__submit, .le-submit, .contact-form-block button[type="submit"], .btn-contact) {
  background: linear-gradient(135deg, #1e4588, #0e2a58) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(14, 42, 88, 0.35) !important;
}

:root :is(.contact-cta__submit:hover, .le-submit:hover, .contact-form-block button[type="submit"]:hover, .btn-contact:hover) {
  transform: translateY(-2px) !important;
  filter: brightness(1.08) !important;
  box-shadow: 0 12px 32px rgba(30, 69, 136, 0.60) !important;
  background: linear-gradient(135deg, #4078db, #25529e) !important;
}
:root :is(.contact-cta__submit:active, .le-submit:active) { transform: translateY(0) !important; }
/* advancing arrow */
.contact-cta__submit svg,
.contact-cta__submit .contact-cta__submit-arrow {
  transition: transform .22s ease !important;
}
.contact-cta__submit:hover svg,
.contact-cta__submit:hover .contact-cta__submit-arrow {
  transform: translateX(4px) !important;
}
/* one-pass light sweep on hover (the metal catches the light) */
.contact-cta__submit::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.5) 50%, transparent 68%) !important;
  transform: translateX(-130%) !important;
  transition: transform .6s cubic-bezier(.4,0,.2,1) !important;
  pointer-events: none !important;
}
.contact-cta__submit:hover::after { transform: translateX(130%) !important; }
@media (prefers-reduced-motion: reduce) {
  .contact-cta__submit, .contact-cta__submit::after,
  .contact-cta__submit svg { transition: none !important; }
  .contact-cta__submit:hover { transform: none !important; }
  .contact-cta__submit:hover::after { transform: translateX(-130%) !important; }
}

/* SERVICE DETAILS STRIP → TEMPLATE WIDTH  (TAG-20260620-SPEC-WIDTH)
   The .le-spec stat strip ("Service details": SERVICE TYPE / COVERAGE / LICENSE
   / UPDATED) shipped a flat `padding: 26px 96px`, so its content started at 96px
   while the cover content (lede, schedule pill, "PREPARED BY") sits at the
   template gutter --le-abf-pad-x (176px @1440). Align the spec to template width
   by reusing the same gutter token — keeps the cover→spec left edge consistent at
   every viewport (the token folds back to the fluid gutter below 1280). Vertical
   padding unchanged. Mobile flex-wrap rules (~4098) still win in their @media.
   CAP at 176px (the @1440 value): --le-abf-pad-x keeps GROWING with viewport (it's a
   full-bleed gutter token, 416px @1920), but the spec lives in a max-width-capped
   column (~1088px), so unbounded padding crushed the 5 items to ~12px each at ≥~1500.
   min(token, 176px) holds the cover-gutter alignment up to 1440 and stops there, so
   wide desktops keep the comfortable @1440 plate. (TAG-20260621-SPEC-WIDE) */
.le.le-template-category .le-spec {
  padding-left: min(var(--le-abf-pad-x), 176px) !important;
  padding-right: min(var(--le-abf-pad-x), 176px) !important;
}

/* ARTICLE spec → theme width (TAG-20260624-SPEC-THEME-WIDTH).
   The strip shipped full-bleed (its hairline gradient ran screen-edge to
   screen-edge while every other block is contained). Cap it to the article
   FOREGROUND (--le-abf-max, 1280) and centre it, then use --le-abf-gutter as
   the inner pad. That math reproduces the cover gutter exactly at every width
   ((100vw−1280)/2 + gutter == --le-abf-pad-x), so the cover→spec left edge
   stays aligned AND the strip/background no longer bleeds past 1280. */
.le.le-template-article .le-spec {
  max-width: var(--le-abf-max) !important;
  margin-inline: auto !important;
  padding-left: var(--le-abf-gutter) !important;
  padding-right: var(--le-abf-gutter) !important;
}

/* ARTICLE in-page nav removed (TAG-20260620-ARTICLE-NAV): per direction the
   "ON THIS PAGE / RECENT PROJECTS / GET A FREE QUOTE" secondary bar is dropped
   from ARTICLE pages. The same bar stays sticky on CATEGORY pages (the base
   rule keeps position:sticky; only articles are removed here). */
.le.le-template-article .le-nav--secondary,
body.cb-role-internal .le.le-template-article .le-nav--secondary {
  display: none !important;
}


/* ============================================================
   NAV "SCHEDULE SERVICE" CTA → gold schedule identity  (TAG-20260620-NAV-CTA)
   .cb-nav__cta--contact shipped a translucent coral→BLUE glass gradient (theme.css
   1300/1637) that pushed MORE blue on hover — off-palette. Make the nav's primary
   action match the gold schedule identity used everywhere else (cover pill, listing,
   submit); CALL/TEXT stay glass as secondary actions. Both themes via --le-gold-*
   tokens (defined on :root, so available to the nav outside .le). Loaded after
   theme.css → wins; :root prefix matches the light rule's specificity. */
:root .cb-nav__cta--contact,
:root[data-theme="light"] .cb-nav__cta--contact {
  background: var(--le-grad-gold) !important;
  border: 1px solid var(--le-gold-edge) !important;
  color: var(--le-gold-ink) !important;
  box-shadow: var(--le-gold-glow) !important;
  transition: background .25s, border-color .25s, box-shadow .25s, transform .25s, filter .25s !important;
}
:root .cb-nav__cta--contact:hover,
:root .cb-nav__cta--contact:focus-visible,
:root[data-theme="light"] .cb-nav__cta--contact:hover,
:root[data-theme="light"] .cb-nav__cta--contact:focus-visible {
  background: var(--le-grad-gold) !important;
  border-color: var(--le-gold-edge) !important;
  color: var(--le-gold-ink) !important;
  box-shadow: var(--le-gold-glow-hi) !important;
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
}
/* icon + label ride the dark ink (svg stroke = currentColor) */
:root .cb-nav__cta--contact .cb-nav__cta-label,
:root .cb-nav__cta--contact .cb-nav__cta-label-full,
:root .cb-nav__cta--contact .cb-nav__cta-label-short,
:root .cb-nav__cta--contact svg {
  color: var(--le-gold-ink) !important;
}

/* ============================================================
   GOLD CTA TEXT — crisp black ink, NO glow  (TAG-20260620-CTA-INK)
   Text on a solid high-contrast gold surface needs no text-shadow at all. The
   universal text-halo bled a dark smudge onto CTAs inside the interior shell
   (e.g. the nav "Schedule Service" within .le-template-article); a white glow
   was a wrong overcorrection that washed the dark label toward gray and blurred
   its edges. Correct fix: opt every gold CTA OUT of the halo (text-shadow: none)
   and pin a crisp near-black ink, so labels read sharp in both themes. Appended
   last + :root[data-theme] specificity (0,3,0) beats the universal halo.
   STANDING GUARDRAIL (per direction): the schedule button must NEVER inherit a
   blanket/dark text-shadow or outline. Keep text-shadow:none here; if a shadow is
   ever genuinely wanted, it must be WHITE only — never dark. Vet any future
   blanket universal-selector or halo rule against this. */
:root[data-theme] .cb-nav__cta--contact,
:root[data-theme] .cb-nav__cta--contact *,
:root[data-theme] .le-mag-split-cta,
:root[data-theme] .le-mag-split-cta *,
:root[data-theme] .le-mag-split-cta--primary,
:root[data-theme] .le-mag-split-cta--primary *,
:root[data-theme] .le-pill.primary,
:root[data-theme] .le-pill.primary *,
:root[data-theme] .le-cover-schedule,
:root[data-theme] .le-cover-schedule *,
:root[data-theme] .contact-cta__submit,
:root[data-theme] .contact-cta__submit * {
  text-shadow: none !important;
  color: #161208 !important;            /* near-black, crisp on the gold */
}

/* ============================================================
   HOME — tighter vertical rhythm + trust-strip polish  (TAG-20260620-HOME-RHYTHM)
   ============================================================ */
/* 1 — Collapse the cavernous inter-block whitespace. Each home block stacked
   THREE spacers — wrapper margin + wrapper padding + inner-section padding
   (~250px between content). Let the wrapper padding own the rhythm (ONE knob)
   and zero the other two so sections read as a cohesive page.

   LUXURY RHYTHM + EASY PIVOT-BACK: --home-sect is the single section-spacing knob
   (per-side wrapper padding; the gap between two sections is 2× this). Set
   generous + EQUAL for a confident, premium cadence rather than cramped.
     • luxury (current): clamp(1.9rem, 3.3vw, 3rem)   → ~60–96px between sections
     • compact (prior):  clamp(1.6rem, 2.8vw, 2.5rem) → ~52–80px
   To pivot back, swap the value below (or git revert this commit). */


/* ============================================================
   RESPONSIVE SCHEDULE CTA — keep the label on mobile (TAG-20260620-CTA-MOBILE)
   The section-list (.le-mag-split-cta) and article-cover (.le-cover-schedule)
   schedule buttons borrow the nav's .cb-nav__cta-label markup, so the nav's
   unscoped mobile rule (theme.css:1923 `.cb-nav__cta-label{display:none}`)
   blanked their label. The nav survives because it keeps an icon — but the
   section-list CTA has NO icon (it became an EMPTY gold circle) and the
   article-cover CTA is the page's primary action (shouldn't drop to icon-only).
   These are content CTAs, not chrome: restore the SHORT label as a real pill.
   Scoped to these two CTAs so the nav's icon-collapse is untouched. */
/* theme.css hides .cb-nav__cta-label up to max-width:1500px (its own nav
   overflow fallback), but .le-mag-split-cta/.le-cover-schedule borrow that
   same class and aren't part of the nav — so on any viewport 769-1500px
   (effectively all tablet AND most desktop/laptop widths) these content CTAs
   were silently collapsing to an icon-only circle. This restoration used to
   stop at 768px, covering only phones; widen it to 1500px to match the
   actual range of the rule it's working around. */
@media (max-width: 1500px) {
  .le-mag-split-cta .cb-nav__cta-label,
  .le-cover-schedule .cb-nav__cta-label {
    display: inline-flex !important;
    align-items: center !important;
  }
  .le-mag-split-cta .cb-nav__cta-label-full,
  .le-cover-schedule .cb-nav__cta-label-full { display: none !important; }
  .le-mag-split-cta .cb-nav__cta-label-short,
  .le-cover-schedule .cb-nav__cta-label-short { display: inline !important; }
  /* let the label size the button into a pill (the 44px floor was making an empty
     square); keep the 44px touch HEIGHT. */
  .le-mag-split-cta,
  .le-cover-schedule {
    width: auto !important;
    min-width: 0 !important;
    border-radius: 999px !important;
    gap: 8px !important;
  }
}

/* ============================================================
   ARTICLE COVER — hide orphaned diagram on single-column (TAG-20260620-COVER-DIAGRAM-RESP)
   The article cover is a 2-col grid (text | diagram) that collapses to ONE column
   at max-width:1099px (prototype/internal.css:886). The right-column system-schematic
   diagram was only hidden on short-height (max-height:560px) and ≤375px viewports —
   so across the whole 376–1099px range (portrait mobile + all tablets) it stayed
   positioned where the 2nd column used to be and crashed through the lede, the gold
   schedule pill, and the "Prepared by" meta. Hide it on single-column (matching the
   layout's own collapse breakpoint); the breeze-field atmosphere remains. Article
   only — category heroes untouched. */
@media (max-width: 1099px) {
  .le.le-template-article .le-cover .le-diagram { display: none !important; }
}

/* ============================================================
   IN-PAGE MENU — mobile/tablet TAP-EXPAND  (TAG-20260621-INPAGE-EXPAND)
   ≤1099px the fixed scrollspy bar degraded into a cramped 2-row auto-marquee
   (links clipped + moving = untappable). Replace it with an in-flow,
   tap-to-expand "On this page" menu: collapsed to one tappable row by default,
   tap opens a vertical section list, tap a link/toggle to shrink. Crucially it is
   NOT fixed and carries no reveal transform — so it sits in normal flow below the
   hero and never stays stuck up in the ABF.
   ============================================================ */
.home-post-strip__toggle { display: none; }   /* desktop (≥1100): toggle hidden, bar behaves as before */

@media (max-width: 1099px) {
  /* In-flow, never the fixed ABF-docked reveal bar; neutralise reveal transform/opacity. */
  #home-post-strip.home-post-strip {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 0 !important;             /* the strip's 60px min-height (line 1878) was leaking the collapsed items */
    display: block !important;
    margin: 0 !important;
    padding: 6px var(--fluid-pad-x, 18px) !important;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  #home-post-strip .home-post-strip__home-link { display: none !important; } /* toggle replaces the bare "Home" link */

  /* Collapsed bar = the toggle button */
  #home-post-strip .home-post-strip__toggle {
    display: flex !important;
    align-items: center; justify-content: space-between;
    width: 100%; gap: 12px;
    background: none; border: 0; cursor: pointer;
    color: inherit;
    font-family: var(--font-utility, 'Manrope', sans-serif);
    font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    padding: 10px 2px !important;
    min-height: 44px;
  }
  #home-post-strip .home-post-strip__toggle-chevron { flex: 0 0 auto; transition: transform .25s ease; }
  #home-post-strip.is-open .home-post-strip__toggle-chevron { transform: rotate(180deg); }

  /* Items: collapsed vertical list; expand on .is-open. NO marquee/horizontal scroll.
     Selector carries body + #id.class so it outranks the existing
     `body #home-post-strip .home-post-strip__items { max-height:60px; display:flex }`
     (1,1,1) and `…:not([data-marquee-active]) { display:flex }` (1,2,1) rules. */
  body #home-post-strip.home-post-strip .home-post-strip__items {
    display: block !important;
    flex-wrap: nowrap !important;
    width: 100% !important; max-width: none !important;
    min-height: 0 !important;
    max-height: 0 !important; overflow: hidden !important;
    transition: max-height .3s ease !important;
    animation: none !important; transform: none !important;
    padding: 0 !important; margin: 0 !important;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  body #home-post-strip.home-post-strip.is-open .home-post-strip__items {
    max-height: 75vh !important; overflow-y: auto !important;
  }
  #home-post-strip .home-post-strip__items li {
    width: 100% !important; margin: 0 !important; display: block !important;
  }
  #home-post-strip .home-post-strip__items li::before { display: none !important; } /* drop the inter-item separators */
  #home-post-strip .home-post-strip__items a {
    display: block !important;
    padding: 12px 4px !important;        /* ≥44px tap target */
    border-bottom: 1px solid rgba(190, 220, 250, 0.12);
  }
}
:root[data-theme="light"] #home-post-strip .home-post-strip__items a { border-bottom-color: rgba(20, 50, 100, 0.12); }

/* ============================================================
   FULL-LAYOUT CATEGORY STRIP — type normalization (TAG-20260621-STRIP-TYPE)
   The earlier 14px + heavy tracking (links 0.2em, label 0.26em) read wonky and
   overflowed the label: "SERVING YOUR AREA" at 14px/0.26em = 221px vs the
   ~140px rail content → 63px overflow. Normalize to a consistent, clean scale:
   13px items/links + a 12px eyebrow label, light uniform 0.1em tracking, one
   shared line-height, single-line items, and a label that WRAPS within its rail
   instead of overflowing. Desktop only; mobile/tablet keep compact sizing.
   Riskfree large-screen pass: links step up to 14px with tighter tracking so
   readability improves without changing the strip grid/positioning contract. */
@media (min-width: 1100px) {
  /* body + .category-strip chain so we outrank the existing
     `body .category-strip__link {font-size:13px}` (0,1,1) and `.category-strip__link`
     (0,1,0) !important rules. */
  body .category-strip .category-strip__items,
  body .category-strip .category-strip__link,
  body .category-strip .category-strip__item,
  body .category-strip .category-strip__items a {
    font-size: 14px !important;
    letter-spacing: 0.02em !important;  /* tighter tracking buys the 14px size without widening the grid footprint */
    line-height: 1.35 !important;
    white-space: nowrap !important;     /* each short area/service name on one clean line */
  }
  body .category-strip .category-strip__label {
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    line-height: 1.25 !important;
    white-space: normal !important;   /* wrap inside the rail rather than overflow it */
    overflow-wrap: anywhere !important;
  }

  /* Home desktop strip labels are deliberately source-sized per client direction. */
  body .category-strip.category-strip--services .category-strip__label {
    width: clamp(176px, 14vw, 210px) !important;
    font-size: 23px !important;
    letter-spacing: 0.035em !important;
    line-height: 1.05 !important;
  }

  body .category-strip.category-strip--areas .category-strip__label {
    width: clamp(158px, 12vw, 188px) !important;
    font-size: 19px !important;
    letter-spacing: 0.055em !important;
    line-height: 1.08 !important;
  }

}

:root[data-theme="light"] body :is(.category-strip__label, .home-post-strip__label) {
  color: #003366 !important;
  text-shadow: none !important;
}

:root[data-theme="light"] :is(.le-template-category, .le-template-article) :is(
  .le-crumbs,
  .le-crumbs a,
  .le-spec-k,
  .le-byline-by,
  .le-cover .k,
  .le-meta .k
) {
  color: var(--le-ink-mute, #52627c) !important;
  text-shadow: 0 1px 2px rgba(255, 252, 244, 0.28) !important;
}

/* ============================================================
   NAV ICON BUTTONS — restore glass blur on small/collapsed (TAG-20260621-NAV-GLASS)
   ≤768px the global perf override drops --glass-blur-sm to 1px (theme.css:114), so
   the collapsed icon buttons (call / text / schedule / theme) lost their frosted
   backdrop and float illegibly over the hero. Restore a real blur behind just these
   small buttons (cheap — tiny areas) + a touch more dark fill so the icon cluster
   reads as a clean glass control group. Theme-aware (light keeps its existing pale
   fill); the gold schedule CTA keeps its gradient. */
@media (max-width: 768px) {
  .cb-nav__phone-duo,
  .cb-nav__cta,
  .cb-nav__theme-toggle {
    -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
    backdrop-filter: blur(12px) saturate(125%) !important;
  }
  :root[data-theme="dark"] .cb-nav__phone-duo,
  :root[data-theme="dark"] .cb-nav__cta:not(.cb-nav__cta--contact):not(.cb-nav__cta--emergency),
  :root[data-theme="dark"] .cb-nav__theme-toggle {
    background: rgba(8, 20, 42, 0.50) !important;
    border-color: rgba(190, 230, 255, 0.30) !important;
  }
}

/* ============================================================
   CONTACT FORM — full-width action buttons (TAG-20260621-FORM-FULLW)
   Per direction, the form's action buttons span the full form width. Submit was
   capped at min(300px) + centered; the "Call" pill sat inline in the form-head.
   Make submit + call pill + add-property full width (the GPS icon inside the
   address field stays inline). The form-head stacks so the full-width call pill
   sits above its "— or fill out the form below" line. */
.contact-cta__submit,
.contact-cta__add-property {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
}
/* The "Call" phone pill stays content-width + centered — a short phone number
   stretched to 100% looked stranded. */
.contact-cta__call-pill {
  width: auto !important;
  align-self: auto !important;
  justify-content: center !important;
}
/* form-head left-aligned to match the header/trust/form left rhythm (was a
   centered island). Row + wrap so the "or" divider sits beside the call pill and
   gracefully wraps on narrow widths. (TAG-20260622-CONTACT) */
.contact-cta__form-head {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 0.5rem 0.9rem !important;
}
.contact-cta__form-head-or { text-align: left !important; }

/* "Services needed" chips → full-width stacked rows on mobile (easier tap targets
   than cramped 2-per-row wrapping pills). (TAG-20260621-FORM-FULLW cont.) */
@media (max-width: 600px) {
  .contact-cta__checkbox-group {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .contact-cta__checkbox-label {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

/* ============================================================
   SECTION-LIST → REFINED INDEX-MENU (both variants)  (TAG-20260621-SL-MENU)
   Replaces the heavy 180px card-slabs with slim, scannable menu rows — numeral ·
   title+blurb · CTA — separated by hairline rules, with a hover tint + advancing
   affordance. Removes the decorative diagram clutter. SCOPED TO .home-page so BOTH
   home variants get it — services (gold SCHEDULE CTA) and the 15-item areas index
   (Read-More only) — WITHOUT touching the interior /services + /areas role-template
   cards (.le-mag-grid-large), which have their own richer dual-CTA layout. (Re-scoped
   2026-06-21: the base .section-list selector had leaked in and wrecked the interior —
   "Read essay" collided on top of "Schedule service".) 15-item areas scan far better
   as an index than a card grid. SEO-safe: blurb uses CSS line-clamp (full text stays
   in the DOM); only decorative/duplicate bits are display:none. Both themes.
   ============================================================ */

/* TAG-20260621-BAND-FEATHER removed — superseded by GUTTER-MASK below.
   The --motif-geometric selector shared equal specificity (0,5,1) with GUTTER-MASK's
   .le.has-coastal-page-bg selector. GUTTER-MASK appears later in source order and
   wins for all interior pages (which always have .le.has-coastal-page-bg), making
   this rule dead code. Geometry is now corrected in GUTTER-MASK. */

/* ════════════════════════════════════════════════════════════════════════════
   INTERIOR GLASS PANEL — HORIZONTAL EDGE-FADE RESTORE  (TAG-20260622-PANEL-FEATHER)
   motifs.css (§ Motif Edge Softening) fades these floating glass sections at the
   LEFT/RIGHT with a `background: linear-gradient(to right, …)` — a gradient, NOT a
   mask, so edge-hugging text/inputs are never clipped — and TOP/BOTTOM with a 2rem
   mask. But blocks.css (read-only, ~L2849) repaints the surface with
   `background: rgba(8,18,38,.55) !important` (a SOLID fill) that both out-specifies
   AND !important-beats motifs.css's gradient. Result: the horizontal fade never
   applied, so every interior panel butted a HARD rectangle against the atmospheric
   page bg at wide viewports (the "far hard edges, left and right").

   Re-assert the gradient with enough specificity (body.cb-role-internal .le[...] →
   0,12,2 vs blocks.css 0,6,1) + !important, and drop the faint hairline border that
   would otherwise still trace the rectangle once the fill dissolves. The vertical
   2rem mask from motifs.css is left intact, so ALL FOUR edges now feather. Split by
   theme: dark keeps the navy glass; light fades the editorial --le-surface so the
   light re-skin (~L638) isn't overpainted with navy. Interior-scoped — HOME's tuned
   panels are untouched. ════════════════════════════════════════════════════════ */
/* TAG-20260622-PANEL-FEATHER — horizontal background gradient removed.
   GUTTER-MASK's horizontal wrapper mask (0→80px) clips the section's solid fill from
   blocks.css at left/right edges, so a duplicate section gradient is not needed and
   creates a double-fade artifact.

   Vertical section fade RESTORED (adjacent, non-compounding):
   Wrapper vertical fade covers wrapper_y 0→38px (buffer OUTSIDE section) → wrapper=100%
   everywhere inside the section → section mask operates independently, no multiplication.
   Section top fade: glass panel fades in 0→2rem after section starts (grain appears first,
   glass layers on top — natural layered entrance).
   Section bottom fade: glass panel fades out over last 2rem before section ends, then the
   wrapper's 38px buffer grain fades to transparent — two sequential, non-overlapping dissolves.
   Keep border-color fix to suppress the hairline rectangle.
   Excludes contact-form-block (has its own mask on .contact-cta__form). */
body.cb-role-internal .le.has-coastal-page-bg .builder-blocks > .block-wrapper[class*="--motif-"]:not(.block-wrapper--motif-none):not(.block-wrapper--width-full):not(.block-wrapper--contact-form-block) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) {
  border-color: transparent !important;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    #000        clamp(1.4rem, 2.8vw, 2rem),
    #000        calc(100% - clamp(1.4rem, 2.8vw, 2rem)),
    transparent 100%
  );
          mask-image: linear-gradient(to bottom,
    transparent 0,
    #000        clamp(1.4rem, 2.8vw, 2rem),
    #000        calc(100% - clamp(1.4rem, 2.8vw, 2rem)),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* TAG-20260623-FAQ-SYMBOL — FAQ accordion toggle symbol fix.
   blocks.css sets content:'+' / '−' on the ::after but doesn't specify a font.
   The <summary> element inherits Cormorant Garamond from the page, whose '+' glyph
   renders as an ornate decorative cross/hash via OpenType ligatures. Draw the
   plus/minus as CSS strokes so no font glyph can leak back in. */
details.faq-block__item > summary.faq-block__question::after {
  content: '' !important;
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--block-accent-color, currentColor) 58%, transparent);
  background:
    linear-gradient(currentColor, currentColor) center / 0.62rem 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 0.62rem no-repeat;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-feature-settings: normal !important;
  font-variant-ligatures: none !important;
  text-shadow: none !important;
  color: var(--block-accent-color, currentColor) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--block-accent-color, currentColor) 10%, transparent);
}

details.faq-block__item[open] > summary.faq-block__question::after {
  content: '' !important;
  background:
    linear-gradient(currentColor, currentColor) center / 0.62rem 2px no-repeat !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

body.cb-role-internal :is(.le-template-category, .le-template-article) .faq-block__title.luxury-text-hero {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400 !important;
  font-size: var(--fluid-h2, clamp(30px, 3.4vw, 48px)) !important;
  line-height: 1.18 !important;
}

/* TAG-20260623-CF-HFADE v2 — contact-form-block section horizontal edge fade.
   The section's max-width container is narrower than the page, leaving a gap
   of exposed grain between the wrapper's 80px mask fade (viewport coords) and
   the section's left/right edge (section coords).
   v1 used mask-image → faded ALL children including the form header text.
   v2 replaces the mask with a background gradient so ONLY the glass fill fades;
   text + form elements remain at full opacity (background-image does not clip
   descendants, unlike mask-image which clips the entire stacking context). */
body.cb-role-internal .le.has-coastal-page-bg .builder-blocks > .block-wrapper--contact-form-block > section.builder-block {
  border-color: transparent !important;
  background: linear-gradient(to right,
    transparent                  0,
    rgba(8, 18, 38, 0.40)        clamp(2rem, 5vw, 5rem),
    rgba(8, 18, 38, 0.40)        calc(100% - clamp(2rem, 5vw, 5rem)),
    transparent                  100%
  ) !important;
}

/* Light theme CF-HFADE: warm cream glass instead of dark navy */
:root[data-theme="light"] body.cb-role-internal .le.has-coastal-page-bg .builder-blocks > .block-wrapper--contact-form-block > section.builder-block {
  background: linear-gradient(to right,
    transparent                    0,
    rgba(255, 252, 244, 0.68)      clamp(2rem, 5vw, 5rem),
    rgba(255, 252, 244, 0.68)      calc(100% - clamp(2rem, 5vw, 5rem)),
    transparent                    100%
  ) !important;
}

/* TAG-20260623-VERT-FADE removed — vertical feathering moved to wrapper level
   (GUTTER-MASK below now carries both horizontal + vertical in one intersect
   mask, which clips the grain SVG background and section content together with
   a single clean dissolve and avoids compounding with a section-level mask). */

/* ── Interior le-breeze-field — prototype-faithful organic waves (TAG-20260623-LBFIELD-v3) ──
   Restores the SVG ribbon bands to their intended role: aurora/coastal atmospheric effect.
   breeze-blue.svg = cool cyan ribbons drifting from the left (screen-blended dark / multiply light).
   breeze-red.svg  = warm coral ribbons from the right.
   Both at 38px feGaussianBlur bloom internally, stacked in 4 bands tiling the full page height.

   Original banding/hard-edge root causes and fixes:
   · Tonal colour zones (blue-left / coral-right): --le-family-opacity halved (0.42 → 0.22)
     so each ribbon's screen/multiply contribution is significantly softer across the full page.
   · Hard horizontal seams at band top/bottom mask transitions: filter: blur(18px) on each band
     smears these seams without affecting the .le-breeze-grain sibling element.
   · The field's own lateral mask (7 % → 88 % in internal.css) still feathers horizontal edges.
   · ::after bilateral vignette reinforces edge darkness / warmth on both sides. */

body.cb-role-internal .le {
  --le-family-opacity: 0.22;
}

/* Light theme: multiply is subtler than screen — needs higher opacity for
   the watercolor-on-paper effect to read against the cream background. */
:root[data-theme="light"] body.cb-role-internal .le {
  --le-family-opacity: 0.38;
}

body.cb-role-internal .le-breeze-band {
  filter: blur(18px);
}

/* Bilateral edge vignette — above grain, seals left and right field edges */
body.cb-role-internal .le-breeze-field::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(2, 6, 15, 0.50)  0%,
    transparent            8%,
    transparent            92%,
    rgba(2, 6, 15, 0.50) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Area category pages run long section-list blocks. With the wrapper gutter mask,
   the default right edge vignette reads like black stepping into the page mid-scroll. */
body.cb-role-internal .le[data-family="areas"][data-theme="dark"] .le-breeze-field {
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    #000        7%,
    #000       93%,
    transparent 100%
  );
          mask-image: linear-gradient(to right,
    transparent 0%,
    #000        7%,
    #000       93%,
    transparent 100%
  );
}

body.cb-role-internal .le[data-family="areas"][data-theme="dark"] .le-breeze-field::after {
  background: linear-gradient(to right,
    rgba(2, 6, 15, 0.44)  0%,
    transparent            8%,
    transparent            94%,
    rgba(2, 6, 15, 0.30) 100%
  );
}

:root[data-theme="light"] body.cb-role-internal .le-breeze-field::after {
  background: linear-gradient(to right,
    rgba(218, 210, 192, 0.60)  0%,
    transparent                 8%,
    transparent                 92%,
    rgba(218, 210, 192, 0.60) 100%
  );
}

/* Glass panels at 0.40 alpha so wave bands show through block sections */
body.cb-role-internal .le.has-coastal-page-bg .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) {
  background: rgba(8, 18, 38, 0.40) !important;
}

/* Light theme: warm cream glass panels — blocks.css uses dark navy for all themes;
   override to warm near-white so panels feel like frosted linen cards on paper, not
   dark boxes on cream. rgba(255,252,244) matches the prototype --le-surface token.
   Border uses a warm-dark hairline instead of the default cold-blue one. */
:root[data-theme="light"] body.cb-role-internal .le.has-coastal-page-bg .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) {
  background: rgba(255, 252, 244, 0.68) !important;
  border-color: rgba(40, 30, 20, 0.10) !important;
}

/* ── Kill backdrop-filter on interior glass panels (TAG-20260623-NO-BDF) ──────
   blocks.css applies backdrop-filter: blur(Xpx) saturate(Y) !important to all
   .has-coastal-page-bg sections. That frosted-blur region abruptly ends at the
   section's pixel-exact boundary, creating a hard tonal step where the blurred
   zone meets the clear background — exactly the "hard edge" seen at 1600px+.
   Since the PANEL-FEATHER gradient already gives the glass-panel appearance
   (soft left/right fade via background gradient), the blur adds little visual
   value and costs a visible hard edge. Zero it out interior-only. */
body.cb-role-internal .le.has-coastal-page-bg .builder-blocks > .block-wrapper > section.builder-block {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Interior contact card — dissolve the exposed bottom-right corner ─────────
   The interior contact form is two stacked navy layers: the .contact-cta SECTION
   (solid glass, feathered by its own intersect mask) and the .contact-cta__form
   CARD on top (its own gradient + hairline border + 18px radius + drop shadow, but
   NO mask). The card's edges are normally hidden behind the opaque section navy —
   except at the BOTTOM-RIGHT, where the section's intersect mask fades that navy
   away (horizontal 92% × vertical 3rem overlap), exposing the card's hard rounded
   corner. Feather the card itself so its edge dissolves wherever it's exposed.

   Content-safe: horizontal fade = the card's 2.25rem side padding and the bottom
   fade = its 2.15rem bottom padding, so the fade lives entirely in the empty
   padding ring — inputs/labels never fade. The TOP is left sharp (no top fade) so
   the champagne ::before accent line survives, and the top edge is backed by opaque
   section navy anyway. Theme-agnostic (a mask only clips; it ignores fill color). */
body.cb-role-internal .contact-cta__form {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 2.25rem, #000 calc(100% - 2.25rem), transparent 100%),
    linear-gradient(to bottom, #000 0, #000 calc(100% - 2.15rem), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 2.25rem, #000 calc(100% - 2.25rem), transparent 100%),
    linear-gradient(to bottom, #000 0, #000 calc(100% - 2.15rem), transparent 100%);
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* TAG-20260623-CATEGORY-CONTACT-FEATHER-TRIM
   Category pages carry long field labels and dense property/service rows. The full
   2.25rem/2.15rem card mask was visually dissolving some text at the form edges.
   Keep a small corner-softening mask, but pull the transparent ramp back inside
   the padding ring so labels and controls remain fully opaque. */
body.cb-role-internal .le-template-category .contact-cta__form {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 0.75rem, #000 calc(100% - 0.75rem), transparent 100%);
          mask-image:
    linear-gradient(to right, transparent 0, #000 0.75rem, #000 calc(100% - 0.75rem), transparent 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* TAG-20260623-CATEGORY-CONTACT-SECTION-MASK
   The parent .contact-cta mask is percentage-based (12% horizontal + 5rem top),
   which clips descendants. At 1998px wide, the left fade spans ~130px while the
   heading/form start ~49px from the section edge; the top fade spans 80px while
   the heading starts ~79px down. Keep a restrained edge taper on category pages,
   but make the ramp pixel-bounded so content never sits inside the transparent
   zone on desktop or mobile. */
body.cb-role-internal .le-template-category .contact-cta {
  --category-contact-mask-x: clamp(0.75rem, 2vw, 1.5rem);
  --category-contact-mask-y: clamp(1rem, 2vw, 2rem);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 var(--category-contact-mask-x), #000 calc(100% - var(--category-contact-mask-x)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--category-contact-mask-y), #000 calc(100% - var(--category-contact-mask-y)), transparent 100%) !important;
          mask-image:
    linear-gradient(to right, transparent 0, #000 var(--category-contact-mask-x), #000 calc(100% - var(--category-contact-mask-x)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--category-contact-mask-y), #000 calc(100% - var(--category-contact-mask-y)), transparent 100%) !important;
}

/* TAG-20260622-SPEC-FEATHER removed — spec block wrapper now feathered at the
   wrapper level via GUTTER-MASK vertical component below. Section-level mask on
   .le-spec-block would compound with the wrapper mask and double-fade content. */

/* ── Interior place/category strip — feather all four edges ───────────────────
   The "SERVING YOUR AREA" hairline bar (.category-strip) is a fixed-height plate
   whose text fills it top-to-bottom (no padding), so a vertical MASK would clip
   the labels. Instead feather its FILL with a per-theme vertical bg-gradient (the
   text is a child and stays fully opaque) and clip left/right with two horizontal
   masks — one on the wrapper (1280px, 8rem fade matching other panels) and one on
   the inner NAV (1120px, 28px inner edge safe-zone). Desktop only (>=1100) and
   interior-scoped so HOME is untouched. (TAG-20260622-STRIP-FEATHER) */
@media (min-width: 1100px) {
  body.cb-role-internal .le[data-theme="dark"].has-coastal-page-bg .category-strip {
    background-color: rgba(2, 6, 15, 0.92) !important;
    background-image: linear-gradient(to bottom, transparent 0, rgba(2, 6, 15, 0.92) 16px, rgba(2, 6, 15, 0.92) calc(100% - 16px), transparent 100%) !important;
  }
  body.cb-role-internal .le[data-theme="light"].has-coastal-page-bg .category-strip {
    background-color: rgba(252, 247, 238, 0.92) !important;
    background-image: linear-gradient(to bottom, transparent 0, rgba(252, 247, 238, 0.92) 16px, rgba(252, 247, 238, 0.92) calc(100% - 16px), transparent 100%) !important;
  }
  /* Inner NAV: retain 28px safe-zone fade (content starts 29px from the NAV edge) */
  body.cb-role-internal .le.has-coastal-page-bg .category-strip {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%) !important;
            mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%) !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-repeat: no-repeat !important;
  }
  /* Wrapper SECTION: the block-wrapper--category-strip-block has class
     block-wrapper--motif (no subtype) so motifs.css misses it — add the 8rem
     horizontal mask manually so the fade covers the full 1280px wrapper width
     and matches the soft dissolve of every other interior glass panel. */
  body.cb-role-internal .le.has-coastal-page-bg .block-wrapper--category-strip-block {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8rem, #000 calc(100% - 8rem), transparent 100%) !important;
            mask-image: linear-gradient(to right, transparent 0, #000 8rem, #000 calc(100% - 8rem), transparent 100%) !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-repeat: no-repeat !important;
  }
}

/* ── Interior block wrappers — feather grain + all children (TAG-20260622-GUTTER-MASK)
   The grain SVG background is directly on the wrapper element (not a pseudo-element),
   so a mask on the wrapper clips both the grain AND the section content in one pass.
   No separate section-level mask needed; no compounding.

   All widths: vertical fade (5rem) softens top/bottom grain edges.
   ≥1100px: combined horizontal (80→176px) + vertical intersect mask so the grain
   also dissolves into the page background in the inner-gutter zones at wide viewports.
   Safe: block-wrapper--category-strip-block uses "block-wrapper--motif" (no dash
   suffix) so [class*="--motif-"] doesn't match it; its explicit rule is unaffected. */

/* vertical only — all viewport widths.
   Fade ends at 2.4rem (≈38px) — the measured gap between wrapper top and section top,
   so the dissolve lives entirely in the grain-only zone and text is never clipped. */
body.cb-role-internal .le.has-coastal-page-bg .block-wrapper[class*="--motif-"] {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent  0,
    #000         clamp(1.4rem, 2.8vw, 2.4rem),
    #000         calc(100% - clamp(1.4rem, 2.8vw, 2.4rem)),
    transparent  100%
  ) !important;
          mask-image: linear-gradient(to bottom,
    transparent  0,
    #000         clamp(1.4rem, 2.8vw, 2.4rem),
    #000         calc(100% - clamp(1.4rem, 2.8vw, 2.4rem)),
    transparent  100%
  ) !important;
  -webkit-mask-repeat: no-repeat !important;
          mask-repeat: no-repeat !important;
}

/* vertical + horizontal — wide viewports only.
   Horizontal: transparent 0 → #000 80px — fade lives in the 80px inner-gutter zone
   (sectionLeft = 80px measured), so content at x≥80px is always 100% visible.
   Prior: transparent 80px → #000 176px bled 96px INTO the content column. */
@media (min-width: 1100px) {
  body.cb-role-internal .le.has-coastal-page-bg .block-wrapper[class*="--motif-"] {
    -webkit-mask-image:
      linear-gradient(to right,  transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 clamp(1.4rem, 2.8vw, 2.4rem), #000 calc(100% - clamp(1.4rem, 2.8vw, 2.4rem)), transparent 100%) !important;
    -webkit-mask-composite: source-in !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-image:
      linear-gradient(to right,  transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 clamp(1.4rem, 2.8vw, 2.4rem), #000 calc(100% - clamp(1.4rem, 2.8vw, 2.4rem)), transparent 100%) !important;
            mask-composite: intersect !important;
            mask-repeat: no-repeat !important;
  }
}

/* ── Shared contact + footer luxury atmospheres (TAG-20260623-LUXE-CONTACT-FOOTER)
   Footer and schedule/contact sections exist in multiple template paths
   (.site-footer and .le-footer). These shared hooks keep them visually centralized
   while preserving separate, non-blob background identities. HVAC motifs are
   CSS-drawn from the concept symbol sheets: sensor/control boxes, dampers,
   heat-exchanger coils, and VAV duct boxes. */
.cb-luxe-contact,
.cb-luxe-footer {
  isolation: isolate;
  overflow: hidden;
}

.cb-luxe-contact > :not(.cb-contact-motif),
.cb-luxe-footer > :not(.cb-footer-motif) {
  position: relative;
  z-index: 2;
}

.cb-luxe-contact {
  --cb-luxe-line: rgba(161, 221, 255, 0.24);
  --cb-luxe-line-strong: rgba(214, 178, 93, 0.34);
  --cb-luxe-ink-shadow: 0 1px 2px rgba(0, 6, 18, 0.95), 0 10px 34px rgba(0, 8, 28, 0.62);
  background:
    linear-gradient(90deg, transparent, rgba(214, 178, 93, 0.46) 14%, rgba(155, 218, 248, 0.36) 50%, rgba(214, 178, 93, 0.30) 86%, transparent) top/100% 1px no-repeat,
    radial-gradient(46rem 28rem at 8% 32%, rgba(35, 146, 162, 0.28), transparent 64%),
    radial-gradient(42rem 30rem at 92% 58%, rgba(178, 102, 84, 0.22), transparent 66%),
    linear-gradient(145deg, rgba(5, 18, 38, 0.82), rgba(8, 28, 54, 0.68) 46%, rgba(18, 20, 42, 0.78)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 218, 0.15),
    inset 0 -1px 0 rgba(135, 215, 255, 0.11),
    0 -22px 70px rgba(0, 0, 0, 0.28),
    0 28px 90px rgba(0, 8, 24, 0.42) !important;
}

.cb-luxe-contact :is(.contact-cta__heading, .contact-cta__eyebrow, .contact-cta__sub, .contact-cta__label, .le-schedule-head h2, .le-field label) {
  text-shadow: var(--cb-luxe-ink-shadow) !important;
}

.cb-luxe-contact .contact-cta__form {
  border-color: rgba(214, 178, 93, 0.28) !important;
  outline: 1px solid rgba(145, 220, 255, 0.10);
  outline-offset: -2px;
  background:
    linear-gradient(145deg, rgba(255, 250, 234, 0.070), transparent 32%),
    radial-gradient(34rem 18rem at 18% 0%, rgba(105, 201, 220, 0.13), transparent 70%),
    rgba(7, 17, 34, 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(255, 245, 218, 0.08),
    0 24px 70px rgba(0, 8, 24, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35) !important;
}

body.cb-role-internal .contact-cta.cb-luxe-contact.le-schedule,
body.cb-role-internal .le.has-coastal-page-bg .builder-blocks > .block-wrapper > section.contact-cta.cb-luxe-contact,
body.cb-role-internal .le.has-coastal-page-bg .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section.contact-cta.cb-luxe-contact:not(.hero-block):not(.video-hero-block):not(.parallax-hero) {
  background-image:
    linear-gradient(90deg, transparent, rgba(214, 178, 93, 0.46) 14%, rgba(155, 218, 248, 0.36) 50%, rgba(214, 178, 93, 0.30) 86%, transparent),
    radial-gradient(46rem 28rem at 8% 32%, rgba(35, 146, 162, 0.28), transparent 64%),
    radial-gradient(42rem 30rem at 92% 58%, rgba(178, 102, 84, 0.22), transparent 66%),
    linear-gradient(145deg, rgba(5, 18, 38, 0.82), rgba(8, 28, 54, 0.68) 46%, rgba(18, 20, 42, 0.78)) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 1px, auto, auto, auto !important;
  background-position: top, center, center, center !important;
}

.cb-contact-motif,
.cb-footer-motif {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.66;
  filter:
    drop-shadow(0 1px 0 rgba(0, 4, 15, 0.95))
    drop-shadow(0 16px 26px rgba(0, 6, 22, 0.42));
}

.cb-contact-motif--sensor {
  width: clamp(9rem, 16vw, 15rem);
  height: clamp(9rem, 16vw, 15rem);
  left: max(1.25rem, calc((100vw - 1280px) / 2 - 5rem));
  top: clamp(4rem, 12vw, 10rem);
  color: rgba(144, 219, 255, 0.32);
  background:
    linear-gradient(currentColor, currentColor) 50% 18% / 38% 1px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 50% / 48% 1px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 82% / 32% 1px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(144, 219, 255, 0.13) 22px 23px);
  border: 1px solid rgba(144, 219, 255, 0.23);
  box-shadow:
    inset 0 0 0 18px rgba(144, 219, 255, 0.018),
    inset 0 0 0 42px rgba(214, 178, 93, 0.026);
}

.cb-contact-motif--sensor::before,
.cb-contact-motif--sensor::after {
  content: '';
  position: absolute;
  border: 1px solid currentColor;
}

.cb-contact-motif--sensor::before {
  width: 34%;
  height: 34%;
  left: 33%;
  top: 33%;
}

.cb-contact-motif--sensor::after {
  width: 14%;
  height: 14%;
  left: 43%;
  top: 43%;
  border-radius: 50%;
  box-shadow:
    -2.75rem -2.75rem 0 -0.35rem rgba(214, 178, 93, 0.38),
     2.75rem  2.75rem 0 -0.35rem rgba(214, 178, 93, 0.32);
}

.cb-contact-motif--damper {
  width: clamp(10rem, 17vw, 17rem);
  height: clamp(7rem, 12vw, 12rem);
  right: max(1.25rem, calc((100vw - 1280px) / 2 - 5rem));
  bottom: clamp(5rem, 14vw, 12rem);
  color: rgba(228, 182, 104, 0.34);
  border-inline: 1px solid currentColor;
  background:
    linear-gradient(90deg, currentColor, currentColor) 0 50% / 100% 1px no-repeat,
    linear-gradient(28deg, transparent 47%, currentColor 48% 52%, transparent 53%) 0 0 / 25% 100% repeat-x,
    linear-gradient(-28deg, transparent 47%, rgba(144, 219, 255, 0.24) 48% 52%, transparent 53%) 12% 0 / 25% 100% repeat-x;
}

.cb-contact-motif--damper::before,
.cb-contact-motif--damper::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 1px;
  background: currentColor;
}

.cb-contact-motif--damper::before { top: 0; }
.cb-contact-motif--damper::after { bottom: 0; }

.cb-contact-motif--flow,
.cb-contact-motif--meter {
  display: none;
}

body.cb-role-internal .le-template-category .cb-contact-motif {
  opacity: 0.46;
}

body.cb-role-internal .le-template-category .cb-contact-motif--flow,
body.cb-role-internal .le-template-category .cb-contact-motif--meter {
  display: block;
}

.cb-contact-motif--flow {
  width: clamp(9rem, 15vw, 14rem);
  height: clamp(8rem, 13vw, 12rem);
  left: max(0.5rem, calc((100vw - 1280px) / 2 + 1rem));
  bottom: clamp(4rem, 10vw, 9rem);
  color: rgba(141, 220, 255, 0.26);
  background:
    linear-gradient(currentColor, currentColor) 0 22% / 56% 1px no-repeat,
    linear-gradient(currentColor, currentColor) 44% 78% / 56% 1px no-repeat,
    radial-gradient(ellipse at 24% 50%, transparent 0 38%, currentColor 39% 40%, transparent 41% 100%),
    radial-gradient(ellipse at 76% 50%, transparent 0 38%, rgba(224, 178, 95, 0.28) 39% 40%, transparent 41% 100%);
}

.cb-contact-motif--flow::before,
.cb-contact-motif--flow::after {
  content: '';
  position: absolute;
  border: 1px solid currentColor;
}

.cb-contact-motif--flow::before {
  inset: 22% 18% 22% 18%;
  border-radius: 999px;
}

.cb-contact-motif--flow::after {
  width: 18%;
  height: 18%;
  left: 41%;
  top: 41%;
  border-radius: 50%;
  box-shadow:
    -2.1rem 0 0 -0.34rem rgba(224, 178, 95, 0.30),
     2.1rem 0 0 -0.34rem rgba(224, 178, 95, 0.22);
}

.cb-contact-motif--meter {
  width: clamp(7rem, 12vw, 11rem);
  height: clamp(7rem, 12vw, 11rem);
  right: max(0.75rem, calc((100vw - 1280px) / 2 + 2rem));
  top: clamp(4rem, 8vw, 8rem);
  color: rgba(224, 178, 95, 0.30);
  border: 1px solid currentColor;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 25%, rgba(141, 220, 255, 0.18) 25.5% 26.5%, transparent 27% 100%),
    linear-gradient(currentColor, currentColor) 50% 22% / 1px 15% no-repeat,
    linear-gradient(60deg, transparent 0 48%, currentColor 49% 51%, transparent 52%) center / 70% 70% no-repeat;
}

.cb-contact-motif--meter::before {
  content: '';
  position: absolute;
  inset: 20%;
  border: 1px solid rgba(141, 220, 255, 0.22);
  border-radius: 50%;
}

.cb-contact-motif--meter::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 52%;
  width: 1px;
  height: 34%;
  transform-origin: 50% 0;
  transform: rotate(42deg);
  background: currentColor;
}

body.cb-role-internal .le.le-template-category.has-coastal-page-bg .builder-blocks > .block-wrapper > section.contact-cta.cb-luxe-contact,
body.cb-role-internal .le.le-template-category.has-coastal-page-bg .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section.contact-cta.cb-luxe-contact:not(.hero-block):not(.video-hero-block):not(.parallax-hero) {
  background-image:
    linear-gradient(90deg, transparent, rgba(214, 178, 93, 0.34) 16%, rgba(155, 218, 248, 0.22) 52%, rgba(214, 178, 93, 0.18) 84%, transparent),
    radial-gradient(48rem 30rem at 6% 30%, rgba(35, 146, 162, 0.20), transparent 68%),
    radial-gradient(44rem 30rem at 94% 56%, rgba(178, 102, 84, 0.16), transparent 70%),
    linear-gradient(145deg, rgba(5, 18, 38, 0.66), rgba(8, 28, 54, 0.52) 48%, rgba(18, 20, 42, 0.62)) !important;
}

.cb-luxe-footer {
  --cb-footer-max: var(--content-max-width, 1200px);
  position: relative !important;
  z-index: 3 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) 0 !important;
  border-top: 0 !important;
  background:
    linear-gradient(90deg, transparent, rgba(214, 178, 93, 0.34) 18%, rgba(125, 210, 248, 0.24) 52%, rgba(214, 178, 93, 0.24) 82%, transparent) top/100% 1px no-repeat,
    linear-gradient(90deg, rgba(125, 210, 248, 0.05) 1px, transparent 1px) center top / 92px 92px,
    linear-gradient(0deg, rgba(125, 210, 248, 0.04) 1px, transparent 1px) center top / 92px 92px,
    radial-gradient(42rem 24rem at 12% 20%, rgba(20, 124, 148, 0.18), transparent 72%),
    radial-gradient(38rem 28rem at 88% 18%, rgba(190, 130, 66, 0.13), transparent 72%),
    linear-gradient(180deg, rgba(1, 5, 14, 0.00), rgba(2, 8, 20, 0.78) 42%, rgba(1, 4, 12, 0.90)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 222, 0.10),
    inset 0 36px 72px rgba(255, 255, 255, 0.025),
    0 -24px 80px rgba(0, 4, 18, 0.34) !important;
}

/* TAG-20260624-CONTACT-LUXURY-UX -- full-viewport calm/panic intake suite */
.cb-luxe-contact {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-block: clamp(4.5rem, 8vw, 7.5rem) clamp(4.75rem, 8vw, 7rem) !important;
}

.cb-luxe-contact::before,
.cb-luxe-contact::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.cb-luxe-contact::before {
  background:
    linear-gradient(90deg, rgba(125, 210, 248, 0.055) 1px, transparent 1px) center / 92px 92px,
    linear-gradient(0deg, rgba(125, 210, 248, 0.040) 1px, transparent 1px) center / 92px 92px,
    radial-gradient(38rem 30rem at 12% 18%, rgba(74, 173, 190, 0.16), transparent 74%),
    radial-gradient(34rem 28rem at 88% 22%, rgba(214, 178, 93, 0.13), transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 82%, transparent 100%);
  opacity: 0.72;
}

.cb-luxe-contact::after {
  inset-inline: max(1.5rem, calc((100vw - 1280px) / 2 + 1rem));
  border-inline: 1px solid rgba(155, 220, 255, 0.075);
  background:
    linear-gradient(90deg, transparent 0, rgba(255, 246, 222, 0.050) 50%, transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0, rgba(125, 210, 248, 0.040) 50%, transparent 100%) bottom / 100% 1px no-repeat;
  opacity: 0.9;
}

.cb-luxe-contact .contact-cta__inner {
  /* Article/detail routes skip blocks.css and blocks-core.css, where the base
     contact rule normally supplies auto margins. Keep this route-local owner
     self-contained so its width cap cannot left-anchor the global footer form. */
  max-width: min(1188px, calc(100vw - clamp(2rem, 8vw, 7rem))) !important;
  margin-inline: auto;
  padding-inline: clamp(1rem, 2.4vw, 2rem) !important;
}

.cb-luxe-contact .contact-cta__header {
  max-width: 760px;
  margin-bottom: clamp(1.2rem, 2.4vw, 1.85rem) !important;
}

.cb-luxe-contact .contact-cta__sub {
  max-width: 780px;
  color: rgba(224, 238, 255, 0.84) !important;
}

.cb-luxe-contact .contact-cta__trust {
  margin-bottom: 1rem !important;
  gap: 0.55rem 1.2rem !important;
}

.cb-luxe-contact .contact-cta__badge {
  min-height: 28px;
  padding: 0.18rem 0.1rem;
  color: rgba(218, 235, 250, 0.82) !important;
}

.cb-luxe-contact .contact-cta__form-head {
  margin-bottom: 0.85rem !important;
  align-items: center !important;
}

.cb-luxe-contact .contact-cta__call-pill {
  min-height: 44px;
  padding: 0.72rem 1.25rem !important;
  border-color: rgba(227, 197, 135, 0.46) !important;
  background:
    linear-gradient(145deg, rgba(255, 246, 222, 0.10), rgba(255, 246, 222, 0.025)),
    rgba(6, 20, 42, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(125, 210, 248, 0.06),
    0 14px 36px rgba(0, 8, 24, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.cb-luxe-contact .contact-cta__call-pill:hover {
  border-color: rgba(227, 197, 135, 0.82) !important;
  background:
    linear-gradient(145deg, rgba(255, 246, 222, 0.16), rgba(255, 246, 222, 0.045)),
    rgba(8, 28, 54, 0.80) !important;
}

.contact-cta__comfort-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 clamp(1.25rem, 2vw, 1.65rem);
  border: 1px solid rgba(155, 220, 255, 0.14);
  outline: 1px solid rgba(214, 178, 93, 0.08);
  outline-offset: -4px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.012)),
    rgba(4, 14, 30, 0.48);
  box-shadow:
    0 22px 60px rgba(0, 8, 24, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.contact-cta__comfort-rail span {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.95rem 1rem;
  color: rgba(218, 235, 250, 0.78);
  font-size: 0.83rem;
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.018);
  text-shadow: 0 1px 2px rgba(0, 6, 18, 0.88), 0 10px 26px rgba(0, 8, 24, 0.42);
}

.contact-cta__comfort-rail strong {
  flex: 0 0 auto;
  color: rgb(236, 208, 154);
  font-size: 0.70rem;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cb-luxe-contact .contact-cta__form {
  padding: clamp(1.45rem, 2.6vw, 2.45rem) clamp(1.25rem, 2.6vw, 2.35rem) clamp(1.45rem, 2.4vw, 2.1rem) !important;
  border-radius: 12px !important;
  border-color: rgba(227, 197, 135, 0.30) !important;
  outline: 1px solid rgba(145, 220, 255, 0.13) !important;
  outline-offset: -5px !important;
  background:
    linear-gradient(145deg, rgba(255, 250, 234, 0.090), transparent 30%),
    radial-gradient(42rem 22rem at 14% 0%, rgba(105, 201, 220, 0.15), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016)),
    rgba(5, 16, 33, 0.86) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
          backdrop-filter: blur(18px) saturate(1.08);
  box-shadow:
    0 0 0 1px rgba(255, 245, 218, 0.08),
    0 34px 94px rgba(0, 7, 24, 0.58),
    0 18px 42px rgba(0, 10, 28, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.40) !important;
}

.cb-luxe-contact .contact-cta__form::before {
  left: clamp(1.25rem, 2.4vw, 2.25rem) !important;
  right: clamp(1.25rem, 2.4vw, 2.25rem) !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(227, 197, 135, 0.92), rgba(145, 220, 255, 0.46), transparent) !important;
}

.cb-luxe-contact .contact-cta__row {
  gap: 1.05rem 1.65rem !important;
  margin-bottom: 1.05rem !important;
}

.cb-luxe-contact .contact-cta__field {
  gap: 0.48rem !important;
}

.cb-luxe-contact .contact-cta__input,
.cb-luxe-contact .contact-cta__select,
.cb-luxe-contact .contact-cta__textarea,
.cb-luxe-contact.le-schedule .le-form .le-field input,
.cb-luxe-contact.le-schedule .le-form .le-field textarea,
.cb-luxe-contact.le-schedule .le-form .le-field select {
  min-height: 48px !important;
  border-radius: 9px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.028)),
    rgba(7, 19, 38, 0.80) !important;
  border-color: rgba(168, 214, 255, 0.34) !important;
  box-shadow:
    0 0 0 1px rgba(255, 245, 218, 0.030),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

.cb-luxe-contact .contact-cta__input:focus,
.cb-luxe-contact .contact-cta__select:focus,
.cb-luxe-contact .contact-cta__textarea:focus,
.cb-luxe-contact.le-schedule .le-form .le-field input:focus,
.cb-luxe-contact.le-schedule .le-form .le-field textarea:focus,
.cb-luxe-contact.le-schedule .le-form .le-field select:focus {
  border-color: rgba(227, 197, 135, 0.88) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.092), rgba(255, 255, 255, 0.040)),
    rgba(9, 24, 46, 0.88) !important;
  box-shadow:
    0 0 0 3px rgba(227, 197, 135, 0.18),
    0 12px 30px rgba(0, 8, 24, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.cb-luxe-contact .contact-cta__property,
.cb-luxe-contact .contact-cta__dropzone {
  border-radius: 11px !important;
  border-color: rgba(227, 197, 135, 0.24) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(8, 20, 38, 0.42) !important;
  box-shadow:
    0 0 0 1px rgba(145, 220, 255, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.065) !important;
}

.cb-luxe-contact .contact-cta__checkbox-group {
  gap: 0.45rem !important;
}

.cb-luxe-contact .contact-cta__checkbox-label,
.cb-luxe-contact .contact-cta__type-pill {
  min-height: 36px;
  border-color: rgba(168, 214, 255, 0.30) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(8, 20, 38, 0.46) !important;
}

.cb-luxe-contact .contact-cta__checkbox-label:hover,
.cb-luxe-contact .contact-cta__type-pill:hover {
  border-color: rgba(227, 197, 135, 0.58) !important;
}

.cb-luxe-contact .contact-cta__checkbox-label:has(input:checked),
.cb-luxe-contact .contact-cta__type-pill:has(input:checked) {
  background: linear-gradient(135deg, #ecd09a, #c69a4c) !important;
  color: #0d1a2e !important;
  box-shadow:
    0 0 0 1px rgba(255, 245, 218, 0.18),
    0 10px 24px rgba(196, 155, 82, 0.28) !important;
}

.cb-luxe-contact .contact-cta__add-property {
  width: 100%;
  justify-content: center;
  min-height: 46px;
  border-radius: 10px !important;
  background: rgba(227, 197, 135, 0.035) !important;
}

.cb-luxe-contact .contact-cta__actions {
  margin-top: clamp(1.45rem, 2.6vw, 2rem) !important;
}

.cb-luxe-contact .contact-cta__submit {
  height: 52px !important;
  min-height: 52px !important;
  min-width: min(360px, 100%) !important;
  width: auto !important;
  max-width: min(360px, 100%) !important;
  padding: 0 2rem !important;
  line-height: 1 !important;
  border-radius: 10px !important;
  background:
    linear-gradient(135deg, rgb(240, 214, 160), rgb(197, 151, 69)) !important;
  box-shadow:
    0 0 0 1px rgba(255, 245, 218, 0.32),
    0 18px 38px rgba(197, 151, 69, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

.cb-luxe-contact .contact-cta__submit:hover {
  box-shadow:
    0 0 0 1px rgba(255, 245, 218, 0.44),
    0 22px 46px rgba(197, 151, 69, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

.cb-luxe-contact .contact-cta__privacy-note,
.cb-luxe-contact .contact-cta__disclaimer {
  max-width: 48rem;
  color: rgba(205, 224, 245, 0.62) !important;
}

:root[data-theme="light"] .cb-luxe-contact::before {
  background:
    linear-gradient(90deg, rgba(45, 118, 148, 0.045) 1px, transparent 1px) center / 92px 92px,
    linear-gradient(0deg, rgba(45, 118, 148, 0.040) 1px, transparent 1px) center / 92px 92px,
    radial-gradient(38rem 30rem at 12% 18%, rgba(60, 151, 166, 0.12), transparent 74%),
    radial-gradient(34rem 28rem at 88% 22%, rgba(157, 105, 35, 0.10), transparent 72%);
}

:root[data-theme="light"] .cb-luxe-contact::after {
  border-inline-color: rgba(45, 96, 122, 0.09);
  background:
    linear-gradient(90deg, transparent 0, rgba(157, 105, 35, 0.09) 50%, transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0, rgba(45, 118, 148, 0.06) 50%, transparent 100%) bottom / 100% 1px no-repeat;
}

:root[data-theme="light"] .cb-luxe-contact .contact-cta__sub {
  color: rgba(37, 58, 86, 0.82) !important;
}

:root[data-theme="light"] .cb-luxe-contact .contact-cta__badge {
  color: rgba(30, 56, 86, 0.78) !important;
  text-shadow: 0 1px 0 rgba(255, 252, 244, 0.78), 0 8px 18px rgba(70, 52, 28, 0.10) !important;
}

:root[data-theme="light"] .cb-luxe-contact .contact-cta__badge svg {
  color: rgb(0, 116, 169) !important;
}

:root[data-theme="light"] .contact-cta__comfort-rail {
  border-color: rgba(45, 96, 122, 0.14);
  outline-color: rgba(158, 104, 34, 0.10);
  background: transparent;
  box-shadow: none;
}

:root[data-theme="light"] .contact-cta__comfort-rail span {
  color: rgba(37, 58, 86, 0.76);
  background: transparent;
  text-shadow: 0 1px 0 rgba(255, 252, 244, 0.78);
}

:root[data-theme="light"] .contact-cta__comfort-rail strong {
  color: rgb(143, 95, 28);
}

:root[data-theme="light"] .cb-luxe-contact .contact-cta__call-pill {
  color: rgb(29, 48, 73) !important;
  border-color: rgba(158, 104, 34, 0.24) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.28)),
    rgba(255, 252, 244, 0.68) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.56),
    0 14px 34px rgba(46, 61, 82, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
}

:root[data-theme="light"] .cb-luxe-contact .contact-cta__form {
  background: transparent !important;
  border-color: rgba(135, 96, 36, 0.20) !important;
  outline-color: rgba(44, 102, 132, 0.12) !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .cb-luxe-contact .contact-cta__input,
:root[data-theme="light"] .cb-luxe-contact .contact-cta__select,
:root[data-theme="light"] .cb-luxe-contact .contact-cta__textarea,
:root[data-theme="light"] .cb-luxe-contact.le-schedule .le-form .le-field input,
:root[data-theme="light"] .cb-luxe-contact.le-schedule .le-form .le-field textarea,
:root[data-theme="light"] .cb-luxe-contact.le-schedule .le-form .le-field select {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 252, 244, 0.82)) !important;
  border-color: rgba(35, 83, 116, 0.22) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.60),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

:root[data-theme="light"] .cb-luxe-contact .contact-cta__property,
:root[data-theme="light"] .cb-luxe-contact .contact-cta__dropzone {
  border-color: rgba(135, 96, 36, 0.18) !important;
  background: transparent !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .cb-luxe-contact .contact-cta__checkbox-label,
:root[data-theme="light"] .cb-luxe-contact .contact-cta__type-pill {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 252, 244, 0.58)) !important;
  border-color: rgba(35, 83, 116, 0.18) !important;
  color: #2a3a50 !important;
}

:root[data-theme="light"] .cb-luxe-contact .contact-cta__privacy-note,
:root[data-theme="light"] .cb-luxe-contact .contact-cta__disclaimer {
  color: rgba(37, 58, 86, 0.66) !important;
}

@media (max-width: 760px) {
  .cb-luxe-contact {
    padding-block: clamp(3rem, 9vw, 4.25rem) clamp(3.25rem, 10vw, 4.75rem) !important;
  }

  .cb-luxe-contact .contact-cta__inner {
    max-width: 100vw !important;
    padding-inline: clamp(1rem, 4vw, 1.35rem) !important;
  }

  .contact-cta__comfort-rail {
    grid-template-columns: 1fr;
  }

  .contact-cta__comfort-rail span {
    min-height: 48px;
    padding-block: 0.78rem;
  }

  .cb-luxe-contact .contact-cta__submit {
    width: 100% !important;
    max-width: 100% !important;
  }
}

.cb-luxe-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(155, 224, 255, 0.16) 0 1px, transparent 1.7px) center top / 46px 46px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 15%, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 15%, #000 72%, transparent 100%);
  opacity: 0.42;
}

.cb-luxe-footer :is(.site-footer__inner, .site-footer__bottom-inner, .le-footer-grid, .le-footer__bottom) {
  max-width: var(--cb-footer-max) !important;
  margin-inline: auto !important;
}

.cb-luxe-footer :is(.site-footer__grid, .le-footer-grid) {
  display: grid !important;
  grid-template-columns: minmax(16rem, 1.35fr) repeat(3, minmax(9rem, 1fr)) !important;
  gap: clamp(1.75rem, 4vw, 3.25rem) !important;
  align-items: start !important;
  padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.15rem, 2.2vw, 1.75rem) !important;
  border: 1px solid rgba(155, 220, 255, 0.16);
  outline: 1px solid rgba(214, 178, 93, 0.10);
  outline-offset: -5px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012) 44%, rgba(7, 18, 34, 0.18)),
    rgba(2, 10, 23, 0.36);
  box-shadow:
    0 0 0 1px rgba(255, 245, 218, 0.06),
    0 28px 80px rgba(0, 5, 18, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cb-luxe-footer :is(.site-footer__col-label, .le-footer h3, .le-footer h4) {
  font-family: var(--font-body-coastal, 'Manrope', 'Inter', sans-serif) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: rgb(198, 226, 250) !important;
  margin: 0 0 16px !important;
  text-shadow: 0 1px 2px rgba(0, 4, 16, 0.95), 0 9px 24px rgba(0, 8, 26, 0.72) !important;
}

.cb-luxe-footer :is(.site-footer__tagline, .site-footer__contact-item, .le-footer-brand p, .le-footer-contact li, .le-footer a, .site-footer__links a) {
  text-shadow: 0 1px 2px rgba(0, 4, 16, 0.85), 0 8px 22px rgba(0, 8, 26, 0.55) !important;
}

.cb-luxe-footer :is(.site-footer__links a, .site-footer__contact-item a, .footer__review-link, .le-footer a) {
  color: rgb(220, 235, 248) !important;
}

.cb-luxe-footer :is(.site-footer__links a:hover, .site-footer__contact-item a:hover, .footer__review-link:hover, .le-footer a:hover) {
  color: rgb(152, 226, 255) !important;
}

.cb-luxe-footer :is(.site-footer__bottom, .le-footer__bottom) {
  border-top: 1px solid rgba(155, 220, 255, 0.14) !important;
  background: rgba(1, 5, 14, 0.22);
}

.cb-footer-motif--coil {
  width: clamp(11rem, 18vw, 18rem);
  height: clamp(11rem, 18vw, 18rem);
  left: max(1rem, calc((100vw - 1280px) / 2 - 7rem));
  top: clamp(2rem, 6vw, 4.5rem);
  color: rgba(143, 219, 255, 0.26);
  border: 1px solid currentColor;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 12%, currentColor 12.5% 13.5%, transparent 14% 100%),
    conic-gradient(from 45deg, transparent 0 12%, currentColor 12% 13%, transparent 13% 24%, rgba(214, 178, 93, 0.34) 24% 25%, transparent 25% 37%, currentColor 37% 38%, transparent 38% 49%, rgba(214, 178, 93, 0.30) 49% 50%, transparent 50% 62%, currentColor 62% 63%, transparent 63% 74%, rgba(214, 178, 93, 0.26) 74% 75%, transparent 75% 100%);
  box-shadow: inset 0 0 0 1.55rem rgba(143, 219, 255, 0.028), inset 0 0 0 3.1rem rgba(143, 219, 255, 0.018);
}

.cb-footer-motif--coil::before,
.cb-footer-motif--coil::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 24%;
  height: 1px;
  background: currentColor;
}

.cb-footer-motif--coil::before { right: 100%; }
.cb-footer-motif--coil::after { left: 100%; }

.cb-footer-motif--vav {
  width: clamp(12rem, 20vw, 20rem);
  height: clamp(7rem, 12vw, 12rem);
  right: max(1rem, calc((100vw - 1280px) / 2 - 7rem));
  top: clamp(5rem, 10vw, 9rem);
  color: rgba(224, 178, 95, 0.28);
  background:
    linear-gradient(currentColor, currentColor) center / 34% 1px no-repeat,
    linear-gradient(90deg, transparent 0 21%, currentColor 21% 22%, transparent 22% 78%, currentColor 78% 79%, transparent 79%),
    linear-gradient(28deg, transparent 0 18%, currentColor 18% 19%, transparent 19% 81%, currentColor 81% 82%, transparent 82%),
    linear-gradient(-28deg, transparent 0 18%, rgba(143, 219, 255, 0.24) 18% 19%, transparent 19% 81%, rgba(143, 219, 255, 0.24) 81% 82%, transparent 82%);
}

.cb-footer-motif--vav::before {
  content: '';
  position: absolute;
  inset: 22% 38%;
  border: 1px solid currentColor;
  background: rgba(2, 10, 23, 0.08);
}

.cb-footer-motif--vav::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 42%;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-18deg);
}

:root[data-theme="light"] .cb-luxe-contact {
  --cb-luxe-ink-shadow: 0 1px 0 rgba(255, 252, 244, 0.82), 0 8px 22px rgba(74, 52, 22, 0.14);
  background:
    linear-gradient(90deg, transparent, rgba(170, 114, 38, 0.28) 14%, rgba(58, 130, 154, 0.18) 50%, rgba(170, 114, 38, 0.20) 86%, transparent) top/100% 1px no-repeat,
    radial-gradient(44rem 28rem at 8% 32%, rgba(60, 151, 166, 0.18), transparent 64%),
    radial-gradient(42rem 30rem at 92% 58%, rgba(181, 119, 74, 0.16), transparent 66%),
    linear-gradient(145deg, rgba(255, 251, 239, 0.88), rgba(246, 239, 222, 0.76) 52%, rgba(231, 238, 233, 0.82)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 -1px 0 rgba(61, 86, 101, 0.10),
    0 -20px 60px rgba(74, 54, 28, 0.10),
    0 24px 72px rgba(48, 63, 84, 0.12) !important;
}

:root[data-theme="light"] .cb-luxe-contact .contact-cta__form {
  background: transparent !important;
  border-color: rgba(135, 96, 36, 0.18) !important;
  outline-color: rgba(44, 102, 132, 0.10);
  box-shadow: none !important;
}

:root[data-theme="light"] body.cb-role-internal .contact-cta.cb-luxe-contact.le-schedule,
:root[data-theme="light"] body.cb-role-internal .le.has-coastal-page-bg .builder-blocks > .block-wrapper > section.contact-cta.cb-luxe-contact,
:root[data-theme="light"] body.cb-role-internal .le.has-coastal-page-bg .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section.contact-cta.cb-luxe-contact:not(.hero-block):not(.video-hero-block):not(.parallax-hero) {
  background-image:
    linear-gradient(90deg, transparent, rgba(170, 114, 38, 0.28) 14%, rgba(58, 130, 154, 0.18) 50%, rgba(170, 114, 38, 0.20) 86%, transparent),
    radial-gradient(44rem 28rem at 8% 32%, rgba(60, 151, 166, 0.18), transparent 64%),
    radial-gradient(42rem 30rem at 92% 58%, rgba(181, 119, 74, 0.16), transparent 66%),
    linear-gradient(145deg, rgba(255, 251, 239, 0.88), rgba(246, 239, 222, 0.76) 52%, rgba(231, 238, 233, 0.82)) !important;
}

:root[data-theme="light"] body.cb-role-internal .le-template-category .cb-contact-motif {
  opacity: 0.36;
}

:root[data-theme="light"] body.cb-role-internal .le.le-template-category.has-coastal-page-bg .builder-blocks > .block-wrapper > section.contact-cta.cb-luxe-contact,
:root[data-theme="light"] body.cb-role-internal .le.le-template-category.has-coastal-page-bg .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section.contact-cta.cb-luxe-contact:not(.hero-block):not(.video-hero-block):not(.parallax-hero) {
  background-image:
    linear-gradient(90deg, transparent, rgba(170, 114, 38, 0.22) 16%, rgba(58, 130, 154, 0.12) 52%, rgba(170, 114, 38, 0.14) 84%, transparent),
    radial-gradient(48rem 30rem at 6% 30%, rgba(60, 151, 166, 0.13), transparent 68%),
    radial-gradient(44rem 30rem at 94% 56%, rgba(181, 119, 74, 0.11), transparent 70%),
    linear-gradient(145deg, rgba(255, 251, 239, 0.72), rgba(246, 239, 222, 0.58) 52%, rgba(231, 238, 233, 0.66)) !important;
}

:root[data-theme="light"] .cb-luxe-footer {
  background:
    linear-gradient(90deg, transparent, rgba(157, 105, 35, 0.26) 18%, rgba(45, 118, 148, 0.16) 52%, rgba(157, 105, 35, 0.16) 82%, transparent) top/100% 1px no-repeat,
    linear-gradient(90deg, rgba(40, 91, 116, 0.045) 1px, transparent 1px) center top / 92px 92px,
    linear-gradient(0deg, rgba(40, 91, 116, 0.04) 1px, transparent 1px) center top / 92px 92px,
    radial-gradient(42rem 24rem at 12% 20%, rgba(48, 130, 151, 0.12), transparent 72%),
    radial-gradient(38rem 28rem at 88% 18%, rgba(174, 113, 48, 0.10), transparent 72%),
    linear-gradient(180deg, rgba(255, 252, 244, 0), rgba(245, 238, 224, 0.76) 42%, rgba(236, 230, 215, 0.88)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 -20px 64px rgba(74, 54, 28, 0.08) !important;
}

:root[data-theme="light"] .cb-luxe-footer :is(.site-footer__grid, .le-footer-grid) {
  border-color: rgba(45, 96, 122, 0.12);
  outline-color: rgba(158, 104, 34, 0.12);
  background: transparent;
  box-shadow: none;
}

:root[data-theme="light"] .cb-luxe-footer :is(.site-footer__col-label, .le-footer h3, .le-footer h4) {
  color: rgb(45, 65, 90) !important;
  text-shadow: 0 1px 0 rgba(255, 252, 244, 0.85), 0 8px 18px rgba(70, 52, 28, 0.10) !important;
}

:root[data-theme="light"] .cb-luxe-footer :is(.site-footer__tagline, .site-footer__contact-item, .le-footer-brand p, .le-footer-contact li, .le-footer a, .site-footer__links a) {
  text-shadow: 0 1px 0 rgba(255, 252, 244, 0.72), 0 8px 18px rgba(70, 52, 28, 0.08) !important;
}

:root[data-theme="light"] .cb-luxe-footer :is(.site-footer__links a, .site-footer__contact-item a, .footer__review-link, .le-footer a) {
  color: rgb(37, 58, 86) !important;
}

:root[data-theme="light"] .cb-luxe-footer :is(.site-footer__links a:hover, .site-footer__contact-item a:hover, .footer__review-link:hover, .le-footer a:hover) {
  color: rgb(0, 86, 126) !important;
}

@media (max-width: 900px) {
  .cb-luxe-footer :is(.site-footer__grid, .le-footer-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .cb-contact-motif,
  .cb-footer-motif {
    opacity: 0.24;
    transform: scale(0.78);
  }

  .cb-contact-motif--sensor,
  .cb-footer-motif--coil {
    left: -4rem;
  }

  .cb-contact-motif--damper,
  .cb-footer-motif--vav {
    right: -4.5rem;
  }

  .cb-contact-motif--flow {
    left: -3.5rem;
    bottom: 4rem;
  }

  .cb-contact-motif--meter {
    right: -3rem;
    top: 3.5rem;
  }

  .cb-luxe-footer :is(.site-footer__grid, .le-footer-grid) {
    grid-template-columns: 1fr !important;
    padding-inline: 1.1rem !important;
  }
}

/* ── TAG-20260624-FOOTER-FAQ-POLISH
   Footer interior polish + category FAQ premium upgrade.
   Both dark and light themes are addressed. ──────────────── */

/* ── Footer — animated shimmer on the top accent line ── */
@keyframes cb-footer-shimmer {
  0%   { background-position: -200% 0, center top, center top, center, center, center; }
  100% { background-position:  200% 0, center top, center top, center, center, center; }
}

.cb-luxe-footer {
  animation: cb-footer-shimmer 8s ease-in-out infinite;
  background-size: 200% 1px, 92px 92px, 92px 92px, auto, auto, auto !important;
}

/* ── Footer — link hover: slide-in underline ── */
.cb-luxe-footer :is(.site-footer__links a, .le-footer a) {
  position: relative !important;
  text-decoration: none !important;
}

.cb-luxe-footer :is(.site-footer__links a, .le-footer a)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(152, 226, 255, 0.82), rgba(227, 197, 135, 0.56));
  transition: width 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cb-luxe-footer :is(.site-footer__links a:hover, .le-footer a:hover)::after {
  width: 100%;
}

:root[data-theme="light"] .cb-luxe-footer :is(.site-footer__links a, .le-footer a)::after {
  background: linear-gradient(90deg, rgba(0, 86, 126, 0.56), rgba(143, 95, 28, 0.34));
}

/* ── Footer — brand logo soft glow on hover ── */
.cb-luxe-footer :is(.site-footer__logo, .le-logo) {
  transition: filter 0.4s ease, opacity 0.3s ease !important;
}

.cb-luxe-footer :is(.site-footer__col--brand a:hover .site-footer__logo,
  .le-brand:hover .le-logo) {
  filter: drop-shadow(0 0 12px rgba(152, 226, 255, 0.38)) drop-shadow(0 0 28px rgba(152, 226, 255, 0.16)) !important;
  opacity: 1 !important;
}

:root[data-theme="light"] .cb-luxe-footer :is(.site-footer__col--brand a:hover .site-footer__logo,
  .le-brand:hover .le-logo) {
  filter: drop-shadow(0 0 10px rgba(0, 86, 126, 0.22)) drop-shadow(0 0 24px rgba(0, 86, 126, 0.10)) !important;
}

/* ── Footer — refined bottom bar gradient treatment ── */
.cb-luxe-footer :is(.site-footer__bottom, .le-footer__bottom) {
  background:
    linear-gradient(90deg, transparent, rgba(214, 178, 93, 0.18) 20%, rgba(155, 220, 255, 0.12) 50%, rgba(214, 178, 93, 0.14) 80%, transparent) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(1, 5, 14, 0.32), rgba(1, 5, 14, 0.18)) !important;
  border-top-color: transparent !important;
  padding: 1.35rem 1.5rem !important;
}

:root[data-theme="light"] .cb-luxe-footer :is(.site-footer__bottom, .le-footer__bottom) {
  background:
    linear-gradient(90deg, transparent, rgba(157, 105, 35, 0.16) 20%, rgba(45, 118, 148, 0.10) 50%, rgba(157, 105, 35, 0.12) 80%, transparent) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(236, 230, 215, 0.28), rgba(236, 230, 215, 0.14)) !important;
  border-top-color: transparent !important;
}

/* ── Footer — grid card inner glow on brand column ── */
.cb-luxe-footer :is(.site-footer__col--brand, .le-footer-brand) {
  border-right: 1px solid rgba(155, 220, 255, 0.08);
  padding-right: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 900px) {
  .cb-luxe-footer :is(.site-footer__col--brand, .le-footer-brand) {
    border-right: 0;
    border-bottom: 1px solid rgba(155, 220, 255, 0.08);
    padding-right: 0;
    padding-bottom: 1.5rem;
  }
}

:root[data-theme="light"] .cb-luxe-footer :is(.site-footer__col--brand, .le-footer-brand) {
  border-right-color: rgba(45, 96, 122, 0.08);
}

:root[data-theme="light"] .cb-luxe-footer :is(.site-footer__col--brand, .le-footer-brand) {
  border-bottom-color: rgba(45, 96, 122, 0.08);
}

/* ── Footer — Google review CTA glow ── */
.cb-luxe-footer .footer__review-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.5rem 1rem !important;
  margin-top: 1rem !important;
  border: 1px solid rgba(227, 197, 135, 0.22) !important;
  border-radius: 6px !important;
  background: linear-gradient(145deg, rgba(227, 197, 135, 0.06), rgba(227, 197, 135, 0.02)) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s !important;
}

.cb-luxe-footer .footer__review-link:hover {
  border-color: rgba(227, 197, 135, 0.52) !important;
  background: linear-gradient(145deg, rgba(227, 197, 135, 0.12), rgba(227, 197, 135, 0.04)) !important;
  box-shadow: 0 0 18px rgba(227, 197, 135, 0.12) !important;
  text-decoration: none !important;
}

:root[data-theme="light"] .cb-luxe-footer .footer__review-link {
  border-color: rgba(143, 95, 28, 0.18) !important;
  background: linear-gradient(145deg, rgba(143, 95, 28, 0.05), rgba(143, 95, 28, 0.02)) !important;
}

:root[data-theme="light"] .cb-luxe-footer .footer__review-link:hover {
  border-color: rgba(143, 95, 28, 0.38) !important;
  background: linear-gradient(145deg, rgba(143, 95, 28, 0.10), rgba(143, 95, 28, 0.04)) !important;
  box-shadow: 0 0 14px rgba(143, 95, 28, 0.08) !important;
}


/* ══════════════════════════════════════════════════════
   Category template FAQ — premium glass-card upgrade
   ══════════════════════════════════════════════════════ */

/* ── FAQ section — refined heading with decorative rule ── */
body.cb-role-internal :is(.le-template-category, .le-template-article) .faq-block__header {
  position: relative;
  padding-bottom: 1.5rem;
}

body.cb-role-internal :is(.le-template-category, .le-template-article) .faq-block__header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(180px, 60%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 178, 93, 0.52), rgba(155, 220, 255, 0.34), rgba(214, 178, 93, 0.42), transparent);
}

:root[data-theme="light"] body.cb-role-internal :is(.le-template-category, .le-template-article) .faq-block__header::after {
  background: linear-gradient(90deg, transparent, rgba(143, 95, 28, 0.30), rgba(45, 118, 148, 0.18), rgba(143, 95, 28, 0.24), transparent);
}

/* ── FAQ section — intro text refinement ── */
body.cb-role-internal :is(.le-template-category, .le-template-article) .faq-block__intro {
  color: rgba(200, 222, 248, 0.72) !important;
  font-size: 0.98rem !important;
  letter-spacing: 0.01em !important;
  max-width: 52ch !important;
  margin-inline: auto !important;
  text-align: center !important;
}

:root[data-theme="light"] body.cb-role-internal :is(.le-template-category, .le-template-article) .faq-block__intro {
  color: rgba(37, 58, 86, 0.72) !important;
}

/* ── FAQ items — glass-card treatment ── */
body.cb-role-internal :is(.le-template-category, .le-template-article) .faq-block__item {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.010) 48%, rgba(7, 18, 34, 0.12)) !important;
  border: 1px solid rgba(155, 220, 255, 0.12) !important;
  border-radius: 10px !important;
  padding: clamp(1.15rem, 2.4vw, 1.65rem) clamp(1.35rem, 3vw, 2rem) !important;
  box-shadow:
    0 0 0 1px rgba(255, 245, 218, 0.030),
    0 12px 36px rgba(0, 6, 20, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
          backdrop-filter: blur(8px) saturate(1.05);
}

body.cb-role-internal :is(.le-template-category, .le-template-article) .faq-block__item:hover {
  border-color: rgba(214, 178, 93, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(255, 245, 218, 0.050),
    0 16px 46px rgba(0, 6, 20, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;
  background-image:
    linear-gradient(135deg,
      transparent 0%,
      rgba(214, 178, 93, 0.045) 18%,
      rgba(155, 220, 255, 0.030) 52%,
      transparent 100%) !important;
}

body.cb-role-internal :is(.le-template-category, .le-template-article) .faq-block__item[open] {
  border-color: rgba(214, 178, 93, 0.34) !important;
  background:
    linear-gradient(135deg,
      transparent 0%,
      rgba(214, 178, 93, 0.055) 14%,
      rgba(155, 220, 255, 0.035) 50%,
      rgba(214, 178, 93, 0.030) 86%,
      transparent 100%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.014) 48%, rgba(7, 18, 34, 0.14)) !important;
  box-shadow:
    0 0 0 1px rgba(255, 245, 218, 0.06),
    0 0 22px rgba(214, 178, 93, 0.08),
    0 18px 52px rgba(0, 6, 20, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Long-form article FAQ glass cards */
:root[data-theme="light"] body.cb-role-internal .le-template-article .faq-block__item {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.22) 48%, rgba(236, 230, 215, 0.18)) !important;
  border-color: rgba(45, 96, 122, 0.10) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.52),
    0 10px 30px rgba(46, 61, 82, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

:root[data-theme="light"] body.cb-role-internal .le-template-article .faq-block__item:hover {
  border-color: rgba(143, 95, 28, 0.20) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.58),
    0 14px 40px rgba(46, 61, 82, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
}

:root[data-theme="light"] body.cb-role-internal .le-template-article .faq-block__item[open] {
  border-color: rgba(143, 95, 28, 0.26) !important;
  background:
    linear-gradient(135deg,
      transparent 0%,
      rgba(143, 95, 28, 0.040) 14%,
      rgba(45, 118, 148, 0.025) 50%,
      rgba(143, 95, 28, 0.020) 86%,
      transparent 100%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.26) 48%, rgba(236, 230, 215, 0.22)) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.56),
    0 0 16px rgba(143, 95, 28, 0.06),
    0 16px 44px rgba(46, 61, 82, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

/* Category FAQs are ruled index rows over the parchment field, not cards. */
:root[data-theme="light"] body.cb-role-internal .le-template-category .faq-block__item,
:root[data-theme="light"] body.cb-role-internal .le-template-category .faq-block__item:hover,
:root[data-theme="light"] body.cb-role-internal .le-template-category .faq-block__item[open] {
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* ── FAQ question text styling on category pages ── */
body.cb-role-internal :is(.le-template-category, .le-template-article) .faq-block__question {
  font-family: var(--font-body-coastal, 'Manrope', 'Inter', sans-serif) !important;
  font-weight: 600 !important;
  font-size: clamp(0.98rem, 1.4vw, 1.12rem) !important;
  color: rgb(224, 238, 252) !important;
  text-shadow: 0 1px 2px rgba(0, 6, 18, 0.72) !important;
  padding-block: 0.45rem !important;
  letter-spacing: 0.005em !important;
}

:root[data-theme="light"] body.cb-role-internal :is(.le-template-category, .le-template-article) .faq-block__question {
  color: rgb(28, 48, 72) !important;
  text-shadow: 0 1px 0 rgba(255, 252, 244, 0.72) !important;
}

/* ── FAQ toggle icon — refined gold accent ── */
body.cb-role-internal :is(.le-template-category, .le-template-article) details.faq-block__item > summary.faq-block__question::after {
  border-color: rgba(214, 178, 93, 0.42) !important;
  color: rgb(227, 197, 135) !important;
  background:
    linear-gradient(rgb(227, 197, 135), rgb(227, 197, 135)) center / 0.58rem 1.5px no-repeat,
    linear-gradient(rgb(227, 197, 135), rgb(227, 197, 135)) center / 1.5px 0.58rem no-repeat !important;
  box-shadow: 0 0 0 2px rgba(214, 178, 93, 0.10), 0 4px 12px rgba(0, 6, 20, 0.18) !important;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.3s, box-shadow 0.3s, background 0.3s !important;
}

body.cb-role-internal :is(.le-template-category, .le-template-article) details.faq-block__item[open] > summary.faq-block__question::after {
  border-color: rgba(152, 226, 255, 0.52) !important;
  background:
    linear-gradient(rgb(152, 226, 255), rgb(152, 226, 255)) center / 0.58rem 1.5px no-repeat !important;
  box-shadow: 0 0 0 2px rgba(152, 226, 255, 0.14), 0 0 12px rgba(152, 226, 255, 0.12), 0 4px 12px rgba(0, 6, 20, 0.18) !important;
  transform: translateY(-50%) rotate(180deg) !important;
}

:root[data-theme="light"] body.cb-role-internal :is(.le-template-category, .le-template-article) details.faq-block__item > summary.faq-block__question::after {
  border-color: rgba(143, 95, 28, 0.28) !important;
  color: rgb(143, 95, 28) !important;
  background:
    linear-gradient(rgb(143, 95, 28), rgb(143, 95, 28)) center / 0.58rem 1.5px no-repeat,
    linear-gradient(rgb(143, 95, 28), rgb(143, 95, 28)) center / 1.5px 0.58rem no-repeat !important;
  box-shadow: 0 0 0 2px rgba(143, 95, 28, 0.06), 0 4px 10px rgba(70, 52, 28, 0.08) !important;
}

:root[data-theme="light"] body.cb-role-internal :is(.le-template-category, .le-template-article) details.faq-block__item[open] > summary.faq-block__question::after {
  border-color: rgba(0, 86, 126, 0.36) !important;
  background:
    linear-gradient(rgb(0, 86, 126), rgb(0, 86, 126)) center / 0.58rem 1.5px no-repeat !important;
  box-shadow: 0 0 0 2px rgba(0, 86, 126, 0.08), 0 0 10px rgba(0, 86, 126, 0.06), 0 4px 10px rgba(70, 52, 28, 0.08) !important;
}

/* ── FAQ answer — refined typography + top divider ── */
body.cb-role-internal :is(.le-template-category, .le-template-article) .faq-block__answer {
  border-top: 1px solid rgba(155, 220, 255, 0.10) !important;
  margin-top: 0.85rem !important;
  padding-top: 0.95rem !important;
  color: rgba(205, 224, 248, 0.82) !important;
  font-size: 0.95rem !important;
  line-height: 1.72 !important;
}

:root[data-theme="light"] body.cb-role-internal :is(.le-template-category, .le-template-article) .faq-block__answer {
  border-top-color: rgba(45, 96, 122, 0.10) !important;
  color: rgba(37, 58, 86, 0.78) !important;
}

/* ── FAQ list gap — slightly tighter with glass cards ── */
body.cb-role-internal :is(.le-template-category, .le-template-article) .faq-block__list {
  gap: 0.7rem !important;
}

/* ── FAQ section container — more breathing room ── */
body.cb-role-internal :is(.le-template-category, .le-template-article) .builder-block.faq-block {
  padding: clamp(3rem, 6vw, 5rem) 0 !important;
}

/* ── Smooth details open/close animation ── */
body.cb-role-internal :is(.le-template-category, .le-template-article) .faq-block__answer {
  animation: cb-faq-reveal 0.35s ease-out;
}

@keyframes cb-faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ══════════════════════════════════════════════════════
   TAG-20260624-INTERIOR-REFINE
   Builds on TAG-20260624-FOOTER-FAQ-POLISH. Three asks:
   (1) legible in-page rail separators
   (2) footer column-label accent rule
   (3) category FAQ light-theme card contrast
   Both themes tuned. Appended last → wins specificity ties.
   ══════════════════════════════════════════════════════ */

/* ── (1) In-page rail: restore visible ◆ entry separators on desktop.
   The rail redesign (block ~L1196) set these to `content:''; display:none;
   width:0; color:transparent`, dropping separators in favour of an active
   underline. The user wants entries delimited again, so re-enable the pseudo
   fully — overriding every property that block zeroes. ── */
body.cb-role-internal .le-nav--secondary .le-nav-links li + li::before,
.le .le-nav--secondary .le-nav-links li + li::before {
  content: '\25C6' !important;
  display: inline-flex !important;
  align-self: center !important;
  width: auto !important;
  height: auto !important;
  font-family: system-ui, -apple-system, sans-serif !important; /* clean diamond, no serif ligature */
  font-size: 6px !important;
  line-height: 1 !important;
  color: rgba(150, 212, 247, 0.66) !important;
  background: transparent !important;
  margin: 0 13px !important;
  text-shadow: 0 0 6px rgba(150, 212, 247, 0.38) !important;
  pointer-events: none !important;
  user-select: none !important;
}
:root[data-theme="light"] body .le-nav--secondary .le-nav-links li + li::before {
  color: rgba(18, 78, 128, 0.58) !important;
  background: transparent !important;
  text-shadow: none !important;
}

/* ── (2) Footer column labels: short gradient accent rule beneath each
   heading. Gives the link columns visible structure instead of floating
   uppercase text. ── */
.cb-luxe-footer :is(.site-footer__col-label, .le-footer h3, .le-footer h4) {
  position: relative !important;
  padding-bottom: 11px !important;
  margin-bottom: 14px !important;
}
.cb-luxe-footer :is(.site-footer__col-label, .le-footer h3, .le-footer h4)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(214, 178, 93, 0.88), rgba(155, 220, 255, 0.42));
  box-shadow: 0 0 10px rgba(214, 178, 93, 0.22);
}
:root[data-theme="light"] .cb-luxe-footer :is(.site-footer__col-label, .le-footer h3, .le-footer h4)::after {
  background: linear-gradient(90deg, rgba(157, 105, 35, 0.78), rgba(45, 118, 148, 0.40));
  box-shadow: none;
}

/* ── (3) Article FAQ — retain a contained reading surface on long-form pages.
   Category archives now use transparent ruled rows over their illustrated
   parchment field; the article treatment remains intentionally contained. ── */
:root[data-theme="light"] body.cb-role-internal .le-template-article .faq-block__item {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(252, 250, 245, 0.90) 60%, rgba(247, 243, 234, 0.86)) !important;
  border-color: rgba(45, 96, 122, 0.17) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 1px 3px rgba(46, 61, 82, 0.07),
    0 8px 22px rgba(46, 61, 82, 0.10) !important;
}
:root[data-theme="light"] body.cb-role-internal .le-template-article .faq-block__item:hover {
  border-color: rgba(143, 95, 28, 0.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 5px rgba(46, 61, 82, 0.09),
    0 14px 34px rgba(46, 61, 82, 0.14) !important;
}
:root[data-theme="light"] body.cb-role-internal .le-template-article .faq-block__item[open] {
  border-color: rgba(143, 95, 28, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(143, 95, 28, 0.10),
    0 16px 40px rgba(46, 61, 82, 0.15) !important;
}

/* ══════════════════════════════════════════════════════════════
   TAG-20260624-CARDS-AND-FOOTER
   (a) Home cards opt OUT of the unified text-shadow halo — the card
       surface already provides contrast, so the 5-layer halo just
       makes the type look heavy/blurred. (b) Footer (which lives
       OUTSIDE .home-page, so the halo never reached it) opts IN to a
       legibility shadow/outline. (c) Footer's double frame (cyan
       border + inset gold outline) collapses to one refined frame.
   ══════════════════════════════════════════════════════════════ */

/* (a) Strip the halo from card contents on home (beats the 0,2,1
   `:root[data-theme] .home-page *` halo via the extra card class). */
:root[data-theme="dark"]  .home-page :is(.pricing-table-block__plan, .service-card, .testimonial-card, .category-card, .faq-block__item) *,
:root[data-theme="light"] .home-page :is(.pricing-table-block__plan, .service-card, .testimonial-card, .category-card, .faq-block__item) * {
  text-shadow: none !important;
}

/* (b) Footer legibility: a tight edge + soft halo so type reads over
   the busy footer field. Dark footer → deep-navy glow; light footer
   (cream) → white glow under dark ink. */
.cb-luxe-footer :is(.site-footer__col-label, .le-footer h3, .le-footer h4,
  .site-footer__links a, .le-footer a, .le-footer-brand p, .site-footer__tagline,
  .le-footer-contact li, .site-footer__contact-item) {
  text-shadow:
    0 1px 0 rgba(0, 6, 18, 0.55),
    0 0 1px rgba(0, 8, 24, 0.75),
    0 0 7px rgba(0, 8, 24, 0.55) !important;
}
:root[data-theme="light"] .cb-luxe-footer :is(.site-footer__col-label, .le-footer h3, .le-footer h4,
  .site-footer__links a, .le-footer a, .le-footer-brand p, .site-footer__tagline,
  .le-footer-contact li, .site-footer__contact-item) {
  text-shadow:
    0 1px 0 rgba(255, 252, 244, 0.85),
    0 0 1px rgba(255, 255, 255, 0.7),
    0 0 7px rgba(255, 255, 255, 0.6) !important;
}

/* (c) Footer: collapse the double frame → one refined frame. Drop the
   inset gold outline; keep the single glass border as the sole edge. */
.cb-luxe-footer :is(.site-footer__grid, .le-footer-grid) {
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════════
   TAG-20260624-SECTION-LIST-DIVIDER-CENTER
   `.le-divider` ([rule] [h2] [rule]) shipped a fixed 96px L/R padding.
   On scale-down that 192px + the nowrap h2 overflow the row, the
   flex:1 rules collapse to 0 and the heading is shoved right of
   centre. Make the horizontal padding fluid so the rules keep room
   and the heading stays centred at every width (vertical unchanged).
   ══════════════════════════════════════════════════════════════ */
.le .le-divider,
.le-template-category .le-divider,
.le-template-article .le-divider {
  padding-left: clamp(16px, 6vw, 96px) !important;
  padding-right: clamp(16px, 6vw, 96px) !important;
}

/* ══════════════════════════════════════════════════════════════
   TAG-20260624-INPAGE-MENU
   In-page section menus — home (#home-post-strip) + interior
   (.le-nav--secondary): centred entry row on desktop/tablet, an
   odometer collapse on phones (a centred trigger shows the active
   section; tap → dropdown of all entries; tap an entry or scroll
   out → collapse). Active-entry underline preserved. Light + dark.
   NB: #home-post-strip is position:fixed (reveal bar) — never set
   position:relative on it; fixed already contains its abs children.
   ══════════════════════════════════════════════════════════════ */

/* ---------- DESKTOP / TABLET (≥769): centred entry row ---------- */
@media (min-width: 769px) {
  .home-post-strip__toggle,
  .le-nav--secondary .inpage-odo { display: none !important; }

  /* interior rail: centre its entries too (global consistency) */
  body.cb-role-internal .le-nav--secondary .le-nav-links,
  .le .le-nav--secondary .le-nav-links {
    justify-content: safe center !important;
  }

  .home-page #home-post-strip { justify-content: center !important; gap: var(--menu-gap, 22px) !important; }
  .home-page #home-post-strip .home-post-strip__home-link {
    position: static !important;
    transform: none !important;
    border-right: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 auto !important;
  }
  .home-page #home-post-strip .home-post-strip__label:not(.home-post-strip__home-link) {
    position: absolute !important;
    left: 24px !important; top: 50% !important;
    transform: translateY(-50%) !important;
    border-right: 0 !important; padding-right: 0 !important;
  }
  .home-page #home-post-strip .home-post-strip__items {
    flex: 0 1 auto !important;
    justify-content: safe center !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    padding-left: 0 !important;
  }
}

/* ---------- PHONE (≤768): odometer collapse ---------- */
@media (max-width: 768px) {
  /* shared trigger appearance */
  .home-post-strip__toggle,
  .le-nav--secondary .inpage-odo {
    display: inline-flex !important;
    align-items: center; gap: 8px; margin: 0 auto !important; max-width: 84%;
    background: none !important; border: 0 !important; cursor: pointer;
    font-family: var(--font-body-coastal, 'Manrope', sans-serif);
    font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--brand-cyan, rgb(140, 220, 255));
    padding: 16px 4px !important;
  }
  .home-post-strip__toggle-label,
  .inpage-odo__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .home-post-strip__toggle-chevron,
  .inpage-odo__chevron { flex: 0 0 auto; transition: transform .25s ease; }
  .home-post-strip.is-odo-open .home-post-strip__toggle-chevron,
  .le-nav--secondary.is-odo-open .inpage-odo__chevron { transform: rotate(180deg); }

  /* shared dropdown panel (entries stacked) — applied per nav below.
     overflow:visible so the absolute dropdown isn't clipped by the bar
     (the strip ships overflow:hidden for its desktop horizontal scroll). */
  .home-page #home-post-strip,
  body.cb-role-internal .le-nav--secondary,
  .le .le-nav--secondary {
    justify-content: center !important;
    overflow: visible !important;
  }

  /* HOME odometer */
  .home-page #home-post-strip { padding: 0 16px !important; }
  .home-page #home-post-strip .home-post-strip__home-link,
  .home-page #home-post-strip .home-post-strip__label { display: none !important; }
  .home-page #home-post-strip .home-post-strip__items,
  body.cb-role-internal .le-nav--secondary .le-nav-links,
  .le .le-nav--secondary .le-nav-links {
    position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
    flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important; margin: 0 !important; padding: 0 !important;
    background: rgb(2, 6, 15) !important;
    max-height: 0 !important; overflow: hidden !important;
    transition: max-height .3s ease;
    box-shadow: 0 18px 40px -18px rgba(0, 6, 18, 0.9);
  }
  .home-page #home-post-strip.is-odo-open .home-post-strip__items,
  body.cb-role-internal .le-nav--secondary.is-odo-open .le-nav-links,
  .le .le-nav--secondary.is-odo-open .le-nav-links {
    max-height: 70vh !important; overflow-y: auto !important;
    border-bottom: 1px solid rgba(190, 220, 250, 0.18);
  }
  /* entries: full-width rows, no inter-item ◆/| separator, hairline row borders */
  .home-page #home-post-strip .home-post-strip__items li,
  body.cb-role-internal .le-nav--secondary .le-nav-links li,
  .le .le-nav--secondary .le-nav-links li { width: 100% !important; }
  .home-page #home-post-strip .home-post-strip__items li + li::before,
  body.cb-role-internal .le-nav--secondary .le-nav-links li + li::before,
  .le .le-nav--secondary .le-nav-links li + li::before { display: none !important; }
  .home-page #home-post-strip .home-post-strip__items li + li,
  body.cb-role-internal .le-nav--secondary .le-nav-links li + li,
  .le .le-nav--secondary .le-nav-links li + li { border-top: 1px solid rgba(190, 220, 250, 0.10); }
  .home-page #home-post-strip .home-post-strip__items a,
  body.cb-role-internal .le-nav--secondary .le-nav-links a,
  .le .le-nav--secondary .le-nav-links a {
    width: 100% !important; justify-content: center !important; padding: 14px 16px !important;
  }

  /* light theme dropdown */
  :root[data-theme="light"] .home-page #home-post-strip .home-post-strip__items,
  :root[data-theme="light"] .le-nav--secondary .le-nav-links { background: rgb(252, 247, 238) !important; }
  :root[data-theme="light"] .home-page #home-post-strip .home-post-strip__items li + li,
  :root[data-theme="light"] .le-nav--secondary .le-nav-links li + li { border-top-color: rgba(40, 30, 20, 0.10) !important; }
}

/* Responsive in-page menu centering (TAG-20260627-INPAGE-CENTER)
   Keep the sticky home and interior section menus visually centered after
   older strip/marquee rules have run. */
@media (min-width: 769px) {
  body.cb-role-internal .le-nav--secondary .le-nav-links,
  .le .le-nav--secondary .le-nav-links {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .home-page #home-post-strip .home-post-strip__home-link {
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .home-page #home-post-strip .home-post-strip__items {
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 768px) {
  .home-page #home-post-strip,
  body.cb-role-internal .le-nav--secondary,
  .le .le-nav--secondary {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .home-page #home-post-strip .home-post-strip__toggle,
  body.cb-role-internal .le-nav--secondary .inpage-odo,
  .le .le-nav--secondary .inpage-odo {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .home-page #home-post-strip .home-post-strip__items a,
  body.cb-role-internal .le-nav--secondary .le-nav-links a,
  .le .le-nav--secondary .le-nav-links a {
    justify-content: center !important;
    text-align: center !important;
  }
}


/* ── TAG-20260624-NAV-PSEUDO-BLUR ─────────────────────────────────────────────
   backdrop-filter on .cb-nav itself creates a containing block that traps
   .cb-nav__panel (position:fixed) inside the 66px bar on mobile, preventing
   the drawer from filling the viewport. Previous fix: disable blur on mobile.
   Better fix: move ALL blur+gradient to .cb-nav::before.

   ::before is a sibling of .cb-nav__panel, NOT an ancestor → no containing
   block is created at any breakpoint, drawer always escapes to the viewport.
   This lets us restore the glass blur on mobile (both themes).

   theme.css transition-suppression already covers .cb-nav::before during
   resize (html.cb-resizing .cb-nav::before line 830). */

/* Strip glass from the element itself (all breakpoints + themes) */
.cb-nav,
.cb-nav.is-scrolled,
:root[data-theme="light"] .cb-nav,
:root[data-theme="light"] .cb-nav.is-scrolled {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Pseudo carries the gradient + blur — dark mode defaults */
.cb-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 6, 15, 0.55) 0%, rgba(2, 6, 15, 0) 100%);
  backdrop-filter: blur(var(--glass-blur-xs)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-xs)) saturate(var(--glass-saturate));
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
}
.cb-nav.is-scrolled::before {
  background: linear-gradient(180deg, rgba(2, 6, 15, 0.85) 0%, rgba(2, 6, 15, 0.15) 100%);
  backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
}

/* Light mode gradient variants */
:root[data-theme="light"] .cb-nav::before {
  background: linear-gradient(180deg, rgba(255, 250, 238, 0.72) 0%, rgba(255, 250, 238, 0) 100%);
}
:root[data-theme="light"] .cb-nav.is-scrolled::before {
  background: linear-gradient(180deg, rgba(255, 250, 238, 0.92) 0%, rgba(255, 250, 238, 0.52) 100%);
}

/* ── TAG-20260624-INPAGE-ACTIVE-NAVY ──────────────────────────────────────────
   Light mode in-page menu selected state: the active/is-current accent was
   terracotta (interior) or light-blue (home strip) — both wrong on cream bg.
   Navy is the correct brand accent for light surfaces. */

/* Interior secondary rail — active item */
:root[data-theme="light"] body .le-nav--secondary .le-nav-links a:hover,
:root[data-theme="light"] body .le-nav--secondary .le-nav-links a.is-current {
  color: rgb(10, 35, 75) !important;
  text-decoration: none !important;
}
:root[data-theme="light"] body .le-nav--secondary .le-nav-links a.is-current::after {
  background: linear-gradient(90deg, transparent, rgba(10, 35, 75, 0.82), transparent) !important;
  box-shadow: 0 0 12px rgba(10, 35, 75, 0.14) !important;
}


/* ── TAG-20260624-FAQ-UNIFIED ──────────────────────────────────────────────────
   FAQ accordion — unified toggle + home glass card elevation.

   PROBLEMS:
   - Home: plain text "+" (invisible in dark mode against the halo), flat rows
   - Interior: CSS-drawn circle with gradient strokes — over-engineered, goofy
   - Inconsistent between the two locations

   FIX: one toggle treatment everywhere — Manrope "+" that rotates 45° to "×"
   on open. No circle border. Gold color (brand action identity). Applied via
   same-specificity override after the existing interior circle rules. */

/* Global: clean +/× toggle — overrides TAG-20260623-FAQ-SYMBOL circle */
details.faq-block__item > summary.faq-block__question::after {
  content: '+' !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important; height: auto !important;
  border: none !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 1.5rem !important; font-weight: 300 !important;
  line-height: 1 !important;
  color: var(--le-gold-300, #d4a84b) !important;
  text-shadow: none !important;
  margin-left: 16px !important;
  position: static !important;
  top: auto !important; right: auto !important;
  transform: none !important;
  flex-shrink: 0 !important;
  transition: transform 0.28s ease, color 0.2s ease !important;
}
details.faq-block__item[open] > summary.faq-block__question::after {
  content: '+' !important;
  background: none !important;
  transform: rotate(45deg) !important;
}

/* Interior: same clean toggle — overrides the circle rules at 7416-7448.
   Selectors match the existing specificity (0,4,4) so later-in-file wins. */
body.cb-role-internal :is(.le-template-category, .le-template-article) details.faq-block__item > summary.faq-block__question::after {
  content: '+' !important;
  width: auto !important; height: auto !important;
  border: none !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 1.5rem !important; font-weight: 300 !important;
  line-height: 1 !important;
  color: var(--le-gold-300, #d4a84b) !important;
  position: static !important;
  top: auto !important; right: auto !important;
  transform: none !important;
  flex-shrink: 0 !important;
  margin-left: 16px !important;
  text-shadow: none !important;
  transition: transform 0.28s ease !important;
}
body.cb-role-internal :is(.le-template-category, .le-template-article) details.faq-block__item[open] > summary.faq-block__question::after {
  content: '+' !important;
  background: none !important;
  transform: rotate(45deg) !important;
}
:root[data-theme="light"] body.cb-role-internal :is(.le-template-category, .le-template-article) details.faq-block__item > summary.faq-block__question::after {
  color: var(--le-gold-300, #a8640f) !important;
  border: none !important; background: none !important; box-shadow: none !important;
}
:root[data-theme="light"] body.cb-role-internal :is(.le-template-category, .le-template-article) details.faq-block__item[open] > summary.faq-block__question::after {
  background: none !important;
  transform: rotate(45deg) !important;
}


/* Interior FAQ: the template injects <span class="ind">+</span> (only for role pages).
   Home FAQ has NO .ind span — it uses ::after. So for interior:
   1. Hide the ::after (would be a duplicate toggle)
   2. Style .ind span as clean gold +/× (overrides the goofy coral circle in prototype/internal.css) */

/* Kill ::after on interior — .ind is the real toggle there */
.le-faq details.faq-block__item > summary.faq-block__question::after,
body.cb-role-internal :is(.le-template-category, .le-template-article) details.faq-block__item > summary.faq-block__question::after {
  display: none !important;
}

/* Style the .ind span — no circle, gold +, rotates 45° to × on open */
.le-faq summary .ind {
  width: auto !important; height: auto !important;
  border: none !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 1.5rem !important; font-weight: 300 !important;
  line-height: 1 !important;
  color: var(--le-gold-300, #d4a84b) !important;
  text-shadow: none !important;
  margin-left: 16px !important;
  flex-shrink: 0 !important;
  transition: transform 0.28s ease !important;
}
.le-faq details[open] summary .ind {
  transform: rotate(45deg) !important;
  background: none !important;
}
:root[data-theme="light"] .le-faq summary .ind {
  color: var(--le-gold-300, #a8640f) !important;
  border: none !important;
}

/* Ensure summary is flex so .ind stays pinned to the right */
.le-faq summary.faq-block__question {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-right: 0 !important;
}

/* ── Nav Call / Text pills — dark mode hover (TAG-20260625-NAV-HOVER-DARK) ────────
   Default theme.css hover gives rgba(40,80,140,0.38) background with no text-color
   change — barely visible on the dark navy nav. Upgrade to a vivid teal fill +
   bright white text + a teal glow for unmistakable feedback. */
:root[data-theme="dark"] .cb-nav__duo-row:hover,
:root[data-theme="dark"] .cb-nav__duo-row:focus-visible {
  background: rgba(27, 126, 142, 0.62) !important;
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(134, 206, 201, 0.55) !important;
}

/* ── Trust strip — light mode (TAG-20260625-TRUST-LIGHT) ──────────────────────────
   The old filter: grayscale(1) invert(1) brightness(0.2) inverted blocks.css's
   white-glow text-shadows to black → "black shadow on black text."
   Fix: remove filter so blocks.css's light-mode wildcard
   (dark near-edge rgb(0,8,24/36%) + white glow at 5/9/19px) applies directly.
   No text-shadow override needed — blocks.css provides the correct per-theme stack.
   Dark mode keeps its cream+navy glow from blocks.css wildcard (no change). */
:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .trust-strip {
  filter: none !important;
  color: rgba(8, 22, 48, 0.78) !important;
  opacity: 0.82 !important;
}

/* ── Hero headline outline parity (TAG-20260625-HERO-HEADLINE-OUTLINE) ────────
   The non-em headline should use one outline geometry in both themes: a thin,
   present edge plus restrained depth shadow. Dark uses black; light mirrors the
   edge in white and keeps a subtle navy depth layer. Avoid the older 40px halo. */
:root[data-theme="dark"] :is(.home-page, .le-template-category, .le-template-article) .le-cover-h1 {
  text-shadow:
    0 1px 0 rgb(0, 0, 0),
    0 0 1px rgb(0, 0, 0),
    0 2px 8px rgba(0, 0, 0, 0.56),
    0 10px 24px rgba(0, 0, 0, 0.30) !important;
}

:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .le-cover-h1 {
  color: #002d5a !important;
  text-shadow:
    0 1px 0 rgb(255, 255, 255),
    0 0 1px rgb(255, 255, 255),
    0 2px 8px rgba(255, 255, 255, 0.58),
    0 10px 24px rgba(10, 30, 60, 0.14) !important;
}

/* ── Hero paragraph + trust strip outline/glow enhancement (TAG-20260625-HERO-LEGIBILITY) ──
   Normal text can use text-shadow safely; unlike the gradient <em>, there is no
   transparent clipped fill for shadows to overpaint. Give the paragraph and
   trust strip a crisp theme edge plus a restrained glow/depth layer. */
:root[data-theme="dark"] :is(.home-page, .le-template-category, .le-template-article) .parallax-hero__lede {
  text-shadow:
    0 -1px 0 rgb(0, 0, 0),
    1px 0 0 rgb(0, 0, 0),
    -1px 0 0 rgb(0, 0, 0),
    0 1px 0 rgb(0, 0, 0),
    0 0 3px rgba(0, 0, 0, 0.96),
    0 3px 12px rgba(0, 0, 0, 0.88),
    0 14px 34px rgba(0, 0, 0, 0.58),
    0 0 28px rgba(2, 14, 32, 0.36) !important;
  opacity: 1 !important;
}

:root[data-theme="dark"] :is(.home-page, .le-template-category, .le-template-article) .trust-strip {
  text-shadow:
    0 1px 0 rgb(0, 0, 0),
    0 0 2px rgb(0, 0, 0),
    0 2px 8px rgba(0, 0, 0, 0.82),
    0 0 18px rgba(44, 151, 168, 0.24) !important;
}

:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .parallax-hero__lede {
  text-shadow:
    0 1px 0 rgb(255, 255, 255),
    0 0 2px rgb(255, 255, 255),
    0 2px 9px rgba(255, 255, 255, 0.74),
    0 5px 16px rgba(10, 30, 60, 0.14) !important;
}

:root[data-theme="light"] :is(.home-page, .le-template-category, .le-template-article) .trust-strip {
  text-shadow:
    0 1px 0 rgb(255, 255, 255),
    0 0 2px rgb(255, 255, 255),
    0 2px 8px rgba(255, 255, 255, 0.78),
    0 5px 14px rgba(10, 30, 60, 0.12) !important;
}

/* ── Parallax hero anchors + short-wide fit (TAG-20260625-HERO-ANCHORS) ─────
   Late overrides restore the intended landscape behavior after older "perfect
   fold" rules reintroduced a 600px minimum height. Short-wide viewports need
   the heading/lede to fit the actual viewport instead of forcing a tall splash. */

.le-cover-index a {
  color: inherit !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: baseline !important;
  gap: inherit !important;
  min-height: 44px;
}

.le-cover-index a:hover .label,
.le-cover-index a:focus-visible .label {
  color: var(--le-gold-300, #d4a84b) !important;
}

.le-cover-index a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

/* Article spec: phone layout is a readable detail list, not cramped 2-up stats. */
@media (max-width: 480px) {
  body.cb-role-internal .le.le-template-article .le-spec {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 18px var(--fluid-pad-x, 18px) !important;
  }

  body.cb-role-internal .le.le-template-article .le-spec-item {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  body.cb-role-internal .le.le-template-article .le-spec-sep {
    display: none !important;
  }
}


/* TAG-20260708-INTERNAL-BG-RUNTIME
   Minimal coastal-page-bg runtime for internal/article routes. Builder pages also
   receive this from blocks.css, but article/detail routes intentionally skip that
   heavier bundle; keep this subset in sync until a shared background CSS bundle
   replaces the duplication tracked in docs/debt. */
.coastal-page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 50% 55%, var(--bg-a, #050A1A) 0%, var(--bg-b, #02060F) 75%),
    var(--bg-b, #02060F);
  isolation: isolate;
  --coastal-page-bg-blue-travel: -36%;
  --coastal-page-bg-red-travel: 36%;
  --coastal-page-bg-breath-duration: 260s;
}

.coastal-page-bg--internal {
  inset: 0;
  left: 0;
  right: 0;
  width: 100vw;
  max-width: none;
  transform: none;
  --coastal-page-bg-scroll-speed: 1;
  --coastal-page-bg-family-spread: 1;
  --coastal-page-bg-family-overlap: 40%;
  --coastal-page-bg-family-opacity: 0.28;
  --coastal-page-bg-family-stride: 24%;
  --coastal-page-bg-family-scale: 1;
  --coastal-page-bg-family-filter: none;
  --coastal-page-bg-drift-duration: 220s;
  --coastal-page-bg-band-y: 0px;
  background: #02060F;
}

.coastal-page-bg--internal .coastal-page-bg__layer-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
}

.coastal-page-bg--internal .coastal-page-bg__layer--blue .coastal-page-bg__layer-inner {
  background-image: var(--coastal-page-bg-blue-url, url('../images/brand/breeze-blue.svg'));
}

.coastal-page-bg--internal .coastal-page-bg__layer--red .coastal-page-bg__layer-inner {
  background-image: var(--coastal-page-bg-red-url, url('../images/brand/breeze-red.svg'));
}

.coastal-page-bg--services {
  --coastal-page-bg-family-spread: 1;
  --coastal-page-bg-family-overlap: 40%;
}

.coastal-page-bg--areas {
  --coastal-page-bg-family-spread: 1.4;
  --coastal-page-bg-family-overlap: 48%;
  --coastal-page-bg-family-filter: hue-rotate(-14deg) saturate(0.94);
  --coastal-page-bg-blue-url: url('../images/brand/breeze-blue.svg');
  --coastal-page-bg-red-url: url('../images/brand/breeze-red.svg');
}

.coastal-page-bg--casestudies {
  --coastal-page-bg-family-spread: 1.4;
  --coastal-page-bg-family-overlap: 48%;
  --coastal-page-bg-family-filter: hue-rotate(-8deg) saturate(0.88);
}

.coastal-page-bg--effect-crossflow {
  --coastal-page-bg-scroll-speed: 0.28;
  --coastal-page-bg-family-scale: 1;
  --coastal-page-bg-drift-duration: 220s;
}

.coastal-page-bg--effect-wind-shear {
  --coastal-page-bg-scroll-speed: 0.24;
  --coastal-page-bg-family-scale: 1.002;
  --coastal-page-bg-family-stride: 24%;
  --coastal-page-bg-drift-duration: 250s;
}

.coastal-page-bg--effect-archive-dial {
  --coastal-page-bg-scroll-speed: 0.22;
  --coastal-page-bg-family-opacity: 0.24;
  --coastal-page-bg-family-scale: 1.002;
  --coastal-page-bg-family-stride: 24%;
  --coastal-page-bg-drift-duration: 280s;
}

/* Article pages and role-root category builders share the split-SVG asset and
   geometry runtime. Their purpose markers intentionally own different approved
   artboard/compositing tokens below; unrelated builders receive this baseline
   only through an explicit leading-hero opt-in. */

/* Baseline dark prototype compositing for explicit hero opt-ins. Automatic
   article/category surfaces override it with their locked purpose treatments. */
:root[data-theme="dark"] .coastal-page-bg--internal.coastal-page-bg--prototype-surface {
  --coastal-page-bg-family-opacity: 0.20;
  background:
    radial-gradient(74% 58% at 17% 18%, rgba(29, 55, 88, 0.22), transparent 78%),
    radial-gradient(62% 58% at 73% 48%, rgba(63, 30, 49, 0.22), transparent 82%),
    linear-gradient(180deg, #030815 0%, #050917 48%, #02060f 100%);
}

:root[data-theme="dark"] .coastal-page-bg--internal.coastal-page-bg--prototype-surface .coastal-page-bg__grain {
  opacity: 0.035;
}

/* TAG-20260717-PROTOTYPE-DOCUMENT-ARTBOARD
   Establish the document-artboard base for automatic prototype surfaces. Dark
   articles retain it to match the named article reference; category and light
   purpose locks below deliberately replace it with the approved 180vh field. */
body.cb-role-internal .site-content:has(.coastal-page-bg--prototype-surface:is(
  .coastal-page-bg--article-prototype,
  .coastal-page-bg--category-prototype
)) {
  position: relative;
}

body.cb-role-internal .coastal-page-bg--prototype-surface:is(
  .coastal-page-bg--article-prototype,
  .coastal-page-bg--category-prototype
) {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: auto;
}

:root[data-theme="dark"] .coastal-page-bg--internal.coastal-page-bg--article-prototype {
  --coastal-page-bg-family-opacity: 0.42;
  background: #02060F;
}

:root[data-theme="dark"] .coastal-page-bg--internal.coastal-page-bg--article-prototype .coastal-page-bg__grain {
  opacity: 0.07;
  mix-blend-mode: screen;
}

/* TAG-20260717-DARK-ARTICLE-LOCK
   The dark article field is the approved named-prototype match. Category
   tuning must stay on its own purpose marker so it cannot alter this exact
   #02060f / 0.42 / 0.07 document-artboard contract. */

/* Category indexes intentionally carry a little more atmospheric definition
   than articles. A 180vh field restores the former composition's readable
   ribbon scale while keeping roughly two bands, rather than all four, in a
   viewport. The restrained underpainting completes the blue/coral atmosphere
   without returning to the rejected four-bands-in-100vh field.

   TAG-20260717-DARK-CATEGORY-LOCK
   This is the separately approved dark category contract. Light adjustments
   must not share or override its geometry, opacity, or underpainting. */
:root[data-theme="dark"] .coastal-page-bg--internal.coastal-page-bg--category-prototype {
  position: fixed;
  inset: 0 0 auto;
  height: 180vh;
  --coastal-page-bg-family-opacity: 0.28;
  background:
    radial-gradient(74% 62% at 17% 18%, rgba(29, 55, 88, 0.12), transparent 78%),
    radial-gradient(64% 60% at 74% 47%, rgba(63, 30, 49, 0.10), transparent 82%),
    #02060F;
}

:root[data-theme="dark"] .coastal-page-bg--internal.coastal-page-bg--category-prototype .coastal-page-bg__grain {
  opacity: 0.07;
  mix-blend-mode: screen;
}

:root[data-theme="light"] .coastal-page-bg,
.cb-role-force-light .coastal-page-bg {
  background:
    radial-gradient(70% 90% at 50% 55%, #FBF8F0 0%, #F7F4ED 75%),
    #F7F4ED;
}

:root[data-theme="light"] .coastal-page-bg--internal,
.cb-role-force-light .coastal-page-bg--internal {
  --coastal-page-bg-family-opacity: 0.18;
  background: #F4EFE2;
  --coastal-page-bg-blue-url: url('../images/brand/breeze-blue.svg');
  --coastal-page-bg-red-url: url('../images/brand/breeze-red.svg');
}

/* The requested look-editorial light reference is about 1.8 viewports tall at
   desktop. Keep that readable ribbon scale on long live pages so the split-SVG
   texture is not stretched through 5k–13k documents. Opacity stays restrained
   and the low-alpha underpainting only carries its blue/coral atmosphere. */
:root[data-theme="light"] .coastal-page-bg--internal.coastal-page-bg--prototype-surface:is(
  .coastal-page-bg--article-prototype,
  .coastal-page-bg--category-prototype
),
.cb-role-force-light .coastal-page-bg--internal.coastal-page-bg--prototype-surface:is(
  .coastal-page-bg--article-prototype,
  .coastal-page-bg--category-prototype
) {
  position: fixed;
  inset: 0 0 auto;
  height: 180vh;
  --coastal-page-bg-family-opacity: 0.30;
  background:
    radial-gradient(76% 66% at 16% 18%, rgba(83, 164, 190, 0.06), transparent 78%),
    radial-gradient(66% 64% at 75% 47%, rgba(194, 104, 73, 0.05), transparent 82%),
    #F4EFE2;
}

:root[data-theme="light"] .coastal-page-bg--internal.coastal-page-bg--prototype-surface:is(
  .coastal-page-bg--article-prototype,
  .coastal-page-bg--category-prototype
) .coastal-page-bg__grain,
.cb-role-force-light .coastal-page-bg--internal.coastal-page-bg--prototype-surface:is(
  .coastal-page-bg--article-prototype,
  .coastal-page-bg--category-prototype
) .coastal-page-bg__grain {
  mix-blend-mode: multiply;
}

:root[data-theme="light"] .coastal-page-bg--areas,
.cb-role-force-light .coastal-page-bg--areas {
  --coastal-page-bg-blue-url: url('../images/brand/breeze-blue.svg');
  --coastal-page-bg-red-url: url('../images/brand/breeze-red.svg');
}

:root[data-theme="light"] .coastal-page-bg--casestudies,
.cb-role-force-light .coastal-page-bg--casestudies {
  --coastal-page-bg-family-opacity: 0.16;
}

.coastal-page-bg__custom {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease-in-out;
}

.coastal-page-bg__custom--dark { z-index: 1; opacity: 1; }
.coastal-page-bg__custom--light { z-index: 2; opacity: 0; }
:root[data-theme="light"] .coastal-page-bg__custom--dark,
.cb-role-force-light .coastal-page-bg__custom--dark { opacity: 0; }
:root[data-theme="light"] .coastal-page-bg__custom--light,
.cb-role-force-light .coastal-page-bg__custom--light { opacity: 1; }

.has-coastal-page-bg {
  position: relative;
  z-index: 1;
}

.coastal-page-bg__layer {
  position: absolute;
  top: 0;
  left: -10%;
  height: 100%;
  width: 120%;
  pointer-events: none;
  will-change: transform;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  opacity: var(--coastal-page-bg-layer-opacity, 1);
  filter: var(--coastal-page-bg-layer-filter, none);
}

.coastal-page-bg__layer img,
.coastal-page-bg:not(.coastal-page-bg--internal) .coastal-page-bg__svg {
  display: block;
  object-fit: cover;
}

.coastal-page-bg__layer--blue {
  mix-blend-mode: screen;
  transform: translateX(calc(var(--conv, 0) * var(--coastal-page-bg-blue-travel, -36%)));
}

.coastal-page-bg__layer--red {
  mix-blend-mode: screen;
  transform: translateX(calc(var(--conv, 0) * var(--coastal-page-bg-red-travel, 36%)));
}

.coastal-page-bg--internal .coastal-page-bg__band {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--i) * var(--coastal-page-bg-family-stride, 24%));
  height: var(--coastal-page-bg-family-overlap, 40%);
  overflow: hidden;
  will-change: transform;
  filter: var(--coastal-page-bg-family-filter, none);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  animation: coastal-bg-band-drift var(--coastal-page-bg-drift-duration, 220s) ease-in-out infinite alternate;
  animation-delay: var(--coastal-page-bg-band-delay, calc(var(--i) * -4s));
}

.coastal-page-bg--internal .coastal-page-bg__band:nth-child(2),
.coastal-page-bg--effect-wind-shear .coastal-page-bg__band:nth-child(2) { --coastal-page-bg-band-y: -1px; }
.coastal-page-bg--internal .coastal-page-bg__band:nth-child(3),
.coastal-page-bg--effect-wind-shear .coastal-page-bg__band:nth-child(3) { --coastal-page-bg-band-y: 1px; }
.coastal-page-bg--internal .coastal-page-bg__band:nth-child(4) { --coastal-page-bg-band-y: -1px; }
.coastal-page-bg--effect-archive-dial .coastal-page-bg__band:nth-child(2) { --coastal-page-bg-band-y: 1px; }
.coastal-page-bg--effect-archive-dial .coastal-page-bg__band:nth-child(3) { --coastal-page-bg-band-y: -1px; }

@keyframes coastal-bg-band-drift {
  from { transform: translate3d(0, calc(var(--coastal-page-bg-band-y, 0px) * -0.35), 0); }
  to { transform: translate3d(0, calc(var(--coastal-page-bg-band-y, 0px) * 0.35), 0); }
}

.coastal-page-bg--internal .coastal-page-bg__layer {
  inset: 0;
  left: 0;
  width: auto;
  height: auto;
  opacity: var(--coastal-page-bg-family-opacity, 0.42);
  transform: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 7%, black 88%, transparent 100%);
}

.coastal-page-bg--internal .coastal-page-bg__layer-inner {
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  height: 100%;
  background-size: cover;
}

.coastal-page-bg--internal .coastal-page-bg__layer--red {
  opacity: calc(var(--coastal-page-bg-family-opacity, 0.42) * 0.82);
}

.coastal-page-bg--internal .coastal-page-bg__layer--blue .coastal-page-bg__layer-inner {
  transform: translateX(calc((-3% - var(--i) * 5%) * var(--coastal-page-bg-family-spread, 1) * var(--conv, 1))) translateY(var(--coastal-page-bg-band-y, 0px)) scale(var(--coastal-page-bg-family-scale, 1));
}

.coastal-page-bg--internal .coastal-page-bg__layer--red .coastal-page-bg__layer-inner {
  transform: translateX(calc((3% + var(--i) * 5%) * var(--coastal-page-bg-family-spread, 1) * var(--conv, 1))) translateY(calc(var(--coastal-page-bg-band-y, 0px) * -1)) scale(var(--coastal-page-bg-family-scale, 1));
}

.coastal-page-bg--internal .coastal-page-bg__bokeh,
.coastal-page-bg--internal .coastal-page-bg__vignette { display: none; }

.coastal-page-bg--internal .coastal-page-bg__grain {
  background-size: 540px 540px;
  z-index: 3;
  opacity: 0.07;
}

:root[data-theme="light"] .coastal-page-bg--internal .coastal-page-bg__grain,
.cb-role-force-light .coastal-page-bg--internal .coastal-page-bg__grain { opacity: 0.13; }

:root[data-theme="light"] .coastal-page-bg__layer--blue,
:root[data-theme="light"] .coastal-page-bg__layer--red,
.cb-role-force-light .coastal-page-bg__layer--blue,
.cb-role-force-light .coastal-page-bg__layer--red {
  mix-blend-mode: multiply;
  opacity: var(--coastal-page-bg-layer-opacity-light, 1);
  filter: var(--coastal-page-bg-layer-filter-light, contrast(2.15) saturate(1.28) brightness(0.88) drop-shadow(0 1px 3px rgba(20, 30, 60, 0.12)));
}

:root[data-theme="light"] .coastal-page-bg--internal .coastal-page-bg__layer--blue,
:root[data-theme="light"] .coastal-page-bg--internal .coastal-page-bg__layer--red,
.cb-role-force-light .coastal-page-bg--internal .coastal-page-bg__layer--blue,
.cb-role-force-light .coastal-page-bg--internal .coastal-page-bg__layer--red {
  filter: var(--coastal-page-bg-layer-filter-light, contrast(1.30) saturate(1.05));
}

:root[data-theme="light"] .coastal-page-bg--internal .coastal-page-bg__layer,
.cb-role-force-light .coastal-page-bg--internal .coastal-page-bg__layer {
  opacity: var(--coastal-page-bg-family-opacity, 0.32);
}

:root[data-theme="light"] .coastal-page-bg--internal .coastal-page-bg__layer--red,
.cb-role-force-light .coastal-page-bg--internal .coastal-page-bg__layer--red {
  opacity: calc(var(--coastal-page-bg-family-opacity, 0.32) * 0.82);
}

/* Interior fields are intentionally static and filter-free so scrolling stays
   on the normal document path instead of continuously compositing full-page
   masked layers. Keep the approved split-art geometry, but never animate or
   scroll-converge it. */
.coastal-page-bg--internal .coastal-page-bg__band,
.coastal-page-bg--internal .coastal-page-bg__layer {
  animation: none !important;
  filter: none !important;
  will-change: auto !important;
}

.coastal-page-bg--internal .coastal-page-bg__layer--blue .coastal-page-bg__layer-inner {
  transform: translateX(calc((-3% - var(--i) * 5%) * var(--coastal-page-bg-family-spread, 1))) translateY(var(--coastal-page-bg-band-y, 0px)) scale(var(--coastal-page-bg-family-scale, 1));
}

.coastal-page-bg--internal .coastal-page-bg__layer--red .coastal-page-bg__layer-inner {
  transform: translateX(calc((3% + var(--i) * 5%) * var(--coastal-page-bg-family-spread, 1))) translateY(calc(var(--coastal-page-bg-band-y, 0px) * -1)) scale(var(--coastal-page-bg-family-scale, 1));
}

@media (prefers-reduced-motion: reduce) {
  .coastal-page-bg__layer--blue,
  .coastal-page-bg__layer--red,
  .coastal-page-bg:not(.coastal-page-bg--internal) .coastal-page-bg__layer img,
  .coastal-page-bg:not(.coastal-page-bg--internal) .coastal-page-bg__svg,
  .coastal-page-bg--internal .coastal-page-bg__band {
    animation: none !important;
  }
}

/* ============================================================
   MAINTENANCE PLANS — featured-plan badge matches prototype
   (design/coastal-breeze-design/Coastal Breeze Air - Home.html): a floating
   pill badge overlapping the card's top-right corner ("CONCIERGE"), not
   inline text next to the plan name ("CONCIERGE SERVICE  MOST POPULAR").
   .pricing-table-block__plan already has position:relative, so the badge
   just needs to escape its <h3> parent's flow and anchor to that. ============================================================ */
.pricing-table-block__badge {
  position: absolute !important;
  top: -14px !important;
  right: 24px !important;
  margin-left: 0 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
}

/* Light category structure flows directly over the illustrated editorial
   field. This late, background-aware override intentionally beats the older
   generic `.has-coastal-page-bg` glass rules above; once category roots gained
   the fixed field those rules otherwise repainted every section pale white. */
:root[data-theme="light"] body.cb-role-internal .le.le-template-category.has-coastal-page-bg .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) {
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

:root[data-theme="light"] body.cb-role-internal .le.le-template-category.has-coastal-page-bg .category-strip {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* The scoreboard's cards are the information surfaces; a second fill on the
   enclosing section is an accidental plate. Category roots newly carry the
   shared fixed field in both themes, so reassert the intended transparent
   outer container after the older generic `has-coastal-page-bg` glass rule. */
body.cb-role-internal .le.le-template-category.has-coastal-page-bg .builder-blocks
  > .block-wrapper:not(.block-wrapper--width-full)
  > section.scoreboard-block:not(.hero-block):not(.video-hero-block):not(.parallax-hero) {
  background: transparent !important;
  box-shadow: none !important;
}

/* The prototype's light brand-soft cyan is decorative, not body-link ink: at
   article copy size it measured 3.51:1 on parchment. Keep the hue family but
   use the deep blueprint blue plus an underline for an AA-readable action. */
:root[data-theme="light"] body.cb-role-internal .le-template-article .le-article.rich-text p a {
  color: var(--le-brand-deep, rgb(14, 78, 128)) !important;
  border-bottom-color: color-mix(in srgb, var(--le-brand-deep, rgb(14, 78, 128)) 48%, transparent) !important;
  text-decoration-color: color-mix(in srgb, var(--le-brand-deep, rgb(14, 78, 128)) 58%, transparent) !important;
}

:root[data-theme="light"] body.cb-role-internal .le-template-article .le-article.rich-text p a:hover,
:root[data-theme="light"] body.cb-role-internal .le-template-article .le-article.rich-text p a:focus-visible {
  color: var(--le-ink, rgb(20, 36, 60)) !important;
  border-bottom-color: currentColor !important;
}

/* Home-only credential line: its semi-opaque surface is the legibility
   contract. This final home scope deliberately beats the earlier transparent
   rail and night-on-sand text rules. The warm-paper/day and blueprint/night
   panels keep the words readable over every animation frame without a glow or
   a fake glass blur. */
.home-page .parallax-hero--home .trust-strip,
.home-page .parallax-hero--home .trust-strip :is(.item, .item *, .sep) {
  color: var(--home-trust-ink) !important;
  opacity: 1 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

.home-page .parallax-hero--home .trust-strip svg {
  color: var(--home-trust-ink) !important;
  filter: none !important;
}

/* The legacy Dark/Sand rule has the same broad component scope and !important
   declarations, so keep the panel's direct ink color explicit at the final
   cascade position. */
:root[data-theme="light"] body .home-page .parallax-hero--home .trust-strip :is(.item, .item *, .sep),
:root[data-theme="dark"] body .home-page .parallax-hero--home .trust-strip :is(.item, .item *, .sep) {
  color: var(--home-trust-ink) !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 1.5px var(--home-trust-letter-outline) !important;
  text-shadow: none !important;
}

/* Treat the credentials as one stable, semi-opaque rail. The inset keyline is
   sharp rather than glowing, so it does not compete with the condenser's night light. */
.home-page .parallax-hero--home .trust-strip {
  border: 1px solid var(--home-trust-keyline) !important;
  border-radius: 999px;
  padding: 12px clamp(16px, 2vw, 24px) !important;
  background: var(--home-trust-surface) !important;
  box-shadow: inset 0 0 0 1px var(--home-trust-keyline) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Short-wide home must end at the real dynamic viewport. An earlier home rule
   already sets this, but the shared late height-restoration block above resets
   the hero to a 600px minimum after it. Keep this final, scoped exception next
   to the other final home cascade repairs: the normal title/lede/CTA stack fits
   once the stale minimum is gone, while the narrow landscape strip treatment
   from content-home.css remains in force. */
@media (max-height: 560px) and (orientation: landscape) and (max-width: 1099px) {
  .home-page .block-wrapper--parallax-hero-block,
  .home-page .parallax-hero.le-cover,
  .home-page .parallax-hero__stage {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* ------------------------------------------------------------
   Global Contact Forms: Authoritative Unified Typography Reset
   ------------------------------------------------------------ */

/* 1. All Form Container Elements & Child Controls */
:root :is(
  .contact-cta, .contact-cta *,
  .contact-cta__form, .contact-cta__form *,
  .contact-form-block, .contact-form-block *,
  .le-form, .le-form *,
  .le-contact-form, .le-contact-form *
) {
  -webkit-text-stroke: 0px transparent !important;
  text-shadow: none !important;
  filter: none !important;
  paint-order: fill !important;
}

/* 2. Display / Section Headings (Serif Display Elegance) */
:root :is(
  .contact-cta__heading,
  .contact-form-block__title,
  .le-form-title,
  .contact-cta__form h2
) {
  font-family: var(--font-display-coastal, 'Cormorant Garamond', 'Playfair Display', Georgia, serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.012em !important;
  -webkit-text-stroke: 0px transparent !important;
  filter: none !important;
  text-shadow: none !important;
}

/* 3. Eyebrows & Badges (Uppercase Sans-Serif) */
:root :is(
  .contact-cta__eyebrow,
  .contact-form-block__eyebrow,
  .le-form-eyebrow
) {
  font-family: var(--font-body-coastal, 'Manrope', 'Inter', system-ui, -apple-system, sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

/* 4. Form Labels, Hints, Property Titles, Legends */
:root :is(
  .contact-cta__label,
  .contact-cta__legend,
  .contact-cta__property-types-legend,
  .contact-cta__property-title,
  .contact-cta__field-hint,
  .contact-form-block label,
  .le-form label,
  .le-contact-form label,
  label,
  legend
) {
  font-family: var(--font-body-coastal, 'Manrope', 'Inter', system-ui, -apple-system, sans-serif) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
}

/* 5. Inputs, Selects, Textareas, Options, Suggestions */
:root :is(
  input.contact-cta__input,
  textarea.contact-cta__textarea,
  select.contact-cta__select,
  .contact-cta__input,
  .contact-cta__textarea,
  .contact-cta__select,
  .contact-cta__suggestion,
  .contact-form-block input,
  .contact-form-block select,
  .contact-form-block textarea,
  .le-input,
  .le-select,
  .le-textarea,
  .le-form input,
  .le-form select,
  .le-form textarea,
  .le-contact-form input,
  .le-contact-form select,
  .le-contact-form textarea
) {
  font-family: var(--font-body-coastal, 'Manrope', 'Inter', system-ui, -apple-system, sans-serif) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  letter-spacing: 0em !important;
  line-height: 1.5 !important;
}

/* 6. Checkbox & Radio Labels */
:root :is(
  .contact-cta__checkbox-label,
  .contact-cta__radio-label,
  .contact-cta__maintenance-radio,
  .contact-cta__maintenance-radio *
) {
  font-family: var(--font-body-coastal, 'Manrope', 'Inter', system-ui, -apple-system, sans-serif) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
}

/* 7. Action Buttons (Submit, Add Property, Remove, GPS) */
:root :is(
  button.contact-cta__submit,
  .contact-cta__submit,
  .contact-cta__add-btn,
  .contact-cta__remove,
  .contact-form-block button,
  .le-form button,
  .le-contact-form button,
  .btn-contact
) {
  font-family: var(--font-body-coastal, 'Manrope', 'Inter', system-ui, -apple-system, sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

/* 8. Disclaimers, Notes, Hints */
:root :is(
  .contact-cta__disclaimer,
  .contact-cta__concierge,
  .contact-cta__sub,
  .contact-form-block__subtitle,
  .contact-cta__badge,
  .contact-cta__call-pill
) {
  font-family: var(--font-body-coastal, 'Manrope', 'Inter', system-ui, -apple-system, sans-serif) !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}