/* === Red Barn Media Group — Lake Area Heating & Air === */
/* Foundation only. Section CSS is added by the build, one section at a time,
   and only for deltas that Bootstrap 5.3 + the utilities below cannot express.
   Budget for a finished homepage: 700–1500 lines. */

/* ============================================================
   1. Self-hosted webfonts
   ============================================================
   Every family is served same-origin — no third-party font requests.
   (Labels used FF Basic Gothic from an Adobe kit until 2026-09-28; they now
   use Open Sans. Don't re-add the kit — its licence forbids self-hosting.)

   Cerany has NO weight above 400. The Figma token names ("Semibold", "Bold")
   are misleading — the encoded weight is 400 in every style, and "Bold" is
   actually the Italic. Only 400 is declared, so a stray font-weight:700 falls
   back rather than synthesising a faux-bold.

   Cerany's Q is PATCHED. The foundry files ship Q as a byte-for-byte copy of O,
   so a tail was drawn onto Q (O + swash, unioned) and both woff2s rebuilt.
   Re-exporting from the original OTFs brings the bug back. ?v=2 busts caches
   and must match the preload in doc-header.php.

   Open Sans is a VARIABLE font (wght 300-800): one 43KB file covers 400/600/700.
   ------------------------------------------------------------ */

@font-face {
  font-family: 'Cerany';
  src: url('/fonts/cerany-regular.woff2?v=2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cerany';
  src: url('/fonts/cerany-italic.woff2?v=2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/open-sans-latin-var.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* Pidgeotto carries the section OVERLINE (Paragraph/Overline/Large, 20/20).
   Single weight 400, no italic — same faux-bold caveat as Cerany. */
@font-face {
  font-family: 'Pidgeotto';
  src: url('/fonts/pidgeotto-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2. Design tokens — literal values from the Figma variables
   ============================================================ */
:root {
  /* Brand. Hover tints are base + 20% white, per the hover-token rule —
     never a shade, never a pointer to another palette colour. */
  --color-ocean: #1a2b5d;
  --color-ocean-hover: #48557d;
  --color-sunflower: #ffbe26;
  --color-sunflower-hover: #ffcb51;
  --color-lilac: #d1dff7;
  --color-lilac-hover: #dae5f9;
  /* Hover shades nearest the Figma hover comps that still clear WCAG AA.
     ice-deep: comp Ice under white text is 3.16:1 -> 4.53:1 (button hover).
     ice-soft: comp Ice under Ocean text is 4.30:1 -> 4.52:1 (pill hover).
     lilac-wash: Lilac at 60% on white, sampled from the service-card comp. */
  --color-ice-deep: #5775b7;
  --color-ice-soft: #7596cc;
  --color-lilac-wash: #e3ecfa;
  /* Brand/Lake and Brand/Ice are NAMED tokens, not merely gradient stops (an
     earlier read had that wrong). They also happen to be the logo's two blues,
     and Ice is used for the Opener image's hard offset shadow. */
  --color-lake: #3c57a4;
  --color-ice: #7092ca;
  /* The Summer gradient's lightest stop, used on its own as a border colour on
     the Opener image and the Maintenance cards. Distinct from --color-sunflower
     (#ffbe26), which borders the hero form — do not merge them. */
  --color-sunbeam: #fbe184;
  /* Offset-shadow blue on the About image. Distinct from --color-ice (#7092ca),
     which the Opener image uses — the comp genuinely specifies two different
     shadow blues, so do not merge them. */
  --color-lake-mid: #4561ab;

  /* Neutrals */
  --color-neutral-50: #eef0f5;
  --color-neutral-100: #e4e9f0;
  --color-neutral-500: #a9abb4;

  /* Dark Mode ramp — used for card text on WHITE cards, not for dark bands.
     16dp #353535 on white = 10.6:1; 00dp #121212 = 17.4:1. Both pass easily. */
  --color-ink: #121212;        /* Dark Mode/00dp */
  --color-ink-mid: #222222;    /* Dark Mode/02dp */
  --color-ink-soft: #353535;   /* Dark Mode/16dp */

  /* Generic */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Typography.
     Cerany       — Display 64/72, H3 32/40. Self-hosted, weight 400 only.
     Open Sans    — body copy AND every Label style 12/14/16 at weight 700.
                    Self-hosted variable. */
  --font-display: 'Cerany', Georgia, 'Times New Roman', serif;
  --font-overline: 'Pidgeotto', 'Cerany', Georgia, serif;
  --font-label: 'Open Sans', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* Type scale — literal Figma values. The token NAMES say Semibold/Bold but the
     encoded weight is 400 in every Cerany and Pidgeotto style; map the weight,
     never the name. */
  --fs-display: 4rem;        /* 64/72  Cerany   Display/Large   */
  --lh-display: 4.5rem;
  --fs-h2: 2.5rem;           /* 40/48  Cerany   Heading/H2      */
  --lh-h2: 3rem;
  --fs-h3: 2rem;             /* 32/40  Cerany   Heading/H3      */
  --lh-h3: 2.5rem;
  --fs-h4: 1.5rem;           /* 24/32  Cerany   Heading/H4      */
  --lh-h4: 2rem;
  --fs-h5: 1.25rem;          /* 20/28  Cerany   Heading/H5      */
  --lh-h5: 1.75rem;
  --fs-overline: 1.25rem;    /* 20/20  Pidgeotto Overline/Large */
  --lh-overline: 1.25rem;
  --fs-body-lg: 1.125rem;    /* 18/26  Open Sans Paragraph/Large   */
  --lh-body-lg: 1.625rem;
  --fs-body: 1rem;           /* 16/24  Open Sans Paragraph/Medium */
  --lh-body: 1.5rem;
  --fs-body-sm: 0.875rem;    /* 14/22  Open Sans Paragraph/Small  */
  --lh-body-sm: 1.375rem;
  --fs-label-lg: 1rem;       /* 16/18  Basic Gothic Label/Large   */
  --lh-label-lg: 1.125rem;
  --fs-label: 0.875rem;      /* 14/16  Basic Gothic Label/Medium  */
  --lh-label: 1rem;
  --fs-label-sm: 0.75rem;    /* 12/14  Basic Gothic Label/Small   */
  --lh-label-sm: 0.875rem;

  /* Gradients — literal stops from the design */
  --gradient-summer: linear-gradient(90deg, #fbe184 3.846%, #f0ba3c 40.385%, #f6951f 92.788%);
  --gradient-evening: linear-gradient(90.18deg, #1a2b5d 12.437%, #3c57a4 50.171%, #7092ca 94.116%);
  --gradient-diagonal: linear-gradient(123.85deg, #1a2b5d 14.351%, #3c57a4 55.736%, #7092ca 103.93%);
  /* Same stops as --gradient-diagonal at a steeper angle; the comp really does
     use both, so they are separate tokens rather than one approximated value. */
  --gradient-callout: linear-gradient(144.72deg, #1a2b5d 14.351%, #3c57a4 55.736%, #7092ca 103.93%);

  /* Effects */
  --shadow-light: 0 0 8px rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 0 8px rgba(0, 0, 0, 0.2);
  --overlay-hero: rgba(53, 78, 149, 0.83);
  --overlay-band: rgba(25, 48, 119, 0.83);

  /* Layout.
     --menu-height and --announcement-bar-height are consumed by inline
     min-height styles in menu.php; they are not decorative. Deleting them
     silently collapses the nav and the announcement bar. */
  --menu-height: 5.75rem;
  --menu-height-shrink: 4rem;
  --announcement-bar-height: 2.5rem;
  --transition-standard: 0.25s;
  --border-radius-standard: 1rem;
  --border-radius-hero: 2.5rem;
}

/* ============================================================
   3. Contrast safety net — colour by parent surface
   ============================================================
   Measured against this palette:
     sunflower on white  1.66:1   FAIL      on ocean  8.17:1   pass
     lilac     on white  1.35:1   FAIL      on ocean 10.09:1   pass
     neutral-500 on white 2.29:1  FAIL      on ocean  5.93:1   pass (large/UI only)
     ocean     on white 13.57:1   pass
     white     on ocean 13.57:1   pass

   Sunflower and Lilac are DARK-SURFACE-ONLY. Never set either as text or as an
   icon colour on a white or light band — it will fail WCAG AA and it will not
   be obvious on a retina display. Links and accent icons inherit the two
   context variables below, so they adapt to the band they sit on instead of
   being hand-picked per section.

   Surfaces PUBLISH --lah-link / --lah-icon; components CONSUME them, so the
   NEAREST surface always wins — an ocean icon inside a white card sitting on a
   dark band correctly stays ocean. :where() keeps these at specificity (0,0,0)
   so any explicit colour on the element still beats them.
   ------------------------------------------------------------ */

/* Light surfaces. Every one of these measures ocean far higher than white
   (sunflower 8.17 vs 1.66, lilac 10.09 vs 1.35, neutral-50 11.90 vs 1.14),
   so bright brand colours are LIGHT surfaces here, not dark ones. */
:where(:root, body, .surface-light, .bg-white, .bg-neutral-50, .bg-lilac,
        .lah-plan-item, .lah-service-card, .lah-advantage, .lah-advantage-v3) {
  --lah-link: var(--color-ocean);
  --lah-link-hover: var(--color-ocean-hover);
  --lah-icon: var(--color-ocean);
}

/* Sunflower is a special case. The standard ocean hover tint (#48557d) measures
   4.40:1 on it — under the 4.5 floor — so a link would pass at rest and fail on
   hover. On sunflower the colour holds at full-strength ocean (8.17:1) and the
   underline carries the hover affordance instead. */
:where(.bg-sunflower) {
  --lah-link: var(--color-ocean);
  --lah-link-hover: var(--color-ocean);
  --lah-icon: var(--color-ocean);
}

/* Dark surfaces */
/* Ice band: ocean at full strength is only 4.30:1 here, so links get a darkened
   ocean (#15224a = 4.89:1). Large headings may still use plain ocean. */
:where(.bg-ice, .lah-brands) {
  --lah-link: #15224a;
  --lah-link-hover: #121e41;
  --lah-icon: #15224a;
}

:where(.surface-dark, .bg-ocean) {
  --lah-link: var(--color-white);
  --lah-link-hover: var(--color-sunflower);
  --lah-icon: var(--color-sunflower);
}

/* :not(.btn) — buttons carry their own colour and must not inherit link colour. */
a:where(:not(.btn)) {
  color: var(--lah-link, var(--color-ocean));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:where(:not(.btn)):where(:hover, :focus-visible) {
  color: var(--lah-link-hover, var(--color-ocean-hover));
  text-decoration-line: underline;
}
/* An underline beneath a logo or a social glyph is meaningless -- the graphic
   is the affordance, and there is no text for the rule to sit under. Bootstrap's
   reboot underlines every <a> and the rule above only sets thickness/offset, so
   icon-only links inherited it: both logos, both Google/Facebook pairs and the
   RBMG credit were all underlined. Text links keep their underline. */
a:where(:not(.btn)):has(> i:only-child),
a:where(:not(.btn)):has(> img:only-child),
a:where(:not(.btn)):has(> svg:only-child) {
  text-decoration: none;
}
/* The underline was doubling as these links' focus indicator, so it is replaced
   rather than simply removed -- gold reads on both the white header and the
   dark bands. */
a:where(:not(.btn)):has(> i:only-child):focus-visible,
a:where(:not(.btn)):has(> img:only-child):focus-visible,
a:where(:not(.btn)):has(> svg:only-child):focus-visible {
  outline: 3px solid var(--color-sunflower);
  outline-offset: 3px;
}

/* Accent icons consume the same context. */
.lah-icon,
.icon-accent {
  color: var(--lah-icon, var(--color-ocean));
}

/* ============================================================
   4. Base
   ============================================================ */
body {
  color: var(--color-ocean);
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  background-color: var(--color-white);
  position: relative;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  color: var(--color-ocean);
}

/* Overline and label are DIFFERENT faces — do not merge them.
   Overline = Pidgeotto 20/20, capitalize, sunflower on dark bands.
   Label    = Open Sans Bold, uppercase, used on buttons and card captions. */
.overline {
  font-family: var(--font-overline);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-overline);
  line-height: var(--lh-overline);
  text-transform: capitalize;
}

.label {
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
}

/* FA icons filled with the Summer gradient (used on every Advantage card icon). */
.icon-gradient {
  background: var(--gradient-summer);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   5. Palette utilities
   ============================================================ */
.bg-ocean {
  background-color: var(--color-ocean);
}
.bg-sunflower {
  background-color: var(--color-sunflower);
}
.bg-lilac {
  background-color: var(--color-lilac);
}
.bg-neutral-50 {
  background-color: var(--color-neutral-50);
}

.text-ocean {
  color: var(--color-ocean);
}
/* Sunflower/lilac text utilities are intentionally scoped to dark surfaces —
   see section 3. Using them on a light band is a contrast failure. */
.surface-dark .text-sunflower,
.bg-ocean .text-sunflower {
  color: var(--color-sunflower);
}
.surface-dark .text-lilac,
.bg-ocean .text-lilac {
  color: var(--color-lilac);
}

.border-lilac {
  border-color: var(--color-lilac);
}

.shadow-light {
  box-shadow: var(--shadow-light);
}

/* ============================================================
   6. Tap-target floor — WCAG-safe hit area
   ============================================================
   Bootstrap's .btn is ~38px and .btn-sm ~31px; neither clears the 40x40
   minimum on its own. Apply .tap-target to icon-only controls, nav toggles,
   social icons, carousel arrows and close buttons. Prefer .btn-lg for text
   buttons. Never redefine .btn itself.
   ------------------------------------------------------------ */
.tap-target {
  min-height: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   7. Brand buttons
   ============================================================
   These set Bootstrap 5.3's OWN --bs-btn-* variables rather than overriding its
   declarations. That is the framework's intended extension point: no !important,
   no specificity fight, and hover/active/disabled keep working for free.

   .btn-252469 is REQUIRED and is not optional styling: the platform's form
   renderer emits <button class="... btn-primary btn-252469"> server-side from
   $_SESSION['dealer_id']. The class appears in no markup in this repo, so it
   cannot be found by grep. If the dealer id ever changes, this rule changes
   with it or the contact form's submit button loses its styling.
   ------------------------------------------------------------ */
.btn-ocean,
.btn-252469 {
  --bs-btn-color: var(--color-white);
  --bs-btn-bg: var(--color-ocean);
  --bs-btn-border-color: var(--color-ocean);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-bg: var(--color-ocean-hover);
  --bs-btn-hover-border-color: var(--color-ocean-hover);
  --bs-btn-active-color: var(--color-white);
  --bs-btn-active-bg: var(--color-ocean-hover);
  --bs-btn-active-border-color: var(--color-ocean-hover);
}

/* Label is ocean, NOT white: white on sunflower is 1.66:1 and fails outright. */
.btn-sunflower {
  --bs-btn-color: var(--color-ocean);
  --bs-btn-bg: var(--color-sunflower);
  --bs-btn-border-color: var(--color-sunflower);
  --bs-btn-hover-color: var(--color-ocean);
  --bs-btn-hover-bg: var(--color-sunflower-hover);
  --bs-btn-hover-border-color: var(--color-sunflower-hover);
  --bs-btn-active-color: var(--color-ocean);
  --bs-btn-active-bg: var(--color-sunflower-hover);
  --bs-btn-active-border-color: var(--color-sunflower-hover);
}

.btn-lilac {
  --bs-btn-color: var(--color-ocean);
  --bs-btn-bg: var(--color-lilac);
  --bs-btn-border-color: var(--color-lilac);
  /* Figma hover: blue pill, white label (ice-deep keeps it at 4.53:1). */
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-bg: var(--color-ice-deep);
  --bs-btn-hover-border-color: var(--color-ice-deep);
  --bs-btn-active-color: var(--color-white);
  --bs-btn-active-bg: var(--color-ice-deep);
  --bs-btn-active-border-color: var(--color-ice-deep);
}

/* Gradient fills need background-IMAGE; --bs-btn-bg only takes a colour, so the
   bg var goes transparent and the gradient rides on top. */
.btn-gradient {
  --bs-btn-color: var(--color-ocean);
  --bs-btn-bg: var(--color-sunflower);
  --bs-btn-border-color: var(--color-sunflower);
  --bs-btn-hover-color: var(--color-ocean);
  /* Figma hover: the gradient resolves to solid Sunflower (Ocean label 8.17:1).
     Set through Bootstrap's variables so .btn:first-child:active cannot win. */
  --bs-btn-hover-bg: var(--color-sunflower);
  --bs-btn-hover-border-color: var(--color-sunflower);
  --bs-btn-active-color: var(--color-ocean);
  --bs-btn-active-bg: var(--color-sunflower);
  --bs-btn-active-border-color: var(--color-sunflower);
  position: relative;
  isolation: isolate;
}
/* Flicker fix. The base fill used to be transparent under a gradient image; on
   hover the image vanished instantly while Bootstrap tweened background-color
   from transparent -> Sunflower over .15s, so the band showed through the button
   for a few frames. Now the button is ALWAYS solid Sunflower underneath and the
   gradient is a layer that fades out — there is no frame without a fill. */
.btn-gradient::before {
  content: "";
  position: absolute;
  inset: calc(var(--bs-btn-border-width, 1px) * -1);
  z-index: -1;
  border-radius: inherit;
  background-image: var(--gradient-summer);
  transition: opacity .2s ease;
}
.btn-gradient:is(:hover, :focus-visible, :active)::before { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .btn-gradient::before { transition: none; } }

/* ============================================================
   8. Sub-page conventions
   ============================================================
   Super Steve service pages carry far more copy per section than the home page
   was drawn for (2,500-3,800 words). Everything here is a MODIFIER on a home-page
   primitive so generated content stays readable — not a new component.
   ------------------------------------------------------------ */

/* Hero lede. A sub-page hero carries an 80-110 word paragraph. .lah-hero-sub is
   the home page's short Cerany italic slogan: a paragraph in it rendered as 440px
   of uppercase display type. The lede is body copy instead. */
.lah-hero-lede {
  max-width: 860px;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--color-white);
}
.lah-hero-headers .lah-overline { margin-bottom: 0; }

/* Content card. .lah-advantage-v3 is sized for a one-line fact (12px body). These
   cards hold a full paragraph or a bullet list, so body and list step up to 14/22
   and multi-line bullets align to their first line. */
.lah-card-lg { height: 100%; padding: 24px; gap: 12px; }
.lah-card-lg .lah-advantage-v3-title { margin: 0; }
.lah-card-lg .lah-advantage-v3-body,
.lah-card-lg .lah-checklist li {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}
.lah-card-lg .lah-checklist { gap: 8px; }
.lah-card-lg .lah-checklist li { align-items: flex-start; }
.lah-card-lg .lah-checklist i { margin-top: 3px; }

/* Content-card hover (.lah-card-lg + the home About block's Advantage-v3 cards) — the
   same frame the FAQ, process and closer cards wear at rest
   (Sunbeam border + Lake hard offset shadow), scaled for a small card, plus a lift.
   The border is an INSET shadow, not a real border, so hovering never changes the
   card's box and nothing shifts. Icon disc flips Sunflower/Ocean (8.17:1 either way)
   and gains a soft Ocean drop shadow. Hover only where a pointer can hover — on touch
   a tap would otherwise leave the card stuck "lifted". Scoped two classes deep: this
   section sits above the base .lah-advantage-v3 rules (see the Closer note below). */
.lah-advantage-v3:is(.lah-card-lg, .lah-about-advantages > *) {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.lah-advantage-v3:is(.lah-card-lg, .lah-about-advantages > *) .lah-advantage-v3-icon {
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
@media (hover: hover) {
  .lah-advantage-v3:is(.lah-card-lg, .lah-about-advantages > *):hover {
    background-color: var(--color-white);
    box-shadow: inset 0 0 0 4px var(--color-sunbeam), 10px 10px 0 0 var(--color-lake);
    transform: translate(-4px, -4px);
  }
  .lah-advantage-v3:is(.lah-card-lg, .lah-about-advantages > *):hover .lah-advantage-v3-icon {
    background-color: var(--color-ocean);
    color: var(--color-sunflower);
    box-shadow: 0 6px 14px rgba(26, 43, 93, .35);
    transform: scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lah-advantage-v3:is(.lah-card-lg, .lah-about-advantages > *),
  .lah-advantage-v3:is(.lah-card-lg, .lah-about-advantages > *) .lah-advantage-v3-icon { transition: none; }
  .lah-advantage-v3:is(.lah-card-lg, .lah-about-advantages > *):hover,
  .lah-advantage-v3:is(.lah-card-lg, .lah-about-advantages > *):hover .lah-advantage-v3-icon { transform: none; }
}
/* Process — vertical tabs at lg+, stacked collapse cards below lg.
   ONE copy of the content: each .tab-pane holds a mobile toggle (.d-lg-none) and a
   .collapse body. At lg+ the toggles hide and every body is forced open; below lg
   every pane is forced visible and the tab list hides. Stock Bootstrap JS only. */
.lah-process-nav { display: flex; flex-direction: column; gap: 12px; }
.lah-process-tab,
.lah-process-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-radius: 20px;
  background-color: var(--color-white);
  color: var(--color-ocean);
  text-align: left;
  transition: background-color .2s ease, color .2s ease;
}
.lah-process-tab .label,
.lah-process-toggle .label { font-size: var(--fs-label-lg); line-height: var(--lh-label-lg); }
.lah-process-tab:hover { background-color: var(--color-lilac); }
.lah-process-tab.active { background-color: var(--color-ocean); color: var(--color-white); }
/* Ocean ring: sunflower on the Ice band is ~2.6:1, under the 3:1 UI floor. */
.lah-process-tab:focus-visible { outline: 3px solid var(--color-ocean); outline-offset: 3px; }
.lah-process-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-sunflower);
  color: var(--color-ocean);
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label-lg);
  line-height: 1;
}

/* The step card — same frame as the FAQ and closer: Sunbeam border, Lake offset. */
.lah-process-card {
  padding: 40px;
  background-color: var(--color-white);
  border: 5px solid var(--color-sunbeam);
  border-radius: 36px;
  box-shadow: 18px 18px 0 0 var(--color-lake);
}
.lah-process-card-head { align-items: center; gap: 20px; margin-bottom: 20px; }
.lah-process-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-image: var(--gradient-evening);
  color: var(--color-lilac);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  /* Cerany's numerals sit high in the em box (ink 0.5px from the line top, 7.7px
     from the bottom), so a centred line box left the digit ~3.6px above centre.
     Top padding shifts the centred content down by half its value. */
  padding-top: .22em;
}
.lah-process-kicker { margin-bottom: 4px; color: var(--color-lake); }
.lah-process-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  text-transform: uppercase;
  color: var(--color-ocean);
}
.lah-process-card .lah-body { color: var(--color-ink); }
.lah-process-card .lah-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
}
.lah-process-card .lah-checklist li {
  align-items: flex-start;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}
.lah-process-card .lah-checklist i { margin-top: 3px; }

@media (min-width: 992px) {
  /* Stack every pane in one grid cell so the card is as tall as the LONGEST step —
     switching tabs never makes the page jump. Inactive panes are visibility:hidden,
     which also removes them from the accessibility tree. */
  .lah-process-content { display: grid; }
  .lah-process-content > .tab-pane { display: block; grid-area: 1 / 1; visibility: hidden; }
  .lah-process-content > .tab-pane.active { visibility: visible; }
  .lah-process-collapse.collapse:not(.show) { display: block; }
  /* The card sits inside the collapse wrapper, so BOTH need the full cell height. */
  .lah-process-collapse,
  .lah-process-card { height: 100%; }
}
@media (max-width: 991.98px) {
  .lah-process-content > .tab-pane { display: block; opacity: 1; }
  .lah-process-pane {
    margin-bottom: 12px;
    overflow: hidden;
    background-color: var(--color-white);
    border-radius: 24px;
  }
  .lah-process-toggle-head { margin: 0; }
  .lah-process-toggle { border-radius: 0; padding: 12px 16px; }
  .lah-process-toggle .label { flex: 1 1 auto; }
  /* Inset ring: the pane clips overflow, so an outset outline would be cut off. */
  .lah-process-toggle:focus-visible { outline: 3px solid var(--color-ocean); outline-offset: -3px; }
  .lah-process-chevron { transition: transform .2s ease; }
  .lah-process-toggle:not(.collapsed) .lah-process-chevron { transform: rotate(180deg); }
  .lah-process-card { padding: 4px 20px 22px; border: 0; border-radius: 0; box-shadow: none; }
  .lah-process-card .lah-checklist { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lah-process-tab, .lah-process-toggle, .lah-process-chevron { transition: none; }
}

/* Closer, sub-page layout. CTA-FINAL carries 2-4 long paragraphs; in the home
   closer's single 713px column they read as a wall with the CTAs buried at the
   bottom. Lead + CTAs sit beside the photo, the middle paragraphs split into two
   columns, and the closing paragraph moves into a CTA card with the actions.
   Card is SOLID Ocean, not Gradient/Evening: white body text on Evening's light
   end (#7092ca) is 3.16:1 and fails AA; on Ocean it is 13.57:1. */
/* ⚠ Section 8 sits ABOVE the base .lah-body rule, so a single-class selector here
   loses to it on source order (same 0,1,0 specificity). Every override of .lah-body
   below is scoped two classes deep — the first pass rendered the card text Ocean on
   Ocean (invisible) and the lead at 16px for exactly this reason. */
.lah-closer .lah-closer-lead { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.lah-closer-cols { margin-top: 48px; }
.lah-closer-cols .lah-closer-body { max-width: none; margin-bottom: 0; }
.lah-closer-cta {
  margin-top: 64px;
  padding: 40px 48px;
  background-color: var(--color-ocean);
  border: 5px solid var(--color-sunbeam);
  border-radius: 36px;
  box-shadow: 18px 18px 0 0 var(--color-lake);
}
.lah-closer-cta .lah-closer-cta-text {
  margin-bottom: 0;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--color-white);
}
/* The card text is the block's LAST paragraph, verbatim — anywhere from a 6-word
   question ("Ready to stay comfortable in Palatka?") to 130 words. Short text at
   body size left the card looking empty, so it steps up to display type by length
   (the class is chosen per page by word count: <=12 -lg, 13-30 -md, longer stays body). */
.lah-closer-cta .lah-closer-cta-text-md,
.lah-closer-cta .lah-closer-cta-text-lg {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}
@media (min-width: 992px) {
  .lah-closer-cta .lah-closer-cta-text-lg { font-size: var(--fs-h3); line-height: var(--lh-h3); }
}
.lah-closer-cta-actions { display: flex; flex-direction: column; gap: 12px; }
/* .lah-pill is nowrap on purpose (phone numbers must not break). A CTA label in the
   300px mobile card is wider than that — "Get your installation consultation"
   clipped at 305/300px, cutting off the icon and last letter. Let TEXT labels wrap
   here; the tel: button keeps nowrap. Same for any .lah-ctas row: sub-page CTA
   labels come from content ("Get your central AC system checked today" is 404px
   against a 350px phone column). A label only wraps once it is wider than its row.
   The hero row too: "Explore Our Equipment & Installation Services" measured 440px
   in a 390px viewport and the hero card clipped it (no page scroll to give it away).
   Advantage cards too: "Learn about heat pump installation" scrolled /heat-pumps/ at 375px. */
.lah-advantage-v3 .lah-pill:not([href^="tel:"]),
.lah-closer-cta-actions .lah-pill:not([href^="tel:"]),
.lah-ctas .lah-pill:not([href^="tel:"]),
.lah-hero-ctas .lah-pill:not([href^="tel:"]) { white-space: normal; text-align: center; }
.lah-closer-cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 20px;
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  /* Outlined pill: reads as a third button beside the two filled ones. White on the
     Ocean card is 13.6:1; the hover fill flips to Ocean on white (same ratio). */
  border: 2px solid var(--color-white);
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease;
}
.lah-closer-cta-link:focus-visible { outline: 3px solid var(--color-sunflower); outline-offset: 3px; }
@media (hover: hover) {
  .lah-closer-cta-link:hover { background-color: var(--color-white); color: var(--color-ocean); }
}
@media (prefers-reduced-motion: reduce) { .lah-closer-cta-link { transition: none; } }
@media (max-width: 991.98px) {
  .lah-closer-cols { margin-top: 32px; }
  .lah-closer-cta {
    margin-top: 40px;
    padding: 24px 20px;
    border-radius: 28px;
    box-shadow: 8px 8px 0 0 var(--color-lake);
  }
}

/* FORM-SECTION sibling links as cards pinned over the section photo (replaced the
   plain text-link list — Brendan's pick). The disc reuses .lah-advantage-icon, so it
   inherits the pill's Summer -> Ocean hover crossfade from section 26. */
.lah-feature-media { position: relative; }
.lah-feature-links {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}
.lah-feature-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  min-height: 64px;
  padding: 12px 16px;
  background-color: var(--color-white);
  border-radius: 20px;
  box-shadow: var(--shadow-medium);
  color: var(--color-ocean);
  text-decoration: none;
  transition: background-color .25s ease;
}
.lah-feature-link:is(:hover, :focus-visible) { color: var(--color-ocean); text-decoration: none; }
.lah-feature-link:focus-visible { outline: 3px solid var(--color-ocean); outline-offset: 3px; }
.lah-feature-link-text { flex: 1 1 auto; }
.lah-feature-link-arrow { flex-shrink: 0; transition: transform .25s ease; }
/* Below lg the photo is too short to carry two cards: they stack under it and
   overlap its bottom edge instead of covering the image. */
@media (max-width: 991.98px) {
  .lah-feature-links {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: -32px 16px 0;
  }
}

/* Linked service card (OTHER-SERVICES). The title link is a .stretched-link, so
   the whole card body is the target; .lah-service-body is already positioned. */
.lah-card-link .lah-service-title a { color: inherit; text-decoration: none; }
.lah-card-link:hover .lah-service-title a { text-decoration: underline; }
.lah-card-link .lah-service-title a:focus-visible { outline: none; }
.lah-card-link:focus-within { outline: 3px solid var(--color-ocean); outline-offset: 4px; }

/* Mobile: an 80-110 word lede pushed both hero CTAs below the fold (y=890 on an
   844px screen). Same fix as the home hero's mobile block — reorder visually
   with flex `order`, leave the DOM (reading/tab order) alone. */
@media (max-width: 767.98px) {
  .lah-hero-lede { order: 1; font-size: var(--fs-body); line-height: var(--lh-body); }
}
/* === End sub-page conventions === */


/* ============================================================
   9. Header — announcement bar + floating nav card
   ============================================================
   Figma 46046:1511. The nav is NOT a full-width bar: it is a white card of
   fixed max-width floating on the lilac page ground, radius 40. No previous
   build in the shop has this shape, so it is genuinely new CSS rather than a
   missed manifest lookup.
   ------------------------------------------------------------ */
.lah-header {
  background-color: var(--color-lilac);
  /* Sticky nav: the whole header sticks with a NEGATIVE top equal to the
     announcement bar's height, so the bar scrolls away and the nav card stays.
     custom.js keeps --lah-announce-h in sync (the bar wraps to 2 lines on phones);
     40px is the one-line desktop height. */
  position: sticky;
  top: calc(-1 * var(--lah-announce-h, 40px));
  z-index: 1030;
  transition: background-color var(--transition-standard) ease;
}
/* Floating (.lah-header-floating, toggled by custom.js once scrollY >= the header's
   own height): the lilac ground only belongs at the top of the page. Stuck over other
   bands it read as a square slab behind the rounded card, so it goes transparent and
   only the card floats. NOT keyed to .shrink-menu (50px): until the page has scrolled
   past the header's own height, what sits under the stuck header is its own empty
   flow slot — i.e. the WHITE body — so going transparent at 50px flashed white around
   the card (phones ~50-200px, desktop ~50-185px).
   The transparent area around the card must not swallow clicks meant for the page
   beneath — gutters, the strip above, and (desktop) the ~41px below the shrunk card
   inside the locked 145px .lah-nav-outer. pointer-events goes on the HEADER itself
   (on .lah-nav-outer alone, hits still landed on .lah-header). pointer-events
   inherits, so everything interactive opts back in: the card (mega menus live inside
   it), the offcanvas (a sibling of the card), and the backdrop Bootstrap appends to
   the offcanvas's parent — both inside this header. */
.lah-header.lah-header-floating { background-color: transparent; pointer-events: none; }
.lah-header-floating :is(.lah-nav-card, .offcanvas, .offcanvas-backdrop) { pointer-events: auto; }

/* Desktop shrink. The card drops from ~130px to ~88px: smaller logo, tighter sub-nav
   pill, shorter link padding, plus a shadow so it lifts off whatever it floats over.
   .lah-nav-outer keeps its full unshrunk height (15 + 130) so the sticky header's
   footprint in the flow never changes — otherwise the page would jump up ~50px the
   moment the class lands, and could bounce back across the 50px threshold. */
@media (min-width: 1200px) {
  .lah-nav-outer { height: 145px; transition: padding-top var(--transition-standard) ease; }
  .lah-nav-card { transition: box-shadow var(--transition-standard) ease; }
  .lah-nav-logo img { transition: height var(--transition-standard) ease; }
  .lah-nav-bars { transition: min-height var(--transition-standard) ease, gap var(--transition-standard) ease; }
  .lah-subnav { transition: padding var(--transition-standard) ease; }
  .lah-mainnav { transition: margin-top var(--transition-standard) ease; }
  .lah-nav-links .nav-link { transition: padding var(--transition-standard) ease, color var(--transition-standard) ease; }

  .shrink-menu .lah-nav-outer { padding-top: 8px; }
  .shrink-menu .lah-nav-card { box-shadow: var(--shadow-medium); }
  .shrink-menu .lah-nav-logo img { height: 64px; }
  .shrink-menu .lah-nav-bars { min-height: 0; gap: 8px; }
  .shrink-menu .lah-subnav { padding: 4px 4px 4px 16px; }
  .shrink-menu .lah-mainnav { margin-top: 0; }
  .shrink-menu .lah-nav-links .nav-link { padding-block: 7px; }
}

.lah-announcement {
  background: var(--gradient-summer);
  padding: 10px 0 8px;
  text-align: center;
}
.lah-announcement-text {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-ocean);
}
/* Ocean on the Summer gradient's lightest stop (#fbe184) = 10.4:1, and on its
   darkest (#f6951f) = 5.6:1 — passes AA across the whole sweep. */
/* This is the bar's only CTA, so it gets a real 40px hit area rather than taking
   the inline-in-a-sentence exemption. The negative margin absorbs the padding so
   the bar's height is unchanged — hit area grows, layout does not. */
.lah-announcement-link {
  display: inline-block;
  padding: 11px 6px;
  margin: -11px 0;
  color: var(--color-ocean);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}
.lah-announcement-link:is(:hover, :focus) {
  color: var(--color-ocean);
}

.lah-nav-outer {
  padding: 15px 65px 0;
}
.lah-nav-card {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1460px;
  margin: 0 auto;
  padding: 4px 20px;
  background-color: var(--color-white);
  border-radius: 40px;
}
.lah-nav-logo img {
  width: auto;
  height: 90px;
}

.lah-nav-bars {
  flex: 1 1 auto;
  min-width: 0;
  /* Figma's Nav Bars frame is a fixed 122 with its two rows centred, so it
     carries ~18px of slack the content alone does not produce. */
  min-height: 122px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.lah-mainnav {
  margin-top: 0;
  padding: 0;
}

/* Sub-nav pill — ocean, radius 34 */
.lah-subnav {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 8px 8px 8px 20px;
  background-color: var(--color-ocean);
  border-radius: 34px;
}
.lah-subnav-slogan {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
  color: var(--color-lilac);
}
.lah-subnav-slogan i {
  color: var(--color-sunflower);
}
.lah-subnav-ctas {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lah-subnav-social {
  font-size: 20px;
  color: var(--color-sunflower);
}
.lah-subnav-social:is(:hover, :focus) {
  color: var(--color-white);
}

/* Shared pill button geometry. 12px padding + 16px line-height = 40px, so these
   clear the tap-target floor without .tap-target being stacked on top. */
.lah-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
  border: 0;
  /* Figma draws 30 / 60 / 80 across the button variants, but every pill is 40px
     tall so any radius >=20px renders identically — one value, not three. */
  border-radius: 999px;
  /* Labels never wrap: without this a phone number breaks across three lines in
     a squeezed flex row at small widths. */
  white-space: nowrap;
}

/* Main nav row */
.lah-mainnav {
  margin-top: 8px;
}
.lah-nav-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.lah-nav-links .nav-link {
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
  color: var(--color-ocean);
  /* 11px block padding + 18px line-height = 40px tap target */
  padding: 11px 8px;
}
.lah-nav-links .nav-link:is(:hover, :focus) {
  color: var(--color-ocean-hover);
}

/* Desktop dropdowns — every menu uses the Heating & Cooling mega treatment.
   They hang from the BOTTOM EDGE of the nav card, not from their toggle: the card
   is the positioning context (li + .navbar static), so top:100% lands exactly on
   the card's edge at every width, and the top corners are square so the panel
   reads as part of the card. Bootstrap's static-popper rule sets left:0 +
   margin-top: spacer; both are overridden two classes deep. */
.lah-nav-card { position: relative; }
.lah-nav-card .lah-mainnav,
.lah-nav-links .nav-item.dropdown { position: static; }
.lah-mega {
  /* 100% = the nav card (its positioning context); minus both 40px corners so the
     panel hangs from the straight edge — at 1200 the card is only 1153px wide. */
  width: min(1100px, calc(100% - 80px));
  padding: 1.5rem;
  border: 0;
  border-radius: 0 0 var(--border-radius-standard) var(--border-radius-standard);
  box-shadow: var(--shadow-medium);
}
.lah-nav-links .lah-mega[data-bs-popper] {
  top: 100%;
  margin-top: 0;
  /* Heating & Cooling: centred under the card. */
  left: 50%;
  transform: translateX(-50%);
}
/* Single-group menus: sized to their links and left under their own toggle
   (left:auto keeps the static position, i.e. the toggle's left edge). */
.lah-nav-links .lah-mega-list[data-bs-popper] {
  width: auto;
  min-width: 260px;
  left: auto;
  transform: none;
}
/* Last menu (About Us) would run off the right edge — pin it to the card's right
   side, inset by the card's 40px corner radius so it hangs from the straight edge. */
.lah-nav-links .lah-mega-end[data-bs-popper] {
  left: auto;
  right: 40px;
}
.lah-mega-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.lah-mega {
  /* Sub-items sat 1rem in from their group head (Bootstrap's dropdown-item padding).
     Flush them to the head; hover shows as colour + underline, not a background
     block that would now touch the text. */
  --bs-dropdown-item-padding-x: 0;
  --bs-dropdown-link-hover-bg: transparent;
  --bs-dropdown-link-active-bg: transparent;
  --bs-dropdown-link-active-color: var(--color-lake);
}
.lah-mega .dropdown-item:is(:hover, :focus-visible) { color: var(--color-lake); text-decoration: underline; }
.lah-mega-head {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
  color: var(--color-ocean);
}

/* Offcanvas.
   Three levels, mirroring the desktop mega-nav. Depth is carried by a darkening
   translucent wash rather than by another shade of Ocean: layering black over the
   panel keeps every level in the same colour family and, because each step is
   darker, white text gains contrast as it nests instead of losing it. */
.lah-offcanvas {
  background-color: var(--color-ocean);
}
.lah-offcanvas-header {
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.lah-offcanvas-logo {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
}
/* The white lockup, not the full-colour one -- the panel is Ocean. */
.lah-offcanvas-logo img {
  display: block;
  width: auto;
  max-height: 52px;
}
.lah-offcanvas .btn-close {
  /* .btn-close-white supplies the white filter, but Bootstrap also ships
     .btn-close at opacity .5, which was rendering the X mid-grey. */
  opacity: 1;
  flex: 0 0 auto;
}
.lah-offcanvas-body {
  /* Bootstrap's .offcanvas-body ships 1rem of padding; the nav rows run edge to
     edge so their backgrounds reach the panel sides. Reset here rather than with
     the banned p-0 utility. */
  padding: 0;
}

/* Level 1 */
.lah-offcanvas-nav .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--color-white);
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lah-offcanvas-nav .nav-link:is(:hover, :focus-visible),
.lah-offcanvas-nav .nav-link[aria-expanded="true"] {
  color: var(--color-sunflower);
  background-color: rgba(255, 255, 255, 0.07);
}
.lah-oc-chevron {
  flex: 0 0 auto;
  font-size: 0.8em;
  transition: transform 0.2s ease;
}
.lah-offcanvas-nav .nav-link[aria-expanded="true"] .lah-oc-chevron {
  transform: rotate(180deg);
}

/* Level 2 */
.lah-offcanvas-subnav {
  background-color: rgba(0, 0, 0, 0.18);
}
.lah-offcanvas-subnav > .nav-item > .nav-link {
  font-size: 0.875rem;
  padding: 0.75rem 1rem 0.75rem 2rem;
}

/* Level 3 */
.lah-offcanvas-subnav-inner {
  background-color: rgba(0, 0, 0, 0.28);
}
.lah-offcanvas-subnav-inner .nav-link {
  font-size: 0.8125rem;
  padding: 0.75rem 1rem 0.75rem 3rem;
}
/* The last row of a branch would otherwise draw a divider straight onto the
   parent level's background, reading as a stray line. */
.lah-offcanvas-subnav > .nav-item:last-child > .nav-link,
.lah-offcanvas-subnav-inner > .nav-item:last-child > .nav-link {
  border-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lah-offcanvas-nav .nav-link,
  .lah-oc-chevron { transition: none; }
}

.lah-offcanvas-ctas {
  padding: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.navbar-toggler {
  border: 0;
  color: var(--color-ocean);
  font-size: 1.25rem;
}

@media (max-width: 1399.98px) {
  .lah-nav-outer { padding: 15px 1rem 0; }
  /* The slogan text hides below xxl; hide its icon with it so the pill is not
     left showing a lone orphaned wrench. */
  .lah-subnav-slogan { display: none; }
}
/* xl only: the outer gutter drops to 1rem here, leaving the six links
   clientWidth - 319px. At 8px padding + 8px gap they needed 930px, so 1200-1264
   scrolled sideways, and "Maintenance Plans" (the one non-dropdown link) broke
   onto two lines. Tighter spacing + nowrap needs 900px at 16px, which fits from
   ~1234; below 1300 the label drops to 15px (848px). space-between still spreads
   the links wherever there is room; line-height keeps the 40px tap height. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .lah-mainnav { --bs-navbar-nav-link-padding-x: 4px; }
  .lah-nav-links { gap: 0; }
  .lah-nav-links .nav-link { white-space: nowrap; }
}
@media (min-width: 1200px) and (max-width: 1299.98px) {
  .lah-nav-links .nav-link { font-size: 15px; }
}
@media (max-width: 1199.98px) {
  .lah-nav-card { flex-wrap: wrap; gap: 8px; border-radius: 24px; }
  .lah-nav-logo img { height: 64px; }
  .lah-subnav { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .lah-subnav-ctas { flex-wrap: wrap; justify-content: center; }

/* ---- Mobile nav layout ----------------------------------------------------
   Target shape:
       row 1   [hamburger]   [logo]              [G] [F]
       row 2   [ Schedule Service ] [ 352-473-9595 ]

   The pieces live at three different nesting depths (toggler inside .lah-mainnav,
   social and buttons inside .lah-subnav-ctas, logo a direct child), so the
   wrappers collapse with `display: contents` at this breakpoint. That promotes
   every control to a direct flex child of the card and lets one `order` scale
   arrange them, WITHOUT touching the markup or the desktop layout.

   Collapsing .lah-subnav also drops its ocean pill, which is a desktop
   treatment — so the social glyphs now sit on WHITE. Sunflower on white is
   1.66:1, a hard fail, hence the recolour to ocean (13.57:1) below. */
}
@media (max-width: 767.98px) {
  .lah-nav-bars,
  .lah-subnav,
  .lah-subnav-ctas,
  .lah-mainnav { display: contents; }

  .lah-nav-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 12px 16px;
  }
  .navbar-toggler { order: 1; margin: 0; }
  .lah-nav-logo   { order: 2; }
  .lah-nav-logo img { height: 52px; }

  /* Social sits top-right: the first one takes the remaining space on row 1. */
  .lah-subnav-social:nth-of-type(1) { order: 3; margin-left: auto; }
  .lah-subnav-social:nth-of-type(2) { order: 4; }
  .lah-subnav-social {
    font-size: 18px;
    /* On white now, not the ocean pill — sunflower would be 1.66:1. */
    color: var(--color-ocean);
  }
  .lah-subnav-social:is(:hover, :focus) { color: var(--color-lake); }

  /* Both CTAs share row 2. A ~46% basis is too wide to join row 1, so they wrap
     together and then sit side by side. */
  .lah-nav-card .btn-lilac   { order: 5; }
  .lah-nav-card .btn-gradient { order: 6; }
  .lah-nav-card .btn-lilac,
  .lah-nav-card .btn-gradient {
    flex: 1 1 46%;
    min-width: 0;
    padding-inline: 12px;
    /* At 14px the label overran the half-width button and had to be clipped.
       Dropping to 12px makes it fit outright — truncating a CTA to
       "SCHEDULE SER…" is worse than sizing it correctly. */
    font-size: var(--fs-label-sm);
    gap: 6px;
  }
  /* The calendar glyph is decorative (aria-hidden) and is the last 24px needed
     to fit the full label; the phone glyph stays because its label is short. */
  .lah-nav-card .btn-lilac i { display: none; }
  .lah-mainnav {
  margin-top: 0;
  padding: 0;
}
}

/* ============================================================
   10. Hero — Figma 46046:809
   ============================================================
   The lilac band is the page ground; the hero is an inset card floating on it
   with a 40px radius. The photo carries NO baked-in gradient, so the overlay
   below is required (this build is the exception to the baked-in-hero rule).
   ------------------------------------------------------------ */
.lah-hero-band {
  background-color: var(--color-lilac);
  padding: 30px 80px 0;
}
.lah-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--border-radius-hero);
  min-height: 820px;
  display: flex;
  align-items: center;
}
.lah-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Figma frames the photo at 127.81% height offset -24.86%, which centres the
     visible window ~58% down the source image. */
  object-position: center 58%;
  z-index: -2;
}
.lah-hero-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--overlay-hero);
  z-index: -1;
}
.lah-hero-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 39px;
  padding: 3rem 2.5rem;
}

