/* === Red Barn Media Group - Summit Comfort Solutions HVAC === */

/* === CSS Custom Properties === */
:root {
  /* Brand Colors (source: Figma summit-comfort-final, node 44089:667) */
  --color-mountain: #18357d;
  --color-mountain-10: rgba(24, 53, 125, 0.1);
  --color-mountain-15: rgba(24, 53, 125, 0.15);
  --color-mountain-20: rgba(24, 53, 125, 0.2);
  --color-midnight: #000b30;
  --color-fall: #dc5624;
  --color-fall-hover: #e6805a; /* tint: fall mixed ~20% white */
  --color-fall-light: #f6aa1f; /* the LIGHT stop of the brand orange gradients
    (--color-gradient-buttons / -tangerine / -sunset all start here). Promoted to
    a named token because it's now used as a standalone color, not just a
    gradient stop. NOT a named Figma variable — Figma names only Fall #dc5624 —
    so treat this as "the light end of the brand orange", not a new brand color.
    Also the accessible one on dark navy: on --color-mountain, Fall is 2.93:1
    (fails AA for body-size text) where this is 5.80:1. */
  --color-sky: #2988c4;
  --color-sky-hover: #63a8d3; /* tint: sky mixed ~20% white */
  --color-ice: #6ab9ed;
  --color-ghost: #cbebff;
  --color-light: #eeffee;

  /* Gradients — extracted from actual Figma node fills as each is encountered, not guessed */
  --color-gradient-ocean: linear-gradient(
    to top,
    rgba(24, 53, 125, 0.84) 1.923%,
    rgba(162, 219, 246, 0.83) 37.5%,
    rgba(106, 185, 237, 0.84) 79.808%
  ); /* hero background overlay, node 44089:670 */
  --color-gradient-buttons: linear-gradient(
    to right,
    #f6aa1f 9.828%,
    #ee6707 119.1%
  ); /* secondary/phone CTA fill, node 44089:711 */
  --color-gradient-darker-ocean: linear-gradient(
    143.29deg,
    #18357d 19.697%,
    #0475bc 70.267%,
    #6ab9ed 101.75%
  ); /* contact form card fill, node 44089:716 */
  --color-gradient-tangerine: linear-gradient(
    to right,
    #f6aa1f 8.173%,
    #dc5624 92.788%
  ); /* advantage-card icon fill, node 44089:740 */
  --color-gradient-services: linear-gradient(
    104.47deg,
    #18357d 19.697%,
    #0475bc 70.267%,
    #6ab9ed 101.75%
  ); /* services section background, node 44089:750 -- same stops as darker-ocean, different angle */
  --color-gradient-about: linear-gradient(
    108.46deg,
    #18357d 19.697%,
    #0475bc 70.267%,
    #6ab9ed 101.75%
  ); /* about us section background, node 44089:963 -- same stops, different angle */
  --color-gradient-service-areas: linear-gradient(
    119.78deg,
    #18357d 19.697%,
    #0475bc 70.267%,
    #6ab9ed 101.75%
  ); /* service areas section background, node 44089:1042 -- same stops, different angle. Was
        incorrectly using --color-gradient-ocean (the semi-transparent hero PHOTO OVERLAY
        gradient), which washed out to the wrong pale blue with no photo underneath it. */
  --color-gradient-closer: linear-gradient(
    108.87deg,
    #18357d 19.697%,
    #0475bc 70.267%,
    #6ab9ed 101.75%
  ); /* closer section background, node 44089:2581 -- same stops, different angle. Was also
        incorrectly using --color-gradient-ocean, same bug as service-areas. */
  --color-gradient-sunset: linear-gradient(
    to bottom,
    #dc5624 8.654%,
    #f6aa1f 48.077%,
    #dc5624 92.788%
  ); /* about-us advantage-row divider lines, node 44089:982 */
  /* Gradient/Divider (node 44089:960's Vector 4) verified: same 3 stops as
     -about/-closer (#18357d/#0475bc/#6ab9ed), baked directly into the
     scs-divider-*.svg assets as a real SVG linearGradient rather than a
     CSS token -- the divider is a flattened Figma export, not a live
     CSS-driven background, so no --color-gradient-divider var is needed. */
  /* --color-gradient-hero-photo-scrim removed (was here) — .scs-hero-intro.ac
     no longer tints the photo for text contrast; it uses an opaque solid
     panel behind the text instead (.scs-hero-ac-text::before in the
     Sub-page Hero section below). The scrim's left-to-right percentages
     were computed against the full SECTION width while the text column
     actually sat inside Bootstrap's centered, narrower .container — the two
     didn't reliably line up at every viewport, so the photo visibly bled
     through behind the text at some widths. The panel approach ties the
     opaque area directly to the text column's own real box instead, so it
     can't drift. See the "Sub-page: Hero" section for the current pattern. */

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

  /* Neutrals (50/100/500 exact from Figma; 200-400/600-700 interpolated scaffolding) */
  --color-neutral-50: #eef0f5;
  --color-neutral-100: #e4e9f0;
  --color-neutral-200: #dbe0e8;
  --color-neutral-300: #c7cdd8;
  --color-neutral-400: #b8bcc6;
  --color-neutral-500: #a9abb4;
  --color-neutral-600: #8d919a;
  --color-neutral-700: #656870;

  /* Dark Mode (exact from Figma; 03/04/08/12/16/24dp interpolated scaffolding) */
  --color-dark-00dp: #121212;
  --color-dark-01dp: #1e1e1e;
  --color-dark-02dp: #222222;
  --color-dark-03dp: #252525;
  --color-dark-04dp: #272727;
  --color-dark-06dp: #2c2c2c;
  --color-dark-08dp: #2e2e2e;
  --color-dark-12dp: #333333;
  --color-dark-16dp: #353535;
  --color-dark-24dp: #383838;

  /* Typography — FF Basic Gothic Pro (headings/labels/overlines, Adobe kit jdb8apd) + Inter (body, Google Fonts) */
  --font-heading: "ff-basic-gothic-pro", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-regular: 400;
  --font-weight-black: 900;

  /* Layout */
  --hero-height: 600px;
  --hero-padding: 3rem;
  --transition-standard: 0.25s;
  --border-radius-standard: 0.5rem;
  --border-radius-large: 1.25rem;
  --border-radius-card: 0.75rem;
  --box-shadow-dropdown: 0 3rem 3rem rgba(0, 0, 0, 0.175);
  --margin-standard: 1rem;

  /* === Legacy alias bridge ===
     Old donor-named variables still referenced by not-yet-rebuilt markup/CSS.
     Values only — repointed to the real Summit brand palette above, per section
     as each is rebuilt in Step 5, then retired in the Step 6 dead-class sweep. */
  --color-deep-blue: var(--color-mountain);
  --color-navy-blue: var(--color-midnight);
  --color-seafoam: var(--color-ghost);
  --color-seafoam-5: rgba(203, 235, 255, 0.05);
  --color-relaxed-blue: var(--color-sky);
  --color-relaxed-blue-dark: #2180b8;
  --color-relaxed-blue-10: rgba(41, 136, 196, 0.1);
  --color-relaxed-blue-15: rgba(41, 136, 196, 0.15);
  --color-relaxed-blue-20: rgba(41, 136, 196, 0.2);
  --color-sunshine-yellow: var(--color-fall);
  --color-sunshine-yellow-dark: #b8451c;
  --color-sunshine-yellow-15: rgba(220, 86, 36, 0.15);
  --color-sunshine-yellow-20: rgba(220, 86, 36, 0.2);
  --color-tropic-green: var(--color-fall);
  --color-dark-mode: var(--color-dark-01dp);
  --font-cubano: var(--font-heading);
  --font-marine: var(--font-body);
  --font-hobo: var(--font-heading);

  /* Legacy gradient definitions — unchanged literal values (not re-derived from
     the new palette) so existing .bg-gradient-* utility classes keep working
     until each section is rebuilt in Step 5 and swept in Step 6. */
  --color-gradient-dark: linear-gradient(84deg, #222222 0.05%, #1e1e1e 99.95%);
  --color-gradient-dark-2: linear-gradient(98deg, #1e1e1e 0.99%, #222222 99.01%);
  --color-gradient-dark-3: linear-gradient(265deg, #1e1e1e 0.1%, #222222 99.9%);
  --color-gradient-deep-sea: linear-gradient(84deg, #2a99dd 0.05%, #e9f6f6 99.95%);
  --color-gradient-sandy-beach: linear-gradient(84deg, #f89f1a 0.05%, #12a95e 99.95%);
  --color-gradient-yellow-fade-contact: linear-gradient(84deg, #3a2e0e 0.05%, #191919 99.95%);
  --color-gradient-yellow-fade: linear-gradient(
    84deg,
    rgba(248, 159, 26, 0.2) 0.05%,
    rgba(51, 51, 51, 0.2) 99.95%
  );
  --color-gradient-yellow-fade-2: linear-gradient(
    84deg,
    rgba(248, 159, 26, 0.45) 0.05%,
    rgba(51, 51, 51, 0.45) 99.95%
  );
  --color-gradient-blue-fade: linear-gradient(180deg, #121212 0%, rgba(14, 50, 72, 0.5) 100%);
  --color-gradient-blue-fade-reverse: linear-gradient(
    180deg,
    rgba(14, 50, 72, 0.5) 0%,
    #121212 100%
  );
  --color-gradient-green-fade: linear-gradient(180deg, #121212 0%, rgba(7, 67, 37, 0.5) 100%);
  --color-gradient-green-fade-reverse: linear-gradient(
    180deg,
    rgba(7, 67, 37, 0.5) 0%,
    #121212 100%
  );
  --color-gradient-blue: linear-gradient(
    180deg,
    #2a99dd 0%,
    #2473ba 26%,
    #1f4b95 59%,
    #1c337f 84%,
    #1b2a77 100%
  );
  --color-gradient-blue-reverse: linear-gradient(
    180deg,
    #1b2a77 0%,
    #1c337f 16%,
    #1f4b95 41%,
    #2473ba 74%,
    #2a99dd 100%
  );
}

/* === Color-by-parent-surface: link + accent-icon context ===
   Nearest surface wins via CSS custom-property inheritance, so a component is
   never hardcoded to a single background. Three tiers, not a light/dark binary:
   the brand's saturated mid-tones (Fall orange, Sky blue) FAIL AA at 4.5:1 with
   white text (measured 3.88-3.89:1) — only Midnight navy passes on them
   (4.95-4.96:1). Verified via palette-contrast; do not "fix" this back to white. */
:where(body, .bg-seafoam, .bg-seafoam-5, .bg-blue-15, .bg-white, .scs-hero,
       .scs-service-card,
       .scs-opener-advantage-card, .scs-warning-lockup) {
  --scs-link: var(--color-mountain);
  --scs-link-hover: var(--color-midnight);
  --scs-icon: var(--color-mountain);
}
/* .scs-hero belongs in the LIGHT tier despite its name: its gradient is a
   semi-transparent overlay on a pale photo, so it renders light blue and navy
   reads on it. Verified on screen — don't "correct" it by the token name.
   .scs-opener-advantage-card is a WHITE card that sits inside the dark Closer
   section, so it has to re-assert the light tier or anything nested in it
   would inherit the section's white link/icon colour. Nothing in it depends
   on those vars today (its label is explicitly Mountain, its icon is a
   gradient clip) — this is here so that stays true if a link is ever added. */
:where(.bg-yellow, .bg-yellow-20, .bg-green, .bg-blue, .bg-gradient-sandy-beach) {
  --scs-link: var(--color-midnight);
  --scs-link-hover: var(--color-navy-blue);
  --scs-icon: var(--color-midnight);
}
/* The four Summit blue sections below (.scs-services / .scs-about /
   .scs-service-areas / .scs-closer) all share the SAME gradient stops
   (#18357d -> #0475bc -> #6ab9ed) and differ only in angle. They were never
   registered here, so their links fell through to body's --scs-link, which is
   --color-mountain — the EXACT colour of the gradient's first stop. A link in
   the Closer's closing paragraph was therefore navy on navy at a measured
   contrast ratio of 1.0, i.e. genuinely invisible, on 7 pages. */
:where(.bg-deep-blue, .bg-navy, .bg-dark, .bg-gray, .bg-black,
       .bg-gradient-dark, .bg-gradient-dark-2, .bg-gradient-dark-3,
       .bg-gradient-blue, .bg-gradient-blue-reverse,
       .bg-gradient-blue-fade, .bg-gradient-blue-fade-reverse,
       .bg-gradient-green-fade, .bg-gradient-green-fade-reverse,
       .scs-mega-dropdown-row, .scs-mega-dropdown-group, .scs-contact-card,
       .scs-services, .scs-about, .scs-service-areas, .scs-closer,
       .scs-form-card) {
  --scs-link: var(--color-white);
  --scs-link-hover: var(--color-neutral-100);
  --scs-icon: var(--color-white);
}
a:where(:not(.btn)) {
  color: var(--scs-link, var(--color-mountain));
}
a:where(:not(.btn)):where(:hover, :focus-visible) {
  color: var(--scs-link-hover, var(--color-midnight));
}
/* Inline links in those four sections need an underline, and this is NOT
   cosmetic: their body copy is already white/Ghost, so once the surface makes
   links white too, colour alone no longer marks them as links — and the global
   `a { text-decoration: none }` further down this file had stripped the
   underline Bootstrap gives them. Colour must never be the only cue (WCAG
   1.4.1). Scoped to `p` so the Service Areas CITY links are untouched: those
   are list items with their own deliberate white-label + tinted-pin treatment
   and are not prose. */
:where(.scs-services, .scs-about, .scs-service-areas, .scs-closer) p a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tap-target floor — WCAG-safe hit area for interactive elements */
.tap-target {
  min-height: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* === Base Styles === */
html,
body {
  width: 100%;
  height: 100%;
}

body {
  color: var(--color-navy-blue);
  font-family: var(--font-marine);
  font-weight: var(--font-weight-regular);
  background-color: var(--color-seafoam);
}

/* === Typography === */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--font-cubano);
  color: var(--color-deep-blue);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
}

.cubano {
  font-family: var(--font-cubano);
}
.hobo {
  font-family: var(--font-hobo);
}
.black {
  font-weight: var(--font-weight-black);
}
.bold {
  font-weight: var(--font-weight-bold);
}
.medium {
  font-weight: var(--font-weight-medium);
}
.regular {
  font-weight: var(--font-weight-regular);
}

.marine {
  font-family: var(--font-marine);
}
p,
ul li,
ol li,
table {
  font-size: 0.85rem;
  font-weight: var(--font-weight-regular);
}
.fs-7 {
  font-size: 0.85rem;
}
.fs-8 {
  font-size: 0.75rem;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 48;
  font-size: inherit;
  vertical-align: middle;
  position: relative;
}
.material-symbols-outlined.FILL {
  font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 48;
}
/* === Homepage Hero (Figma node 44089:670) === */
.scs-hero {
  background: var(--color-gradient-ocean), url('../img/scs-hero-bg.webp') center top / cover no-repeat;
  padding-top: calc(3rem + 136px); /* 136px clears the fixed .menu-container; padding (not margin) so it can't collapse */
}
.scs-hero-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-mountain);
  text-transform: uppercase;
  font-size: clamp(2rem, 1.3rem + 3vw, 4rem);
  line-height: 1.1;
}
.scs-hero-subtitle {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-mountain);
  text-transform: uppercase;
  font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
  margin-bottom: 1.5rem;
}
.scs-hero-brand-logo {
  width: auto;
}
.img-fluid.scs-hero-equipment {
  width: 100%;
  max-width: 892px;
  margin-bottom: 0;
}
.btn.scs-btn-mountain,
.btn.scs-btn-gradient {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  text-transform: uppercase;
  min-height: 40px;
  margin-bottom: 0;
  transition: background-color 0.35s ease, background 0.35s ease, color 0.35s ease;
}
.btn.scs-btn-mountain {
  background: var(--color-mountain);
  color: var(--color-white);
}
.btn.scs-btn-mountain:hover,
.btn.scs-btn-mountain:focus-visible {
  /* Figma hover spec (node 26001:664, Button/Primary/Hover): Sky bg + white
     text. NOTE: white on Sky measures 3.88:1, below the 4.5:1 AA floor for
     this text size (14px bold) — flagged to Brendan, white confirmed as
     wanted anyway. Same on .scs-btn-ice and .scs-btn-gradient below. */
  background: var(--color-sky);
  color: var(--color-white);
}
.btn.scs-btn-gradient {
  background: var(--color-gradient-buttons);
  color: var(--color-mountain);
  position: relative;
  z-index: 0;
  /* Kills the square-cornered tabs that showed at the left and right edges of
     the orange buttons. Cause: Bootstrap's .btn ships `border: 2px solid
     transparent`, and a GRADIENT background painted under a transparent border
     does not get clipped to the corner radius the way a flat colour does — so
     the border strip rendered as an unrounded rectangle poking out past the
     rounded button. Only the gradient buttons showed it; .scs-btn-mountain and
     .scs-btn-ice are flat colours and are unaffected.

     The padding adds back exactly what the border contributed, so the layout
     box and the painted area are both unchanged — these buttons still line up
     with the mountain/ice buttons beside them.

     This also fixes the hover state: ::before below is inset from the PADDING
     box, so with a 2px border it stopped 2px short and left a gradient rim
     around the solid Fall hover fill. With no border the two boxes coincide. */
  border: 0;
  padding: calc(0.75rem + 2px) calc(1rem + 2px);
}
.btn.scs-btn-gradient::before {
  /* Figma hover spec (node 26001:664, Phone Button/Secondary/Hover): solid
     Fall bg (not the default gradient) + white text. White on Fall measures
     3.89:1, below the 4.5:1 AA floor — flagged to Brendan, white confirmed
     as wanted anyway.
     `background-image` (a gradient counts) is NOT a smoothly-animatable
     CSS property — confirmed empirically, even between two gradients of
     matching structure, the browser just snaps at the midpoint of the
     transition. Faded in via a separate layer with `opacity`, which IS
     animatable, instead. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--color-fall);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.btn.scs-btn-gradient:hover,
.btn.scs-btn-gradient:focus-visible {
  color: var(--color-white);
}
.btn.scs-btn-gradient:hover::before,
.btn.scs-btn-gradient:focus-visible::before {
  opacity: 1;
}

/* === Opener (Figma node 44089:714) === */
.scs-opener-wrap {
  background: var(--color-ghost);
}
.scs-opener {
  position: relative;
  z-index: 1;
}
/* Mountain + divider swoosh baked into one exported graphic (real Figma export,
   not reconstructed) so both pieces scale together at any viewport width —
   two separately-positioned pieces couldn't hold a consistent gap across screen sizes. */
.scs-opener-mountain-divider {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -23.25%;
  position: relative;
  z-index: 0;
  pointer-events: none;
}
/* Sub-page: Process section divider — reuses the SAME PNG asset as
   .scs-opener-mountain-divider above (img/scs-mountain-divider.png — ONE
   shared file, deliberately: it used to be duplicated as
   scs-process-mountain-divider.png, and the duplicate was the UNCROPPED
   578px export while the homepage copy had been cropped to 577. That extra
   row is fully transparent (alpha 0), so it let the page background through
   as a hairline seam under the mountain on every sub-page. Pixel-identical
   otherwise. **Invariant: this asset's bottom row must be opaque.** Any
   re-export from Figma arrives 578px tall with a transparent tail — crop it
   to 577 and check the alpha before dropping it in, and keep it as one
   shared file so the two usages can never drift again.)
   It is still its OWN class: -23.25% only makes sense on the homepage Opener,
   where the trust-badge row was sized with clearance for the mountain to
   bleed up behind it. This sits between the Form section and the Process
   section's card grid, which has no such clearance built in, so it's placed
   in normal flow (no negative margin) to avoid overlapping either section's
   content. The image's own top rows are transparent (blends into whatever
   light section precedes it) and its bottom rows are already a solid dark
   blue baked into the asset, so it flows straight into .scs-services below
   with no extra positioning needed. */
.scs-process-divider {
  display: block;
  width: 100%;
  height: auto;
  margin-top: max(-30%, -420px); /* pulls it up behind the Form section's card far enough that
    the PEAK clears the top of the card and pokes out above it, matching how the
    homepage's .scs-opener-mountain-divider rises behind the trust badges
    (Brendan: "we do the same thing on the homepage nicely"). Percentage, not px,
    so it resolves against the containing block's WIDTH and therefore holds the
    same mountain-to-card proportion at every viewport width — the same
    scale-invariant technique as .scs-opener-mountain-divider. Pairs with
    .scs-form-card's own margin-top below, which opens the gap this peak rises
    into; the two numbers are tuned together, so changing one alone will either
    bury the peak behind the card or collide it with the buttons above.
    .scs-form-card needs position:relative;z-index:1 (below) so it still paints
    above this bleed instead of getting covered by it.

    CAPPED at -420px (2026-09-02). A bare -30% resolves against WIDTH, so the
    graphic climbed higher the wider the viewport got: -432px at 1440, -540px at
    1800, more beyond. That was harmless on air-conditioning/installation.php,
    where the only thing above it is that page's .scs-form-card (which carries
    its own z-index guard) — but this divider is on 41 generated pages, and on
    those it climbed straight PAST the form section into the CARD GRID two
    sections up. Because the graphic carries an opaque seafoam backdrop at 0.85
    opacity, it washed the lower half of every card in that row out to
    near-invisible grey. Reported by Brendan on /financing and /comfort-club;
    reproduced at 1800px and invisible at 1440px — the same "fine on a laptop,
    broken on a big monitor" class this project keeps hitting.

    A z-index guard on the previous sibling does NOT solve it: the graphic can
    reach two or three sections up, so there is no single element to protect.
    Capping is the honest fix, and -420px is not arbitrary — Bootstrap's
    .container stops growing at 1320px (xxl, >=1400 viewport), so past that
    width the card geometry this margin was tuned against is FIXED. Percentage
    is correct below that point and a constant is correct above it, which is
    exactly what max() expresses. */
  position: relative;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85; /* Brendan: "make it a little bit see through". */
  background-color: var(--color-seafoam); /* NOT decoration — this is what makes
    the opacity above predictable. Without an explicit backdrop the graphic
    composites against whatever happens to sit behind it, which changes partway
    down (the section above overlaps its top via the negative margin, the body
    background is behind the rest), so the SAME pixel row would resolve to two
    different colors and the bottom edge would stop matching the gradient below
    it. Painting seafoam behind the whole image makes every row composite
    against one known color, which is what lets .scs-services.scs-process-section
    below be matched to the image's real rendered bottom edge. */
  /* REVERTED a mask-fade attempt here (Brendan: "looks like crap") — was
     shipped without ever seeing a real render (no browser access this
     session, flagged after every change but kept guessing anyway — that
     was the actual mistake). Back to a plain image. Do not touch this again
     without an actual screenshot of the current state in hand first. */
}

/* .scs-process-section: overrides .scs-services' shared diagonal background
   (104.47deg) with a purely horizontal (90deg) one using the SAME 3 brand
   stops. The diagonal gradient's color at its own top edge shifts depending
   on the section's rendered HEIGHT (varies a lot here — 5 tabs of variable
   step-content length) which is why it drifted out of sync with
   .scs-process-divider's flat bottom edge, worst on the right side (Brendan:
   "the gradient isnt lining up on the right side theres a break"). A 90deg
   gradient's color at any y is identical top-to-bottom, so it can't drift
   with height — verified the divider PNG's own bottom-edge pixels trace
   this same left-navy-to-right-ice ramp already, so this is a real color
   match, not just visually close. Scoped to .scs-process-section so the
   shared .scs-services (used on the homepage, actively being tuned
   elsewhere) is untouched. */
.scs-services.scs-process-section {
  /* These stops are MEASURED, not picked: sampled from the bottom row of
     scs-mountain-divider.png across its width, then composited through
     .scs-process-divider's own `opacity: .85` over seafoam, so this gradient
     reproduces the image's real RENDERED bottom edge and the two meet with no
     visible break. They are raw rgb() on purpose — they are composite results,
     and no :root token equals them; a brand token here is what caused the
     previous mismatch (it ran --color-mountain -> --color-ice, while the
     image's edge actually runs rgb(51,80,144) -> rgb(74,161,217), wrong at
     BOTH ends, worst on the right). The 20%->80% span is linear to within
     ~1/255, so four stops reproduce the full 11-sample ramp.
     **If the opacity, the backdrop color, or the PNG changes, re-sample and
     regenerate these — they are downstream of all three.** */
  background: linear-gradient(
    90deg,
    rgb(51, 80, 144) 0%,
    rgb(51, 80, 144) 20%,
    rgb(35, 132, 196) 80%,
    rgb(74, 161, 217) 100%
  );
}
.scs-opener .container {
  position: relative;
  z-index: 1;
}
.scs-contact-card {
  background: var(--color-gradient-darker-ocean);
  border: 3px solid var(--color-fall);
  border-radius: 1.25rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  margin-top: -6rem; /* card visibly overlaps/covers the bottom of the equipment photo, matching Figma */
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .scs-contact-card {
    margin-top: 0;
  }
}
.scs-contact-card-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-transform: uppercase;
  font-size: 2rem;
  margin-bottom: 1.25rem;
}
.scs-contact-form-textarea {
  height: 100%;
  min-height: 108px;
  resize: none;
}
@media (min-width: 992px) {
  .scs-contact-form-row {
    align-items: stretch;
  }
}
.scs-opener-overline {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-black);
  color: var(--color-mountain);
  text-transform: uppercase;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.scs-opener-overline-rule {
  display: inline-block;
  width: 24px;
  height: 2px;
  background: currentColor;
}
.scs-section-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-mountain);
  text-transform: uppercase;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  margin-bottom: 1rem;
}
.scs-opener-advantage-card {
  background: var(--color-white);
  border-radius: 0.5rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  padding: 1.25rem 1rem;
  height: 100%;
  text-align: center;
  transition: background-color 0.35s ease;
}
.scs-opener-advantage-icon {
  display: block;
  position: relative;
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
  background: var(--color-gradient-tangerine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Icon hover crossfade — `background-image` (the gradient-clip trick) can't
   animate smoothly no matter what it changes to, so a second glyph is
   layered on top via ::after (FA's own glyph already occupies ::before)
   and cross-faded in with `opacity`, which IS animatable. One rule per
   icon actually used on these cards. */
.scs-opener-advantage-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  color: var(--color-white);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.scs-opener-advantage-card:hover .scs-opener-advantage-icon::after {
  opacity: 1;
}
.scs-opener-advantage-icon.fa-tools::after { content: "\f7d9"; }
.scs-opener-advantage-icon.fa-id-card::after { content: "\f2c2"; }
.scs-opener-advantage-icon.fa-shield-halved::after { content: "\f3ed"; }
.scs-opener-advantage-icon.fa-flag::after { content: "\f024"; }
.scs-opener-advantage-icon.fa-house-heart::after { content: "\f4c9"; }
.scs-opener-advantage-icon.fa-hand-heart::after { content: "\f4bc"; }
.scs-opener-advantage-card p {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-mountain);
  text-transform: uppercase;
  font-size: 0.875rem;
  margin-bottom: 0;
  transition: color 0.35s ease;
}
/* Hover spec: Figma node 26001:874 ("Advantage" component) */
.scs-opener-advantage-card:hover {
  background: var(--color-sky);
}
.scs-opener-advantage-card:hover p {
  color: var(--color-white);
}

/* === Divider Swoosh (real Figma shape, nodes 44089:960/1018/2578) ===
   Used at 3 section boundaries: Financing->About Us, Maintenance->Rebates,
   FAQs->Closer (Opener->Services keeps its own separate combined
   mountain+divider graphic, .scs-opener-mountain-divider, untouched).

   This is the "css fill + png" pattern: color is the section's own real
   CSS background (unchanged, untouched), shape comes from a real
   Figma-exported mask asset (scs-divider-wave-mask.svg, the "Vector 4"
   fill shape, white-on-transparent, drawn with an effectively-infinite
   solid tail below it -- see below). The ribbon (scs-divider-ribbon.svg)
   is a separate transparent overlay on top, matching Figma's own
   Vector + Vector4 layering.

   Two things this is NOT, and why:
   - NOT an absolutely-positioned overlay pulled up from the "after"
     section with no other change -- that only ever ate into space
     already occupied by the PRECEDING section's real content, since
     absolute positioning/negative margin don't add real layout space.
   - NOT a separately-colored small element approximating the section's
     gradient -- a CSS gradient's stops are positioned relative to
     WHICHEVER element renders them, so the same `var(--color-gradient-
     about)` painted on a small standalone element and on the real,
     much-taller section renders as two visibly different colors with a
     hard seam where they meet, no matter how the small element's colors
     are tuned.

   The only way to guarantee zero seam is for the SAME element to render
   the gradient continuously across both the wave and the real section
   body -- i.e. mask the real section itself, not a copy. So:
   1. A real, empty flow-spacer (.scs-divider-spacer) is inserted between
      the two sections, in the PRECEDING section's solid color (solid
      only -- Financing/Maintenance/FAQs are never gradients, so no seam
      risk here), tall enough to hold the wave + both gap amounts.
   2. The "after" section (.scs-about/.scs-rebates/.scs-closer) gets
      `position:relative; z-index:1` (so it -- and the ribbon nested
      inside it -- reliably paint above the spacer and the preceding
      section regardless of DOM order) and `margin-top: -(waveH+gap)vw`,
      pulling its own real box (same background, same box, one
      continuous gradient) up to overlap the tail end of the spacer.
   3. `mask-image` is applied DIRECTLY to that same section element, so
      only its own top ~8vw (the wave shape) is cut into the curve --
      the mask's solid tail (drawn 100000 units long, i.e. thousands of
      vw, far past any real section's height at any breakpoint) keeps
      the entire rest of the section, including its real heading/photo/
      content, fully visible. This is safe specifically because that
      tail is so long it can never "run out" before the section ends.
   Heights/margins are Figma's real measured gaps (content to divider
   frame edge, converted to vw at the 1600px design canvas) MINUS each
   section's own existing bootstrap py-5 (48px = 3vw at that design
   width), since the spacer/margin sit ON TOP OF that existing padding,
   not instead of it: Financing 80px/Maintenance ~70px/FAQs 80px above;
   About/Closer 100px/Rebates 80px below, each minus 48px. */
.scs-divider-spacer {
  position: relative; /* containing block for the ribbon -- see .scs-divider-ribbon,
    which MUST live here, not inside .scs-about/.scs-rebates/.scs-closer: a
    CSS mask on a parent clips its ENTIRE rendered subtree, not just its
    own background, so a ribbon nested inside a masked section would
    itself get clipped down to whatever sliver survives the wave cutout
    -- confirmed by exactly that symptom (~85% of the ribbon disappearing,
    only a thin line surviving) after nesting it there. */
  display: block;
  width: 100%;
}
.scs-divider-financing-about {
  background: var(--color-ice);
  height: 13.3125vw; /* extra_before 2 + waveH 8.0625 + extra_after 3.25 */
}
.scs-divider-maintenance-rebates {
  background: var(--color-ghost);
  height: 11.4375vw; /* extra_before 1.375 + waveH 8.0625 + extra_after 2 */
}
.scs-divider-faqs-closer {
  background: var(--color-ghost);
  height: 13.3125vw; /* extra_before 2 + waveH 8.0625 + extra_after 3.25 */
}
.scs-divider-financing-about .scs-divider-ribbon {
  top: 2vw; /* extra_before -- lands exactly where .scs-about's own
    extended (margin-shifted) top begins */
}
.scs-divider-maintenance-rebates .scs-divider-ribbon {
  top: 1.375vw; /* extra_before */
}
.scs-divider-faqs-closer .scs-divider-ribbon {
  top: 2vw; /* extra_before */
}
/* Every rule below is scoped to `.scs-divider-spacer + X`, i.e. it only
   engages when a real divider spacer is the section's immediately-preceding
   sibling. This is load-bearing, not tidiness: .scs-about/.scs-rebates/
   .scs-closer are UNIVERSAL BLOCKS reused on sub-pages, but the spacer that
   supplies the flow space this system's negative margin-top consumes is
   only ever emitted on the homepage. Unscoped, a sub-page using the block
   got the -11.3125vw pull-up with nothing to absorb it, so the section rode
   up over the preceding section and sliced its content in half (seen for
   real on air-conditioning/installation.php -- the bottom row of
   "Before & After Installation Support" cards was cut through the middle).
   The sibling selector makes the divider self-activating: present where the
   boundary is actually built, inert everywhere else, with no markup change
   and nothing for a sub-page author to remember. */
.scs-divider-spacer + .scs-about,
.scs-divider-spacer + .scs-rebates,
.scs-divider-spacer + .scs-closer {
  position: relative;
  z-index: 1;
  mask-image: url(/img/scs-divider-wave-mask.svg);
  -webkit-mask-image: url(/img/scs-divider-wave-mask.svg);
  mask-size: 100% 6250vw; /* mask's own 100000-unit height at 0.0625vw/unit */
  -webkit-mask-size: 100% 6250vw;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: top left;
  -webkit-mask-position: top left;
}
.scs-divider-spacer + .scs-about,
.scs-divider-spacer + .scs-closer {
  margin-top: -11.3125vw; /* waveH 8.0625 + extra_after 3.25 */
  padding-top: calc(3rem + 11.3125vw) !important; /* cancels the margin's
    shift for CONTENT: margin moves the whole box (including content) up
    so the background can reveal the wave above the section's natural
    position, but that would also drag the real heading/photo up with it
    -- adding back the same amount as padding-top pushes content down by
    that much again (landing at its original, unshifted position), while
    the background (which paints under padding by default) still covers
    the full taller box, so the reveal above the natural top is
    unaffected. `!important` is required (not stylistic) here: Bootstrap
    5.3 compiles ALL spacing utilities with `!important` (confirmed in
    the served bootstrap.min.css), so `py-5`'s own `padding-top:3rem
    !important` cannot be beaten by specificity or source order alone --
    only another `!important` declaration can win. calc(3rem + Nvw), not
    a bare Nvw, so this still keeps (rather than replaces) py-5's own
    3rem contribution. */
}
.scs-divider-spacer + .scs-rebates {
  margin-top: -10.0625vw; /* waveH 8.0625 + extra_after 2 */
  padding-top: calc(3rem + 10.0625vw) !important; /* see .scs-about/.scs-closer comment above */
}
.scs-divider-ribbon {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2; /* the "after" section (.scs-about etc) sits later in DOM
    with its own explicit z-index:1, so without an explicit z-index here
    higher than that, it would paint OVER this ribbon despite the ribbon
    living earlier in the spacer -- explicit z-index wins over DOM order
    regardless of source position. */
}

/* === Services (Figma node 44089:750) === */
.scs-services {
  background: var(--color-gradient-services);
}
.scs-services .scs-opener-overline,
.scs-services-intro {
  color: var(--color-white);
}
.scs-services .scs-section-title {
  color: var(--color-white);
}
.scs-service-tab {
  background: transparent;
  border: 3px solid transparent;
  border-radius: 0.75rem;
  color: var(--color-ice);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  font-size: 1.25rem;
  padding: 0.75rem 1rem;
  min-height: 40px;
  width: 100%;
  text-align: left;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
/* These tabs are Bootstrap `.nav-link`s and we never authored a hover state, so
   Bootstrap's own `.nav-link:hover { color: var(--bs-nav-link-hover-color) }` was
   applying — that variable is #0a58ca, Bootstrap's default link BLUE, landing on
   this section's blue gradient at 1.21:1 (the label all but vanished on hover).
   This overrides it with the site's own language: same treatment as `.active` but
   without the orange border, which stays reserved for "this one is selected".
   Scoped `:not(.active)` so hovering the selected tab never steals its orange
   border, and (0,3,0) so it beats Bootstrap's `.nav-link:hover` at (0,2,0). */
.scs-service-tab:not(.active):hover,
.scs-service-tab:not(.active):focus-visible {
  background-color: rgba(106, 185, 237, 0.12);
  border-color: rgba(106, 185, 237, 0.55);
  color: var(--color-white); /* 7.80:1 on the tab column's background */
}
.scs-service-tab:not(.active):hover .fa-solid,
.scs-service-tab:not(.active):focus-visible .fa-solid {
  color: var(--color-white);
}
.scs-service-tab .fa-solid {
  color: var(--color-ice);
  font-size: 1.125rem;
}
.scs-service-tab.active {
  background: rgba(106, 185, 237, 0.2);
  border-color: var(--color-fall);
  color: var(--color-white);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.scs-service-tab.active .fa-solid {
  color: var(--color-white);
  font-size: 1.5rem;
}
.scs-service-card {
  background: var(--color-ghost);
  border-radius: 1.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.scs-service-image {
  width: 100%;
  height: 239px;
  object-fit: cover;
}
.scs-service-card-body {
  padding: 1.5rem 2.5rem;
}
.scs-service-card-body h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-mountain);
  text-transform: uppercase;
  font-size: 2rem;
  margin-bottom: 0.75rem;
}
.scs-service-card-body > p {
  color: var(--color-mountain);
}
.scs-service-card-body h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-mountain);
  text-transform: uppercase;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
.scs-service-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.25rem;
}
.scs-service-list li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}
/* WARNING-SIGNS list. Nine generated pages put two identical .scs-why-card
   grids back to back — "Why Choose Us" immediately followed by "Common Warning
   Signs" — which read as one long undifferentiated slab of cards. The second
   one is now this list: an EXISTING component (.scs-service-list, used by the
   home-page service cards), so no new design was invented, and no card chrome
   makes it a genuinely different rhythm from the grid above.

   Two columns via CSS `columns`, NOT a hand split into two column divs: the
   generator prunes unused ITEM repeaters, so the item count varies per page
   (6, 8 and 11 all occur) and any fixed half/half split would go lopsided.
   `break-inside: avoid` keeps a single sign from being torn across columns.

   The section keeps its plain `py-5` and gets NO background band. Adding
   `bg-seafoam` here would be the obvious way to separate it from the grid
   above — but the section that FOLLOWS it is `.scs-form-section ... bg-seafoam`,
   and the two would merge into one continuous band with no visible boundary. */
@media (min-width: 992px) {
  .scs-warning-list {
    columns: 2;
    column-gap: 3rem;
  }
  .scs-warning-list li {
    break-inside: avoid;
  }
}

/* WARNING-SIGNS lockup. Brendan: the list should not just sit loose on the
   coloured band — it needs a card or a clear lockup.

   ONE panel around the whole list, deliberately NOT a card per item. The
   section directly above these is a six-card `.scs-why-card` grid, and giving
   each warning sign its own card would recreate the exact "two identical card
   grids back to back" problem this list was built to solve (2026-09-02 x9).
   A single panel gives the list a clear container while staying visually
   distinct from the grid above it.

   Same surface treatment as .scs-why-card — white, 0.75rem radius, the same
   soft shadow — so it reads as part of the existing card language rather than
   a new one. It joins the light surface tier so links and icons inside it
   resolve against white rather than inheriting the section's colour. */
.scs-warning-lockup {
  background: var(--color-white);
  border-radius: 0.75rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  padding: 1.75rem 1.5rem 1.25rem;
}
@media (min-width: 768px) {
  .scs-warning-lockup { padding: 2.25rem 2.5rem 1.75rem; }
}

/* fa-triangle-exclamation is here for the WARNING-SIGNS sections, which were
   re-laid from a second .scs-why-card grid onto this list so that nine pages
   stop showing two identical card grids back to back. Same treatment as the
   check, different glyph. */
.scs-service-list .fa-circle-check,
.scs-service-list .fa-triangle-exclamation {
  color: var(--color-fall);
  font-size: 1.25rem;
  margin-top: 0.15rem;
  flex-shrink: 0; /* the glyph must not squash when the copy wraps to 3+ lines */
}
.scs-service-list strong {
  color: var(--color-fall);
}
.scs-service-list span {
  color: var(--color-mountain);
}

/* === Brands (Figma node 44089:769) === */
.scs-brands {
  background: var(--color-ice);
}
.scs-brands .scs-section-title {
  color: var(--color-mountain);
}
/* Brand logos sit on ONE line from lg up. They wrapped because the five run
   1119px of artwork plus 192px of column-gap = 1311px against a 1140px
   container at xl.

   Capping the HEIGHT is what does the work — the logos have wildly different
   aspect ratios (Honeywell is 254x45, Mitsubishi 179x72), so a height cap both
   fits them and evens out their optical weight. max-width additionally reins in
   Honeywell, which is short and wide enough to dominate the row at any height
   that suits the others. The gap tightens with it, since a smaller row needs
   less separation to read as five distinct marks.

   Sizes are derived, not guessed: at max-height 48 the five measure
   254+165+119+159+217 = 914px, plus 4 x 40px gap = 1074 <= 1140 (xl). At lg the
   container is 960, so max-height drops to 40 and the gap to 24px:
   776 + 96 = 872 <= 960. Below lg they wrap as before, which is correct on a
   phone. If a sixth brand is ever added, re-derive these two numbers. */
.scs-brands-logo {
  width: auto;
  max-width: 100%;
}
@media (min-width: 992px) {
  .scs-brands-logo { max-height: 40px; max-width: 230px; }
  .scs-brands-row { column-gap: 1.5rem !important; flex-wrap: nowrap !important; }
}
@media (min-width: 1200px) {
  .scs-brands-logo { max-height: 48px; }
  .scs-brands-row { column-gap: 2.5rem !important; }
}

/* The callout restores what the heading gave up. This section used to read
   "Brands We Install & Service"; narrowing it to installs alone drops the
   service scope, so it is stated plainly directly under the logos.

   White, NOT Ghost. This section's background is Ice, and x23 established that a
   light-blue panel on a light-blue band stops reading as a panel at all — the
   same reason .scs-financing-advantage was moved off Ghost. These three values
   match .scs-why-card / .scs-warning-lockup exactly so it reads as the existing
   card language rather than a new component.

   The icon colour is set explicitly because .scs-brands is not registered in any
   surface tier, so --scs-icon would otherwise fall through to the body default.
   The icon is aria-hidden and duplicated by the adjacent text, so it carries no
   contrast burden (same reasoning as the Service Areas pin tint). */
.scs-brands-callout {
  background: var(--color-white);
  border-radius: 0.75rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  max-width: 46rem;
}
.scs-brands-callout p {
  color: var(--color-midnight);
}
.scs-brands-callout strong {
  color: var(--color-mountain);
}
.scs-brands-callout i {
  color: var(--color-fall);
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* === Customer Reviews (Figma node 44089:898) === */
.scs-reviews {
  background: var(--color-ghost);
}
.scs-reviews-widget:empty::before {
  content: 'Reviews widget pending';
  display: block;
  color: var(--color-neutral-500);
  font-style: italic;
  padding: 2rem;
}
.btn.scs-btn-ice {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  text-transform: uppercase;
  min-height: 40px;
  margin-bottom: 0;
  background: var(--color-ice);
  color: var(--color-mountain);
  transition: background-color 0.35s ease, color 0.35s ease;
}
.btn.scs-btn-ice:hover,
.btn.scs-btn-ice:focus-visible {
  /* Figma hover spec (node 26001:664, Button/Secondary/Hover): Sky bg (was
     already correct) + white text. White on Sky measures 3.88:1, below the
     4.5:1 AA floor — flagged to Brendan, white confirmed as wanted anyway. */
  background: var(--color-sky);
  color: var(--color-white);
}

/* === Financing (Figma node 44089:937) === */
.scs-financing {
  background: var(--color-ice);
}
.scs-financing .scs-opener-overline {
  color: var(--color-mountain);
}
.scs-financing-image {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}
@media (min-width: 992px) {
  .scs-financing-image {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
  }
}
.scs-financing-card {
  background: var(--color-neutral-50);
  border-radius: 0.75rem;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  padding: 1.25rem 1.5rem;
}
.scs-financing-logo {
  max-width: 230px;
  width: 100%;
  height: auto;
}
.scs-financing-advantage {
  /* White, was rgba(203,235,255,0.8) — Ghost at 80%. These cards land on THREE
     different surfaces across the site: the Ice band of the Financing block,
     the plain body background, and `bg-seafoam` sections. bg-seafoam IS Ghost
     (#CBEBFF), so on those the card was the same colour as the section behind
     it and only its orange border made it a card at all.

     White rather than a per-surface override, because that is already the
     card language here — .scs-why-card and .scs-opener-advantage-card are both
     white — and it reads correctly on all three surfaces instead of being
     tuned for one. The orange border and hover treatment are unchanged. */
  background: var(--color-white);
  border: 3px solid var(--color-fall);
  border-radius: 0.75rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  padding: 1.1rem 1.25rem;
  height: 100%;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.scs-financing-advantage .fa-solid {
  color: var(--color-mountain);
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
  transition: color 0.35s ease;
}
.scs-financing-advantage h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-mountain);
  text-transform: uppercase;
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
  transition: color 0.35s ease;
}
.scs-financing-advantage p {
  font-size: 0.75rem;
  color: var(--color-dark-02dp);
  margin-bottom: 0;
  transition: color 0.35s ease;
}
/* Hover spec: Figma node 26001:874 ("AdvantageV" component) */
.scs-financing-advantage:hover {
  background: var(--color-sky);
  border-color: var(--color-mountain);
}
.scs-financing-advantage:hover .fa-solid,
.scs-financing-advantage:hover h3,
.scs-financing-advantage:hover p {
  color: var(--color-white);
}

/* === About Us (Figma node 44089:963) === */
.scs-about {
  background: var(--color-gradient-about);
}
.scs-about .scs-opener-overline {
  color: var(--color-ghost);
}
.scs-about-image {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.scs-about-advantage {
  position: relative;
  padding: 1.1rem 1.25rem;
  text-align: left;
}
.scs-about-advantage::after {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  right: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--color-gradient-sunset);
}
.scs-about-advantage:last-child::after {
  display: none;
}
.scs-about-advantage .fa-solid {
  color: var(--color-white);
  font-size: 2.25rem;
  display: block;
  margin-bottom: 0.5rem;
}
.scs-about-advantage h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  text-transform: uppercase;
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}
.scs-about-advantage p {
  font-size: 0.75rem;
  color: var(--color-white);
  margin-bottom: 0;
}

/* === Maintenance (Figma node 44089:1000) === */
.scs-maintenance {
  background: var(--color-ghost);
  position: relative;
}
.scs-maintenance-mountain-bg {
  position: absolute;
  top: 2rem;
  left: 15.5%;
  width: 67.85%;
  height: auto;
  pointer-events: none;
  z-index: 0;
}
.scs-maintenance .container {
  position: relative;
  z-index: 1;
}
.scs-maintenance-wrapper {
  background: var(--color-ice);
  border: 3px solid var(--color-fall);
  border-radius: 1rem;
}
.scs-maintenance-wrapper h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-mountain);
  text-transform: uppercase;
  font-size: 1.5rem;
}
.scs-maintenance-card {
  background: var(--color-white);
  border-radius: 1.25rem;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  padding: 1rem 0.625rem;
  height: 100%;
  transition: background-color 0.35s ease;
}
.scs-maintenance-card .fa-solid {
  display: block;
  position: relative;
  font-size: 3rem;
  margin-bottom: 0.5rem;
  background: var(--color-gradient-tangerine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Icon hover crossfade — see .scs-opener-advantage-icon::after for why this
   needs a layered ::after instead of just transitioning the gradient. */
.scs-maintenance-card .fa-solid::after {
  content: '';
  position: absolute;
  inset: 0;
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  color: var(--color-white);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.scs-maintenance-card:hover .fa-solid::after {
  opacity: 1;
}
.scs-maintenance-card .fa-solid.fa-calendar-check::after { content: "\f274"; }
.scs-maintenance-card .fa-solid.fa-clock::after { content: "\f017"; }
.scs-maintenance-card .fa-solid.fa-house::after { content: "\f015"; }
.scs-maintenance-card .fa-solid.fa-building::after { content: "\f1ad"; }
.scs-maintenance-card p {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-black);
  color: var(--color-mountain);
  text-transform: uppercase;
  font-size: 1rem;
  margin-bottom: 0;
  transition: color 0.35s ease;
}
/* Hover spec: Figma node 26001:874 ("Advantage" component) */
.scs-maintenance-card:hover {
  background: var(--color-sky);
}
.scs-maintenance-card:hover p {
  color: var(--color-white);
}

/* === Rebates (Figma node 44089:1021) === */
.scs-rebates {
  background: var(--color-ice);
}
.scs-rebates .scs-opener-overline {
  color: var(--color-mountain);
}
.scs-rebates-text {
  color: var(--color-midnight);
  font-size: 0.875rem;
}
.scs-rebates-callout {
  background: var(--color-ghost);
  border-radius: 1rem;
  height: 100%;
}
.scs-rebates-callout h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-mountain);
  text-transform: uppercase;
  font-size: 1.5rem;
}
.scs-rebates-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0.75rem;
}
.scs-rebates-list li {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.scs-rebates-list .fa-circle-check {
  color: var(--color-fall);
  font-size: 1.25rem;
}
.scs-rebates-list span {
  font-weight: var(--font-weight-semibold);
  color: var(--color-dark-00dp);
}
.scs-rebates-disclaimer {
  font-size: 0.875rem;
  color: var(--color-dark-06dp);
  margin-bottom: 1rem;
}

/* === Service Areas (Figma node 44089:1042) === */
.scs-service-areas {
  background: var(--color-gradient-service-areas);
}
.scs-service-areas .scs-opener-overline {
  color: var(--color-ghost);
}
.scs-service-areas-map-wrap {
  position: relative;
  aspect-ratio: 717 / 813;
  max-width: 500px;
  margin: 0 auto;
}
@media (min-width: 992px) {
  .scs-service-areas-map-wrap {
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: unset;
    max-width: none;
    width: 100%;
    margin: 0;
  }
}
.scs-service-areas-map {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.25rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.scs-map-pin {
  position: absolute;
  width: 22px;
  height: auto;
  transform: translate(-50%, -50%);
}
.scs-map-pin-primary {
  width: 30px;
}

/* Service-area map pin positions. These are DATA (each pin's coordinate on the
   map image), not styling — they live here rather than inline so the block
   carries no style="" attributes. Percentages keep each pin registered to the
   map at any width. If the map artwork is re-exported, re-derive these. */
.scs-map-pin-1 { left: 82.2%; top: 27.55%; }
.scs-map-pin-2 { left: 63.8%; top: 5.97%; }
.scs-map-pin-3 { left: 27.5%; top: 71.16%; }
.scs-map-pin-4 { left: 44.7%; top: 47.66%; }
.scs-map-pin-5 { left: 44.7%; top: 35.86%; }
.scs-map-pin-6 { left: 63.8%; top: 51.23%; }
.scs-map-pin-7 { left: 33.96%; top: 45.08%; }
.scs-service-areas-divider {
  border: none;
  height: 2px;
  background: var(--color-fall);
  opacity: 0.7;
  margin: 1.5rem 0 1.25rem;
}
.scs-service-areas-label {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-ghost);
  text-transform: uppercase;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.scs-service-areas-city {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.scs-service-areas-city + .scs-service-areas-city {
  margin-top: 1.25rem;
}
.scs-service-areas-city .fa-solid {
  font-size: 1rem;
  color: var(--color-ghost);
  flex-shrink: 0;
}
.scs-service-areas-city-primary .fa-solid {
  background: var(--color-gradient-tangerine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.scs-service-areas-city span {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-transform: uppercase;
  font-size: 1rem;
}
/* City entries are links to their own city pages. The hover accent is on the
   ICON, never the label: the city list sits on the light end of the section's
   gradient, where the rendered backdrop measures rgb(12,89,161) to rgb(19,127,195)
   — white label text is 7.1:1 down to 4.3:1 there, but --color-fall-light is only
   3.6:1 down to 2.2:1, well under the floor for text. The icon duplicates the
   adjacent label, so tinting it is decorative and carries no contrast burden. */
.scs-service-areas-city-link {
  text-decoration: none;
  transition: transform 0.35s ease;
}
.scs-service-areas-city-link .fa-solid {
  transition: color 0.35s ease, transform 0.35s ease;
}
.scs-service-areas-city-link:hover,
.scs-service-areas-city-link:focus-visible {
  transform: translateX(4px);
}
.scs-service-areas-city-link:hover .fa-solid,
.scs-service-areas-city-link:focus-visible .fa-solid {
  color: var(--color-fall-light);
  transform: scale(1.15);
}
.scs-service-areas-city-link:hover span,
.scs-service-areas-city-link:focus-visible span {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.scs-service-areas-city-link:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
  border-radius: 0.25rem;
}
.scs-service-areas-callout {
  background: var(--color-white);
  border: 2px solid var(--color-fall);
  border-radius: 1rem;
  overflow: hidden;
}
.scs-service-areas-callout-banner {
  background: linear-gradient(119.78deg, #18357d 19.697%, #0475bc 70.267%, #6ab9ed 101.75%);
  position: relative;
  height: 215px;
  overflow: hidden;
}
/* The skyline STANDS ON the banner's bottom edge — that is the fixed
   relationship, at every viewport.

   It used to be anchored `top: 8.4%` with `width: 101.5%; height: auto`, which
   is the percentage-width / fixed-offset mismatch this build keeps hitting: the
   artwork's height scales with the banner's WIDTH (684x208 intrinsic) while the
   banner's height is a fixed 215px, so the two only lined up at the width it was
   calibrated at. Measured: at a 632px-wide banner the skyline is 195px tall and
   sits 2px off the bottom (right), but at a 362px-wide banner it is only 112px
   tall and floats with 85px of bare gradient beneath it — Brendan's "skyline
   moving up on mobile".

   Anchoring to the bottom fixes it for good, and the extra sky now opens up
   ABOVE the city on narrow screens, which reads as intentional.

   max-height + object-fit guard the other end: past a ~707px-wide banner the
   artwork would be taller than 215px and its tower spires would clip. `contain`
   scales it down to fit instead, and `object-position: bottom` keeps it planted
   on the bottom edge while it does so. Both are inert at today's widths — they
   only engage on very large monitors. */
.scs-service-areas-callout-skyline {
  position: absolute;
  left: -1.5%;
  bottom: 0;
  width: 101.5%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom;
}
.scs-service-areas-callout-body {
  padding: 1.25rem 1.5rem 1.5rem;
}
.scs-service-areas-callout-body h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-mountain);
  text-transform: uppercase;
  font-size: 1.25rem;
}
.scs-service-areas-callout-body p {
  font-size: 0.875rem;
  color: var(--color-dark-06dp);
}

/* === Closer (Figma node 44089:2581) === */
.scs-closer {
  background: var(--color-gradient-closer);
}
.scs-closer .scs-opener-overline {
  color: var(--color-ghost);
}

/* === FAQs (Figma node 44089:2529) === */
.scs-faqs {
  background: var(--color-ghost);
}
.scs-faq-accordion .accordion-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-sky);
  border-radius: 0;
}
.scs-faq-accordion .accordion-button {
  background: transparent;
  box-shadow: none;
  padding: 0.75rem 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-mountain);
  font-size: 1.125rem;
  --bs-accordion-btn-icon: none;
  --bs-accordion-btn-active-icon: none;
  gap: 0.75rem;
}
.scs-faq-accordion .accordion-button:not(.collapsed) {
  background: transparent;
  box-shadow: none;
  color: var(--color-mountain);
}
.scs-faq-accordion .accordion-button .scs-faq-icon-plus,
.scs-faq-accordion .accordion-button .scs-faq-icon-minus {
  color: var(--color-sky);
  flex-shrink: 0;
}
.scs-faq-accordion .accordion-button .scs-faq-icon-minus {
  display: none;
}
.scs-faq-accordion .accordion-button:not(.collapsed) .scs-faq-icon-plus {
  display: none;
}
.scs-faq-accordion .accordion-button:not(.collapsed) .scs-faq-icon-minus {
  display: inline-block;
}
.scs-faq-accordion .accordion-body {
  padding: 0 0 1rem;
  color: var(--color-dark-06dp);
  font-size: 0.9375rem;
}

/* === Icon Circle Utility Classes === */
.scs-icon-circle-48 {
  width: 48px;
  height: 48px;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  justify-content: center;
}
.icon-list {
  list-style: none;
  padding-left: 0;
}
.icon-list li::before {
  padding-right: 0.25rem;
  content: attr(data-icon);
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 48;
  position: relative;
  top: 0.1em;
}
.icon-list li.icon-relaxed-blue::before {
  color: var(--color-relaxed-blue);
}
.icon-list li.icon-sunshine-yellow::before {
  color: var(--color-sunshine-yellow);
}
/* === Menu Styles (Figma node 44089:2721) === */
.menu-container {
  background: var(--color-white);
  margin-top: 0 !important;
}

.menu-container.shrink-menu {
  box-shadow: 0 1px 0 0 var(--color-tropic-green);
}

/* Used by includes/menu-landing.php (PPC landing header) — not part of the figma-build nav rework */
.menu-container .scs-menu-topper-padding {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition: var(--transition-standard);
}
.menu-container.shrink-menu .scs-menu-topper-padding {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.scs-nav-shell {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  transition: padding var(--transition-standard);
}
.menu-container.shrink-menu .scs-nav-shell {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
@media (min-width: 768px) {
  .scs-nav-shell {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1200px) {
  .scs-nav-shell {
    /* 5rem (80px) matches the Figma nav frame's exact side inset (node 44089:2721) */
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.scs-nav-flex-row {
  gap: 2rem;
}
.scs-nav-content-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

/* Home-page service-card list links (.scs-service-list-link).

   Each card's three bold labels ARE the links to that service's Installation /
   Repair / Maintenance pages, and the card's own button goes to the parent hub.
   This replaced a dropdown-menu toggle per card; those `.scs-service-cta
   .dropdown-*` rules were deleted with it, since no dropdown remains anywhere
   in a service CTA.

   The label keeps its own colour — `.scs-service-list strong` is
   --color-fall at (0,2,0) and beats `a:where(:not(.btn))` at (0,1,0) — so
   linking the text deliberately changes nothing about how it looks at rest.
   That is why the affordance is an UNDERLINE on hover/focus rather than a
   colour change: the labels were already orange and bold before they were
   links, and recolouring them would have been a visual change Brendan did not
   ask for. Matches .scs-service-areas-city-link, the established pattern for a
   link list on this build. */
.scs-service-list-link {
  text-decoration: none;
  transition: text-decoration-color 0.35s ease;
}
.scs-service-list-link:is(:hover, :focus-visible) {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}
.scs-service-list-link:focus-visible {
  outline: 2px solid var(--color-fall);
  outline-offset: 2px;
  border-radius: 0.25rem;
}


@media (max-width: 1199.98px) {
  /* Below xl the main nav list lives inside #offcanvasNavbar, which Bootstrap
     positions `fixed` — so this wrapper has NO in-flow content down here, yet
     it was still reserving ~51px of empty header height. That is the white void
     under the phone/hamburger buttons on mobile: the header measured 167px
     instead of 116px, a fifth of a 844px-tall phone screen given to nothing.

     Taken out of flow rather than `display:none`, which would also hide the
     offcanvas nested inside it and break the mobile menu entirely. The
     offcanvas is `position:fixed`, so it is laid out against the viewport and
     is completely unaffected by this — verified by opening it after the change:
     still full-width, x:0, visible.

     Scoped to below the navbar's own expand breakpoint so the desktop nav,
     which genuinely uses this row, is untouched. */
  .scs-nav-links-row {
    position: absolute;
    width: 0;
    height: 0;
    overflow: visible;
  }
}

.scs-logo-img {
  width: 150px;
  height: auto;
  transition: width var(--transition-standard);
}
.menu-container.shrink-menu .scs-logo-img {
  width: 108px;
}
@media (min-width: 1200px) {
  .scs-nav-flex-row {
    /* 58px exact gap between the logo and the nav content column, per Figma
       (node 44089:2721) — placed after the base rule (not inside the shell's
       own media block above) so it actually wins the cascade at this
       breakpoint instead of being overridden by source order. */
    gap: 58px;
  }
  .scs-logo-img {
    /* Figma spec (node 44089:2721): logo is 186x114 at this breakpoint */
    width: 186px;
  }
}

.scs-nav-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-fall);
  font-size: 1.25rem;
}
.scs-nav-social:hover,
.scs-nav-social:focus-visible {
  color: var(--color-fall-hover);
}

.scs-nav-mobile-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Used by includes/menu-landing.php's <ul class="navbar-nav"> — not part of the figma-build nav rework */
.navbar-nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 6rem;
  transition: height var(--transition-standard);
}
.shrink-menu .navbar-nav {
  height: 5rem;
}

.scs-main-nav-list {
  width: 100%;
  height: auto;
}
@media (min-width: 1200px) {
  .scs-main-nav-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
  }
}

.scs-nav-mobile-cta-item {
  padding: 1rem 0 0;
}

/* Navigation Links */
.menu-container .navbar-light .navbar-nav .nav-link {
  color: var(--color-mountain);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  text-transform: uppercase;
}
.menu-container .navbar-light .navbar-nav .nav-link:is(:hover, :active) {
  color: var(--color-fall);
}

.dropdown-toggle:not(.has-dropdown)::after,
.dropend .dropdown-item:not(.has-dropend)::after,
.dropstart .dropdown-toggle:not(.has-dropstart)::before {
  border: 0 !important;
  margin: 0 !important;
}

.has-dropdown,
.has-dropend {
  align-items: center;
  gap: 0.25em;
}

.has-dropdown::after {
  content: '\f078';
  font-family: 'Font Awesome 7 Pro';
  font-weight: 900;
  border: 0;
  /* The caret used to sit hard against the last letter. `.has-dropdown` above
     declares `gap: 0.25em`, but gap only applies to flex/grid containers and
     these are plain inline nav links — so it never did anything, and
     `margin-left: 0` here left no space at all. Setting the margin is the fix
     that works without changing the links' display type (making them
     inline-flex would re-open the navbar padding-specificity issue documented
     further up this file). 0.4em tracks the font size, so it holds when the
     nav shrinks on scroll. */
  margin-left: 0.4em;
  font-size: 0.7em;
  vertical-align: middle;
}
.dropend .dropdown-item.has-dropend::after {
  content: '\f054';
  font-family: 'Font Awesome 7 Pro';
  font-weight: 900;
  border: 0;
  margin-left: 0.255em;
  font-size: 1em;
  vertical-align: middle;
}

.nav-fill .nav-item .dropdown-item {
  text-align: left !important;
}

.menu-container .navbar-light .navbar-nav .nav-link:is(:hover, :active) {
  color: var(--color-tropic-green);
}

/* Dropdown Styles */
.nav-item .dropdown-item {
  color: var(--color-white);
  font-family: var(--font-cubano);
  font-weight: var(--font-weight-medium);
  font-size: 1rem;
}

.nav-item .dropdown-item:is(:hover, :active) {
  background-color: #eee;
  border-radius: var(--border-radius-standard);
  color: var(--color-relaxed-blue) !important;
}

.navbar-expand-xl .navbar-nav .dropdown-menu {
  background: #fff;
  border: 0;
  box-shadow: var(--box-shadow-dropdown);
  padding: 0.5rem;
}

.scs-mega-dropdown-row {
  /* Was var(--color-dark-mode), which resolves to the donor's raw dark-mode
     grey #1e1e1e — this panel rendered near-BLACK inside its blue gradient
     frame. Every other donor token in this mega-dropdown block was re-aliased
     to a Summit value during site-init (--color-tropic-green and
     --color-sunshine-yellow both point at --color-fall, --font-cubano points at
     --font-heading); --color-dark-mode is the one that was missed.

     CORRECTION (2026-09-02 cleanup): this comment used to claim
     .text-dark / .bg-dark / .border-dark were all unused. **.bg-dark IS used**
     — includes/footer.php puts it on the Red Barn credit strip, which is why
     that bar renders #1e1e1e. That is fine and matches the fleet (the other
     builds get Bootstrap's own near-black .bg-dark there). The genuinely
     unused two, .text-dark and .border-dark, have now been deleted.

     Fixed at the point of use rather than by re-aliasing the token, because
     .bg-dark legitimately means "dark" and the credit strip wants exactly that.
     Mountain keeps the intended design — a darker inset panel inside the
     --color-gradient-blue frame — while being on-brand, and it holds the
     dropdown's white headings at 11.4:1. */
  background: var(--color-mountain);
  border-radius: var(--border-radius-standard);
  transition-duration: var(--transition-standard);
}
.scs-mega-dropdown-row:is(:hover, :focus, :active) {
  background-color: var(--color-relaxed-blue-15);
}

.navbar-expand-xl .navbar-nav .dropdown-menu.mega-dropdown {
  background: var(--color-gradient-blue);
  padding: 0.5rem;
  /* Square across the TOP so the panel reads as an extension of the nav bar,
     rounded only on the bottom two corners (Brendan: "i want the top squares
     not rounded"). */
  border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
  transition: top var(--transition-standard);
  width: 100%;
}

/* Open the dropdowns flush with the BOTTOM of the nav bar instead of 10px up
   inside it.

   The menus were positioning against `nav.navbar`, which is Bootstrap's own
   `position: relative` element and is NOT the full height of the header — it
   ends 12px above .menu-container's bottom edge, so `top: 100%` landed the
   panel inside the bar and overlapped it.

   A fixed offset cannot fix this, because that gap is not constant: custom.js
   adds .shrink-menu on scroll and the header re-flows — measured 12px at rest
   but 6.4px once shrunk, with nav.navbar itself moving from y63.8 to y58.1 and
   growing 64px -> 80px. Any hard-coded nudge would be right in one state and
   wrong in the other.

   The containing block is .scs-nav-shell, which spans the header's FULL height,
   so `top: 100%` lands on the header's real bottom edge and tracks the shrink
   automatically with no magic numbers.

   The horizontal has to be set explicitly, and this is the part that bit once
   already. Absolutely-positioned elements resolve against the PADDING box of
   their containing block, so a bare `width: 100%` here spans the shell's
   padding box — 80px of side padding included — and the panel opened edge to
   edge across the screen (left 0, width 1425 at a 1440 viewport).

   Leaving nav.navbar as the containing block instead is no good either: the
   navbar begins AFTER the logo (left 324), so the panel hangs off to the right
   with a 324px gap on one side and 80px on the other.

   So it is inset by the shell's own side padding, 5rem at this breakpoint,
   which puts an equal 80px margin on both sides and centres it under the
   header. `width: auto` is required — left+right cannot size the box while an
   explicit width is still set.

   If .scs-nav-shell's padding changes, this 5rem must change with it. */
@media (min-width: 1200px) {
  .menu-container .scs-nav-shell {
    position: relative;
  }
  .menu-container .scs-nav-links-row > nav.navbar {
    position: static;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu.mega-dropdown {
    top: 100%;
    margin-top: 0;
    left: 5rem;  /* = .scs-nav-shell's padding-left at >=1200 */
    right: 5rem; /* = .scs-nav-shell's padding-right at >=1200 */
    width: auto; /* left+right size the box; an explicit width would override */
  }
}

.scs-mega-dropdown-group {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.scs-mega-dropdown-group:is(:hover, :focus, :active) {
  background: var(--color-seafoam-5);
  border-radius: var(--border-radius-standard);
}

.scs-mega-dropdown-group p {
  font-family: var(--font-cubano);
  font-size: 0.9rem;
  color: var(--color-white);
  transition-duration: var(--transition-standard);
  font-weight: var(--font-weight-medium);
  margin-bottom: 0rem;
  text-transform: uppercase;
}
.scs-mega-dropdown-group:is(:hover, :focus, :active) p {
  color: var(--color-sunshine-yellow);
}

.scs-mega-dropdown-group a {
  color: var(--color-neutral-50);
  transition-duration: var(--transition-standard);
}
.scs-mega-dropdown-group a:is(:hover, :focus, :active) {
  color: var(--color-tropic-green);
}

/* Logo Styles — used by includes/menu-landing.php's background-image logo; the main menu.php
   logo now uses a real <img> (.scs-logo-img, with Bootstrap's d-inline-block on its link)
   instead, see Menu Styles above */
.menu-container .container-fluid .row .scs-logo-place a.scs-logo {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 3rem;
  z-index: 2;
  transition-duration: 0.25s;
}

.menu-container .container-fluid .row .scs-logo-place a.scs-logo {
  background: url(../img/scs-logo.svg);
  background-size: cover;
  width: 120px;
  height: 77px;
  transition-duration: 0.25s;
}

.menu-container.shrink-menu .container-fluid .row .scs-logo-place a.scs-logo {
  width: 109px;
  height: 70px;
  top: 2.25rem;
  transition-duration: 0.25s;
}

/* === Sub-page conventions (reserved for Step 8 — no sub-pages built yet) ===
   .scs-hero-intro + its .scs-sub-page modifier and per-service background variants
   (.ac/.furnace/.heat-pump/.mini-split/.packaged-systems/.indoor-air-quality) below.
   Not dead code: this is the sub-page hero pattern the page_template.php build will
   consume. Its responsive overrides also appear in the tablet/desktop media-query
   blocks further down this file (search "scs-hero-intro" to find all of them). */
/* The hero's DARK IDENTITY (Mountain panel + white text + orange gradient
   overline) is unconditional — it must not change between mobile and desktop.
   It used to live entirely inside the >=768px block below, so below 768 the
   hero fell back to a pale --color-seafoam background with dark navy text.
   Brendan caught it: "it should just stay the dark blue and colors it is at
   desktop". Only the PHOTO and the 50/50 split are width-dependent; the
   colours are not. Don't move these back inside a media query.

   The colour lives on the section itself rather than on the text column's
   ::before panel because that panel deliberately stops at the column's right
   edge (see below) — it can only cover half the hero. Painting the section
   means the mobile hero is covered edge to edge, and at >=768 the panel sits
   on top in the SAME colour, so the two can never show a seam. */
.scs-hero-intro {
  background-color: var(--color-mountain);
  height: var(--hero-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  --scs-link: var(--color-white);
  --scs-link-hover: var(--color-neutral-100);
  --scs-icon: var(--color-white);
}

/* Tablet: For screens 768px and wider */
@media (min-width: 768px) {
  .scs-hero-intro {
    padding-top: 136px; /* padding, not margin — margin-top collapses through the parent and misses the fixed nav */
  }
}

/* Removed here: a >=1200px rule painting `--color-seafoam
   url(scs-hero-800-600.webp) right bottom`. Dead twice over — that file has
   never existed in this repo, and every hero on the site carries a service
   variant class whose own >=768px rule overrode it anyway. */

.scs-hero-intro.scs-sub-page {
  height: fit-content;
  padding-top: calc(3rem + 136px); /* clears the fixed .menu-container, same value as .scs-hero */
  padding-bottom: 5rem;
}

.scs-hero-intro h1 {
  font-size: calc(2rem + 1vw);
  line-height: 1;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-white);
}
.scs-hero-intro p {
  color: var(--color-white); /* was --color-navy-blue, which only made sense
    while the mobile hero was pale seafoam — see the note on the base rule */
  font-weight: 700;
}

/* Brand orange GRADIENT overline (Brendan's call). Painted as a gradient
   background clipped to the glyphs — CSS can't put a gradient in `color`.
   `color: transparent` is what reveals the clipped background, so it is
   load-bearing, not a reset.
   ACCESSIBILITY TRADE-OFF, recorded deliberately: flat --color-fall-light was
   5.80:1 on the Mountain panel and passed AA. This gradient starts there but
   ends at ~rgb(239,115,11), which measures ~3.9:1 — under the 4.5 floor for
   1rem text. So the tail of the word is below AA while the head is clear of
   it. Flagged and chosen anyway, same call as the white-on-Sky button hovers.
   Revert to `color: var(--color-fall-light)` (and drop the 3 background lines
   plus the rule override below) to get AA back. */
.scs-hero-intro .scs-opener-overline {
  background: var(--color-gradient-buttons);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.scs-hero-intro .scs-opener-overline-rule {
  /* The rules normally take `background: currentColor`, which is now
     transparent — without this they'd vanish entirely. They get the same
     gradient rather than a flat color so the dashes match the word. */
  background: var(--color-gradient-buttons);
}

.scs-hero-intro.scs-sub-page h1 {
  font-size: calc(2rem + 0.75vw);
  line-height: 1;
  font-weight: var(--font-weight-bold);
}

/* Removed here: a >=1200px block giving .scs-sub-page white text and white
   link/icon vars. Both now come unconditionally from the base .scs-hero-intro
   rules above, which is the point of this fix — the hero is dark at EVERY
   width, so its text is white at every width. The old comment here explained
   that white text had to wait for "a real photo + scrim"; that reasoning is
   obsolete now the section itself carries the Mountain colour. */

/* === .ac hero: solid text panel + real photo (Tablet+ >=768px) ===
   Split out from the shared >=1200px block below so this starts at tablet,
   not just desktop. Scoped to .ac ONLY — the other 5 variants below still
   lack a real photo, so they must stay on the generic >=1200px/dark-text
   default above until each gets its own photo + panel treatment (NOTE below).

   REWORKED (was a left-to-right gradient scrim stretched 100% across the
   whole SECTION, independent of where the text column actually sat inside
   Bootstrap's centered .container). That meant the gradient's percentage
   breakpoints and the text column's real pixel position were computed
   against two DIFFERENT boxes (full section width vs. container-inset
   column width) — they only lined up by coincidence at some viewport
   widths, which is why the photo visibly bled through behind the text at
   others (Brendan caught this directly). Fixed by making the text column
   carry its own fully OPAQUE background panel (::before, bled left via
   -100vw + the section's own overflow:hidden, right edge pinned to the
   column's own real edge — so it can never drift, at any viewport). The
   photo now shows with NO overlay at all — full brightness, per Brendan's
   "still too dark, lighten it" feedback — since contrast no longer depends
   on tinting the photo, only the panel is opaque. */
@media (min-width: 768px) {
  /* EVEN 50/50 SPLIT — panel left half, photo right half, at every viewport.
     The panel edge is set by the text column being `col-md-6`, not by any
     tuned number: the .container is CENTERED, so its midpoint is by definition
     the section's midpoint, which means a 6-of-12 column's right edge lands on
     exactly 50% of the full-bleed section at any width. (It was col-md-7, whose
     edge sat at 57.6% here and DRIFTED with viewport width, because a
     fixed-max-width container inside a fluid section is a changing fraction of
     it — that is why it could never be an even split.) Keep the column at
     col-md-6; widening it moves the split and pushes text under the photo. */
  .scs-hero-intro.ac,
  .scs-hero-intro.furnace,
  .scs-hero-intro.heat-pump,
  .scs-hero-intro.mini-split,
  .scs-hero-intro.packaged-systems,
  .scs-hero-intro.indoor-air-quality,
  .scs-hero-intro.geothermal,
  .scs-hero-intro.insulation,
  .scs-hero-intro.mobile-modular,
  .scs-hero-intro.rooftop,
  .scs-hero-intro.company,
  .scs-hero-intro.service-area {
    /* padding moved onto .scs-hero-ac-text below so its panel can span the
       section's full height edge-to-edge; keep this at 0 for .ac only. */
    padding-top: 0;
    padding-bottom: 0;
    /* No background overrides here any more. The base rule used to paint a
       (nonexistent) mobile SVG that had to be cleared, and set seafoam that
       nothing could ever see: at >=768 the left half is the text column's
       opaque ::before panel and the right half is the ::after photo, so the
       section's own colour is fully covered. The base Mountain colour now
       carries the mobile hero instead. */
    z-index: 0; /* creates a stacking context so ::after's negative z-index
      resolves against THIS element and paints above its background-color.
      Without it the photo would sit behind the section's own background and
      be invisible — negative z-index escapes to the nearest stacking context,
      not merely the parent. (.scs-hero-ac-text gets away with its z-index:-1
      ::before only because its own `z-index:0` already makes one.) */
  }
  /* Hero veil — the gradient reads across BOTH columns: solid navy behind the
     copy, easing across the photo into a translucent light blue on the right.

     This is what kills the hard vertical seam at the halfway point, where the
     opaque text panel used to butt straight into the photo.

     Why the light end is safe: it lands on the PHOTO, never under text. Every
     text element still sits on solid Mountain navy at 11.39:1. Putting this
     gradient under the copy instead (the obvious reading of "mimic the
     homepage hero") is what fails — the homepage uses NAVY text on a light
     background, whereas these heroes use WHITE text and all of it sits at the
     top, exactly where such a gradient is lightest.

     ⚠️ Geometry mirrors .scs-hero-intro::after EXACTLY — same `top`, same
     `aspect-ratio`, same `max-width`. That is load-bearing: the photo's box is
     shape-capped, so a veil left at a flat 50% would run past the image's left
     edge on wide screens and the blend would stop lining up with it. If the
     photo's box changes, change this with it.

     Stacking: the photo is at z-index -1, this sits at 0 so it paints above
     it, and the real content beats it on tree order (a ::before is generated
     before its element's children), so nothing veils the text. `.scs-hero-intro`
     already establishes the stacking context with its own `z-index: 0`.

     Excluded on .service-area — that hero is a skyline on flat navy with no
     photo and therefore no seam to blend. */
  .scs-hero-intro:not(.service-area)::before {
    content: "";
    position: absolute;
    top: 136px;
    bottom: 0;
    right: 0;
    width: 50%;
    max-width: 960px;
    z-index: 0;
    pointer-events: none;
    /* Alpha ramp only — the COLOUR stops are fixed brand blues and shouldn't be
       tuned. To make the photo read more or less, move the last two alphas;
       the first two hold the solid-navy handoff from the text panel and should
       be left alone or the seam comes back.
       0.55/0.42 was the first pass; eased to 0.46/0.28 so the right side keeps
       more of the photograph. */
    background: linear-gradient(to right,
      #18357d 0%,
      rgba(24, 53, 125, 0.72) 28%,
      rgba(4, 117, 188, 0.46) 62%,
      rgba(106, 185, 237, 0.28) 100%);
  }
  /* Photo occupies exactly the right half. A pseudo-element, not a background
     layer on the section, because `background-size: cover` can only be scoped
     to the WHOLE element — covering the full section would scale this 800x600
     source ~1.8x and blow up the crop, while `auto 100%` leaves a gap on the
     right once the section grows wider than the photo's aspect allows. Giving
     the photo its own half-width box lets `cover` do the right thing inside
     just that half (~1.09x upscale here). */
  .scs-hero-intro.ac::after,
  .scs-hero-intro.furnace::after,
  .scs-hero-intro.heat-pump::after,
  .scs-hero-intro.mini-split::after,
  .scs-hero-intro.packaged-systems::after,
  .scs-hero-intro.indoor-air-quality::after,
  .scs-hero-intro.geothermal::after,
  .scs-hero-intro.insulation::after,
  .scs-hero-intro.mobile-modular::after,
  .scs-hero-intro.rooftop::after,
  .scs-hero-intro.company::after,
  .scs-hero-intro.service-area::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    /* ⚠️ TWO things keep the equipment whole. Both are needed.

       1. `top: 136px` — nav clearance. The hero starts at y:0 and the FIXED
          .menu-container sits on top of its first ~137px, so a full-bleed
          photo has its top 137px permanently hidden behind the nav. The AC
          condenser's top edge lands 84px into the image, i.e. inside that
          hidden strip — which is why it still read as "cut off" even after
          the crop maths said the whole unit was inside the box. The box was
          right; part of the box just isn't visible. This is the same fix
          .company already used for the trailer logo; the note there claimed
          the equipment photos "lose nothing meaningful off their top edge",
          and that was wrong.

          Item 1 alone guarantees the TOP at every width, which is the part
          that was actually being reported: `background-position: center top`
          puts the image's top edge on the panel's top edge, and that edge is
          now below the nav.

       2. `max-width: 960px` — a loose shape cap, and deliberately loose. Past
          ~1920 the panel would otherwise keep widening while its height barely
          moves, and `cover` starts spending the surplus on the bottom of the
          frame: 299px of grass and pad gone at 2880. The cap keeps that mild.

          ⚠️ Do NOT tighten it to keep the concrete pad fully in shot. That
          needs panelW <= 1.584 x panelH (from sourceWidth / unitBottom =
          1600 / 1010), and hero heights across the site run 567-737px, so the
          binding case gives a 682px cap — which engages at a 1364px viewport
          and visibly narrows the photo at 1440, changing the approved look.
          Losing some grass off the bottom on an ultra-wide monitor is a fair
          trade; losing the top of the unit is not.

          ⚠️ Also do NOT express this as `aspect-ratio` with `max-width`. Tried
          it: the two fight, the width clamp feeds back through the ratio and
          shortens the height, and the photo stops reaching the bottom of the
          hero, leaving a navy band under it. */
    top: 136px;
    width: 50%;
    max-width: 960px;
    /* Historical note, kept because it explains why the obvious fixes failed:
       with `center top` and no shape cap the unit was whole at 1440 and 1900
       but lost 84px at 2200, 198px at 2560 and 299px at 2880. An earlier
       attempt used a fixed `max-width: 960px` derived against one page's 610px
       hero — wrong on pages whose copy makes the hero taller, which is why the
       cap is an aspect-ratio now. */
    /* `center top` still matters — it decides that the surplus is spent at the
       BOTTOM of the frame (ground, grass, floor) rather than split across the
       top, where the equipment is.

       The panel's shape flips with viewport width: the hero's height is set by
       the text column, so it stays ~610px while the panel keeps widening. Below
       roughly a 1640px viewport the panel is narrower than 4:3, `cover` fits by
       HEIGHT, there is no vertical surplus and this keyword does nothing. Past
       that the panel turns landscape, `cover` fits by WIDTH instead, and a
       CENTRED crop starts eating the top and bottom equally — measured 43px off
       each at 1900px, which is what was slicing the top off the AC condenser.

       Anchoring top spends the whole surplus at the BOTTOM of the frame, which
       on these photos is ground, grass or floor. The equipment is always the
       upper subject, so it stays whole at every width. */
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
  }
  /* Responsive hero photos. Each variant declares its 1x file, then the same
     rule again as image-set() with the 2x export. Browsers that support
     image-set() pick by device pixel ratio; older ones ignore that declaration
     and keep the plain url() above it, which is exactly today's behaviour — so
     there is no regression and no JavaScript involved.

     The 2x files were exported earlier and had never been wired up, which is
     why the heroes looked soft on retina screens.

     Cost is limited by where these load at all: the photo lives on a
     pseudo-element inside this >=768px block, so PHONES NEVER DOWNLOAD IT.
     Only tablets and up fetch a hero, and a 2x file only goes to a screen that
     can actually resolve it.

     .company uses 1.34x, not 2x — its larger export is 1072x804, not 1600x1200,
     and the descriptor has to state the real resolution or the browser makes a
     bad choice with it. .service-area has NO larger export and is left on the
     single file; it needs one generating before it can join this list. */
  .scs-hero-intro.ac::after {
    background-image: url('../img/scs-hero-ac-800-600.webp');
    background-image: image-set(url('../img/scs-hero-ac-800-600.webp') 1x, url('../img/scs-hero-ac-1600-1200.webp') 2x);
  }
  .scs-hero-intro.furnace::after {
    background-image: url('../img/scs-hero-furnace-800-600.webp');
    background-image: image-set(url('../img/scs-hero-furnace-800-600.webp') 1x, url('../img/scs-hero-furnace-1600-1200.webp') 2x);
  }
  .scs-hero-intro.heat-pump::after {
    background-image: url('../img/scs-hero-heat-pump-800-600.webp');
    background-image: image-set(url('../img/scs-hero-heat-pump-800-600.webp') 1x, url('../img/scs-hero-heat-pump-1600-1200.webp') 2x);
  }
  .scs-hero-intro.mini-split::after {
    background-image: url('../img/scs-hero-mini-split-800-600.webp');
    background-image: image-set(url('../img/scs-hero-mini-split-800-600.webp') 1x, url('../img/scs-hero-mini-split-1600-1200.webp') 2x);
  }
  .scs-hero-intro.packaged-systems::after {
    background-image: url('../img/scs-hero-package-unit-800-600.webp');
    background-image: image-set(url('../img/scs-hero-package-unit-800-600.webp') 1x, url('../img/scs-hero-package-unit-1600-1200.webp') 2x);
  }
  .scs-hero-intro.indoor-air-quality::after {
    background-image: url('../img/scs-hero-iaq-800-600.webp');
    background-image: image-set(url('../img/scs-hero-iaq-800-600.webp') 1x, url('../img/scs-hero-iaq-1600-1200.webp') 2x);
  }
  .scs-hero-intro.geothermal::after {
    background-image: url('../img/scs-hero-geothermal-800-600.webp');
    background-image: image-set(url('../img/scs-hero-geothermal-800-600.webp') 1x, url('../img/scs-hero-geothermal-1600-1200.webp') 2x);
  }
  .scs-hero-intro.insulation::after {
    background-image: url('../img/scs-hero-insulation-800-600.webp');
    background-image: image-set(url('../img/scs-hero-insulation-800-600.webp') 1x, url('../img/scs-hero-insulation-1600-1200.webp') 2x);
  }
  .scs-hero-intro.mobile-modular::after {
    background-image: url('../img/scs-hero-mobile-modular-800-600.webp');
    background-image: image-set(url('../img/scs-hero-mobile-modular-800-600.webp') 1x, url('../img/scs-hero-mobile-modular-1600-1200.webp') 2x);
  }
  .scs-hero-intro.rooftop::after {
    background-image: url('../img/scs-hero-rooftop-800-600.webp');
    background-image: image-set(url('../img/scs-hero-rooftop-800-600.webp') 1x, url('../img/scs-hero-rooftop-1600-1200.webp') 2x);
  }
  .scs-hero-intro.company::after {
    background-image: url('../img/scs-hero-company-800-600.webp');
    background-image: image-set(url('../img/scs-hero-company-800-600.webp') 1x, url('../img/scs-hero-company-1072-804.webp') 1.34x);
    /* Drop the photo below the fixed nav so the Summit logo on the trailer reads
       whole. The hero starts at y:0 and .menu-container is fixed at ~140px, so
       the top of this panel sits BEHIND the nav — which was slicing the logo's
       mountain, sun and snowflake clean off.

       background-position CANNOT fix this: the panel is portrait (~713x737)
       while the photo is landscape 4:3, so `cover` fits the HEIGHT exactly and
       leaves zero vertical slack — any vertical position value is a no-op.
       Insetting the panel is what actually moves the image down.

       136px is the same nav-clearance constant .scs-hero-intro uses for its
       padding-top. The nav measures 140px at rest and 145px scrolled (it does
       not shrink below its resting height on this build), so the uncovered
       strip above this inset stays hidden behind the nav at every scroll
       position. Only .company is inset — the equipment photos lose nothing
       meaningful off their top edge and are deliberately left full-bleed. */
    top: 136px;
    /* ...and anchor to the TOP, which is what makes this hold on a large
       monitor. The panel's shape flips with viewport width: the hero's height
       is set by the text column inside a max-width container, so past ~1400px
       the height stays ~737px while this panel keeps widening. Narrow, the
       panel is portrait and `cover` fits by height (no vertical slack, this
       value is a no-op). Wide, the panel turns landscape, `cover` fits by
       width instead, and a CENTERED crop would cut ~150px off the top at
       2400px — clipping the logo all over again, exactly the
       laptop-fine/big-monitor-broken failure this project has hit before.
       Anchoring top pins the logo in view at every width; the surplus is
       given up at the bottom of the frame instead. */
    background-position: center top;
  }
  /* City hero: the VECTOR skyline, not a raster. This was an 800x600 WebP of
     the same artwork, which is why it looked soft — it was being scaled up to a
     ~950px-wide panel, and no 2x export of it exists. The artwork is already in
     the repo as `scs-service-areas-city-skyline.svg` (the Service Areas callout
     uses it), and it is 1446 solid-white paths, so it needs no recolouring to
     sit on the hero's Mountain navy — the ::after just stays transparent and
     lets the section show through. Being vector it is exact at every viewport
     and every device pixel ratio, and it costs no second file.

     Sized by HEIGHT with an auto width so the 684x208 artwork keeps its ratio
     (the file carries preserveAspectRatio="none", so forcing both axes WOULD
     stretch the buildings). Anchored bottom-right, which is where the raster
     had it composed. */
  .scs-hero-intro.service-area::after {
    background-image: url('../img/scs-service-areas-city-skyline.svg');
    background-size: auto 35%;
    background-position: right bottom;
  }
  .scs-hero-intro.ac .scs-hero-ac-text,
  .scs-hero-intro.furnace .scs-hero-ac-text,
  .scs-hero-intro.heat-pump .scs-hero-ac-text,
  .scs-hero-intro.mini-split .scs-hero-ac-text,
  .scs-hero-intro.packaged-systems .scs-hero-ac-text,
  .scs-hero-intro.indoor-air-quality .scs-hero-ac-text,
  .scs-hero-intro.geothermal .scs-hero-ac-text,
  .scs-hero-intro.insulation .scs-hero-ac-text,
  .scs-hero-intro.mobile-modular .scs-hero-ac-text,
  .scs-hero-intro.rooftop .scs-hero-ac-text,
  .scs-hero-intro.company .scs-hero-ac-text,
  .scs-hero-intro.service-area .scs-hero-ac-text {
    position: relative;
    z-index: 0;
    /* same values as .scs-hero-intro.scs-sub-page's padding-top/-bottom —
       restated here because .ac zeroes the section's own padding above so
       the panel below can reach the section's true top/bottom edges. Keep
       these two in sync if the base sub-page hero padding ever changes. */
    padding-top: calc(3rem + 136px);
    padding-bottom: 5rem;
    padding-right: 3rem;
  }
  .scs-hero-intro.ac .scs-hero-ac-text::before,
  .scs-hero-intro.furnace .scs-hero-ac-text::before,
  .scs-hero-intro.heat-pump .scs-hero-ac-text::before,
  .scs-hero-intro.mini-split .scs-hero-ac-text::before,
  .scs-hero-intro.packaged-systems .scs-hero-ac-text::before,
  .scs-hero-intro.indoor-air-quality .scs-hero-ac-text::before,
  .scs-hero-intro.geothermal .scs-hero-ac-text::before,
  .scs-hero-intro.insulation .scs-hero-ac-text::before,
  .scs-hero-intro.mobile-modular .scs-hero-ac-text::before,
  .scs-hero-intro.rooftop .scs-hero-ac-text::before,
  .scs-hero-intro.company .scs-hero-ac-text::before,
  .scs-hero-intro.service-area .scs-hero-ac-text::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: -100vw; /* bleeds well past the container's left inset; clipped by
                     .scs-hero-intro's own overflow:hidden, so this always
                     reaches the section's true left edge at any viewport. */
    background: var(--color-mountain); /* next-brightest brand blue after
      Midnight (Brendan: "too dark") -- Midnight < Mountain < Sky < Ice < Ghost */
    z-index: -1;
  }
  /* Removed from here: four rule sets that each repeated the same 12-variant
     selector list — the orange gradient overline, its rule spans, white h1/p,
     and the white --scs-link/--scs-icon vars. All four are now unconditional
     on the base .scs-hero-intro rules near the top of this section, because
     the hero is dark at every width. Only the geometry above (zeroed section
     padding, the ::after photo, the text column's ::before panel) is genuinely
     width-dependent and belongs in this media query. */
}

/* === Service Hero Backgrounds (Desktop ≥1200px) === */
@media (min-width: 1200px) {
  /* NOTE: the 5 variants below still need their photo assets generated in
     /site-images AND the same solid-panel treatment .ac uses above
     (.scs-hero-ac-text / ::before pattern — give each variant its own
     .scs-hero-{class}-text class following that exact structure) before
     they can safely use .scs-sub-page's white text — don't wire in a bare
     photo here without an opaque panel behind the text, or white text will
     fail contrast (and, per Brendan's ac feedback, don't reach for a
     left-to-right gradient scrim across the section again — it doesn't
     reliably line up with the text column at every viewport). */
}

/* === Sub-page: Breadcrumb (new — every sub-page under a service category gets one) === */
/* --color-ghost is this project's body background (see body{} above) —
   the old plain background here was invisible against the page, which is
   why this read as a bare row of links with no bar. White + a soft shadow
   gives it a real, distinct bar; the chevron divider + uppercase/tracked
   type match the site's overline styling (.scs-opener-overline) instead of
   Bootstrap's default plain "/" text. */
.scs-breadcrumb {
  background: var(--color-gradient-buttons); /* same orange gradient as
    .scs-btn-gradient (the site's phone-CTA button) -- reusing it here
    keeps the same navy-on-orange contrast pairing already established
    sitewide rather than picking new link/active colors. */
  padding: 0.85rem 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
/* Summit mountain mark to the left of the breadcrumb items.
   Uses img/scs-mountain-mark.svg — the SAME single path as the footer's mountain,
   with only `fill-opacity` changed from 0.2 to 1. The footer copy is deliberately
   a 20% watermark, and that opacity carries through an alpha mask, so masking the
   footer file directly rendered the navy at a fifth strength and looked washed
   out. The mark is a derived copy, not new artwork; keep the footer's own file at
   0.2, it needs to stay a watermark there.
   Applied as a MASK rather than an <img> so the color comes from a brand token:
   the artwork's native fill is --color-ice, which is near-invisible on this
   orange bar. Navy matches the breadcrumb's own link/active text, and the facets
   and snowflake are cut-outs in the path, so the orange shows through them.
   Decorative only — a pseudo-element, not markup, so it needs no alt text and
   applies to every sub-page cloned from page_template.php with no per-page edit. */
.scs-breadcrumb .breadcrumb::before {
  content: "";
  width: 3.25rem;
  height: 1.05rem; /* the source is 1075x339 (~3.17:1); this pair keeps that ratio
    so `contain` never letterboxes it */
  margin-right: 0.85rem;
  flex-shrink: 0;
  align-self: center;
  background-color: var(--color-mountain);
  -webkit-mask-image: url(/img/scs-mountain-mark.svg);
  mask-image: url(/img/scs-mountain-mark.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
/* Purely a flourish, so it steps aside on the narrowest screens rather than
   pushing "HOME > AIR CONDITIONING > AC INSTALLATION" into a second line — the
   mark plus its margin is ~66px against a 0.8rem breadcrumb that is already
   tight on a phone. Hidden rather than shrunk because at this size it would
   stop reading as a mountain. */
@media (max-width: 575.98px) {
  .scs-breadcrumb .breadcrumb::before {
    display: none;
  }
}
.scs-breadcrumb .breadcrumb-item {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}
.scs-breadcrumb .breadcrumb {
  --bs-breadcrumb-divider: "\f054"; /* fa-chevron-right, self-hosted subset */
}
.scs-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  font-size: 0.6rem;
  color: var(--color-neutral-200);
  vertical-align: 0.05em;
}
.scs-breadcrumb .breadcrumb-item a {
  color: var(--color-mountain);
  text-decoration: none;
  transition: color 0.35s ease;
}
.scs-breadcrumb .breadcrumb-item a .fa-house {
  font-size: 0.75em;
  margin-right: 0.15rem;
}
.scs-breadcrumb .breadcrumb-item a:hover,
.scs-breadcrumb .breadcrumb-item a:focus-visible {
  color: var(--color-fall);
}
.scs-breadcrumb .breadcrumb-item.active {
  color: var(--color-midnight);
  font-weight: var(--font-weight-semibold);
}

/* === Sub-page: Why Us hover cards (new — same white-card/Sky-hover language
   as .scs-opener-advantage-card / .scs-financing-advantage /
   .scs-maintenance-card, adapted to an icon-beside-text layout with a full
   paragraph instead of icon-above-short-label). Not from Figma (no Why Us
   frame exists for this page); the hover treatment matches the site's
   established brand pattern (Figma node 26001:874) for consistency. === */
/* Cards always paint ABOVE .scs-process-divider's upward bleed.
   Capping that bleed at -420px (see .scs-process-divider) stops the gross
   overlap, but it cannot guarantee zero on every page — section heights vary
   per page, and /service-areas still ended up with the graphic clipping the
   last 12px of its bottom card row. The divider is z-index:0, so lifting the
   cards one level keeps their content crisp wherever they happen to land.
   Deliberately on the CARDS and not their section: the mountain must still
   show through the gaps between them, which is the intended look. */
.scs-why-card,
.scs-financing-advantage {
  position: relative;
  z-index: 1;
}
.scs-why-card {
  background: var(--color-white);
  border-radius: 0.75rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  padding: 1.25rem;
  height: 100%;
  transition: background-color 0.35s ease;
}
.scs-why-card .scs-opener-advantage-icon {
  flex-shrink: 0;
}
.scs-why-card:hover .scs-opener-advantage-icon::after {
  opacity: 1;
}
/* Icon crossfade content for the 3 icons this section uses that the
   existing Opener/Maintenance cards didn't already map (fa-shield-halved,
   fa-tools, fa-id-card are already mapped above and apply here too since
   the selector is icon-class-scoped, not card-class-scoped). */
.scs-opener-advantage-icon.fa-table-columns::after { content: "\f0db"; }
.scs-opener-advantage-icon.fa-piggy-bank::after { content: "\f4d3"; }
.scs-opener-advantage-icon.fa-circle-check::after { content: "\f058"; }
.scs-why-card p {
  transition: color 0.35s ease;
}
.scs-why-card p.fw-bold {
  color: var(--color-mountain);
}
.scs-why-card:hover {
  background: var(--color-sky);
}
.scs-why-card:hover p {
  color: var(--color-white);
}

/* === Sub-page: Form Card (new — same gradient-card look as the homepage's
   .scs-contact-card, but without its hero-specific -6rem overlap margin, so
   it can drop into any sub-page's FORM-SECTION) === */
.scs-form-card {
  /* Same geometry and stops as --color-gradient-darker-ocean, re-declared here
     with alpha so the mountain reads through the card (Brendan: "making the form
     a bit see through"). Deliberately NOT a change to the shared token — the
     homepage's .scs-contact-card uses it and must stay opaque.
     Translucency is on the BACKGROUND only, never `opacity` on the card: that
     would fade the white input fields, the placeholder text and the orange
     submit button along with it.
     Contrast checked, not assumed: the white h3 sits over the first stop, which
     at 0.75 composites to rgb(69,98,158) over seafoam = 6.0:1, still well clear
     of the 4.5 AA floor. (The 101.75% stop is only ~2:1
     against white, but that corner of the card holds the orange button and the
     white textarea — no text sits on it. It was already 2.15:1 opaque, so this
     is a pre-existing property of the gradient, not something the alpha
     introduced.) */
  background: linear-gradient(
    143.29deg,
    rgba(24, 53, 125, 0.75) 19.697%,
    rgba(4, 117, 188, 0.75) 70.267%,
    rgba(106, 185, 237, 0.75) 101.75%
  );
  border: 3px solid var(--color-fall);
  border-radius: 1.25rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  /* position+z-index only matter where .scs-process-divider bleeds up
     behind this card (AC Installation page); harmless elsewhere since
     nothing else currently overlaps a .scs-form-card. Kept as a belt-and-braces
     pairing with .scs-form-section .container's own z-index below. */
  position: relative;
  z-index: 1;
  /* No margin-top on purpose. It carried 7rem to hold the mountain's peak clear
     of the service buttons, which left 48px of space above the section header
     and 160px below it — visibly lopsided. The peak is now allowed to rise
     BEHIND the buttons instead (the same thing the home page does behind its
     trust badges), which evens both gaps to 48px. What keeps the buttons legible
     on top of the graphic is .scs-form-section .container's z-index, NOT this
     rule. Peak exposure above the card is unaffected either way: shrinking this
     margin moves the card and the graphic up by the SAME amount, since the
     graphic is positioned off the section's bottom edge. */
}
/* Lifts the Form section's CONTENT above .scs-process-divider, whose mountain
   peak now rises behind the service buttons. It must be the .container, NOT the
   <section>: the section carries the `bg-seafoam` background, so giving IT the
   z-index would paint that background over the graphic and hide the mountain
   completely. The container has no background of its own, so the graphic still
   shows through every gap — and through .scs-form-card, whose background is
   semi-transparent. This is the one real rule that justifies the section
   carrying a bespoke class at all. */
.scs-form-section .container {
  position: relative;
  z-index: 1;
}
.scs-form-card-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-transform: uppercase;
  font-size: 2rem;
  margin-bottom: 1.25rem;
}

/* === Button Styles === */
.btn {
  padding: 0.75rem 1rem;
  font-family: var(--font-marine);
  font-weight: var(--font-weight-black);
  border-radius: 50px;
  font-size: 1rem;
  line-height: 1.125;
  margin-bottom: 1rem;
  transition: all var(--transition-standard);
  text-transform: none;
  border: 2px solid transparent;
}

.btn.btn-menu {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}
.btn.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}
.btn.btn-xl {
  padding: 1.25rem 1.75rem;
  font-size: 1.5rem;
}

/* BLUE BTN - Relaxed Blue */
.btn-blue {
  color: var(--color-seafoam);
  background: var(--color-relaxed-blue);
  border-color: var(--color-relaxed-blue);
}
.btn-blue:is(:hover, :active, :focus) {
  color: var(--color-seafoam);
  background: var(--color-relaxed-blue-dark);
  border-color: var(--color-relaxed-blue-dark);
}

/* CONTACT FORM SUBMIT — .btn-<dealer_id>
   contact_bootstrap() renders the /contact submit button as
   `btn btn-primary btn-<dealer_id>`, building the last class from $dealer_id at
   RENDER time — so it is never caught by the ctha- -> scs- prefix rename when a
   site is cloned. This file shipped the rule as .btn-252420: an id belonging to
   neither this site (252466) nor its donor (252427), which left the submit
   button falling through to Bootstrap's default .btn-primary blue.

   Styled to match .scs-btn-gradient, which is what small_contact()'s submit
   uses inside this same .scs-form-card — the card is the dark brand gradient,
   so a navy-family button (the donor's .btn-blue pairing, or scs-btn-mountain)
   would sink into its own panel, the exact regression that hit the AC hero
   button. The orange CTA is the site's established primary action and is the
   one treatment that reads on this card.

   Written as a plain background rather than reusing .scs-btn-gradient's
   ::before/::after crossfade because this element's markup is generated by the
   shared processor and cannot take extra classes or child elements.

   If $dealer_id in includes/config.php ever changes, this selector MUST change
   with it or the button silently loses its styling again. */
.btn-252466 {
  background: var(--color-gradient-buttons);
  color: var(--color-mountain);
  border-color: transparent;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  min-height: 40px;
  transition: background 0.35s ease, color 0.35s ease;
}
.btn-252466:is(:hover, :active, :focus) {
  background: var(--color-gradient-tangerine);
  color: var(--color-mountain);
  border-color: transparent;
}

/* YELLOW BTN - Sunshine Yellow */
.btn-yellow {
  color: var(--color-navy-blue);
  background: var(--color-sunshine-yellow);
  border-color: var(--color-sunshine-yellow);
}
.btn-yellow:is(:hover, :active, :focus) {
  color: var(--color-navy-blue);
  background: var(--color-sunshine-yellow-dark);
  border-color: var(--color-sunshine-yellow-dark);
}

/* OUTLINE BTN - Seafoam Ghost */
.btn-outline {
  color: var(--color-seafoam);
  background: rgba(233, 246, 246, 0.2);
  border: 2px solid var(--color-seafoam);
}
.btn-outline:is(:hover, :active, :focus) {
  color: var(--color-white);
  background: rgba(233, 246, 246, 0.35);
  border-color: var(--color-white);
}

/* OUTLINE BTN - Sunshine Yellow Ghost */
.btn-outline-yellow {
  color: var(--color-sunshine-yellow);
  background: transparent;
  border: 2px solid var(--color-sunshine-yellow);
}
.btn-outline-yellow:is(:hover, :active, :focus) {
  color: var(--color-navy-blue);
  background: var(--color-sunshine-yellow);
  border-color: var(--color-sunshine-yellow-dark);
}

a.link-yellow {
  color: var(--color-sunshine-yellow);
  font-weight: var(--font-weight-bold);
}
a.link-yellow:is(:hover, :focus, :active) {
  text-decoration: underline;
}

a.link-blue {
  color: var(--color-relaxed-blue);
  font-weight: var(--font-weight-bold);
}
a.link-blue:is(:hover, :focus, :active) {
  text-decoration: underline;
}

a.link-seafoam {
  color: var(--color-seafoam);
  font-weight: var(--font-weight-bold);
}
a.link-seafoam:is(:hover, :focus, :active) {
  color: var(--color-seafoam);
  text-decoration: underline;
}

/* === Color Utility Classes === */
/* SUNSHINE YELLOW */
.text-yellow {
  color: var(--color-sunshine-yellow) !important;
}
.bg-yellow {
  background-color: var(--color-sunshine-yellow) !important;
}
.bg-yellow-20 {
  background-color: var(--color-sunshine-yellow-20) !important;
}
.border-yellow {
  border-color: var(--color-sunshine-yellow) !important;
}

/* TROPIC GREEN */
.text-green {
  color: var(--color-tropic-green) !important;
}
.bg-green {
  background-color: var(--color-tropic-green) !important;
}
.border-green {
  border-color: var(--color-tropic-green) !important;
}
.outline-green {
  outline: solid 2px var(--color-tropic-green) !important;
  outline-offset: 0.25rem !important;
}

/* DEEP BLUE */
.text-deep-blue {
  color: var(--color-deep-blue) !important;
}
.bg-deep-blue {
  background-color: var(--color-deep-blue) !important;
}
.border-deep-blue {
  border-color: var(--color-deep-blue) !important;
}

/* NAVY BLUE */
.text-navy {
  color: var(--color-navy-blue) !important;
}
.bg-navy {
  background-color: var(--color-navy-blue) !important;
}
.border-navy {
  border-color: var(--color-navy-blue) !important;
}

/* RELAXED BLUE */
.text-blue {
  color: var(--color-relaxed-blue) !important;
}
.bg-blue {
  background-color: var(--color-relaxed-blue) !important;
}
.bg-blue-15 {
  background-color: var(--color-relaxed-blue-15) !important;
}
.border-blue {
  border-color: var(--color-relaxed-blue) !important;
}

/* SEAFOAM */
.text-seafoam {
  color: var(--color-seafoam) !important;
}
.bg-seafoam {
  background-color: var(--color-seafoam) !important;
}
.border-seafoam {
  border-color: var(--color-seafoam) !important;
}
.bg-seafoam-5 {
  background: var(--color-seafoam-5) !important;
}

/* DARK *//* Footer credit bar. .text-666 is used by includes/footer.php on the Red Barn
   strip and exists on every sibling build (accumax, aviation-mechanical,
   reliable-comfort-services). It was removed here by the Step 6 dead-CSS sweep
   on 2026-08-28, while the footer was still donor markup; the 2026-08-31 footer
   rebuild then reintroduced the class in markup, so the copyright line fell back
   to the body colour and rendered Midnight navy on the near-black bar at 1.16:1
   -- effectively invisible. Restored to the fleet value.
   NOTE: #666 on this bar measures 2.93:1, which is what every RBMG build ships;
   raising it is a fleet-wide branding decision, not a Summit one.
   .bg-dark stays (this bar uses it); .text-dark and .border-dark were unused
   and have been removed. */
.text-666 { color: #666666; }

.bg-dark {
  background-color: var(--color-dark-mode) !important;
}
/* GRAY */
.text-gray {
  color: var(--color-dark-16dp) !important;
}
.bg-gray {
  background-color: var(--color-dark-12dp) !important;
}
.border-gray {
  border-color: var(--color-dark-12dp) !important;
}

/* BLACK */
.text-black {
  color: var(--color-black) !important;
}
.bg-black {
  background-color: var(--color-black) !important;
}
.border-black {
  border-color: var(--color-black) !important;
}

/* Gradients */
.bg-gradient-dark {
  background: var(--color-gradient-dark) !important;
}
.bg-gradient-dark-2 {
  background: var(--color-gradient-dark-2) !important;
}
.bg-gradient-dark-3 {
  background: var(--color-gradient-dark-3) !important;
}
.bg-gradient-sandy-beach {
  background: var(--color-gradient-sandy-beach) !important;
}
.bg-gradient-deep-sea {
  background: var(--color-gradient-deep-sea) !important;
}
.bg-gradient-blue-fade {
  background: var(--color-gradient-blue-fade) !important;
}
.bg-gradient-blue-fade-reverse {
  background: var(--color-gradient-blue-fade-reverse) !important;
}
.bg-gradient-green-fade {
  background: var(--color-gradient-green-fade) !important;
}
.bg-gradient-green-fade-reverse {
  background: var(--color-gradient-green-fade-reverse) !important;
}
.bg-gradient-yellow-fade {
  background: var(--color-gradient-yellow-fade) !important;
}
.bg-gradient-blue {
  background: var(--color-gradient-blue) !important;
}
.bg-gradient-blue-reverse {
  background: var(--color-gradient-blue-reverse) !important;
}

.text-neutral {
  color: var(--color-neutral-50) !important;
}
.text-neutral-400 {
  color: var(--color-neutral-400) !important;
}
.text-neutral-600 {
  color: var(--color-neutral-600) !important;
}
.text-neutral-700 {
  color: var(--color-neutral-700) !important;
}
.fixed-bg-gradient {
  background-attachment: fixed !important;
}
/* === Component Styles === */
.img-fluid {
  margin-bottom: 2rem;
}

ul.list-group,
ol.list-group,
.card,
.table-responsive,
table.table-bordered {
  border-radius: var(--border-radius-card);
  margin-bottom: 1.5rem;
}
.card.h-100 {
  margin-bottom: 0;
}
.card .card-body {
  padding: 1.5rem;
}

/* === Coastal Card === */@media (max-width: 767px) {}
@media (min-width: 1200px) and (max-width: 1400px) {}

/* === Service Area Card === */
.card.service-area {
  border-radius: 50rem;
  background-color: var(--color-deep-blue);
  margin-bottom: 0.75rem;
}
.card.service-area:hover {
  background: var(--color-navy-blue);
}
.card.service-area.no-link:hover {
  background-color: var(--color-deep-blue);
  background-image: none;
  cursor: default;
}
.card.service-area.no-link:hover .card-body span .material-symbols-outlined {
  color: var(--color-sunshine-yellow);
}
.card.service-area .card-body {
  padding: 0.85rem 1rem;
}
.card.service-area .card-body a,
.card.service-area .card-body > span {
  color: var(--color-seafoam);
  font-size: 0.9rem;
  font-family: var(--font-marine);
  font-weight: var(--font-weight-black);
}
.card.service-area:hover .card-body span,
.card.service-area:hover .card-body span .material-symbols-outlined {
  color: var(--color-white);
}

.card.service-area .card-body span .material-symbols-outlined {
  color: var(--color-sunshine-yellow);
}

.border-radius-large {
  border-radius: var(--border-radius-large) !important;
}

.accordion-button .material-symbols-outlined {
  transition: transform 0.3s ease-in-out;
}

.accordion-button em,
.accordion-button strong {
  font-style: normal !important;
  display: contents;
}

.accordion {
  background: transparent;
  border: none;
  color: var(--color-deep-blue);
}
.accordion-item,
.accordion-header,
.accordion-button {
  background: transparent;
  border: none;
  color: var(--color-deep-blue);
}
.accordion-item {
  border-bottom: 1px solid var(--color-relaxed-blue);
}
.accordion-button {
  font-size: 1.125rem;
  font-family: var(--font-marine);
  font-weight: var(--font-weight-black);
  line-height: 1.625rem;
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.accordion-body {
  font-size: 0.875rem;
}

/* OPTIMIZED: Grouped accordion radius resets */
.accordion-item:last-of-type,
.accordion-item:last-of-type .accordion-button,
.accordion-item:last-of-type .accordion-collapse {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.accordion-button:not(.collapsed) {
  color: var(--color-deep-blue);
  box-shadow: none;
  background: transparent;
}

.accordion-button::after {
  display: none !important;
}

/* Was hardcoded to --color-relaxed-blue (= --color-sky, #2988C4), which
   measured 3.12:1 on the FAQ section's bg-seafoam — an outright AA failure for
   body text, and it overrode the surface system entirely at (0,2,0). Reading
   the vars instead means these links follow whatever surface the accordion is
   dropped on: 9.15:1 navy on seafoam today, white if it ever lands on a dark
   band. Underline behaviour is unchanged (transparent, revealed on hover). */
.accordion a {
  color: var(--scs-link, var(--color-mountain));
  text-decoration: underline transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.accordion a:hover {
  color: var(--scs-link-hover, var(--color-midnight));
  text-decoration-color: currentColor;
}

input.form-control,
textarea.form-control {
  color: var(--color-neutral-500) !important;
}

/* Coupon Cards */
.coupon-card {
  border: 4px dashed var(--color-deep-blue);
}

/* Coupon Card Code Badge */
.coupon-card-code {
  background: var(--color-deep-blue);
  border-radius: var(--border-radius-standard);
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.coupon-card .card-body p {
  font-size: 1rem;
}

.coupon-card .card-footer {
  background: transparent;
  border: none;
  padding-bottom: 1rem;
}

.coupon-card .small {
  font-size: 65% !important;
}

/* Placeholder color */
input.form-control::placeholder,
textarea.form-control::placeholder {
  color: var(--color-neutral-500) !important;
  font-family: var(--font-marine);
  opacity: 1;
}

/* Mobile tap targets for the SHORT contact form (small-contact-form.php).
   contact.php already carries this rule in its own scoped <style>; the short
   form never got it, so its inputs rendered at 36px on a 375px viewport —
   under the 44px touch-target floor (2026-09-15 QA, F-009). Scoped to the
   form's own id so no other `.form-control` on the site is affected.
   Font-size is already 16px, so there is no iOS zoom-on-focus issue here —
   only height. Mirrors contact.php's breakpoint exactly; if that rule
   changes, change this one with it. */
@media (max-width: 767.98px) {
  #small-contact-form input:not([type="hidden"]),
  #small-contact-form select,
  #small-contact-form textarea,
  #small-contact-form .btn {
    min-height: 44px;
  }
}

/* Select */
select.form-control {
  color: var(--color-neutral-500) !important;
}

select.form-control:has(option[value='']:checked),
select.form-control:has(option[disabled][selected]) {
  color: var(--color-neutral-500) !important;
}
input.form-control,
textarea.form-control,
input.form-control.contact_form,
textarea.form-control.contact_form {
  color: var(--color-neutral-500) !important;
  border: none;
}

/* === Utility Classes === */
em,
u {
  font-style: inherit !important;
  text-decoration: inherit !important;
}
a {
  text-decoration: none;
}

/* === Colored List Groups === */
ul.list-group.list-yellow,
ul.list-group.list-blue {
  list-style: none;
  padding-left: 0;
}

ul.list-group.list-yellow li,
ul.list-group.list-blue li {
  font-size: 0.75rem;
  border: none;
  border-radius: var(--border-radius-standard);
  padding: 0.65rem 0.65rem;
  margin-bottom: 0.5rem;
}

ul.list-group.list-yellow li {
  background: var(--color-sunshine-yellow-15);
}

ul.list-group.list-blue li {
  background: var(--color-relaxed-blue-10);
}

ul.list-group.list-yellow li .material-symbols-outlined,
ul.list-group.list-blue li .material-symbols-outlined {
  font-size: 0.95rem;
  margin-right: 0.25rem;
}

ul.list-group.list-yellow li .material-symbols-outlined {
  color: var(--color-sunshine-yellow);
}

ul.list-group.list-blue li .material-symbols-outlined {
  color: var(--color-relaxed-blue);
}
/* === Utility Classes === */

.rounded-bottom-xl {
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
}

/* === Service Badges === */
.badge-green {
  background-color: var(--color-tropic-green);
  color: var(--color-seafoam);
  font-family: var(--font-marine);
  font-weight: var(--font-weight-black);
  font-size: 0.625rem;
  line-height: 12px;
  padding: 0.25rem 0.5rem;
  border-radius: 300px;
}

/* === Sub Page Styles === */

/* === Footer Styles (Figma node 44089:2602) === */
.scs-footer {
  background: var(--color-ghost);
  padding: 4rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.scs-footer-mountain-bg {
  position: absolute;
  bottom: 0;
  left: 33.7%;
  width: 70%;
  height: auto;
  pointer-events: none;
  z-index: 0;
}
.scs-footer > .container {
  position: relative;
  z-index: 1;
}
.scs-footer-logo {
  width: 100%;
  max-width: 313px;
  height: auto;
}
.scs-footer-advantage {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.scs-footer-advantage .fa-solid {
  color: var(--color-fall);
  font-size: 1.5rem;
  flex-shrink: 0;
}
.scs-footer-advantage-label {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-fall);
  text-transform: uppercase;
  font-size: 1.25rem;
  margin-bottom: 0;
}
.scs-footer-advantage-value {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-mountain);
  font-size: 1.25rem;
}
.scs-footer-advantage-value.d-flex {
  align-items: center;
}
.scs-footer-advantage-value a {
  color: var(--color-mountain);
  font-size: 1.5rem;
  line-height: 1;
}
.scs-footer-advantage-value a:is(:hover, :focus-visible) {
  color: var(--color-fall);
}
.scs-footer-column h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-mountain);
  text-transform: uppercase;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
.scs-footer-column ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.scs-footer-column li {
  margin-bottom: 0.25rem;
}
.scs-footer-column a {
  color: var(--color-black);
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none;
}
.scs-footer-column a:is(:hover, :focus-visible) {
  text-decoration: underline;
}
.scs-footer-legal-link a {
  color: var(--color-fall);
}

/* === Media Queries === */
@media (max-width: 1400px) {
  .navbar-light .navbar-nav .nav-link {
    font-size: 0.85rem;
  }
  .overlay-icon {
    width: 50%;
    height: auto;
    z-index: 2;
  }
}

@media (max-width: 1200px) {
  .offcanvas-body {
    border-top: var(--color-tropic-green) 2px solid;
  }
  .navbar-nav,
  .shrink-menu .navbar-nav {
    height: fit-content;
  }
  .navbar-nav {
    width: auto;
  }

  .navbar {
    height: 95px;
    transition: height var(--transition-standard);
  }
  .shrink-menu .navbar {
    height: 80px;
  }

  .nav-fill .nav-item,
  .nav-fill > .nav-link {
    flex: 1 1 auto;
    text-align: left;
  }
  .dropend .dropdown-item.has-dropend::after {
    content: 'expand_more';
  }
  .navbar-light .navbar-nav .nav-link {
    font-size: 1.25rem;
  }

}

@media (max-width: 991px) {
  .scs-menu-padding {
    padding: 0 1.5rem;
  }
  .navbar-light .navbar-nav .nav-link {
    font-size: 1.35rem;
  }
}

@media (max-width: 767px) {
  /* Sub-page convention override — see the "reserved for Step 8" block earlier in this file */
  .scs-hero-intro {
    height: fit-content;
    padding-top: 10rem;
    padding-bottom: 5rem;
  }
  .scs-hero-intro.scs-sub-page {
    height: fit-content;
    padding-top: 10rem;
    padding-bottom: 5rem;
  }
  .overlay-icon {
    display: none;
  }
}

@media (max-width: 450px) {
  .scs-menu-padding {
    padding: 0 0.25rem;
  }
}