/* ============================================================
   Internal Pages
   Coastal-luxury aesthetic matching the home page.
   Cormorant Garamond display + Manrope body, brand cyan, warm
   cream paper (light) / deep navy (dark), watercolor ribbon
   accents, paper grain. Single look, both themes.
   ============================================================ */

.le {
  /* ---- DARK (default) tokens ---- */
  --le-bg: var(--cb-page-bg, #02060F);
  --le-bg-soft: #050A1A;
  --le-bg-deep: #010308;
  --le-surface: rgba(8, 18, 36, 0.42);
  --le-surface-soft: rgba(8, 18, 36, 0.22);
  --le-surface-deep: rgba(6, 14, 30, 0.72);

  --le-hairline: rgba(190, 220, 250, 0.12);
  --le-hairline-mid: rgba(190, 220, 250, 0.20);
  --le-hairline-strong: rgba(190, 220, 250, 0.32);

  --le-ink: rgb(236, 246, 255);
  --le-ink-soft: rgb(216, 228, 244);
  --le-ink-mute: rgb(186, 206, 232);
  --le-ink-faint: rgb(150, 174, 210);

  --le-brand: rgb(140, 220, 255);
  --le-brand-soft: rgb(190, 230, 255);
  --le-brand-deep: rgb(60, 160, 230);
  --le-coral: rgb(255, 180, 160);
  --le-coral-deep: rgb(220, 130, 110);
  --le-gold: rgb(255, 200, 120);

  --le-grad-cyan: linear-gradient(95deg, rgb(180, 220, 255) 0%, rgb(120, 160, 230) 100%);
  --le-grad-cta: linear-gradient(110deg, rgb(120, 200, 255) 0%, rgb(80, 140, 220) 100%);
  --le-grad-warm: linear-gradient(110deg, rgb(255, 200, 175) 0%, rgb(255, 160, 130) 100%);

  --le-shadow-text: 0 2px 6px rgba(0, 8, 24, 0.85), 0 8px 36px rgba(0, 10, 30, 0.75);
  --le-shadow-soft: 0 1px 3px rgba(0, 8, 24, 0.70);

  --le-ribbon-blend: screen;
  --le-ribbon-opacity: 0.78;
  --le-grain-blend: screen;
  --le-grain-opacity: 0.07;
  --le-vignette-strength: 0.40;

  width: min(1280px, 100%);
  margin-inline: auto;
  background: var(--le-bg);
  color: var(--le-ink);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.le[data-theme="light"] {
  /* ---- LIGHT (warm parchment) tokens ---- */
  --le-bg: var(--cb-page-bg, #F4EFE2);
  --le-bg-soft: #EBE5D2;
  --le-bg-deep: #DFD8C2;
  --le-surface: rgba(255, 252, 244, 0.65);
  --le-surface-soft: rgba(255, 252, 244, 0.42);
  --le-surface-deep: rgba(245, 240, 226, 0.85);

  --le-hairline: rgba(40, 30, 20, 0.10);
  --le-hairline-mid: rgba(40, 30, 20, 0.18);
  --le-hairline-strong: rgba(40, 30, 20, 0.28);

  --le-ink: rgb(20, 36, 60);
  --le-ink-soft: rgb(50, 64, 88);
  --le-ink-mute: rgb(82, 98, 124);
  --le-ink-faint: rgb(124, 138, 160);

  --le-brand: rgb(26, 111, 168);
  --le-brand-soft: rgb(42, 138, 200);
  --le-brand-deep: rgb(14, 78, 128);
  --le-coral: rgb(194, 104, 73);
  --le-coral-deep: rgb(160, 76, 50);
  --le-gold: rgb(184, 138, 50);

  --le-grad-cyan: linear-gradient(95deg, rgb(14, 78, 128) 0%, rgb(42, 138, 200) 100%);
  --le-grad-cta: linear-gradient(110deg, rgb(42, 138, 200) 0%, rgb(14, 78, 128) 100%);
  --le-grad-warm: linear-gradient(110deg, rgb(194, 104, 73) 0%, rgb(160, 76, 50) 100%);

  --le-shadow-text: 0 1px 2px rgba(40, 30, 20, 0.05), 0 4px 14px rgba(40, 30, 20, 0.08);
  --le-shadow-soft: 0 1px 2px rgba(40, 30, 20, 0.06);

  --le-ribbon-blend: multiply;
  --le-ribbon-opacity: 0.60;
  --le-grain-blend: multiply;
  --le-grain-opacity: 0.13;
  --le-vignette-strength: 0.0;
}

.le.le-template-category.has-coastal-page-bg,
.le.le-template-article.has-coastal-page-bg,
.le.le-shell.has-coastal-page-bg {
  background: transparent;
}

/* Interior pages that DON'T open with an editorial cover get a small top offset
   so content clears the nav. Category roots use a full-fold parallax hero; article
   pages use a compact editorial cover that starts at top:0 and clears the fixed
   nav with internal padding. */
body.cb-role-internal .site-content:not(:has(.le-cover)) {
  padding-top: clamp(10px, 2.5vh, 30px) !important;
}
body.cb-role-internal .site-content:has(.le-cover) {
  padding-top: 0 !important;
}
/* During streamed parsing the `.le-shell` arrives before its `.le-cover`;
   keep shell pages at top:0 so the later cover does not flip padding and cause CLS. */
body.cb-role-internal .site-content:has(.le-shell) {
  padding-top: 0 !important;
}
/* Article cover (plain .le-cover — no .parallax-hero) is a compact editorial
   header, not a 100vh splash. Category roots own the full-fold contract below. */
body.cb-role-internal .le.le-template-article .le-cover {
  height: auto !important;
  min-height: 0 !important;
  align-items: start !important;
  /* Horizontal = --le-abf-pad-x so the article foreground centers within --le-abf-max
     (1280) globally, matching the category cover + the prototype. */
  padding: calc(var(--nav-h, 104px) + 28px) var(--le-abf-pad-x) 56px !important;
}

/* Category hero (le-cover on category templates) — enforced 100dvh for fold alignment. */
.le.le-template-category .le-cover {
  display: grid !important;
  min-height: 100dvh !important;
  align-items: center !important;
  padding: calc(var(--nav-h, 104px) + 28px) var(--le-abf-pad-x) 56px !important;
}

/* Category hero — the BACKGROUND must fill from the very top (under the
   translucent menu) down to the first menu, while the CONTENT sits in the band
   between the top menu and the first menu. The full-height box (633 rule,
   height:100dvh, top:0) lets the background layers (inset:0) bleed under the
   menu; grid row 1 = var(--nav-h) reserves the menu space so the content (row 2)
   stays in the visible band. So we DON'T margin-top the box (that pushed the
   background off the top, leaving a dark seam under the menu) — the grid already
   accounts for the menu for the content. */

body.cb-role-internal .le.le-template-category,
body.cb-role-internal .le.le-template-article {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin-inline: auto;
  overflow: visible;
  --le-abf-max: 1280px;   /* ABF FOREGROUND width = the article-services prototype's .le
                             container (1280px → ~1088 content after gutters). Was 1600,
                             which let the cover text+diagram sprawl ~1400px wide. The
                             background scene stays full-bleed; only the foreground is capped. */
  --le-section-max: 1180px;
  --le-copy-max: 960px;
  --le-min-page-gutter: 18px;
  --le-abf-gutter: clamp(18px, 6.666vw, 96px);
  --le-abf-pad-x: max(var(--le-abf-gutter), calc((100vw - var(--le-abf-max)) / 2 + var(--le-min-page-gutter)));
  --le-section-pad-x: clamp(18px, 5vw, 96px);
  --le-editorial-max: var(--le-section-max);
  --le-fold-pad-x: var(--le-abf-pad-x);
}

.le.le-template-category.has-coastal-page-bg .le-shell__inner,
.le.le-template-article.has-coastal-page-bg .le-shell__inner,
.le.le-shell.has-coastal-page-bg .le-shell__inner {
  position: relative;
  z-index: 1;
}

/* Home text contrast carryover for internal role/category templates.
   Softened version of the home outline stack so type stays readable
   without the harsher edge on light paper sections. */
.le.le-template-category,
.le.le-template-article {
  --le-home-outline-soft:
    0 2px 10px rgba(0, 10, 30, 0.42),
    0 12px 34px rgba(0, 10, 30, 0.24);
  /* Body copy shadow strengthened (TAG-20260620-ARTICLE-PARA) toward the heading's
     legibility over the busy interior background — a crisp near-edge + a soft depth
     halo. Kept a hair lighter than headings so dense paragraphs stay readable. */
  --le-home-outline-soft-body:
    0 1px 2px rgba(0, 8, 24, 0.62),
    0 2px 9px rgba(0, 10, 30, 0.42);
}

.le.le-template-category[data-theme="light"],
.le.le-template-article[data-theme="light"] {
  /* Match the HOME content/post-area light text treatment (a subtle navy depth-
     drop, not the old `none`) so interior section headings read with the same
     deliberate lift the home has — no harsh white halo. Mirrors the de-washed
     home hero values (content-templates.css ~1129/1135). */
  --le-home-outline-soft: 0 2px 12px rgba(10, 30, 60, 0.16);
  --le-home-outline-soft-body: 0 1px 4px rgba(10, 30, 60, 0.12);
}

.le.le-template-category h1,
.le.le-template-article h1,
.le.le-template-category .le-divider-h2,
.le.le-template-article .le-divider-h2,
.le.le-template-category .le-section-h2,
.le.le-template-article .le-section-h2,
.le.le-template-category .le-schedule-head h2,
.le.le-template-article .le-schedule-head h2,
.le.le-template-category .le-seocopy h2,
.le.le-template-article .le-seocopy h2,
.le.le-template-category .le-mag-body h3,
.le.le-template-article .le-mag-body h3,
.le.le-template-category .le-cover-index .label,
.le.le-template-article .le-cover-index .label,
.le.le-template-category .le-mag-tag,
.le.le-template-article .le-mag-tag {
  text-shadow: var(--le-home-outline-soft);
}

.le.le-template-category :is(
  .le-cover .lede,
  .le-mag-body > p,
  .le-seocopy p,
  .le-article p,
  .le-article li,
  .faq-block__question,
  .faq-block__answer,
  .category-strip__link,
  .le-place-strip .label,
  .le-nav-links a,
  .le-combo-half,
  .le-pill
),
.le.le-template-article :is(
  .le-cover .lede,
  .le-mag-body > p,
  .le-seocopy p,
  .le-article p,
  .le-article li,
  .faq-block__question,
  .faq-block__answer,
  .category-strip__link,
  .le-place-strip .label,
  .le-nav-links a,
  .le-combo-half,
  .le-pill
) {
  text-shadow: var(--le-home-outline-soft-body);
}

/* NOTE (TAG-20260620-HALO-PARITY): the former "below-fold editorial text must be
   FLAT like the prototype" rule was REMOVED per direction — interior category +
   article text now wears the home page's 5-layer text-shadow halo for legibility
   parity over the atmospheric background. See the HOME TEXT HALO block near the
   end of this file. The cover h1 / .le-cover .lede keep their own refined
   prototype-parity treatment (higher-specificity rules above). */

/* Congruence polish: article body section headings are plain serif h2s in
   .le-article.rich-text — flat next to the interior eyebrow/divider system. Give each a
   restrained short brand hairline above it so they carry the same editorial accent. No
   layout change (just a 38px rule + a little top padding). Article-scoped so the
   category service entries are untouched; theme-aware (--le-brand-deep = navy on cream
   / cyan on night). */
.le-template-article .le-article.rich-text > h2 {
  position: relative;
  padding-top: 0.55em;
}
.le-template-article .le-article.rich-text > h2::before {
  content: "";
  display: block;
  width: 38px;
  height: 2px;
  margin-bottom: 0.5em;
  border-radius: 2px;
  background: var(--le-brand-deep, rgb(14, 78, 128));
  opacity: 0.72;
}

/* ── Feather ALL interior decorative/diagram graphic edges ───────────────────
   Below the fold on category/article the diagram frame + per-section motifs had hard
   rectangular edges (the .le-diagram-frame 1px border; the .le-*-motif / .le-mag-mark
   SVGs reaching their box edges) that did not dissolve into the page. Drop the hard
   frame border and feather every edge to full transparency (dual-linear intersect, 12%
   per axis — corners = product of both fades). Interior-scoped, both themes. */
:is(.le-template-category, .le-template-article) :is(
  .le-diagram-frame, .le-mag-mark, .le-section-motif, .le-deco-motif, .le-heading-motif
) {
  border-color: transparent !important;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

/* ── Interior LIGHT: flip the dark FAQ + review cards to the cream surface ───
   The faq-block + testimonials-block ship a single dark coastal surface
   (rgba(14,28,58,0.65)) that assumes the dark theme. On interior LIGHT pages it never
   flips, so the category/article bottom (FAQ accordion + "Service review pulse" cards)
   reads as dark navy slabs clashing with the cream page — the "unstyled toward the
   bottom" issue. Flip the SURFACE to the warm light card + hairline (matching the
   scoreboard re-skin) and force ink text so it reads. Light only; dark keeps its navy. */
:root[data-theme="light"] :is(.le-template-category, .le-template-article) :is(
  .faq-block__item, .faq-block, .testimonial-card, .testimonials-block__grid-item, .cs-card
) {
  background: var(--le-surface-soft, rgba(255, 252, 244, 0.55)) !important;
  border: 1px solid var(--le-hairline-mid, rgba(40, 30, 20, 0.16)) !important;
  box-shadow: none !important;
}
:root[data-theme="light"] :is(.le-template-category, .le-template-article) :is(
  .faq-block__question, .faq-block__answer, .testimonial-card, .testimonial-card__quote,
  .testimonial-card p, .cs-card, .cs-card p
) {
  color: var(--le-ink-soft, rgb(50, 64, 88)) !important;
}
/* The scoreboard block (stats-block.htm → .scoreboard-block/.scoreboard-card)
   uses the GENERIC theme tokens (--generic-surface / --generic-shadow-card),
   which on the cream interior pages render as washed grey-blue boxes with a
   heavy drop shadow ("hideous coloring"). Re-skin to the prototype's clean
   editorial containers using the THEME-AWARE --le-* tokens (warm cream in light,
   navy-translucent in dark) + a warm hairline + no heavy shadow. The
   icon/number/description content (an integrated improvement) is preserved. */
:is(.le-template-category, .le-template-article) .scoreboard-block,
:is(.le-template-category, .le-template-article) .scoreboard-block--light,
:is(.le-template-category, .le-template-article) .scoreboard-block--primary {
  background: transparent !important;
  border-color: var(--le-hairline, rgba(40, 30, 20, 0.10)) !important;
  box-shadow: none !important;
}
:is(.le-template-category, .le-template-article) .scoreboard-block--primary::before {
  display: none !important; /* kill the cool-blue radial blur wash */
}
:is(.le-template-category, .le-template-article) .scoreboard-card {
  background: var(--le-surface-soft, rgba(255, 252, 244, 0.42)) !important;
  border: 1px solid var(--le-hairline-mid, rgba(40, 30, 20, 0.18)) !important;
  box-shadow: none !important;
  padding: 1.4rem 1.25rem !important; /* tighten from the shared scale (was loose) */
}
:is(.le-template-category, .le-template-article) .scoreboard-card:hover {
  border-color: var(--le-brand-soft, rgba(42, 138, 200, 0.9)) !important;
  background: var(--le-surface-deep, rgba(245, 240, 226, 0.85)) !important;
}
:root[data-theme="light"] .le-template-category .scoreboard-card,
:root[data-theme="light"] .le-template-category .scoreboard-card:hover {
  background: transparent !important;
  box-shadow: none !important;
}
/* WHITESPACE FIX (the "Why ... " band): blocks.css gives .scoreboard-block
   `padding: 5rem 0` (80px) which STACKS on the 48px interior block-wrapper padding =
   ~128px of air each side, plus a 48px title→grid gap — so the section header read as
   marooned a screen above its 3 cards. Bind the title to its cards: cut the block
   padding and the title margin. Interior-scoped (home "Why" band untouched). */
:is(.le-template-category, .le-template-article) .scoreboard-block {
  padding-top: 2rem !important;
  padding-bottom: 2.25rem !important;
}
:is(.le-template-category, .le-template-article) .scoreboard-block__title {
  margin-bottom: 1.6rem !important;
}
/* Dark interior stat strip (.le-spec): make the trust VALUES (license, reviews,
   response, coverage) confident — bright cream, full opacity — so credentials pop
   instead of receding into the navy. The faint labels stay the muted tier (hierarchy).
   Premium HVAC reads its credentials at a glance; budget sites bury them. */
:root[data-theme="dark"] :is(.le-template-category, .le-template-article) .le-spec-v {
  color: rgb(245, 249, 255) !important;
  opacity: 1 !important;
}
/* The credentials/detailed block wrapped ~120px of content in ~152px of internal
   padding (blocks.css .detailed-block = 4.75rem = a home hero-scale value). On the
   interior editorial column that double-counts against the block-wrapper rhythm and
   reads as a dead band. Halve it; interior-scoped so home/other roles keep 4.75rem. */
:is(.le-template-category, .le-template-article) .detailed-block {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

/* Category archives use the illustrated parchment as their one light-mode
   surface. Generic builder defaults otherwise repaint each major block as a
   white card, hiding the page field and breaking the editorial continuity. */
:root[data-theme="light"] body.cb-role-internal .le-template-category .builder-blocks
  > .block-wrapper:not(.block-wrapper--width-full)
  > :is(.detailed-block, .scoreboard-block, .section-list, .faq-block, .paragraph-block) {
  background: transparent !important;
  box-shadow: none !important;
}

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

/* ── GENERAL READABILITY: interior LIGHT block text ─────────────────────────
   blocks.css (~2882-2914) paints the DARK coastal-page-bg block treatment on a big
   list of block types — `--block-heading/body/muted-color` + `color: rgb(232,244,255)`
   (near-white) `!important` — and does NOT flip it for light theme. So on the cream
   light interior pages, block text (spec K/V, strip labels, stars, body copy) renders
   near-white = INVISIBLE. Flip the block text tokens + inherited color to the navy
   ink for interior LIGHT pages. Specificity (body.cb-role-internal + :root[light] +
   role + .builder-blocks + :is(block)) beats the blocks.css rule; the --le-* tokens
   are theme-aware so DARK is untouched. Element-specific accents (cyan scoreboard
   numbers, links, em-gradient) keep their own color rules. */
:root[data-theme="light"] body.cb-role-internal :is(.le-template-category, .le-template-article) .builder-blocks :is(
  .stats-block, .scoreboard-block, .scoreboard-block--primary, .scoreboard-block--light, .scoreboard-block--dark,
  .testimonials-block, .case-studies-block, .detailed-block, .detailed-block--light, .detailed-block--category,
  .le-spec-block, .features-grid-block, .featurette-block, .paragraph-block, .headline-block,
  .category-block, .pricing-table-block, .faq-block, .section-list-block, .research-block
) {
  --block-heading-color: var(--le-ink, #14243c) !important;
  --block-body-color: var(--le-ink-soft, #324058) !important;
  --block-muted-color: var(--le-ink-faint, #7c8aa0) !important;
  color: var(--le-ink-soft, #324058) !important;
}
/* Spec strip K/V + strip labels: explicit ink so they read in light. */
:root[data-theme="light"] :is(.le-template-category, .le-template-article) :is(.le-spec-v, .le-spec-k, .category-strip__label, .home-post-strip__label) {
  color: var(--le-ink, #14243c) !important;
}
:root[data-theme="light"] :is(.le-template-category, .le-template-article) :is(.le-spec-k, .category-strip__label) {
  color: var(--le-ink-mute, #52627c) !important;
}
/* Rating stars: warm gold accent in light (were near-white = invisible). */
:root[data-theme="light"] :is(.le-template-category, .le-template-article) .stars {
  color: var(--le-gold, #b88a32) !important;
}
/* Case-studies cross-strip (.cs-strip, on articles) used var(--cb-heading,#e8f4fd) /
   var(--cb-muted, rgba(232,244,253,.6)) — those tokens are undefined for interior
   light, so the near-white fallback rendered = invisible on cream. Ink it. */
:root[data-theme="light"] :is(.le-template-category, .le-template-article) :is(.cs-strip__title, .cs-strip__heading, .cs-strip__label) {
  color: var(--le-ink, #14243c) !important;
}
:root[data-theme="light"] :is(.le-template-category, .le-template-article) .cs-strip__excerpt {
  color: var(--le-ink-soft, #324058) !important;
}
/* Interior SERVICE-AREA cross-strip was near-opaque WHITE (rgba(255,255,255,0.92)) in
   light — a stark bar breaking the warm-cream cohesion. Soften to a translucent warm
   surface so it blends like the prototype's faded strip (navy links stay readable).
   Scoped interior light; dark (deep-night) + the HOME marquee strips are untouched. */
/* ════════════════════════════════════════════════════════════════════════════
   PREMIUM INTERIOR DIRECTORY STRIP — the cross-link band (/areas → services,
   /services → areas). Was a flat middot text list ("ugly"). Elevate to a contained
   editorial directory: faded top/bottom hairline rules over a faint surface, a brand-
   tinted EYEBROW label with a hairline tail, letter-spaced links with a coral hover.
   Theme-aware (tokens), responsive (wraps). Scoped to interior role pages so the HOME
   ABF strips are untouched.
   ════════════════════════════════════════════════════════════════════════════ */
/* Eyebrow label — letter-spaced caps, brand-tinted, with a short hairline tail. */
:is(.le-template-category, .le-template-article) .category-strip__label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-family: var(--font-utility, 'Manrope', sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: var(--le-brand-deep, rgb(14, 78, 128)) !important;
  opacity: 1 !important;
}
:is(.le-template-category, .le-template-article) .category-strip__label::after {
  content: '' !important;
  width: 30px !important;
  height: 1px !important;
  background: currentColor !important;
  opacity: 0.45 !important;
  flex: none !important;
}
/* Links — letter-spaced, refined weight, coral on hover. */
:is(.le-template-category, .le-template-article) .category-strip__link {
  font-family: var(--font-utility, 'Manrope', sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  color: var(--le-ink-soft, rgb(50, 64, 88)) !important;
  transition: color .2s ease !important;
}
:is(.le-template-category, .le-template-article) .category-strip__link:hover {
  color: var(--le-coral, rgb(194, 104, 73)) !important;
}
/* Separators — faint hairline middots, not loud. */
:is(.le-template-category, .le-template-article) .category-strip__item::before,
:is(.le-template-category, .le-template-article) .le-place-strip .places .bullet {
  color: var(--le-ink-faint, rgb(124, 138, 160)) !important;
  opacity: 0.5 !important;
}
/* The interior directory WRAPS (never horizontally scrolls), so the JS-added "…"
   scroll-more indicator (.is-clipped::after) is spurious here — hide it. Home strips
   (which do scroll/marquee) keep theirs. */
:is(.le-template-category, .le-template-article) .category-strip.is-clipped::after {
  content: none !important;
  display: none !important;
}
/* Mobile (≤767px): marquee-mode link adjustments for interior strips. */
@media (max-width: 767px) {
  :is(.le-template-category, .le-template-article) .category-strip {
    padding-block: 16px !important;
  }
  /* Long service names must fit 390px: allow internal wrap + a touch smaller.
     Touch target: min 44px height via vertical padding. */
  :is(.le-template-category, .le-template-article) .category-strip__link {
    white-space: normal !important;
    text-align: center !important;
    font-size: 11px !important;
    letter-spacing: 0.02em !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding-block: 8px !important;
    line-height: 1.35 !important;
    padding-inline: 10px !important;
  }
  /* Drop the middot separators in the wrapped (stacked) mobile layout — they'd dangle. */
  :is(.le-template-category, .le-template-article) .category-strip__item::before,
  :is(.le-template-category, .le-template-article) .le-place-strip .places .bullet {
    display: none !important;
  }
}
/* Testimonial author/role meta is #4b5563 (blocks.css !important) — a dark grey that
   reads at only ~2.2:1 on the dark interior bg (hard to read). Theme-aware ink-faint
   for interior pages: light navy-grey on cream, light-blue on night. Scoped interior
   (home testimonials untouched). */
:is(.le-template-category, .le-template-article) .testimonial-card__meta {
  color: var(--le-ink-faint, #7c8aa0) !important;
}

/* ── Schedule CTA button (item 4) ────────────────────────────────────────────
   Unified interior SEND/Schedule button palette (Brass Gradient) is handled
   below in the luxury elevation section. Removed technical blue/navy overrides.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Psychrometric ambient background field (item 2) ─────────────────────────
   Category-page background scene (hvac.psychScene()). The grid/curves use the
   theme-aware .le-hvac-scene currentColor (cyan on night / navy on cream); the
   outdoor (hot) + indoor (cold) annotation points carry the brand coral / cyan-soft
   accents so the cool→dehumidify process reads. Mirrors the foreground chart's
   .le-psych-hot/.le-psych-cold colors but scoped to the background scene. */
.le-hvac-scene--psych .le-psych-hot  { color: var(--le-coral, #c26849); fill: var(--le-coral, #c26849); }
.le-hvac-scene--psych .le-psych-cold { color: var(--le-brand-soft, #2a8ac8); fill: var(--le-brand-soft, #2a8ac8); }

/* Foul Fix: Strip axis labels, tooltips, and markers from the ambient background chart.
   Category backgrounds should be architectural textures, not data visualizations. */
.le-hvac-scene--psych circle,
.le-hvac-scene--psych text {
    display: none !important;
}

/* ── Editorial Motifs Cleanup ─────────────────────────────────────────────── */
/* Foul Fix: Hide the 'vent' (grey bars) motif on interior editorial templates.
   It reads as an unloaded skeleton/placeholder on services and article pages. */
:is(.le-template-category, .le-template-article) .le-section-motif--reviews {
    display: none !important;
}

/* Foul Fix: Center single case-study cards on interior pages.
   Switch auto-fill (which leaves empty cells) to auto-fit + justify-content: center. */
.cs-strip__list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    justify-content: center !important;
}
/* Verified directly against design/internal-pages-split/category-areas-dark.html
   (the actual prototype for this scene): the psychrometric grid is NOT a crisp
   normal-blend overlay — it uses the same subtle blended treatment as every
   other .le-hvac-scene, screen/0.55 in dark and multiply/0.42 in light. A prior
   pass here assumed the prototype wanted the grid crisp and forced normal blend,
   which reads noticeably more prominent/less atmospheric than the reference.
   Let this variant inherit the base .le-hvac-scene rule instead of overriding it. */

/* Internal role pages are long-form editorial surfaces, not promo reveals.
   Keep content visible immediately so sections never appear "blank" while
   waiting for reveal observers/timers. */
.le.le-template-category .reveal-init,
.le.le-template-article .reveal-init {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Role templates use the editorial cover layout, not the global full-bleed
   parallax hero contract used by generic builder pages. */
.le.le-template-category .builder-blocks > .block-wrapper--parallax-hero-block {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: clamp(10px, 2.5vh, 30px) !important;
  padding-right: clamp(10px, 2.5vh, 30px) !important;
}
.le.le-template-category .builder-blocks > .block-wrapper--parallax-hero-block > .le-cover.builder-block.parallax-hero {
  display: grid !important;
  width: 100vw !important;
  max-width: 100vw !important;
  /* FIX (de-crook): was margin-inline: clamp(10px,2.5vh,30px) = +22.5px, which ADDED
     to the parent block-wrapper's 22.5px padding → the 100vw cover started at 45px and
     overflowed the right (whole hero read ~90px right-shifted). The correct full-bleed
     breakout pulls the 100vw cover back to flush [0 → 100vw]; the symmetric --le-fold-pad-x
     padding (below) then centres the foreground. */
  margin-inline: calc(50% - 50vw) !important;
  min-height: clamp(10px, 2.5vh, 30px) !important;
  align-items: start;
  justify-content: initial;
  padding: 48px var(--le-fold-pad-x) 64px !important;
}
/* Lift animation layer out of grid flow so text/diagram columns are unobstructed
   — matches prototype's `position:absolute;inset:0` on .le-hvac-scene.
   height:100% pins the container to the .le-cover fold height (relative parent),
   so it can't be stretched taller by intrinsic child sizing (the iframe used to
   force it to ~633px even though .le-cover is ~515px). Internal pages render the
   inline-SVG fallback directly — no iframe — exactly like the prototype. */
.le.le-template-category .le-cover .parallax-hero__animation-container,
.le.le-template-article .le-entry > .le-cover .parallax-hero__animation-container {
  position: absolute !important;
  inset: 0;
  height: 100% !important;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
/* Stretch the animation iframe to fill the fold container so waves reach 100vw */
.le.le-template-category .le-cover .parallax-hero__animation-frame,
.le.le-template-article .le-entry > .le-cover .parallax-hero__animation-frame {
  width: 100% !important;
  height: 100% !important;
  border: none;
  background: transparent;
}

/* Interior cover is TRANSPARENT (prototype .le-cover has no background): the
   .le wrapper (--le-bg deep-navy dark / cream light) + .le-breeze-field supply
   the themed backdrop. The shared .builder-block.parallax-hero dark bg from
   blocks.css otherwise forces a dark cover even in LIGHT mode. Interior-scoped
   (.le.le-template-*) so the HOME hero keeps its own opaque treatment —
   shared block, alternate styling. */
.le.le-template-category .le-cover.builder-block.parallax-hero,
.le.le-template-article .le-cover.builder-block.parallax-hero {
  background: transparent !important;
}
.le.le-template-category .le-cover.builder-block.parallax-hero::after,
.le.le-template-article .le-cover.builder-block.parallax-hero::after {
  display: none !important; /* kill the blocks.css fade-to-dark overlay on interior */
}

/* Interior LIGHT mode block surfaces. blocks.css (~2828) paints every
   .has-coastal-page-bg section as dark-night glass (rgba(8,18,38,.55)) with
   light text "regardless of page theme" — correct for the HOME deep-night
   atmosphere, wrong for interior role pages in LIGHT mode (dark navy panels on
   cream paper). Re-skin to the editorial light surface + dark ink. Scoped to
   .le[data-theme="light"] so HOME and interior-DARK are untouched (shared
   block, alternate styling). */
.le[data-theme="light"].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: var(--le-surface) !important;
  border-color: var(--le-hairline) !important;
  --block-heading-color: var(--le-ink);
  --block-body-color: var(--le-ink-soft);
  --block-muted-color: var(--le-ink-mute);
  --block-accent-color: var(--le-brand-deep);
  --block-surface-color: var(--le-surface);
  color: var(--le-ink-soft) !important;
}
.le[data-theme="light"].has-coastal-page-bg .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--le-ink) !important;
}
.le[data-theme="light"].has-coastal-page-bg .builder-blocks > .block-wrapper:not(.block-wrapper--width-full) > section:not(.hero-block):not(.video-hero-block):not(.parallax-hero) :is(p, li, blockquote) {
  color: var(--le-ink-soft) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   INTERIOR RESPONSIVE RETROFIT (the prototype is desktop-only — 1280 artboards,
   no mobile rules — so this is an ad-hoc retrofit preserving the editorial look).
   Interior-scoped (body.cb-role-internal / .le-template-*) so HOME is untouched.
   ────────────────────────────────────────────────────────────────────────── */
/* Below the desktop breakpoint the prototype's two-column editorial hero
   (headline | right-side diagram) and its horizontal section nav both break:
   the section links spread across the top and the diagram stacks over the
   headline. Collapse to a clean single-column text fold at <=1100 (matching
   where the home nav collapses), and remove the overlapping editorial diagram —
   it's desktop-only decoration and is illegible at these widths. */
@media (max-width: 900px) {
  /* Interior hero STACKS (single column, diagram decoupled) only below 901px —
     above that the 2-col side-by-side layout takes over (see min-width:901px).
     [Legacy .le-nav rules below are dead since the global nav replaced it, but
     harmless.] Interior section nav: long horizontal section links move into a
     burger dropdown. The top bar stays a SINGLE non-wrapping row. */
  body.cb-role-internal .le-nav, .le .le-nav {
    flex-wrap: nowrap !important;
    gap: 8px 12px !important;
    padding: 10px clamp(14px, 4vw, 28px) !important;
    align-items: center !important;
    min-height: 0 !important;
  }
  /* Section links collapse into the burger dropdown (hidden until toggled). */
  body.cb-role-internal .le-nav-links, .le .le-nav-links {
    position: absolute !important;
    top: 100% !important; right: clamp(14px, 4vw, 28px) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 220px !important;
    max-width: min(86vw, 320px) !important;
    padding: 8px !important;
    margin: 6px 0 0 !important;
    background: color-mix(in srgb, var(--le-bg, #02060f) 96%, transparent) !important;
    border: 1px solid var(--le-hairline, rgba(190,230,255,0.16)) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 64px -16px rgba(0,8,24,0.7) !important;
    backdrop-filter: var(--glass-blur-lg) saturate(var(--glass-saturate)) !important;
    -webkit-backdrop-filter: var(--glass-blur-lg) saturate(var(--glass-saturate)) !important;
    will-change: transform;
    z-index: 60 !important;
    display: none !important;
  }
  body.cb-role-internal .le-nav.is-open .le-nav-links,
  .le .le-nav.is-open .le-nav-links { display: flex !important; }
  /* Secondary in-page nav: column stack (label then items), never a burger dropdown. */
  body.cb-role-internal .le-nav--secondary,
  .le .le-nav--secondary {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.cb-role-internal .le-nav--secondary .le-nav-links,
  .le .le-nav--secondary .le-nav-links {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    z-index: auto !important;
    flex: unset !important;
    gap: 4px 20px !important;
  }
  /* The single-row scroll-strip collapse for this nav lives in the <=1099 block
     below (after the desktop wrap rule), so it wins by source order. */
  body.cb-role-internal .le-nav-actions, .le .le-nav-actions {
    margin-left: auto !important; gap: 8px !important;
    flex-wrap: nowrap !important; justify-content: flex-end !important;
    align-items: center !important;
  }
  /* Burger toggle visible only at these widths (added in le-header.htm). */
  body.cb-role-internal .le-nav__burger, .le .le-nav__burger { display: inline-flex !important; }
  /* Small view: single COLUMN (flex). Hero text sits in the upper/middle of the
     fold; the editorial diagram "breaks" to the BOTTOM of the fold, centered and
     more visible (a distinct complementary element, not a faint backdrop), above
     the SCROLL indicator. margin-top:auto pushes the diagram to the bottom. */
  /* Neutralize the desktop 100vw "breakout" (width:100vw + margin-inline /
     negative margins) which mis-centers and overflows at small widths — use a
     simple full-width box so the content centers in the viewport. */
  .le.le-template-category .builder-blocks > .block-wrapper--parallax-hero-block,
  .le.le-template-article .builder-blocks > .block-wrapper--parallax-hero-block {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .le.le-template-category .builder-blocks > .block-wrapper--parallax-hero-block > .le-cover.builder-block.parallax-hero,
  .le.le-template-article .le-cover.builder-block.parallax-hero {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* text + diagram centered vertically as a group */
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-top: calc(var(--nav-h, 68px) + 16px) !important;
    padding-bottom: clamp(52px, 8vh, 92px) !important; /* clear the SCROLL indicator */
    padding-left: clamp(16px, 5vw, 32px) !important;
    padding-right: clamp(16px, 5vw, 32px) !important;
    gap: clamp(20px, 4vh, 40px) !important;
  }
  .le.le-template-category .le-cover .parallax-hero__content,
  .le.le-template-article .le-cover .parallax-hero__content {
    width: 100% !important;
    align-self: center !important;
    align-items: center !important;   /* center the column contents */
    text-align: center !important;
    position: relative !important;
    z-index: 10 !important;
    padding-bottom: 0 !important;
  }
  /* Center the eyebrow/crumbs, headline, lede, index + diagram as a centered column. */
  .le.le-template-category .le-cover .parallax-hero__content > *,
  .le.le-template-article .le-cover .parallax-hero__content > * {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Diagram → bottom of the fold, centered, increased opacity. */
  /* Diagram decoupled (absolute) and dropped LOW toward the SCROLL indicator, so
     the text can center vertically on its own while the diagram favors the lower
     fold. Faint so the centered text reads cleanly over it. */
  .le.le-template-category .le-cover .le-diagram,
  .le.le-template-article .le-cover .le-diagram {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: clamp(40px, 7vh, 84px) !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    width: min(78vw, 420px) !important;
    max-width: none !important;
    opacity: 0.42 !important;
    z-index: 0 !important;
    animation: none !important;
    pointer-events: none !important;
  }
}

@media (max-width: 900px) {
  /* Cover: keep the flex column from the <=1100 block; clear the nav up top and
     the SCROLL indicator at the bottom (this padding rule would otherwise
     override the <=1100 nav-clearing padding and overlap the nav). */
  .le.le-template-category .builder-blocks > .block-wrapper--parallax-hero-block > .le-cover.builder-block.parallax-hero {
    gap: 22px !important;
    padding: calc(var(--nav-h, 68px) + 16px) clamp(18px, 5vw, 40px) clamp(72px, 12vh, 130px) !important;
  }
  .le .le-cover h1, .le .le-cover-category h1 { font-size: var(--fluid-h1) !important; line-height: 1.02 !important; }
  .le .le-cover .lede { font-size: var(--fluid-lede) !important; }
  .le .le-spec { flex-wrap: wrap !important; gap: 16px 24px !important; padding: 20px var(--fluid-pad-x) !important; }
  .le .le-place-strip { padding: 18px var(--fluid-pad-x) !important; }
}

@media (max-width: 767px) {
  /* Interior nav at phone widths is handled by the <=1100 block (single
     non-wrapping row + burger dropdown). Keep only the phone-size type tweak. */
  .le .le-pill, .le .le-combo { font-size: 12px !important; }
  /* Tighten the logo + action gaps so the single row fits the narrowest phones. */
  .le .le-logo, .le .le-logo img { height: 40px !important; }
  body.cb-role-internal .le-nav-actions, .le .le-nav-actions { gap: 6px !important; }
  body.cb-role-internal .le-combo, .le .le-combo { gap: 2px !important; }

  /* Section content padding tighten across interior blocks using fluid foundation. */
  .le .le-section, .le .le-why, .le .section-list, .le .le-reviews,
  .le .testimonials-block, .le .faq-block, .le .le-seocopy, .le .le-schedule,
  body.cb-role-internal .builder-blocks > .block-wrapper > section {
    padding-left: var(--fluid-pad-x) !important;
    padding-right: var(--fluid-pad-x) !important;
    padding-top: var(--fluid-pad-y) !important;
    padding-bottom: var(--fluid-pad-y) !important;
  }

  /* Magazine cards / index rows stack to a single column on phones. */
  .le .le-mag-grid, .le .le-mag-grid-large { grid-template-columns: 1fr !important; }
  .le .le-mag-card { grid-template-columns: 1fr !important; gap: 12px !important; }
  .le .le-mag-mark { display: none !important; }   /* drop the decorative side motif on phones */

  /* The interior place/area strip ("Serving 30A · Seaside · …") is a single
     nowrap row that overruns the viewport on phones. Make it a contained,
     touch-scrollable rail instead of pushing page width. */
  .le .le-place-strip, .le .category-strip, body.cb-role-internal .category-strip {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  .le .le-place-strip .places, .le .category-strip__items {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .le .le-place-strip .places::-webkit-scrollbar,
  .le .category-strip__items::-webkit-scrollbar { display: none; }

  /* Belt-and-braces: clip residual horizontal overflow at the interior shell
     (overflow-x:clip keeps vertical scroll intact) and the body. */
  body.cb-role-internal { overflow-x: hidden !important; }
  body.cb-role-internal .le-shell,
  body.cb-role-internal .le.le-template-category,
  body.cb-role-internal .le.le-template-article { overflow-x: clip !important; }
}

/* Cover index (i–vi volume list) must shrink to fit narrow screens rather than
   clip its labels at the right edge. minmax(0,1fr) lets columns compress; drop
   to 2 columns on phones. */
.le .le-cover-index {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 600px) {
  .le .le-cover-index {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 18px !important;
  }
}

/* ── Interior nav burger (reveals the section links on small screens) ──────── */
.le-nav__burger {
  display: none;               /* shown <=1100 via the interior responsive block */
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--le-hairline, rgba(190, 230, 255, 0.30));
  border-radius: 10px;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.le-nav__burger-bar {
  display: block; width: 18px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.le-nav__burger-bar + .le-nav__burger-bar { margin-top: 4px; }
.le-nav.is-open .le-nav__burger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.le-nav.is-open .le-nav__burger-bar:nth-child(2) { opacity: 0; }
.le-nav.is-open .le-nav__burger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Smallest screens: Text + Schedule consolidate to icon-only (hide labels) so
   the top bar stays a single row. */
@media (max-width: 560px) {
  .le-nav-actions .le-combo-half[href^="sms"] span,
  .le-nav-actions .le-pill.primary .cb-nav__cta-label { display: none !important; }
  .le-nav-actions .le-pill.primary {
    padding-left: 10px !important; padding-right: 10px !important;
  }
}
/* Very small: also drop the phone number to its icon. */
@media (max-width: 430px) {
  .le-nav-actions .le-combo-half .num { display: none !important; }
  .le-nav-actions { gap: 4px !important; }
}

@media (max-width: 320px) {
  .le-nav-actions { gap: 2px !important; }
  .le-combo { gap: 1px !important; }
}

/* Narrow phones: shrink the interior hero headline so it doesn't clip at the
   right edge (the desktop --hero-text-driver is too large here). */
@media (max-width: 480px) {
  .le.le-template-category .le-cover .le-cover-h1,
  .le.le-template-article .le-cover .le-cover-h1,
  .le .le-cover h1 {
    font-size: clamp(26px, 8.2vw, 38px) !important;
    line-height: 1.06 !important;
  }
}

/* Short viewports (e.g. landscape phones): a forced 100vh fold can't hold the
   editorial hero content, so the headline collides with the nav. Let the interior
   cover grow to content height (scrollable), top-align below the nav, and drop
   the diagram (no room). Interior-scoped — home is untouched. */
@media (max-height: 560px) {
  .le.le-template-category .builder-blocks > .block-wrapper--parallax-hero-block > .le-cover.builder-block.parallax-hero,
  .le.le-template-article .le-cover.builder-block.parallax-hero,
  body.cb-role-internal .le.le-template-article .le-cover {
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    align-content: start !important;
    align-items: start !important;
    padding-top: calc(var(--nav-h, 68px) + 14px) !important;
    padding-bottom: 36px !important;
  }
  .le.le-template-category .le-cover .parallax-hero__content,
  .le.le-template-article .le-cover .parallax-hero__content {
    align-self: stretch !important;
    justify-content: flex-start !important;
  }
  .le.le-template-category .le-cover .le-diagram,
  .le.le-template-article .le-cover .le-diagram { display: none !important; }
  .le .le-cover-scroll-indicator { display: none !important; }
  /* Category link grid / area grid in hero eats 117px+ — hide so title+lede fit in ~264px */
  .le.le-template-category .le-cover .le-cover-meta,
  .le.le-template-article .le-cover .le-cover-meta { display: none !important; }
  body.cb-role-internal .le.le-template-article .le-cover .le-crumbs { display: none !important; }
}

/* Only phone-landscape covers need to drop the action. Tablet and split-screen
   layouts keep the labelled schedule pill while the cover grows to fit it. */
@media (max-height: 560px) and (max-width: 767px) {
  body.cb-role-internal .le.le-template-article .le-cover .le-cover-cta { display: none !important; }
}