/* Trust row */
.lah-hero-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}
.lah-hero-oem {
  width: 211px;
  height: auto;
}
/* Gree Select Dealer badge sits beside the American Standard wordmark. It is a
   round badge, so it is sized by HEIGHT (not the wordmark's width). */
.lah-hero-oem-gree { width: auto; height: 56px; }
.lah-hero-trust {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.lah-hero-trust-mark {
  font-size: 40px;
  line-height: 1;
  color: var(--color-white);
}
/* The Google mark is the full-colour favicon (an <img>), not a monochrome FA glyph.
   Sizing it in `em` off the rule above means the 30px mobile step applies to it too,
   with no second breakpoint to keep in sync. */
img.lah-hero-trust-mark {
  display: block;
  width: 1em;
  height: 1em;
}
.lah-hero-trust-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lah-hero-stars {
  color: var(--color-sunflower);
  font-size: 15px;
  line-height: 16px;
}
.lah-hero-trust-label {
  color: var(--color-sunflower);
}
.lah-hero-trust-cta {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-white);
}
.lah-hero-trust:is(:hover, :focus) .lah-hero-trust-cta {
  text-decoration: underline;
}

/* Headline */
.lah-hero-headers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.lah-hero-h1 {
  max-width: 916px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  text-transform: uppercase;
  color: var(--color-white);
}
.lah-hero-sub {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  text-transform: uppercase;
  color: var(--color-lilac);
}
.lah-hero-ctas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* Free-estimate card */
.lah-hero-form {
  width: 100%;
  max-width: 1343px;
  padding: 30px 40px;
  border: 5px solid var(--color-sunflower);
  border-radius: 20px;
  background-image: var(--gradient-evening);
  box-shadow: var(--shadow-light);
}
.lah-hero-form-title {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  text-transform: uppercase;
  color: var(--color-white);
  text-align: center;
}
.lah-hero-form-accent {
  color: var(--color-sunflower);
}
/* The shared include renders bare .form-control inputs. Figma styles them as
   neutral-50 fills with a neutral-100 border. Placeholder colour is deliberately
   NOT Figma's #a9abb4 — see the contrast note in section 11. */
.lah-hero-form .form-control {
  background-color: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-100);
  border-radius: 8px;
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label-sm);
  line-height: var(--lh-label-sm);
  text-transform: uppercase;
  color: var(--color-ocean);
}

@media (max-width: 1199.98px) {
  .lah-hero-band { padding: 20px 1rem 0; }
  .lah-hero { min-height: 0; border-radius: 24px; }
  .lah-hero-inner { padding: 2.5rem 1.25rem; gap: 28px; }
  .lah-hero-h1 { font-size: 2.5rem; line-height: 3rem; }
  .lah-hero-sub { font-size: 1.25rem; line-height: 1.75rem; }
  .lah-hero-form { padding: 24px 20px; }
}

/* ---- Mobile hero ----------------------------------------------------------
   Measured at 390x844 before this block: the hero ran 1280px (1.52 screens),
   the trust row ate the top 182px, and BOTH conversion actions sat below the
   fold — CTAs at y=915, form at y=1031 against an 844px viewport. A visitor saw
   a logo strip and a headline and nothing to act on.

   The desktop order (trust -> headline -> CTAs -> form) is right on a wide
   screen where it is all visible at once. On a phone the headline and its CTAs
   come first, the trust row moves below them as supporting evidence, and the
   form follows. Order is changed with flex `order` so the DOM sequence — and
   therefore the reading and tab order — stays headline, trust, form. */
@media (max-width: 767.98px) {
  .lah-hero-inner { padding: 1.5rem 1rem; gap: 20px; }
  .lah-hero-headers { order: 1; gap: 8px; }
  .lah-hero-tags { order: 2; gap: 16px; }
  .lah-hero-form { order: 3; }
  .lah-hero-h1 { font-size: 1.75rem; line-height: 2.125rem; }
  .lah-hero-sub { font-size: 1rem; line-height: 1.375rem; }
  .lah-hero-ctas { margin-top: 4px; width: 100%; }
  .lah-hero-ctas .lah-pill { flex: 1 1 auto; justify-content: center; }
  /* The trust row is supporting evidence on mobile, so it reads at a smaller
     scale rather than dominating the first screen. */
  .lah-hero-oem { width: 150px; }
  .lah-hero-oem-gree { width: auto; height: 44px; }
  .lah-hero-trust-mark { font-size: 30px; }
  .lah-hero-trust-cta { font-size: 0.8125rem; }
}

@media (max-width: 575.98px) {
  /* linter suggests `p-0` here — deliberately NOT applied. Zero-value padding/
     margin utilities (p-0/m-0/g-0) are banned project-wide, and this is a
     breakpoint override that a global utility class cannot express anyway:
     the band keeps its 20px padding above 576px and only goes edge-to-edge
     below it. */
  .lah-hero-band { padding: 0; }
  .lah-hero { border-radius: 0; }
  .lah-hero-h1 { font-size: 2rem; line-height: 2.5rem; }
}

/* Flush helper — replaces the banned zero-value margin utilities (mb-0 etc.).
   Named for the property so it composes anywhere a trailing margin must go. */

/* Hero form controls — the shared small-contact-form include renders bare
   .form-control elements at Bootstrap's default height, which lands at 26px
   once the Figma label type scale is applied. That is well under the 40px tap
   floor, so the height is set here rather than by editing a site-wide include. */
.lah-hero-form .form-control {
  min-height: 40px;
  padding: 0.5rem 0.75rem;
}
.lah-hero-form textarea.form-control {
  min-height: 88px;
}
/* Four-column hero form (Figma): names | email+phone | message | submit. The
   include's columns are flex stacks, so the message label and the submit button
   stretch to the height of two stacked fields (40 + 16 + 40) at lg+. */
.lah-hero-form label:has(> textarea) {
  display: flex;
  flex: 1 1 auto;
}
.lah-hero-form label > textarea.form-control { flex: 1 1 auto; }
/* Placeholder contrast: Figma specifies #a9abb4 on #eef0f5, which measures
   2.01:1 — a hard AA failure. Placeholder text is normal text and needs 4.5:1.
   Ocean at 72% over neutral-50 resolves to #556288 = 5.28:1, keeping the muted
   look with headroom. 60% (3.74:1) and 65% (4.31:1) both still fail. */
.lah-hero-form .form-control::placeholder {
  color: color-mix(in srgb, var(--color-ocean) 72%, var(--color-neutral-50));
  opacity: 1;
}
/* The include's submit button carries the husk's deleted .btn-blue. Restyled
   here — not in the include — to the Figma four-column form: an Ocean block filling
   the last column, label with an arrow beneath it. The arrow is CSS so the echoed
   <button> markup stays untouched. White on Ocean 13.57:1; hover 7.5:1. */
.lah-hero-form .btn-contact {
  --bs-btn-color: var(--color-white);
  --bs-btn-bg: var(--color-ocean);
  --bs-btn-border-color: var(--color-ocean);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-bg: var(--color-ocean-hover);
  --bs-btn-hover-border-color: var(--color-ocean-hover);
  --bs-btn-active-color: var(--color-white);
  --bs-btn-active-bg: var(--color-ocean-hover);
  --bs-btn-active-border-color: var(--color-ocean-hover);
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 10px;
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label-lg);
  text-transform: uppercase;
}
.lah-hero-form .btn-contact::after {
  content: "\2192";
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1;
}
/* Tighten the stack so the hero lands nearer Figma's 820. */
.lah-hero-inner {
  padding: 2.5rem 2.5rem;
  gap: 28px;
}

/* ============================================================
   11. Shared section primitives
   ============================================================ */
/* Figma lays every section out on a 1600 frame with 80px padding, giving 1440
   of content — wider than Bootstrap's 1320 xxl container, so this replaces it
   rather than fighting it. */
.lah-container {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: 80px;
}
.lah-overline {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 18px;
  color: var(--color-ocean);
}
.lah-overline-swash {
  display: block;
  width: 73px;
  height: auto;
}
.lah-h2 {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  text-transform: uppercase;
  color: var(--color-ocean);
}
.lah-body {
  margin-bottom: 1.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ocean);
}
.lah-ctas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Advantage pill — white capsule, gradient icon disc, label.
   Reused by the Opener (6), About Us (5) and Closer (6). */
.lah-advantages {
  display: flex;
  gap: 39px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
/* Home opener pills (6). As a wrapping flex row (200px basis + 39px gaps) they
   broke into 5 + 1 at 1366-1599 — "Weekend Coverage" stretched across a full-width
   row of its own — and 4 + 2 at 1200. Grid instead: 2 x 3 at 576-991, 3 x 2 at
   992-1365, and ONE row of six on laptops and up (1366+, incl. the 13" MacBook Air
   at 1440/1470). Six across only fits there with compact pills: 12px gap, 32px disc,
   13px label — measured one row with every label on <=2 lines and 54px pills at
   1366-1600 (16px labels or 39px gaps put labels on 3 lines). The closer's pill row
   keeps its own flex layout. */
@media (min-width: 576px) {
  .lah-advantages:not(.lah-closer-advantages) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .lah-advantages:not(.lah-closer-advantages) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 1200-1365: six across needs one step smaller again (12px label, 28px disc, 10px
   gap) — measured one row with every label on 2 lines and 46px pills. */
@media (min-width: 1200px) and (max-width: 1365.98px) {
  .lah-advantages:not(.lah-closer-advantages) { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .lah-advantages:not(.lah-closer-advantages) .lah-advantage { gap: 6px; padding: 8px 10px; }
  .lah-advantages:not(.lah-closer-advantages) .lah-advantage-icon { flex-shrink: 0; width: 28px; height: 28px; font-size: 14px; }
  .lah-advantages:not(.lah-closer-advantages) .lah-advantage-icon i { font-size: 14px; }
  .lah-advantages:not(.lah-closer-advantages) .lah-advantage-label { font-size: 12px; line-height: 15px; }
}
@media (min-width: 1366px) {
  .lah-advantages:not(.lah-closer-advantages) { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .lah-advantages:not(.lah-closer-advantages) .lah-advantage { gap: 8px; padding: 10px 12px; }
  .lah-advantages:not(.lah-closer-advantages) .lah-advantage-icon { flex-shrink: 0; width: 32px; height: 32px; font-size: 16px; }
  .lah-advantages:not(.lah-closer-advantages) .lah-advantage-icon i { font-size: 16px; }
  .lah-advantages:not(.lah-closer-advantages) .lah-advantage-label { font-size: 13px; line-height: 17px; }
}
.lah-advantage {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 200px;
  padding: 16px;
  background-color: var(--color-white);
  border-radius: 54px;
}
.lah-advantage-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background-image: var(--gradient-summer);
  border-radius: 50%;
  color: var(--color-white);
  font-size: 20px;
}
.lah-advantage-label {
  color: var(--color-ocean);
}

/* ============================================================
   12. Opener — Figma 46046:844
   ============================================================ */
.lah-opener {
  background-color: var(--color-lilac);
  padding-block: 80px;
}

/* Plain page body under the image hero (privacy, terms, contact, thank-you, 404).
   Same rhythm as .lah-opener on the white ground; the hero-overlap compensation in
   section 27 treats it like .lah-opener. */
.lah-page-body { padding-block: 80px; }
@media (max-width: 991.98px) { .lah-page-body { padding-block: 48px; } }

/* Contact hero has no estimate form (the page body carries the main form), so the
   820px min-height would leave an empty card. */
@media (min-width: 992px) { .lah-hero.lah-hero-compact { min-height: 600px; } }

/* Contact / thank-you form card — the framed-card language used on the process,
   FAQ and closer cards: Sunbeam border, hard Lake offset shadow. */
.lah-contact-card {
  padding: 40px;
  background-color: var(--color-white);
  border: 5px solid var(--color-sunbeam);
  border-radius: 36px;
  box-shadow: 18px 18px 0 0 var(--color-lake);
}
@media (max-width: 767.98px) {
  .lah-contact-card {
    padding: 28px 20px;
    border-radius: 24px;
    box-shadow: 10px 10px 0 0 var(--color-lake);
  }
}
/* Brand/Ice hard offset shadow, straight from the comp. Ice is 3.16:1 on white
   so it is decorative only — never text. */
.lah-opener-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 5px solid var(--color-sunbeam);
  border-radius: 38px;
  box-shadow: 16px 16px 0 0 var(--color-ice);
}

@media (max-width: 991.98px) {
  .lah-container { padding-inline: 1.25rem; }
  .lah-opener { padding-block: 48px; }
  .lah-advantages { gap: 12px; margin-bottom: 40px; }
  .lah-advantage { flex: 1 1 240px; }
  .lah-h2 { font-size: 2rem; line-height: 2.5rem; }
  .lah-opener-img { box-shadow: 8px 8px 0 0 var(--color-ice); }
}

/* ============================================================
   13. Services — Figma 46046:861
   ============================================================
   Dark diagonal band carrying 8 white service cards plus the light-commercial
   callout. Marked .surface-dark so links and accent icons resolve light.
   ------------------------------------------------------------ */
.lah-services {
  padding-block: 80px;
  background-image: var(--gradient-diagonal);
}
.lah-services-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
}
/* Overline and H2 invert on the dark band. Sunflower on the gradient's darkest
   stop (#1a2b5d) is 8.17:1; on the lightest (#7092ca) it is 2.6:1 — but the
   header sits over the dark end, so this is safe where it is used. */
.lah-overline-light { color: var(--color-sunflower); }
.lah-h2-light { color: var(--color-white); max-width: 1030px; }
.lah-services-intro {
  max-width: 717px;
  color: var(--color-white);
}

/* Card. The badge overlaps the photo, so the card clips to its own radius. */
.lah-service-grid { margin-bottom: 40px; }
.lah-service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-white);
  border-radius: 28px;
  box-shadow: var(--shadow-light);
}
.lah-service-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  flex-shrink: 0;
}
.lah-service-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding: 28px 24px;
  flex: 1 1 auto;
}
/* Gradient disc straddling the photo edge. Stays inside the card's bounds, so
   the card's overflow:hidden does not clip it. */
.lah-service-badge {
  position: absolute;
  top: -54px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-image: var(--gradient-evening);
  color: var(--color-lilac);
  font-size: 36px;
}
.lah-service-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.lah-service-copy {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-ink);
}
.lah-service-cta { margin-top: auto; }

/* Checklist. Ice on white is 3.16:1 — clears the 3:1 icon threshold but would
   fail as text, which is why only the glyph uses it. */
.lah-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.lah-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: var(--color-ink);
}
.lah-checklist i { color: var(--color-ice); font-size: 1rem; }
.lah-checklist-lake i { color: var(--color-lake); }

/* Home service cards: titles link to the hub, checklist items to the service
   pages. Titles keep their display look (underline on hover/focus). Checklist
   links carry a quiet Ice underline so they read as links, turn Lake on hover
   (5.71:1 on white, ~5.0:1 on the card's Lilac-wash hover), and get 2px block
   padding for a 24px target. */
.lah-service-title a { color: inherit; text-decoration: none; }
.lah-service-title a:hover,
.lah-service-title a:focus-visible { text-decoration: underline; }
.lah-checklist a {
  padding-block: 2px;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-ice);
  text-underline-offset: 3px;
}
.lah-checklist a:hover,
.lah-checklist a:focus-visible {
  color: var(--color-lake);
  text-decoration-color: currentColor;
}

/* Light-commercial callout */
.lah-commercial {
  position: relative;
  display: flex;
  gap: 80px;
  align-items: stretch;
  overflow: hidden;
  padding-left: 28px;
  background-color: var(--color-white);
  border-radius: 28px;
}
.lah-commercial-content {
  flex: 1 1 0;
  min-width: 0;
  max-width: 597px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-block: 28px;
}
.lah-commercial-media {
  position: relative;
  flex: 0 0 auto;
  width: 767px;
  max-width: 53%;
}
/* Figma 46046:4275 is a 767x298 box. With the image in flow, its own 16:9 ratio
   set the row height (740x416 rendered, ~120px too tall) — the text column only
   needs ~290px. Taken out of flow, the card is sized by its content (floor = the
   Figma 298) and the photo fills whatever that is. The asset is pre-cropped to
   Figma's window, so the centre crop is correct. */
.lah-commercial { min-height: 298px; }
.lah-commercial-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lah-commercial-badge {
  top: 50%;
  left: -35px;
  transform: translateY(-50%);
  z-index: 2;
}

@media (max-width: 991.98px) {
  .lah-services { padding-block: 48px; }
  .lah-commercial { flex-direction: column; gap: 0; padding-left: 0; }
  .lah-commercial-content { max-width: none; padding: 28px 24px; order: 2; }
  .lah-commercial-media { width: 100%; max-width: none; order: 1; height: 220px; }
  /* Re-anchor the disc to the seam between the stacked image and content. */
  .lah-commercial-badge { top: auto; bottom: -35px; left: 24px; transform: none; }
}

/* ============================================================
   14. Brands — Figma 46046:979
   ============================================================
   Ice band. CONTRAST NOTE: ocean on Ice measures 4.30:1 — under the 4.5 floor
   for normal text but over the 3:1 floor for LARGE text. The heading is 32px so
   it passes as large text. Body-size ocean text on this band would FAIL, which
   is why .bg-ice publishes a darkened link colour rather than plain ocean.
   ------------------------------------------------------------ */
.lah-brands {
  padding-block: 80px;
  background-color: var(--color-ice);
  overflow: hidden;
}
.lah-brands-title {
  margin-bottom: 31px;
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-ocean);
}
.lah-brands-ctas {
  justify-content: center;
  margin-top: 31px;
}

/* Marquee speed: the duration is one copy-stride, so px/sec = (trackWidth/3)/duration.
   At the built widths that is ~2116px per copy: 45s read as static at a glance (47px/s),
   25s gives ~85px/s, which is legibly in motion without being distracting. Re-check the
   rate if logos are added or removed -- the track width, not the duration, sets the speed. */
/* Marquee. Three copies of the set in the track, so the keyframe must translate
   exactly 100/3 % — any other value puts the loop point mid-copy and produces a
   visible jump at the seam. */
/* .lah-marquee carries no overflow rule — the markup uses Bootstrap's
   .overflow-hidden. The class remains as the hover target for pausing. */
.lah-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: lah-marquee-scroll 25s linear infinite;
}
/* Spacing is a per-item margin, NOT `gap` on the track. With `gap`, N items
   produce only N-1 gaps, so trackWidth/3 falls one-third of a gap short of a
   real copy stride and the loop lands mid-copy — measured 6px of drift at the
   seam. A right margin on every item gives exactly N gaps, so the track width
   is precisely divisible by the number of copies. */
.lah-marquee-track > .lah-brand-logo {
  margin-right: 18px;
}
@keyframes lah-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}
.lah-marquee:hover .lah-marquee-track { animation-play-state: paused; }
/* Not optional — continuous motion is a vestibular trigger. */
@media (prefers-reduced-motion: reduce) {
  .lah-marquee-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  /* Static fallback shows one copy; the duplicates would just repeat the row.
     linter suggests `d-none` — not applicable: that is a global utility and this
     must apply ONLY under prefers-reduced-motion. A media query cannot be
     expressed as a markup class. */
  .lah-marquee-track > .lah-brand-logo[aria-hidden="true"] { display: none; }
}
.lah-brand-logo {
  flex-shrink: 0;
  height: auto;
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

/* ============================================================
   15. Customer Reviews — Figma 46046:1144
   ============================================================ */
.lah-reviews {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 80px;
}
.lah-reviews-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.lah-reviews-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--overlay-band);
  z-index: -1;
}
.lah-reviews-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.lah-reviews-tags {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}
/* On this band the stars and the Facebook mark are lilac, not white/sunflower.
   Lilac on the overlay reads 5+:1; sunflower would too, but the comp uses lilac. */
.lah-reviews-stars { color: var(--color-lilac); font-size: 15px; line-height: 16px; }
.lah-trust-mark-lilac { color: var(--color-lilac); }
.lah-trust-label-lilac { color: var(--color-lilac); }
.lah-reviews-title { max-width: 1116px; }
.lah-reviews-intro { max-width: 750px; color: var(--color-white); }

/* Review card — the Figma card's values.

   IMPORTANT CORRECTION: these cannot skin the widget from here. Elfsight renders
   inside a SHADOW ROOT (verified in-browser: the mounted child carries an open
   shadowRoot containing the review text), and shadow DOM encapsulation blocks
   external stylesheets. The widget therefore shows Elfsight's own white cards,
   not this design.

   To match the comp, paste equivalent CSS into the widget's own Custom CSS panel
   in the Elfsight dashboard — the mounted root is deliberately classed
   "...-custom-css-root" for exactly that. These rules stay as the reference
   values for whoever does it (and would style a static testimonial if one is
   ever added).
   NOTE: Figma colours the card's "Learn More" link Brand/Ice on Brand/Lake,
   which measures 2.15:1 — a hard AA failure. Lilac is used instead (5.05:1)
   for the same muted-link feel. Do not restore the Ice value.
   Sunflower stars on Lake are 4.09:1: fine as a non-text graphic (3:1), and
   they are aria-hidden with the rating conveyed in text. */
.lah-review-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  padding: 20px;
  background-color: var(--color-lake);
  border: 5px solid var(--color-sunbeam);
  border-radius: 28px;
  box-shadow: var(--shadow-light);
  text-align: left;
}
.lah-review-name {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-white);
}
.lah-review-date {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: var(--color-white);
}
.lah-review-stars { color: var(--color-sunflower); font-size: 18px; }
.lah-review-text {
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: var(--color-white);
}
.lah-review-more {
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label-sm);
  line-height: var(--lh-label-sm);
  text-transform: uppercase;
  color: var(--color-lilac);
}

@media (max-width: 991.98px) {
  .lah-reviews { padding-block: 48px; }
}

/* ============================================================
   16. About Us — Figma 46046:1167
   ============================================================
   Second Ice band. Body copy is BLACK, not ocean — deliberate: ocean on Ice is
   4.30:1 and fails at 16px, black is 6.65:1. Do not "brand" this to ocean.
   ------------------------------------------------------------ */
.lah-about {
  background-color: var(--color-ice);
  padding: 100px 0 80px;
}
.lah-about-row { margin-bottom: 60px; }
.lah-about-img {
  width: 100%;
  /* Figma 46046:1169 sizes this image box 768x373. `height: 100%` inside the
     align-items-stretch row made the photo as tall as the TEXT column instead,
     which ran ~150px over the design. The ratio must come from the design, not
     from whatever the neighbouring copy happens to measure. */
  height: auto;
  aspect-ratio: 768 / 373;
  object-fit: cover;
  border: 5px solid var(--color-sunbeam);
  border-radius: 28px;
  box-shadow: 16px 16px 0 0 var(--color-lake-mid);
}
.lah-about-body { color: var(--color-black); }

/* Advantage-v3 — the light-card variant, distinct from the Opener's white pill.
   Neutral-50 card, sunflower icon disc with an OCEAN glyph (8.17:1). */
.lah-about-advantages {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
/* Five cards. As a wrapping flex row (240px basis) they needed 1280px, so at
   1200-1440 "Weekend Coverage" dropped to a row of its own and stretched full
   width. Grid instead: five equal columns at 1200+, and 3 + 2 (last two centred on
   a 6-column track) on tablets. Phones keep the stacked flex column. */
@media (min-width: 768px) {
  .lah-about-advantages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lah-about-advantages > .lah-advantage-v3 { grid-column: span 2; }
  .lah-about-advantages > .lah-advantage-v3:nth-child(4) { grid-column: 2 / span 2; }
}
@media (min-width: 1200px) {
  .lah-about-advantages { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lah-about-advantages > .lah-advantage-v3,
  .lah-about-advantages > .lah-advantage-v3:nth-child(4) { grid-column: auto; }
}
.lah-advantage-v3 {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 12px 18px 20px;
  background-color: var(--color-neutral-50);
  border-radius: 24px;
}
.lah-advantage-v3-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lah-advantage-v3-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background-color: var(--color-sunflower);
  border-radius: 50%;
  color: var(--color-ocean);
  font-size: 20px;
}
.lah-advantage-v3-title {
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  color: var(--color-ink);
}
.lah-advantage-v3-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: var(--color-ink);
}

@media (max-width: 991.98px) {
  .lah-about { padding: 48px 0; }
  .lah-about-row { margin-bottom: 32px; }
  /* Stacked and full-width below lg, so the 768x373 letterbox no longer applies --
     at phone widths it would shrink a seven-person team photo to a sliver. Back to
     the source files' native 3:2. */
  .lah-about-img {
    aspect-ratio: 3 / 2;
    box-shadow: 8px 8px 0 0 var(--color-lake-mid);
  }
}

/* ============================================================
   17. Veteran Giveaway callout — Figma 46046:1186
   ============================================================ */
.lah-giveaway {
  background-color: var(--color-lake);
  padding-block: 80px;
}
.lah-giveaway-card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 24px;
  border: 5px solid var(--color-sunbeam);
  border-radius: 48px;
  background-image: var(--gradient-callout);
  box-shadow: 18px 18px 0 0 var(--color-ocean);
}
.lah-giveaway-media { flex: 0 0 380px; max-width: 380px; }
.lah-giveaway-img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}
.lah-giveaway-content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
}
.lah-giveaway-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  text-transform: uppercase;
  color: var(--color-lilac);
}
.lah-giveaway-lead {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--color-white);
}
.lah-giveaway-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.lah-giveaway-list li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-white);
}
.lah-giveaway-list i {
  color: var(--color-sunflower);
  line-height: var(--lh-body);
}
/* Terms. The comp sets this at 8px in lilac; both are changed deliberately.
   8px is not legibly readable, and lilac on this gradient measures 2.35:1 at the
   light stop. Raised to 12px white — but white ALONE is not enough either: the
   gradient runs ocean -> ice diagonally, and computing the interpolated colour
   at the terms' own corners gave 3.94:1 at the bottom-right. Capping the width
   to keep it in the dark region only reached 4.52:1 at 700px and is
   viewport-dependent, so a low-opacity ocean scrim is used instead. That
   decouples the terms from wherever the gradient happens to land and reads as a
   normal fine-print panel. */
.lah-giveaway-terms {
  margin: 0;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: var(--color-white);
  background-color: rgba(26, 43, 93, 0.55);
  border-radius: 12px;
}

@media (max-width: 991.98px) {
  .lah-giveaway { padding-block: 48px; }
  .lah-giveaway-card {
    flex-direction: column;
    border-radius: 28px;
    box-shadow: 8px 8px 0 0 var(--color-ocean);
  }
  .lah-giveaway-media { flex: 1 1 auto; max-width: none; align-self: center; }
  .lah-giveaway-content { gap: 18px; }
  .lah-giveaway-title { font-size: 2rem; line-height: 2.5rem; }
}

/* Lake button — third brand button variant, used on the Careers CTAs. */
.btn-lake {
  --bs-btn-color: var(--color-white);
  --bs-btn-bg: var(--color-lake);
  --bs-btn-border-color: var(--color-lake);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-bg: #5570b8;
  --bs-btn-hover-border-color: #5570b8;
  --bs-btn-active-color: var(--color-white);
  --bs-btn-active-bg: #5570b8;
}

/* ============================================================
   18. Careers — Figma 46046:1200
   ============================================================ */
.lah-careers {
  background-color: var(--color-lilac);
  padding-block: 80px;
}
.lah-careers-inner {
  display: flex;
  gap: 64px;
  align-items: center;
}
.lah-careers-intro { flex: 1 1 0; min-width: 0; }
.lah-careers-body {
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-ocean);
}
.lah-careers-card {
  flex: 0 0 860px;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 38px 40px;
  background-color: var(--color-white);
  border-radius: 40px;
  box-shadow: 18px 18px 0 0 var(--color-ocean);
}
.lah-careers-card-top {
  display: flex;
  gap: 12px;
  /* Stretch so the photo is as tall as the text column beside it (it was a fixed
     201px strip centred against ~300px of copy). */
  align-items: stretch;
}
.lah-careers-why { flex: 1 1 0; min-width: 0; }
.lah-careers-why-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  text-transform: uppercase;
  color: var(--color-ocean);
}
/* Reuses the giveaway list primitive; only the text colour differs, since here
   it sits on white rather than a dark gradient. */
.lah-careers-list li { color: var(--color-black); }
/* The photo is taken out of flow so the TEXT column sets the row height and the
   photo fills it. In flow, the 500x693 portrait source made the card ~590px tall
   once it loaded (height:auto follows the intrinsic ratio). */
.lah-careers-media { flex: 0 0 426px; max-width: 426px; position: relative; min-height: 201px; }
.lah-careers-media picture { position: absolute; inset: 0; }
.lah-careers-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Source is 500x693 PORTRAIT cropped into a 426x201 landscape box, so cover
     discards ~66% of the height. Centred, the window opens below the
     technician's head and decapitates him. Figma 46046:4605 frames him with the
     van's logo and phone number to his right, which puts the window top at
     roughly 136px of 693 -> ~30%. */
  object-position: center 30%;
  border-radius: 28px;
}
.lah-careers-card-bottom {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.lah-careers-note {
  margin: 0;
  flex: 1 1 320px;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-ink-mid);
}

@media (max-width: 1199.98px) {
  .lah-careers-inner { flex-direction: column; gap: 40px; }
  .lah-careers-card { flex: 1 1 auto; max-width: none; width: 100%; box-shadow: 8px 8px 0 0 var(--color-ocean); }
}
@media (max-width: 767.98px) {
  .lah-careers { padding-block: 48px; }
  .lah-careers-card { padding: 24px 20px; border-radius: 28px; }
  .lah-careers-card-top { flex-direction: column; align-items: stretch; gap: 20px; }
  .lah-careers-media { flex: 1 1 auto; max-width: none; min-height: 0; }
  /* Stacked: nothing beside the photo to match, so back in flow at the strip height. */
  .lah-careers-media picture { position: static; }
  .lah-careers-img { height: 201px; }
}

/* ============================================================
   19. Maintenance Plans & Financing — Figma 46046:1226
   ============================================================
   Full-bleed photo + overlay-band carrying three gradient panels. The white
   Advantage cards inside them are registered as LIGHT surfaces below so their
   icons and any links resolve dark-on-light, not light-on-dark.
   ------------------------------------------------------------ */
.lah-plans {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 80px;
}
.lah-plans-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.lah-plans-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--overlay-band);
  z-index: -1;
}
.lah-plans-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
}
.lah-plans-title { max-width: 1118px; }
.lah-plans-intro { max-width: 788px; color: var(--color-white); }

.lah-plans-row {
  display: flex;
  gap: 52px;
  align-items: stretch;
  margin-bottom: 40px;
}
.lah-plan-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px;
  text-align: center;
  border: 5px solid var(--color-sunbeam);
  border-radius: 38px;
  background-image: var(--gradient-diagonal);
}
.lah-plan-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  text-transform: uppercase;
  color: var(--color-white);
}
.lah-plan-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-white);
}
.lah-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}
.lah-plan-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 16px 10px;
  background-color: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.lah-plan-icon { font-size: 48px; line-height: 1; }
.lah-plan-label {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  text-align: center;
  color: var(--color-ocean);
}
.lah-plan-wisetack { width: 100%; max-width: 206px; height: auto; }
/* The two plan cards are side by side but their intro paragraphs (and, at 1200, their
   CTA rows) wrap to different heights, so financing's items sat higher than
   maintenance's. Subgrid shares ONE set of rows across both cards — title, intro,
   item grid, CTAs — so each row starts on the same line whatever wraps. Side by side
   only (992+); stacked below. The Wisetack wordmark (36px tall) gets the 48px box
   the Font Awesome icons use, so its label lines up with the others. */
@media (min-width: 992px) {
  .lah-plans-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
    column-gap: 52px;
  }
  .lah-plans-row > .lah-plan-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    justify-items: center;
    row-gap: 16px;
  }
  .lah-plans-row > .lah-plan-card > .lah-plan-grid { align-self: start; }
}
.lah-plan-item .lah-plan-wisetack { height: 48px; object-fit: contain; }

@media (max-width: 991.98px) {
  .lah-plans { padding-block: 48px; }
  .lah-plans-row { flex-direction: column; gap: 24px; }
  .lah-plan-card { padding: 24px 20px; border-radius: 28px; }
  .lah-plan-grid { gap: 12px; }
}

/* ============================================================
   20. Service Areas — Figma 46046:1279
   ============================================================ */
.lah-areas {
  background-image: var(--gradient-evening);
  padding: 100px 0 80px;
}
.lah-areas-inner {
  display: flex;
  gap: 35px;
  align-items: center;
}
.lah-areas-map {
  position: relative;
  flex: 0 0 717px;
  max-width: 50%;
  /* The frame carries the radius + hard shadow (it used to be the <img>), so the
     stage inside can be cropped to the frame without losing the corners. */
  overflow: hidden;
  border-radius: 40px;
  box-shadow: 17px 17px 0 0 var(--color-ocean);
}
.lah-areas-map-stage { position: relative; }
.lah-areas-map-img {
  display: block;
  width: 100%;
  height: auto;
}
/* Wide desktop (1440+): the map is as tall as the content column beside it.
   The frame takes size containment, so its height comes ONLY from the stretched
   row (the text column), never from the map. The stage is a manual
   object-fit: cover that keeps 717:877, so the percent-positioned pins scale with
   the map. The crop is anchored on the PINS, not the image centre: the six towns
   span x 19.5-91.2% and y 17.8-69% of the map, so the stage is offset to put that
   box's centre (55.4%, 43.5%) mid-frame, clamped so the map always covers the frame.
   Below 1440 the 40-45% map column is too narrow for its height: any full-height
   crop cut 1-4 towns off, so 1200-1439 keeps the map at its natural size, centred. */
@media (min-width: 1440px) {
  .lah-areas-inner { align-items: stretch; }
  .lah-areas-map { container-type: size; min-height: 640px; }
  .lah-areas-map-stage {
    --sw: max(100cqw, calc(100cqh * 717 / 877));
    --sh: calc(var(--sw) * 877 / 717);
    position: absolute;
    width: var(--sw);
    height: var(--sh);
    left: clamp(calc(100cqw - var(--sw)), calc(50cqw - var(--sw) * 0.554), 0px);
    top: clamp(calc(100cqh - var(--sh)), calc(50cqh - var(--sh) * 0.435), 0px);
  }
  .lah-areas-map-img { height: 100%; object-fit: cover; }
}
.lah-map-pin {
  position: absolute;
  height: auto;
  pointer-events: none;
}
.lah-areas-content { flex: 1 1 0; min-width: 0; }
.lah-areas-intro { color: var(--color-white); max-width: 717px; }
.lah-areas-subtitle {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  text-transform: uppercase;
  color: var(--color-white);
}

/* City chips. The primary city carries the Summer gradient and a star; the rest
   are lilac with a pin. Ocean label on both: 8.17:1 on sunflower, 10.09:1 on
   lilac. */
.lah-areas-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 9px;
}
.lah-area-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background-color: var(--color-lilac);
  border-radius: 18px;
  box-shadow: var(--shadow-light);
}
.lah-area-item-primary { background-image: var(--gradient-summer); }

/* Counties line under the city pills — fixed in the block so every page that
   renders Service Areas states the full county coverage. */
.lah-areas-counties {
  margin: 0 0 18px;
  color: var(--color-white);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}
.lah-areas-counties .label { color: var(--color-sunbeam); margin-right: 4px; }
.lah-area-item i { color: var(--color-ocean); font-size: 18px; }
.lah-area-label { color: var(--color-ocean); }

/* City pills are links to the city pages. The anchor IS the pill (li is only the
   grid cell): 40px tap floor, no underline. Hover = the site's framed-card language
   at pill scale — lift, Sunbeam inset ring, hard Ocean offset — and the lilac pills
   brighten to white (Ocean label 13.6:1). The gold primary pill keeps its gradient
   (background-image can't transition), so only ring/shadow/lift animate on it.
   Inset ring + transform only, so hovering never shifts the grid. */
a.lah-area-item {
  min-height: 40px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
a.lah-area-item:focus-visible {
  outline: 3px solid var(--color-sunflower);
  outline-offset: 3px;
}
@media (hover: hover) {
  a.lah-area-item:hover {
    background-color: var(--color-white);
    box-shadow: inset 0 0 0 2px var(--color-sunbeam), 5px 5px 0 0 var(--color-ocean);
    transform: translate(-2px, -2px);
  }
  a.lah-area-item:hover i { color: var(--color-lake); }
  a.lah-area-item-primary:hover i { color: var(--color-ocean); }
}
@media (prefers-reduced-motion: reduce) {
  a.lah-area-item { transition: none; }
  a.lah-area-item:hover { transform: none; }
}

/* Callout */
.lah-areas-callout {
  position: relative;
  overflow: hidden;
  background-color: var(--color-lilac);
  border: 5px solid var(--color-sunbeam);
  border-radius: 40px;
  box-shadow: 18px 18px 0 0 var(--color-ocean);
}
.lah-areas-watermark {
  position: absolute;
  top: 12px;
  left: -2px;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.lah-areas-callout-img {
  position: relative;
  display: block;
  /* Figma 46046:4694 places the van at w-[64.58%] left-[17.7%] top-[-14.36%]
     inside the 688x215 frame -- i.e. the same 4:3 cut-out scaled to 444x333,
     centred, with 31px clipped off the top. `width: 100%` filled the frame
     edge to edge, which scaled the van ~55% too large and cropped the ladder
     rack off the roof. The 26% here is that -31px top offset expressed against
     the 118px of vertical slack cover leaves. */
  width: 64.58%;
  margin-inline: auto;
  height: 215px;
  object-fit: cover;
  object-position: center 26%;
}
.lah-areas-callout-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 24px;
}
.lah-areas-callout-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  text-transform: uppercase;
  color: var(--color-ocean);
}
.lah-areas-callout-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-ocean);
}

@media (max-width: 991.98px) {
  .lah-areas { padding: 48px 0; }
  .lah-areas-inner { flex-direction: column; gap: 32px; }
  .lah-areas-map { flex: 1 1 auto; max-width: none; width: 100%; box-shadow: 8px 8px 0 0 var(--color-ocean); }
  .lah-areas-callout { box-shadow: 8px 8px 0 0 var(--color-ocean); }
  /* Stacked, the card is ~350px wide, where 64.58% is nearly square and cover
     would slice the van's nose off -- so the van goes full width instead. The
     4:3 cut-out carries ~30% dead space below the wheels, which showed as a
     large gap above the heading, so crop to the van's own bounds (source rows
     ~40-380 of 525) rather than shipping the padding. */
  .lah-areas-callout-img {
    width: 100%;
    height: auto;
    aspect-ratio: 700 / 340;
    object-position: center 22%;
  }
  .lah-areas-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .lah-areas-list { grid-template-columns: 1fr; }
}

/* Map pins. Each position is unique, so they are numbered modifier classes
   rather than inline styles. Values are PERCENTAGES of the 717x877 map so the
   pins scale with the image instead of drifting at other viewports. */
.lah-map-pin-1 { width: 6.248%; right: 65.997%; top: 33.865%; }
.lah-map-pin-2 { width: 4.603%; right: 8.787%; top: 50.057%; }
.lah-map-pin-3 { width: 4.603%; right: 15.202%; top: 52.908%; }
.lah-map-pin-4 { width: 4.603%; right: 19.107%; top: 63.968%; }
.lah-map-pin-5 { width: 4.603%; right: 45.328%; top: 55.188%; }
.lah-map-pin-6 { width: 4.603%; right: 75.872%; top: 17.788%; }

/* One-hour service radius, from the Figma Map frame (890px circle at -223.5, -120
   on the 717x877 map). Percent of the stage so it tracks the pins; its centre
   sits on Keystone Heights. The frame's overflow: hidden crops the overhang. */
.lah-map-radius {
  position: absolute;
  left: -31.172%;
  top: -13.683%;
  width: 124.128%;
  height: auto;
  max-width: none;
  pointer-events: none;
}

/* ============================================================
   21. FAQs — Figma 46046:1318
   ============================================================
   One accordion split across two columns. The wrapper and its single id sit
   OUTSIDE the row so data-bs-parent reaches items in both columns; see the
   comment in index.php.
   ------------------------------------------------------------ */
.lah-faq {
  background-color: var(--color-lilac);
  padding-block: 60px;
}
.lah-faq-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 28px;
}
.lah-faq-title { max-width: 990px; }
/* The questions sit on a card, not bare on the section -- Figma 46046:4706:
   Lake fill, 5px Sunbeam border, 36px radius, 40px padding and an 18px Ice
   offset shadow. Plus/minus replaces Bootstrap's chevron via the component's
   own CSS variables rather than a bespoke ::after, and the transform is
   cancelled because rotating a plus 180deg still reads as a plus. */
.lah-faq-accordion {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237092ca' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M8 3.5v9M3.5 8h9'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23d1dff7' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M3.5 8h9'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-transform: none;
  --bs-accordion-btn-icon-width: 1.25rem;
  padding: 40px;
  background-color: var(--color-lake);
  border: 5px solid var(--color-sunbeam);
  border-radius: 36px;
  box-shadow: 18px 18px 0 0 var(--color-ice);
}
.lah-faq-item {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-ice);
  margin-bottom: 8px;
}
/* Bootstrap's default .accordion-button padding is 1rem 1.25rem, which clears
   the 40px tap floor comfortably; the block padding here keeps that true. */
/* Figma draws a 34px row (26px text + 8px padding-bottom). 8px top and bottom
   is used instead, for a 42px row: 34px would put every question under the
   40px tap-target floor this build already holds itself to. */
.lah-faq-button {
  padding: 8px 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--color-lilac);
  background-color: transparent;
  box-shadow: none;
}
.lah-faq-button:not(.collapsed) {
  color: var(--color-white);
  background-color: transparent;
  box-shadow: none;
}
/* The old focus ring was Lake on what is now a Lake card -- invisible. */
.lah-faq-button:focus-visible {
  outline: 3px solid var(--color-sunbeam);
  outline-offset: 2px;
  box-shadow: none;
}
.lah-faq-button::after {
  width: 1.25rem;
  height: 1.25rem;
  background-size: 1.25rem;
}
/* Answers moved off --color-ink: near-black on the Lake card measures 2.76:1,
   a straight AA failure. Lilac is 5.05:1. */
.lah-faq-body {
  padding: 0 0 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-lilac);
}

@media (max-width: 991.98px) {
  .lah-faq { padding-block: 40px; }
  /* Figma's 40px card padding and 18px shadow are drawn against a 1440px card;
     at ~350px they eat the line length. Stepped down to match the 8px mobile
     shadow the other cards in this build already use. */
  .lah-faq-accordion {
    padding: 24px 20px;
    border-radius: 28px;
    box-shadow: 8px 8px 0 0 var(--color-ice);
  }
}

/* ============================================================
   22. Specials — Figma 46046:1367
   ============================================================ */
.lah-specials {
  background-color: var(--color-lake);
  padding-block: 80px;
}
.lah-specials-inner {
  display: flex;
  gap: 37px;
  align-items: stretch;
}
.lah-specials-copy { flex: 1 1 0; min-width: 0; max-width: 551px; }
.lah-specials-intro { color: var(--color-white); }
.lah-specials-media {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: 37px;
  align-items: stretch;
}
.lah-coupon {
  flex: 0 0 389px;
  max-width: 389px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
  align-items: flex-start;
  padding: 28px;
  background-color: var(--color-lilac);
  border: 5px solid var(--color-sunbeam);
  border-radius: 28px;
  box-shadow: 17px 17px 0 0 var(--color-ocean);
}
.lah-coupon-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  text-transform: uppercase;
  color: var(--color-ocean);
}
.lah-coupon-lead {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--color-ocean);
}
.lah-coupon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lah-coupon-list li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-black);
}
.lah-coupon-list i { color: var(--color-lake); line-height: var(--lh-body); }
/* Fine print. The comp sets this in Outfit — a font from the DONOR design that
   is not one of this site's four families — coloured Brand/Ice on lilac, which
   measures 2.35:1. Both corrected: Open Sans (--font-body) at Brand/Lake, which
   is 5.05:1 on lilac and matches the shield icons above it. */
.lah-coupon-terms {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 0.875rem;
  color: var(--color-lake);
}
.lah-specials-photo { flex: 1 1 0; min-width: 0; }
.lah-specials-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 17px 17px 0 0 var(--color-ocean);
}

@media (max-width: 1199.98px) {
  .lah-specials-inner { flex-direction: column; gap: 40px; }
  .lah-specials-copy { max-width: none; }
}
@media (max-width: 767.98px) {
  .lah-specials { padding-block: 48px; }
  .lah-specials-media { flex-direction: column; gap: 28px; }
  .lah-coupon { flex: 1 1 auto; max-width: none; box-shadow: 8px 8px 0 0 var(--color-ocean); }
  .lah-specials-img { box-shadow: 8px 8px 0 0 var(--color-ocean); height: 240px; }
}

/* ============================================================
   23. Closer — Figma 46046:1389
   ============================================================
   Third Ice band. Body copy is BLACK for the same reason as About Us: ocean on
   Ice is 4.30:1 and fails at 16px. The six advantage pills reuse the Opener's
   .lah-advantage primitive unchanged.
   ------------------------------------------------------------ */
.lah-closer {
  background-color: var(--color-ice);
  padding: 100px 0 80px;
}
.lah-closer-inner {
  display: flex;
  gap: 62px;
  align-items: stretch;
}
.lah-closer-content { flex: 0 0 713px; max-width: 713px; }
.lah-closer-body { color: var(--color-black); max-width: 717px; }
.lah-closer-advantages { gap: 20px; margin-bottom: 36px; }
.lah-closer-advantages .lah-advantage { flex: 1 1 200px; }
.lah-closer-media { flex: 1 1 0; min-width: 0; }
.lah-closer-img {
  width: 100%;
  /* Figma 46046:4793 is a 665x569 box (1.169). `height: 100%` let the portrait
     672x895 source set its own height -- it rendered 650x863, ~307px over. Same
     failure as .lah-about-img: the ratio has to come from the design. Figma's
     own fill is a plain `object-cover` with no offset, so the centre crop is
     correct here and needs no object-position. */
  height: auto;
  aspect-ratio: 665 / 569;
  object-fit: cover;
  border: 5px solid var(--color-sunbeam);
  border-radius: 36px;
  box-shadow: 18px 18px 0 0 var(--color-lake);
}

/* Home closer, side by side: the photo matches the text column's height. At its fixed
   665/569 ratio it sat top-aligned and ~110px short at 1470, and at 1200 it shrank to a
   250x214 sliver beside 557px of copy. Out of flow, the copy sets the row height and
   the photo covers it. Scoped to .lah-closer-media (home only) — sub-page closers use
   .lah-closer-img in a different layout. */
@media (min-width: 1200px) {
  .lah-closer-media { position: relative; min-height: 360px; }
  .lah-closer-media .lah-closer-img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}
/* 1200–1399: the fixed 713px copy column left the photo ~250px wide. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .lah-closer-inner { gap: 48px; }
  .lah-closer-content { flex: 0 0 56%; max-width: 56%; }
  /* Keep the pills 3 x 2: at 2 per row the copy column grew to ~770px and the matched
     photo became a tall strip; a smaller flex-basis broke into an uneven 4 + 2 at 1366.
     A fixed 3-column grid plus the opener's 1200-1365 compact pill sizing (12px label,
     28px disc) keeps every label on <=2 lines in a ~180px column. */
  .lah-closer-advantages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .lah-closer-advantages .lah-advantage { gap: 6px; padding: 8px 10px; }
  .lah-closer-advantages .lah-advantage-icon { flex-shrink: 0; width: 28px; height: 28px; font-size: 14px; }
  .lah-closer-advantages .lah-advantage-icon i { font-size: 14px; }
  .lah-closer-advantages .lah-advantage-label { font-size: 12px; line-height: 15px; }
}

@media (max-width: 1199.98px) {
  .lah-closer-inner { flex-direction: column; gap: 40px; }
  .lah-closer-content { flex: 1 1 auto; max-width: none; }
  .lah-closer-img { height: 320px; box-shadow: 8px 8px 0 0 var(--color-lake); }
}
@media (max-width: 767.98px) {
  .lah-closer { padding: 48px 0; }
}

/* ============================================================
   24. Footer — Figma 46046:1410
   ============================================================
   The comp's footer is LILAC, not the husk's navy, so the full-colour logo is
   correct here and the reversed mark is not used.
   ------------------------------------------------------------ */
.lah-footer {
  background-color: var(--color-lilac);
  padding-block: 80px;
}
.lah-footer-top {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
.lah-footer-logo img { width: 395px; max-width: 100%; height: auto; }
.lah-footer-nap {
  display: flex;
  gap: 50px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--color-ice);
  flex: 1 1 500px;
}
.lah-footer-nap-item { display: flex; flex-direction: column; gap: 8px; }
.lah-footer-nap-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  text-transform: uppercase;
  color: var(--color-lake);
}
.lah-footer-nap-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  text-transform: uppercase;
  color: var(--color-ocean);
}
.lah-footer-nap-link {
  display: inline-block;
  min-height: 40px;
  color: var(--color-ocean);
  text-decoration: none;
}
.lah-footer-nap-link:is(:hover, :focus) { color: var(--color-lake); text-decoration: underline; }

.lah-footer-columns {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.lah-footer-col { flex: 1 1 280px; min-width: 0; }
.lah-footer-heading {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  text-transform: uppercase;
  color: var(--color-ocean);
}
.lah-footer-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}
/* Footer links are NOT the inline-in-a-sentence exception, so each one carries a
   full 40px hit area. Bootstrap's 22px line-height plus 9px of block padding
   gets there, and the padding itself separates adjacent targets. This is what
   fixes the 40 tap-target failures the husk footer was shipping. */
.lah-foot-link {
  display: block;
  padding: 9px 0;
  min-height: 40px;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-black);
  text-decoration: none;
}
.lah-foot-link:is(:hover, :focus) { color: var(--color-lake); text-decoration: underline; }

.lah-footer-badges { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.lah-footer-badges img { height: auto; max-width: 100%; }
.lah-footer-social { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.lah-footer-social-link { color: var(--color-ocean); font-size: 24px; }
.lah-footer-social-link:is(:hover, :focus) { color: var(--color-lake); }
.lah-footer-ctas { flex-direction: column; align-items: flex-start; }
.lah-footer-legal {
  margin: 40px 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-ocean);
}

/* Red Barn credit bar */
.lah-rbmg { background-color: var(--color-ocean); padding-block: 12px; }
.lah-rbmg-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.lah-rbmg-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-lilac);
}

/* Figma 46046:1410 is ONE three-column grid: logo over Heating & Cooling,
   Contact Us above Indoor Air Quality, Hours above Resources, divider under the
   NAP. As wrapping flex rows the NAP strip only fit at >=1600 — at a 1440 laptop
   Hours dropped to a second row, and 992-1199 split the link columns 2+1.

   lg-xl (992-1399): the columns are too narrow for three NAP blocks beside the
   logo, so the NAP takes its own row under the logo and each block sits exactly
   over its link column, stepping the NAP type to 18px so the address fits.
   xxl (>=1400): logo and NAP share a row as in the comp. Our address carries the
   street line, which the comp's does not, so the blocks spread edge to edge rather
   than pinning Hours to the third column (that would crush the Visit block). */
@media (min-width: 992px) {
  .lah-footer-top,
  .lah-footer-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 60px;
  }
  .lah-footer-top { row-gap: 32px; }
  .lah-footer-logo { grid-column: 1; }
  .lah-footer-nap {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 60px;
  }
  .lah-footer-nap-item { min-width: 0; }
}
/* 18px until 1600: at a 1440 laptop the side-by-side blocks are ~280px wide, and the
   comp's 20px pushed the ZIP and the "5pm" onto lines of their own. */
@media (min-width: 992px) and (max-width: 1599.98px) {
  .lah-footer-nap-label,
  .lah-footer-nap-value {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body-lg);
  }
}
@media (min-width: 1400px) {
  .lah-footer-nap {
    grid-column: 2 / span 2;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    column-gap: 32px;
  }
}
@media (max-width: 767.98px) {
  .lah-footer { padding-block: 48px; }
  .lah-footer-nap { gap: 24px; }
  .lah-footer-columns { gap: 32px; }
}

/* ============================================================
   25. Intentionally unreferenced — DO NOT SWEEP
   ============================================================
   A dead-class audit will report these as defined-but-unused. They are not
   dead; each is a documented API surface that markup has simply not needed yet:

     .lah-icon / .icon-accent   consumers of the --lah-icon context variable.
                                Any accent icon that must adapt to its band uses
                                these instead of a hardcoded colour.
     .surface-light             the explicit light-band marker. Component cards
                                are registered by their own class names, so this
                                is only needed when a band has no other class.
     .lah-review-*  (6 rules)   the Figma review-card values. Elfsight renders
                                in a shadow root, so external CSS cannot reach it
                                — these are the reference for the dashboard's
                                Custom CSS panel, not live selectors.

   Sub-pages built from page_template.php at Step 8 are expected to use all of
   them. Verified at the Step 6b sweep: zero adco-* rules remain in this sheet,
   and these nine are the only unreferenced selectors.
   ------------------------------------------------------------ */

/* ============================================================
   26. Interaction states (hover) — Figma hover variants
   ============================================================
   Buttons hover through their own Bootstrap variables (see .btn-lilac and
   .btn-gradient above). Cards and pills change only where a pointer can hover,
   so a tap never leaves them stuck. Gradient fills cannot be transitioned, so
   gradient <-> solid swaps crossfade through a ::before layer instead of snapping.
   Kept at the END of the sheet so it follows every base rule it modifies.
   ------------------------------------------------------------ */
.lah-advantage,
.lah-service-card { transition: background-color .25s ease; }
.lah-service-title,
.lah-service-badge,
.lah-plan-icon {
  transition: color .25s ease, background-color .25s ease;
}

/* Crossfade layers for the gradient discs (sit behind the glyph, above the fill). */
.lah-advantage-icon { position: relative; }
.lah-advantage-icon,
.lah-service-badge { isolation: isolate; }
.lah-advantage-icon::before,
.lah-service-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .25s ease;
}
.lah-advantage-icon::before { background-color: var(--color-ocean); }
.lah-service-badge::before { background-image: var(--gradient-summer); }

@media (hover: hover) {
  /* Advantage pill: blue pill (ice-soft keeps the Ocean label at 4.52:1),
     Summer disc -> Ocean disc, glyph stays white (13.57:1). */
  .lah-advantage:hover { background-color: var(--color-ice-soft); }
  /* Closer pills sit on an Ice band that ~matches ice-soft: a white inset ring keeps
     the pill's shape. Inset shadow, so the box never changes size. */
  .lah-closer .lah-advantage:hover { box-shadow: inset 0 0 0 2px var(--color-white); }

  /* Link cards over the assessment photo: same blue as the pill (Ocean label 4.52:1),
     disc crossfades to Ocean, arrow nudges toward the destination. */
  .lah-feature-link:hover { background-color: var(--color-ice-soft); }
  .lah-feature-link:hover .lah-advantage-icon::before { opacity: 1; }
  .lah-feature-link:hover .lah-feature-link-arrow { transform: translateX(4px); }
  .lah-advantage:hover .lah-advantage-icon::before { opacity: 1; }

  /* Plan / financing item: the gradient-filled glyph turns solid Ocean. */
  .lah-plan-item:hover .lah-plan-icon { background: none; color: var(--color-ocean); }

  /* Advantage-v3 cards (About block + .lah-card-lg) hover in section 8: white card,
     Sunbeam inset ring, Lake hard offset shadow, lift. */

  /* Service card: Lilac wash, Lake title (5.71:1), Evening badge -> Summer badge. */
  .lah-service-card:hover { background-color: var(--color-lilac-wash); }
  .lah-service-card:hover .lah-service-title { color: var(--color-lake); }
  .lah-service-card:hover .lah-service-badge { color: var(--color-white); }
  .lah-service-card:hover .lah-service-badge::before { opacity: 1; }
  /* The commercial callout's badge is the same disc outside a .lah-service-card,
     so it never got the Summer hover the other service rollovers have. */
  .lah-commercial:hover .lah-service-badge { color: var(--color-white); }
  .lah-commercial:hover .lah-service-badge::before { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lah-advantage,
  .lah-service-card,
  .lah-service-title,
  .lah-service-badge,
  .lah-plan-icon,
  .lah-advantage-icon::before,
  .lah-service-badge::before,
  .lah-feature-link,
  .lah-feature-link-arrow {
    transition: none;
  }
  .lah-feature-link:hover .lah-feature-link-arrow { transform: none; }
}

/* ============================================================
   27. Hero overlap into the next band
   ============================================================
   The rounded hero card used to end flush on its lilac band, so its bottom
   corners sat on a strip of lilac with the next band starting hard underneath.
   Now the card overlaps the next section: a negative bottom margin lets it hang
   past the band, and the band is a flow-root so that margin shortens the BAND
   (instead of collapsing through it, which would keep the lilac painted behind the
   overlap). The following section gets the same amount back as top padding.
   Phones (<768) keep the full-bleed, square-cornered hero with no overlap.
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  .lah-hero-band { display: flow-root; position: relative; z-index: 1; }
  .lah-hero { margin-bottom: -32px; }
  .lah-hero-band + .lah-about,
  .lah-hero-band + .lah-areas  { padding-top: 80px; }   /* 48 + 32 */
  .lah-hero-band + .lah-opener,
  .lah-hero-band + .lah-page-body { padding-top: 80px; }   /* 48 + 32 */
  .lah-hero-band + .lah-specials  { padding-top: 112px; }  /* 80 + 32 */
}
/* .lah-areas shares .lah-about's 100px (48px below lg) top padding, so it takes the
   same compensation — used where the map sits directly under the hero (/service-area/).
   .lah-specials pads 80px like .lah-opener — it sits under the hero on /specials/. */
@media (min-width: 992px) {
  .lah-hero-band + .lah-about,
  .lah-hero-band + .lah-areas  { padding-top: 132px; }  /* 100 + 32 */
  .lah-hero-band + .lah-opener,
  .lah-hero-band + .lah-specials,
  .lah-hero-band + .lah-page-body { padding-top: 112px; }  /*  80 + 32 */
}
@media (min-width: 1200px) {
  .lah-hero { margin-bottom: -60px; }
  .lah-hero-band + .lah-about,
  .lah-hero-band + .lah-areas  { padding-top: 160px; }  /* 100 + 60 */
  .lah-hero-band + .lah-opener,
  .lah-hero-band + .lah-specials,
  .lah-hero-band + .lah-page-body { padding-top: 140px; }  /*  80 + 60 */
}

/* ============================================================
   28. Service areas at laptop widths
   ============================================================
   Figma draws this block at 1600: a 717px map beside a 688px column holding a
   40px H2. Below that the map stayed at 50% and the column shrank, so long
   headings ("Central Air Conditioning Installation Throughout Our Service Area")
   ran to 5-6 lines and the column grew roughly twice the map's height, leaving the
   map floating beside a wall of type. Values below were measured live, per range:
     1400-1599  map 45%, H2 keeps 40px   -> 3 lines @1440
     1200-1399  map 40%, H2 36px         -> 3 lines @1200
      992-1199  stacked (map <=560px), H2 32px -> 2 lines @1000; side-by-side still
                gave 5 lines with a ~300px map at that width.
   ------------------------------------------------------------ */
@media (min-width: 1400px) and (max-width: 1599.98px) {
  .lah-areas-map { max-width: 45%; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .lah-areas-map { max-width: 40%; }
  .lah-areas-content .lah-h2 { font-size: 2.25rem; line-height: 2.75rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .lah-areas-inner { flex-direction: column; gap: 32px; }
  .lah-areas-map { flex: 1 1 auto; width: 100%; max-width: 560px; }
  .lah-areas-content .lah-h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
}